diff options
Diffstat (limited to 'app/assets/javascripts/projects/compare/components')
5 files changed, 101 insertions, 51 deletions
diff --git a/app/assets/javascripts/projects/compare/components/app.vue b/app/assets/javascripts/projects/compare/components/app.vue index d2fb524489e..f7cfc82db11 100644 --- a/app/assets/javascripts/projects/compare/components/app.vue +++ b/app/assets/javascripts/projects/compare/components/app.vue @@ -1,6 +1,7 @@ <script> import { GlButton } from '@gitlab/ui'; import csrf from '~/lib/utils/csrf'; +import { joinPaths } from '~/lib/utils/url_utility'; import RevisionCard from './revision_card.vue'; export default { @@ -36,11 +37,46 @@ export default { type: String, required: true, }, + defaultProject: { + type: Object, + required: true, + }, + projects: { + type: Array, + required: true, + }, + }, + data() { + return { + from: { + projects: this.projects, + selectedProject: this.defaultProject, + revision: this.paramsFrom, + refsProjectPath: this.refsProjectPath, + }, + to: { + selectedProject: this.defaultProject, + revision: this.paramsTo, + refsProjectPath: this.refsProjectPath, + }, + }; }, methods: { onSubmit() { this.$refs.form.submit(); }, + onSelectProject({ direction, project }) { + const refsPath = joinPaths(gon.relative_url_root || '', `/${project.name}`, '/refs'); + // direction is either 'from' or 'to' + this[direction].refsProjectPath = refsPath; + this[direction].selectedProject = project; + }, + onSelectRevision({ direction, revision }) { + this[direction].revision = revision; // direction is either 'from' or 'to' + }, + onSwapRevision() { + [this.from, this.to] = [this.to, this.from]; // swaps 'from' and 'to' + }, }, }; </script> @@ -57,10 +93,15 @@ export default { class="gl-lg-flex-direction-row gl-lg-display-flex gl-align-items-center compare-revision-cards" > <revision-card - :refs-project-path="refsProjectPath" + data-testid="sourceRevisionCard" + :refs-project-path="to.refsProjectPath" revision-text="Source" params-name="to" - :params-branch="paramsTo" + :params-branch="to.revision" + :projects="to.projects" + :selected-project="to.selectedProject" + @selectProject="onSelectProject" + @selectRevision="onSelectRevision" /> <div class="compare-ellipsis gl-display-flex gl-justify-content-center gl-align-items-center gl-my-4 gl-md-my-0" @@ -69,16 +110,24 @@ export default { ... </div> <revision-card - :refs-project-path="refsProjectPath" + data-testid="targetRevisionCard" + :refs-project-path="from.refsProjectPath" revision-text="Target" params-name="from" - :params-branch="paramsFrom" + :params-branch="from.revision" + :projects="from.projects" + :selected-project="from.selectedProject" + @selectProject="onSelectProject" + @selectRevision="onSelectRevision" /> </div> <div class="gl-mt-4"> <gl-button category="primary" variant="success" @click="onSubmit"> {{ s__('CompareRevisions|Compare') }} </gl-button> + <gl-button data-testid="swapRevisionsButton" class="btn btn-default" @click="onSwapRevision"> + {{ s__('CompareRevisions|Swap revisions') }} + </gl-button> <gl-button v-if="projectMergeRequestPath" :href="projectMergeRequestPath" diff --git a/app/assets/javascripts/projects/compare/components/repo_dropdown.vue b/app/assets/javascripts/projects/compare/components/repo_dropdown.vue index cb9d8b64b33..ba1e00a2b36 100644 --- a/app/assets/javascripts/projects/compare/components/repo_dropdown.vue +++ b/app/assets/javascripts/projects/compare/components/repo_dropdown.vue @@ -1,57 +1,51 @@ <script> import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; -const SOURCE_PARAM_NAME = 'to'; - export default { components: { GlDropdown, GlDropdownItem, GlSearchBoxByType, }, - inject: ['projectTo', 'projectsFrom'], props: { paramsName: { type: String, required: true, }, + projects: { + type: Array, + required: false, + default: null, + }, + selectedProject: { + type: Object, + required: true, + }, }, data() { return { searchTerm: '', - selectedRepo: {}, }; }, computed: { + disableRepoDropdown() { + return this.projects === null; + }, filteredRepos() { const lowerCaseSearchTerm = this.searchTerm.toLowerCase(); - return this?.projectsFrom.filter(({ name }) => - name.toLowerCase().includes(lowerCaseSearchTerm), - ); - }, - isSourceRevision() { - return this.paramsName === SOURCE_PARAM_NAME; + return this?.projects.filter(({ name }) => name.toLowerCase().includes(lowerCaseSearchTerm)); }, inputName() { return `${this.paramsName}_project_id`; }, }, - mounted() { - this.setDefaultRepo(); - }, methods: { - onClick(repo) { - this.selectedRepo = repo; - this.emitTargetProject(repo.name); - }, - setDefaultRepo() { - this.selectedRepo = this.projectTo; + onClick(project) { + this.emitTargetProject(project); }, - emitTargetProject(name) { - if (!this.isSourceRevision) { - this.$emit('changeTargetProject', name); - } + emitTargetProject(project) { + this.$emit('selectProject', { direction: this.paramsName, project }); }, }, }; @@ -59,23 +53,23 @@ export default { <template> <div> - <input type="hidden" :name="inputName" :value="selectedRepo.id" /> + <input type="hidden" :name="inputName" :value="selectedProject.id" /> <gl-dropdown - :text="selectedRepo.name" + :text="selectedProject.name" :header-text="s__(`CompareRevisions|Select target project`)" class="gl-w-full gl-font-monospace gl-sm-pr-3" toggle-class="gl-min-w-0" - :disabled="isSourceRevision" + :disabled="disableRepoDropdown" > <template #header> - <gl-search-box-by-type v-if="!isSourceRevision" v-model.trim="searchTerm" /> + <gl-search-box-by-type v-if="!disableRepoDropdown" v-model.trim="searchTerm" /> </template> - <template v-if="!isSourceRevision"> + <template v-if="!disableRepoDropdown"> <gl-dropdown-item v-for="repo in filteredRepos" :key="repo.id" is-check-item - :is-checked="selectedRepo.id === repo.id" + :is-checked="selectedProject.id === repo.id" @click="onClick(repo)" > {{ repo.name }} diff --git a/app/assets/javascripts/projects/compare/components/revision_card.vue b/app/assets/javascripts/projects/compare/components/revision_card.vue index 15d24792310..02a329221cc 100644 --- a/app/assets/javascripts/projects/compare/components/revision_card.vue +++ b/app/assets/javascripts/projects/compare/components/revision_card.vue @@ -27,17 +27,14 @@ export default { required: false, default: null, }, - }, - data() { - return { - selectedRefsProjectPath: this.refsProjectPath, - }; - }, - methods: { - onChangeTargetProject(targetProjectName) { - if (this.paramsName === 'from') { - this.selectedRefsProjectPath = `/${targetProjectName}/refs`; - } + projects: { + type: Array, + required: false, + default: null, + }, + selectedProject: { + type: Object, + required: true, }, }, }; @@ -52,13 +49,16 @@ export default { <repo-dropdown class="gl-sm-w-half" :params-name="paramsName" - @changeTargetProject="onChangeTargetProject" + :projects="projects" + :selected-project="selectedProject" + v-on="$listeners" /> <revision-dropdown class="gl-sm-w-half gl-mt-3 gl-sm-mt-0" - :refs-project-path="selectedRefsProjectPath" + :refs-project-path="refsProjectPath" :params-name="paramsName" :params-branch="paramsBranch" + v-on="$listeners" /> </div> </gl-card> diff --git a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue index d0b69344c12..f0b8e73e528 100644 --- a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue +++ b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue @@ -56,6 +56,9 @@ export default { searchTerm: debounce(function debounceSearch() { this.searchBranchesAndTags(); }, SEARCH_DEBOUNCE_MS), + paramsBranch(newBranch) { + this.setSelectedRevision(newBranch); + }, }, mounted() { this.fetchBranchesAndTags(); @@ -84,7 +87,7 @@ export default { this.loading = true; if (reset) { - this.selectedRevision = this.getDefaultBranch(); + this.setSelectedRevision(this.paramsBranch); } return axios @@ -108,10 +111,14 @@ export default { return this.paramsBranch || EMPTY_DROPDOWN_TEXT; }, onClick(revision) { - this.selectedRevision = revision; + this.setSelectedRevision(revision); + this.$emit('selectRevision', { direction: this.paramsName, revision }); }, onSearchEnter() { - this.selectedRevision = this.searchTerm; + this.setSelectedRevision(this.searchTerm); + }, + setSelectedRevision(revision) { + this.selectedRevision = revision || EMPTY_DROPDOWN_TEXT; }, }, }; @@ -122,7 +129,7 @@ export default { <input type="hidden" :name="paramsName" :value="selectedRevision" /> <gl-dropdown class="gl-w-full gl-font-monospace" - toggle-class="form-control compare-dropdown-toggle js-compare-dropdown gl-min-w-0" + toggle-class="form-control compare-dropdown-toggle gl-min-w-0" :text="selectedRevision" :header-text="s__('CompareRevisions|Select Git revision')" :loading="loading" 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 f57a8942a77..19cf4cda2be 100644 --- a/app/assets/javascripts/projects/compare/components/revision_dropdown_legacy.vue +++ b/app/assets/javascripts/projects/compare/components/revision_dropdown_legacy.vue @@ -112,7 +112,7 @@ export default { <input type="hidden" :name="paramsName" :value="selectedRevision" /> <gl-dropdown class="gl-flex-grow-1 gl-flex-basis-0 gl-min-w-0 gl-font-monospace" - toggle-class="form-control compare-dropdown-toggle js-compare-dropdown gl-min-w-0 gl-rounded-top-left-none! gl-rounded-bottom-left-none!" + toggle-class="form-control compare-dropdown-toggle gl-min-w-0 gl-rounded-top-left-none! gl-rounded-bottom-left-none!" :text="selectedRevision" header-text="Select Git revision" :loading="loading" |