fix(editor): Resolve $vars and $secrets in expressions in credentials fields (#9289)

packages/editor-ui/src/views/CredentialsView.vue

@@ -50,7 +50,7 @@ import { defineComponent } from 'vue';
 import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
 import CredentialCard from '@/components/CredentialCard.vue';
 import type { ICredentialType } from 'n8n-workflow';
-import { CREDENTIAL_SELECT_MODAL_KEY } from '@/constants';
+import { CREDENTIAL_SELECT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
@@ -58,6 +58,8 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
+import useEnvironmentsStore from '@/stores/environments.ee.store';
+import { useSettingsStore } from '@/stores/settings.store';
 
 type IResourcesListLayoutInstance = InstanceType<typeof ResourcesListLayout>;
 
@@ -123,11 +125,16 @@ export default defineComponent({
 			});
 		},
 		async initialize() {
+			const isVarsEnabled = useSettingsStore().isEnterpriseFeatureEnabled(
+				EnterpriseEditionFeature.Variables,
+			);
+
 			const loadPromises = [
 				this.credentialsStore.fetchAllCredentials(),
 				this.credentialsStore.fetchCredentialTypes(false),
 				this.externalSecretsStore.fetchAllSecrets(),
 				this.nodeTypesStore.loadNodeTypesIfNotLoaded(),
+				isVarsEnabled ? useEnvironmentsStore().fetchAllVariables() : Promise.resolve(), // for expression resolution
 			];
 
 			await Promise.all(loadPromises);