From ef06ea8090536b430b6e1f6dd5637ebf4fd3ca6c Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 13 Dec 2022 09:58:53 +0100
Subject: [PATCH] fix(editor): Schema view switch n8n-alert with n8n-info-tip

---
 .../src/components/RunDataSchema.vue          |  4 +-
 .../editor-ui/src/components/RunDataTable.vue |  2 +-
 .../__snapshots__/RunDataSchema.test.ts.snap  | 43 +++++++------------
 3 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index e14410c4d04..ccacb4d2d45 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -72,7 +72,7 @@ const onDragEnd = (el: HTMLElement) => {
 
 <template>
 	<div :class="$style.schemaWrapper">
-		<n8n-alert v-if="isDataEmpty" :background="false" :description="i18n.baseText('dataMapping.schemaView.emptyData')" />
+		<n8n-info-tip v-if="isDataEmpty">{{ i18n.baseText('dataMapping.schemaView.emptyData') }}</n8n-info-tip>
 		<draggable
 			v-else
 			type="mapping"
@@ -116,7 +116,7 @@ const onDragEnd = (el: HTMLElement) => {
 	width: 100%;
 	background-color: var(--color-background-base);
 
-	div[class*="alert"] {
+	> div[class*="info"] {
 		padding: 0 var(--spacing-s);
 	}
 }
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index b8c36eae83c..cbe7fe420af 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -12,7 +12,7 @@
 					@mouseenter="onMouseEnterCell"
 					@mouseleave="onMouseLeaveCell"
 				>
-					<n8n-alert :background="false" :description="$locale.baseText('runData.emptyItemHint')" />
+					<n8n-info-tip>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-info-tip>
 				</td>
 				<td :class="$style.tableRightMargin"></td>
 			</tr>
diff --git a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
index 94e4873b9f0..c36dcf00a75 100644
--- a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
@@ -3,13 +3,13 @@
 exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
 <div>
   <div
-    class="_schemaWrapper_1wosl_1"
+    class="_schemaWrapper_1x7h2_1"
   >
     <div
       class=""
     >
       <div
-        class="_schema_1wosl_1"
+        class="_schema_1x7h2_1"
       >
         <div
           class="_item_eg159_1"
@@ -235,39 +235,26 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
 exports[`RunDataJsonSchema.vue > renders schema for empty data 1`] = `
 <div>
   <div
-    class="_schemaWrapper_1wosl_1"
+    class="_schemaWrapper_1x7h2_1"
   >
     <div
-      class="n8n-alert"
-      role="alert"
+      class="n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12"
     >
-      <div
-        class="_content_1qxmg_213"
+      <span
+        class="_iconText_3egb8_28"
       >
         <span
-          class="_icon_1qxmg_209"
+          class="n8n-icon n8n-text _compact_e4k11_34 _size-medium_e4k11_19 _regular_e4k11_5"
         >
-          <span
-            class="n8n-icon n8n-text _compact_e4k11_34 _size-medium_e4k11_19 _regular_e4k11_5"
-          >
-            <font-awesome-icon-stub
-              class="_medium_1pnjy_9"
-              icon="info-circle"
-            />
-          </span>
+          <font-awesome-icon-stub
+            class="_medium_1pnjy_9"
+            icon="info-circle"
+          />
         </span>
-        <div
-          class="_text_1qxmg_225"
-        >
-          <!---->
-          <div
-            class="_description_1qxmg_236"
-          >
-            No data to show - item(s) exist, but they’re empty
-          </div>
-        </div>
-      </div>
-      <!---->
+        <span>
+          No data to show - item(s) exist, but they’re empty
+        </span>
+      </span>
     </div>
   </div>
 </div>