feat: Ado 1296 spike credential setup in templates (#7786)

- Add a 'Setup template credentials' view to setup the credentials of a
template before it is created

packages/editor-ui/src/stores/credentials.store.ts

@@ -41,6 +41,8 @@ const DEFAULT_CREDENTIAL_NAME = 'Unnamed credential';
 const DEFAULT_CREDENTIAL_POSTFIX = 'account';
 const TYPES_WITH_DEFAULT_NAME = ['httpBasicAuth', 'oAuth2Api', 'httpDigestAuth', 'oAuth1Api'];
 
+export type CredentialsStore = ReturnType<typeof useCredentialsStore>;
+
 export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 	state: (): ICredentialsState => ({
 		credentialTypes: {},
@@ -400,3 +402,42 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 		},
 	},
 });
+
+/**
+ * Helper function for listening to credential changes in the store
+ */
+export const listenForCredentialChanges = (opts: {
+	store: CredentialsStore;
+	onCredentialCreated?: (credential: ICredentialsResponse) => void;
+	onCredentialUpdated?: (credential: ICredentialsResponse) => void;
+	onCredentialDeleted?: (credentialId: string) => void;
+}): void => {
+	const { store, onCredentialCreated, onCredentialDeleted, onCredentialUpdated } = opts;
+	const listeningForActions = ['createNewCredential', 'updateCredential', 'deleteCredential'];
+
+	store.$onAction((result) => {
+		const { name, after, args } = result;
+		after(async (returnValue) => {
+			if (!listeningForActions.includes(name)) {
+				return;
+			}
+
+			switch (name) {
+				case 'createNewCredential':
+					const createdCredential = returnValue as ICredentialsResponse;
+					onCredentialCreated?.(createdCredential);
+					break;
+
+				case 'updateCredential':
+					const updatedCredential = returnValue as ICredentialsResponse;
+					onCredentialUpdated?.(updatedCredential);
+					break;
+
+				case 'deleteCredential':
+					const credentialId = args[0].id;
+					onCredentialDeleted?.(credentialId);
+					break;
+			}
+		});
+	});
+};

packages/editor-ui/src/stores/nodeTypes.store.ts

@@ -263,6 +263,14 @@ export const useNodeTypesStore = defineStore(STORES.NODE_TYPES, {
 				this.setNodeTypes(nodeTypes);
 			}
 		},
+		/**
+		 * Loads node types if they haven't been loaded yet
+		 */
+		async loadNodeTypesIfNotLoaded(): Promise<void> {
+			if (Object.keys(this.nodeTypes).length === 0) {
+				await this.getNodeTypes();
+			}
+		},
 		async getNodeTranslationHeaders(): Promise<void> {
 			const rootStore = useRootStore();
 			const headers = await getNodeTranslationHeaders(rootStore.getRestApiContext);

packages/editor-ui/src/stores/templates.store.ts

@@ -47,6 +47,12 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 		getTemplateById() {
 			return (id: string): null | ITemplatesWorkflow => this.workflows[id];
 		},
+		getFullTemplateById() {
+			return (id: string): null | ITemplatesWorkflowFull => {
+				const template = this.workflows[id];
+				return template && 'full' in template && template.full ? template : null;
+			};
+		},
 		getCollectionById() {
 			return (id: string): null | ITemplatesCollection => this.collections[id];
 		},