feat(editor): Add drag and drop data mapping (#3708)

* commit package lock

* refactor param options out

* use action toggle

* handle click on toggle

* update color toggle

* fix toggle

* show options

* update expression color

* update pointer

* fix readonly

* fix readonly

* fix expression spacing

* refactor input label

* show icon for headers

* center icon

* fix multi params

* add credential options

* increase spacing

* update expression view

* update transition

* update el padding

* rename side to options

* fix label overflow

* fix bug with unnessary lines

* add overlay

* fix bug affecting other pages

* clean up spacing

* rename

* update icon size

* fix toggle in users

* clean up func

* clean up css

* use css var

* fix overlay bug

* clean up input

* clean up input

* clean up unnessary css

* revert

* update quotes

* rename method

* remove console errors

* refactor data table

* add drag button

* make hoverable cells

* add drag hint

* disabel for output panel

* add drag

* disable for readonly

* Add dragging

* add draggable pill

* add mapping targets

* remove font color

* Transferable

* fix linting issue

* teleport component

* fix line

* disable for readonly

* fix position of data pill

* fix position of data pill

* ignore import

* add droppable state

* remove draggable key

* update bg color

* add value drop

* use direct input

* remove transition

* add animation

* shorten name

* handle empty value

* fix switch bug

* fix up animation

* add notification

* add hint

* add tooltip

* show draggable hintm

* fix multiple expre

* fix hoverable

* keep options on focus

* increase timeouts

* fix bug in set node

* add transition on hover out

* fix tooltip onboarding bug

* only update expression if changes

* add open delay

* fix header highlight issue

* update text

* dont show tooltip always

* update docs url

* update ee border

* add sticky behav

* hide error highlight if dropping

* switch out grip icon

* increase timeout

* add delay

* show hint on execprev

* add telemetry event

* add telemetry event

* add telemetry event

* fire event on hint showing

* fix telemetry event

* add path

* fix drag hint issue

* decrease bottom margin

* update mapping keys

* remove file

* hide overflow

* sort params

* add space

* prevent scrolling

* remove dropshadow

* force cursor

* address some comments

* add thead tbody

* add size opt

packages/editor-ui/src/components/RunData.vue

@@ -102,28 +102,8 @@
 				</n8n-text>
 			</div>
 
-			<div v-else-if="hasNodeRun && displayMode === 'table' && tableData && tableData.columns && tableData.columns.length === 0" :class="$style.dataDisplay">
-				<table :class="$style.table">
-					<tr>
-						<th :class="$style.emptyCell"></th>
-					</tr>
-					<tr v-for="(row, index1) in tableData.data" :key="index1">
-						<td>
-							<n8n-text>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-text>
-						</td>
-					</tr>
-				</table>
-			</div>
-
 			<div v-else-if="hasNodeRun && displayMode === 'table' && tableData" :class="$style.dataDisplay">
-				<table :class="$style.table">
-					<tr>
-						<th v-for="column in (tableData.columns || [])" :key="column">{{column}}</th>
-					</tr>
-					<tr v-for="(row, index1) in tableData.data" :key="index1">
-						<td v-for="(data, index2) in row" :key="index2">{{ [null, undefined].includes(data) ? '&nbsp;' : data }}</td>
-					</tr>
-				</table>
+				<RunDataTable :node="node" :tableData="tableData" :mappingEnabled="mappingEnabled" :distanceFromActive="distanceFromActive" :showMappingHint="showMappingHint" :runIndex="runIndex" :totalRuns="maxRunIndex" />
 			</div>
 
 			<div v-else-if="hasNodeRun && displayMode === 'json'" :class="$style.jsonDisplay">
@@ -261,6 +241,7 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import mixins from 'vue-typed-mixins';
 
 import { saveAs } from 'file-saver';
+import RunDataTable from './RunDataTable.vue';
 
 // A path that does not exist so that nothing is selected by default
 const deselectedPlaceholder = '_!^&*';
@@ -278,6 +259,7 @@ export default mixins(
 			NodeErrorView,
 			VueJsonPretty,
 			WarningTooltip,
+			RunDataTable,
 		},
 		props: {
 			nodeUi: {
@@ -312,6 +294,15 @@ export default mixins(
 			overrideOutputs: {
 				type: Array,
 			},
+			mappingEnabled: {
+				type: Boolean,
+			},
+			distanceFromActive: {
+				type: Number,
+			},
+			showMappingHint: {
+				type: Boolean,
+			},
 		},
 		data () {
 			return {
@@ -924,41 +915,6 @@ export default mixins(
 	margin-bottom: var(--spacing-s);
 }
 
-.table {
-	border-collapse: separate;
-	text-align: left;
-	width: calc(100% - var(--spacing-s));
-	margin-right: var(--spacing-s);
-	font-size: var(--font-size-s);
-
-	th {
-		padding: var(--spacing-2xs);
-		background-color: var(--color-background-base);
-		border-top: var(--border-base);
-		border-bottom: var(--border-base);
-		border-left: var(--border-base);
-		position: sticky;
-		top: 0;
-	}
-
-	td {
-		padding: var(--spacing-2xs);
-		border-bottom: var(--border-base);
-		border-left: var(--border-base);
-		overflow-wrap: break-word;
-		max-width: 300px;
-		white-space: pre-wrap;
-	}
-
-	th:last-child, td:last-child {
-		border-right: var(--border-base);
-	}
-}
-
-.emptyCell {
-	height: 32px;
-}
-
 .itemsCount {
 	margin-left: var(--spacing-s);
 	margin-bottom: var(--spacing-s);