From cab82bfcff6390108927515c76818abfb0866e8b Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 29 Jan 2024 14:04:06 +0100
Subject: [PATCH 1/8] feat(editor): Implement loading and error states for
 dynamically loaded components in node parameter list

---
 .../src/components/ParameterInputList.vue     | 69 +++++++++++++------
 .../src/plugins/i18n/locales/en.json          |  2 +
 2 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 3ecd0cd35cb36..5c115e06dfe5b 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -65,26 +65,36 @@
 					:underline="true"
 					color="text-dark"
 				/>
-				<Suspense>
-					<CollectionParameter
-						v-if="parameter.type === 'collection'"
-						:parameter="parameter"
-						:values="nodeHelpers.getParameterValue(nodeValues, parameter.name, path)"
-						:node-values="nodeValues"
-						:path="getPath(parameter.name)"
-						:is-read-only="isReadOnly"
-						@valueChanged="valueChanged"
-					/>
-					<FixedCollectionParameter
-						v-else-if="parameter.type === 'fixedCollection'"
-						:parameter="parameter"
-						:values="nodeHelpers.getParameterValue(nodeValues, parameter.name, path)"
-						:node-values="nodeValues"
-						:path="getPath(parameter.name)"
-						:is-read-only="isReadOnly"
-						@valueChanged="valueChanged"
-					/>
+				<Suspense v-if="!asyncLoadingError">
+					<template #default>
+						<CollectionParameter
+							v-if="parameter.type === 'collection'"
+							:parameter="parameter"
+							:values="nodeHelpers.getParameterValue(nodeValues, parameter.name, path)"
+							:node-values="nodeValues"
+							:path="getPath(parameter.name)"
+							:is-read-only="isReadOnly"
+							@valueChanged="valueChanged"
+						/>
+						<FixedCollectionParameter
+							v-else-if="parameter.type === 'fixedCollection'"
+							:parameter="parameter"
+							:values="nodeHelpers.getParameterValue(nodeValues, parameter.name, path)"
+							:node-values="nodeValues"
+							:path="getPath(parameter.name)"
+							:is-read-only="isReadOnly"
+							@valueChanged="valueChanged"
+						/>
+					</template>
+					<template #fallback>
+						<n8n-text size="small" class="collection-notice">
+							{{ $locale.baseText('parameterInputList.loadingFields') }}
+						</n8n-text>
+					</template>
 				</Suspense>
+				<n8n-text v-else size="small" class="collection-notice error">
+					{{ $locale.baseText('parameterInputList.loadingError') }}
+				</n8n-text>
 			</div>
 			<ResourceMapper
 				v-else-if="parameter.type === 'resourceMapper'"
@@ -150,7 +160,7 @@ import type {
 import { deepCopy } from 'n8n-workflow';
 import { mapStores } from 'pinia';
 import type { PropType } from 'vue';
-import { defineAsyncComponent, defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent, onErrorCaptured, ref } from 'vue';
 
 import type { INodeUi, IUpdateInformation } from '@/Interface';
 
@@ -226,9 +236,19 @@ export default defineComponent({
 	},
 	setup() {
 		const nodeHelpers = useNodeHelpers();
+		const asyncLoadingError = ref(false);
+
+		// This will catch errors in async components
+		onErrorCaptured((e) => {
+      console.error(e);
+			asyncLoadingError.value = true;
+			// Don't propagate the error further
+      return true;
+    });
 
 		return {
 			nodeHelpers,
+			asyncLoadingError,
 		};
 	},
 	computed: {
@@ -572,5 +592,14 @@ export default defineComponent({
 			font-weight: var(--font-weight-bold);
 		}
 	}
+
+	.collection-notice {
+		padding-left: var(--spacing-2xs);
+		padding-top: var(--spacing-2xs);
+
+		&.error {
+			color: var(--color-danger);
+		}
+	}
 }
 </style>
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index d43708880ef20..5e6423e3e972c 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1181,6 +1181,8 @@
 	"parameterInputList.delete": "Delete",
 	"parameterInputList.deleteParameter": "Delete Parameter",
 	"parameterInputList.parameterOptions": "Parameter Options",
+	"parameterInputList.loadingFields": "Loading fields...",
+	"parameterInputList.loadingError": "Error loading fields. Refresh you page and try again.",
 	"personalizationModal.businessOwner": "Business Owner",
 	"personalizationModal.continue": "Continue",
 	"personalizationModal.cicd": "CI/CD",

From 52e82904bb9678754ece3f7fbb82d41edd174d57 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 29 Jan 2024 14:18:01 +0100
Subject: [PATCH 2/8] =?UTF-8?q?=F0=9F=92=84=20Getting=20notice=20spacing?=
 =?UTF-8?q?=20more=20in=20line=20with=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/components/ParameterInputList.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 5c115e06dfe5b..8845b73d445a5 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -594,9 +594,8 @@ export default defineComponent({
 	}
 
 	.collection-notice {
-		padding-left: var(--spacing-2xs);
-		padding-top: var(--spacing-2xs);
-
+		padding-top: var(--spacing-xs);
+		padding-left: var(--spacing-m);
 		&.error {
 			color: var(--color-danger);
 		}

From 487ab2f7cd84fee6a568554c161b9e8c3db4b9ba Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 29 Jan 2024 16:34:22 +0100
Subject: [PATCH 3/8] =?UTF-8?q?=F0=9F=91=95=20Updating=20indents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/components/ParameterInputList.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 8845b73d445a5..2f034f717eefd 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -240,11 +240,11 @@ export default defineComponent({
 
 		// This will catch errors in async components
 		onErrorCaptured((e) => {
-      console.error(e);
+			console.error(e);
 			asyncLoadingError.value = true;
 			// Don't propagate the error further
-      return true;
-    });
+			return true;
+		});
 
 		return {
 			nodeHelpers,

From 8301616f92d63386dbe19769611d5f88c4e1fffa Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 29 Jan 2024 16:50:31 +0100
Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=92=84=20Visually=20updating=20loadin?=
 =?UTF-8?q?g=20and=20error=20states=20to=20be=20in=20line=20with=20RMC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ParameterInputList.vue          | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 2f034f717eefd..dab84d529c4b7 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -87,12 +87,14 @@
 						/>
 					</template>
 					<template #fallback>
-						<n8n-text size="small" class="collection-notice">
+						<n8n-text size="small">
+							<n8n-icon icon="sync-alt" size="xsmall" :spin="true" />
 							{{ $locale.baseText('parameterInputList.loadingFields') }}
 						</n8n-text>
 					</template>
 				</Suspense>
-				<n8n-text v-else size="small" class="collection-notice error">
+				<n8n-text v-else size="small" color="danger">
+					<n8n-icon icon="exclamation-triangle" size="xsmall" />
 					{{ $locale.baseText('parameterInputList.loadingError') }}
 				</n8n-text>
 			</div>
@@ -592,13 +594,5 @@ export default defineComponent({
 			font-weight: var(--font-weight-bold);
 		}
 	}
-
-	.collection-notice {
-		padding-top: var(--spacing-xs);
-		padding-left: var(--spacing-m);
-		&.error {
-			color: var(--color-danger);
-		}
-	}
 }
 </style>

From 082356e54163d4837d218f590585f01d2578bc41 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 29 Jan 2024 16:59:27 +0100
Subject: [PATCH 5/8] =?UTF-8?q?=E2=9A=A1=20Stopping=20errror=20propagation?=
 =?UTF-8?q?,=20adding=20sentry=20tagging?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/components/ParameterInputList.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index dab84d529c4b7..0849b49298bac 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -242,10 +242,15 @@ export default defineComponent({
 
 		// This will catch errors in async components
 		onErrorCaptured((e) => {
-			console.error(e);
 			asyncLoadingError.value = true;
+			console.error(e);
+			window?.Sentry?.captureException(e, {
+				tags: {
+					asyncLoadingError: true,
+				},
+			});
 			// Don't propagate the error further
-			return true;
+			return false;
 		});
 
 		return {

From 7c8e543ecbb383f03d394d3b110c0d100e25acc0 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 30 Jan 2024 09:18:27 +0100
Subject: [PATCH 6/8] =?UTF-8?q?=E2=9A=A1=20Only=20capture=20errors=20from?=
 =?UTF-8?q?=20components=20in=20Suspense?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/components/ParameterInputList.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 0849b49298bac..37424d6a4c8d8 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -241,7 +241,10 @@ export default defineComponent({
 		const asyncLoadingError = ref(false);
 
 		// This will catch errors in async components
-		onErrorCaptured((e) => {
+		onErrorCaptured((e, component) => {
+			if (!component._.type.name in ['FixedCollectionParameter', 'CollectionParameter']) {
+				return;
+			}
 			asyncLoadingError.value = true;
 			console.error(e);
 			window?.Sentry?.captureException(e, {

From e90d13e209906ad404ba445f6504b24abd10512f Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 30 Jan 2024 09:53:23 +0100
Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=92=84=20Adding=20spacing=20around=20?=
 =?UTF-8?q?new=20notices?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ParameterInputList.vue         | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 37424d6a4c8d8..3af7536ef2be7 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -87,13 +87,13 @@
 						/>
 					</template>
 					<template #fallback>
-						<n8n-text size="small">
+						<n8n-text size="small" class="async-notice">
 							<n8n-icon icon="sync-alt" size="xsmall" :spin="true" />
 							{{ $locale.baseText('parameterInputList.loadingFields') }}
 						</n8n-text>
 					</template>
 				</Suspense>
-				<n8n-text v-else size="small" color="danger">
+				<n8n-text v-else size="small" color="danger" class="async-notice">
 					<n8n-icon icon="exclamation-triangle" size="xsmall" />
 					{{ $locale.baseText('parameterInputList.loadingError') }}
 				</n8n-text>
@@ -242,7 +242,11 @@ export default defineComponent({
 
 		// This will catch errors in async components
 		onErrorCaptured((e, component) => {
-			if (!component._.type.name in ['FixedCollectionParameter', 'CollectionParameter']) {
+			if (
+				!['FixedCollectionParameter', 'CollectionParameter'].includes(
+					component._.type.name as string,
+				)
+			) {
 				return;
 			}
 			asyncLoadingError.value = true;
@@ -602,5 +606,10 @@ export default defineComponent({
 			font-weight: var(--font-weight-bold);
 		}
 	}
+
+	.async-notice {
+		display: block;
+		padding: var(--spacing-3xs) 0;
+	}
 }
 </style>

From e0241057b76b1271f74b6abeae7ebe71c2282ae3 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Tue, 30 Jan 2024 11:03:43 +0100
Subject: [PATCH 8/8] =?UTF-8?q?=E2=9A=A1=20Improving=20ParameterInput=20li?=
 =?UTF-8?q?st=20imports,=20updating=20component=20name=20detection=20in=20?=
 =?UTF-8?q?error=20captured=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-ui/src/components/CollectionParameter.vue     | 5 +----
 .../src/components/FixedCollectionParameter.vue          | 9 +--------
 packages/editor-ui/src/components/ParameterInputList.vue | 2 +-
 packages/editor-ui/src/plugins/components.ts             | 2 ++
 4 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index 913271d28f379..9d15f042d5f21 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, defineAsyncComponent } from 'vue';
+import { ref, computed } from 'vue';
 import type { IUpdateInformation } from '@/Interface';
 
 import type {
@@ -65,9 +65,6 @@ import { get } from 'lodash-es';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useI18n } from '@/composables/useI18n';
-const ParameterInputList = defineAsyncComponent(
-	async () => await import('./ParameterInputList.vue'),
-);
 
 const selectedOption = ref<string | undefined>(undefined);
 export interface Props {
diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index 7a909635663fa..764516e95268f 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -122,7 +122,7 @@
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { IUpdateInformation } from '@/Interface';
 
@@ -136,15 +136,8 @@ import { deepCopy, isINodePropertyCollectionList } from 'n8n-workflow';
 
 import { get } from 'lodash-es';
 
-const ParameterInputList = defineAsyncComponent(
-	async () => await import('./ParameterInputList.vue'),
-);
-
 export default defineComponent({
 	name: 'FixedCollectionParameter',
-	components: {
-		ParameterInputList,
-	},
 	props: {
 		nodeValues: {
 			type: Object as PropType<Record<string, INodeParameters[]>>,
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 3af7536ef2be7..ead05e44f3e17 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -244,7 +244,7 @@ export default defineComponent({
 		onErrorCaptured((e, component) => {
 			if (
 				!['FixedCollectionParameter', 'CollectionParameter'].includes(
-					component._.type.name as string,
+					component?.$options.name as string,
 				)
 			) {
 				return;
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 7a775322fe7db..24ed30d3b7434 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -7,6 +7,7 @@ import { N8nPlugin } from 'n8n-design-system';
 import { useMessage } from '@/composables/useMessage';
 import EnterpriseEdition from '@/components/EnterpriseEdition.ee.vue';
 import RBAC from '@/components/RBAC.vue';
+import ParameterInputList from '@/components/ParameterInputList.vue';
 
 export const GlobalComponentsPlugin: Plugin<{}> = {
 	install(app) {
@@ -14,6 +15,7 @@ export const GlobalComponentsPlugin: Plugin<{}> = {
 
 		app.component('EnterpriseEdition', EnterpriseEdition);
 		app.component('RBAC', RBAC);
+		app.component('ParameterInputList', ParameterInputList);
 
 		app.use(ElementPlus);
 		app.use(N8nPlugin);