Add latest changes from gitlab-org/gitlab@master

4 files changed, 67 insertions, 40 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index c6e3b477256..fd331e11a12 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -145,8 +145,6 @@ export default {
       isBatchLoading: (state) => state.diffs.isBatchLoading,
       diffFiles: (state) => state.diffs.diffFiles,
       diffViewType: (state) => state.diffs.diffViewType,
-      mergeRequestDiffs: (state) => state.diffs.mergeRequestDiffs,
-      mergeRequestDiff: (state) => state.diffs.mergeRequestDiff,
       commit: (state) => state.diffs.commit,
       renderOverflowWarning: (state) => state.diffs.renderOverflowWarning,
       numTotalFiles: (state) => state.diffs.realSize,
@@ -186,17 +184,16 @@ export default {
       return this.currentUser.can_fork === true && this.currentUser.can_create_merge_request;
     },
     renderDiffFiles() {
-      return (
-        this.diffFiles.length > 0 ||
-        (this.startVersion &&
-          this.startVersion.version_index === this.mergeRequestDiff.version_index)
-      );
+      return this.diffFiles.length > 0;
+    },
+    renderFileTree() {
+      return this.renderDiffFiles && this.showTreeList;
     },
     hideFileStats() {
       return this.treeWidth <= TREE_HIDE_STATS_WIDTH;
     },
     isLimitedContainer() {
-      return !this.showTreeList && !this.isParallelView && !this.isFluidLayout;
+      return !this.renderFileTree && !this.isParallelView && !this.isFluidLayout;
     },
     isDiffHead() {
       return parseBoolean(getParameterByName('diff_head'));
@@ -259,7 +256,7 @@ export default {
       this.adjustView();
     },
     isLoading: 'adjustView',
-    showTreeList: 'adjustView',
+    renderFileTree: 'adjustView',
   },
   mounted() {
     this.setBaseConfig({
@@ -467,7 +464,6 @@ export default {
     <div v-if="isLoading || !isTreeLoaded" class="loading"><gl-loading-icon size="lg" /></div>
     <div v-else id="diffs" :class="{ active: shouldShow }" class="diffs tab-pane">
       <compare-versions
-        :merge-request-diffs="mergeRequestDiffs"
         :is-limited-container="isLimitedContainer"
         :diff-files-count-text="numTotalFiles"
       />
@@ -495,7 +491,7 @@ export default {
         class="files d-flex gl-mt-2"
       >
         <div
-          v-if="showTreeList"
+          v-if="renderFileTree"
           :style="{ width: `${treeWidth}px` }"
           class="diff-tree-list js-diff-tree-list px-3 pr-md-0"
         >
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index f3cc359a679..489278fd6ef 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -22,10 +22,6 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
-    mergeRequestDiffs: {
-      type: Array,
-      required: true,
-    },
     isLimitedContainer: {
       type: Boolean,
       required: false,
@@ -44,6 +40,7 @@ export default {
       'diffCompareDropdownSourceVersions',
     ]),
     ...mapState('diffs', [
+      'diffFiles',
       'commit',
       'showTreeList',
       'startVersion',
@@ -51,12 +48,15 @@ export default {
       'addedLines',
       'removedLines',
     ]),
-    showDropdowns() {
-      return !this.commit && this.mergeRequestDiffs.length;
-    },
     toggleFileBrowserTitle() {
       return this.showTreeList ? __('Hide file browser') : __('Show file browser');
     },
+    hasChanges() {
+      return this.diffFiles.length > 0;
+    },
+    hasSourceVersions() {
+      return this.diffCompareDropdownSourceVersions.length > 0;
+    },
   },
   created() {
     this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES;
@@ -82,6 +82,7 @@ export default {
       }"
     >
       <gl-button
+        v-if="hasChanges"
         v-gl-tooltip.hover
         variant="default"
         icon="file-tree"
@@ -90,8 +91,12 @@ export default {
         :selected="showTreeList"
         @click="setShowTreeList({ showTreeList: !showTreeList })"
       />
+      <div v-if="commit">
+        {{ __('Viewing commit') }}
+        <gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link>
+      </div>
       <gl-sprintf
-        v-if="showDropdowns"
+        v-else-if="hasSourceVersions"
         class="d-flex align-items-center compare-versions-container"
         :message="s__('MergeRequest|Compare %{target} and %{source}')"
       >
@@ -109,11 +114,7 @@ export default {
           />
         </template>
       </gl-sprintf>
-      <div v-else-if="commit">
-        {{ __('Viewing commit') }}
-        <gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link>
-      </div>
-      <div class="inline-parallel-buttons d-none d-md-flex ml-auto">
+      <div v-if="hasChanges" class="inline-parallel-buttons d-none d-md-flex ml-auto">
         <diff-stats
           :diff-files-count-text="diffFilesCountText"
           :added-lines="addedLines"
diff --git a/app/assets/javascripts/diffs/components/no_changes.vue b/app/assets/javascripts/diffs/components/no_changes.vue
index a640dcb0a90..e0fdbf6ac3a 100644
--- a/app/assets/javascripts/diffs/components/no_changes.vue
+++ b/app/assets/javascripts/diffs/components/no_changes.vue
@@ -14,7 +14,31 @@ export default {
     },
   },
   computed: {
+    ...mapGetters('diffs', [
+      'diffCompareDropdownTargetVersions',
+      'diffCompareDropdownSourceVersions',
+    ]),
     ...mapGetters(['getNoteableData']),
+    selectedSourceVersion() {
+      return this.diffCompareDropdownSourceVersions.find((x) => x.selected);
+    },
+    sourceName() {
+      if (!this.selectedSourceVersion || this.selectedSourceVersion.isLatestVersion) {
+        return this.getNoteableData.source_branch;
+      }
+
+      return this.selectedSourceVersion.versionName;
+    },
+    selectedTargetVersion() {
+      return this.diffCompareDropdownTargetVersions.find((x) => x.selected);
+    },
+    targetName() {
+      if (!this.selectedTargetVersion || this.selectedTargetVersion.version_index < 0) {
+        return this.getNoteableData.target_branch;
+      }
+
+      return this.selectedTargetVersion.versionName || '';
+    },
   },
 };
 </script>
@@ -26,14 +50,16 @@ export default {
     </div>
     <div class="col-12">
       <div class="text-content text-center">
-        <gl-sprintf :message="__('No changes between %{sourceBranch} and %{targetBranch}')">
-          <template #sourceBranch>
-            <span class="ref-name">{{ getNoteableData.source_branch }}</span>
-          </template>
-          <template #targetBranch>
-            <span class="ref-name">{{ getNoteableData.target_branch }}</span>
-          </template>
-        </gl-sprintf>
+        <div data-testid="no-changes-message">
+          <gl-sprintf :message="__('No changes between %{source} and %{target}')">
+            <template #source>
+              <span class="ref-name">{{ sourceName }}</span>
+            </template>
+            <template #target>
+              <span class="ref-name">{{ targetName }}</span>
+            </template>
+          </gl-sprintf>
+        </div>
         <div class="text-center">
           <gl-button :href="getNoteableData.new_blob_path" variant="success" category="primary">{{
             __('Create commit')
diff --git a/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js b/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
index 0d1fd26777f..3f33b0c900e 100644
--- a/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
+++ b/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
@@ -58,14 +58,18 @@ export const diffCompareDropdownTargetVersions = (state, getters) => {
 
 export const diffCompareDropdownSourceVersions = (state, getters) => {
   // Appended properties here are to make the compare_dropdown_layout easier to reason about
-  return state.mergeRequestDiffs.map((v, i) => ({
-    ...v,
-    href: v.version_path,
-    commitsText: n__(`%d commit,`, `%d commits,`, v.commits_count),
-    versionName:
-      i === 0
+  return state.mergeRequestDiffs.map((v, i) => {
+    const isLatestVersion = i === 0;
+
+    return {
+      ...v,
+      href: v.version_path,
+      commitsText: n__(`%d commit,`, `%d commits,`, v.commits_count),
+      isLatestVersion,
+      versionName: isLatestVersion
         ? __('latest version')
         : sprintf(__(`version %{versionIndex}`), { versionIndex: v.version_index }),
-    selected: v.version_index === getters.selectedSourceIndex,
-  }));
+      selected: v.version_index === getters.selectedSourceIndex,
+    };
+  });
 };