Added Changes based on UX Review

9 files changed, 100 insertions, 63 deletions

diff --git a/app/assets/javascripts/ide/components/changed_file_icon.vue b/app/assets/javascripts/ide/components/changed_file_icon.vue
index 0e03f527227..037e3efb4ce 100644
--- a/app/assets/javascripts/ide/components/changed_file_icon.vue
+++ b/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}`;
diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
index 1b0526b9ea5..399613912a7 100644
--- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
+++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
@@ -1,5 +1,6 @@
 <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,26 +66,27 @@ export default {
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
       <ul>
-        <li v-if="hasMergeRequest">
-          <a
-            href="#"
-            @click.prevent="changeMode('mrdiff')"
-            :class="{
-              'is-active': viewer === 'mrdiff',
-            }"
+        <template v-if="mergeRequestId">
+          <li>
+            <a
+              href="#"
+              @click.prevent="changeMode('mrdiff')"
+              :class="{
+                'is-active': viewer === 'mrdiff',
+              }"
+            >
+              <strong class="dropdown-menu-inner-title">{{ sprintf(__('Reviewing (merge request !%{mergeRequestId})'), { mergeRequestId }) }}</strong>
+              <span class="dropdown-menu-inner-content">
+                {{ __('Compare changes with the merge request target branch') }}
+              </span>
+            </a>
+          </li>
+          <li
+            role="separator"
+            class="divider"
           >
-            <strong class="dropdown-menu-inner-title">{{ __('Reviewing (merge request)') }}</strong>
-            <span class="dropdown-menu-inner-content">
-              {{ __('Compare changes of the merge request') }}
-            </span>
-          </a>
-        </li>
-        <li
-          v-if="hasMergeRequest"
-          role="separator"
-          class="divider"
-        >
-        </li>
+          </li>
+        </template>
         <li>
           <a
             href="#"
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index f300afa24ac..c9439ed2b59 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/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"
diff --git a/app/assets/javascripts/ide/components/mr_file_icon.vue b/app/assets/javascripts/ide/components/mr_file_icon.vue
new file mode 100644
index 00000000000..2e49a831d0b
--- /dev/null
+++ b/app/assets/javascripts/ide/components/mr_file_icon.vue
@@ -0,0 +1,29 @@
+<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>
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 88a248d5eeb..cdc9cd30a7e 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/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>
-        <changed-file-icon
-          :file="file"
-          v-if="file.changed || file.tempFile || file.mrChange"
-          class="prepend-top-5 pull-right"
-        />
+        <span class="pull-right">
+          <mr-file-icon
+            :file="file"
+            v-if="file.mrChange"
+          />
+          <changed-file-icon
+            :file="file"
+            v-if="file.changed || file.tempFile"
+          />
+        </span>
         <new-dropdown
           v-if="isTree"
           :project-id="file.projectId"
diff --git a/app/assets/javascripts/ide/components/repo_file_status_icon.vue b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
index 25d311142d5..97589e116c5 100644
--- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue
+++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
@@ -1,27 +1,27 @@
 <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 {
-    components: {
-      icon,
+export default {
+  components: {
+    icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
+  },
+  computed: {
+    lockTooltip() {
+      return `Locked by ${this.file.file_lock.user.name}`;
     },
-    props: {
-      file: {
-        type: Object,
-        required: true,
-      },
-    },
-    computed: {
-      lockTooltip() {
-        return `Locked by ${this.file.file_lock.user.name}`;
-      },
-    },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index c6973134ba2..a44e418b2eb 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/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>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index cc03dca5291..d0a4b80bf13 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/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"
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 65046f6665e..ff890d03ee1 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/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});
     }
   }
 }