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/constants.ts

@@ -63,6 +63,7 @@ export const EXECUTE_COMMAND_NODE_TYPE = 'n8n-nodes-base.executeCommand';
 export const HTTP_REQUEST_NODE_TYPE = 'n8n-nodes-base.httpRequest';
 export const HUBSPOT_TRIGGER_NODE_TYPE = 'n8n-nodes-base.hubspotTrigger';
 export const IF_NODE_TYPE = 'n8n-nodes-base.if';
+export const INTERVAL_NODE_TYPE = 'n8n-nodes-base.interval';
 export const ITEM_LISTS_NODE_TYPE = 'n8n-nodes-base.itemLists';
 export const JIRA_NODE_TYPE = 'n8n-nodes-base.jira';
 export const JIRA_TRIGGER_NODE_TYPE = 'n8n-nodes-base.jiraTrigger';
@@ -193,6 +194,7 @@ export const MODAL_CONFIRMED = 'confirmed';
 
 export const VALID_EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 export const LOCAL_STORAGE_ACTIVATION_FLAG = 'N8N_HIDE_ACTIVATION_ALERT';
+export const LOCAL_STORAGE_MAPPING_FLAG = 'N8N_MAPPING_ONBOARDED';
 export const BASE_NODE_SURVEY_URL = 'https://n8n-community.typeform.com/to/BvmzxqYv#nodename=';
 
 export const HIRING_BANNER = `
@@ -242,3 +244,5 @@ export enum VIEWS {
 	API_SETTINGS = "APISettings",
 	NOT_FOUND = "NotFoundView",
 }
+
+export const MAPPING_PARAMS = [`$evaluateExpression`, `$item`, `$jmespath`, `$node`, `$binary`, `$data`, `$env`, `$json`, `$now`, `$parameters`, `$position`, `$resumeWebhookUrl`, `$runIndex`, `$today`, `$workflow`, '$parameter'];