fix(editor): Vue3 - Fix modal positioning and multi-select tag sizing (#6783)

* ✨ 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 <me@olegivaniv.com>
---------
Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Oleg Ivaniv <me@olegivaniv.com>

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$/);
 	});
 });

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,

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);

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -33,6 +33,7 @@
 		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
 			<slot v-if="hasDefaultSlot" />
 			<n8n-select
+				:class="{ [$style.multiSelectSmallTags]: tagSize === 'small' }"
 				v-else-if="type === 'select' || type === 'multi-select'"
 				:modelValue="modelValue"
 				:placeholder="placeholder"
@@ -50,6 +51,7 @@
 					:key="option.value"
 					:value="option.value"
 					:label="option.label"
+					size="small"
 				/>
 			</n8n-select>
 			<n8n-input
@@ -127,6 +129,7 @@ export interface Props {
 	inactiveLabel?: string;
 	inactiveColor?: string;
 	teleported?: boolean;
+	tagSize?: 'small' | 'medium';
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -136,6 +139,7 @@ const props = withDefaults(defineProps<Props>(), {
 	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;
+	}
+}
 </style>

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 {

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -694,12 +694,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.el-overlay-dialog {
-	padding-top: var(--spacing-2xs);
-}
-
 .ndv-wrapper {
 	overflow: visible;
+	padding-top: var(--spacing-2xs);
+	margin-top: 0;
 }
 
 .data-display-wrapper {

packages/editor-ui/src/components/PersonalizationModal.vue

@@ -19,6 +19,7 @@
 					:columnView="true"
 					:eventBus="formBus"
 					:teleported="teleported"
+					tagSize="small"
 					@submit="onSubmit"
 				/>
 			</div>

packages/editor-ui/src/n8n-theme.scss

@@ -9,10 +9,15 @@
 	font-weight: 400;
 }
 
+.el-overlay-dialog {
+	justify-content: unset;
+}
+
 .el-dialog {
 	border: var(--border-base);
 	box-shadow: 0px 6px 16px rgb(68 28 23 / 6%);
 	border-radius: 8px;
+	margin-top: 15vh;
 
 	@media (max-height: 1050px) {
 		margin: 4em auto !important;