1 files changed, 77 insertions, 71 deletions
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index c30018e04b0..a68f8ce0169 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,85 +1,88 @@
 <script>
-import { mapState, mapActions } from 'vuex';
-import projectTree from './ide_project_tree.vue';
-import icon from '../../vue_shared/components/icon.vue';
-import panelResizer from '../../vue_shared/components/panel_resizer.vue';
-import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
+  import { mapState, mapActions } from 'vuex';
+  import projectTree from './ide_project_tree.vue';
+  import icon from '../../vue_shared/components/icon.vue';
+  import panelResizer from '../../vue_shared/components/panel_resizer.vue';
+  import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
 
-export default {
-  data() {
-    return {
-      width: 290,
-    };
-  },
-  components: {
-    projectTree,
-    icon,
-    panelResizer,
-    skeletonLoadingContainer,
-  },
-  computed: {
-    ...mapState([
-      'loading',
-      'projects',
-      'leftPanelCollapsed',
-    ]),
-    currentIcon() {
-      return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left';
+  export default {
+    components: {
+      projectTree,
+      icon,
+      panelResizer,
+      skeletonLoadingContainer,
     },
-    maxSize() {
-      return window.innerWidth / 2;
+    data() {
+      return {
+        width: 290,
+      };
     },
-    panelStyle() {
-      if (!this.leftPanelCollapsed) {
-        return { width: `${this.width}px` };
-      }
-      return {};
+    computed: {
+      ...mapState([
+        'loading',
+        'projects',
+        'leftPanelCollapsed',
+      ]),
+      currentIcon() {
+        return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left';
+      },
+      maxSize() {
+        return window.innerWidth / 2;
+      },
+      panelStyle() {
+        if (!this.leftPanelCollapsed) {
+          return { width: `${this.width}px` };
+        }
+        return {};
+      },
+      showLoading() {
+        return this.loading;
+      },
     },
-    showLoading() {
-      return this.loading;
+    methods: {
+      ...mapActions([
+        'setPanelCollapsedStatus',
+        'setResizingStatus',
+      ]),
+      toggleCollapsed() {
+        this.setPanelCollapsedStatus({
+          side: 'left',
+          collapsed: !this.leftPanelCollapsed,
+        });
+      },
+      resizingStarted() {
+        this.setResizingStatus(true);
+      },
+      resizingEnded() {
+        this.setResizingStatus(false);
+      },
     },
-  },
-  methods: {
-    ...mapActions([
-      'setPanelCollapsedStatus',
-      'setResizingStatus',
-    ]),
-    toggleCollapsed() {
-      this.setPanelCollapsedStatus({
-        side: 'left',
-        collapsed: !this.leftPanelCollapsed,
-      });
-    },
-    resizingStarted() {
-      this.setResizingStatus(true);
-    },
-    resizingEnded() {
-      this.setResizingStatus(false);
-    },
-  },
-};
+  };
 </script>
 
 <template>
   <div
-      class="multi-file-commit-panel"
-      :class="{
-        'is-collapsed': leftPanelCollapsed,
-      }"
-      :style="panelStyle"
-    >
+    class="multi-file-commit-panel"
+    :class="{
+      'is-collapsed': leftPanelCollapsed,
+    }"
+    :style="panelStyle"
+  >
     <div class="multi-file-commit-panel-inner">
-      <div
-        class="multi-file-loading-container"
-        v-if="showLoading"
-        v-for="n in 3"
-        :key="n">
-        <skeleton-loading-container/>
-      </div>
+      <template v-if="showLoading">
+        <div
+          class="multi-file-loading-container"
+          v-for="n in 3"
+          :key="n"
+        >
+          <skeleton-loading-container />
+        </div>
+      </template>
       <project-tree
-        v-for="(project, index) in projects"
+        v-for="project in projects"
         :key="project.id"
-        :project="project"/>
+        :project="project"
+      />
     </div>
     <button
       type="button"
@@ -93,7 +96,9 @@ export default {
       <span
         v-if="!leftPanelCollapsed"
         class="collapse-text"
-      >Collapse sidebar</span>
+      >
+        Collapse sidebar
+      </span>
     </button>
     <panel-resizer
       :size.sync="width"
@@ -103,6 +108,7 @@ export default {
       :max-size="maxSize"
       @resize-start="resizingStarted"
       @resize-end="resizingEnded"
-      side="right"/>
+      side="right"
+    />
   </div>
 </template>