update fixed collection

packages/cli/src/controllers/e2e.controller.ts

@@ -115,7 +115,6 @@ export class E2EController {
 	) {
 		license.isFeatureEnabled = (feature: BooleanLicenseFeature) =>
 			this.enabledFeatures[feature] ?? false;
-		// @ts-expect-error Overriding method
 		// eslint-disable-next-line @typescript-eslint/unbound-method
 		license.getFeatureValue<NumericLicenseFeature> = (feature: NumericLicenseFeature) =>
 			this.numericFeatures[feature] ?? UNLIMITED_LICENSE_QUOTA;

packages/design-system/src/css/_tokens.dark.scss

@@ -37,7 +37,7 @@
 	--color-assistant-highlight-1: #8c90f2;
 	--color-assistant-highlight-2: #a977f0;
 	--color-assistant-highlight-3: #f0778b;
-	--color-askAssistant-button-background: #2E2E2E;
+	--color-askAssistant-button-background: #2e2e2e;
 	--color-askAssistant-button-background-hover: #383839;
 	--color-askAssistant-button-background-active: #414244;
 	--color-assistant-inner-highlight-hover: var(--color-askAssistant-button-background-hover);
@@ -461,6 +461,8 @@
 	--color-configurable-node-name: var(--color-text-dark);
 	--color-secondary-link: var(--prim-color-secondary-tint-200);
 	--color-secondary-link-hover: var(--prim-color-secondary-tint-100);
+	//Params
+	--color-icon-base: var(--prim-gray-320);
 }
 
 body[data-theme='dark'] {

packages/design-system/src/css/_tokens.scss

@@ -80,11 +80,11 @@
 	--color-canvas-read-only-line: var(--prim-gray-30);
 	--color-canvas-selected: var(--prim-gray-70);
 	--color-canvas-selected-transparent: hsla(var(--prim-gray-h), 47%, 30%, 0.1);
-  --color-canvas-label-background: hsla(
+	--color-canvas-label-background: hsla(
-			var(--color-canvas-background-h),
+		var(--color-canvas-background-h),
-			var(--color-canvas-background-s),
+		var(--color-canvas-background-s),
-			var(--color-canvas-background-l),
+		var(--color-canvas-background-l),
-			0.85
+		0.85
 	);
 
 	// Nodes
@@ -614,6 +614,9 @@
 	--spacing-3xl: 4rem;
 	--spacing-4xl: 8rem;
 	--spacing-5xl: 16rem;
+
+	//Params
+	--color-icon-base: var(--prim-gray-420);
 }
 
 :root {

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

@@ -244,15 +244,7 @@ export default defineComponent({
 					<div
 						:class="index ? 'border-top-dashed parameter-item-wrapper ' : 'parameter-item-wrapper'"
 					>
-						<div v-if="!isReadOnly" class="delete-option">
+						<div v-if="!isReadOnly" class="drag-option">
-							<n8n-icon-button
-								type="tertiary"
-								text
-								size="mini"
-								icon="trash"
-								:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
-								@click="deleteOption(property.name, index)"
-							></n8n-icon-button>
 							<n8n-icon-button
 								v-if="sortable && index !== 0"
 								type="tertiary"
@@ -272,6 +264,16 @@ export default defineComponent({
 								@click="moveOptionDown(property.name, index)"
 							></n8n-icon-button>
 						</div>
+						<div v-if="!isReadOnly" class="delete-option">
+							<n8n-icon-button
+								type="tertiary"
+								text
+								size="mini"
+								icon="trash"
+								:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
+								@click="deleteOption(property.name, index)"
+							></n8n-icon-button>
+						</div>
 						<Suspense>
 							<ParameterInputList
 								:parameters="property.values"
@@ -343,7 +345,8 @@ export default defineComponent({
 .fixed-collection-parameter {
 	padding-left: var(--spacing-s);
 
-	.delete-option {
+	.delete-option,
+	.drag-option {
 		display: flex;
 		flex-direction: column;
 	}
@@ -379,7 +382,7 @@ export default defineComponent({
 .fixed-collection-parameter-property {
 	margin: var(--spacing-xs) 0;
 }
-
+.parameter-item:hover > .parameter-item-wrapper > .drag-option,
 .parameter-item:hover > .parameter-item-wrapper > .delete-option {
 	opacity: 1;
 }

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

@@ -29,6 +29,7 @@ import {
 } from '@/utils/nodeTypesUtils';
 import { get, set } from 'lodash-es';
 import { useRouter } from 'vue-router';
+import { Button } from '../../../design-system/src/components/AskAssistantButton/AskAssistantButton.stories';
 
 const LazyFixedCollectionParameter = defineAsyncComponent(
 	async () => await import('./FixedCollectionParameter.vue'),
@@ -416,16 +417,6 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 				v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
 				class="multi-parameter"
 			>
-				<n8n-icon-button
-					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
-					type="tertiary"
-					text
-					size="mini"
-					icon="trash"
-					class="delete-option"
-					:title="$locale.baseText('parameterInputList.delete')"
-					@click="deleteOption(parameter.name)"
-				></n8n-icon-button>
 				<n8n-input-label
 					:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
 					:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
@@ -465,6 +456,16 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 					<n8n-icon icon="exclamation-triangle" size="xsmall" />
 					{{ $locale.baseText('parameterInputList.loadingError') }}
 				</n8n-text>
+				<n8n-icon-button
+					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
+					type="tertiary"
+					text
+					size="mini"
+					icon="trash"
+					class="delete-option"
+					:title="$locale.baseText('parameterInputList.delete')"
+					@click="deleteOption(parameter.name)"
+				></n8n-icon-button>
 			</div>
 			<ResourceMapper
 				v-else-if="parameter.type === 'resourceMapper'"
@@ -532,12 +533,25 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 
 <style lang="scss">
 .parameter-input-list-wrapper {
+	.drag-option {
+		position: absolute;
+		opacity: 0;
+		top: 28px;
+		left: calc(-1 * var(--spacing-2xs));
+		transition: opacity 100ms ease-in;
+		color: var(--color-icon-base);
+	}
 	.delete-option {
 		position: absolute;
 		opacity: 0;
-		top: 0;
+		top: 28px;
-		left: calc(-1 * var(--spacing-2xs));
+		right: calc(-1 * var(--spacing-2xs));
 		transition: opacity 100ms ease-in;
+		color: var(--color-icon-base);
+	}
+	.drag-option > Button:hover,
+	.delete-option > Button:hover {
+		color: var(--color-primary);
 	}
 
 	.indent > div {
@@ -556,7 +570,10 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 	.parameter-item {
 		position: relative;
 		margin: var(--spacing-xs) 0;
+		width: calc(100% - 28px);
 	}
+	.parameter-item:hover > .drag-option,
+	.multi-parameter:hover > .drag-option,
 	.parameter-item:hover > .delete-option,
 	.multi-parameter:hover > .delete-option {
 		opacity: 1;