Many Repo Fixes

app/assets/javascripts/api.js

@@ -97,7 +97,6 @@ const Api = {
   },
   commitMultiple(id, data, callback) {
-    // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
     const url = Api.buildUrl(Api.commitPath)
       .replace(':id', id);
     return $.ajax({

app/assets/javascripts/project.js

@@ -126,7 +126,7 @@ import Cookies from 'js-cookie';
               var $form = $dropdown.closest('form');
               var $visit = $dropdown.data('visit');
-              var shouldVisit = typeof $visit === 'undefined' ? true : $visit;
+              var shouldVisit = $visit ? true : $visit;
               var action = $form.attr('action');
               var divider = action.indexOf('?') === -1 ? '?' : '&';
               if (shouldVisit) {

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

@@ -14,13 +14,13 @@ export default {
   data: () => Store,
   mixins: [RepoMixin],
   components: {
-    'repo-sidebar': RepoSidebar,
-    'repo-tabs': RepoTabs,
-    'repo-file-buttons': RepoFileButtons,
+    RepoSidebar,
+    RepoTabs,
+    RepoFileButtons,
     'repo-editor': MonacoLoaderHelper.repoEditorLoader,
-    'repo-commit-section': RepoCommitSection,
-    'popup-dialog': PopupDialog,
-    'repo-preview': RepoPreview,
+    RepoCommitSection,
+    PopupDialog,
+    RepoPreview,
   },
   mounted() {
@@ -28,12 +28,12 @@ export default {
   },
   methods: {
-    dialogToggled(toggle) {
+    toggleDialogOpen(toggle) {
       this.dialog.open = toggle;
     },
     dialogSubmitted(status) {
-      this.dialog.open = false;
+      this.toggleDialogOpen(false);
       this.dialog.status = status;
     },
@@ -43,21 +43,25 @@ export default {
 </script>
 <template>
-<div class="repository-view tree-content-holder">
-  <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}">
-    <repo-tabs/>
-    <component :is="currentBlobView" class="blob-viewer-container"></component>
-    <repo-file-buttons/>
+  <div class="repository-view tree-content-holder">
+    <repo-sidebar/><div v-if="isMini"
+    class="panel-right"
+    :class="{'edit-mode': editMode}">
+      <repo-tabs/>
+      <component
+        :is="currentBlobView"
+        class="blob-viewer-container"/>
+      <repo-file-buttons/>
+    </div>
+    <repo-commit-section/>
+    <popup-dialog
+      v-show="dialog.open"
+      :primary-button-label="__('Discard changes')"
+      kind="warning"
+      :title="__('Are you sure?')"
+      :body="__('Are you sure you want to discard your changes?')"
+      @toggle="toggleDialogOpen"
+      @submit="dialogSubmitted"
+    />
   </div>
-  <repo-commit-section/>
-  <popup-dialog
-    :primary-button-label="__('Discard changes')"
-    :open="dialog.open"
-    kind="warning"
-    :title="__('Are you sure?')"
-    :body="__('Are you sure you want to discard your changes?')"
-    @toggle="dialogToggled"
-    @submit="dialogSubmitted"
-  />
-</div>
 </template>

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

@@ -2,7 +2,6 @@
 /* global Flash */
 import Store from '../stores/repo_store';
 import RepoMixin from '../mixins/repo_mixin';
-import Helper from '../helpers/repo_helper';
 import Service from '../services/repo_service';
 export default {
@@ -11,9 +10,12 @@ export default {
   mixins: [RepoMixin],
   computed: {
+    showCommitable() {
+      return this.isCommitable && this.changedFiles.length;
+    },
+
     branchPaths() {
-      const branch = Helper.getBranch();
-      return this.changedFiles.map(f => Helper.getFilePathFromFullPath(f.url, branch));
+      return this.changedFiles.map(f => f.path);
     },
     cantCommitYet() {
@@ -28,11 +30,10 @@ export default {
   methods: {
     makeCommit() {
       // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
-      const branch = Helper.getBranch();
       const commitMessage = this.commitMessage;
       const actions = this.changedFiles.map(f => ({
         action: 'update',
-        file_path: Helper.getFilePathFromFullPath(f.url, branch),
+        file_path: f.path,
         content: f.newContent,
       }));
       const payload = {
@@ -47,49 +48,80 @@ export default {
     resetCommitState() {
       this.submitCommitsLoading = false;
       this.changedFiles = [];
-      this.openedFiles = [];
       this.commitMessage = '';
       this.editMode = false;
-      $('html, body').animate({ scrollTop: 0 }, 'fast');
+      window.scrollTo(0, 0);
     },
   },
 };
 </script>
 <template>
-<div id="commit-area" v-if="isCommitable && changedFiles.length" >
-  <form class="form-horizontal">
+<div
+  v-if="showCommitable"
+  id="commit-area">
+  <form
+    class="form-horizontal"
+    @submit.prevent="makeCommit">
     <fieldset>
       <div class="form-group">
-        <label class="col-md-4 control-label staged-files">Staged files ({{changedFiles.length}})</label>
-        <div class="col-md-4">
+        <label class="col-md-4 control-label staged-files">
+          Staged files ({{changedFiles.length}})
+        </label>
+        <div class="col-md-6">
           <ul class="list-unstyled changed-files">
-            <li v-for="file in branchPaths" :key="file.id">
-              <span class="help-block">{{file}}</span>
+            <li
+              v-for="branchPath in branchPaths"
+              :key="branchPath">
+              <span class="help-block">
+                {{branchPath}}
+              </span>
             </li>
           </ul>
         </div>
       </div>
-      <!-- Textarea
-      -->
       <div class="form-group">
-        <label class="col-md-4 control-label" for="commit-message">Commit message</label>
-        <div class="col-md-4">
-          <textarea class="form-control" id="commit-message" name="commit-message" v-model="commitMessage"></textarea>
+        <label
+          class="col-md-4 control-label"
+          for="commit-message">
+          Commit message
+        </label>
+        <div class="col-md-6">
+          <textarea
+            id="commit-message"
+            class="form-control"
+            name="commit-message"
+            v-model="commitMessage">
+          </textarea>
         </div>
       </div>
-      <!-- Button Drop Down
-      -->
       <div class="form-group target-branch">
-        <label class="col-md-4 control-label" for="target-branch">Target branch</label>
-        <div class="col-md-4">
-          <span class="help-block">{{targetBranch}}</span>
+        <label
+          class="col-md-4 control-label"
+          for="target-branch">
+          Target branch
+        </label>
+        <div class="col-md-6">
+          <span class="help-block">
+            {{targetBranch}}
+          </span>
         </div>
       </div>
-      <div class="col-md-offset-4 col-md-4">
-        <button type="submit" :disabled="cantCommitYet" class="btn btn-success submit-commit" @click.prevent="makeCommit">
-          <i class="fa fa-spinner fa-spin" v-if="submitCommitsLoading"></i>
-          <span class="commit-summary">Commit {{changedFiles.length}} {{filePluralize}}</span>
+      <div class="col-md-offset-4 col-md-6">
+        <button
+          ref="submitCommit"
+          type="submit"
+          :disabled="cantCommitYet"
+          class="btn btn-success">
+          <i
+            v-if="submitCommitsLoading"
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true"
+            aria-label="loading">
+          </i>
+          <span class="commit-summary">
+            Commit {{changedFiles.length}} {{filePluralize}}
+          </span>
         </button>
       </div>
     </fieldset>

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

@@ -10,12 +10,15 @@ export default {
       return this.editMode ? this.__('Cancel edit') : this.__('Edit');
     },
-    buttonIcon() {
-      return this.editMode ? [] : ['fa', 'fa-pencil'];
+    showButton() {
+      return this.isCommitable &&
+        !this.activeFile.render_error &&
+        !this.binary &&
+        this.openedFiles.length;
     },
   },
   methods: {
-    editClicked() {
+    editCancelClicked() {
       if (this.changedFiles.length) {
         this.dialog.open = true;
         return;
@@ -24,15 +27,11 @@ export default {
       Store.toggleBlobView();
     },
     toggleProjectRefsForm() {
-      if (this.editMode) {
-        $('.project-refs-form').addClass('disabled-content');
-        $('.project-refs-target-form').show();
-      } else {
-        $('.project-refs-form').removeClass('disabled-content');
-        $('.project-refs-target-form').hide();
-      }
+      $('.project-refs-form').toggleClass('disabled', this.editMode);
+      $('.js-tree-ref-target-holder').toggle(this.editMode);
     },
   },
+
   watch: {
     editMode() {
       this.toggleProjectRefsForm();
@@ -42,8 +41,18 @@ export default {
 </script>
 <template>
-<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable && !activeFile.render_error" :disabled="binary">
-  <i :class="buttonIcon"></i>
-  <span>{{buttonLabel}}</span>
+<button
+  v-if="showButton"
+  class="btn btn-default"
+  type="button"
+  @click.prevent="editCancelClicked">
+  <i
+    v-if="!editMode"
+    class="fa fa-pencil"
+    aria-hidden="true">
+  </i>
+  <span>
+    {{buttonLabel}}
+  </span>
 </button>
 </template>

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

@@ -8,68 +8,78 @@ const RepoEditor = {
   data: () => Store,
   destroyed() {
-    // this.monacoInstance.getModels().forEach((m) => {
-    //   m.dispose();
-    // });
-    this.monacoInstance.destroy();
+    if (Helper.monacoInstance) {
+      Helper.monacoInstance.destroy();
+    }
   },
   mounted() {
     Service.getRaw(this.activeFile.raw_path)
-    .then((rawResponse) => {
-      Store.blobRaw = rawResponse.data;
-      Helper.findOpenedFileFromActive().plain = rawResponse.data;
-      const monacoInstance = this.monaco.editor.create(this.$el, {
-        model: null,
-        readOnly: false,
-        contextmenu: false,
-      });
-      Store.monacoInstance = monacoInstance;
-      this.addMonacoEvents();
-      const languages = this.monaco.languages.getLanguages();
-      const languageID = Helper.getLanguageIDForFile(this.activeFile, languages);
-      const newModel = this.monaco.editor.createModel(this.blobRaw, languageID);
-
-      this.monacoInstance.setModel(newModel);
-    }).catch(Helper.loadingError);
+      .then((rawResponse) => {
+        Store.blobRaw = rawResponse.data;
+        Store.activeFile.plain = rawResponse.data;
+        const monacoInstance = Helper.monaco.editor.create(this.$el, {
+          model: null,
+          readOnly: false,
+          contextmenu: false,
+        });
+        Helper.monacoInstance = monacoInstance;
+        this.addMonacoEvents();
+        this.setupEditor();
+      })
+      .catch(Helper.loadingError);
   },
   methods: {
+    setupEditor() {
+      this.showHide();
+
+      Helper.setMonacoModelFromLanguage();
+    },
+
+    showHide() {
+      if (!this.openedFiles.length || (this.binary && !this.activeFile.raw)) {
+        this.$el.style.display = 'none';
+      } else {
+        this.$el.style.display = 'inline-block';
+      }
+    },
+
     addMonacoEvents() {
-      this.monacoInstance.onMouseUp(this.onMonacoEditorMouseUp);
-      this.monacoInstance.onKeyUp(this.onMonacoEditorKeysPressed.bind(this));
+      Helper.monacoInstance.onMouseUp(this.onMonacoEditorMouseUp);
+      Helper.monacoInstance.onKeyUp(this.onMonacoEditorKeysPressed.bind(this));
     },
     onMonacoEditorKeysPressed() {
-      Store.setActiveFileContents(this.monacoInstance.getValue());
+      Store.setActiveFileContents(Helper.monacoInstance.getValue());
     },
     onMonacoEditorMouseUp(e) {
+      if (!e.target.position) return;
       const lineNumber = e.target.position.lineNumber;
-      if (e.target.element.className === 'line-numbers') {
+      if (e.target.element.classList.contains('line-numbers')) {
         location.hash = `L${lineNumber}`;
         Store.activeLine = lineNumber;
+
+        Helper.monacoInstance.setPosition({
+          lineNumber: this.activeLine,
+          column: 1,
+        });
       }
     },
   },
   watch: {
-    activeLine() {
-      this.monacoInstance.setPosition({
-        lineNumber: this.activeLine,
-        column: 1,
-      });
-    },
     dialog: {
       handler(obj) {
         const newObj = obj;
         if (newObj.status) {
           newObj.status = false;
-          this.openedFiles.map((file) => {
+          this.openedFiles = this.openedFiles.map((file) => {
             const f = file;
             if (f.active) {
               this.blobRaw = f.plain;
@@ -80,21 +90,16 @@ const RepoEditor = {
             return f;
           });
           this.editMode = false;
+          Store.toggleBlobView();
         }
       },
       deep: true,
     },
     blobRaw() {
-      if (this.isTree) return;
-
-      this.monacoInstance.setModel(null);
-
-      const languages = this.monaco.languages.getLanguages();
-      const languageID = Helper.getLanguageIDForFile(this.activeFile, languages);
-      const newModel = this.monaco.editor.createModel(this.blobRaw, languageID);
-
-      this.monacoInstance.setModel(newModel);
+      if (Helper.monacoInstance && !this.isTree) {
+        this.setupEditor();
+      }
     },
   },
   computed: {

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

@@ -33,6 +33,26 @@ const RepoFile = {
     canShowFile() {
       return !this.loading.tree || this.hasFiles;
     },
+
+    fileIcon() {
+      const classObj = {
+        'fa-spinner fa-spin': this.file.loading,
+        [this.file.icon]: !this.file.loading,
+      };
+      return classObj;
+    },
+
+    fileIndentation() {
+      return {
+        'margin-left': `${this.file.level * 10}px`,
+      };
+    },
+
+    activeFileClass() {
+      return {
+        active: this.activeFile.url === this.file.url,
+      };
+    },
   },
   methods: {
@@ -46,21 +66,42 @@ export default RepoFile;
 </script>
 <template>
-<tr class="file" v-if="canShowFile" :class="{'active': activeFile.url === file.url}">
-  <td @click.prevent="linkClicked(file)">
-    <i class="fa file-icon" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
-    <i class="fa fa-spinner fa-spin" v-if="file.loading" :style="{'margin-left': file.level * 10 + 'px'}"></i>
-    <a :href="file.url" class="repo-file-name" :title="file.url">{{file.name}}</a>
+<tr
+  v-if="canShowFile"
+  class="file"
+  :class="activeFileClass"
+  @click.prevent="linkClicked(file)">
+  <td>
+    <i
+      class="fa fa-fw file-icon"
+      :class="fileIcon"
+      :style="fileIndentation"
+      aria-label="file icon">
+    </i>
+    <a
+      :href="file.url"
+      class="repo-file-name"
+      :title="file.url">
+      {{file.name}}
+    </a>
   </td>
-  <td v-if="!isMini" class="hidden-sm hidden-xs">
-    <div class="commit-message">
-      <a :href="file.lastCommitUrl">{{file.lastCommitMessage}}</a>
-    </div>
-  </td>
-  <td v-if="!isMini" class="hidden-xs">
-    <span class="commit-update" :title="tooltipTitle(file.lastCommitUpdate)">{{timeFormated(file.lastCommitUpdate)}}</span>
-  </td>
+  <template v-if="!isMini">
+    <td class="hidden-sm hidden-xs">
+      <div class="commit-message">
+        <a @click.stop :href="file.lastCommitUrl">
+          {{file.lastCommitMessage}}
+        </a>
+      </div>
+    </td>
+    <td class="hidden-xs">
+      <span
+        class="commit-update"
+        :title="tooltipTitle(file.lastCommitUpdate)">
+        {{timeFormated(file.lastCommitUpdate)}}
+      </span>
+    </td>
+  </template>
 </tr>
 </template>

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

@@ -15,7 +15,7 @@ const RepoFileButtons = {
     },
     canPreview() {
-      return Helper.isKindaBinary();
+      return Helper.isRenderable();
     },
   },
@@ -28,15 +28,42 @@ export default RepoFileButtons;
 </script>
 <template>
-<div id="repo-file-buttons" v-if="isMini">
-  <a :href="activeFile.raw_path" target="_blank" class="btn btn-default raw" rel="noopener noreferrer">{{rawDownloadButtonLabel}}</a>
-  <div class="btn-group" role="group" aria-label="File actions">
-    <a :href="activeFile.blame_path" class="btn btn-default blame">Blame</a>
-    <a :href="activeFile.commits_path" class="btn btn-default history">History</a>
-    <a :href="activeFile.permalink" class="btn btn-default permalink">Permalink</a>
-  </div>
-  <a href="#" v-if="canPreview" @click.prevent="rawPreviewToggle" class="btn btn-default preview">{{activeFileLabel}}</a>
-</div>
+  <div id="repo-file-buttons">
+    <a
+      :href="activeFile.raw_path"
+      target="_blank"
+      class="btn btn-default raw"
+      rel="noopener noreferrer">
+      {{rawDownloadButtonLabel}}
+    </a>
+    <div
+      class="btn-group"
+      role="group"
+      aria-label="File actions">
+      <a
+        :href="activeFile.blame_path"
+        class="btn btn-default blame">
+        Blame
+      </a>
+      <a
+        :href="activeFile.commits_path"
+        class="btn btn-default history">
+        History
+      </a>
+      <a
+        :href="activeFile.permalink"
+        class="btn btn-default permalink">
+        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_file_options.vue

@@ -17,7 +17,7 @@ export default RepoFileOptions;
 </script>
 <template>
-<tr v-if="isMini" class="repo-file-options">
+  <tr v-if="isMini" class="repo-file-options">
     <td>
       <span class="title">{{projectName}}</span>
     </td>

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

@@ -18,9 +18,15 @@ const RepoLoadingFile = {
     },
   },
+  computed: {
+    showGhostLines() {
+      return this.loading.tree && !this.hasFiles;
+    },
+  },
+
   methods: {
     lineOfCode(n) {
-      return `line-of-code-${n}`;
+      return `skeleton-line-${n}`;
     },
   },
 };
@@ -29,23 +35,42 @@ export default RepoLoadingFile;
 </script>
 <template>
-<tr v-if="loading.tree && !hasFiles" class="loading-file">
-  <td>
-    <div class="animation-container animation-container-small">
-      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
-    </div>
-  </td>
-  <td v-if="!isMini" class="hidden-sm hidden-xs">
-    <div class="animation-container">
-      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
-    </div>
-  </td>
-  <td v-if="!isMini" class="hidden-xs">
-    <div class="animation-container animation-container-small">
-      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
-    </div>
-  </td>
-</tr>
+  <tr
+    v-if="showGhostLines"
+    class="loading-file">
+    <td>
+      <div
+        class="animation-container animation-container-small">
+        <div
+          v-for="n in 6"
+          :key="n"
+          :class="lineOfCode(n)">
+        </div>
+      </div>
+    </td>
+    <td
+      v-if="!isMini"
+      class="hidden-sm hidden-xs">
+      <div class="animation-container">
+        <div
+          v-for="n in 6"
+          :key="n"
+          :class="lineOfCode(n)">
+        </div>
+      </div>
+    </td>
+    <td
+      v-if="!isMini"
+      class="hidden-xs">
+      <div class="animation-container animation-container-small">
+        <div
+          v-for="n in 6"
+          :key="n"
+          :class="lineOfCode(n)">
+        </div>
+      </div>
+    </td>
+  </tr>
 </template>

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

 <script>
+import RepoMixin from '../mixins/repo_mixin';
+
 const RepoPreviousDirectory = {
   props: {
     prevUrl: {
@@ -7,6 +9,14 @@ const RepoPreviousDirectory = {
     },
   },
+  mixins: [RepoMixin],
+
+  computed: {
+    colSpanCondition() {
+      return this.isMini ? undefined : 3;
+    },
+  },
+
   methods: {
     linkClicked(file) {
       this.$emit('linkclicked', file);
@@ -19,8 +29,10 @@ export default RepoPreviousDirectory;
 <template>
 <tr class="prev-directory">
-  <td colspan="3">
-    <a :href="prevUrl" @click.prevent="linkClicked(prevUrl)">..</a>
+  <td
+    :colspan="colSpanCondition"
+    @click.prevent="linkClicked(prevUrl)">
+    <a :href="prevUrl">..</a>
   </td>
 </tr>
 </template>

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

@@ -35,7 +35,7 @@ export default {
     fileClicked(clickedFile) {
       let file = clickedFile;
-
+      if (file.loading) return;
       file.loading = true;
       if (file.type === 'tree' && file.opened) {
         file = Store.removeChildFilesOfTree(file);

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

@@ -18,8 +18,8 @@ const RepoTab = {
     },
     changedClass() {
       const tabChangedObj = {
-        'fa-times': !this.tab.changed,
-        'fa-circle': this.tab.changed,
+        'fa-times close-icon': !this.tab.changed,
+        'fa-circle unsaved-icon': this.tab.changed,
       };
       return tabChangedObj;
     },
@@ -39,11 +39,11 @@ export default RepoTab;
 </script>
 <template>
-<li>
+<li @click="tabClicked(tab)">
   <a
     href="#0"
     class="close"
-    @click.prevent="closeTab(tab)"
+    @click.stop.prevent="closeTab(tab)"
     :aria-label="closeLabel">
     <i
       class="fa"

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

@@ -23,8 +23,7 @@ export default RepoTabs;
 </script>
 <template>
-<ul id="tabs"
-    v-if="isMini">
+<ul id="tabs">
   <repo-tab
     v-for="tab in openedFiles"
     :key="tab.id"

app/assets/javascripts/repo/helpers/monaco_loader_helper.js

 /* global monaco */
 import RepoEditor from '../components/repo_editor.vue';
 import Store from '../stores/repo_store';
+import Helper from '../helpers/repo_helper';
 import monacoLoader from '../monaco_loader';
 function repoEditorLoader() {
   Store.monacoLoading = true;
   return new Promise((resolve, reject) => {
     monacoLoader(['vs/editor/editor.main'], () => {
-      Store.monaco = monaco;
+      Helper.monaco = monaco;
       Store.monacoLoading = false;
       resolve(RepoEditor);
     }, () => {

app/assets/javascripts/repo/helpers/repo_helper.js

@@ -4,6 +4,8 @@ import Store from '../stores/repo_store';
 import '../../flash';
 const RepoHelper = {
+  monacoInstance: null,
+
   getDefaultActiveFile() {
     return {
       active: true,
@@ -37,10 +39,6 @@ const RepoHelper = {
     return fileName.split('.').pop();
   },
-  getBranch() {
-    return $('button.dropdown-menu-toggle').attr('data-ref');
-  },
-
   getLanguageIDForFile(file, langs) {
     const ext = RepoHelper.getFileExtension(file.name);
     const foundLang = RepoHelper.findLanguage(ext, langs);
@@ -48,8 +46,12 @@ const RepoHelper = {
     return foundLang ? foundLang.id : 'plaintext';
   },
-  getFilePathFromFullPath(fullPath, branch) {
-    return fullPath.split(`${Store.projectUrl}/blob/${branch}`)[1];
+  setMonacoModelFromLanguage() {
+    RepoHelper.monacoInstance.setModel(null);
+    const languages = RepoHelper.monaco.languages.getLanguages();
+    const languageID = RepoHelper.getLanguageIDForFile(Store.activeFile, languages);
+    const newModel = RepoHelper.monaco.editor.createModel(Store.blobRaw, languageID);
+    RepoHelper.monacoInstance.setModel(newModel);
   },
   findLanguage(ext, langs) {
@@ -66,7 +68,7 @@ const RepoHelper = {
     return file;
   },
-  isKindaBinary() {
+  isRenderable() {
     const okExts = ['md', 'svg'];
     return okExts.indexOf(Store.activeFile.extension) > -1;
   },
@@ -80,22 +82,8 @@ const RepoHelper = {
     .catch(RepoHelper.loadingError);
   },
-  toggleFakeTab(loading, file) {
-    if (loading) return Store.addPlaceholderFile();
-    return Store.removeFromOpenedFiles(file);
-  },
-
-  setLoading(loading, file) {
-    if (Service.url.indexOf('blob') > -1) {
-      Store.loading.blob = loading;
-      return RepoHelper.toggleFakeTab(loading, file);
-    }
-
-    if (Service.url.indexOf('tree') > -1) Store.loading.tree = loading;
-
-    return undefined;
-  },
-
+  // when you open a directory you need to put the directory files under
+  // the directory... This will merge the list of the current directory and the new list.
   getNewMergedList(inDirectory, currentList, newList) {
     const newListSorted = newList.sort(this.compareFilesCaseInsensitive);
     if (!inDirectory) return newListSorted;
@@ -104,6 +92,9 @@ const RepoHelper = {
     return RepoHelper.mergeNewListToOldList(newListSorted, currentList, inDirectory, indexOfFile);
   },
+  // within the get new merged list this does the merging of the current list of files
+  // and the new list of files. The files are never "in" another directory they just
+  // appear like they are because of the margin.
   mergeNewListToOldList(newList, oldList, inDirectory, indexOfFile) {
     newList.reverse().forEach((newFile) => {
       const fileIndex = indexOfFile + 1;
@@ -141,11 +132,9 @@ const RepoHelper = {
   getContent(treeOrFile) {
     let file = treeOrFile;
-    // const loadingData = RepoHelper.setLoading(true);
     return Service.getContent()
     .then((response) => {
       const data = response.data;
-      // RepoHelper.setLoading(false, loadingData);
       Store.isTree = RepoHelper.isTree(data);
       if (!Store.isTree) {
         if (!file) file = data;
@@ -246,36 +235,18 @@ const RepoHelper = {
   },
   dataToListOfFiles(data) {
-    const a = [];
-
-    // push in blobs
-    data.blobs.forEach((blob) => {
-      a.push(RepoHelper.serializeBlob(blob));
-    });
-
-    data.trees.forEach((tree) => {
-      a.push(RepoHelper.serializeTree(tree));
-    });
-
-    data.submodules.forEach((submodule) => {
-      a.push(RepoHelper.serializeSubmodule(submodule));
-    });
-
-    return a;
+    const { blobs, trees, submodules } = data;
+    return [
+      ...blobs.map(blob => RepoHelper.serializeBlob(blob)),
+      ...trees.map(tree => RepoHelper.serializeTree(tree)),
+      ...submodules.map(submodule => RepoHelper.serializeSubmodule(submodule)),
+    ];
   },
   genKey() {
     return RepoHelper.Time.now().toFixed(3);
   },
-  getStateKey() {
-    return RepoHelper.key;
-  },
-
-  setStateKey(key) {
-    RepoHelper.key = key;
-  },
-
   updateHistoryEntry(url, title) {
     const history = window.history;
@@ -293,7 +264,7 @@ const RepoHelper = {
   },
   loadingError() {
-    Flash('Unable to load the file at this time.');
+    Flash('Unable to load this content at this time.');
   },
 };

app/assets/javascripts/repo/index.js

@@ -33,6 +33,8 @@ function setInitialStore(data) {
   Store.projectId = data.projectId;
   Store.projectName = data.projectName;
   Store.projectUrl = data.projectUrl;
+  Store.canCommit = data.canCommit;
+  Store.onTopOfBranch = data.onTopOfBranch;
   Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref');
   Store.checkIsCommitable();
 }

app/assets/javascripts/repo/services/repo_service.js

@@ -13,16 +13,6 @@ const RepoService = {
   },
   richExtensionRegExp: /md/,
-  checkCurrentBranchIsCommitable() {
-    const url = Store.service.refsUrl;
-    return axios.get(url, {
-      params: {
-        ref: Store.currentBranch,
-        search: Store.currentBranch,
-      },
-    });
-  },
-
   getRaw(url) {
     return axios.get(url, {
       // Stop Axios from parsing a JSON file into a JS object
@@ -77,7 +67,11 @@ const RepoService = {
   commitFiles(payload, cb) {
     Api.commitMultiple(Store.projectId, payload, (data) => {
-      Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
+      if (data.short_id && data.stats) {
+        Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
+      } else {
+        Flash(data.message);
+      }
       cb();
     });
   },

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

@@ -5,8 +5,9 @@ import Service from '../services/repo_service';
 const RepoStore = {
   monaco: {},
   monacoLoading: false,
-  monacoInstance: {},
   service: '',
+  canCommit: false,
+  onTopOfBranch: false,
   editMode: false,
   isTree: false,
   isRoot: false,
@@ -52,14 +53,7 @@ const RepoStore = {
   // mutations
   checkIsCommitable() {
-    RepoStore.service.checkCurrentBranchIsCommitable()
-      .then((data) => {
-        // you shouldn't be able to make commits on commits or tags.
-        const { Branches, Commits, Tags } = data.data;
-        if (Branches && Branches.length) RepoStore.isCommitable = true;
-        if (Commits && Commits.length) RepoStore.isCommitable = false;
-        if (Tags && Tags.length) RepoStore.isCommitable = false;
-      }).catch(() => Flash('Failed to check if branch can be committed to.'));
+    RepoStore.isCommitable = RepoStore.onTopOfBranch && RepoStore.canCommit;
   },
   addFilesToDirectory(inDirectory, currentList, newList) {
@@ -117,15 +111,15 @@ const RepoStore = {
   removeChildFilesOfTree(tree) {
     let foundTree = false;
     const treeToClose = tree;
-    let wereDone = false;
+    let canStopSearching = false;
     RepoStore.files = RepoStore.files.filter((file) => {
       const isItTheTreeWeWant = file.url === treeToClose.url;
       // if it's the next tree
       if (foundTree && file.type === 'tree' && !isItTheTreeWeWant && file.level === treeToClose.level) {
-        wereDone = true;
+        canStopSearching = true;
         return true;
       }
-      if (wereDone) return true;
+      if (canStopSearching) return true;
       if (isItTheTreeWeWant) foundTree = true;
@@ -142,8 +136,8 @@ const RepoStore = {
     if (file.type === 'tree') return;
     let foundIndex;
     RepoStore.openedFiles = RepoStore.openedFiles.filter((openedFile, i) => {
-      if (openedFile.url === file.url) foundIndex = i;
-      return openedFile.url !== file.url;
+      if (openedFile.path === file.path) foundIndex = i;
+      return openedFile.path !== file.path;
     });
     // now activate the right tab based on what you closed.
@@ -157,36 +151,16 @@ const RepoStore = {
       return;
     }
-    if (foundIndex) {
-      if (foundIndex > 0) {
-        RepoStore.setActiveFiles(RepoStore.openedFiles[foundIndex - 1]);
-      }
+    if (foundIndex && foundIndex > 0) {
+      RepoStore.setActiveFiles(RepoStore.openedFiles[foundIndex - 1]);
     }
   },
-  addPlaceholderFile() {
-    const randomURL = Helper.Time.now();
-    const newFakeFile = {
-      active: false,
-      binary: true,
-      type: 'blob',
-      loading: true,
-      mime_type: 'loading',
-      name: 'loading',
-      url: randomURL,
-      fake: true,
-    };
-
-    RepoStore.openedFiles.push(newFakeFile);
-
-    return newFakeFile;
-  },
-
   addToOpenedFiles(file) {
     const openFile = file;
     const openedFilesAlreadyExists = RepoStore.openedFiles
-      .some(openedFile => openedFile.url === openFile.url);
+      .some(openedFile => openedFile.path === openFile.path);
     if (openedFilesAlreadyExists) return;

app/assets/javascripts/vue_shared/components/popup_dialog.vue

@@ -3,10 +3,6 @@ export default {
   name: 'popup-dialog',
   props: {
-    open: {
-      type: Boolean,
-      required: true,
-    },
     title: {
       type: String,
       required: true,
@@ -53,7 +49,6 @@ export default {
 <template>
 <div
   class="modal popup-dialog"
-  v-if="open"
   role="dialog"
   tabindex="-1">
   <div class="modal-dialog" role="document">