diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue')
-rw-r--r-- | app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue | 84 |
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> |