fix(editor): Turn NPS survey into a modal and make sure it shows above the Ask AI button (#11814)

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

@@ -13,10 +13,13 @@ const props = withDefaults(
 		modal?: boolean;
 		width: string;
 		wrapperClosable?: boolean;
+		closeOnClickModal?: boolean;
+		zIndex?: number;
 	}>(),
 	{
 		modal: true,
 		wrapperClosable: true,
+		closeOnClickModal: false,
 	},
 );
 
@@ -77,6 +80,8 @@ onBeforeUnmount(() => {
 		:before-close="close"
 		:modal="modal"
 		:wrapper-closable="wrapperClosable"
+		:close-on-click-modal="closeOnClickModal"
+		:z-index="zIndex"
 	>
 		<template #header>
 			<slot name="header" />

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

@@ -8,6 +8,7 @@ import { ref, computed, watch } from 'vue';
 import { createEventBus } from 'n8n-design-system/utils';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
+import { useStyles } from '@/composables/useStyles';
 
 const props = defineProps<{
 	isActive?: boolean;
@@ -17,6 +18,7 @@ const rootStore = useRootStore();
 const i18n = useI18n();
 const toast = useToast();
 const telemetry = useTelemetry();
+const { APP_Z_INDEXES } = useStyles();
 
 const DEFAULT_TITLE = i18n.baseText('prompts.npsSurvey.recommendationQuestion');
 const GREAT_FEEDBACK_TITLE = i18n.baseText('prompts.npsSurvey.greatFeedbackTitle');
@@ -123,12 +125,14 @@ watch(
 		:name="NPS_SURVEY_MODAL_KEY"
 		:event-bus="modalBus"
 		:before-close="closeDialog"
-		:modal="false"
+		:modal="true"
 		:wrapper-closable="false"
 		direction="btt"
 		width="120px"
 		class="nps-survey"
 		:class="$style.npsSurvey"
+		:close-on-click-modal="false"
+		:z-index="APP_Z_INDEXES.NPS_SURVEY_MODAL"
 		data-test-id="nps-survey-modal"
 	>
 		<template #header>

packages/editor-ui/src/composables/useStyles.test.ts

@@ -17,9 +17,15 @@ describe('useStyles', () => {
 			'--z-index-canvas-add-button',
 			'101',
 		);
-		expect(global.document.documentElement.style.setProperty).toHaveBeenLastCalledWith(
+
+		expect(global.document.documentElement.style.setProperty).toHaveBeenCalledWith(
 			'--z-index-workflow-preview-ndv',
 			'9999999',
 		);
+
+		expect(global.document.documentElement.style.setProperty).toHaveBeenLastCalledWith(
+			'--z-index-nps-survey-modal',
+			'3001',
+		);
 	});
 });

packages/editor-ui/src/composables/useStyles.ts

@@ -15,6 +15,7 @@ const APP_Z_INDEXES = {
 	DRAGGABLE: 9999999,
 	ACTIVE_STICKY: 9999999,
 	WORKFLOW_PREVIEW_NDV: 9999999,
+	NPS_SURVEY_MODAL: 3001,
 } as const;
 
 const setAppZIndexes = () => {