1 files changed, 14 insertions, 66 deletions

diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
index 0c44a755f56..b9af4d27145 100644
--- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
+++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
@@ -1,28 +1,15 @@
 <script>
-import Icon from '~/vue_shared/components/icon.vue';
 import { __, sprintf } from '~/locale';
+import { viewerTypes } from '../constants';
 
 export default {
-  components: {
-    Icon,
-  },
   props: {
-    hasChanges: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    mergeRequestId: {
-      type: String,
-      required: false,
-      default: '',
-    },
     viewer: {
       type: String,
       required: true,
     },
-    showShadow: {
-      type: Boolean,
+    mergeRequestId: {
+      type: Number,
       required: true,
     },
   },
@@ -38,84 +25,45 @@ export default {
       this.$emit('click', mode);
     },
   },
+  viewerTypes,
 };
 </script>
 
 <template>
   <div
     class="dropdown"
-    :class="{
-      shadow: showShadow,
-    }"
   >
     <button
       type="button"
-      class="btn btn-primary btn-sm"
-      :class="{
-        'btn-inverted': hasChanges,
-      }"
+      class="btn btn-link"
       data-toggle="dropdown"
     >
-      <template v-if="viewer === 'mrdiff' && mergeRequestId">
-        {{ mergeReviewLine }}
-      </template>
-      <template v-else-if="viewer === 'editor'">
-        {{ __('Editing') }}
-      </template>
-      <template v-else>
-        {{ __('Reviewing') }}
-      </template>
-      <icon
-        name="angle-down"
-        :size="12"
-        css-classes="caret-down"
-      />
+      {{ __('Edit') }}
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
       <ul>
-        <template v-if="mergeRequestId">
-          <li>
-            <a
-              href="#"
-              @click.prevent="changeMode('mrdiff')"
-              :class="{
-                'is-active': viewer === 'mrdiff',
-              }"
-            >
-              <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
-            role="separator"
-            class="divider"
-          >
-          </li>
-        </template>
         <li>
           <a
             href="#"
-            @click.prevent="changeMode('editor')"
+            @click.prevent="changeMode($options.viewerTypes.mr)"
             :class="{
-              'is-active': viewer === 'editor',
+              'is-active': viewer === $options.viewerTypes.mr,
             }"
           >
-            <strong class="dropdown-menu-inner-title">{{ __('Editing') }}</strong>
+            <strong class="dropdown-menu-inner-title">
+              {{ mergeReviewLine }}
+            </strong>
             <span class="dropdown-menu-inner-content">
-              {{ __('View and edit lines') }}
+              {{ __('Compare changes with the merge request target branch') }}
             </span>
           </a>
         </li>
         <li>
           <a
             href="#"
-            @click.prevent="changeMode('diff')"
+            @click.prevent="changeMode($options.viewerTypes.diff)"
             :class="{
-              'is-active': viewer === 'diff',
+              'is-active': viewer === $options.viewerTypes.diff,
             }"
           >
             <strong class="dropdown-menu-inner-title">{{ __('Reviewing') }}</strong>