1 files changed, 37 insertions, 32 deletions
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index 5bd63ac9ec5..5ed7bddf6ae 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -1,45 +1,46 @@
 <script>
-import { mapActions } from 'vuex';
+  import { mapActions } from 'vuex';
+  import fileIcon from '../../vue_shared/components/file_icon.vue';
 
-export default {
-  props: {
-    tab: {
-      type: Object,
-      required: true,
+  export default {
+    components: {
+      fileIcon,
     },
-  },
-
-  computed: {
-    closeLabel() {
-      if (this.tab.changed || this.tab.tempFile) {
-        return `${this.tab.name} changed`;
-      }
-      return `Close ${this.tab.name}`;
+    props: {
+      tab: {
+        type: Object,
+        required: true,
+      },
     },
-    changedClass() {
-      const tabChangedObj = {
-        'fa-times close-icon': !this.tab.changed && !this.tab.tempFile,
-        'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile,
-      };
-      return tabChangedObj;
+    computed: {
+      closeLabel() {
+        if (this.tab.changed || this.tab.tempFile) {
+          return `${this.tab.name} changed`;
+        }
+        return `Close ${this.tab.name}`;
+      },
+      changedClass() {
+        const tabChangedObj = {
+          'fa-times close-icon': !this.tab.changed && !this.tab.tempFile,
+          'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile,
+        };
+        return tabChangedObj;
+      },
     },
-  },
 
-  methods: {
-    ...mapActions([
-      'closeFile',
-    ]),
-    clickFile(tab) {
-      this.$router.push(`/project${tab.url}`);
+    methods: {
+      ...mapActions([
+        'closeFile',
+      ]),
+      clickFile(tab) {
+        this.$router.push(`/project${tab.url}`);
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>
-  <li
-    @click="clickFile(tab)"
-  >
+  <li @click="clickFile(tab)">
     <button
       type="button"
       class="multi-file-tab-close"
@@ -63,6 +64,10 @@ export default {
       :class="{active : tab.active }"
       :title="tab.url"
     >
+      <file-icon
+        :file-name="tab.name"
+        :size="16"
+      />
       {{ tab.name }}
     </div>
   </li>