1 files changed, 35 insertions, 30 deletions
diff --git a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
index 2c249f71091..6c5973b7c28 100644
--- a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
+++ b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
@@ -1,11 +1,12 @@
 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
     GlDropdown,
     GlDropdownItem,
+    GlDropdownDivider,
     TimeAgo,
   },
   props: {
@@ -24,34 +25,38 @@ export default {
 
 <template>
   <gl-dropdown :text="selectedVersionName" data-qa-selector="dropdown_content">
-    <gl-dropdown-item
-      v-for="version in versions"
-      :key="version.id"
-      :class="{
-        'is-active': version.selected,
-      }"
-      :is-check-item="true"
-      :is-checked="version.selected"
-      :href="version.href"
-    >
-      <div>
-        <strong>
-          {{ version.versionName }}
-          <template v-if="version.isHead">{{ s__('DiffsCompareBaseBranch|(HEAD)') }}</template>
-          <template v-else-if="version.isBase">{{ s__('DiffsCompareBaseBranch|(base)') }}</template>
-        </strong>
-      </div>
-      <div>
-        <small class="commit-sha"> {{ version.short_commit_sha }} </small>
-      </div>
-      <div>
-        <small>
-          <template v-if="version.commitsText">
-            {{ version.commitsText }}
-          </template>
-          <time-ago v-if="version.created_at" :time="version.created_at" class="js-timeago" />
-        </small>
-      </div>
-    </gl-dropdown-item>
+    <template v-for="version in versions">
+      <gl-dropdown-divider v-if="version.addDivider" :key="version.id" />
+      <gl-dropdown-item
+        :key="version.id"
+        :class="{
+          'is-active': version.selected,
+        }"
+        :is-check-item="true"
+        :is-checked="version.selected"
+        :href="version.href"
+      >
+        <div>
+          <strong>
+            {{ version.versionName }}
+            <template v-if="version.isHead">{{ s__('DiffsCompareBaseBranch|(HEAD)') }}</template>
+            <template v-else-if="version.isBase">{{
+              s__('DiffsCompareBaseBranch|(base)')
+            }}</template>
+          </strong>
+        </div>
+        <div>
+          <small class="commit-sha"> {{ version.short_commit_sha }} </small>
+        </div>
+        <div>
+          <small>
+            <template v-if="version.commitsText">
+              {{ version.commitsText }}
+            </template>
+            <time-ago v-if="version.created_at" :time="version.created_at" class="js-timeago" />
+          </small>
+        </div>
+      </gl-dropdown-item>
+    </template>
   </gl-dropdown>
 </template>