fix(editor): Fix External secrets typecheck (no-changelog) (#9434)

packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue

@@ -2,7 +2,7 @@
 import Modal from './Modal.vue';
 import { EXTERNAL_SECRETS_PROVIDER_MODAL_KEY, MODAL_CONFIRM } from '@/constants';
 import { computed, onMounted, ref } from 'vue';
-import type { PropType, Ref } from 'vue';
+import type { PropType } from 'vue';
 import type { EventBus } from 'n8n-design-system/utils';
 import { useExternalSecretsProvider } from '@/composables/useExternalSecretsProvider';
 import { useI18n } from '@/composables/useI18n';
@@ -10,7 +10,6 @@ import { useMessage } from '@/composables/useMessage';
 import { useToast } from '@/composables/useToast';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import { useUIStore } from '@/stores/ui.store';
-import { useRoute } from 'vue-router';
 import ParameterInputExpanded from '@/components/ParameterInputExpanded.vue';
 import type {
 	IUpdateInformation,
@@ -29,7 +28,7 @@ const props = defineProps({
 	},
 });
 
-const defaultProviderData = {
+const defaultProviderData: Record<string, Partial<ExternalSecretsProviderData>> = {
 	infisical: {
 		siteURL: 'https://app.infisical.com',
 	},
@@ -39,7 +38,6 @@ const externalSecretsStore = useExternalSecretsStore();
 const uiStore = useUIStore();
 const toast = useToast();
 const i18n = useI18n();
-const route = useRoute();
 const { confirm } = useMessage();
 
 const saving = ref(false);
@@ -50,7 +48,7 @@ const labelSize: IParameterLabel = { size: 'medium' };
 
 const provider = computed<ExternalSecretsProvider | undefined>(() =>
 	externalSecretsStore.providers.find((p) => p.name === props.data.name),
-) as Ref<ExternalSecretsProvider>;
+);
 const providerData = ref<ExternalSecretsProviderData>({});
 const {
 	connectionState,
@@ -64,7 +62,7 @@ const {
 const providerDataUpdated = computed(() => {
 	return Object.keys(providerData.value).find((key) => {
 		const value = providerData.value[key];
-		const originalValue = provider.value.data[key];
+		const originalValue = provider.value?.data?.[key];
 
 		return value !== originalValue;
 	});
@@ -72,7 +70,7 @@ const providerDataUpdated = computed(() => {
 
 const canSave = computed(
 	() =>
-		provider.value.properties
+		provider.value?.properties
 			?.filter((property) => property.required && shouldDisplayProperty(property))
 			.every((property) => {
 				const value = providerData.value[property.name];
@@ -82,21 +80,22 @@ const canSave = computed(
 
 onMounted(async () => {
 	try {
-		const provider = await externalSecretsStore.getProvider(props.data.name);
+		const fetchedProvider = await externalSecretsStore.getProvider(props.data.name);
+
 		providerData.value = {
 			...(defaultProviderData[props.data.name] || {}),
-			...provider.data,
+			...fetchedProvider.data,
 		};
 
-		setConnectionState(provider.state);
+		setConnectionState(fetchedProvider.state);
 
-		if (provider.connected) {
-			initialConnectionState.value = provider.state;
-		} else if (Object.keys(provider.data).length) {
+		if (fetchedProvider.connected) {
+			initialConnectionState.value = fetchedProvider.state;
+		} else if (Object.keys(fetchedProvider.data ?? {}).length) {
 			await testConnection();
 		}
 
-		if (provider.state === 'connected') {
+		if (fetchedProvider.state === 'connected') {
 			void externalSecretsStore.reloadProvider(props.data.name);
 		}
 	} catch (error) {
@@ -116,6 +115,10 @@ function onValueChange(updateInformation: IUpdateInformation) {
 }
 
 async function save() {
+	if (!provider.value) {
+		return;
+	}
+
 	try {
 		saving.value = true;
 		await externalSecretsStore.updateProvider(provider.value.name, {
@@ -143,7 +146,7 @@ async function onBeforeClose() {
 		const confirmModal = await confirm(
 			i18n.baseText('settings.externalSecrets.provider.closeWithoutSaving.description', {
 				interpolate: {
-					provider: provider.value.displayName,
+					provider: provider.value?.displayName ?? '',
 				},
 			}),
 			{
@@ -162,19 +165,23 @@ async function onBeforeClose() {
 
 	return true;
 }
+
+async function onConnectionStateChange() {
+	await testConnection();
+}
 </script>
 
 <template>
 	<Modal
 		id="external-secrets-provider-modal"
 		width="812px"
-		:title="provider.displayName"
+		:title="provider?.displayName"
 		:event-bus="data.eventBus"
 		:name="EXTERNAL_SECRETS_PROVIDER_MODAL_KEY"
 		:before-close="onBeforeClose"
 	>
 		<template #header>
-			<div :class="$style.header">
+			<div v-if="provider" :class="$style.header">
 				<div :class="$style.providerTitle">
 					<ExternalSecretsProviderImage :provider="provider" class="mr-xs" />
 					<span>{{ provider.displayName }}</span>
@@ -188,7 +195,7 @@ async function onBeforeClose() {
 						"
 						:event-bus="eventBus"
 						:provider="provider"
-						@change="testConnection"
+						@change="onConnectionStateChange"
 					/>
 					<n8n-button
 						type="primary"
@@ -207,7 +214,7 @@ async function onBeforeClose() {
 		</template>
 
 		<template #content>
-			<div :class="$style.container">
+			<div v-if="provider" :class="$style.container">
 				<hr class="mb-l" />
 				<div v-if="connectionState !== 'initializing'" class="mb-l">
 					<n8n-callout