feat: Enable cred setup for workflows created from templates (no-changelog) (#8240)

## Summary

Enable users to open credential setup for workflows that have been
created from templates if they skip it.

Next steps (will be their own PRs):
- Add telemetry events
- Add e2e test
- Hide the button when user sets up all the credentials
- Change the feature flag to a new one

## Related tickets and issues

https://linear.app/n8n/issue/ADO-1637/feature-support-template-credential-setup-for-http-request-nodes-that

packages/editor-ui/src/components/SetupWorkflowCredentialsModal/SetupWorkflowCredentialsModal.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import Modal from '@/components/Modal.vue';
+import { useSetupWorkflowCredentialsModalState } from '@/components/SetupWorkflowCredentialsModal/useSetupWorkflowCredentialsModalState';
+import { useI18n } from '@/composables/useI18n';
+import N8nHeading from 'n8n-design-system/components/N8nHeading';
+import AppsRequiringCredsNotice from '@/views/SetupWorkflowFromTemplateView/AppsRequiringCredsNotice.vue';
+import SetupTemplateFormStep from '@/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue';
+import { onMounted } from 'vue';
+
+const i18n = useI18n();
+
+const props = defineProps<{
+	modalName: string;
+	data: {};
+}>();
+
+const {
+	appCredentials,
+	credentialUsages,
+	selectedCredentialIdByKey,
+	setInitialCredentialSelection,
+	setCredential,
+	unsetCredential,
+} = useSetupWorkflowCredentialsModalState();
+
+onMounted(() => {
+	setInitialCredentialSelection();
+});
+</script>
+
+<template>
+	<Modal width="900px" max-height="90%" :name="props.modalName">
+		<template #header>
+			<N8nHeading tag="h2" size="xlarge">
+				{{ i18n.baseText('setupCredentialsModal.title') }}
+			</N8nHeading>
+		</template>
+
+		<template #content>
+			<div :class="$style.grid">
+				<div :class="$style.notice" data-test-id="info-callout">
+					<AppsRequiringCredsNotice :app-credentials="appCredentials" />
+				</div>
+
+				<div>
+					<ol :class="$style.appCredentialsContainer">
+						<SetupTemplateFormStep
+							v-for="(credentials, index) in credentialUsages"
+							:key="credentials.key"
+							:class="$style.appCredential"
+							:order="index + 1"
+							:credentials="credentials"
+							:selected-credential-id="selectedCredentialIdByKey[credentials.key]"
+							@credential-selected="setCredential($event.credentialUsageKey, $event.credentialId)"
+							@credential-deselected="unsetCredential($event.credentialUsageKey)"
+						/>
+					</ol>
+				</div>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<style lang="scss" module>
+.grid {
+	margin: 0 auto;
+	margin-top: var(--spacing-l);
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	max-width: 768px;
+}
+
+.notice {
+	margin-bottom: var(--spacing-2xl);
+}
+
+.appCredentialsContainer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2xl);
+	margin-bottom: var(--spacing-2xl);
+}
+
+.appCredential:not(:last-of-type) {
+	padding-bottom: var(--spacing-2xl);
+	border-bottom: 1px solid var(--color-foreground-light);
+}
+</style>

packages/editor-ui/src/components/SetupWorkflowCredentialsModal/useSetupWorkflowCredentialsModalState.ts

@@ -0,0 +1,129 @@
+import { computed } from 'vue';
+import type { INodeCredentialsDetails } from 'n8n-workflow';
+import { useNodeHelpers } from '@/composables/useNodeHelpers';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import type { TemplateCredentialKey } from '@/utils/templates/templateTransforms';
+import { useCredentialSetupState } from '@/views/SetupWorkflowFromTemplateView/useCredentialSetupState';
+
+export const useSetupWorkflowCredentialsModalState = () => {
+	const workflowsStore = useWorkflowsStore();
+	const credentialsStore = useCredentialsStore();
+	const nodeHelpers = useNodeHelpers();
+
+	const workflowNodes = computed(() => {
+		return workflowsStore.allNodes;
+	});
+
+	const {
+		appCredentials,
+		credentialOverrides,
+		credentialUsages,
+		credentialsByKey,
+		numFilledCredentials,
+		selectedCredentialIdByKey,
+		setSelectedCredentialId,
+		unsetSelectedCredential,
+	} = useCredentialSetupState(workflowNodes);
+
+	/**
+	 * Selects initial credentials. For existing workflows this means using
+	 * the credentials that are already set on the nodes.
+	 */
+	const setInitialCredentialSelection = () => {
+		selectedCredentialIdByKey.value = {};
+
+		for (const credUsage of credentialUsages.value) {
+			const typeCredentials = credentialsStore.getCredentialsByType(credUsage.credentialType);
+			// Make sure there is a credential for this type with the given name
+			const credential = typeCredentials.find((cred) => cred.name === credUsage.credentialName);
+			if (!credential) {
+				continue;
+			}
+
+			selectedCredentialIdByKey.value[credUsage.key] = credential.id;
+		}
+	};
+
+	/**
+	 * Sets the given credential to all nodes that use it.
+	 */
+	const setCredential = (credentialKey: TemplateCredentialKey, credentialId: string) => {
+		setSelectedCredentialId(credentialKey, credentialId);
+
+		const usages = credentialsByKey.value.get(credentialKey);
+		if (!usages) {
+			return;
+		}
+
+		const credentialName = credentialsStore.getCredentialById(credentialId)?.name;
+		const credential: INodeCredentialsDetails = {
+			id: credentialId,
+			name: credentialName,
+		};
+
+		usages.usedBy.forEach((node) => {
+			workflowsStore.updateNodeProperties({
+				name: node.name,
+				properties: {
+					position: node.position,
+					credentials: {
+						...node.credentials,
+						[usages.credentialType]: credential,
+					},
+				},
+			});
+
+			// We can't use updateNodeCredentialIssues because the previous
+			// step creates a new instance of the node in the store and
+			// `node` no longer points to the correct node.
+			nodeHelpers.updateNodeCredentialIssuesByName(node.name);
+		});
+
+		setInitialCredentialSelection();
+	};
+
+	/**
+	 * Removes given credential from all nodes that use it.
+	 */
+	const unsetCredential = (credentialKey: TemplateCredentialKey) => {
+		unsetSelectedCredential(credentialKey);
+
+		const usages = credentialsByKey.value.get(credentialKey);
+		if (!usages) {
+			return;
+		}
+
+		usages.usedBy.forEach((node) => {
+			const credentials = { ...node.credentials };
+			delete credentials[usages.credentialType];
+
+			workflowsStore.updateNodeProperties({
+				name: node.name,
+				properties: {
+					position: node.position,
+					credentials,
+				},
+			});
+
+			// We can't use updateNodeCredentialIssues because the previous
+			// step creates a new instance of the node in the store and
+			// `node` no longer points to the correct node.
+			nodeHelpers.updateNodeCredentialIssuesByName(node.name);
+		});
+
+		setInitialCredentialSelection();
+	};
+
+	return {
+		appCredentials,
+		credentialOverrides,
+		credentialUsages,
+		credentialsByKey,
+		numFilledCredentials,
+		selectedCredentialIdByKey,
+		setInitialCredentialSelection,
+		setCredential,
+		unsetCredential,
+	};
+};