1 files changed, 34 insertions, 8 deletions
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')