Merge branch 'ide-changed-file-icon' into 'master'

Added change icon to file in IDE file list

See merge request gitlab-org/gitlab-ee!4457

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

+<script>
+  import icon from '../../vue_shared/components/icon.vue';
+
+  export default {
+    components: {
+      icon,
+    },
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      changedIcon() {
+        return this.file.tempFile ? 'file-addition' : 'file-modified';
+      },
+      changedIconClass() {
+        return `multi-${this.changedIcon}`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <icon
+    :name="changedIcon"
+    :size="12"
+    :css-classes="`multi-file-changed-icon ${changedIconClass}`"
+  />
+</template>

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

@@ -5,6 +5,7 @@
   import fileStatusIcon from './repo_file_status_icon.vue';
   import newDropdown from './new_dropdown/index.vue';
   import fileIcon from '../../vue_shared/components/file_icon.vue';
+  import changedFileIcon from './changed_file_icon.vue';
 
   export default {
     components: {
@@ -12,6 +13,7 @@
       newDropdown,
       fileStatusIcon,
       fileIcon,
+      changedFileIcon,
     },
     mixins: [
       timeAgoMixin,
@@ -61,11 +63,6 @@
         }
         return '';
       },
-      changedClass() {
-        return {
-          'fa-circle unsaved-icon': this.file.changed || this.file.tempFile,
-        };
-      },
     },
     updated() {
       if (this.file.type === 'blob' && this.file.active) {
@@ -118,13 +115,11 @@
         :path="file.path"
         :parent="file"
       />
-      <i
-        class="fa"
+      <changed-file-icon
         v-if="file.changed || file.tempFile"
-        :class="changedClass"
-        aria-hidden="true"
-      >
-      </i>
+        :file="file"
+        class="prepend-top-5 pull-right"
+      />
       <template v-if="isSubmodule && file.id">
         @
         <span class="commit-sha">

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

@@ -3,12 +3,14 @@
   import fileStatusIcon from './repo_file_status_icon.vue';
   import fileIcon from '../../vue_shared/components/file_icon.vue';
   import icon from '../../vue_shared/components/icon.vue';
+  import changedFileIcon from './changed_file_icon.vue';
 
   export default {
     components: {
       fileStatusIcon,
       fileIcon,
       icon,
+      changedFileIcon,
     },
     props: {
       tab: {
@@ -31,12 +33,6 @@
       showChangedIcon() {
         return this.tab.changed ? !this.tabMouseOver : false;
       },
-      changedIcon() {
-        return this.tab.tempFile ? 'file-addition' : 'file-modified';
-      },
-      changedIconClass() {
-        return this.tab.tempFile ? 'multi-file-addition' : 'multi-file-modified';
-      },
     },
 
     methods: {
@@ -77,11 +73,9 @@
         name="close"
         :size="12"
       />
-      <icon
+      <changed-file-icon
         v-else
-        :name="changedIcon"
-        :size="12"
-        :css-classes="changedIconClass"
+        :file="tab"
       />
     </button>
 

app/assets/stylesheets/pages/repo.scss

@@ -50,13 +50,6 @@
       text-overflow: ellipsis;
     }
 
-    .unsaved-icon {
-      color: $indigo-700;
-      float: right;
-      font-size: smaller;
-      line-height: 20px;
-    }
-
     .repo-new-btn {
       display: none;
       margin-top: -4px;
@@ -67,10 +60,6 @@
       .repo-new-btn {
         display: block;
       }
-
-      .unsaved-icon {
-        display: none;
-      }
     }
 
     &.folder {

spec/javascripts/repo/components/changed_file_icon_spec.js

+import Vue from 'vue';
+import changedFileIcon from '~/ide/components/changed_file_icon.vue';
+import createComponent from '../../helpers/vue_mount_component_helper';
+
+describe('IDE changed file icon', () => {
+  let vm;
+
+  beforeEach(() => {
+    const component = Vue.extend(changedFileIcon);
+
+    vm = createComponent(component, {
+      file: {
+        tempFile: false,
+      },
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('changedIcon', () => {
+    it('equals file-modified when not a temp file', () => {
+      expect(vm.changedIcon).toBe('file-modified');
+    });
+
+    it('equals file-addition when a temp file', () => {
+      vm.file.tempFile = true;
+
+      expect(vm.changedIcon).toBe('file-addition');
+    });
+  });
+
+  describe('changedIconClass', () => {
+    it('includes multi-file-modified when not a temp file', () => {
+      expect(vm.changedIconClass).toContain('multi-file-modified');
+    });
+
+    it('includes multi-file-addition when a temp file', () => {
+      vm.file.tempFile = true;
+
+      expect(vm.changedIconClass).toContain('multi-file-addition');
+    });
+  });
+});

spec/javascripts/repo/components/repo_tab_spec.js

@@ -55,16 +55,6 @@ describe('RepoTab', () => {
     expect(vm.closeFile).toHaveBeenCalledWith(vm.tab);
   });
 
-  it('shows changed icon if tab is changed', () => {
-    const tab = file('changedFile');
-    tab.changed = true;
-    vm = createComponent({
-      tab,
-    });
-
-    expect(vm.changedIcon).toBe('file-modified');
-  });
-
   it('changes icon on hover', (done) => {
     const tab = file();
     tab.changed = true;