1 files changed, 53 insertions, 4 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"