diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue | 49 |
1 files changed, 38 insertions, 11 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue index 68065cc3c73..baf1d17b233 100644 --- a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue +++ b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue @@ -12,7 +12,7 @@ import { produce } from 'immer'; import { fetchPolicies } from '~/lib/graphql'; import { historyPushState } from '~/lib/utils/common_utils'; import { setUrlParams } from '~/lib/utils/url_utility'; -import { s__ } from '~/locale'; +import { __ } from '~/locale'; import { BRANCH_PAGINATION_LIMIT, BRANCH_SEARCH_DEBOUNCE, @@ -25,9 +25,9 @@ import getLastCommitBranchQuery from '~/pipeline_editor/graphql/queries/client/l export default { i18n: { - dropdownHeader: s__('Switch branch'), - title: s__('Branches'), - fetchError: s__('Unable to fetch branch list for this project.'), + dropdownHeader: __('Switch branch'), + title: __('Branches'), + fetchError: __('Unable to fetch branch list for this project.'), }, inputDebounce: BRANCH_SEARCH_DEBOUNCE, components: { @@ -43,14 +43,25 @@ export default { }, inject: ['projectFullPath', 'totalBranches'], props: { + hasUnsavedChanges: { + type: Boolean, + required: false, + default: false, + }, paginationLimit: { type: Number, required: false, default: BRANCH_PAGINATION_LIMIT, }, + shouldLoadNewBranch: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { + branchSelected: null, availableBranches: [], filteredBranches: [], isSearchingBranches: false, @@ -101,10 +112,17 @@ export default { isBranchesLoading() { return this.$apollo.queries.availableBranches.loading || this.isSearchingBranches; }, - showBranchSwitcher() { + enableBranchSwitcher() { return this.branches.length > 0 || this.searchTerm.length > 0; }, }, + watch: { + shouldLoadNewBranch(flag) { + if (flag) { + this.changeBranch(this.branchSelected); + } + }, + }, methods: { availableBranchesQueryVars(varsOverride = {}) { if (this.searchTerm.length > 0) { @@ -149,11 +167,7 @@ export default { }) .catch(this.showFetchError); }, - async selectBranch(newBranch) { - if (newBranch === this.currentBranch) { - return; - } - + async changeBranch(newBranch) { this.updateCurrentBranch(newBranch); const updatedPath = setUrlParams({ branch_name: newBranch }); historyPushState(updatedPath); @@ -164,6 +178,19 @@ export default { await this.$nextTick(); this.$emit('refetchContent'); }, + selectBranch(newBranch) { + if (newBranch !== this.currentBranch) { + // If there are unsaved changes, we want to show the user + // a modal to confirm what to do with these before changing + // branches. + if (this.hasUnsavedChanges) { + this.branchSelected = newBranch; + this.$emit('select-branch', newBranch); + } else { + this.changeBranch(newBranch); + } + } + }, async setSearchTerm(newSearchTerm) { this.pageCounter = 0; this.searchTerm = newSearchTerm.trim(); @@ -203,11 +230,11 @@ export default { <template> <gl-dropdown - v-if="showBranchSwitcher" v-gl-tooltip.hover :title="$options.i18n.dropdownHeader" :header-text="$options.i18n.dropdownHeader" :text="currentBranch" + :disabled="!enableBranchSwitcher" icon="branch" data-qa-selector="branch_selector_button" data-testid="branch-selector" |