Added change icon to file in IDE file list

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-file-changed-icon ${this.file.tempFile ? 'multi-file-addition' : 'multi-file-modified'}`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <icon
+    :name="changedIcon"
+    :size="12"
+    :css-classes="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 {