diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue | 70 |
1 files changed, 67 insertions, 3 deletions
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue index ba567023946..8e8f31a4acc 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue @@ -1,14 +1,31 @@ <script> +import { GlModal } from '@gitlab/ui'; +import { __ } from '~/locale'; import CommitSection from './components/commit/commit_section.vue'; import PipelineEditorDrawer from './components/drawer/pipeline_editor_drawer.vue'; import PipelineEditorFileNav from './components/file_nav/pipeline_editor_file_nav.vue'; import PipelineEditorHeader from './components/header/pipeline_editor_header.vue'; import PipelineEditorTabs from './components/pipeline_editor_tabs.vue'; -import { TABS_WITH_COMMIT_FORM, CREATE_TAB } from './constants'; +import { CREATE_TAB } from './constants'; export default { + commitSectionRef: 'commitSectionRef', + modal: { + switchBranch: { + title: __('You have unsaved changes'), + body: __('Uncommitted changes will be lost if you change branches. Do you want to continue?'), + actionPrimary: { + text: __('Switch Branches'), + }, + actionSecondary: { + text: __('Cancel'), + attributes: { variant: 'default' }, + }, + }, + }, components: { CommitSection, + GlModal, PipelineEditorDrawer, PipelineEditorFileNav, PipelineEditorHeader, @@ -28,6 +45,11 @@ export default { required: false, default: '', }, + hasUnsavedChanges: { + type: Boolean, + required: false, + default: false, + }, isNewCiConfigFile: { type: Boolean, required: true, @@ -36,40 +58,82 @@ export default { data() { return { currentTab: CREATE_TAB, + scrollToCommitForm: false, + shouldLoadNewBranch: false, + showSwitchBranchModal: false, }; }, computed: { showCommitForm() { - return TABS_WITH_COMMIT_FORM.includes(this.currentTab); + return this.currentTab === CREATE_TAB; }, }, methods: { + closeBranchModal() { + this.showSwitchBranchModal = false; + }, + handleConfirmSwitchBranch() { + this.showSwitchBranchModal = true; + }, + switchBranch() { + this.showSwitchBranchModal = false; + this.shouldLoadNewBranch = true; + }, setCurrentTab(tabName) { this.currentTab = tabName; }, + setScrollToCommitForm(newValue = true) { + this.scrollToCommitForm = newValue; + }, }, }; </script> <template> <div class="gl-pr-9 gl-transition-medium gl-w-full"> - <pipeline-editor-file-nav v-on="$listeners" /> + <gl-modal + v-if="showSwitchBranchModal" + visible + modal-id="switchBranchModal" + :title="$options.modal.switchBranch.title" + :action-primary="$options.modal.switchBranch.actionPrimary" + :action-secondary="$options.modal.switchBranch.actionSecondary" + @primary="switchBranch" + @secondary="closeBranchModal" + @cancel="closeBranchModal" + @hide="closeBranchModal" + > + {{ $options.modal.switchBranch.body }} + </gl-modal> + <pipeline-editor-file-nav + :has-unsaved-changes="hasUnsavedChanges" + :should-load-new-branch="shouldLoadNewBranch" + @select-branch="handleConfirmSwitchBranch" + v-on="$listeners" + /> <pipeline-editor-header :ci-config-data="ciConfigData" :commit-sha="commitSha" :is-new-ci-config-file="isNewCiConfigFile" + v-on="$listeners" /> <pipeline-editor-tabs :ci-config-data="ciConfigData" :ci-file-content="ciFileContent" :commit-sha="commitSha" + :is-new-ci-config-file="isNewCiConfigFile" v-on="$listeners" @set-current-tab="setCurrentTab" + @walkthrough-popover-cta-clicked="setScrollToCommitForm" /> <commit-section v-if="showCommitForm" + :ref="$options.commitSectionRef" :ci-file-content="ciFileContent" :commit-sha="commitSha" + :is-new-ci-config-file="isNewCiConfigFile" + :scroll-to-commit-form="scrollToCommitForm" + @scrolled-to-commit-form="setScrollToCommitForm(false)" v-on="$listeners" /> <pipeline-editor-drawer /> |