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>