feat(editor): Implement new app layout

cypress/e2e/17-sharing.cy.ts

@@ -7,7 +7,7 @@ import {
 	WorkflowSharingModal,
 	WorkflowsPage,
 } from '../pages';
-import { getVisibleDropdown, getVisibleSelect } from '../utils';
+import { getVisibleDropdown, getVisiblePopper, getVisibleSelect } from '../utils';
 import * as projects from '../composables/projects';
 
 /**
@@ -180,7 +180,8 @@ describe('Sharing', { disableAutoLogin: true }, () => {
 		).should('be.visible');
 
 		credentialsModal.getters.usersSelect().click();
-		cy.getByTestId('project-sharing-info')
+		getVisiblePopper()
+			.find('[data-test-id="project-sharing-info"]')
 			.filter(':visible')
 			.should('have.length', 3)
 			.contains(INSTANCE_ADMIN.email)

cypress/e2e/45-ai-assistant.cy.ts

@@ -34,7 +34,7 @@ describe('AI Assistant::enabled', () => {
 		aiAssistant.getters.chatInputWrapper().should('not.exist');
 		aiAssistant.getters.closeChatButton().should('be.visible');
 		aiAssistant.getters.closeChatButton().click();
-		aiAssistant.getters.askAssistantChat().should('not.exist');
+		aiAssistant.getters.askAssistantChat().should('not.be.visible');
 	});
 
 	it('should resize assistant chat up', () => {
@@ -162,13 +162,13 @@ describe('AI Assistant::enabled', () => {
 		cy.createFixtureWorkflow('aiAssistant/test_workflow.json');
 		wf.actions.openNode('Edit Fields');
 		ndv.getters.nodeExecuteButton().click();
-		aiAssistant.getters.nodeErrorViewAssistantButton().click();
+		aiAssistant.getters.nodeErrorViewAssistantButton().click({ force: true });
 		cy.wait('@chatRequest');
 		aiAssistant.getters.closeChatButton().click();
 		ndv.getters.backToCanvas().click();
 		wf.actions.openNode('Stop and Error');
 		ndv.getters.nodeExecuteButton().click();
-		aiAssistant.getters.nodeErrorViewAssistantButton().click();
+		aiAssistant.getters.nodeErrorViewAssistantButton().click({ force: true });
 		// Since we already have an active session, a warning should be shown
 		aiAssistant.getters.newAssistantSessionModal().should('be.visible');
 		aiAssistant.getters

cypress/e2e/5-ndv.cy.ts

@@ -199,7 +199,7 @@ describe('NDV', () => {
 					.contains(key)
 					.should('be.visible');
 			});
-			getObjectValueItem().find('label').click();
+			getObjectValueItem().find('label').click({ force: true });
 			expandedObjectProps.forEach((key) => {
 				ndv.getters
 					.outputPanel()

packages/editor-ui/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import LoadingView from '@/views/LoadingView.vue';
 import BannerStack from '@/components/banners/BannerStack.vue';
@@ -9,7 +9,7 @@ import Telemetry from '@/components/Telemetry.vue';
 import AskAssistantFloatingButton from '@/components/AskAssistant/AskAssistantFloatingButton.vue';
 import { loadLanguage } from '@/plugins/i18n';
 import { useExternalHooks } from '@/composables/useExternalHooks';
-import { HIRING_BANNER, VIEWS } from '@/constants';
+import { APP_MODALS_ELEMENT_ID, HIRING_BANNER, VIEWS } from '@/constants';
 import { useRootStore } from '@/stores/root.store';
 import { useAssistantStore } from './stores/assistant.store';
 import { useUIStore } from './stores/ui.store';
@@ -32,34 +32,56 @@ const defaultLocale = computed(() => rootStore.defaultLocale);
 const isDemoMode = computed(() => route.name === VIEWS.DEMO);
 const showAssistantButton = computed(() => assistantStore.canShowAssistantButtons);
 
+const appGrid = ref<Element | null>(null);
+
+const assistantSidebarWidth = computed(() => assistantStore.chatWidth);
+
 watch(defaultLocale, (newLocale) => {
 	void loadLanguage(newLocale);
 });
 
+onMounted(async () => {
+	logHiringBanner();
+	void useExternalHooks().run('app.mount');
+	loading.value = false;
+	window.addEventListener('resize', updateGridWidth);
+	await updateGridWidth();
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', updateGridWidth);
+});
+
+// As assistant sidebar width changes, recalculate the total width regularly
+watch(assistantSidebarWidth, async () => {
+	await updateGridWidth();
+});
+
 const logHiringBanner = () => {
 	if (settingsStore.isHiringBannerEnabled && !isDemoMode.value) {
 		console.log(HIRING_BANNER);
 	}
 };
 
-onMounted(async () => {
-	logHiringBanner();
-	void useExternalHooks().run('app.mount');
-	loading.value = false;
-});
+const updateGridWidth = async () => {
+	await nextTick();
+	if (appGrid.value) {
+		uiStore.appGridWidth = appGrid.value.clientWidth;
+	}
+};
 </script>
 
 <template>
-	<div :class="[$style.app, 'root-container']">
-		<LoadingView v-if="loading" />
-		<div
-			v-else
-			id="app"
-			:class="{
-				[$style.container]: true,
-				[$style.sidebarCollapsed]: uiStore.sidebarMenuCollapsed,
-			}"
-		>
+	<LoadingView v-if="loading" />
+	<div
+		v-else
+		id="n8n-app"
+		:class="{
+			[$style.container]: true,
+			[$style.sidebarCollapsed]: uiStore.sidebarMenuCollapsed,
+		}"
+	>
+		<div id="app-grid" ref="appGrid" :class="$style['app-grid']">
 			<div id="banners" :class="$style.banners">
 				<BannerStack v-if="!isDemoMode" />
 			</div>
@@ -77,29 +99,37 @@ onMounted(async () => {
 					<component :is="Component" v-else />
 				</router-view>
 			</div>
-			<AskAssistantChat />
-			<Modals />
+			<div :id="APP_MODALS_ELEMENT_ID" :class="$style.modals">
+				<Modals />
+			</div>
 			<Telemetry />
 			<AskAssistantFloatingButton v-if="showAssistantButton" />
 		</div>
+		<AskAssistantChat />
 	</div>
 </template>
 
 <style lang="scss" module>
-.app {
+// On the root level, whole app is a flex container
+// with app grid and assistant sidebar as children
+.container {
 	height: 100vh;
 	overflow: hidden;
+	display: flex;
 }
 
-.container {
+// App grid is the main app layout including modals and other absolute positioned elements
+.app-grid {
+	position: relative;
 	display: grid;
+	height: 100vh;
+	flex-basis: 100%;
 	grid-template-areas:
-		'banners banners rightsidebar'
-		'sidebar header rightsidebar'
-		'sidebar content rightsidebar';
-	grid-auto-columns: minmax(0, max-content) minmax(100px, auto) minmax(0, max-content);
+		'banners banners'
+		'sidebar header'
+		'sidebar content';
+	grid-auto-columns: minmax(0, max-content) 1fr;
 	grid-template-rows: auto fit-content($header-height) 1fr;
-	height: 100vh;
 }
 
 .banners {
@@ -132,4 +162,8 @@ onMounted(async () => {
 	height: 100%;
 	z-index: 999;
 }
+
+.modals {
+	width: 100%;
+}
 </style>

packages/editor-ui/src/__tests__/utils.ts

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import type { ISettingsState } from '@/Interface';
 import { UserManagementAuthenticationMethod } from '@/Interface';
 import { defaultSettings } from './defaults';
+import { APP_MODALS_ELEMENT_ID } from '@/constants';
 
 /**
  * Retries the given assertion until it passes or the timeout is reached
@@ -90,3 +91,20 @@ export const getSelectedDropdownValue = async (items: NodeListOf<Element>) => {
 	expect(selectedItem).toBeInTheDocument();
 	return selectedItem?.querySelector('p')?.textContent?.trim();
 };
+
+/**
+ * Create a container for teleported modals
+ *
+ * More info: https://test-utils.vuejs.org/guide/advanced/teleport#Mounting-the-Component
+ * @returns {HTMLElement} appModals
+ */
+export const createAppModals = () => {
+	const appModals = document.createElement('div');
+	appModals.id = APP_MODALS_ELEMENT_ID;
+	document.body.appendChild(appModals);
+	return appModals;
+};
+
+export const cleanupAppModals = () => {
+	document.body.innerHTML = '';
+};

packages/editor-ui/src/components/AskAssistant/AskAssistantChat.vue

@@ -67,7 +67,7 @@ function onClose() {
 <template>
 	<SlideTransition>
 		<n8n-resize-wrapper
-			v-if="assistantStore.isAssistantOpen"
+			v-show="assistantStore.isAssistantOpen"
 			:supported-directions="['left']"
 			:width="assistantStore.chatWidth"
 			:class="$style.container"
@@ -95,9 +95,9 @@ function onClose() {
 
 <style module>
 .container {
-	grid-area: rightsidebar;
 	height: 100%;
-	z-index: 99999; /* Needs to be high enough so it doesn't get covered by element-ui dialogs */
+	flex-basis: content;
+	z-index: 300;
 }
 
 .wrapper {

packages/editor-ui/src/components/AskAssistant/NewAssistantSessionModal.vue

@@ -46,9 +46,10 @@ const startNewSession = async () => {
 	<Modal
 		width="460px"
 		height="250px"
+		data-test-id="new-assistant-session-modal"
 		:name="NEW_ASSISTANT_SESSION_MODAL"
 		:center="true"
-		data-test-id="new-assistant-session-modal"
+		:append-to-body="true"
 	>
 		<template #header>
 			{{ i18n.baseText('aiAssistant.newSessionModal.title.part1') }}

packages/editor-ui/src/components/AssignmentCollection/__tests__/Assignment.test.ts

@@ -5,6 +5,7 @@ import Assignment from '../Assignment.vue';
 import { defaultSettings } from '@/__tests__/defaults';
 import { STORES } from '@/constants';
 import { merge } from 'lodash-es';
+import { cleanupAppModals, createAppModals } from '@/__tests__/utils';
 
 const DEFAULT_SETUP = {
 	pinia: createTestingPinia({
@@ -24,7 +25,12 @@ const DEFAULT_SETUP = {
 const renderComponent = createComponentRenderer(Assignment, DEFAULT_SETUP);
 
 describe('Assignment.vue', () => {
+	beforeEach(() => {
+		createAppModals();
+	});
+
 	afterEach(() => {
+		cleanupAppModals();
 		vi.clearAllMocks();
 	});
 

packages/editor-ui/src/components/AssignmentCollection/__tests__/AssignmentCollection.test.ts

@@ -6,7 +6,7 @@ import { fireEvent, within } from '@testing-library/vue';
 import * as workflowHelpers from '@/composables/useWorkflowHelpers';
 import AssignmentCollection from '../AssignmentCollection.vue';
 import { STORES } from '@/constants';
-import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import { cleanupAppModals, createAppModals, SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
 
 const DEFAULT_SETUP = {
 	pinia: createTestingPinia({
@@ -64,8 +64,13 @@ async function dropAssignment({
 }
 
 describe('AssignmentCollection.vue', () => {
+	beforeEach(() => {
+		createAppModals();
+	});
+
 	afterEach(() => {
 		vi.clearAllMocks();
+		cleanupAppModals();
 	});
 
 	it('renders empty state properly', async () => {

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

@@ -20,6 +20,8 @@ import { useDebounce } from '@/composables/useDebounce';
 import DraggableTarget from './DraggableTarget.vue';
 import { dropInEditor } from '@/plugins/codemirror/dragAndDrop';
 
+import { APP_MODALS_ELEMENT_ID } from '@/constants';
+
 type Props = {
 	parameter: INodeProperties;
 	path: string;
@@ -122,8 +124,8 @@ async function onDrop(expression: string, event: MouseEvent) {
 
 <template>
 	<el-dialog
-		width="calc(100vw - var(--spacing-3xl))"
-		append-to-body
+		width="calc(100% - var(--spacing-3xl))"
+		:append-to="`#${APP_MODALS_ELEMENT_ID}`"
 		:class="$style.modal"
 		:model-value="dialogVisible"
 		:before-close="closeDialog"

packages/editor-ui/src/components/FilterConditions/__tests__/FilterConditions.test.ts

@@ -1,5 +1,5 @@
 import { createComponentRenderer } from '@/__tests__/render';
-import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import { cleanupAppModals, createAppModals, SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
 import FilterConditions from '@/components/FilterConditions/FilterConditions.vue';
 import { STORES } from '@/constants';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -35,8 +35,13 @@ const DEFAULT_SETUP = {
 const renderComponent = createComponentRenderer(FilterConditions, DEFAULT_SETUP);
 
 describe('FilterConditions.vue', () => {
+	beforeEach(() => {
+		createAppModals();
+	});
+
 	afterEach(() => {
 		vi.clearAllMocks();
+		cleanupAppModals();
 	});
 
 	it('renders default state properly', async () => {