addressed feedback from review

spec fixes

13 files changed, 67 insertions, 56 deletions

diff --git a/app/assets/javascripts/repo/components/new_dropdown/index.vue b/app/assets/javascripts/repo/components/new_dropdown/index.vue
index 53baa02c344..5e93ce7bc0f 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/index.vue
@@ -1,4 +1,5 @@
 <script>
+  import { mapState } from 'vuex';
   import newModal from './modal.vue';
 
   export default {
@@ -11,6 +12,11 @@
         modalType: '',
       };
     },
+    computed: {
+      ...mapState([
+        'path',
+      ]),
+    },
     methods: {
       createNewItem(type) {
         this.modalType = type;
@@ -64,6 +70,7 @@
     <new-modal
       v-if="openModal"
       :type="modalType"
+      :path="path"
       @toggle="toggleModalOpen"
     />
   </div>
diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
index bb22dc4caa9..e780b88b04c 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
@@ -9,10 +9,14 @@
         type: String,
         required: true,
       },
+      path: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
-        entryName: '',
+        entryName: this.path !== '' ? `${this.path}/` : '',
       };
     },
     components: {
@@ -24,7 +28,7 @@
       ]),
       createEntryInStore() {
         this.createTempEntry({
-          name: this.entryName,
+          name: this.entryName.replace(new RegExp(`^${this.path}\/`), ''),
           type: this.type,
         });
 
@@ -35,17 +39,6 @@
       },
     },
     computed: {
-      ...mapState([
-        'path',
-      ]),
-      name: {
-        get() {
-          return this.path !== '' ? `${this.path}/${this.entryName}` : this.entryName;
-        },
-        set(newVal) {
-          this.entryName = newVal.replace(`${this.path}/`, '');
-        },
-      },
       modalTitle() {
         if (this.type === 'tree') {
           return __('Create new directory');
@@ -95,7 +88,7 @@
           <input
             type="text"
             class="form-control"
-            v-model="name"
+            v-model="entryName"
             ref="fieldName"
           />
         </div>
diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index 31a88b297c0..1f0e168c777 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -13,7 +13,7 @@ export default {
       'currentBlobView',
     ]),
     ...mapGetters([
-      'isMini',
+      'isCollapsed',
       'changedFiles',
     ]),
   },
@@ -26,15 +26,12 @@ export default {
     RepoPreview,
   },
   mounted() {
+    const alertMessage = 'Are you sure you want to lose unsaved changes?';
     window.onbeforeunload = (e) => {
-      const event = e || window.event;
-
       if (!this.changedFiles.length) return undefined;
 
-      if (event) event.returnValue = 'Are you sure you want to lose unsaved changes?';
-
-      // For Safari
-      return 'Are you sure you want to lose unsaved changes?';
+      e.returnValue = alertMessage;
+      return alertMessage;
     };
   },
 };
@@ -42,10 +39,10 @@ export default {
 
 <template>
   <div class="repository-view">
-    <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isMini}">
+    <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isCollapsed}">
       <repo-sidebar/>
       <div
-        v-if="isMini"
+        v-if="isCollapsed"
         class="panel-right"
       >
         <repo-tabs/>
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index 37fc35f35c9..fb613e8af9d 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/components/repo_commit_section.vue
@@ -33,6 +33,7 @@ export default {
     ...mapActions([
       'checkCommitStatus',
       'commitChanges',
+      'getTreeData',
     ]),
     makeCommit(newBranch = false) {
       const createNewBranch = newBranch || this.startNewMR;
@@ -54,6 +55,7 @@ export default {
       this.commitChanges({ payload, newMr: this.startNewMR })
         .then(() => {
           this.submitCommitsLoading = false;
+          this.getTreeData();
         })
         .catch(() => {
           this.submitCommitsLoading = false;
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index 6e9669403f2..0d6729bb99b 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -92,5 +92,10 @@ export default {
 </script>
 
 <template>
-  <div id="ide" v-if='!shouldHideEditor' class="blob-viewer-container blob-editor-container"></div>
+  <div
+    id="ide"
+    v-if='!shouldHideEditor'
+    class="blob-viewer-container blob-editor-container"
+  >
+  </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index 77895174f15..7a23154b340 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -14,7 +14,7 @@
     },
     computed: {
       ...mapGetters([
-        'isMini',
+        'isCollapsed',
       ]),
       fileIcon() {
         return {
@@ -71,7 +71,7 @@
       </template>
     </td>
 
-    <template v-if="!isMini">
+    <template v-if="!isCollapsed">
       <td class="hidden-sm hidden-xs">
         <a
           @click.stop
diff --git a/app/assets/javascripts/repo/components/repo_loading_file.vue b/app/assets/javascripts/repo/components/repo_loading_file.vue
index 51a2aade464..1e6c405f292 100644
--- a/app/assets/javascripts/repo/components/repo_loading_file.vue
+++ b/app/assets/javascripts/repo/components/repo_loading_file.vue
@@ -4,7 +4,7 @@
   export default {
     computed: {
       ...mapGetters([
-        'isMini',
+        'isCollapsed',
       ]),
     },
     methods: {
@@ -30,7 +30,7 @@
         </div>
       </div>
     </td>
-    <template v-if="!isMini">
+    <template v-if="!isCollapsed">
       <td
         class="hidden-sm hidden-xs">
         <div class="animation-container">
diff --git a/app/assets/javascripts/repo/components/repo_prev_directory.vue b/app/assets/javascripts/repo/components/repo_prev_directory.vue
index 3c623dd8020..a2b305bbd05 100644
--- a/app/assets/javascripts/repo/components/repo_prev_directory.vue
+++ b/app/assets/javascripts/repo/components/repo_prev_directory.vue
@@ -7,10 +7,10 @@
         'parentTreeUrl',
       ]),
       ...mapGetters([
-        'isMini',
+        'isCollapsed',
       ]),
       colSpanCondition() {
-        return this.isMini ? undefined : 3;
+        return this.isCollapsed ? undefined : 3;
       },
     },
     methods: {
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index bbe5c667254..b189a603c57 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -7,6 +7,9 @@ export default {
     ...mapGetters([
       'activeFile',
     ]),
+    renderErrorTooLarge() {
+      return this.activeFile.renderError == 'too_large';
+    },
   },
   methods: {
     highlightFile() {
@@ -35,7 +38,7 @@ export default {
     v-html="activeFile.html">
   </div>
   <div
-    v-else-if="activeFile.renderError == 'too_large'"
+    v-else-if="renderErrorTooLarge"
     class="vertical-center render-error">
     <p class="text-center">
       The source could not be displayed because it is too large. You can <a :href="activeFile.rawPath" download>download</a> it instead.
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 34eaa26cf72..63c0d70f5c0 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -31,7 +31,7 @@ export default {
     }),
     ...mapGetters([
       'treeList',
-      'isMini',
+      'isCollapsed',
     ]),
   },
   methods: {
@@ -44,12 +44,12 @@ export default {
 </script>
 
 <template>
-<div id="sidebar" :class="{'sidebar-mini' : isMini}">
+<div id="sidebar" :class="{'sidebar-mini' : isCollapsed}">
   <table class="table">
     <thead>
       <tr>
         <th
-          v-if="isMini"
+          v-if="isCollapsed"
           class="repo-file-options title"
         >
           <strong class="clgray">
diff --git a/app/assets/javascripts/repo/stores/actions.js b/app/assets/javascripts/repo/stores/actions.js
index d5dc57e331b..008de3d8315 100644
--- a/app/assets/javascripts/repo/stores/actions.js
+++ b/app/assets/javascripts/repo/stores/actions.js
@@ -2,6 +2,9 @@ import Vue from 'vue';
 import flash from '../../flash';
 import service from '../services';
 import * as types from './mutation_types';
+import {
+  pushState,
+} from './utils';
 
 export const redirectToUrl = url => gl.utils.visitUrl(url);
 
@@ -67,6 +70,7 @@ export const checkCommitStatus = ({ state }) => service.getBranchData(
 export const commitChanges = ({ commit, state, dispatch }, { payload, newMr }) =>
   service.commit(state.project.id, payload)
   .then((data) => {
+    const { branch } = payload;
     if (!data.short_id) {
       flash(data.message);
       return;
@@ -75,9 +79,8 @@ export const commitChanges = ({ commit, state, dispatch }, { payload, newMr }) =
     flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
 
     if (newMr) {
-      redirectToUrl(`${state.endpoints.newMergeRequestUrl}${payload.branch}`);
+      redirectToUrl(`${state.endpoints.newMergeRequestUrl}${branch}`);
     } else {
-      // TODO: push a new state with the branch name
       commit(types.SET_COMMIT_REF, data.id);
       dispatch('discardAllChanges');
       dispatch('closeAllFiles');
diff --git a/app/assets/javascripts/repo/stores/getters.js b/app/assets/javascripts/repo/stores/getters.js
index 9122578cc79..1ed05ac6e35 100644
--- a/app/assets/javascripts/repo/stores/getters.js
+++ b/app/assets/javascripts/repo/stores/getters.js
@@ -1,5 +1,10 @@
 import _ from 'underscore';
 
+/*
+  Takes the multi-dimensional tree and returns a flattened array.
+  This allows for the table to recursively render the table rows but keeps the data
+  structure nested to make it easier to add new files/directories.
+*/
 export const treeList = (state) => {
   const mapTree = arr => (!arr.tree.length ? [] : _.map(arr.tree, a => [a, mapTree(a)]));
 
@@ -9,11 +14,7 @@ export const treeList = (state) => {
     .value();
 };
 
-export const changedFiles = (state) => {
-  const files = state.openFiles;
-
-  return files.filter(file => file.changed);
-};
+export const changedFiles = state => state.openFiles.filter(file => file.changed);
 
 export const activeFile = state => state.openFiles.find(file => file.active);
 
@@ -22,7 +23,7 @@ export const activeFileExtension = (state) => {
   return file ? `.${file.path.split('.').pop()}` : '';
 };
 
-export const isMini = state => !!state.openFiles.length;
+export const isCollapsed = state => !!state.openFiles.length;
 
 export const canEditFile = (state) => {
   const currentActiveFile = activeFile(state);
diff --git a/app/assets/javascripts/repo/stores/state.js b/app/assets/javascripts/repo/stores/state.js
index 1301350c627..aab74754f02 100644
--- a/app/assets/javascripts/repo/stores/state.js
+++ b/app/assets/javascripts/repo/stores/state.js
@@ -1,23 +1,23 @@
 export default () => ({
-  project: {
-    id: 0,
-    name: '',
-    url: '',
-  },
-  endpoints: {},
-  isRoot: false,
-  isInitialRoot: false,
+  canCommit: false,
   currentBranch: '',
+  currentBlobView: 'repo-preview',
   currentRef: '',
-  path: '',
-  canCommit: false,
-  onTopOfBranch: false,
+  discardPopupOpen: false,
   editMode: false,
+  endpoints: {},
+  isRoot: false,
+  isInitialRoot: false,
   loading: false,
-  currentBlobView: 'repo-preview',
-  discardPopupOpen: false,
-  tree: [],
+  onTopOfBranch: false,
   openFiles: [],
+  path: '',
+  project: {
+    id: 0,
+    name: '',
+    url: '',
+  },
   parentTreeUrl: '',
   previousUrl: '',
+  tree: [],
 });