Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

6 files changed, 103 insertions, 55 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"
diff --git a/app/assets/javascripts/projects/compare/index.js b/app/assets/javascripts/projects/compare/index.js
index 4ba4e308cd4..322dff773b8 100644
--- a/app/assets/javascripts/projects/compare/index.js
+++ b/app/assets/javascripts/projects/compare/index.js
@@ -22,10 +22,6 @@ export default function init() {
       components: {
         CompareApp,
       },
-      provide: {
-        projectTo: JSON.parse(projectTo),
-        projectsFrom: JSON.parse(projectsFrom),
-      },
       render(createElement) {
         return createElement(CompareApp, {
           props: {
@@ -35,6 +31,8 @@ export default function init() {
             projectCompareIndexPath,
             projectMergeRequestPath,
             createMrPath,
+            defaultProject: JSON.parse(projectTo),
+            projects: JSON.parse(projectsFrom),
           },
         });
       },