From caee9d5882050b3998f05edf7aff8bd3c36591c3 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 12 Oct 2017 10:55:11 +0100
Subject: Add new files & directories in the multi-file editor

Closes #38614
---
 .../repo/components/new_dropdown/index.vue         |  70 +++++++++++++
 .../repo/components/new_dropdown/modal.vue         | 115 +++++++++++++++++++++
 .../repo/components/repo_commit_section.vue        |   2 +-
 .../javascripts/repo/components/repo_editor.vue    |  43 ++++----
 .../repo/components/repo_file_buttons.vue          |  12 ++-
 .../javascripts/repo/components/repo_tab.vue       |   4 +-
 app/assets/javascripts/repo/helpers/repo_helper.js |   4 +-
 app/assets/javascripts/repo/index.js               |  15 +++
 app/assets/javascripts/repo/mixins/repo_mixin.js   |   2 +-
 app/assets/javascripts/repo/stores/repo_store.js   |   7 +-
 .../vue_shared/components/popup_dialog.vue         |  11 +-
 app/views/projects/tree/_tree_header.html.haml     |   4 +-
 12 files changed, 257 insertions(+), 32 deletions(-)
 create mode 100644 app/assets/javascripts/repo/components/new_dropdown/index.vue
 create mode 100644 app/assets/javascripts/repo/components/new_dropdown/modal.vue

diff --git a/app/assets/javascripts/repo/components/new_dropdown/index.vue b/app/assets/javascripts/repo/components/new_dropdown/index.vue
new file mode 100644
index 00000000000..652c8027ae3
--- /dev/null
+++ b/app/assets/javascripts/repo/components/new_dropdown/index.vue
@@ -0,0 +1,70 @@
+<script>
+  import newModal from './modal.vue';
+
+  export default {
+    components: {
+      newModal,
+    },
+    data() {
+      return {
+        openModal: false,
+        modalType: '',
+      };
+    },
+    methods: {
+      createNewItem(type) {
+        this.modalType = type;
+        this.toggleModalOpen();
+      },
+      toggleModalOpen() {
+        this.openModal = !this.openModal;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="breadcrumb repo-breadcrumb">
+    <div class="dropdown">
+      <button
+        type="button"
+        class="btn btn-default dropdown-toggle add-to-tree"
+        data-toggle="dropdown"
+        data-target=".add-to-tree-dropdown"
+      >
+        <i
+          class="fa fa-plus"
+          aria-hidden="true"
+        >
+        </i>
+      </button>
+    </div>
+    <div class="add-to-tree-dropdown">
+      <ul class="dropdown-menu">
+        <li>
+          <a
+            href="#"
+            role="button"
+            @click.prevent="createNewItem('blob')"
+          >
+            {{ __('New file') }}
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            role="button"
+            @click.prevent="createNewItem('tree')"
+          >
+            {{ __('New directory') }}
+          </a>
+        </li>
+      </ul>
+    </div>
+    <new-modal
+      v-if="openModal"
+      :type="modalType"
+      @toggle="toggleModalOpen"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
new file mode 100644
index 00000000000..95ecfb29dd3
--- /dev/null
+++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
@@ -0,0 +1,115 @@
+<script>
+  import { __ } from '../../../locale';
+  import popupDialog from '../../../vue_shared/components/popup_dialog.vue';
+  import RepoStore from '../../stores/repo_store';
+  import RepoHelper from '../../helpers/repo_helper';
+
+  export default {
+    props: {
+      type: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        entryName: '',
+      };
+    },
+    components: {
+      popupDialog,
+    },
+    methods: {
+      createEntryInStore() {
+        if (this.entryName === '') return;
+
+        const fileName = this.type === 'tree' ? '.gitkeep' : this.entryName;
+        let tree = null;
+
+        if (this.type === 'tree') {
+          tree = RepoHelper.serializeTree({
+            name: this.entryName,
+            path: this.entryName,
+            tempFile: true,
+          });
+          RepoStore.files.push(tree);
+
+          RepoHelper.setDirectoryOpen(tree, tree.name);
+        }
+
+        const file = RepoHelper.serializeBlob({
+          name: fileName,
+          path: tree ? `${tree}/${fileName}` : fileName,
+          tempFile: true,
+        });
+
+        if (tree) {
+          RepoStore.addFilesToDirectory(tree, RepoStore.files, [file]);
+        } else {
+          RepoStore.addFilesToDirectory(tree, RepoStore.files, [...RepoStore.files, file]);
+        }
+
+        RepoHelper.setFile(file, file);
+        RepoStore.editMode = true;
+        RepoStore.toggleBlobView();
+
+        this.toggleModalOpen();
+      },
+      toggleModalOpen() {
+        this.$emit('toggle');
+      },
+    },
+    computed: {
+      modalTitle() {
+        if (this.type === 'tree') {
+          return __('Create new directory');
+        }
+
+        return __('Create new file');
+      },
+      buttonLabel() {
+        if (this.type === 'tree') {
+          return __('Create directory');
+        }
+
+        return __('Create file');
+      },
+      formLabelName() {
+        if (this.type === 'tree') {
+          return __('Directory name');
+        }
+
+        return __('File name');
+      },
+    },
+  };
+</script>
+
+<template>
+  <popup-dialog
+    :title="modalTitle"
+    :primary-button-label="buttonLabel"
+    kind="success"
+    @toggle="toggleModalOpen"
+    @submit="createEntryInStore"
+  >
+    <form
+      class="form-horizontal"
+      slot="body"
+      @submit.prevent="createEntryInStore"
+    >
+      <fieldset class="form-group append-bottom-0">
+        <label class="label-light col-sm-3">
+          {{ formLabelName }}
+        </label>
+        <div class="col-sm-9">
+          <input
+            type="text"
+            class="form-control"
+            v-model="entryName"
+          />
+        </div>
+      </fieldset>
+    </form>
+  </popup-dialog>
+</template>
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index 185cd90ac06..e3003fbf477 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/components/repo_commit_section.vue
@@ -49,7 +49,7 @@ export default {
       // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
       const commitMessage = this.commitMessage;
       const actions = this.changedFiles.map(f => ({
-        action: 'update',
+        action: f.tempFile ? 'create' : 'update',
         file_path: f.path,
         content: f.newContent,
       }));
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index 4639bee6d66..9f567d4e94d 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -16,28 +16,35 @@ const RepoEditor = {
   },
 
   mounted() {
-    Service.getRaw(this.activeFile.raw_path)
-      .then((rawResponse) => {
-        Store.blobRaw = rawResponse.data;
-        Store.activeFile.plain = rawResponse.data;
-
-        const monacoInstance = Helper.monaco.editor.create(this.$el, {
-          model: null,
-          readOnly: false,
-          contextmenu: true,
-          scrollBeyondLastLine: false,
-        });
+    if (!this.activeFile.tempFile) {
+      Service.getRaw(this.activeFile.raw_path)
+        .then((rawResponse) => {
+          Store.blobRaw = rawResponse.data;
+          Store.activeFile.plain = rawResponse.data;
+
+          this.createMonacoInstance();
+        })
+        .catch(Helper.loadingError);
+    } else {
+      this.createMonacoInstance();
+    }
+  },
 
-        Helper.monacoInstance = monacoInstance;
+  methods: {
+    createMonacoInstance() {
+      const monacoInstance = Helper.monaco.editor.create(this.$el, {
+        model: null,
+        readOnly: false,
+        contextmenu: true,
+        scrollBeyondLastLine: false,
+      });
 
-        this.addMonacoEvents();
+      Helper.monacoInstance = monacoInstance;
 
-        this.setupEditor();
-      })
-      .catch(Helper.loadingError);
-  },
+      this.addMonacoEvents();
 
-  methods: {
+      this.setupEditor();
+    },
     setupEditor() {
       this.showHide();
 
diff --git a/app/assets/javascripts/repo/components/repo_file_buttons.vue b/app/assets/javascripts/repo/components/repo_file_buttons.vue
index 03cd219e718..354be2545f4 100644
--- a/app/assets/javascripts/repo/components/repo_file_buttons.vue
+++ b/app/assets/javascripts/repo/components/repo_file_buttons.vue
@@ -11,7 +11,12 @@ const RepoFileButtons = {
   mixins: [RepoMixin],
 
   computed: {
-
+    showButtons() {
+      return this.activeFile.raw_path ||
+        this.activeFile.blame_path ||
+        this.activeFile.commits_path ||
+        this.activeFile.permalink;
+    },
     rawDownloadButtonLabel() {
       return this.binary ? 'Download' : 'Raw';
     },
@@ -30,7 +35,10 @@ export default RepoFileButtons;
 </script>
 
 <template>
-  <div id="repo-file-buttons">
+  <div
+    v-if="showButtons"
+    id="repo-file-buttons"
+  >
     <a
       :href="activeFile.raw_path"
       target="_blank"
diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue
index 098715915b0..96376ea0db6 100644
--- a/app/assets/javascripts/repo/components/repo_tab.vue
+++ b/app/assets/javascripts/repo/components/repo_tab.vue
@@ -18,8 +18,8 @@ const RepoTab = {
     },
     changedClass() {
       const tabChangedObj = {
-        'fa-times close-icon': !this.tab.changed,
-        'fa-circle unsaved-icon': this.tab.changed,
+        'fa-times close-icon': !this.tab.changed && !this.tab.tempFile,
+        'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile,
       };
       return tabChangedObj;
     },
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index f7b7f93e4b8..dd635f82b13 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -157,7 +157,7 @@ const RepoHelper = {
   },
 
   serializeRepoEntity(type, entity, level = 0) {
-    const { id, url, name, icon, last_commit, tree_url } = entity;
+    const { id, url, name, icon, last_commit, tree_url, path, tempFile } = entity;
 
     return {
       id,
@@ -165,7 +165,9 @@ const RepoHelper = {
       name,
       url,
       tree_url,
+      path,
       level,
+      tempFile,
       icon: `fa-${icon}`,
       files: [],
       loading: false,
diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
index 65dee7d5fd1..b1b40d8b8cc 100644
--- a/app/assets/javascripts/repo/index.js
+++ b/app/assets/javascripts/repo/index.js
@@ -5,6 +5,7 @@ import Service from './services/repo_service';
 import Store from './stores/repo_store';
 import Repo from './components/repo.vue';
 import RepoEditButton from './components/repo_edit_button.vue';
+import newDropdown from './components/new_dropdown/index.vue';
 import Translate from '../vue_shared/translate';
 
 function initDropdowns() {
@@ -62,9 +63,22 @@ function initRepoEditButton(el) {
   });
 }
 
+function initNewDropdown(el) {
+  return new Vue({
+    el,
+    components: {
+      newDropdown,
+    },
+    render(createElement) {
+      return createElement('new-dropdown');
+    },
+  });
+}
+
 function initRepoBundle() {
   const repo = document.getElementById('repo');
   const editButton = document.querySelector('.editable-mode');
+  const newDropdownHolder = document.querySelector('.js-new-dropdown');
   setInitialStore(repo.dataset);
   addEventsForNonVueEls();
   initDropdowns();
@@ -73,6 +87,7 @@ function initRepoBundle() {
 
   initRepo(repo);
   initRepoEditButton(editButton);
+  initNewDropdown(newDropdownHolder);
 }
 
 $(initRepoBundle);
diff --git a/app/assets/javascripts/repo/mixins/repo_mixin.js b/app/assets/javascripts/repo/mixins/repo_mixin.js
index c8e8238a0d3..efeda426b96 100644
--- a/app/assets/javascripts/repo/mixins/repo_mixin.js
+++ b/app/assets/javascripts/repo/mixins/repo_mixin.js
@@ -8,7 +8,7 @@ const RepoMixin = {
 
     changedFiles() {
       const changedFileList = this.openedFiles
-      .filter(file => file.changed);
+        .filter(file => file.changed || file.tempFile);
       return changedFileList;
     },
   },
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index 49d7317a17e..f4ab80b2c98 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -75,7 +75,7 @@ const RepoStore = {
       RepoStore.blobRaw = file.base64;
     } else if (file.newContent || file.plain) {
       RepoStore.blobRaw = file.newContent || file.plain;
-    } else {
+    } else if (!file.tempFile) {
       Service.getRaw(file.raw_path)
         .then((rawResponse) => {
           RepoStore.blobRaw = rawResponse.data;
@@ -120,6 +120,11 @@ const RepoStore = {
       return openedFile.path !== file.path;
     });
 
+    // remove the file from the sidebar if it is a tempFile
+    if (file.tempFile) {
+      RepoStore.files = RepoStore.files.filter(f => !(f.tempFile && f.path === file.path));
+    }
+
     // now activate the right tab based on what you closed.
     if (RepoStore.openedFiles.length === 0) {
       RepoStore.activeFile = {};
diff --git a/app/assets/javascripts/vue_shared/components/popup_dialog.vue b/app/assets/javascripts/vue_shared/components/popup_dialog.vue
index 7d8c5936b7d..9e8c10bdc1a 100644
--- a/app/assets/javascripts/vue_shared/components/popup_dialog.vue
+++ b/app/assets/javascripts/vue_shared/components/popup_dialog.vue
@@ -9,7 +9,7 @@ export default {
     },
     text: {
       type: String,
-      required: true,
+      required: false,
     },
     kind: {
       type: String,
@@ -82,14 +82,15 @@ export default {
           type="button"
           class="btn"
           :class="btnCancelKindClass"
-          @click="emitSubmit(false)">
-            {{closeButtonLabel}}
+          @click="close">
+          {{ closeButtonLabel }}
         </button>
-        <button type="button"
+        <button
+          type="button"
           class="btn"
           :class="btnKindClass"
           @click="emitSubmit(true)">
-            {{primaryButtonLabel}}
+          {{ primaryButtonLabel }}
         </button>
       </div>
     </div>
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 6cddc38d11a..df58e257a4e 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -2,7 +2,9 @@
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'tree', path: @path
 
-  - unless show_new_repo?
+  - if show_new_repo?
+    .js-new-dropdown
+  - else
     = render 'projects/tree/old_tree_header'
 
 .tree-controls
-- 
cgit v1.2.1


From e5cd65a4b66b759fbcf85ea633e7f86bb9b270a4 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 18 Oct 2017 09:25:28 +0100
Subject: fixed new file/directory modal using methods that no longer exist

[ci skip]
---
 .../repo/components/new_dropdown/index.vue         | 69 +++++++++++-----------
 .../repo/components/new_dropdown/modal.vue         | 22 +++----
 .../javascripts/repo/components/repo_tab.vue       |  2 +-
 3 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/app/assets/javascripts/repo/components/new_dropdown/index.vue b/app/assets/javascripts/repo/components/new_dropdown/index.vue
index 652c8027ae3..864db679e82 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/index.vue
@@ -24,43 +24,42 @@
 </script>
 
 <template>
-  <div class="breadcrumb repo-breadcrumb">
-    <div class="dropdown">
-      <button
-        type="button"
-        class="btn btn-default dropdown-toggle add-to-tree"
-        data-toggle="dropdown"
-        data-target=".add-to-tree-dropdown"
-      >
-        <i
-          class="fa fa-plus"
-          aria-hidden="true"
+  <div>
+    <ul class="breadcrumb repo-breadcrumb">
+      <li class="dropdown">
+        <button
+          type="button"
+          class="btn btn-default dropdown-toggle add-to-tree"
+          data-toggle="dropdown"
         >
-        </i>
-      </button>
-    </div>
-    <div class="add-to-tree-dropdown">
-      <ul class="dropdown-menu">
-        <li>
-          <a
-            href="#"
-            role="button"
-            @click.prevent="createNewItem('blob')"
+          <i
+            class="fa fa-plus"
+            aria-hidden="true"
           >
-            {{ __('New file') }}
-          </a>
-        </li>
-        <li>
-          <a
-            href="#"
-            role="button"
-            @click.prevent="createNewItem('tree')"
-          >
-            {{ __('New directory') }}
-          </a>
-        </li>
-      </ul>
-    </div>
+          </i>
+        </button>
+        <ul class="dropdown-menu">
+          <li>
+            <a
+              href="#"
+              role="button"
+              @click.prevent="createNewItem('blob')"
+            >
+              {{ __('New file') }}
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              role="button"
+              @click.prevent="createNewItem('tree')"
+            >
+              {{ __('New directory') }}
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
     <new-modal
       v-if="openModal"
       :type="modalType"
diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
index 95ecfb29dd3..372674e784a 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
@@ -24,12 +24,13 @@
         if (this.entryName === '') return;
 
         const fileName = this.type === 'tree' ? '.gitkeep' : this.entryName;
-        let tree = null;
+        let tree = RepoStore;
 
         if (this.type === 'tree') {
-          tree = RepoHelper.serializeTree({
+          tree = RepoHelper.serializeRepoEntity('tree', {
             name: this.entryName,
             path: this.entryName,
+            icon: 'folder',
             tempFile: true,
           });
           RepoStore.files.push(tree);
@@ -37,17 +38,14 @@
           RepoHelper.setDirectoryOpen(tree, tree.name);
         }
 
-        const file = RepoHelper.serializeBlob({
+        const file = RepoHelper.serializeRepoEntity('blob', {
           name: fileName,
-          path: tree ? `${tree}/${fileName}` : fileName,
+          path: tree.path ? `${tree.path}/${fileName}` : fileName,
+          icon: 'file-text-o',
           tempFile: true,
-        });
+        }, (this.type === 'tree' ? tree.level + 1 : 0));
 
-        if (tree) {
-          RepoStore.addFilesToDirectory(tree, RepoStore.files, [file]);
-        } else {
-          RepoStore.addFilesToDirectory(tree, RepoStore.files, [...RepoStore.files, file]);
-        }
+        tree.files.push(file);
 
         RepoHelper.setFile(file, file);
         RepoStore.editMode = true;
@@ -82,6 +80,9 @@
         return __('File name');
       },
     },
+    mounted() {
+      this.$refs.fieldName.focus();
+    },
   };
 </script>
 
@@ -107,6 +108,7 @@
             type="text"
             class="form-control"
             v-model="entryName"
+            ref="fieldName"
           />
         </div>
       </fieldset>
diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue
index 96376ea0db6..405d7b4cf86 100644
--- a/app/assets/javascripts/repo/components/repo_tab.vue
+++ b/app/assets/javascripts/repo/components/repo_tab.vue
@@ -30,7 +30,7 @@ const RepoTab = {
       Store.setActiveFiles(file);
     },
     closeTab(file) {
-      if (file.changed) return;
+      if (file.changed || file.tempFile) return;
 
       Store.removeFromOpenedFiles(file);
     },
-- 
cgit v1.2.1


From fd67a20e2c83257e555a382ae775a2a65b2efadc Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 18 Oct 2017 12:05:48 +0100
Subject: changed adding temp files/directories code to match new structure

this uses the new data structure of adding into the different arrays
which makes the code a lot easier to work with.

Some changes need to be made around commiting & changing the content.

[ci skip]
---
 .../repo/components/new_dropdown/modal.vue         | 30 +++++++++-------------
 app/assets/javascripts/repo/helpers/repo_helper.js | 27 +++++++++++++++++--
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
index 372674e784a..51f74b06bae 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
@@ -27,29 +27,23 @@
         let tree = RepoStore;
 
         if (this.type === 'tree') {
-          tree = RepoHelper.serializeRepoEntity('tree', {
-            name: this.entryName,
-            path: this.entryName,
-            icon: 'folder',
-            tempFile: true,
-          });
-          RepoStore.files.push(tree);
+          const dirNames = this.entryName.split('/');
 
-          RepoHelper.setDirectoryOpen(tree, tree.name);
+          dirNames.forEach((dirName) => {
+            tree = RepoHelper.findOrCreateEntry('tree', tree, dirName).entry;
+          });
         }
 
-        const file = RepoHelper.serializeRepoEntity('blob', {
-          name: fileName,
-          path: tree.path ? `${tree.path}/${fileName}` : fileName,
-          icon: 'file-text-o',
-          tempFile: true,
-        }, (this.type === 'tree' ? tree.level + 1 : 0));
+        if ((this.type === 'tree' && tree.tempFile) || this.type === 'blob') {
+          const file = RepoHelper.findOrCreateEntry('blob', tree, fileName);
 
-        tree.files.push(file);
+          if (!file.exists) {
+            RepoHelper.setFile(file.entry, file.entry);
 
-        RepoHelper.setFile(file, file);
-        RepoStore.editMode = true;
-        RepoStore.toggleBlobView();
+            RepoStore.editMode = true;
+            RepoStore.toggleBlobView();
+          }
+        }
 
         this.toggleModalOpen();
       },
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index dd635f82b13..cc9bab2bb6a 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -157,7 +157,7 @@ const RepoHelper = {
   },
 
   serializeRepoEntity(type, entity, level = 0) {
-    const { id, url, name, icon, last_commit, tree_url, path, tempFile } = entity;
+    const { id, url, name, icon, last_commit, tree_url, path, tempFile, opened = false } = entity;
 
     return {
       id,
@@ -171,7 +171,7 @@ const RepoHelper = {
       icon: `fa-${icon}`,
       files: [],
       loading: false,
-      opened: false,
+      opened,
       // eslint-disable-next-line camelcase
       lastCommit: last_commit ? {
         url: `${Store.projectUrl}/commit/${last_commit.id}`,
@@ -225,6 +225,29 @@ const RepoHelper = {
   loadingError() {
     Flash('Unable to load this content at this time.');
   },
+
+  findOrCreateEntry(type, tree, name) {
+    let exists = true;
+    let foundEntry = tree.files.find(dir => dir.type === type && dir.name === name);
+
+    if (!foundEntry) {
+      foundEntry = RepoHelper.serializeRepoEntity(type, {
+        name,
+        path: tree.path ? `${tree.path}/${name}` : name,
+        icon: type === 'tree' ? 'folder' : 'file-text-o',
+        tempFile: true,
+        opened: true,
+      }, tree.level !== undefined ? tree.level + 1 : 0);
+
+      exists = false;
+      tree.files.push(foundEntry);
+    }
+
+    return {
+      entry: foundEntry,
+      exists,
+    };
+  },
 };
 
 export default RepoHelper;
-- 
cgit v1.2.1


From 389c852d1210f07d34f2235423235a8ac1cff27b Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 19 Oct 2017 08:58:06 +0100
Subject: correctly creates file in currently viewed directory

specs
---
 .../repo/components/new_dropdown/index.vue         |   1 +
 app/assets/javascripts/repo/index.js               |   1 +
 app/assets/javascripts/repo/stores/repo_store.js   |   1 +
 app/views/shared/repo/_repo.html.haml              |   3 +-
 .../helpers/vue_mount_component_helper.js          |   5 +-
 .../repo/components/new_dropdown/index_spec.js     |  63 ++++++++
 .../repo/components/new_dropdown/modal_spec.js     | 180 +++++++++++++++++++++
 7 files changed, 250 insertions(+), 4 deletions(-)
 create mode 100644 spec/javascripts/repo/components/new_dropdown/index_spec.js
 create mode 100644 spec/javascripts/repo/components/new_dropdown/modal_spec.js

diff --git a/app/assets/javascripts/repo/components/new_dropdown/index.vue b/app/assets/javascripts/repo/components/new_dropdown/index.vue
index 864db679e82..53baa02c344 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/index.vue
@@ -31,6 +31,7 @@
           type="button"
           class="btn btn-default dropdown-toggle add-to-tree"
           data-toggle="dropdown"
+          aria-label="Create new file or directory"
         >
           <i
             class="fa fa-plus"
diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
index b1b40d8b8cc..3586b5fea67 100644
--- a/app/assets/javascripts/repo/index.js
+++ b/app/assets/javascripts/repo/index.js
@@ -28,6 +28,7 @@ function setInitialStore(data) {
   Store.service = Service;
   Store.service.url = data.url;
   Store.service.refsUrl = data.refsUrl;
+  Store.path = data.currentPath;
   Store.projectId = data.projectId;
   Store.projectName = data.projectName;
   Store.projectUrl = data.projectUrl;
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index f4ab80b2c98..530c725ceb6 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -38,6 +38,7 @@ const RepoStore = {
   newMrTemplateUrl: '',
   branchChanged: false,
   commitMessage: '',
+  path: '',
   loading: {
     tree: false,
     blob: false,
diff --git a/app/views/shared/repo/_repo.html.haml b/app/views/shared/repo/_repo.html.haml
index 7185f5bcc5b..7861f92b33f 100644
--- a/app/views/shared/repo/_repo.html.haml
+++ b/app/views/shared/repo/_repo.html.haml
@@ -7,4 +7,5 @@
                blob_url: namespace_project_blob_path(project.namespace, project, '{{branch}}'),
                new_mr_template_url: namespace_project_new_merge_request_path(project.namespace, project, merge_request: { source_branch: '{{source_branch}}' }),
                can_commit: (!!can_push_branch?(project, @ref)).to_s,
-               on_top_of_branch: (!!on_top_of_branch?(project, @ref)).to_s } }
+               on_top_of_branch: (!!on_top_of_branch?(project, @ref)).to_s,
+               current_path: @path } }
diff --git a/spec/javascripts/helpers/vue_mount_component_helper.js b/spec/javascripts/helpers/vue_mount_component_helper.js
index d7a2e86771c..b71136c4114 100644
--- a/spec/javascripts/helpers/vue_mount_component_helper.js
+++ b/spec/javascripts/helpers/vue_mount_component_helper.js
@@ -1,4 +1,3 @@
-export default (Component, props = {}) => new Component({
+export default (Component, props = {}, el = null) => new Component({
   propsData: props,
-}).$mount();
-
+}).$mount(el);
diff --git a/spec/javascripts/repo/components/new_dropdown/index_spec.js b/spec/javascripts/repo/components/new_dropdown/index_spec.js
new file mode 100644
index 00000000000..884d065718b
--- /dev/null
+++ b/spec/javascripts/repo/components/new_dropdown/index_spec.js
@@ -0,0 +1,63 @@
+import Vue from 'vue';
+import newDropdown from '~/repo/components/new_dropdown/index.vue';
+import createComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('new dropdown component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const component = Vue.extend(newDropdown);
+
+    vm = createComponent(component);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders new file and new directory links', () => {
+    expect(vm.$el.querySelectorAll('a')[0].textContent.trim()).toBe('New file');
+    expect(vm.$el.querySelectorAll('a')[1].textContent.trim()).toBe('New directory');
+  });
+
+  describe('createNewItem', () => {
+    it('sets modalType to blob when new file is clicked', () => {
+      vm.$el.querySelectorAll('a')[0].click();
+
+      expect(vm.modalType).toBe('blob');
+    });
+
+    it('sets modalType to tree when new directory is clicked', () => {
+      vm.$el.querySelectorAll('a')[1].click();
+
+      expect(vm.modalType).toBe('tree');
+    });
+
+    it('opens modal when link is clicked', (done) => {
+      vm.$el.querySelectorAll('a')[0].click();
+
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.modal')).not.toBeNull();
+
+        done();
+      });
+    });
+  });
+
+  describe('toggleModalOpen', () => {
+    it('closes modal after toggling', (done) => {
+      vm.toggleModalOpen();
+
+      Vue.nextTick()
+        .then(() => {
+          expect(vm.$el.querySelector('.modal')).not.toBeNull();
+        })
+        .then(vm.toggleModalOpen)
+        .then(() => {
+          expect(vm.$el.querySelector('.modal')).toBeNull();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});
diff --git a/spec/javascripts/repo/components/new_dropdown/modal_spec.js b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
new file mode 100644
index 00000000000..4be92e9d944
--- /dev/null
+++ b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
@@ -0,0 +1,180 @@
+import Vue from 'vue';
+import RepoStore from '~/repo/stores/repo_store';
+import RepoHelper from '~/repo/helpers/repo_helper';
+import modal from '~/repo/components/new_dropdown/modal.vue';
+import createComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('new file modal component', () => {
+  const Component = Vue.extend(modal);
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+
+    RepoStore.files = [];
+    RepoStore.openedFiles = [];
+    RepoStore.setViewToPreview();
+  });
+
+  ['tree', 'blob'].forEach((type) => {
+    describe(type, () => {
+      beforeEach(() => {
+        vm = createComponent(Component, {
+          type,
+        });
+      });
+
+      it(`sets modal title as ${type}`, () => {
+        const title = type === 'tree' ? 'directory' : 'file';
+
+        expect(vm.$el.querySelector('.modal-title').textContent.trim()).toBe(`Create new ${title}`);
+      });
+
+      it(`sets button label as ${type}`, () => {
+        const title = type === 'tree' ? 'directory' : 'file';
+
+        expect(vm.$el.querySelector('.btn-success').textContent.trim()).toBe(`Create ${title}`);
+      });
+
+      it(`sets form label as ${type}`, () => {
+        const title = type === 'tree' ? 'Directory' : 'File';
+
+        expect(vm.$el.querySelector('.label-light').textContent.trim()).toBe(`${title} name`);
+      });
+
+      it('emits toggle event after creating file', () => {
+        spyOn(vm, '$emit');
+
+        vm.entryName = 'testing';
+        vm.$el.querySelector('.btn-success').click();
+
+        expect(vm.$emit).toHaveBeenCalledWith('toggle');
+      });
+
+      it('sets editMode to true', () => {
+        vm.entryName = 'testing';
+        vm.$el.querySelector('.btn-success').click();
+
+        expect(RepoStore.editMode).toBeTruthy();
+      });
+
+      it('toggles blob view', () => {
+        vm.entryName = 'testing';
+        vm.$el.querySelector('.btn-success').click();
+
+        expect(RepoStore.isPreviewView()).toBeFalsy();
+      });
+
+      it('adds file into activeFiles', () => {
+        vm.entryName = 'testing';
+        vm.$el.querySelector('.btn-success').click();
+
+        expect(RepoStore.openedFiles.length).toBe(1);
+      });
+    });
+  });
+
+  describe('file', () => {
+    beforeEach(() => {
+      vm = createComponent(Component, {
+        type: 'blob',
+      });
+    });
+
+    it('creates new file', () => {
+      vm.entryName = 'testing';
+      vm.$el.querySelector('.btn-success').click();
+
+      expect(RepoStore.files.length).toBe(1);
+      expect(RepoStore.files[0].name).toBe('testing');
+      expect(RepoStore.files[0].type).toBe('blob');
+      expect(RepoStore.files[0].tempFile).toBeTruthy();
+    });
+
+    it('does not create temp file when file already exists', () => {
+      RepoStore.files.push(RepoHelper.serializeRepoEntity('blob', {
+        name: 'testing',
+      }));
+
+      vm.entryName = 'testing';
+      vm.$el.querySelector('.btn-success').click();
+
+      expect(RepoStore.files.length).toBe(1);
+      expect(RepoStore.files[0].name).toBe('testing');
+      expect(RepoStore.files[0].type).toBe('blob');
+      expect(RepoStore.files[0].tempFile).toBeUndefined();
+    });
+  });
+
+  describe('tree', () => {
+    beforeEach(() => {
+      vm = createComponent(Component, {
+        type: 'tree',
+      });
+    });
+
+    it('creates new tree', () => {
+      vm.entryName = 'testing';
+      vm.$el.querySelector('.btn-success').click();
+
+      expect(RepoStore.files.length).toBe(1);
+      expect(RepoStore.files[0].name).toBe('testing');
+      expect(RepoStore.files[0].type).toBe('tree');
+      expect(RepoStore.files[0].tempFile).toBeTruthy();
+      expect(RepoStore.files[0].files.length).toBe(1);
+      expect(RepoStore.files[0].files[0].name).toBe('.gitkeep');
+    });
+
+    it('creates multiple trees when entryName has slashes', () => {
+      vm.entryName = 'app/test';
+      vm.$el.querySelector('.btn-success').click();
+
+      expect(RepoStore.files.length).toBe(1);
+      expect(RepoStore.files[0].name).toBe('app');
+      expect(RepoStore.files[0].files[0].name).toBe('test');
+      expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
+    });
+
+    it('creates tree in existing tree', () => {
+      RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
+        name: 'app',
+      }));
+
+      vm.entryName = 'app/test';
+      vm.$el.querySelector('.btn-success').click();
+
+      expect(RepoStore.files.length).toBe(1);
+      expect(RepoStore.files[0].name).toBe('app');
+      expect(RepoStore.files[0].tempFile).toBeUndefined();
+      expect(RepoStore.files[0].files[0].tempFile).toBeTruthy();
+      expect(RepoStore.files[0].files[0].name).toBe('test');
+      expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
+    });
+
+    it('does not create new tree when already exists', () => {
+      RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
+        name: 'app',
+      }));
+
+      vm.entryName = 'app';
+      vm.$el.querySelector('.btn-success').click();
+
+      expect(RepoStore.files.length).toBe(1);
+      expect(RepoStore.files[0].name).toBe('app');
+      expect(RepoStore.files[0].tempFile).toBeUndefined();
+      expect(RepoStore.files[0].files.length).toBe(0);
+    });
+  });
+
+  it('focuses field on mount', () => {
+    document.body.innerHTML += '<div class="js-test"></div>';
+
+    vm = createComponent(Component, {
+      type: 'tree',
+    }, '.js-test');
+
+    expect(document.activeElement).toBe(vm.$refs.fieldName);
+
+    vm.$el.remove();
+  });
+});
-- 
cgit v1.2.1


From 10dcaea1c3e9061d8f65d3ec15becbd17c7b2716 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 19 Oct 2017 11:55:27 +0100
Subject: failing spec fixes

---
 .../repo/components/new_dropdown/modal.vue         |  4 +-
 .../javascripts/repo/components/repo_editor.vue    | 43 +++++++++-------------
 app/assets/javascripts/repo/helpers/repo_helper.js |  2 +-
 .../javascripts/repo/services/repo_service.js      | 10 ++++-
 app/assets/javascripts/repo/stores/repo_store.js   |  2 +-
 .../repo/components/repo_file_buttons_spec.js      | 28 ++++++--------
 6 files changed, 42 insertions(+), 47 deletions(-)

diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
index 51f74b06bae..ff13b3072bb 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
@@ -13,7 +13,7 @@
     },
     data() {
       return {
-        entryName: '',
+        entryName: RepoStore.path !== '' ? `${RepoStore.path}/` : '',
       };
     },
     components: {
@@ -30,6 +30,8 @@
           const dirNames = this.entryName.split('/');
 
           dirNames.forEach((dirName) => {
+            if (dirName === '') return;
+
             tree = RepoHelper.findOrCreateEntry('tree', tree, dirName).entry;
           });
         }
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index 9f567d4e94d..df4caba51d8 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -16,35 +16,28 @@ const RepoEditor = {
   },
 
   mounted() {
-    if (!this.activeFile.tempFile) {
-      Service.getRaw(this.activeFile.raw_path)
-        .then((rawResponse) => {
-          Store.blobRaw = rawResponse.data;
-          Store.activeFile.plain = rawResponse.data;
-
-          this.createMonacoInstance();
-        })
-        .catch(Helper.loadingError);
-    } else {
-      this.createMonacoInstance();
-    }
-  },
+    Service.getRaw(this.activeFile)
+      .then((rawResponse) => {
+        Store.blobRaw = rawResponse.data;
+        Store.activeFile.plain = rawResponse.data;
+
+        const monacoInstance = Helper.monaco.editor.create(this.$el, {
+          model: null,
+          readOnly: false,
+          contextmenu: true,
+          scrollBeyondLastLine: false,
+        });
 
-  methods: {
-    createMonacoInstance() {
-      const monacoInstance = Helper.monaco.editor.create(this.$el, {
-        model: null,
-        readOnly: false,
-        contextmenu: true,
-        scrollBeyondLastLine: false,
-      });
+        Helper.monacoInstance = monacoInstance;
 
-      Helper.monacoInstance = monacoInstance;
+        this.addMonacoEvents();
 
-      this.addMonacoEvents();
+        this.setupEditor();
+      })
+      .catch(Helper.loadingError);
+  },
 
-      this.setupEditor();
-    },
+  methods: {
     setupEditor() {
       this.showHide();
 
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index cc9bab2bb6a..09573e6e707 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -110,7 +110,7 @@ const RepoHelper = {
           RepoHelper.setBinaryDataAsBase64(data);
           Store.setViewToPreview();
         } else if (!Store.isPreviewView() && !data.render_error) {
-          Service.getRaw(data.raw_path)
+          Service.getRaw(data)
           .then((rawResponse) => {
             Store.blobRaw = rawResponse.data;
             data.plain = rawResponse.data;
diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js
index d68d71a4629..de8a2ecaa1d 100644
--- a/app/assets/javascripts/repo/services/repo_service.js
+++ b/app/assets/javascripts/repo/services/repo_service.js
@@ -12,8 +12,14 @@ const RepoService = {
   },
   richExtensionRegExp: /md/,
 
-  getRaw(url) {
-    return axios.get(url, {
+  getRaw(file) {
+    if (file.tempFile) {
+      return Promise.resolve({
+        data: '',
+      });
+    }
+
+    return axios.get(file.raw_path, {
       // Stop Axios from parsing a JSON file into a JS object
       transformResponse: [res => res],
     });
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index 530c725ceb6..4978af07067 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -77,7 +77,7 @@ const RepoStore = {
     } else if (file.newContent || file.plain) {
       RepoStore.blobRaw = file.newContent || file.plain;
     } else if (!file.tempFile) {
-      Service.getRaw(file.raw_path)
+      Service.getRaw(file)
         .then((rawResponse) => {
           RepoStore.blobRaw = rawResponse.data;
           Helper.findOpenedFileFromActive().plain = rawResponse.data;
diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js
index 701c260224f..bc5cb5b8f38 100644
--- a/spec/javascripts/repo/components/repo_file_buttons_spec.js
+++ b/spec/javascripts/repo/components/repo_file_buttons_spec.js
@@ -2,7 +2,16 @@ import Vue from 'vue';
 import repoFileButtons from '~/repo/components/repo_file_buttons.vue';
 import RepoStore from '~/repo/stores/repo_store';
 
-describe('RepoFileButtons', () => {
+fdescribe('RepoFileButtons', () => {
+  const activeFile = {
+    extension: 'md',
+    url: 'url',
+    raw_path: 'raw_path',
+    blame_path: 'blame_path',
+    commits_path: 'commits_path',
+    permalink: 'permalink',
+  };
+
   function createComponent() {
     const RepoFileButtons = Vue.extend(repoFileButtons);
 
@@ -14,14 +23,6 @@ describe('RepoFileButtons', () => {
   });
 
   it('renders Raw, Blame, History, Permalink and Preview toggle', () => {
-    const activeFile = {
-      extension: 'md',
-      url: 'url',
-      raw_path: 'raw_path',
-      blame_path: 'blame_path',
-      commits_path: 'commits_path',
-      permalink: 'permalink',
-    };
     const activeFileLabel = 'activeFileLabel';
     RepoStore.openedFiles = new Array(1);
     RepoStore.activeFile = activeFile;
@@ -46,10 +47,6 @@ describe('RepoFileButtons', () => {
   });
 
   it('triggers rawPreviewToggle on preview click', () => {
-    const activeFile = {
-      extension: 'md',
-      url: 'url',
-    };
     RepoStore.openedFiles = new Array(1);
     RepoStore.activeFile = activeFile;
     RepoStore.editMode = true;
@@ -65,10 +62,7 @@ describe('RepoFileButtons', () => {
   });
 
   it('does not render preview toggle if not canPreview', () => {
-    const activeFile = {
-      extension: 'abcd',
-      url: 'url',
-    };
+    activeFile.extension = 'js';
     RepoStore.openedFiles = new Array(1);
     RepoStore.activeFile = activeFile;
 
-- 
cgit v1.2.1


From 60ce5155c8e0804b71c55d1492d7812133673fa2 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 19 Oct 2017 16:24:00 +0100
Subject: fixed bug with tabs not switching correctly

clears all tmp files after cancelling edit mode
---
 .../repo/components/new_dropdown/modal.vue         | 19 +++++++++++++----
 app/assets/javascripts/repo/components/repo.vue    |  3 +++
 .../repo/components/repo_commit_section.vue        |  4 +++-
 app/assets/javascripts/repo/helpers/repo_helper.js | 24 ++++++++++++++++++++--
 app/assets/javascripts/repo/stores/repo_store.js   | 14 ++++++++-----
 app/controllers/projects/blob_controller.rb        |  1 +
 .../repo/components/repo_file_buttons_spec.js      |  2 +-
 7 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
index ff13b3072bb..6c869580962 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
@@ -21,13 +21,22 @@
     },
     methods: {
       createEntryInStore() {
-        if (this.entryName === '') return;
+        const originalPath = RepoStore.path;
+        let entryName = this.entryName;
 
-        const fileName = this.type === 'tree' ? '.gitkeep' : this.entryName;
+        if (entryName.indexOf(`${RepoStore.path}/`) !== 0) {
+          RepoStore.path = '';
+        } else {
+          entryName = entryName.replace(`${RepoStore.path}/`, '');
+        }
+
+        if (entryName === '') return;
+
+        const fileName = this.type === 'tree' ? '.gitkeep' : entryName;
         let tree = RepoStore;
 
         if (this.type === 'tree') {
-          const dirNames = this.entryName.split('/');
+          const dirNames = entryName.split('/');
 
           dirNames.forEach((dirName) => {
             if (dirName === '') return;
@@ -43,11 +52,13 @@
             RepoHelper.setFile(file.entry, file.entry);
 
             RepoStore.editMode = true;
-            RepoStore.toggleBlobView();
+            RepoStore.currentBlobView = 'repo-editor';
           }
         }
 
         this.toggleModalOpen();
+
+        RepoStore.path = originalPath;
       },
       toggleModalOpen() {
         this.$emit('toggle');
diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index 0a89a9f16cb..cdcd8e15495 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -37,6 +37,9 @@ export default {
     dialogSubmitted(status) {
       this.toggleDialogOpen(false);
       this.dialog.status = status;
+
+      // remove tmp files
+      Helper.removeAllTmpFiles();
     },
 
     toggleBlobView: Store.toggleBlobView,
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index e3003fbf477..0d6259a37a8 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/components/repo_commit_section.vue
@@ -62,7 +62,6 @@ export default {
       if (newBranch) {
         payload.start_branch = this.currentBranch;
       }
-      this.submitCommitsLoading = true;
       Service.commitFiles(payload)
         .then(() => {
           this.resetCommitState();
@@ -78,6 +77,8 @@ export default {
     },
 
     tryCommit(e, skipBranchCheck = false, newBranch = false) {
+      this.submitCommitsLoading = true;
+
       if (skipBranchCheck) {
         this.makeCommit(newBranch);
       } else {
@@ -90,6 +91,7 @@ export default {
             this.makeCommit(newBranch);
           })
           .catch(() => {
+            this.submitCommitsLoading = false;
             Flash('An error occurred while committing your changes');
           });
       }
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index 09573e6e707..c30bd6fa0c1 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -62,6 +62,7 @@ const RepoHelper = {
     });
 
     RepoHelper.updateHistoryEntry(tree.url, title);
+    Store.path = tree.path;
   },
 
   setDirectoryToClosed(entry) {
@@ -157,7 +158,18 @@ const RepoHelper = {
   },
 
   serializeRepoEntity(type, entity, level = 0) {
-    const { id, url, name, icon, last_commit, tree_url, path, tempFile, opened = false } = entity;
+    const {
+      id,
+      url,
+      name,
+      icon,
+      last_commit,
+      tree_url,
+      path,
+      tempFile,
+      active,
+      opened,
+    } = entity;
 
     return {
       id,
@@ -172,6 +184,7 @@ const RepoHelper = {
       files: [],
       loading: false,
       opened,
+      active,
       // eslint-disable-next-line camelcase
       lastCommit: last_commit ? {
         url: `${Store.projectUrl}/commit/${last_commit.id}`,
@@ -215,7 +228,7 @@ const RepoHelper = {
   },
 
   findOpenedFileFromActive() {
-    return Store.openedFiles.find(openedFile => Store.activeFile.url === openedFile.url);
+    return Store.openedFiles.find(openedFile => Store.activeFile.id === openedFile.id);
   },
 
   getFileFromPath(path) {
@@ -232,11 +245,13 @@ const RepoHelper = {
 
     if (!foundEntry) {
       foundEntry = RepoHelper.serializeRepoEntity(type, {
+        id: name,
         name,
         path: tree.path ? `${tree.path}/${name}` : name,
         icon: type === 'tree' ? 'folder' : 'file-text-o',
         tempFile: true,
         opened: true,
+        active: true,
       }, tree.level !== undefined ? tree.level + 1 : 0);
 
       exists = false;
@@ -248,6 +263,11 @@ const RepoHelper = {
       exists,
     };
   },
+
+  removeAllTmpFiles() {
+    Store.openedFiles = Store.openedFiles.filter(f => !f.tempFile);
+    Store.files = Store.files.filter(f => !f.tempFile);
+  },
 };
 
 export default RepoHelper;
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index 4978af07067..cdf5b00a817 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -76,7 +76,7 @@ const RepoStore = {
       RepoStore.blobRaw = file.base64;
     } else if (file.newContent || file.plain) {
       RepoStore.blobRaw = file.newContent || file.plain;
-    } else if (!file.tempFile) {
+    } else {
       Service.getRaw(file)
         .then((rawResponse) => {
           RepoStore.blobRaw = rawResponse.data;
@@ -84,14 +84,16 @@ const RepoStore = {
         }).catch(Helper.loadingError);
     }
 
-    if (!file.loading) Helper.updateHistoryEntry(file.url, file.pageTitle || file.name);
+    if (!file.loading && !file.tempFile) {
+      Helper.updateHistoryEntry(file.url, file.pageTitle || file.name);
+    }
     RepoStore.binary = file.binary;
     RepoStore.setActiveLine(-1);
   },
 
   setFileActivity(file, openedFile, i) {
     const activeFile = openedFile;
-    activeFile.active = file.url === activeFile.url;
+    activeFile.active = file.id === activeFile.id;
 
     if (activeFile.active) RepoStore.setActiveFile(activeFile, i);
 
@@ -99,7 +101,7 @@ const RepoStore = {
   },
 
   setActiveFile(activeFile, i) {
-    RepoStore.activeFile = Object.assign({}, RepoStore.activeFile, activeFile);
+    RepoStore.activeFile = Object.assign({}, Helper.getDefaultActiveFile(), activeFile);
     RepoStore.activeFileIndex = i;
   },
 
@@ -175,7 +177,7 @@ const RepoStore = {
   // getters
 
   isActiveFile(file) {
-    return file && file.url === RepoStore.activeFile.url;
+    return file && file.id === RepoStore.activeFile.id;
   },
 
   isPreviewView() {
@@ -183,4 +185,6 @@ const RepoStore = {
   },
 };
 
+window.RepoStore = RepoStore;
+
 export default RepoStore;
diff --git a/app/controllers/projects/blob_controller.rb b/app/controllers/projects/blob_controller.rb
index 183a6f88a6a..770381472c5 100644
--- a/app/controllers/projects/blob_controller.rb
+++ b/app/controllers/projects/blob_controller.rb
@@ -205,6 +205,7 @@ class Projects::BlobController < Projects::ApplicationController
     tree_path = path_segments.join('/')
 
     render json: json.merge(
+      id: @blob.id,
       path: blob.path,
       name: blob.name,
       extension: blob.extension,
diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js
index bc5cb5b8f38..063186be42d 100644
--- a/spec/javascripts/repo/components/repo_file_buttons_spec.js
+++ b/spec/javascripts/repo/components/repo_file_buttons_spec.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import repoFileButtons from '~/repo/components/repo_file_buttons.vue';
 import RepoStore from '~/repo/stores/repo_store';
 
-fdescribe('RepoFileButtons', () => {
+describe('RepoFileButtons', () => {
   const activeFile = {
     extension: 'md',
     url: 'url',
-- 
cgit v1.2.1


From 4c186f99f2ce72dfe3cd3e64b84b5ea5761f1657 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 19 Oct 2017 18:41:52 +0100
Subject: fixed failing title test

---
 app/assets/javascripts/repo/helpers/repo_helper.js | 1 +
 spec/javascripts/repo/components/repo_file_spec.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index c30bd6fa0c1..8b73a1020a0 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -8,6 +8,7 @@ const RepoHelper = {
 
   getDefaultActiveFile() {
     return {
+      id: '',
       active: true,
       binary: false,
       extension: '',
diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js
index 107f6797f8a..8403df9be64 100644
--- a/spec/javascripts/repo/components/repo_file_spec.js
+++ b/spec/javascripts/repo/components/repo_file_spec.js
@@ -7,6 +7,7 @@ import { file } from '../mock_data';
 describe('RepoFile', () => {
   const updated = 'updated';
   const otherFile = {
+    id: 'test',
     html: '<p class="file-content">html</p>',
     pageTitle: 'otherpageTitle',
   };
-- 
cgit v1.2.1


From 4699cf77b6a0f5261ae382ac1a55882424efe4fb Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 20 Oct 2017 10:47:45 +0100
Subject: added feature spec

---
 app/assets/javascripts/repo/helpers/repo_helper.js | 11 ++++--
 app/controllers/projects/tree_controller.rb        |  1 -
 .../projects/tree/create_directory_spec.rb         | 43 ++++++++++++++++++++++
 spec/features/projects/tree/create_file_spec.rb    | 40 ++++++++++++++++++++
 .../repo/components/new_dropdown/modal_spec.js     | 16 ++++++++
 5 files changed, 107 insertions(+), 4 deletions(-)
 create mode 100644 spec/features/projects/tree/create_directory_spec.rb
 create mode 100644 spec/features/projects/tree/create_file_spec.rb

diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index 8b73a1020a0..9e53ffe9a6f 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -98,8 +98,8 @@ const RepoHelper = {
     .then((response) => {
       const data = response.data;
       if (response.headers && response.headers['page-title']) data.pageTitle = decodeURI(response.headers['page-title']);
-      if (response.headers && response.headers['is-root'] && !Store.isInitialRoot) {
-        Store.isRoot = convertPermissionToBoolean(response.headers['is-root']);
+      if (data.path && !Store.isInitialRoot) {
+        Store.isRoot = data.path === '/';
         Store.isInitialRoot = Store.isRoot;
       }
 
@@ -140,6 +140,10 @@ const RepoHelper = {
 
   addToDirectory(file, data) {
     const tree = file || Store;
+
+    // TODO: Figure out why `popstate` is being trigger in the specs
+    if (!tree.files) return;
+
     const files = tree.files.concat(this.dataToListOfFiles(data, file ? file.level + 1 : 0));
 
     tree.files = files;
@@ -236,7 +240,8 @@ const RepoHelper = {
     return Store.openedFiles.find(file => file.url === path);
   },
 
-  loadingError() {
+  loadingError(e) {
+    console.log(e);
     Flash('Unable to load this content at this time.');
   },
 
diff --git a/app/controllers/projects/tree_controller.rb b/app/controllers/projects/tree_controller.rb
index 756f7e5df8c..f3719059f88 100644
--- a/app/controllers/projects/tree_controller.rb
+++ b/app/controllers/projects/tree_controller.rb
@@ -36,7 +36,6 @@ class Projects::TreeController < Projects::ApplicationController
 
       format.json do
         page_title @path.presence || _("Files"), @ref, @project.name_with_namespace
-        response.header['is-root'] = @path.empty?
 
         # n+1: https://gitlab.com/gitlab-org/gitlab-ce/issues/38261
         Gitlab::GitalyClient.allow_n_plus_1_calls do
diff --git a/spec/features/projects/tree/create_directory_spec.rb b/spec/features/projects/tree/create_directory_spec.rb
new file mode 100644
index 00000000000..4c1fa5a666e
--- /dev/null
+++ b/spec/features/projects/tree/create_directory_spec.rb
@@ -0,0 +1,43 @@
+require 'spec_helper'
+
+feature 'Multi-file editor new directory', :js do
+  include WaitForRequests
+
+  let(:user) { create(:user) }
+  let(:project) { create(:project, :repository) }
+
+  before do
+    project.add_master(user)
+    sign_in(user)
+
+    page.driver.set_cookie('new_repo', 'true')
+
+    visit project_tree_path(project, :master)
+
+    wait_for_requests
+  end
+
+  it 'creates directory in current directory' do
+    find('.add-to-tree').click
+
+    click_link('New directory')
+
+    page.within('.popup-dialog') do
+      find('.form-control').set('foldername')
+
+      click_button('Create directory')
+    end
+
+    fill_in('commit-message', with: 'commit message')
+
+    click_button('Commit 1 file')
+
+    expect(page).to have_content('Your changes have been committed')
+    expect(page).to have_selector('td', text: 'commit message')
+
+    click_link('foldername')
+
+    expect(page).to have_selector('td', text: 'commit message', count: 2)
+    expect(page).to have_selector('td', text: '.gitkeep')
+  end
+end
diff --git a/spec/features/projects/tree/create_file_spec.rb b/spec/features/projects/tree/create_file_spec.rb
new file mode 100644
index 00000000000..a67ec891e7c
--- /dev/null
+++ b/spec/features/projects/tree/create_file_spec.rb
@@ -0,0 +1,40 @@
+require 'spec_helper'
+
+feature 'Multi-file editor new file', :js do
+  include WaitForRequests
+
+  let(:user) { create(:user) }
+  let(:project) { create(:project, :repository) }
+
+  before do
+    project.add_master(user)
+    sign_in(user)
+
+    page.driver.set_cookie('new_repo', 'true')
+
+    visit project_tree_path(project, :master)
+
+    wait_for_requests
+  end
+
+  it 'creates file in current directory' do
+    find('.add-to-tree').click
+
+    click_link('New file')
+
+    page.within('.popup-dialog') do
+      find('.form-control').set('filename')
+
+      click_button('Create file')
+    end
+
+    find('.inputarea').send_keys('file content')
+
+    fill_in('commit-message', with: 'commit message')
+
+    click_button('Commit 1 file')
+
+    expect(page).to have_content('Your changes have been committed')
+    expect(page).to have_selector('td', text: 'commit message')
+  end
+end
diff --git a/spec/javascripts/repo/components/new_dropdown/modal_spec.js b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
index 4be92e9d944..671dca93a09 100644
--- a/spec/javascripts/repo/components/new_dropdown/modal_spec.js
+++ b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
@@ -71,6 +71,22 @@ describe('new file modal component', () => {
 
         expect(RepoStore.openedFiles.length).toBe(1);
       });
+
+      it(`creates ${type} in the current stores path`, () => {
+        RepoStore.path = 'testing';
+        vm.entryName = 'testing/app';
+
+        vm.$el.querySelector('.btn-success').click();
+
+        expect(RepoStore.files[0].path).toBe('testing/app');
+        expect(RepoStore.files[0].name).toBe('app');
+
+        if (type === 'tree') {
+          expect(RepoStore.files[0].files.length).toBe(1);
+        }
+
+        RepoStore.path = '';
+      });
     });
   });
 
-- 
cgit v1.2.1


From 5f988a726ecef14dc6def18883f6808e01f59535 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 20 Oct 2017 13:00:47 +0100
Subject: fixed eslint :see_no_evil:

---
 app/assets/javascripts/repo/helpers/repo_helper.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index 9e53ffe9a6f..6f62bde4964 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -1,4 +1,3 @@
-import { convertPermissionToBoolean } from '../../lib/utils/common_utils';
 import Service from '../services/repo_service';
 import Store from '../stores/repo_store';
 import Flash from '../../flash';
@@ -240,8 +239,7 @@ const RepoHelper = {
     return Store.openedFiles.find(file => file.url === path);
   },
 
-  loadingError(e) {
-    console.log(e);
+  loadingError() {
     Flash('Unable to load this content at this time.');
   },
 
-- 
cgit v1.2.1


From fe1871b58ccf140572ba54ce3284e132add05a58 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 23 Oct 2017 12:09:47 +0100
Subject: moved to eventHub to manage creating new files removed an ID from the
 CSS

---
 .../repo/components/new_dropdown/index.vue         | 16 ++++++++
 .../repo/components/new_dropdown/modal.vue         | 48 ++++------------------
 app/assets/javascripts/repo/components/repo.vue    |  3 +-
 .../repo/components/repo_file_buttons.vue          |  2 +-
 app/assets/javascripts/repo/helpers/repo_helper.js | 48 ++++++++++++++++++++--
 app/assets/javascripts/repo/stores/repo_store.js   |  2 -
 app/assets/stylesheets/pages/repo.scss             |  2 +-
 7 files changed, 71 insertions(+), 50 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..9cf6b46b112 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/index.vue
@@ -1,4 +1,7 @@
 <script>
+  import RepoHelper from '../../helpers/repo_helper';
+  import RepoStore from '../../stores/repo_store';
+  import eventHub from '../../event_hub';
   import newModal from './modal.vue';
 
   export default {
@@ -9,6 +12,7 @@
       return {
         openModal: false,
         modalType: '',
+        currentPath: RepoStore.path,
       };
     },
     methods: {
@@ -19,6 +23,17 @@
       toggleModalOpen() {
         this.openModal = !this.openModal;
       },
+      createNewEntryInStore(name, type) {
+        RepoHelper.createNewEntry(name, type);
+
+        this.toggleModalOpen();
+      },
+    },
+    created() {
+      eventHub.$on('createNewEntry', this.createNewEntryInStore);
+    },
+    beforeDestroy() {
+      eventHub.$off('createNewEntry', this.createNewEntryInStore);
     },
   };
 </script>
@@ -64,6 +79,7 @@
     <new-modal
       v-if="openModal"
       :type="modalType"
+      :current-path="currentPath"
       @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 6c869580962..5ef629e0dde 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
@@ -1,11 +1,14 @@
 <script>
   import { __ } from '../../../locale';
   import popupDialog from '../../../vue_shared/components/popup_dialog.vue';
-  import RepoStore from '../../stores/repo_store';
-  import RepoHelper from '../../helpers/repo_helper';
+  import eventHub from '../../event_hub';
 
   export default {
     props: {
+      currentPath: {
+        type: String,
+        required: true,
+      },
       type: {
         type: String,
         required: true,
@@ -13,7 +16,7 @@
     },
     data() {
       return {
-        entryName: RepoStore.path !== '' ? `${RepoStore.path}/` : '',
+        entryName: this.currentPath !== '' ? `${this.currentPath}/` : '',
       };
     },
     components: {
@@ -21,44 +24,7 @@
     },
     methods: {
       createEntryInStore() {
-        const originalPath = RepoStore.path;
-        let entryName = this.entryName;
-
-        if (entryName.indexOf(`${RepoStore.path}/`) !== 0) {
-          RepoStore.path = '';
-        } else {
-          entryName = entryName.replace(`${RepoStore.path}/`, '');
-        }
-
-        if (entryName === '') return;
-
-        const fileName = this.type === 'tree' ? '.gitkeep' : entryName;
-        let tree = RepoStore;
-
-        if (this.type === 'tree') {
-          const dirNames = entryName.split('/');
-
-          dirNames.forEach((dirName) => {
-            if (dirName === '') return;
-
-            tree = RepoHelper.findOrCreateEntry('tree', tree, dirName).entry;
-          });
-        }
-
-        if ((this.type === 'tree' && tree.tempFile) || this.type === 'blob') {
-          const file = RepoHelper.findOrCreateEntry('blob', tree, fileName);
-
-          if (!file.exists) {
-            RepoHelper.setFile(file.entry, file.entry);
-
-            RepoStore.editMode = true;
-            RepoStore.currentBlobView = 'repo-editor';
-          }
-        }
-
-        this.toggleModalOpen();
-
-        RepoStore.path = originalPath;
+        eventHub.$emit('createNewEntry', this.entryName, this.type);
       },
       toggleModalOpen() {
         this.$emit('toggle');
diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index cdcd8e15495..6ab98a33d15 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -39,7 +39,8 @@ export default {
       this.dialog.status = status;
 
       // remove tmp files
-      Helper.removeAllTmpFiles();
+      Helper.removeAllTmpFiles('openedFiles');
+      Helper.removeAllTmpFiles('files');
     },
 
     toggleBlobView: Store.toggleBlobView,
diff --git a/app/assets/javascripts/repo/components/repo_file_buttons.vue b/app/assets/javascripts/repo/components/repo_file_buttons.vue
index 354be2545f4..c98f641c853 100644
--- a/app/assets/javascripts/repo/components/repo_file_buttons.vue
+++ b/app/assets/javascripts/repo/components/repo_file_buttons.vue
@@ -37,7 +37,7 @@ export default RepoFileButtons;
 <template>
   <div
     v-if="showButtons"
-    id="repo-file-buttons"
+    class="repo-file-buttons"
   >
     <a
       :href="activeFile.raw_path"
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index 6f62bde4964..fb26f3b7380 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -242,7 +242,13 @@ const RepoHelper = {
   loadingError() {
     Flash('Unable to load this content at this time.');
   },
-
+  openEditMode() {
+    Store.editMode = true;
+    Store.currentBlobView = 'repo-editor';
+  },
+  updateStorePath(path) {
+    Store.path = path;
+  },
   findOrCreateEntry(type, tree, name) {
     let exists = true;
     let foundEntry = tree.files.find(dir => dir.type === type && dir.name === name);
@@ -267,10 +273,44 @@ const RepoHelper = {
       exists,
     };
   },
+  removeAllTmpFiles(storeFilesKey) {
+    Store[storeFilesKey] = Store[storeFilesKey].filter(f => !f.tempFile);
+  },
+  createNewEntry(name, type) {
+    const originalPath = Store.path;
+    let entryName = name;
+
+    if (entryName.indexOf(`${originalPath}/`) !== 0) {
+      this.updateStorePath('');
+    } else {
+      entryName = entryName.replace(`${originalPath}/`, '');
+    }
+
+    if (entryName === '') return;
+
+    const fileName = type === 'tree' ? '.gitkeep' : entryName;
+    let tree = Store;
+
+    if (type === 'tree') {
+      const dirNames = entryName.split('/');
+
+      dirNames.forEach((dirName) => {
+        if (dirName === '') return;
+
+        tree = this.findOrCreateEntry('tree', tree, dirName).entry;
+      });
+    }
+
+    if ((type === 'tree' && tree.tempFile) || type === 'blob') {
+      const file = this.findOrCreateEntry('blob', tree, fileName);
+
+      if (!file.exists) {
+        this.setFile(file.entry, file.entry);
+        this.openEditMode();
+      }
+    }
 
-  removeAllTmpFiles() {
-    Store.openedFiles = Store.openedFiles.filter(f => !f.tempFile);
-    Store.files = Store.files.filter(f => !f.tempFile);
+    this.updateStorePath(originalPath);
   },
 };
 
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index cdf5b00a817..1214419f553 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -185,6 +185,4 @@ const RepoStore = {
   },
 };
 
-window.RepoStore = RepoStore;
-
 export default RepoStore;
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 97ca01f0f54..6a363b1710e 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -201,7 +201,7 @@
       }
     }
 
-    #repo-file-buttons {
+    .repo-file-buttons {
       background-color: $white-light;
       padding: 5px 10px;
       border-top: 1px solid $white-normal;
-- 
cgit v1.2.1


From 133e66d22d7b4ea26af17eb50a69e09f4210f737 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 23 Oct 2017 13:12:05 +0100
Subject: spec fixes

---
 .../repo/components/new_dropdown/index.vue         |   2 +-
 .../repo/components/new_dropdown/index_spec.js     | 128 +++++++++++++++++
 .../repo/components/new_dropdown/modal_spec.js     | 154 +++------------------
 .../repo/components/repo_file_buttons_spec.js      |   1 -
 4 files changed, 146 insertions(+), 139 deletions(-)

diff --git a/app/assets/javascripts/repo/components/new_dropdown/index.vue b/app/assets/javascripts/repo/components/new_dropdown/index.vue
index 9cf6b46b112..3ccb50213ab 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/index.vue
@@ -1,6 +1,6 @@
 <script>
-  import RepoHelper from '../../helpers/repo_helper';
   import RepoStore from '../../stores/repo_store';
+  import RepoHelper from '../../helpers/repo_helper';
   import eventHub from '../../event_hub';
   import newModal from './modal.vue';
 
diff --git a/spec/javascripts/repo/components/new_dropdown/index_spec.js b/spec/javascripts/repo/components/new_dropdown/index_spec.js
index 884d065718b..ddbfdab582d 100644
--- a/spec/javascripts/repo/components/new_dropdown/index_spec.js
+++ b/spec/javascripts/repo/components/new_dropdown/index_spec.js
@@ -1,5 +1,8 @@
 import Vue from 'vue';
 import newDropdown from '~/repo/components/new_dropdown/index.vue';
+import RepoStore from '~/repo/stores/repo_store';
+import RepoHelper from '~/repo/helpers/repo_helper';
+import eventHub from '~/repo/event_hub';
 import createComponent from '../../../helpers/vue_mount_component_helper';
 
 describe('new dropdown component', () => {
@@ -13,6 +16,10 @@ describe('new dropdown component', () => {
 
   afterEach(() => {
     vm.$destroy();
+
+    RepoStore.files = [];
+    RepoStore.openedFiles = [];
+    RepoStore.setViewToPreview();
   });
 
   it('renders new file and new directory links', () => {
@@ -60,4 +67,125 @@ describe('new dropdown component', () => {
         .catch(done.fail);
     });
   });
+
+  describe('createEntryInStore', () => {
+    ['tree', 'blob'].forEach((type) => {
+      describe(type, () => {
+        it('closes modal after creating file', () => {
+          vm.openModal = true;
+
+          eventHub.$emit('createNewEntry', 'testing', type);
+
+          expect(vm.openModal).toBeFalsy();
+        });
+
+        it('sets editMode to true', () => {
+          eventHub.$emit('createNewEntry', 'testing', type);
+
+          expect(RepoStore.editMode).toBeTruthy();
+        });
+
+        it('toggles blob view', () => {
+          eventHub.$emit('createNewEntry', 'testing', type);
+
+          expect(RepoStore.isPreviewView()).toBeFalsy();
+        });
+
+        it('adds file into activeFiles', () => {
+          eventHub.$emit('createNewEntry', 'testing', type);
+
+          expect(RepoStore.openedFiles.length).toBe(1);
+        });
+
+        it(`creates ${type} in the current stores path`, () => {
+          RepoStore.path = 'testing';
+
+          eventHub.$emit('createNewEntry', 'testing/app', type);
+
+          expect(RepoStore.files[0].path).toBe('testing/app');
+          expect(RepoStore.files[0].name).toBe('app');
+
+          if (type === 'tree') {
+            expect(RepoStore.files[0].files.length).toBe(1);
+          }
+
+          RepoStore.path = '';
+        });
+      });
+    });
+
+    describe('file', () => {
+      it('creates new file', () => {
+        eventHub.$emit('createNewEntry', 'testing', 'blob');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('testing');
+        expect(RepoStore.files[0].type).toBe('blob');
+        expect(RepoStore.files[0].tempFile).toBeTruthy();
+      });
+
+      it('does not create temp file when file already exists', () => {
+        RepoStore.files.push(RepoHelper.serializeRepoEntity('blob', {
+          name: 'testing',
+        }));
+
+        eventHub.$emit('createNewEntry', 'testing', 'blob');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('testing');
+        expect(RepoStore.files[0].type).toBe('blob');
+        expect(RepoStore.files[0].tempFile).toBeUndefined();
+      });
+    });
+
+    describe('tree', () => {
+      it('creates new tree', () => {
+        eventHub.$emit('createNewEntry', 'testing', 'tree');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('testing');
+        expect(RepoStore.files[0].type).toBe('tree');
+        expect(RepoStore.files[0].tempFile).toBeTruthy();
+        expect(RepoStore.files[0].files.length).toBe(1);
+        expect(RepoStore.files[0].files[0].name).toBe('.gitkeep');
+      });
+
+      it('creates multiple trees when entryName has slashes', () => {
+        eventHub.$emit('createNewEntry', 'app/test', 'tree');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('app');
+        expect(RepoStore.files[0].files[0].name).toBe('test');
+        expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
+      });
+
+      it('creates tree in existing tree', () => {
+        RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
+          name: 'app',
+        }));
+
+        eventHub.$emit('createNewEntry', 'app/test', 'tree');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('app');
+        expect(RepoStore.files[0].tempFile).toBeUndefined();
+        expect(RepoStore.files[0].files[0].tempFile).toBeTruthy();
+        expect(RepoStore.files[0].files[0].name).toBe('test');
+        expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
+      });
+
+      it('does not create new tree when already exists', () => {
+        RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
+          name: 'app',
+        }));
+
+        eventHub.$emit('createNewEntry', 'app', 'tree');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('app');
+        expect(RepoStore.files[0].tempFile).toBeUndefined();
+        expect(RepoStore.files[0].files.length).toBe(0);
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/repo/components/new_dropdown/modal_spec.js b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
index 671dca93a09..4c5cdc47c6e 100644
--- a/spec/javascripts/repo/components/new_dropdown/modal_spec.js
+++ b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import RepoStore from '~/repo/stores/repo_store';
-import RepoHelper from '~/repo/helpers/repo_helper';
 import modal from '~/repo/components/new_dropdown/modal.vue';
+import eventHub from '~/repo/event_hub';
 import createComponent from '../../../helpers/vue_mount_component_helper';
 
 describe('new file modal component', () => {
@@ -21,6 +21,7 @@ describe('new file modal component', () => {
       beforeEach(() => {
         vm = createComponent(Component, {
           type,
+          currentPath: RepoStore.path,
         });
       });
 
@@ -41,156 +42,35 @@ describe('new file modal component', () => {
 
         expect(vm.$el.querySelector('.label-light').textContent.trim()).toBe(`${title} name`);
       });
-
-      it('emits toggle event after creating file', () => {
-        spyOn(vm, '$emit');
-
-        vm.entryName = 'testing';
-        vm.$el.querySelector('.btn-success').click();
-
-        expect(vm.$emit).toHaveBeenCalledWith('toggle');
-      });
-
-      it('sets editMode to true', () => {
-        vm.entryName = 'testing';
-        vm.$el.querySelector('.btn-success').click();
-
-        expect(RepoStore.editMode).toBeTruthy();
-      });
-
-      it('toggles blob view', () => {
-        vm.entryName = 'testing';
-        vm.$el.querySelector('.btn-success').click();
-
-        expect(RepoStore.isPreviewView()).toBeFalsy();
-      });
-
-      it('adds file into activeFiles', () => {
-        vm.entryName = 'testing';
-        vm.$el.querySelector('.btn-success').click();
-
-        expect(RepoStore.openedFiles.length).toBe(1);
-      });
-
-      it(`creates ${type} in the current stores path`, () => {
-        RepoStore.path = 'testing';
-        vm.entryName = 'testing/app';
-
-        vm.$el.querySelector('.btn-success').click();
-
-        expect(RepoStore.files[0].path).toBe('testing/app');
-        expect(RepoStore.files[0].name).toBe('app');
-
-        if (type === 'tree') {
-          expect(RepoStore.files[0].files.length).toBe(1);
-        }
-
-        RepoStore.path = '';
-      });
     });
   });
 
-  describe('file', () => {
-    beforeEach(() => {
-      vm = createComponent(Component, {
-        type: 'blob',
-      });
-    });
-
-    it('creates new file', () => {
-      vm.entryName = 'testing';
-      vm.$el.querySelector('.btn-success').click();
-
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('testing');
-      expect(RepoStore.files[0].type).toBe('blob');
-      expect(RepoStore.files[0].tempFile).toBeTruthy();
-    });
+  it('focuses field on mount', () => {
+    document.body.innerHTML += '<div class="js-test"></div>';
 
-    it('does not create temp file when file already exists', () => {
-      RepoStore.files.push(RepoHelper.serializeRepoEntity('blob', {
-        name: 'testing',
-      }));
+    vm = createComponent(Component, {
+      type: 'tree',
+      currentPath: RepoStore.path,
+    }, '.js-test');
 
-      vm.entryName = 'testing';
-      vm.$el.querySelector('.btn-success').click();
+    expect(document.activeElement).toBe(vm.$refs.fieldName);
 
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('testing');
-      expect(RepoStore.files[0].type).toBe('blob');
-      expect(RepoStore.files[0].tempFile).toBeUndefined();
-    });
+    vm.$el.remove();
   });
 
-  describe('tree', () => {
-    beforeEach(() => {
+  describe('createEntryInStore', () => {
+    it('emits createNewEntry event', () => {
+      spyOn(eventHub, '$emit');
+
       vm = createComponent(Component, {
         type: 'tree',
+        currentPath: RepoStore.path,
       });
-    });
-
-    it('creates new tree', () => {
       vm.entryName = 'testing';
-      vm.$el.querySelector('.btn-success').click();
-
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('testing');
-      expect(RepoStore.files[0].type).toBe('tree');
-      expect(RepoStore.files[0].tempFile).toBeTruthy();
-      expect(RepoStore.files[0].files.length).toBe(1);
-      expect(RepoStore.files[0].files[0].name).toBe('.gitkeep');
-    });
 
-    it('creates multiple trees when entryName has slashes', () => {
-      vm.entryName = 'app/test';
-      vm.$el.querySelector('.btn-success').click();
+      vm.createEntryInStore();
 
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('app');
-      expect(RepoStore.files[0].files[0].name).toBe('test');
-      expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
+      expect(eventHub.$emit).toHaveBeenCalledWith('createNewEntry', 'testing', 'tree');
     });
-
-    it('creates tree in existing tree', () => {
-      RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
-        name: 'app',
-      }));
-
-      vm.entryName = 'app/test';
-      vm.$el.querySelector('.btn-success').click();
-
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('app');
-      expect(RepoStore.files[0].tempFile).toBeUndefined();
-      expect(RepoStore.files[0].files[0].tempFile).toBeTruthy();
-      expect(RepoStore.files[0].files[0].name).toBe('test');
-      expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
-    });
-
-    it('does not create new tree when already exists', () => {
-      RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
-        name: 'app',
-      }));
-
-      vm.entryName = 'app';
-      vm.$el.querySelector('.btn-success').click();
-
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('app');
-      expect(RepoStore.files[0].tempFile).toBeUndefined();
-      expect(RepoStore.files[0].files.length).toBe(0);
-    });
-  });
-
-  it('focuses field on mount', () => {
-    document.body.innerHTML += '<div class="js-test"></div>';
-
-    vm = createComponent(Component, {
-      type: 'tree',
-    }, '.js-test');
-
-    expect(document.activeElement).toBe(vm.$refs.fieldName);
-
-    vm.$el.remove();
   });
 });
diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js
index 063186be42d..111c83ee50d 100644
--- a/spec/javascripts/repo/components/repo_file_buttons_spec.js
+++ b/spec/javascripts/repo/components/repo_file_buttons_spec.js
@@ -35,7 +35,6 @@ describe('RepoFileButtons', () => {
     const blame = vm.$el.querySelector('.blame');
     const history = vm.$el.querySelector('.history');
 
-    expect(vm.$el.id).toEqual('repo-file-buttons');
     expect(raw.href).toMatch(`/${activeFile.raw_path}`);
     expect(raw.textContent.trim()).toEqual('Raw');
     expect(blame.href).toMatch(`/${activeFile.blame_path}`);
-- 
cgit v1.2.1