From 4e491b754fe74ebdffdc292f4358ee98ad99e01d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= Date: Fri, 28 Jul 2023 17:57:25 +0200 Subject: [PATCH] fix(editor): Vue3 - Fix modal positioning and multi-select tag sizing (#6783) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ Updating modals positioning within the overlay * 💄 Implemented multi-select variant with small tabs * ✔️ Removing password link clicks while modal is open in e2e tests * Set generous timeout for $paramter resolve Signed-off-by: Oleg Ivaniv --------- Signed-off-by: Oleg Ivaniv Co-authored-by: Oleg Ivaniv --- cypress/e2e/11-inline-expression-editor.cy.ts | 5 +++-- cypress/e2e/18-user-management.cy.ts | 3 +++ cypress/pages/settings-personal.ts | 1 - .../src/components/N8nFormInput/FormInput.vue | 12 ++++++++++++ .../src/components/N8nFormInputs/FormInputs.vue | 6 ++++++ .../editor-ui/src/components/NodeDetailsView.vue | 6 ++---- .../src/components/PersonalizationModal.vue | 1 + packages/editor-ui/src/n8n-theme.scss | 5 +++++ 8 files changed, 32 insertions(+), 7 deletions(-) diff --git a/cypress/e2e/11-inline-expression-editor.cy.ts b/cypress/e2e/11-inline-expression-editor.cy.ts index 702dd2eac9..e1fbb08f36 100644 --- a/cypress/e2e/11-inline-expression-editor.cy.ts +++ b/cypress/e2e/11-inline-expression-editor.cy.ts @@ -51,7 +51,7 @@ describe('Inline expression editor', () => { it('should resolve array resolvables', () => { WorkflowPage.getters.inlineExpressionEditorInput().clear(); WorkflowPage.getters.inlineExpressionEditorInput().type('{{'); - WorkflowPage.getters.inlineExpressionEditorInput().type('[1, 2, 3]'); + WorkflowPage.getters.inlineExpressionEditorInput().type('[1, 2, 3]', { timeout: 20000 }); WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^\[Array: \[1,2,3\]\]$/); WorkflowPage.getters.inlineExpressionEditorInput().clear(); @@ -65,7 +65,8 @@ describe('Inline expression editor', () => { it('should resolve $parameter[]', () => { WorkflowPage.getters.inlineExpressionEditorInput().clear(); WorkflowPage.getters.inlineExpressionEditorInput().type('{{'); - WorkflowPage.getters.inlineExpressionEditorInput().type('$parameter["operation"]'); + // Resolving $parameter is slow, especially on CI runner + WorkflowPage.getters.inlineExpressionEditorInput().type('$parameter["operation"]', { timeout: 35000 }); WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^get$/); }); }); diff --git a/cypress/e2e/18-user-management.cy.ts b/cypress/e2e/18-user-management.cy.ts index cbc7a165f1..8c714eaa6c 100644 --- a/cypress/e2e/18-user-management.cy.ts +++ b/cypress/e2e/18-user-management.cy.ts @@ -88,6 +88,7 @@ describe('User Management', { disableAutoLogin: true }, () => { it(`shouldn't allow user to set weak password`, () => { personalSettingsPage.actions.loginAndVisit(INSTANCE_OWNER.email, INSTANCE_OWNER.password); + personalSettingsPage.getters.changePasswordLink().click(); for (let weakPass of updatedPersonalData.invalidPasswords) { personalSettingsPage.actions.tryToSetWeakPassword(INSTANCE_OWNER.password, weakPass); } @@ -95,6 +96,7 @@ describe('User Management', { disableAutoLogin: true }, () => { it(`shouldn't allow user to change password if old password is wrong`, () => { personalSettingsPage.actions.loginAndVisit(INSTANCE_OWNER.email, INSTANCE_OWNER.password); + personalSettingsPage.getters.changePasswordLink().click(); personalSettingsPage.actions.updatePassword('iCannotRemember', updatedPersonalData.newPassword); workflowPage.getters .errorToast() @@ -104,6 +106,7 @@ describe('User Management', { disableAutoLogin: true }, () => { it(`should change current user password`, () => { personalSettingsPage.actions.loginAndVisit(INSTANCE_OWNER.email, INSTANCE_OWNER.password); + personalSettingsPage.getters.changePasswordLink().click(); personalSettingsPage.actions.updatePassword( INSTANCE_OWNER.password, updatedPersonalData.newPassword, diff --git a/cypress/pages/settings-personal.ts b/cypress/pages/settings-personal.ts index 0b129a29bc..554455ef73 100644 --- a/cypress/pages/settings-personal.ts +++ b/cypress/pages/settings-personal.ts @@ -25,7 +25,6 @@ export class PersonalSettingsPage extends BasePage { this.getters.saveSettingsButton().realClick(); }, updatePassword: (oldPassword: string, newPassword: string) => { - this.getters.changePasswordLink().realClick(); changePasswordModal.getters.modalContainer().should('be.visible'); changePasswordModal.getters.currentPasswordInput().type('{selectall}').type(oldPassword); changePasswordModal.getters.newPasswordInput().type('{selectall}').type(newPassword); diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue index 9e0b40972c..19701c13d0 100644 --- a/packages/design-system/src/components/N8nFormInput/FormInput.vue +++ b/packages/design-system/src/components/N8nFormInput/FormInput.vue @@ -33,6 +33,7 @@
(), { @@ -136,6 +139,7 @@ const props = withDefaults(defineProps(), { showRequiredAsterisk: true, validateOnBlur: true, teleported: true, + tagSize: 'small', }); const emit = defineEmits<{ @@ -268,4 +272,12 @@ defineExpose({ inputRef }); .errorInput { --input-border-color: var(--color-danger); } + +.multiSelectSmallTags { + :global(.el-tag) { + height: 24px; + padding: 0 8px; + line-height: 22px; + } +} diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue index 8351959667..2f41b59008 100644 --- a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue +++ b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue @@ -26,6 +26,7 @@ :data-test-id="input.name" :showValidationWarnings="showValidationWarnings" :teleported="teleported" + :tagSize="tagSize" @update:modelValue="(value) => onUpdateModelValue(input.name, value)" @validate="(value) => onValidate(input.name, value)" @enter="onSubmit" @@ -73,6 +74,11 @@ export default defineComponent({ type: Boolean, default: true, }, + tagSize: { + type: String, + default: 'small', + validator: (value: string): boolean => ['small', 'medium'].includes(value), + }, }, data() { return { diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue index 011fd42042..16712d8dd8 100644 --- a/packages/editor-ui/src/components/NodeDetailsView.vue +++ b/packages/editor-ui/src/components/NodeDetailsView.vue @@ -694,12 +694,10 @@ export default defineComponent({