1 files changed, 30 insertions, 41 deletions

diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
index dec8aa61838..52593aabfea 100644
--- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
+++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
@@ -1,11 +1,12 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import { viewerTypes } from '../constants';
 
 export default {
   components: {
-    GlButton,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     viewer: {
@@ -18,10 +19,21 @@ export default {
     },
   },
   computed: {
-    mergeReviewLine() {
-      return sprintf(__('Reviewing (merge request !%{mergeRequestId})'), {
-        mergeRequestId: this.mergeRequestId,
-      });
+    modeDropdownItems() {
+      return [
+        {
+          viewerType: this.$options.viewerTypes.mr,
+          title: sprintf(__('Reviewing (merge request !%{mergeRequestId})'), {
+            mergeRequestId: this.mergeRequestId,
+          }),
+          content: __('Compare changes with the merge request target branch'),
+        },
+        {
+          viewerType: this.$options.viewerTypes.diff,
+          title: __('Reviewing'),
+          content: __('Compare changes with the last commit'),
+        },
+      ];
     },
   },
   methods: {
@@ -34,39 +46,16 @@ export default {
 </script>
 
 <template>
-  <div class="dropdown">
-    <gl-button variant="link" data-toggle="dropdown">{{ __('Edit') }}</gl-button>
-    <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
-      <ul>
-        <li>
-          <a
-            :class="{
-              'is-active': viewer === $options.viewerTypes.mr,
-            }"
-            href="#"
-            @click.prevent="changeMode($options.viewerTypes.mr)"
-          >
-            <strong class="dropdown-menu-inner-title"> {{ mergeReviewLine }} </strong>
-            <span class="dropdown-menu-inner-content">
-              {{ __('Compare changes with the merge request target branch') }}
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            :class="{
-              'is-active': viewer === $options.viewerTypes.diff,
-            }"
-            href="#"
-            @click.prevent="changeMode($options.viewerTypes.diff)"
-          >
-            <strong class="dropdown-menu-inner-title">{{ __('Reviewing') }}</strong>
-            <span class="dropdown-menu-inner-content">
-              {{ __('Compare changes with the last commit') }}
-            </span>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
+  <gl-dropdown :text="__('Edit')" size="small">
+    <gl-dropdown-item
+      v-for="mode in modeDropdownItems"
+      :key="mode.viewerType"
+      :is-check-item="true"
+      :is-checked="viewer === mode.viewerType"
+      @click="changeMode(mode.viewerType)"
+    >
+      <strong class="dropdown-menu-inner-title"> {{ mode.title }} </strong>
+      <span class="dropdown-menu-inner-content"> {{ mode.content }} </span>
+    </gl-dropdown-item>
+  </gl-dropdown>
 </template>