mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Small ui fixes to workflow cred setup modal (no-changelog) (#8280)

Browse source
This commit is contained in:
Tomi Turtiainen 2024-01-09 18:32:42 +02:00 committed by GitHub
parent 4401db3a2f
commit 23abd8fb49
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
cypress/composables/modals/workflow-credential-setup-modal.ts
View file

@ -4,9 +4,10 @@
export const getWorkflowCredentialsModal = () => cy.getByTestId('setup-workflow-credentials-modal'); export const getWorkflowCredentialsModal = () => cy.getByTestId('setup-workflow-credentials-modal');
export const getContinueButton = () => cy.getByTestId('continue-button');
/** /**
* Actions * Actions
*/ */
export const closeModal = () => export const closeModalFromContinueButton = () => getContinueButton().click();
getWorkflowCredentialsModal().find("button[aria-label='Close this dialog']").click();

3
cypress/e2e/34-template-credentials-setup.cy.ts
View file

@ -195,7 +195,8 @@ describe('Template credentials setup', () => {
templateCredentialsSetupPage.fillInDummyCredentialsForAppWithConfirm('X (Formerly Twitter)'); templateCredentialsSetupPage.fillInDummyCredentialsForAppWithConfirm('X (Formerly Twitter)');
templateCredentialsSetupPage.fillInDummyCredentialsForApp('Telegram'); templateCredentialsSetupPage.fillInDummyCredentialsForApp('Telegram');
setupCredsModal.closeModal(); setupCredsModal.closeModalFromContinueButton();
setupCredsModal.getWorkflowCredentialsModal().should('not.exist');
// Focus the canvas so the copy to clipboard works // Focus the canvas so the copy to clipboard works
workflowPage.getters.canvasNodes().eq(0).realClick(); workflowPage.getters.canvasNodes().eq(0).realClick();

22
packages/editor-ui/src/components/SetupWorkflowCredentialsModal/SetupWorkflowCredentialsModal.vue
View file

@ -8,10 +8,12 @@ import SetupTemplateFormStep from '@/views/SetupWorkflowFromTemplateView/SetupTe
import { onMounted, onUnmounted } from 'vue'; import { onMounted, onUnmounted } from 'vue';
import { useTelemetry } from '@/composables/useTelemetry'; import { useTelemetry } from '@/composables/useTelemetry';
import { useWorkflowsStore } from '@/stores/workflows.store'; import { useWorkflowsStore } from '@/stores/workflows.store';
import { useUIStore } from '@/stores/ui.store';
const i18n = useI18n(); const i18n = useI18n();
const telemetry = useTelemetry(); const telemetry = useTelemetry();
const workflowStore = useWorkflowsStore(); const workflowStore = useWorkflowsStore();
const uiStore = useUIStore();
const props = defineProps<{ const props = defineProps<{
modalName: string; modalName: string;
@ -45,7 +47,7 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<Modal width="900px" max-height="90%" :name="props.modalName"> <Modal width="700px" max-height="90%" :name="props.modalName">
<template #header> <template #header>
<N8nHeading tag="h2" size="xlarge"> <N8nHeading tag="h2" size="xlarge">
{{ i18n.baseText('setupCredentialsModal.title') }} {{ i18n.baseText('setupCredentialsModal.title') }}
@ -74,6 +76,18 @@ onUnmounted(() => {
</div> </div>
</div> </div>
</template> </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> </Modal>
</template> </template>
@ -84,7 +98,6 @@ onUnmounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
max-width: 768px;
} }
.notice { .notice {
@ -102,4 +115,9 @@ onUnmounted(() => {
padding-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-2xl);
border-bottom: 1px solid var(--color-foreground-light); border-bottom: 1px solid var(--color-foreground-light);
} }
.footer {
display: flex;
justify-content: flex-end;
}
</style> </style>