moved to eventHub to manage creating new files

removed an ID from the CSS

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;