Added Changes based on UX Review

app/assets/javascripts/ide/components/changed_file_icon.vue

@@ -13,8 +13,7 @@ export default {
   },
   computed: {
     changedIcon() {
-      if (this.file.tempFile) return 'file-addition';
-      return this.file.changed ? 'file-modified' : 'git-merge';
+      return this.file.tempFile ? 'file-addition' : 'file-modified';
     },
     changedIconClass() {
       return `multi-${this.changedIcon}`;

app/assets/javascripts/ide/components/editor_mode_dropdown.vue

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
+import { __, sprintf } from '~/locale';
 
 export default {
   components: {
@@ -11,10 +12,10 @@ export default {
       required: false,
       default: false,
     },
-    hasMergeRequest: {
-      type: Boolean,
+    mergeRequestId: {
+      type: String,
       required: false,
-      default: false,
+      default: '',
     },
     viewer: {
       type: String,
@@ -48,8 +49,8 @@ export default {
       }"
       data-toggle="dropdown"
     >
-      <template v-if="viewer === 'mrdiff'">
-        {{ __('Reviewing (merge request)') }}
+      <template v-if="viewer === 'mrdiff' && mergeRequestId">
+        {{ sprintf(__('Reviewing (merge request !%{mergeRequestId})'), { mergeRequestId }) }}
       </template>
       <template v-else-if="viewer === 'editor'">
         {{ __('Editing') }}
@@ -65,7 +66,8 @@ export default {
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
       <ul>
-        <li v-if="hasMergeRequest">
+        <template v-if="mergeRequestId">
+          <li>
             <a
               href="#"
               @click.prevent="changeMode('mrdiff')"
@@ -73,18 +75,18 @@ export default {
                 'is-active': viewer === 'mrdiff',
               }"
             >
-            <strong class="dropdown-menu-inner-title">{{ __('Reviewing (merge request)') }}</strong>
+              <strong class="dropdown-menu-inner-title">{{ sprintf(__('Reviewing (merge request !%{mergeRequestId})'), { mergeRequestId }) }}</strong>
               <span class="dropdown-menu-inner-content">
-              {{ __('Compare changes of the merge request') }}
+                {{ __('Compare changes with the merge request target branch') }}
               </span>
             </a>
           </li>
           <li
-          v-if="hasMergeRequest"
             role="separator"
             class="divider"
           >
           </li>
+        </template>
         <li>
           <a
             href="#"

app/assets/javascripts/ide/components/ide.vue

@@ -6,6 +6,7 @@ import repoTabs from './repo_tabs.vue';
 import repoFileButtons from './repo_file_buttons.vue';
 import ideStatusBar from './ide_status_bar.vue';
 import repoEditor from './repo_editor.vue';
+import { currentMergeRequest } from '../stores/getters';
 
 export default {
   components: {
@@ -31,8 +32,8 @@ export default {
     },
   },
   computed: {
-    ...mapState(['changedFiles', 'openFiles', 'viewer']),
-    ...mapGetters(['activeFile', 'hasChanges', 'hasMergeRequest']),
+    ...mapState(['changedFiles', 'openFiles', 'viewer', 'currentMergeRequestId']),
+    ...mapGetters(['activeFile', 'hasChanges', 'currentMergeRequest']),
   },
   mounted() {
     const returnValue = 'Are you sure you want to lose unsaved changes?';
@@ -63,7 +64,7 @@ export default {
           :files="openFiles"
           :viewer="viewer"
           :has-changes="hasChanges"
-          :has-merge-request="hasMergeRequest"
+          :merge-request-id="currentMergeRequestId"
         />
         <repo-editor
           class="multi-file-edit-pane-content"

app/assets/javascripts/ide/components/mr_file_icon.vue

+<script>
+import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <icon
+    name="git-merge"
+    v-tooltip
+    title="Part of merge request changes"
+    css-classes="ide-file-changed-icon"
+    :size="12"
+  />
+</template>

app/assets/javascripts/ide/components/repo_file.vue

@@ -6,6 +6,7 @@ import router from '../ide_router';
 import newDropdown from './new_dropdown/index.vue';
 import fileStatusIcon from './repo_file_status_icon.vue';
 import changedFileIcon from './changed_file_icon.vue';
+import mrFileIcon from './mr_file_icon.vue';
 
 export default {
   name: 'RepoFile',
@@ -15,6 +16,7 @@ export default {
     fileStatusIcon,
     fileIcon,
     changedFileIcon,
+    mrFileIcon,
   },
   props: {
     file: {
@@ -99,11 +101,16 @@ export default {
             :file="file"
           />
         </span>
+        <span class="pull-right">
+          <mr-file-icon
+            :file="file"
+            v-if="file.mrChange"
+          />
           <changed-file-icon
             :file="file"
-          v-if="file.changed || file.tempFile || file.mrChange"
-          class="prepend-top-5 pull-right"
+            v-if="file.changed || file.tempFile"
           />
+        </span>
         <new-dropdown
           v-if="isTree"
           :project-id="file.projectId"

app/assets/javascripts/ide/components/repo_file_status_icon.vue

 <script>
-  import icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import '~/lib/utils/datetime_utility';
+import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import '~/lib/utils/datetime_utility';
 
-  export default {
+export default {
   components: {
     icon,
   },
@@ -21,7 +21,7 @@
       return `Locked by ${this.file.file_lock.user.name}`;
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/ide/components/repo_tabs.vue

@@ -21,10 +21,10 @@ export default {
       type: Boolean,
       required: true,
     },
-    hasMergeRequest: {
-      type: Boolean,
-      required: true,
-      default: false,
+    mergeRequestId: {
+      type: String,
+      required: false,
+      default: '',
     },
   },
   data() {
@@ -59,7 +59,7 @@ export default {
       :viewer="viewer"
       :show-shadow="showShadow"
       :has-changes="hasChanges"
-      :has-merge-request="hasMergeRequest"
+      :merge-request-id="mergeRequestId"
       @click="updateViewer"
     />
   </div>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -105,7 +105,7 @@ export default {
         class="btn btn-sm btn-default inline js-web-ide"
         type="button"
       >
-        {{ s__("mrWidget|Open in Web IDE") }}
+        {{ s__("mrWidget|Web IDE") }}
       </a>
       <button
         data-target="#modal_merge_info"

app/assets/stylesheets/pages/repo.scss

@@ -50,6 +50,7 @@
       flex: 1;
       white-space: nowrap;
       text-overflow: ellipsis;
+      max-width: inherit;
 
       svg {
         vertical-align: middle;
@@ -720,9 +721,7 @@
     }
 
     .ide-view {
-      height: calc(
-        100vh - #{$header-height + $performance-bar-height + $flash-height}
-      );
+      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
     }
   }
 }

spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js

@@ -144,7 +144,7 @@ describe('MRWidgetHeader', () => {
       it('renders web ide button', () => {
         const button = vm.$el.querySelector('.js-web-ide');
 
-        expect(button.textContent.trim()).toEqual('Open in Web IDE');
+        expect(button.textContent.trim()).toEqual('Web IDE');
         expect(button.getAttribute('href')).toEqual('undefined/-/ide/projectabc');
       });