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/FixedCollectionParameter.vue

@@ -10,73 +10,72 @@
 			class="fixed-collection-parameter-property"
 		>
 			<n8n-input-label
-				:label="property.displayName === '' || parameter.options.length === 1 ? '' : $locale.nodeText().inputLabelDisplayName(property, path)"
+				v-if="property.displayName !== '' && (parameter.options && parameter.options.length !== 1)"
+				:label="$locale.nodeText().inputLabelDisplayName(property, path)"
 				:underline="true"
-				:labelHoverableOnly="true"
 				size="small"
-			>
-				<div v-if="multipleValues === true">
-					<div
-						v-for="(value, index) in values[property.name]"
-						:key="property.name + index"
-						class="parameter-item"
-					>
-						<div class="parameter-item-wrapper">
-							<div class="delete-option" v-if="!isReadOnly">
-								<font-awesome-icon
-									icon="trash"
-									class="reset-icon clickable"
-									:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
-									@click="deleteOption(property.name, index)"
-								/>
-								<div v-if="sortable" class="sort-icon">
-									<font-awesome-icon
-										v-if="index !== 0"
-										icon="angle-up"
-										class="clickable"
-										:title="$locale.baseText('fixedCollectionParameter.moveUp')"
-										@click="moveOptionUp(property.name, index)"
-									/>
-									<font-awesome-icon
-										v-if="index !== (values[property.name].length - 1)"
-										icon="angle-down"
-										class="clickable"
-										:title="$locale.baseText('fixedCollectionParameter.moveDown')"
-										@click="moveOptionDown(property.name, index)"
-									/>
-								</div>
-							</div>
-							<parameter-input-list
-								:parameters="property.values"
-								:nodeValues="nodeValues"
-								:path="getPropertyPath(property.name, index)"
-								:hideDelete="true"
-								@valueChanged="valueChanged"
-							/>
-						</div>
-					</div>
-				</div>
-				<div v-else class="parameter-item">
+			/>
+			<div v-if="multipleValues === true">
+				<div
+					v-for="(value, index) in values[property.name]"
+					:key="property.name + index"
+					class="parameter-item"
+				>
 					<div class="parameter-item-wrapper">
 						<div class="delete-option" v-if="!isReadOnly">
 							<font-awesome-icon
 								icon="trash"
 								class="reset-icon clickable"
 								:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
-								@click="deleteOption(property.name)"
+								@click="deleteOption(property.name, index)"
 							/>
+							<div v-if="sortable" class="sort-icon">
+								<font-awesome-icon
+									v-if="index !== 0"
+									icon="angle-up"
+									class="clickable"
+									:title="$locale.baseText('fixedCollectionParameter.moveUp')"
+									@click="moveOptionUp(property.name, index)"
+								/>
+								<font-awesome-icon
+									v-if="index !== (values[property.name].length - 1)"
+									icon="angle-down"
+									class="clickable"
+									:title="$locale.baseText('fixedCollectionParameter.moveDown')"
+									@click="moveOptionDown(property.name, index)"
+								/>
+							</div>
 						</div>
 						<parameter-input-list
 							:parameters="property.values"
 							:nodeValues="nodeValues"
-							:path="getPropertyPath(property.name)"
-							class="parameter-item"
-							@valueChanged="valueChanged"
+							:path="getPropertyPath(property.name, index)"
 							:hideDelete="true"
+							@valueChanged="valueChanged"
 						/>
 					</div>
 				</div>
-			</n8n-input-label>
+			</div>
+			<div v-else class="parameter-item">
+				<div class="parameter-item-wrapper">
+					<div class="delete-option" v-if="!isReadOnly">
+						<font-awesome-icon
+							icon="trash"
+							class="reset-icon clickable"
+							:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
+							@click="deleteOption(property.name)"
+						/>
+					</div>
+					<parameter-input-list
+						:parameters="property.values"
+						:nodeValues="nodeValues"
+						:path="getPropertyPath(property.name)"
+						class="parameter-item"
+						@valueChanged="valueChanged"
+						:hideDelete="true"
+					/>
+				</div>
+			</div>
 		</div>
 
 		<div v-if="parameterOptions.length > 0 && !isReadOnly">