From e2caa0dc9c75a7355892e2a3270cf39ea5c25e96 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Wed, 20 Nov 2024 18:04:02 -0500
Subject: [PATCH 1/2] turn NPS survey into a modal and make sure it shows above
 the Ask AI button

---
 packages/editor-ui/src/components/ModalDrawer.vue    | 5 +++++
 packages/editor-ui/src/components/NpsSurvey.vue      | 6 +++++-
 packages/editor-ui/src/composables/useStyles.test.ts | 8 +++++++-
 packages/editor-ui/src/composables/useStyles.ts      | 1 +
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ModalDrawer.vue b/packages/editor-ui/src/components/ModalDrawer.vue
index 0c7d477374163..bd1039d1c8eff 100644
--- a/packages/editor-ui/src/components/ModalDrawer.vue
+++ b/packages/editor-ui/src/components/ModalDrawer.vue
@@ -13,10 +13,13 @@ const props = withDefaults(
 		modal?: boolean;
 		width: string;
 		wrapperClosable?: boolean;
+		closeOnClickModal?: boolean;
+		zIndex?: string;
 	}>(),
 	{
 		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" />
diff --git a/packages/editor-ui/src/components/NpsSurvey.vue b/packages/editor-ui/src/components/NpsSurvey.vue
index 41b69b110d6b6..818f7483f8acf 100644
--- a/packages/editor-ui/src/components/NpsSurvey.vue
+++ b/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>
diff --git a/packages/editor-ui/src/composables/useStyles.test.ts b/packages/editor-ui/src/composables/useStyles.test.ts
index 2e27979b3e13a..cf6eebd549cc4 100644
--- a/packages/editor-ui/src/composables/useStyles.test.ts
+++ b/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',
+		);
 	});
 });
diff --git a/packages/editor-ui/src/composables/useStyles.ts b/packages/editor-ui/src/composables/useStyles.ts
index dc1db3ade3956..f2a321aefa91e 100644
--- a/packages/editor-ui/src/composables/useStyles.ts
+++ b/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 = () => {

From 633e4166dfaef8056942bd37f9ae3d74a29d87c8 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Wed, 20 Nov 2024 18:52:50 -0500
Subject: [PATCH 2/2] fix typing issue

---
 packages/editor-ui/src/components/ModalDrawer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ModalDrawer.vue b/packages/editor-ui/src/components/ModalDrawer.vue
index bd1039d1c8eff..e7b113e99120c 100644
--- a/packages/editor-ui/src/components/ModalDrawer.vue
+++ b/packages/editor-ui/src/components/ModalDrawer.vue
@@ -14,7 +14,7 @@ const props = withDefaults(
 		width: string;
 		wrapperClosable?: boolean;
 		closeOnClickModal?: boolean;
-		zIndex?: string;
+		zIndex?: number;
 	}>(),
 	{
 		modal: true,