From fef9585df1da2e0ee8b08c3e8b515541753b5b31 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Wed, 6 Dec 2017 15:43:01 +0100
Subject: Last fixes based on MR

---
 .../ide/components/commit_sidebar/list.vue         | 15 ++++++++++-----
 app/assets/javascripts/ide/components/ide.vue      |  1 -
 .../javascripts/ide/components/ide_context_bar.vue | 22 +++++++++++-----------
 .../javascripts/ide/components/ide_repo_tree.vue   |  1 -
 .../javascripts/ide/components/ide_side_bar.vue    | 19 +++++++++----------
 .../ide/components/repo_commit_section.vue         | 16 ++++++----------
 .../javascripts/ide/components/repo_file.vue       | 13 ++++++++++++-
 .../ide/components/repo_loading_file.vue           |  8 ++++----
 .../ide/components/repo_prev_directory.vue         |  6 ++----
 app/assets/javascripts/ide/stores/getters.js       |  2 --
 .../javascripts/ide/stores/mutations/branch.js     |  4 ----
 app/assets/javascripts/ide/stores/state.js         |  2 +-
 app/helpers/blob_helper.rb                         |  4 ++--
 app/views/projects/tree/_tree_header.html.haml     |  2 +-
 14 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 82eb6aa8ea7..9ac82ab4178 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -1,4 +1,5 @@
 <script>
+  import { mapState } from 'vuex';
   import icon from '../../../vue_shared/components/icon.vue';
   import listItem from './list_item.vue';
   import listCollapsed from './list_collapsed.vue';
@@ -18,23 +19,27 @@
         type: Array,
         required: true,
       },
-      collapsed: {
-        type: Boolean,
-        required: true,
-      },
+    },
+    computed: {
+      ...mapState([
+        'currentProjectId',
+        'currentBranchId',
+        'rightBarCollapsed',
+      ]),
     },
     methods: {
       toggleCollapsed() {
         this.$emit('toggleCollapsed');
       },
     },
+
   };
 </script>
 
 <template>
   <div class="multi-file-commit-list">
     <list-collapsed
-      v-if="collapsed"
+      v-if="rightBarCollapsed"
     />
     <template v-else>
       <ul
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 0be30c5cba1..7f29a355eca 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -15,7 +15,6 @@ export default {
       'selectedFile',
     ]),
     ...mapGetters([
-      'isCollapsed',
       'changedFiles',
       'activeFile',
     ]),
diff --git a/app/assets/javascripts/ide/components/ide_context_bar.vue b/app/assets/javascripts/ide/components/ide_context_bar.vue
index 2e319c6309d..8238c3e1842 100644
--- a/app/assets/javascripts/ide/components/ide_context_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_context_bar.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState, mapActions } from 'vuex';
 import repoCommitSection from './repo_commit_section.vue';
 import icon from '../../vue_shared/components/icon.vue';
 
@@ -8,22 +8,23 @@ export default {
     repoCommitSection,
     icon,
   },
-  data() {
-    return {
-      collapsed: true,
-    };
-  },
   computed: {
+    ...mapState([
+      'rightBarCollapsed',
+    ]),
     ...mapGetters([
       'changedFiles',
     ]),
     currentIcon() {
-      return this.collapsed ? 'angle-double-left' : 'angle-double-right';
+      return this.rightBarCollapsed ? 'angle-double-left' : 'angle-double-right';
     },
   },
   methods: {
+    ...mapActions([
+      'setRightBarCollapsedStatus',
+    ]),
     toggleCollapsed() {
-      this.collapsed = !this.collapsed;
+      this.setRightBarCollapsedStatus(!this.rightBarCollapsed);
     },
   },
 };
@@ -33,7 +34,7 @@ export default {
   <div
     class="multi-file-commit-panel"
     :class="{
-      'is-collapsed': collapsed,
+      'is-collapsed': rightBarCollapsed,
     }"
   >
     <div 
@@ -41,7 +42,7 @@ export default {
       <header
         class="multi-file-commit-panel-header"
         :class="{
-          'is-collapsed': collapsed,
+          'is-collapsed': rightBarCollapsed,
           }"
         >
         <button
@@ -58,7 +59,6 @@ export default {
       <div>
       </div>
       <repo-commit-section 
-        :collapsed="collapsed"
         class=""/>
     </div>
   </div>
diff --git a/app/assets/javascripts/ide/components/ide_repo_tree.vue b/app/assets/javascripts/ide/components/ide_repo_tree.vue
index 932f9c955fe..0f5a1654ae1 100644
--- a/app/assets/javascripts/ide/components/ide_repo_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_repo_tree.vue
@@ -28,7 +28,6 @@ export default {
     }),
     ...mapGetters([
       'treeList',
-      'isCollapsed',
     ]),
     hasPreviousDirectory() {
       return !this.isRoot && this.treeList(this.treeId).length;
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index de793c347aa..ce228a920ae 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import projectTree from './ide_project_tree.vue';
 import icon from '../../vue_shared/components/icon.vue';
 
@@ -8,23 +8,22 @@ export default {
     projectTree,
     icon,
   },
-  data() {
-    return {
-      collapsed: false,
-    };
-  },
   computed: {
     ...mapState([
       'loading',
       'projects',
+      'leftBarCollapsed',
     ]),
     currentIcon() {
-      return this.collapsed ? 'angle-double-right' : 'angle-double-left';
+      return this.leftBarCollapsed ? 'angle-double-right' : 'angle-double-left';
     }, 
   },
   methods: {
+    ...mapActions([
+      'setLeftBarCollapsedStatus',
+    ]),
     toggleCollapsed() {
-      this.collapsed = !this.collapsed;
+      this.setLeftBarCollapsedStatus(!this.leftBarCollapsed);
     },
   },
 };
@@ -34,7 +33,7 @@ export default {
 <div
     class="multi-file-commit-panel"
     :class="{
-      'is-collapsed': collapsed,
+      'is-collapsed': leftBarCollapsed,
     }"
   >
   <div class="multi-file-commit-panel-inner-scroll">
@@ -53,7 +52,7 @@ export default {
       :size="18"
     />
     <span
-      v-if="!collapsed"
+      v-if="!leftBarCollapsed"
       class="collapse-text"
     >Collapse sidebar</span>
   </button>
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index a18508c2f96..86ae4d2a445 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -14,12 +14,6 @@ export default {
   directives: {
     tooltip,
   },
-  props: {
-    collapsed: {
-      type: Boolean,
-      required: true,
-    },
-  },
   data() {
     return {
       showNewBranchModal: false,
@@ -32,6 +26,7 @@ export default {
     ...mapState([
       'currentProjectId',
       'currentBranchId',
+      'rightBarCollapsed',
     ]),
     ...mapGetters([
       'changedFiles',
@@ -48,6 +43,7 @@ export default {
       'checkCommitStatus',
       'commitChanges',
       'getTreeData',
+      'setRightBarCollapsedStatus',
     ]),
     makeCommit(newBranch = false) {
       const createNewBranch = newBranch || this.startNewMR;
@@ -96,7 +92,7 @@ export default {
         });
     },
     toggleCollapsed() {
-      this.collapsed = !this.collapsed;
+      this.setRightBarCollapsedStatus(!this.rightBarCollapsed);
     },
   },
 };
@@ -118,20 +114,20 @@ export default {
       name="list-bulleted"
       :size="18"
     />
-    <template v-if="!collapsed">
+    <template v-if="!rightBarCollapsed">
       Staged
     </template>
   </div>
   <commit-files-list
     title="Staged"
     :file-list="changedFiles"
-    :collapsed="collapsed"
+    :collapsed="rightBarCollapsed"
     @toggleCollapsed="toggleCollapsed"
   />
   <form
     class="form-horizontal multi-file-commit-form"
     @submit.prevent="tryCommit"
-    v-if="!collapsed && changedFiles.length"
+    v-if="!rightBarCollapsed && changedFiles.length"
   >
     <div class="multi-file-commit-fieldset">
       <textarea
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 18a00cb7426..effd88df2b4 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -1,4 +1,5 @@
 <script>
+  import { mapState } from 'vuex';
   import timeAgoMixin from '../../vue_shared/mixins/timeago';
   import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
   import newDropdown from './new_dropdown/index.vue';
@@ -26,6 +27,16 @@
       },
     },
     computed: {
+      ...mapState([
+        'leftBarCollapsed',
+      ]),
+      fileIcon() {
+        return {
+          'fa-spinner fa-spin': this.file.loading,
+          [this.file.icon]: !this.file.loading,
+          'fa-folder-open': !this.file.loading && this.file.opened,
+        };
+      },
       isSubmodule() {
         return this.file.type === 'submodule';
       },
@@ -41,7 +52,7 @@
         return this.file.id.substr(0, 8);
       },
       submoduleColSpan() {
-        return !this.isCollapsed && this.isSubmodule ? 3 : 1;
+        return !this.leftBarCollapsed && this.isSubmodule ? 3 : 1;
       },
       openedClass() {
         return this.file.type === 'blob' && this.file.opened ? 'file-open' : '';
diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue
index 8fa637d771f..3cae42c3f60 100644
--- a/app/assets/javascripts/ide/components/repo_loading_file.vue
+++ b/app/assets/javascripts/ide/components/repo_loading_file.vue
@@ -1,5 +1,5 @@
 <script>
-  import { mapGetters } from 'vuex';
+  import { mapState } from 'vuex';
   import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
 
   export default {
@@ -7,8 +7,8 @@
       skeletonLoadingContainer,
     },
     computed: {
-      ...mapGetters([
-        'isCollapsed',
+      ...mapState([
+        'leftBarCollapsed',
       ]),
     },
   };
@@ -24,7 +24,7 @@
         :small="true"
       />
     </td>
-    <template v-if="!isCollapsed">
+    <template v-if="!leftBarCollapsed">
       <td
         class="hidden-sm hidden-xs">
         <skeleton-loading-container
diff --git a/app/assets/javascripts/ide/components/repo_prev_directory.vue b/app/assets/javascripts/ide/components/repo_prev_directory.vue
index a2b305bbd05..08e25853edf 100644
--- a/app/assets/javascripts/ide/components/repo_prev_directory.vue
+++ b/app/assets/javascripts/ide/components/repo_prev_directory.vue
@@ -5,12 +5,10 @@
     computed: {
       ...mapState([
         'parentTreeUrl',
-      ]),
-      ...mapGetters([
-        'isCollapsed',
+        'leftBarCollapsed',
       ]),
       colSpanCondition() {
-        return this.isCollapsed ? undefined : 3;
+        return this.leftBarCollapsed ? undefined : 3;
       },
     },
     methods: {
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index dc731f22428..bb6b7624cc8 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -27,8 +27,6 @@ export const activeFileExtension = (state) => {
   return file ? `.${file.path.split('.').pop()}` : '';
 };
 
-export const isCollapsed = () => true; // ToDo: Need to remove !!state.openFiles.length;
-
 export const canEditFile = (state) => {
   const currentActiveFile = activeFile(state);
 
diff --git a/app/assets/javascripts/ide/stores/mutations/branch.js b/app/assets/javascripts/ide/stores/mutations/branch.js
index 7071bd0bafd..04b9582c5bb 100644
--- a/app/assets/javascripts/ide/stores/mutations/branch.js
+++ b/app/assets/javascripts/ide/stores/mutations/branch.js
@@ -19,10 +19,6 @@ export default {
         [branchName]: branch,
       },
     });
-
-    Object.assign(state.projects, Object.assign({}, state.projects, {
-      [projectPath]: state.projects[projectPath],
-    }));
   },
   [types.SET_BRANCH_WORKING_REFERENCE](state, { projectId, branchId, reference }) {
     Object.assign(state.projects[projectId].branches[branchId], {
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index feb90aaec70..488b06e6877 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -19,5 +19,5 @@ export default () => ({
   trees: {},
   projects: {},
   leftBarCollapsed: false,
-  rightBarCollapsed: false,
+  rightBarCollapsed: true,
 });
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 74ebc016870..ee0ab86d55d 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -55,7 +55,7 @@ module BlobHelper
       common_classes = "btn js-edit-ide #{options[:extra_class]}"
 
       if !on_top_of_branch?(project, ref)
-        button_tag 'Multi Edit <span class="label label-primary">Beta</span>', class: "#{common_classes} disabled has-tooltip", title: "You can only edit files when you are on a branch", data: { container: 'body' }
+        button_tag 'Multi Edit <span class="label label-primary">Beta</span>'.html_safe, class: "#{common_classes} disabled has-tooltip", title: "You can only edit files when you are on a branch", data: { container: 'body' }
       # This condition applies to anonymous or users who can edit directly
       elsif !current_user || (current_user && can_modify_blob?(blob, project, ref))
         link_to 'Multi Edit <span class="label label-primary">Beta</span>'.html_safe, ide_edit_path(project, ref, path, options), class: "#{common_classes} btn-sm"
@@ -67,7 +67,7 @@ module BlobHelper
         }
         fork_path = project_forks_path(project, namespace_key: current_user.namespace.id, continue: continue_params)
 
-        button_tag 'Multi Edit <span class="label label-primary">Beta</span>',
+        button_tag 'Multi Edit <span class="label label-primary">Beta</span>'.html_safe,
           class: "#{common_classes}",
           data: { action: 'edit', fork_path: fork_path }
       end
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 3157309fa99..28b7ab129fe 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -6,7 +6,7 @@
 
 .tree-controls
   - if show_new_repo?
-    = link_to 'Multi edit', ide_edit_path(@project, @id), class: 'btn'
+    = link_to 'Multi Edit <span class="label label-primary">Beta</span>'.html_safe, ide_edit_path(@project, @id), class: 'btn'
 
   = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
 
-- 
cgit v1.2.1