From 7a23d9c98b5a91743ae951ac34f377e6fbcce91f Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 8 Nov 2024 10:51:06 +0100
Subject: [PATCH] Add context to schema view to ensure unique ids

---
 .../src/components/ExpressionEditModal.vue    |  1 +
 .../src/components/RunDataSchema.vue          |  6 +++--
 .../src/components/RunDataSchemaItem.vue      |  7 +++---
 .../__snapshots__/RunDataSchema.test.ts.snap  | 24 +++++++++----------
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/editor-ui/src/components/ExpressionEditModal.vue b/packages/editor-ui/src/components/ExpressionEditModal.vue
index 08e3848c4332d..9fe4c173778e8 100644
--- a/packages/editor-ui/src/components/ExpressionEditModal.vue
+++ b/packages/editor-ui/src/components/ExpressionEditModal.vue
@@ -155,6 +155,7 @@ async function onDrop(expression: string, event: MouseEvent) {
 					:mapping-enabled="!isReadOnly"
 					:connection-type="NodeConnectionType.Main"
 					pane-type="input"
+					context="modal"
 				/>
 			</div>
 
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index 648aa16d4c282..07d2d56ae1ed0 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -34,6 +34,7 @@ type Props = {
 	paneType: 'input' | 'output';
 	connectionType?: NodeConnectionType;
 	search?: string;
+	context?: 'ndv' | 'modal';
 };
 
 type SchemaNode = {
@@ -58,6 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
 	connectionType: NodeConnectionType.Main,
 	search: '',
 	mappingEnabled: false,
+	context: 'ndv',
 });
 
 const draggingPath = ref<string>('');
@@ -381,7 +383,7 @@ watch(
 								:level="0"
 								:parent="null"
 								:pane-type="paneType"
-								:sub-key="snakeCase(currentNode.node.name)"
+								:sub-key="`${props.context}_${snakeCase(currentNode.node.name)}`"
 								:mapping-enabled="mappingEnabled"
 								:dragging-path="draggingPath"
 								:distance-from-active="currentNode.depth"
@@ -427,7 +429,7 @@ watch(
 				:level="0"
 				:parent="null"
 				:pane-type="paneType"
-				:sub-key="`output_${nodeSchema.type}-0-0`"
+				:sub-key="`${props.context}_output_${nodeSchema.type}-0-0`"
 				:mapping-enabled="mappingEnabled"
 				:dragging-path="draggingPath"
 				:node="node"
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index 18b141932933d..43751ccb9d580 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -5,6 +5,7 @@ import { checkExhaustive } from '@/utils/typeGuards';
 import { shorten } from '@/utils/typesUtils';
 import { getMappedExpression } from '@/utils/mappingUtils';
 import TextWithHighlights from './TextWithHighlights.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 type Props = {
 	schema: Schema;
@@ -95,7 +96,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 					:data-depth="level"
 					data-target="mappable"
 				>
-					<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm" />
+					<FontAwesomeIcon :icon="getIconBySchemaType(schema.type)" size="sm" />
 					<TextWithHighlights
 						v-if="isSchemaParentTypeArray"
 						:content="props.parent?.key"
@@ -120,12 +121,12 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 
 		<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" inert checked />
 		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
-			<font-awesome-icon icon="angle-right" />
+			<FontAwesomeIcon icon="angle-right" />
 		</label>
 
 		<div v-if="isSchemaValueArray" :class="$style.sub">
 			<div :class="$style.innerSub">
-				<run-data-schema-item
+				<RunDataSchemaItem
 					v-for="s in schemaArray"
 					:key="s.key ?? s.type"
 					:schema="s"
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 9ad2012439146..5d4d5c4e4dea9 100644
--- a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
@@ -702,13 +702,13 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
             </div>
             <input
               checked=""
-              id="set_1-hobbies"
+              id="ndv_set_1-hobbies"
               inert=""
               type="checkbox"
             />
             <label
               class="toggle"
-              for="set_1-hobbies"
+              for="ndv_set_1-hobbies"
             >
               <svg
                 aria-hidden="true"
@@ -1138,13 +1138,13 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
             </div>
             <input
               checked=""
-              id="set_2-hobbies"
+              id="ndv_set_2-hobbies"
               inert=""
               type="checkbox"
             />
             <label
               class="toggle"
-              for="set_2-hobbies"
+              for="ndv_set_2-hobbies"
             >
               <svg
                 aria-hidden="true"
@@ -1575,13 +1575,13 @@ exports[`RunDataSchema.vue > renders schema in output pane 1`] = `
               </div>
               <input
                 checked=""
-                id="output_object-0-0-hobbies"
+                id="ndv_output_object-0-0-hobbies"
                 inert=""
                 type="checkbox"
               />
               <label
                 class="toggle"
-                for="output_object-0-0-hobbies"
+                for="ndv_output_object-0-0-hobbies"
               >
                 <svg
                   aria-hidden="true"
@@ -1967,13 +1967,13 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                       </div>
                       <input
                         checked=""
-                        id="set_1-hello world"
+                        id="ndv_set_1-hello world"
                         inert=""
                         type="checkbox"
                       />
                       <label
                         class="toggle"
-                        for="set_1-hello world"
+                        for="ndv_set_1-hello world"
                       >
                         <svg
                           aria-hidden="true"
@@ -2060,13 +2060,13 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                             </div>
                             <input
                               checked=""
-                              id="set_1-hello world-0"
+                              id="ndv_set_1-hello world-0"
                               inert=""
                               type="checkbox"
                             />
                             <label
                               class="toggle"
-                              for="set_1-hello world-0"
+                              for="ndv_set_1-hello world-0"
                             >
                               <svg
                                 aria-hidden="true"
@@ -2144,13 +2144,13 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                                   </div>
                                   <input
                                     checked=""
-                                    id="set_1-hello world-0-test"
+                                    id="ndv_set_1-hello world-0-test"
                                     inert=""
                                     type="checkbox"
                                   />
                                   <label
                                     class="toggle"
-                                    for="set_1-hello world-0-test"
+                                    for="ndv_set_1-hello world-0-test"
                                   >
                                     <svg
                                       aria-hidden="true"