From 343f53bf5393e86eb850d07de85b762476294656 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Tue, 20 Dec 2022 09:39:38 +0100
Subject: [PATCH] feat: Update mapping pill for table/json views (#4965)

* feat: standarize mapping pill

* test: update test
---
 .../editor-ui/src/components/MappingPill.vue  | 60 +++++++++++++++++++
 .../editor-ui/src/components/RunDataJson.vue  | 31 +---------
 .../src/components/RunDataSchema.vue          | 46 +-------------
 .../editor-ui/src/components/RunDataTable.vue | 48 ++-------------
 .../__snapshots__/RunDataSchema.test.ts.snap  |  6 +-
 .../src/plugins/i18n/locales/en.json          |  2 -
 6 files changed, 72 insertions(+), 121 deletions(-)
 create mode 100644 packages/editor-ui/src/components/MappingPill.vue

diff --git a/packages/editor-ui/src/components/MappingPill.vue b/packages/editor-ui/src/components/MappingPill.vue
new file mode 100644
index 000000000..a49cf1544
--- /dev/null
+++ b/packages/editor-ui/src/components/MappingPill.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+type Props = {
+	html: string;
+	canDrop: boolean;
+};
+
+withDefaults(defineProps<Props>(), {
+	canDrop: false,
+});
+
+</script>
+
+<template>
+	<div
+		:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
+		v-html="html"
+	/>
+</template>
+
+<style lang="scss" module>
+.dragPill {
+	display: inline-flex;
+	height: 24px;
+	padding: 0 var(--spacing-3xs);
+	border: 1px solid var(--color-foreground-light);
+	border-radius: 4px;
+	background: var(--color-background-xlight);
+	font-size: var(--font-size-2xs);
+	color: var(--color-text-base);
+	white-space: nowrap;
+	align-items: center;
+
+	span {
+		display: flex;
+		height: 100%;
+		align-items: center;
+	}
+}
+
+.droppablePill {
+	&,
+	span span {
+		color: var(--color-success);
+		border-color: var(--color-success-light);
+		background-color: white;
+	}
+}
+
+.defaultPill {
+	transform: translate(-50%, -100%);
+	box-shadow: 0 2px 6px rgba(68, 28, 23, 0.2);
+
+	&,
+	span span {
+		color: var(--color-primary);
+		border-color: var(--color-primary-tint-1);
+		background-color: var(--color-primary-tint-3);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 37901caee..76bf9bf36 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -18,13 +18,7 @@
 			@dragend="onDragEnd"
 		>
 			<template #preview="{ canDrop, el }">
-				<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
-					{{
-						$locale.baseText('dataMapping.mapKeyToField', {
-							interpolate: { name: getShortKey(el) },
-						})
-					}}
-				</div>
+				<MappingPill v-if="el" :html="getShortKey(el)"	:can-drop="canDrop" />
 			</template>
 			<template>
 				<vue-json-pretty
@@ -84,6 +78,7 @@ import { INodeUi } from '@/Interface';
 import { externalHooks } from '@/mixins/externalHooks';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
+import MappingPill from './MappingPill.vue';
 
 const runDataJsonActions = () => import('@/components/RunDataJsonActions.vue');
 
@@ -93,6 +88,7 @@ export default mixins(externalHooks).extend({
 		VueJsonPretty,
 		Draggable,
 		runDataJsonActions,
+		MappingPill,
 	},
 	props: {
 		editMode: {
@@ -256,27 +252,6 @@ export default mixins(externalHooks).extend({
 	}
 }
 
-.dragPill {
-	display: flex;
-	height: 24px;
-	align-items: center;
-	padding: 0 var(--spacing-4xs);
-	color: var(--color-text-xlight);
-	font-weight: var(--font-weight-bold);
-	font-size: var(--font-size-2xs);
-	border-radius: var(--border-radius-base);
-	white-space: nowrap;
-}
-
-.droppablePill {
-	background-color: var(--color-success);
-}
-
-.defaultPill {
-	background-color: var(--color-primary);
-	transform: translate(-50%, -100%);
-	box-shadow: 0 2px 6px rgba(68, 28, 23, 0.2);
-}
 </style>
 
 <style lang="scss">
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index c212fe937..d85d2a874 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -10,6 +10,7 @@ import { telemetry } from '@/plugins/telemetry';
 import { IDataObject } from 'n8n-workflow';
 import { getSchema, isEmpty, mergeDeep } from '@/utils';
 import { i18n } from '@/plugins/i18n';
+import MappingPill from './MappingPill.vue';
 
 type Props = {
 	data: IDataObject[];
@@ -83,11 +84,7 @@ const onDragEnd = (el: HTMLElement) => {
 			@dragend="onDragEnd"
 		>
 			<template #preview="{ canDrop, el }">
-				<div
-					v-if="el"
-					:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
-					v-html="el.outerHTML"
-				/>
+				<MappingPill v-if="el" :html="el.outerHTML"	:can-drop="canDrop" />
 			</template>
 			<template>
 				<div :class="$style.schema">
@@ -131,43 +128,4 @@ const onDragEnd = (el: HTMLElement) => {
 	padding: 0 var(--spacing-s) var(--spacing-s);
 }
 
-.dragPill {
-	display: inline-flex;
-	height: 24px;
-	padding: 0 var(--spacing-3xs);
-	border: 1px solid var(--color-foreground-light);
-	border-radius: 4px;
-	background: var(--color-background-xlight);
-	font-size: var(--font-size-2xs);
-	color: var(--color-text-base);
-	white-space: nowrap;
-	align-items: center;
-
-	span {
-		display: flex;
-		height: 100%;
-		align-items: center;
-	}
-}
-
-.droppablePill {
-	&,
-	span span {
-		color: var(--color-success);
-		border-color: var(--color-success-light);
-		background-color: white;
-	}
-}
-
-.defaultPill {
-	transform: translate(-50%, -100%);
-	box-shadow: 0 2px 6px rgba(68, 28, 23, 0.2);
-
-	&,
-	span span {
-		color: var(--color-primary);
-		border-color: var(--color-primary-tint-1);
-		background-color: var(--color-primary-tint-3);
-	}
-}
 </style>
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 192990495..4e80a7fed 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -40,15 +40,7 @@
 								@dragend="(column) => onDragEnd(column, 'column')"
 							>
 								<template #preview="{ canDrop }">
-									<div
-										:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
-									>
-										{{
-											$locale.baseText('dataMapping.mapKeyToField', {
-												interpolate: { name: shorten(column, 16, 2) },
-											})
-										}}
-									</div>
+									<MappingPill :html="shorten(column, 16, 2)"	:can-drop="canDrop" />
 								</template>
 								<template #default="{ isDragging }">
 									<div
@@ -105,18 +97,7 @@
 				ref="draggable"
 			>
 				<template #preview="{ canDrop, el }">
-					<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
-						{{
-							$locale.baseText(
-								tableData.data.length > 1
-									? 'dataMapping.mapAllKeysToField'
-									: 'dataMapping.mapKeyToField',
-								{
-									interpolate: { name: shorten(getPathNameFromTarget(el) || '', 16, 2) },
-								},
-							)
-						}}
-					</div>
+					<MappingPill :html="shorten(getPathNameFromTarget(el) || '', 16, 2)"	:can-drop="canDrop" />
 				</template>
 				<template>
 					<tr
@@ -185,12 +166,13 @@ import { externalHooks } from '@/mixins/externalHooks';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
+import MappingPill from './MappingPill.vue';
 
 const MAX_COLUMNS_LIMIT = 40;
 
 export default mixins(externalHooks).extend({
 	name: 'run-data-table',
-	components: { Draggable },
+	components: { Draggable, MappingPill },
 	props: {
 		node: {
 			type: Object as PropType<INodeUi>,
@@ -665,28 +647,6 @@ export default mixins(externalHooks).extend({
 	margin-left: var(--spacing-2xs);
 }
 
-.dragPill {
-	display: flex;
-	height: 24px;
-	align-items: center;
-	padding: 0 var(--spacing-4xs);
-	color: var(--color-text-xlight);
-	font-weight: var(--font-weight-bold);
-	font-size: var(--font-size-2xs);
-	border-radius: var(--border-radius-base);
-	white-space: nowrap;
-}
-
-.droppablePill {
-	background-color: var(--color-success);
-}
-
-.defaultPill {
-	background-color: var(--color-primary);
-	transform: translate(-50%, -100%);
-	box-shadow: 0px 2px 6px rgba(68, 28, 23, 0.2);
-}
-
 .dataKey {
 	color: var(--color-text-dark);
 	line-height: 1.7;
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 ea82f9d6f..848fae834 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_5xhkc_1"
+    class="_schemaWrapper_1mtap_1"
   >
     <div
       class=""
     >
       <div
-        class="_schema_5xhkc_1"
+        class="_schema_1mtap_1"
       >
         <div
           class="_item_14xdy_1"
@@ -235,7 +235,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
 exports[`RunDataJsonSchema.vue > renders schema for empty data 1`] = `
 <div>
   <div
-    class="_schemaWrapper_5xhkc_1"
+    class="_schemaWrapper_1mtap_1"
   >
     <div
       class="n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12"
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 73a95b235..517d1e7ea 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -366,8 +366,6 @@
 	"dataMapping.tableHint": "<img src='/static/data-mapping-gif.gif'/> Drag a column onto <b>{name}</b> to map it",
 	"dataMapping.jsonHint": "<img src='/static/json-mapping-gif.gif'/> Drag a JSON key onto <b>{name}</b> to map data",
 	"dataMapping.schemaHint": "<img src='/static/schema-mapping-gif.gif'/> Drag a datapill onto <b>{name}</b> to map data",
-	"dataMapping.mapKeyToField": "Map '{name}' to a field",
-	"dataMapping.mapAllKeysToField": "Map every '{name}' to a field",
 	"dataMapping.tableView.tableColumnsExceeded": "Some columns are hidden",
 	"dataMapping.tableView.tableColumnsExceeded.tooltip": "Your data has more than {columnLimit} columns so some are hidden. Switch to {link} to see all data.",
 	"dataMapping.tableView.tableColumnsExceeded.tooltip.link": "JSON view",