1 files changed, 25 insertions, 2 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"