Re-add swap revisions feature (legacy)

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,18 +69,29 @@ 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"

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 });
     },
   },
 };

changelogs/unreleased/225345-re-add-swap-branches-feature.yml

+---
+title: Re-add swap revisions feature (legacy)
+merge_request: 57802
+author:
+type: added

locale/gitlab.pot

@@ -7862,6 +7862,9 @@ msgstr ""
 msgid "CompareRevisions|Select target project"
 msgstr ""
 
+msgid "CompareRevisions|Swap revisions"
+msgstr ""
+
 msgid "CompareRevisions|Tags"
 msgstr ""
 

spec/frontend/projects/compare/components/app_legacy_spec.js

@@ -8,7 +8,7 @@ jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 const projectCompareIndexPath = 'some/path';
 const refsProjectPath = 'some/refs/path';
 const paramsFrom = 'master';
-const paramsTo = 'master';
+const paramsTo = 'some-other-branch';
 
 describe('CompareApp component', () => {
   let wrapper;
@@ -36,6 +36,9 @@ describe('CompareApp component', () => {
     createComponent();
   });
 
+  const findSourceDropdown = () => wrapper.find('[data-testid="sourceRevisionDropdown"]');
+  const findTargetDropdown = () => wrapper.find('[data-testid="targetRevisionDropdown"]');
+
   it('renders component with prop', () => {
     expect(wrapper.props()).toEqual(
       expect.objectContaining({
@@ -62,12 +65,31 @@ describe('CompareApp component', () => {
     expect(wrapper.find('[data-testid="ellipsis"]').exists()).toBe(true);
   });
 
-  it('render Source and Target BranchDropdown components', () => {
-    const branchDropdowns = wrapper.findAll(RevisionDropdown);
+  describe('Source and Target BranchDropdown components', () => {
+    const findAllBranchDropdowns = () => wrapper.findAll(RevisionDropdown);
+
+    it('renders the components with the correct props', () => {
+      expect(findAllBranchDropdowns().length).toBe(2);
+      expect(findSourceDropdown().props('revisionText')).toBe('Source');
+      expect(findTargetDropdown().props('revisionText')).toBe('Target');
+    });
+
+    it('sets the revision when the "selectRevision" event is emitted', async () => {
+      findSourceDropdown().vm.$emit('selectRevision', {
+        direction: 'to',
+        revision: 'some-source-revision',
+      });
+
+      findTargetDropdown().vm.$emit('selectRevision', {
+        direction: 'from',
+        revision: 'some-target-revision',
+      });
+
+      await wrapper.vm.$nextTick();
 
-    expect(branchDropdowns.length).toBe(2);
-    expect(branchDropdowns.at(0).props('revisionText')).toBe('Source');
-    expect(branchDropdowns.at(1).props('revisionText')).toBe('Target');
+      expect(findTargetDropdown().props('paramsBranch')).toBe('some-target-revision');
+      expect(findSourceDropdown().props('paramsBranch')).toBe('some-source-revision');
+    });
   });
 
   describe('compare button', () => {
@@ -87,6 +109,27 @@ describe('CompareApp component', () => {
     });
   });
 
+  describe('swap revisions button', () => {
+    const findSwapRevisionsButton = () => wrapper.find('[data-testid="swapRevisionsButton"]');
+
+    it('renders the swap revisions button', () => {
+      expect(findSwapRevisionsButton().exists()).toBe(true);
+    });
+
+    it('has the correct text', () => {
+      expect(findSwapRevisionsButton().text()).toBe('Swap revisions');
+    });
+
+    it('swaps revisions when clicked', async () => {
+      findSwapRevisionsButton().vm.$emit('click');
+
+      await wrapper.vm.$nextTick();
+
+      expect(findTargetDropdown().props('paramsBranch')).toBe(paramsTo);
+      expect(findSourceDropdown().props('paramsBranch')).toBe(paramsFrom);
+    });
+  });
+
   describe('merge request buttons', () => {
     const findProjectMrButton = () => wrapper.find('[data-testid="projectMrButton"]');
     const findCreateMrButton = () => wrapper.find('[data-testid="createMrButton"]');

spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js

-import { GlDropdown } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import createFlash from '~/flash';
@@ -29,6 +29,7 @@ describe('RevisionDropdown component', () => {
 
   beforeEach(() => {
     axiosMock = new AxiosMockAdapter(axios);
+    createComponent();
   });
 
   afterEach(() => {
@@ -39,7 +40,6 @@ describe('RevisionDropdown component', () => {
   const findGlDropdown = () => wrapper.find(GlDropdown);
 
   it('sets hidden input', () => {
-    createComponent();
     expect(wrapper.find('input[type="hidden"]').attributes('value')).toBe(
       defaultProps.paramsBranch,
     );
@@ -68,8 +68,6 @@ describe('RevisionDropdown component', () => {
       Tags: undefined,
     });
 
-    createComponent();
-
     await axios.waitForAll();
 
     expect(wrapper.vm.branches).toEqual([]);
@@ -79,15 +77,12 @@ describe('RevisionDropdown component', () => {
   it('shows flash message on error', async () => {
     axiosMock.onGet('some/invalid/path').replyOnce(404);
 
-    createComponent();
-
     await wrapper.vm.fetchBranchesAndTags();
     expect(createFlash).toHaveBeenCalled();
   });
 
   describe('GlDropdown component', () => {
     it('renders props', () => {
-      createComponent();
       expect(wrapper.props()).toEqual(expect.objectContaining(defaultProps));
     });
 
@@ -99,8 +94,22 @@ describe('RevisionDropdown component', () => {
     });
 
     it('display params branch text', () => {
-      createComponent();
       expect(findGlDropdown().props('text')).toBe(defaultProps.paramsBranch);
     });
+
+    it('emits a "selectRevision" event when a revision is selected', async () => {
+      const findGlDropdownItems = () => wrapper.findAll(GlDropdownItem);
+      const findFirstGlDropdownItem = () => findGlDropdownItems().at(0);
+
+      wrapper.setData({ branches: ['some-branch'] });
+
+      await wrapper.vm.$nextTick();
+
+      findFirstGlDropdownItem().vm.$emit('click');
+
+      expect(wrapper.emitted()).toEqual({
+        selectRevision: [[{ direction: 'from', revision: 'some-branch' }]],
+      });
+    });
   });
 });