1 files changed, 47 insertions, 93 deletions

diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index e0f3c33003a..4ea21913129 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -1,129 +1,83 @@
 <script>
-import Service from '../services/repo_service';
-import Helper from '../helpers/repo_helper';
-import Store from '../stores/repo_store';
+import { mapState, mapGetters, mapActions } from 'vuex';
 import RepoPreviousDirectory from './repo_prev_directory.vue';
-import RepoFileOptions from './repo_file_options.vue';
 import RepoFile from './repo_file.vue';
 import RepoLoadingFile from './repo_loading_file.vue';
-import RepoMixin from '../mixins/repo_mixin';
 
 export default {
-  mixins: [RepoMixin],
   components: {
-    'repo-file-options': RepoFileOptions,
     'repo-previous-directory': RepoPreviousDirectory,
     'repo-file': RepoFile,
     'repo-loading-file': RepoLoadingFile,
   },
-
   created() {
-    window.addEventListener('popstate', this.checkHistory);
+    window.addEventListener('popstate', this.popHistoryState);
   },
   destroyed() {
-    window.removeEventListener('popstate', this.checkHistory);
+    window.removeEventListener('popstate', this.popHistoryState);
+  },
+  mounted() {
+    this.getTreeData();
+  },
+  computed: {
+    ...mapState([
+      'loading',
+      'isRoot',
+    ]),
+    ...mapState({
+      projectName(state) {
+        return state.project.name;
+      },
+    }),
+    ...mapGetters([
+      'treeList',
+      'isCollapsed',
+    ]),
   },
-
-  data: () => Store,
-
   methods: {
-    checkHistory() {
-      let selectedFile = this.files.find(file => location.pathname.indexOf(file.url) > -1);
-      if (!selectedFile) {
-        // Maybe it is not in the current tree but in the opened tabs
-        selectedFile = Helper.getFileFromPath(location.pathname);
-      }
-
-      let lineNumber = null;
-      if (location.hash.indexOf('#L') > -1) lineNumber = Number(location.hash.substr(2));
-
-      if (selectedFile) {
-        if (selectedFile.url !== this.activeFile.url) {
-          this.fileClicked(selectedFile, lineNumber);
-        } else {
-          Store.setActiveLine(lineNumber);
-        }
-      } else {
-        // Not opened at all lets open new tab
-        this.fileClicked({
-          url: location.href,
-        }, lineNumber);
-      }
-    },
-
-    fileClicked(clickedFile, lineNumber) {
-      let file = clickedFile;
-      if (file.loading) return;
-      file.loading = true;
-
-      if (file.type === 'tree' && file.opened) {
-        file = Store.removeChildFilesOfTree(file);
-        file.loading = false;
-        Store.setActiveLine(lineNumber);
-      } else {
-        const openFile = Helper.getFileFromPath(file.url);
-        if (openFile) {
-          file.loading = false;
-          Store.setActiveFiles(openFile);
-          Store.setActiveLine(lineNumber);
-        } else {
-          Service.url = file.url;
-          Helper.getContent(file)
-            .then(() => {
-              file.loading = false;
-              Helper.scrollTabsRight();
-              Store.setActiveLine(lineNumber);
-            })
-            .catch(Helper.loadingError);
-        }
-      }
-    },
-
-    goToPreviousDirectoryClicked(prevURL) {
-      Service.url = prevURL;
-      Helper.getContent(null)
-        .then(() => Helper.scrollTabsRight())
-        .catch(Helper.loadingError);
-    },
+    ...mapActions([
+      'getTreeData',
+      'popHistoryState',
+    ]),
   },
 };
 </script>
 
 <template>
-<div id="sidebar" :class="{'sidebar-mini' : isMini}">
+<div class="ide-file-list">
   <table class="table">
-    <thead v-if="!isMini">
+    <thead>
       <tr>
-        <th class="name">Name</th>
-        <th class="hidden-sm hidden-xs last-commit">Last commit</th>
-        <th class="hidden-xs last-update text-right">Last update</th>
+        <th
+          v-if="isCollapsed"
+        >
+        </th>
+        <template v-else>
+          <th class="name multi-file-table-name">
+            Name
+          </th>
+          <th class="hidden-sm hidden-xs last-commit">
+            Last commit
+          </th>
+          <th class="hidden-xs last-update text-right">
+            Last update
+          </th>
+        </template>
       </tr>
     </thead>
     <tbody>
-      <repo-file-options
-        :is-mini="isMini"
-        :project-name="projectName"
-      />
       <repo-previous-directory
-        v-if="isRoot"
-        :prev-url="prevURL"
-        @linkclicked="goToPreviousDirectoryClicked(prevURL)"/>
+        v-if="!isRoot && treeList.length"
+      />
       <repo-loading-file
+        v-if="!treeList.length && loading"
         v-for="n in 5"
         :key="n"
-        :loading="loading"
-        :has-files="!!files.length"
-        :is-mini="isMini"
       />
       <repo-file
-        v-for="file in files"
-        :key="file.id"
+        v-for="file in treeList"
+        :key="file.key"
         :file="file"
-        :is-mini="isMini"
-        @linkclicked="fileClicked(file)"
-        :is-tree="isTree"
-        :has-files="!!files.length"
-        :active-file="activeFile"
       />
     </tbody>
   </table>