124 lines
3.4 KiB
Vue
124 lines
3.4 KiB
Vue
<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, onUnmounted } from 'vue';
|
|
import { useTelemetry } from '@/composables/useTelemetry';
|
|
import { useWorkflowsStore } from '@/stores/workflows.store';
|
|
import { useUIStore } from '@/stores/ui.store';
|
|
|
|
const i18n = useI18n();
|
|
const telemetry = useTelemetry();
|
|
const workflowStore = useWorkflowsStore();
|
|
const uiStore = useUIStore();
|
|
|
|
const props = defineProps<{
|
|
modalName: string;
|
|
data: {};
|
|
}>();
|
|
|
|
const {
|
|
appCredentials,
|
|
credentialUsages,
|
|
numFilledCredentials,
|
|
selectedCredentialIdByKey,
|
|
setInitialCredentialSelection,
|
|
setCredential,
|
|
unsetCredential,
|
|
} = useSetupWorkflowCredentialsModalState();
|
|
|
|
onMounted(() => {
|
|
setInitialCredentialSelection();
|
|
|
|
telemetry.track('User opened cred setup', { source: 'canvas' }, { withPostHog: true });
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
telemetry.track('User closed cred setup', {
|
|
completed: numFilledCredentials.value === credentialUsages.value.length,
|
|
creds_filled: numFilledCredentials.value,
|
|
creds_needed: credentialUsages.value.length,
|
|
workflow_id: workflowStore.workflowId,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Modal width="700px" 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>
|
|
|
|
<template #footer>
|
|
<div :class="$style.footer">
|
|
<n8n-button
|
|
size="large"
|
|
:label="i18n.baseText('templateSetup.continue.button')"
|
|
:disabled="numFilledCredentials === 0"
|
|
data-test-id="continue-button"
|
|
@click="uiStore.closeModal(props.modalName)"
|
|
/>
|
|
</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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|