diff options
Diffstat (limited to 'app/assets/javascripts/projects/compare')
4 files changed, 74 insertions, 34 deletions
diff --git a/app/assets/javascripts/projects/compare/components/app_legacy.vue b/app/assets/javascripts/projects/compare/components/app_legacy.vue index c0ff58ee074..d3f09f7d69f 100644 --- a/app/assets/javascripts/projects/compare/components/app_legacy.vue +++ b/app/assets/javascripts/projects/compare/components/app_legacy.vue @@ -37,10 +37,22 @@ export default { required: true, }, }, + data() { + return { + from: this.paramsFrom, + to: this.paramsTo, + }; + }, methods: { onSubmit() { this.$refs.form.submit(); }, + onSwapRevision() { + [this.from, this.to] = [this.to, this.from]; // swaps 'from' and 'to' + }, + onSelectRevision({ direction, revision }) { + this[direction] = revision; // direction is either 'from' or 'to' + }, }, }; </script> @@ -57,19 +69,30 @@ export default { :refs-project-path="refsProjectPath" revision-text="Source" params-name="to" - :params-branch="paramsTo" + :params-branch="to" + data-testid="sourceRevisionDropdown" + @selectRevision="onSelectRevision" /> <div class="compare-ellipsis gl-display-inline" data-testid="ellipsis">...</div> <revision-dropdown :refs-project-path="refsProjectPath" revision-text="Target" params-name="from" - :params-branch="paramsFrom" + :params-branch="from" + data-testid="targetRevisionDropdown" + @selectRevision="onSelectRevision" /> <gl-button category="primary" variant="success" class="gl-ml-3" @click="onSubmit"> {{ s__('CompareRevisions|Compare') }} </gl-button> <gl-button + data-testid="swapRevisionsButton" + class="btn btn-default gl-button gl-ml-3" + @click="onSwapRevision" + > + {{ s__('CompareRevisions|Swap revisions') }} + </gl-button> + <gl-button v-if="projectMergeRequestPath" :href="projectMergeRequestPath" data-testid="projectMrButton" diff --git a/app/assets/javascripts/projects/compare/components/repo_dropdown.vue b/app/assets/javascripts/projects/compare/components/repo_dropdown.vue index 822dfc09d81..cb9d8b64b33 100644 --- a/app/assets/javascripts/projects/compare/components/repo_dropdown.vue +++ b/app/assets/javascripts/projects/compare/components/repo_dropdown.vue @@ -46,14 +46,7 @@ export default { this.emitTargetProject(repo.name); }, setDefaultRepo() { - if (this.isSourceRevision) { - this.selectedRepo = this.projectTo; - return; - } - - const [defaultTargetProject] = this.projectsFrom; - this.emitTargetProject(defaultTargetProject.name); - this.selectedRepo = defaultTargetProject; + this.selectedRepo = this.projectTo; }, emitTargetProject(name) { if (!this.isSourceRevision) { diff --git a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue index a175af2f32e..d0b69344c12 100644 --- a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue +++ b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue @@ -1,10 +1,12 @@ <script> import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlDropdownSectionHeader } from '@gitlab/ui'; +import { debounce } from 'lodash'; import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import { s__ } from '~/locale'; -const emptyDropdownText = s__('CompareRevisions|Select branch/tag'); +const EMPTY_DROPDOWN_TEXT = s__('CompareRevisions|Select branch/tag'); +const SEARCH_DEBOUNCE_MS = 300; export default { components: { @@ -38,19 +40,11 @@ export default { }; }, computed: { - filteredBranches() { - return this.branches.filter((branch) => - branch.toLowerCase().includes(this.searchTerm.toLowerCase()), - ); + hasBranches() { + return Boolean(this.branches?.length); }, - hasFilteredBranches() { - return this.filteredBranches.length; - }, - filteredTags() { - return this.tags.filter((tag) => tag.toLowerCase().includes(this.searchTerm.toLowerCase())); - }, - hasFilteredTags() { - return this.filteredTags.length; + hasTags() { + return Boolean(this.tags?.length); }, }, watch: { @@ -59,13 +53,34 @@ export default { this.fetchBranchesAndTags(true); } }, + searchTerm: debounce(function debounceSearch() { + this.searchBranchesAndTags(); + }, SEARCH_DEBOUNCE_MS), }, mounted() { this.fetchBranchesAndTags(); }, methods: { + searchBranchesAndTags() { + return axios + .get(this.refsProjectPath, { + params: { + search: this.searchTerm, + }, + }) + .then(({ data }) => { + this.branches = data.Branches || []; + this.tags = data.Tags || []; + }) + .catch(() => { + createFlash({ + message: s__( + 'CompareRevisions|There was an error while searching the branch/tag list. Please try again.', + ), + }); + }); + }, fetchBranchesAndTags(reset = false) { - const endpoint = this.refsProjectPath; this.loading = true; if (reset) { @@ -73,7 +88,7 @@ export default { } return axios - .get(endpoint) + .get(this.refsProjectPath) .then(({ data }) => { this.branches = data.Branches || []; this.tags = data.Tags || []; @@ -90,7 +105,7 @@ export default { }); }, getDefaultBranch() { - return this.paramsBranch || emptyDropdownText; + return this.paramsBranch || EMPTY_DROPDOWN_TEXT; }, onClick(revision) { this.selectedRevision = revision; @@ -119,24 +134,24 @@ export default { @keyup.enter="onSearchEnter" /> </template> - <gl-dropdown-section-header v-if="hasFilteredBranches"> + <gl-dropdown-section-header v-if="hasBranches"> {{ s__('CompareRevisions|Branches') }} </gl-dropdown-section-header> <gl-dropdown-item - v-for="(branch, index) in filteredBranches" - :key="`branch${index}`" + v-for="branch in branches" + :key="branch" is-check-item :is-checked="selectedRevision === branch" @click="onClick(branch)" > {{ branch }} </gl-dropdown-item> - <gl-dropdown-section-header v-if="hasFilteredTags"> + <gl-dropdown-section-header v-if="hasTags"> {{ s__('CompareRevisions|Tags') }} </gl-dropdown-section-header> <gl-dropdown-item - v-for="(tag, index) in filteredTags" - :key="`tag${index}`" + v-for="tag in tags" + :key="tag" is-check-item :is-checked="selectedRevision === tag" @click="onClick(tag)" diff --git a/app/assets/javascripts/projects/compare/components/revision_dropdown_legacy.vue b/app/assets/javascripts/projects/compare/components/revision_dropdown_legacy.vue index 13d80b5ae0b..f57a8942a77 100644 --- a/app/assets/javascripts/projects/compare/components/revision_dropdown_legacy.vue +++ b/app/assets/javascripts/projects/compare/components/revision_dropdown_legacy.vue @@ -55,6 +55,11 @@ export default { return this.filteredTags.length; }, }, + watch: { + paramsBranch(newBranch) { + this.setSelectedRevision(newBranch); + }, + }, mounted() { this.fetchBranchesAndTags(); }, @@ -83,10 +88,14 @@ export default { return this.paramsBranch || s__('CompareRevisions|Select branch/tag'); }, onClick(revision) { - this.selectedRevision = revision; + this.setSelectedRevision(revision); }, onSearchEnter() { - this.selectedRevision = this.searchTerm; + this.setSelectedRevision(this.searchTerm); + }, + setSelectedRevision(revision) { + this.selectedRevision = revision || s__('CompareRevisions|Select branch/tag'); + this.$emit('selectRevision', { direction: this.paramsName, revision }); }, }, }; |