1 files changed, 43 insertions, 41 deletions

diff --git a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue
index 647e33333ce..0495546529a 100644
--- a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlModal } from '@gitlab/ui';
 import { __ } from '~/locale';
+import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import CommitSection from './components/commit/commit_section.vue';
 import PipelineEditorDrawer from './components/drawer/pipeline_editor_drawer.vue';
@@ -9,12 +10,22 @@ import PipelineEditorFileNav from './components/file_nav/pipeline_editor_file_na
 import PipelineEditorFileTree from './components/file_tree/container.vue';
 import PipelineEditorHeader from './components/header/pipeline_editor_header.vue';
 import PipelineEditorTabs from './components/pipeline_editor_tabs.vue';
-import { CREATE_TAB, FILE_TREE_DISPLAY_KEY } from './constants';
+import {
+  CREATE_TAB,
+  FILE_TREE_DISPLAY_KEY,
+  EDITOR_APP_DRAWER_HELP,
+  EDITOR_APP_DRAWER_JOB_ASSISTANT,
+  EDITOR_APP_DRAWER_AI_ASSISTANT,
+  EDITOR_APP_DRAWER_NONE,
+} from './constants';
 
 const AiAssistantDrawer = () =>
   import('ee_component/ci/pipeline_editor/components/ai_assistant_drawer.vue');
 
 export default {
+  EDITOR_APP_DRAWER_HELP,
+  EDITOR_APP_DRAWER_JOB_ASSISTANT,
+  EDITOR_APP_DRAWER_AI_ASSISTANT,
   commitSectionRef: 'commitSectionRef',
   modal: {
     switchBranch: {
@@ -67,15 +78,16 @@ export default {
   },
   data() {
     return {
+      currentDrawer: EDITOR_APP_DRAWER_NONE,
       currentTab: CREATE_TAB,
       scrollToCommitForm: false,
       shouldLoadNewBranch: false,
-      showDrawer: false,
-      showJobAssistantDrawer: false,
-      showAiAssistantDrawer: false,
-      drawerIndex: 200,
-      jobAssistantIndex: 200,
-      aiAssistantIndex: 200,
+      currentDrawerIndex: DRAWER_Z_INDEX,
+      drawerIndex: {
+        [EDITOR_APP_DRAWER_HELP]: DRAWER_Z_INDEX,
+        [EDITOR_APP_DRAWER_JOB_ASSISTANT]: DRAWER_Z_INDEX,
+        [EDITOR_APP_DRAWER_AI_ASSISTANT]: DRAWER_Z_INDEX,
+      },
       showFileTree: false,
       showSwitchBranchModal: false,
     };
@@ -87,6 +99,15 @@ export default {
     includesFiles() {
       return this.ciConfigData?.includes || [];
     },
+    showHelpDrawer() {
+      return this.currentDrawer === EDITOR_APP_DRAWER_HELP;
+    },
+    showJobAssistantDrawer() {
+      return this.currentDrawer === EDITOR_APP_DRAWER_JOB_ASSISTANT;
+    },
+    showAiAssistantDrawer() {
+      return this.currentDrawer === EDITOR_APP_DRAWER_AI_ASSISTANT;
+    },
   },
   mounted() {
     this.showFileTree = JSON.parse(localStorage.getItem(FILE_TREE_DISPLAY_KEY)) || false;
@@ -95,29 +116,15 @@ export default {
     closeBranchModal() {
       this.showSwitchBranchModal = false;
     },
-    closeDrawer() {
-      this.showDrawer = false;
-    },
-    closeJobAssistantDrawer() {
-      this.showJobAssistantDrawer = false;
-    },
-    closeAiAssistantDrawer() {
-      this.showAiAssistantDrawer = false;
-    },
-    openAiAssistantDrawer() {
-      this.showAiAssistantDrawer = true;
-      this.aiAssistantIndex = this.drawerIndex + 1;
-    },
     handleConfirmSwitchBranch() {
       this.showSwitchBranchModal = true;
     },
-    openDrawer() {
-      this.showDrawer = true;
-      this.drawerIndex = this.jobAssistantIndex + 1;
-    },
-    openJobAssistantDrawer() {
-      this.showJobAssistantDrawer = true;
-      this.jobAssistantIndex = this.drawerIndex + 1;
+    switchDrawer(drawerName) {
+      this.currentDrawer = drawerName;
+      if (this.drawerIndex[drawerName]) {
+        this.currentDrawerIndex += 1;
+        this.drawerIndex[drawerName] = this.currentDrawerIndex;
+      }
     },
     toggleFileTree() {
       this.showFileTree = !this.showFileTree;
@@ -180,16 +187,11 @@ export default {
           :commit-sha="commitSha"
           :current-tab="currentTab"
           :is-new-ci-config-file="isNewCiConfigFile"
-          :show-drawer="showDrawer"
+          :show-help-drawer="showHelpDrawer"
           :show-job-assistant-drawer="showJobAssistantDrawer"
           :show-ai-assistant-drawer="showAiAssistantDrawer"
           v-on="$listeners"
-          @open-drawer="openDrawer"
-          @close-drawer="closeDrawer"
-          @open-job-assistant-drawer="openJobAssistantDrawer"
-          @close-job-assistant-drawer="closeJobAssistantDrawer"
-          @open-ai-assistant-drawer="openAiAssistantDrawer"
-          @close-ai-assistant-drawer="closeAiAssistantDrawer"
+          @switch-drawer="switchDrawer"
           @set-current-tab="setCurrentTab"
           @walkthrough-popover-cta-clicked="setScrollToCommitForm"
         />
@@ -207,24 +209,24 @@ export default {
       v-on="$listeners"
     />
     <pipeline-editor-drawer
-      :is-visible="showDrawer"
-      :z-index="drawerIndex"
+      :is-visible="showHelpDrawer"
+      :z-index="drawerIndex[$options.EDITOR_APP_DRAWER_HELP]"
       v-on="$listeners"
-      @close-drawer="closeDrawer"
+      @switch-drawer="switchDrawer"
     />
     <job-assistant-drawer
       :ci-config-data="ciConfigData"
       :ci-file-content="ciFileContent"
       :is-visible="showJobAssistantDrawer"
-      :z-index="jobAssistantIndex"
+      :z-index="drawerIndex[$options.EDITOR_APP_DRAWER_JOB_ASSISTANT]"
       v-on="$listeners"
-      @close-job-assistant-drawer="closeJobAssistantDrawer"
+      @switch-drawer="switchDrawer"
     />
     <ai-assistant-drawer
       v-if="glFeatures.aiCiConfigGenerator"
       :is-visible="showAiAssistantDrawer"
-      :z-index="aiAssistantIndex"
-      @close-ai-assistant-drawer="closeAiAssistantDrawer"
+      :z-index="drawerIndex[$options.EDITOR_APP_DRAWER_AI_ASSISTANT]"
+      @switch-drawer="switchDrawer"
     />
   </div>
 </template>