fix(editor): Ensure toasts show above modal overlays (#11410)

cypress/e2e/2-credentials.cy.ts

@@ -15,7 +15,7 @@ import {
 	TRELLO_NODE_NAME,
 } from '../constants';
 import { CredentialsModal, CredentialsPage, NDV, WorkflowPage } from '../pages';
-import { successToast } from '../pages/notifications';
+import { errorToast, successToast } from '../pages/notifications';
 import { getVisibleSelect } from '../utils';
 
 const credentialsPage = new CredentialsPage();
@@ -278,4 +278,25 @@ describe('Credentials', () => {
 		credentialsModal.getters.credentialAuthTypeRadioButtons().first().click();
 		nodeDetailsView.getters.copyInput().should('not.exist');
 	});
+
+	it('ADO-2583 should show notifications above credential modal overlay', () => {
+		// check error notifications because they are sticky
+		cy.intercept('POST', '/rest/credentials', { forceNetworkError: true });
+		credentialsPage.getters.createCredentialButton().click();
+
+		credentialsModal.getters.newCredentialModal().should('be.visible');
+		credentialsModal.getters.newCredentialTypeSelect().should('be.visible');
+		credentialsModal.getters.newCredentialTypeOption('Notion API').click();
+
+		credentialsModal.getters.newCredentialTypeButton().click();
+		credentialsModal.getters.connectionParameter('Internal Integration Secret').type('1234567890');
+
+		credentialsModal.actions.setName('My awesome Notion account');
+		credentialsModal.getters.saveButton().click({ force: true });
+		errorToast().should('have.length', 1);
+		errorToast().should('be.visible');
+
+		errorToast().should('have.css', 'z-index', '2100');
+		cy.get('.el-overlay').should('have.css', 'z-index', '2001');
+	});
 });

packages/editor-ui/src/App.vue

@@ -16,6 +16,7 @@ import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useHistoryHelper } from '@/composables/useHistoryHelper';
+import { useStyles } from './composables/useStyles';
 
 const route = useRoute();
 const rootStore = useRootStore();
@@ -24,6 +25,8 @@ const uiStore = useUIStore();
 const usersStore = useUsersStore();
 const settingsStore = useSettingsStore();
 
+const { setAppZIndexes } = useStyles();
+
 // Initialize undo/redo
 useHistoryHelper(route);
 
@@ -41,6 +44,7 @@ watch(defaultLocale, (newLocale) => {
 });
 
 onMounted(async () => {
+	setAppZIndexes();
 	logHiringBanner();
 	void useExternalHooks().run('app.mount');
 	loading.value = false;
@@ -134,7 +138,7 @@ const updateGridWidth = async () => {
 
 .banners {
 	grid-area: banners;
-	z-index: 999;
+	z-index: var(--z-index-top-banners);
 }
 
 .content {
@@ -154,13 +158,13 @@ const updateGridWidth = async () => {
 
 .header {
 	grid-area: header;
-	z-index: 99;
+	z-index: var(--z-index-app-header);
 }
 
 .sidebar {
 	grid-area: sidebar;
 	height: 100%;
-	z-index: 999;
+	z-index: var(--z-index-app-sidebar);
 }
 
 .modals {

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

@@ -106,7 +106,7 @@ function onClose() {
 .container {
 	height: 100%;
 	flex-basis: content;
-	z-index: 300;
+	z-index: var(--z-index-ask-assistant-chat);
 }
 
 .wrapper {

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { useI18n } from '@/composables/useI18n';
+import { useStyles } from '@/composables/useStyles';
 import { useAssistantStore } from '@/stores/assistant.store';
 import AssistantAvatar from 'n8n-design-system/components/AskAssistantAvatar/AssistantAvatar.vue';
 import AskAssistantButton from 'n8n-design-system/components/AskAssistantButton/AskAssistantButton.vue';
 import { computed } from 'vue';
 
 const assistantStore = useAssistantStore();
 const i18n = useI18n();
+const { APP_Z_INDEXES } = useStyles();
 
 const lastUnread = computed(() => {
 	const msg = assistantStore.lastUnread;
@@ -39,7 +41,7 @@ const onClick = () => {
 		data-test-id="ask-assistant-floating-button"
 	>
 		<n8n-tooltip
-			:z-index="4000"
+			:z-index="APP_Z_INDEXES.ASK_ASSISTANT_FLOATING_BUTTON_TOOLTIP"
 			placement="top"
 			:visible="!!lastUnread"
 			:popper-class="$style.tooltip"
@@ -61,7 +63,7 @@ const onClick = () => {
 	position: absolute;
 	bottom: var(--spacing-s);
 	right: var(--spacing-s);
-	z-index: 3000;
+	z-index: var(--z-index-ask-assistant-floating-button);
 }
 
 .tooltip {

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

@@ -5,6 +5,7 @@ import type { EventBus } from 'n8n-design-system';
 import { useUIStore } from '@/stores/ui.store';
 import type { ModalKey } from '@/Interface';
 import { APP_MODALS_ELEMENT_ID } from '@/constants';
+import { useStyles } from '@/composables/useStyles';
 
 const props = withDefaults(
 	defineProps<{
@@ -50,6 +51,8 @@ const props = withDefaults(
 
 const emit = defineEmits<{ enter: [] }>();
 
+const { APP_Z_INDEXES } = useStyles();
+
 const styles = computed(() => {
 	const styles: { [prop: string]: string } = {};
 	if (props.height) {
@@ -143,7 +146,7 @@ function getCustomClass() {
 		:append-to-body="appendToBody"
 		:data-test-id="`${name}-modal`"
 		:modal-class="center ? $style.center : ''"
-		:z-index="2000"
+		:z-index="APP_Z_INDEXES.MODALS"
 	>
 		<template v-if="$slots.header" #header>
 			<slot v-if="!loading" name="header" />

packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue

@@ -173,7 +173,7 @@ onBeforeUnmount(() => {
 	top: $header-height;
 	bottom: 0;
 	right: 0;
-	z-index: 200;
+	z-index: var(--z-index-node-creator);
 	width: $node-creator-width;
 	color: $node-creator-text-color;
 }

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

@@ -36,6 +36,7 @@ import { usePinnedData } from '@/composables/usePinnedData';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@/composables/useI18n';
 import { storeToRefs } from 'pinia';
+import { useStyles } from '@/composables/useStyles';
 
 const emit = defineEmits<{
 	saveKeyboardShortcut: [event: KeyboardEvent];
@@ -73,6 +74,7 @@ const deviceSupport = useDeviceSupport();
 const telemetry = useTelemetry();
 const i18n = useI18n();
 const message = useMessage();
+const { APP_Z_INDEXES } = useStyles();
 
 const settingsEventBus = createEventBus();
 const redrawRequired = ref(false);
@@ -668,7 +670,7 @@ onBeforeUnmount(() => {
 		width="auto"
 		:append-to="`#${APP_MODALS_ELEMENT_ID}`"
 		data-test-id="ndv"
-		:z-index="1800"
+		:z-index="APP_Z_INDEXES.NDV"
 		:data-has-output-connection="hasOutputConnection"
 	>
 		<n8n-tooltip

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

@@ -20,6 +20,7 @@ import { assert } from '@/utils/assert';
 import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 import { useNodeBase } from '@/composables/useNodeBase';
 import { useTelemetry } from '@/composables/useTelemetry';
+import { useStyles } from '@/composables/useStyles';
 
 const props = withDefaults(
 	defineProps<{
@@ -54,6 +55,7 @@ const ndvStore = useNDVStore();
 const nodeTypesStore = useNodeTypesStore();
 const uiStore = useUIStore();
 const workflowsStore = useWorkflowsStore();
+const { APP_Z_INDEXES } = useStyles();
 
 const isResizing = ref<boolean>(false);
 const isTouchActive = ref<boolean>(false);
@@ -136,7 +138,9 @@ const stickySize = computed<StyleValue>(() => ({
 const stickyPosition = computed<StyleValue>(() => ({
 	left: position.value[0] + 'px',
 	top: position.value[1] + 'px',
-	zIndex: props.isActive ? 9999999 : -1 * Math.floor((height.value * width.value) / 1000),
+	zIndex: props.isActive
+		? APP_Z_INDEXES.ACTIVE_STICKY
+		: -1 * Math.floor((height.value * width.value) / 1000),
 }));
 
 const workflowRunning = computed(() => uiStore.isActionActive.workflowRunning);