mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-11 12:57:29 -08:00
Code Issues Actions 2 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 getContinueButton = () => cy.getByTestId('continue-button');
/**
* Actions
*/
export const closeModal = () =>
getWorkflowCredentialsModal().find("button[aria-label='Close this dialog']").click();
export const closeModalFromContinueButton = () => getContinueButton().click();

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

@ -43,7 +43,7 @@ describe('Template credentials setup', () => {
templateWorkflowPage.actions.clickUseThisWorkflowButton();
templateCredentialsSetupPage.getters
.title(`Setup 'Promote new Shopify products on Twitter and Telegram' template`)
.title(`Set up 'Promote new Shopify products on Twitter and Telegram' template`)
.should('be.visible');
});
@ -53,7 +53,7 @@ describe('Template credentials setup', () => {
clickUseWorkflowButtonByTitle('Promote new Shopify products on Twitter and Telegram');
templateCredentialsSetupPage.getters
.title(`Setup 'Promote new Shopify products on Twitter and Telegram' template`)
.title(`Set up 'Promote new Shopify products on Twitter and Telegram' template`)
.should('be.visible');
});
@ -61,7 +61,7 @@ describe('Template credentials setup', () => {
templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
templateCredentialsSetupPage.getters
.title(`Setup 'Promote new Shopify products on Twitter and Telegram' template`)
.title(`Set up 'Promote new Shopify products on Twitter and Telegram' template`)
.should('be.visible');
});
@ -69,7 +69,7 @@ describe('Template credentials setup', () => {
templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
templateCredentialsSetupPage.getters
.title(`Setup 'Promote new Shopify products on Twitter and Telegram' template`)
.title(`Set up 'Promote new Shopify products on Twitter and Telegram' template`)
.should('be.visible');
templateCredentialsSetupPage.getters
@ -195,7 +195,8 @@ describe('Template credentials setup', () => {
templateCredentialsSetupPage.fillInDummyCredentialsForAppWithConfirm('X (Formerly Twitter)');
templateCredentialsSetupPage.fillInDummyCredentialsForApp('Telegram');
setupCredsModal.closeModal();
setupCredsModal.closeModalFromContinueButton();
setupCredsModal.getWorkflowCredentialsModal().should('not.exist');
// Focus the canvas so the copy to clipboard works
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 { 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;
@ -45,7 +47,7 @@ onUnmounted(() => {
</script>
<template>
<Modal width="900px" max-height="90%" :name="props.modalName">
<Modal width="700px" max-height="90%" :name="props.modalName">
<template #header>
<N8nHeading tag="h2" size="xlarge">
{{ i18n.baseText('setupCredentialsModal.title') }}
@ -74,6 +76,18 @@ onUnmounted(() => {
</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>
@ -84,7 +98,6 @@ onUnmounted(() => {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 768px;
}
.notice {
@ -102,4 +115,9 @@ onUnmounted(() => {
padding-bottom: var(--spacing-2xl);
border-bottom: 1px solid var(--color-foreground-light);
}
.footer {
display: flex;
justify-content: flex-end;
}
</style>

4
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

@ -2365,11 +2365,11 @@
"filter.condition.resolvedFalse": "This condition is false for the first input item",
"filter.condition.placeholderLeft": "value1",
"filter.condition.placeholderRight": "value2",
"templateSetup.title": "Setup '{name}' template",
"templateSetup.title": "Set up '{name}' template",
"templateSetup.instructions": "You need {0} account to setup this template",
"templateSetup.skip": "Skip",
"templateSetup.continue.button": "Continue",
"templateSetup.credential.description": "The credential you select will be used in the {0} node of the workflow template. | The credential you select will be used in the {0} nodes of the workflow template.",
"templateSetup.continue.button.fillRemaining": "Fill remaining credentials to continue",
"setupCredentialsModal.title": "Setup credentials"
"setupCredentialsModal.title": "Set up credentials"
}