fixed some state bugs with the tabs

[ci skip]

app/assets/javascripts/repo/components/new_dropdown/index.vue

 <script>
-  import { mapState } from 'vuex';
   import newModal from './modal.vue';
 
   export default {
@@ -12,11 +11,6 @@
         modalType: '',
       };
     },
-    computed: {
-      ...mapState({
-        currentPath: 'path',
-      }),
-    },
     methods: {
       createNewItem(type) {
         this.modalType = type;
@@ -70,7 +64,6 @@
     <new-modal
       v-if="openModal"
       :type="modalType"
-      :current-path="currentPath"
       @toggle="toggleModalOpen"
     />
   </div>

app/assets/javascripts/repo/components/new_dropdown/modal.vue

 <script>
-  import { mapActions } from 'vuex';
+  import { mapActions, mapState } from 'vuex';
   import { __ } from '../../../locale';
   import popupDialog from '../../../vue_shared/components/popup_dialog.vue';
 
   export default {
     props: {
-      currentPath: {
-        type: String,
-        required: true,
-      },
       type: {
         type: String,
         required: true,
@@ -16,7 +12,7 @@
     },
     data() {
       return {
-        entryName: this.currentPath !== '' ? `${this.currentPath}/` : '',
+        entryName: '',
       };
     },
     components: {
@@ -39,6 +35,17 @@
       },
     },
     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');
@@ -88,7 +95,7 @@
           <input
             type="text"
             class="form-control"
-            v-model="entryName"
+            v-model="name"
             ref="fieldName"
           />
         </div>

app/assets/javascripts/repo/components/repo_editor.vue

@@ -51,6 +51,8 @@ export default {
         .catch(() => flash('Error setting up monaco. Please try again.'));
     },
     setupEditor() {
+      if (!this.activeFile) return;
+
       const foundLang = this.languages.find(lang =>
         lang.extensions && lang.extensions.indexOf(this.activeFileExtension) === 0,
       );
@@ -71,7 +73,7 @@ export default {
   },
   watch: {
     activeFile(oldVal, newVal) {
-      if (newVal.active) {
+      if (!newVal.active) {
         this.initMonaco();
       }
     },

app/assets/javascripts/repo/components/repo_file_buttons.vue

@@ -52,13 +52,5 @@ export default {
         Permalink
       </a>
     </div>
-
-    <!-- <a
-      v-if="canPreview"
-      href="#"
-      @click.prevent="rawPreviewToggle"
-      class="btn btn-default preview">
-      {{activeFileLabel}}
-    </a> -->
   </div>
 </template>

app/assets/javascripts/repo/components/repo_tab.vue

@@ -11,7 +11,7 @@ export default {
 
   computed: {
     closeLabel() {
-      if (this.tab.changed) {
+      if (this.tab.changed || this.tab.tempFile) {
         return `${this.tab.name} changed`;
       }
       return `Close ${this.tab.name}`;
@@ -42,7 +42,7 @@ export default {
     <button
       type="button"
       class="close-btn"
-      @click.stop.prevent="closeFile(tab)"
+      @click.stop.prevent="closeFile({ file: tab })"
       :aria-label="closeLabel">
       <i
         class="fa"
@@ -55,7 +55,7 @@ export default {
       href="#"
       class="repo-tab"
       :title="tab.url"
-      @click.prevent="setFileActive(tab)">
+      @click.prevent.stop="setFileActive(tab)">
       {{tab.name}}
     </a>
   </li>

app/assets/javascripts/repo/stores/actions.js

@@ -10,14 +10,22 @@ export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DAT
 
 export const closeDiscardPopup = ({ commit }) => commit(types.TOGGLE_DISCARD_POPUP, false);
 
-export const discardAllChanges = ({ commit, getters }) => {
+export const discardAllChanges = ({ state, commit, getters, dispatch }) => {
+  if (state.editMode) return;
+
   const changedFiles = getters.changedFiles;
 
-  changedFiles.forEach(file => commit(types.DISCARD_FILE_CHANGES, file));
+  changedFiles.forEach((file) => {
+    commit(types.DISCARD_FILE_CHANGES, file);
+
+    if (file.tempFile) {
+      dispatch('closeFile', { file, force: true });
+    }
+  });
 };
 
 export const closeAllFiles = ({ state, dispatch }) => {
-  state.openFiles.forEach(file => dispatch('closeFile', file));
+  state.openFiles.forEach(file => dispatch('closeFile', { file }));
 };
 
 export const toggleEditMode = ({ commit, getters, dispatch }, force = false) => {

app/assets/javascripts/repo/stores/actions/file.js

+import { normalizeHeaders } from '../../../lib/utils/common_utils';
 import flash from '../../../flash';
 import service from '../../services';
 import * as types from '../mutation_types';
 import {
+  pushState,
+  setPageTitle,
   createTemp,
   findIndexOfFile,
 } from '../utils';
 
-export const closeFile = ({ commit, state, dispatch }, file) => {
-  if (file.changed || file.tempFile) return;
+export const closeFile = ({ commit, state, dispatch }, { file, force = false }) => {
+  if ((file.changed || file.tempFile) && !force) return;
 
   const indexOfClosedFile = findIndexOfFile(state.openFiles, file);
   const fileWasActive = file.active;
@@ -20,12 +23,16 @@ export const closeFile = ({ commit, state, dispatch }, file) => {
     const nextFileToOpen = state.openFiles[nextIndexToOpen];
 
     dispatch('setFileActive', nextFileToOpen);
+  } else if (!state.openFiles.length) {
+    pushState(file.parentTreeUrl);
   }
 };
 
 export const setFileActive = ({ commit, state, getters, dispatch }, file) => {
   const currentActiveFile = getters.activeFile;
 
+  if (file.active) return;
+
   if (currentActiveFile) {
     commit(types.SET_FILE_ACTIVE, { file: currentActiveFile, active: false });
   }
@@ -34,17 +41,24 @@ export const setFileActive = ({ commit, state, getters, dispatch }, file) => {
   dispatch('scrollToTab');
 };
 
-export const getFileData = ({ commit, dispatch }, file) => {
+export const getFileData = ({ state, commit, dispatch }, file) => {
   commit(types.TOGGLE_LOADING, file);
 
   service.getFileData(file.url)
-    .then(res => res.json())
+    .then((res) => {
+      const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']);
+
+      setPageTitle(pageTitle);
+
+      return res.json();
+    })
     .then((data) => {
       commit(types.SET_FILE_DATA, { data, file });
-      commit(types.SET_PREVIEW_MODE);
       commit(types.TOGGLE_FILE_OPEN, file);
       dispatch('setFileActive', file);
       commit(types.TOGGLE_LOADING, file);
+
+      pushState(file.url);
     })
     .catch(() => {
       commit(types.TOGGLE_LOADING, file);

app/assets/javascripts/repo/stores/actions/tree.js

@@ -93,6 +93,7 @@ export const createTempTree = ({ state, commit, dispatch }, name) => {
         parent: tree,
         tmpEntry,
       });
+      commit(types.TOGGLE_TREE_OPEN, tmpEntry);
 
       tree = tmpEntry;
     } else {

app/assets/javascripts/repo/stores/state.js

@@ -14,7 +14,7 @@ export default {
   onTopOfBranch: false,
   editMode: false,
   loading: false,
-  currentBlobView: '',
+  currentBlobView: 'repo-preview',
   discardPopupOpen: false,
   tree: [],
   openFiles: [],

app/views/shared/repo/_repo.html.haml

 #repo{ data: { root: @path.empty?.to_s,
-               root_url: project_tree_path(@project),
+               root_url: project_tree_path(project),
                url: content_url,
                ref: @commit.id,
                project_name: project.name,
-               refs_url: refs_project_path(project, format: :json),
                project_url: project_path(project),
                project_id: project.id,
-               blob_url: namespace_project_blob_path(project.namespace, project, '{{branch}}'),
                new_merge_request_url: namespace_project_new_merge_request_path(project.namespace, project, merge_request: { source_branch: '' }),
                can_commit: (!!can_push_branch?(project, @ref)).to_s,
                on_top_of_branch: (!!on_top_of_branch?(project, @ref)).to_s,