Resolve "Decouple multi-file editor from file list"

1 files changed, 69 insertions, 0 deletions

diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
new file mode 100644
index 00000000000..5bd63ac9ec5
--- /dev/null
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -0,0 +1,69 @@
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+  props: {
+    tab: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  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}`);
+    },
+  },
+};
+</script>
+
+<template>
+  <li
+    @click="clickFile(tab)"
+  >
+    <button
+      type="button"
+      class="multi-file-tab-close"
+      @click.stop.prevent="closeFile({ file: tab })"
+      :aria-label="closeLabel"
+      :class="{
+        'modified': tab.changed,
+      }"
+      :disabled="tab.changed"
+    >
+      <i
+        class="fa"
+        :class="changedClass"
+        aria-hidden="true"
+      >
+      </i>
+    </button>
+
+    <div
+      class="multi-file-tab"
+      :class="{active : tab.active }"
+      :title="tab.url"
+    >
+      {{ tab.name }}
+    </div>
+  </li>
+</template>