Merge branch 'ide' into 'master'

Add Multi-File Editor Using Monaco/VSCode

Closes #31890

See merge request !12198

.eslintrc

@@ -30,6 +30,7 @@
     "filenames/match-regex": [2, "^[a-z0-9_]+$"],
     "import/no-commonjs": "error",
     "no-multiple-empty-lines": ["error", { "max": 1 }],
-    "promise/catch-or-return": "error"
+    "promise/catch-or-return": "error",
+    "no-underscore-dangle": ["error", { "allow": ["__"]}]
   }
 }

app/assets/javascripts/api.js

@@ -13,6 +13,7 @@ const Api = {
   dockerfilePath: '/api/:version/templates/dockerfiles/:key',
   issuableTemplatePath: '/:namespace_path/:project_path/templates/:type/:key',
   usersPath: '/api/:version/users.json',
+  commitPath: '/api/:version/projects/:id/repository/commits',
 
   group(groupId, callback) {
     const url = Api.buildUrl(Api.groupPath)
@@ -95,6 +96,21 @@ const Api = {
       .done(projects => callback(projects));
   },
 
+  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({
+      url,
+      type: 'POST',
+      contentType: 'application/json; charset=utf-8',
+      data: JSON.stringify(data),
+      dataType: 'json',
+    })
+      .done(commitData => callback(commitData))
+      .fail(message => callback(message.responseJSON));
+  },
+
   // Return text for a specific license
   licenseText(key, data, callback) {
     const url = Api.buildUrl(Api.licensePath)

app/assets/javascripts/dispatcher.js

@@ -75,6 +75,7 @@ import initNotes from './init_notes';
 import initLegacyFilters from './init_legacy_filters';
 import initIssuableSidebar from './init_issuable_sidebar';
 import GpgBadges from './gpg_badges';
+import UserFeatureHelper from './helpers/user_feature_helper';
 
 (function() {
   var Dispatcher;
@@ -92,6 +93,7 @@ import GpgBadges from './gpg_badges';
       if (!page) {
         return false;
       }
+
       path = page.split(':');
       shortcut_handler = null;
 
@@ -338,12 +340,9 @@ import GpgBadges from './gpg_badges';
         case 'projects:show':
           shortcut_handler = new ShortcutsNavigation();
           new NotificationsForm();
-          if ($('#tree-slider').length) {
-            new TreeView();
-          }
-          if ($('.blob-viewer').length) {
-            new BlobViewer();
-          }
+
+          if ($('#tree-slider').length) new TreeView();
+          if ($('.blob-viewer').length) new BlobViewer();
           break;
         case 'projects:edit':
           setupProjectEdit();
@@ -407,6 +406,9 @@ import GpgBadges from './gpg_badges';
           break;
         case 'projects:tree:show':
           shortcut_handler = new ShortcutsNavigation();
+
+          if (UserFeatureHelper.isNewRepo()) break;
+
           new TreeView();
           new BlobViewer();
           new NewCommitForm($('.js-create-dir-form'));
@@ -425,6 +427,7 @@ import GpgBadges from './gpg_badges';
           shortcut_handler = true;
           break;
         case 'projects:blob:show':
+          if (UserFeatureHelper.isNewRepo()) break;
           new BlobViewer();
           initBlob();
           break;

app/assets/javascripts/gl_dropdown.js

-/* eslint-disable func-names, space-before-function-paren, no-var, one-var, one-var-declaration-per-line, prefer-rest-params, max-len, vars-on-top, wrap-iife, no-unused-vars, quotes, no-shadow, no-cond-assign, prefer-arrow-callback, no-return-assign, no-else-return, camelcase, comma-dangle, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, prefer-template, no-param-reassign, no-loop-func, no-mixed-operators */
+/* eslint-disable func-names, no-underscore-dangle, space-before-function-paren, no-var, one-var, one-var-declaration-per-line, prefer-rest-params, max-len, vars-on-top, wrap-iife, no-unused-vars, quotes, no-shadow, no-cond-assign, prefer-arrow-callback, no-return-assign, no-else-return, camelcase, comma-dangle, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, prefer-template, no-param-reassign, no-loop-func, no-mixed-operators */
 /* global fuzzaldrinPlus */
 import _ from 'underscore';
 import { isObject } from './lib/utils/type_utility';
 
-var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote;
+var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote, GitLabDropdownInput;
+
+GitLabDropdownInput = (function() {
+  function GitLabDropdownInput(input, options) {
+    var $inputContainer, $clearButton;
+    var _this = this;
+    this.input = input;
+    this.options = options;
+    this.fieldName = this.options.fieldName || 'field-name';
+    $inputContainer = this.input.parent();
+    $clearButton = $inputContainer.find('.js-dropdown-input-clear');
+    $clearButton.on('click', (function(_this) {
+      // Clear click
+      return function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        return _this.input.val('').trigger('input').focus();
+      };
+    })(this));
+
+    this.input
+    .on('keydown', function (e) {
+      var keyCode = e.which;
+      if (keyCode === 13 && !options.elIsInput) {
+        e.preventDefault();
+      }
+    })
+    .on('input', function(e) {
+      var val = e.currentTarget.value || _this.options.inputFieldName;
+      val = val.split(' ').join('-') // replaces space with dash
+        .replace(/[^a-zA-Z0-9 -]/g, '').toLowerCase() // replace non alphanumeric
+        .replace(/(-)\1+/g, '-'); // replace repeated dashes
+      _this.cb(_this.options.fieldName, val, {}, true);
+      _this.input.closest('.dropdown')
+        .find('.dropdown-toggle-text')
+        .text(val);
+    });
+  }
+
+  GitLabDropdownInput.prototype.onInput = function(cb) {
+    this.cb = cb;
+  };
+
+  return GitLabDropdownInput;
+})();
 
 GitLabDropdownFilter = (function() {
   var ARROW_KEY_CODES, BLUR_KEYCODES, HAS_VALUE_CLASS;
@@ -191,7 +235,7 @@ GitLabDropdownRemote = (function() {
 })();
 
 GitLabDropdown = (function() {
-  var ACTIVE_CLASS, FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, CURSOR_SELECT_SCROLL_PADDING, currentIndex;
+  var ACTIVE_CLASS, FILTER_INPUT, NO_FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, CURSOR_SELECT_SCROLL_PADDING, currentIndex;
 
   LOADING_CLASS = "is-loading";
 
@@ -209,7 +253,9 @@ GitLabDropdown = (function() {
 
   CURSOR_SELECT_SCROLL_PADDING = 5;
 
-  FILTER_INPUT = '.dropdown-input .dropdown-input-field';
+  FILTER_INPUT = '.dropdown-input .dropdown-input-field:not(.dropdown-no-filter)';
+
+  NO_FILTER_INPUT = '.dropdown-input .dropdown-input-field.dropdown-no-filter';
 
   function GitLabDropdown(el1, options) {
     var searchFields, selector, self;
@@ -224,6 +270,7 @@ GitLabDropdown = (function() {
     this.dropdown = selector != null ? $(selector) : $(this.el).parent();
     // Set Defaults
     this.filterInput = this.options.filterInput || this.getElement(FILTER_INPUT);
+    this.noFilterInput = this.options.noFilterInput || this.getElement(NO_FILTER_INPUT);
     this.highlight = !!this.options.highlight;
     this.filterInputBlur = this.options.filterInputBlur != null
       ? this.options.filterInputBlur
@@ -262,6 +309,10 @@ GitLabDropdown = (function() {
         });
       }
     }
+    if (this.noFilterInput.length) {
+      this.plainInput = new GitLabDropdownInput(this.noFilterInput, this.options);
+      this.plainInput.onInput(this.addInput.bind(this));
+    }
     // Init filterable
     if (this.options.filterable) {
       this.filter = new GitLabDropdownFilter(this.filterInput, {
@@ -753,9 +804,13 @@ GitLabDropdown = (function() {
     }
   };
 
-  GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject) {
+  GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject, single) {
     var $input;
     // Create hidden input for form
+    if (single) {
+      $('input[name="' + fieldName + '"]').remove();
+    }
+
     $input = $('<input>').attr('type', 'hidden').attr('name', fieldName).val(value);
     if (this.options.inputId != null) {
       $input.attr('id', this.options.inputId);
@@ -771,7 +826,7 @@ GitLabDropdown = (function() {
       $input.attr('data-meta', selectedObject[this.options.inputMeta]);
     }
 
-    return this.dropdown.before($input);
+    this.dropdown.before($input).trigger('change');
   };
 
   GitLabDropdown.prototype.selectRowAtIndex = function(index) {

app/assets/javascripts/helpers/user_feature_helper.js

+import Cookies from 'js-cookie';
+
+function isNewRepo() {
+  return Cookies.get('new_repo') === 'true';
+}
+
+const UserFeatureHelper = {
+  isNewRepo,
+};
+
+export default UserFeatureHelper;

app/assets/javascripts/project.js

@@ -90,6 +90,7 @@ import Cookies from 'js-cookie';
           filterable: true,
           filterRemote: true,
           filterByText: true,
+          inputFieldName: $dropdown.data('input-field-name'),
           fieldName: $dropdown.data('field-name'),
           renderRow: function(ref) {
             var li = refListItem.cloneNode(false);
@@ -123,9 +124,14 @@ import Cookies from 'js-cookie';
             e.preventDefault();
             if ($('input[name="ref"]').length) {
               var $form = $dropdown.closest('form');
+
+              var $visit = $dropdown.data('visit');
+              var shouldVisit = typeof $visit === 'undefined' ? true : $visit;
               var action = $form.attr('action');
               var divider = action.indexOf('?') === -1 ? '?' : '&';
-              gl.utils.visitUrl(action + '' + divider + '' + $form.serialize());
+              if (shouldVisit) {
+                gl.utils.visitUrl(action + '' + divider + '' + $form.serialize());
+              }
             }
           }
         });

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

+<script>
+import RepoSidebar from './repo_sidebar.vue';
+import RepoCommitSection from './repo_commit_section.vue';
+import RepoTabs from './repo_tabs.vue';
+import RepoFileButtons from './repo_file_buttons.vue';
+import RepoPreview from './repo_preview.vue';
+import RepoMixin from '../mixins/repo_mixin';
+import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
+import Store from '../stores/repo_store';
+import Helper from '../helpers/repo_helper';
+import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
+
+export default {
+  data: () => Store,
+  mixins: [RepoMixin],
+  components: {
+    'repo-sidebar': RepoSidebar,
+    'repo-tabs': RepoTabs,
+    'repo-file-buttons': RepoFileButtons,
+    'repo-editor': MonacoLoaderHelper.repoEditorLoader,
+    'repo-commit-section': RepoCommitSection,
+    'popup-dialog': PopupDialog,
+    'repo-preview': RepoPreview,
+  },
+
+  mounted() {
+    Helper.getContent().catch(Helper.loadingError);
+  },
+
+  methods: {
+    dialogToggled(toggle) {
+      this.dialog.open = toggle;
+    },
+
+    dialogSubmitted(status) {
+      this.dialog.open = false;
+      this.dialog.status = status;
+    },
+
+    toggleBlobView: Store.toggleBlobView,
+  },
+};
+</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>
+  <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

+<script>
+/* 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';
+
+const RepoCommitSection = {
+  data: () => Store,
+
+  mixins: [RepoMixin],
+
+  computed: {
+    branchPaths() {
+      const branch = Helper.getBranch();
+      return this.changedFiles.map(f => Helper.getFilePathFromFullPath(f.url, branch));
+    },
+
+    cantCommitYet() {
+      return !this.commitMessage || this.submitCommitsLoading;
+    },
+
+    filePluralize() {
+      return this.changedFiles.length > 1 ? 'files' : 'file';
+    },
+  },
+
+  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),
+        content: f.newContent,
+      }));
+      const payload = {
+        branch: Store.targetBranch,
+        commit_message: commitMessage,
+        actions,
+      };
+      Store.submitCommitsLoading = true;
+      Service.commitFiles(payload, this.resetCommitState);
+    },
+
+    resetCommitState() {
+      this.submitCommitsLoading = false;
+      this.changedFiles = [];
+      this.openedFiles = [];
+      this.commitMessage = '';
+      this.editMode = false;
+      $('html, body').animate({ scrollTop: 0 }, 'fast');
+    },
+  },
+};
+
+export default RepoCommitSection;
+</script>
+
+<template>
+<div id="commit-area" v-if="isCommitable && changedFiles.length" >
+  <form class="form-horizontal">
+    <fieldset>
+      <div class="form-group">
+        <label class="col-md-4 control-label staged-files">Staged files ({{changedFiles.length}})</label>
+        <div class="col-md-4">
+          <ul class="list-unstyled changed-files">
+            <li v-for="file in branchPaths" :key="file.id">
+              <span class="help-block">{{file}}</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>
+        </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>
+        </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>
+        </button>
+      </div>
+    </fieldset>
+  </form>
+</div>
+</template>

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

+<script>
+import Store from '../stores/repo_store';
+import RepoMixin from '../mixins/repo_mixin';
+
+export default {
+  data: () => Store,
+  mixins: [RepoMixin],
+  computed: {
+    buttonLabel() {
+      return this.editMode ? this.__('Cancel edit') : this.__('Edit');
+    },
+
+    buttonIcon() {
+      return this.editMode ? [] : ['fa', 'fa-pencil'];
+    },
+  },
+  methods: {
+    editClicked() {
+      if (this.changedFiles.length) {
+        this.dialog.open = true;
+        return;
+      }
+      this.editMode = !this.editMode;
+      Store.toggleBlobView();
+    },
+  },
+
+  watch: {
+    editMode() {
+      if (this.editMode) {
+        $('.project-refs-form').addClass('disabled');
+        $('.fa-long-arrow-right').show();
+        $('.project-refs-target-form').show();
+      } else {
+        $('.project-refs-form').removeClass('disabled');
+        $('.fa-long-arrow-right').hide();
+        $('.project-refs-target-form').hide();
+      }
+    },
+  },
+};
+</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>
+</template>

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

+<script>
+/* global monaco */
+import Store from '../stores/repo_store';
+import Service from '../services/repo_service';
+import Helper from '../helpers/repo_helper';
+
+const RepoEditor = {
+  data: () => Store,
+
+  destroyed() {
+    // this.monacoInstance.getModels().forEach((m) => {
+    //   m.dispose();
+    // });
+    this.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);
+      this.showHide();
+      const newModel = this.monaco.editor.createModel(this.blobRaw, languageID);
+
+      this.monacoInstance.setModel(newModel);
+    }).catch(Helper.loadingError);
+  },
+
+  methods: {
+    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));
+    },
+
+    onMonacoEditorKeysPressed() {
+      Store.setActiveFileContents(this.monacoInstance.getValue());
+    },
+
+    onMonacoEditorMouseUp(e) {
+      const lineNumber = e.target.position.lineNumber;
+      if (e.target.element.className === 'line-numbers') {
+        location.hash = `L${lineNumber}`;
+        Store.activeLine = lineNumber;
+      }
+    },
+  },
+
+  watch: {
+    activeLine() {
+      this.monacoInstance.setPosition({
+        lineNumber: this.activeLine,
+        column: 1,
+      });
+    },
+
+    activeFileLabel() {
+      this.showHide();
+    },
+
+    dialog: {
+      handler(obj) {
+        const newObj = obj;
+        if (newObj.status) {
+          newObj.status = false;
+          this.openedFiles.map((file) => {
+            const f = file;
+            if (f.active) {
+              this.blobRaw = f.plain;
+            }
+            f.changed = false;
+            delete f.newContent;
+
+            return f;
+          });
+          this.editMode = false;
+        }
+      },
+      deep: true,
+    },
+
+    isTree() {
+      this.showHide();
+    },
+
+    openedFiles() {
+      this.showHide();
+    },
+
+    binary() {
+      this.showHide();
+    },
+
+    blobRaw() {
+      this.showHide();
+
+      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);
+    },
+  },
+};
+
+export default RepoEditor;
+</script>
+
+<template>
+<div id="ide"></div>
+</template>

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

+<script>
+import TimeAgoMixin from '../../vue_shared/mixins/timeago';
+
+const RepoFile = {
+  mixins: [TimeAgoMixin],
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+    isMini: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    loading: {
+      type: Object,
+      required: false,
+      default() { return { tree: false }; },
+    },
+    hasFiles: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    activeFile: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    canShowFile() {
+      return !this.loading.tree || this.hasFiles;
+    },
+  },
+
+  methods: {
+    linkClicked(file) {
+      this.$emit('linkclicked', file);
+    },
+  },
+};
+
+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>
+  </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>
+</tr>
+</template>

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

+<script>
+import Store from '../stores/repo_store';
+import Helper from '../helpers/repo_helper';
+import RepoMixin from '../mixins/repo_mixin';
+
+const RepoFileButtons = {
+  data: () => Store,
+
+  mixins: [RepoMixin],
+
+  computed: {
+
+    rawDownloadButtonLabel() {
+      return this.binary ? 'Download' : 'Raw';
+    },
+
+    canPreview() {
+      return Helper.isKindaBinary();
+    },
+  },
+
+  methods: {
+    rawPreviewToggle: Store.toggleRawPreview,
+  },
+};
+
+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>
+</template>

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

+<script>
+const RepoFileOptions = {
+  props: {
+    isMini: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    projectName: {
+      type: String,
+      required: true,
+    },
+  },
+};
+
+export default RepoFileOptions;
+</script>
+
+<template>
+<tr v-if="isMini" class="repo-file-options">
+    <td>
+      <span class="title">{{projectName}}</span>
+    </td>
+  </tr>
+</template>

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

+<script>
+const RepoLoadingFile = {
+  props: {
+    loading: {
+      type: Object,
+      required: false,
+      default: {},
+    },
+    hasFiles: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isMini: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  methods: {
+    lineOfCode(n) {
+      return `line-of-code-${n}`;
+    },
+  },
+};
+
+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>
+</template>

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

+<script>
+const RepoPreviousDirectory = {
+  props: {
+    prevUrl: {
+      type: String,
+      required: true,
+    },
+  },
+
+  methods: {
+    linkClicked(file) {
+      this.$emit('linkclicked', file);
+    },
+  },
+};
+
+export default RepoPreviousDirectory;
+</script>
+
+<template>
+<tr class="prev-directory">
+  <td colspan="3">
+    <a :href="prevUrl" @click.prevent="linkClicked(prevUrl)">..</a>
+  </td>
+</tr>
+</template>

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

+<script>
+import Store from '../stores/repo_store';
+
+export default {
+  data: () => Store,
+  mounted() {
+    $(this.$el).find('.file-content').syntaxHighlight();
+  },
+  computed: {
+    html() {
+      return this.activeFile.html;
+    },
+  },
+
+  watch: {
+    html() {
+      this.$nextTick(() => {
+        $(this.$el).find('.file-content').syntaxHighlight();
+      });
+    },
+  },
+};
+</script>
+
+<template>
+<div>
+  <div v-if="!activeFile.render_error" v-html="activeFile.html"></div>
+  <div v-if="activeFile.render_error" class="vertical-center render-error">
+    <p class="text-center">The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.</p>
+  </div>
+</div>
+</template>

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

+<script>
+import Service from '../services/repo_service';
+import Helper from '../helpers/repo_helper';
+import Store from '../stores/repo_store';
+import RepoPreviousDirectory from './repo_prev_directory.vue';
+import RepoFileOptions from './repo_file_options.vue';
+import RepoFile from './repo_file.vue';
+import RepoLoadingFile from './repo_loading_file.vue';
+import RepoMixin from '../mixins/repo_mixin';
+
+const RepoSidebar = {
+  mixins: [RepoMixin],
+  components: {
+    'repo-file-options': RepoFileOptions,
+    'repo-previous-directory': RepoPreviousDirectory,
+    'repo-file': RepoFile,
+    'repo-loading-file': RepoLoadingFile,
+  },
+
+  created() {
+    this.addPopEventListener();
+  },
+
+  data: () => Store,
+
+  methods: {
+    addPopEventListener() {
+      window.addEventListener('popstate', () => {
+        if (location.href.indexOf('#') > -1) return;
+        this.linkClicked({
+          url: location.href,
+        });
+      });
+    },
+
+    linkClicked(clickedFile) {
+      let url = '';
+      let file = clickedFile;
+      if (typeof file === 'object') {
+        file.loading = true;
+        if (file.type === 'tree' && file.opened) {
+          file = Store.removeChildFilesOfTree(file);
+          file.loading = false;
+        } else {
+          url = file.url;
+          Service.url = url;
+          // I need to refactor this to do the `then` here.
+          // Not a callback. For now this is good enough.
+          // it works.
+          Helper.getContent(file, () => {
+            file.loading = false;
+            Helper.scrollTabsRight();
+          });
+        }
+      } else if (typeof file === 'string') {
+        // go back
+        url = file;
+        Service.url = url;
+        Helper.getContent(null, () => Helper.scrollTabsRight());
+      }
+    },
+  },
+};
+
+export default RepoSidebar;
+</script>
+
+<template>
+<div id="sidebar" :class="{'sidebar-mini' : isMini}" v-cloak>
+  <table class="table">
+    <thead v-if="!isMini">
+      <tr>
+        <th class="name">Name</th>
+        <th class="hidden-sm hidden-xs last-commit">Last Commit</th>
+        <th class="hidden-xs last-update">Last Update</th>
+      </tr>
+    </thead>
+    <tbody>
+      <repo-file-options
+        :is-mini="isMini"
+        :project-name="projectName"/>
+      <repo-previous-directory
+        v-if="isRoot"
+        :prev-url="prevURL"
+        @linkclicked="linkClicked(prevURL)"/>
+      <repo-loading-file
+        v-for="n in 5"
+        :key="n"
+        :loading="loading"
+        :has-files="!!files.length"
+        :is-mini="isMini"/>
+      <repo-file
+        v-for="file in files"
+        :key="file.id"
+        :file="file"
+        :is-mini="isMini"
+        @linkclicked="linkClicked(file)"
+        :is-tree="isTree"
+        :has-files="!!files.length"
+        :active-file="activeFile"/>
+    </tbody>
+  </table>
+</div>
+</template>

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

+<script>
+import Store from '../stores/repo_store';
+
+const RepoTab = {
+  props: {
+    tab: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    changedClass() {
+      const tabChangedObj = {
+        'fa-times': !this.tab.changed,
+        'fa-circle': this.tab.changed,
+      };
+      return tabChangedObj;
+    },
+  },
+
+  methods: {
+    tabClicked: Store.setActiveFiles,
+
+    xClicked(file) {
+      if (file.changed) return;
+      this.$emit('xclicked', file);
+    },
+  },
+};
+
+export default RepoTab;
+</script>
+
+<template>
+<li>
+  <a href="#" class="close" @click.prevent="xClicked(tab)" v-if="!tab.loading">
+    <i class="fa" :class="changedClass"></i>
+  </a>
+
+  <a href="#" class="repo-tab" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a>
+
+  <i v-if="tab.loading" class="fa fa-spinner fa-spin"></i>
+</li>
+</template>

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

+<script>
+import Vue from 'vue';
+import Store from '../stores/repo_store';
+import RepoTab from './repo_tab.vue';
+import RepoMixin from '../mixins/repo_mixin';
+
+const RepoTabs = {
+  mixins: [RepoMixin],
+
+  components: {
+    'repo-tab': RepoTab,
+  },
+
+  data: () => Store,
+
+  methods: {
+    isOverflow() {
+      return this.$el.scrollWidth > this.$el.offsetWidth;
+    },
+
+    xClicked(file) {
+      Store.removeFromOpenedFiles(file);
+    },
+  },
+
+  watch: {
+    openedFiles() {
+      Vue.nextTick(() => {
+        this.tabsOverflow = this.isOverflow();
+      });
+    },
+  },
+};
+
+export default RepoTabs;
+</script>
+
+<template>
+<ul id="tabs" v-if="isMini" v-cloak :class="{'overflown': tabsOverflow}">
+  <repo-tab v-for="tab in openedFiles" :key="tab.id" :tab="tab" :class="{'active' : tab.active}" @xclicked="xClicked"/>
+  <li class="tabs-divider" />
+</ul>
+</template>

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 monacoLoader from '../monaco_loader';
+
+function repoEditorLoader() {
+  Store.monacoLoading = true;
+  return new Promise((resolve, reject) => {
+    monacoLoader(['vs/editor/editor.main'], () => {
+      Store.monaco = monaco;
+      Store.monacoLoading = false;
+      resolve(RepoEditor);
+    }, reject);
+  });
+}
+
+const MonacoLoaderHelper = {
+  repoEditorLoader,
+};
+
+export default MonacoLoaderHelper;

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

+/* global Flash */
+import Service from '../services/repo_service';
+import Store from '../stores/repo_store';
+import '../../flash';
+
+const RepoHelper = {
+  getDefaultActiveFile() {
+    return {
+      active: true,
+      binary: false,
+      extension: '',
+      html: '',
+      mime_type: '',
+      name: '',
+      plain: '',
+      size: 0,
+      url: '',
+      raw: false,
+      newContent: '',
+      changed: false,
+      loading: false,
+    };
+  },
+
+  key: '',
+
+  isTree(data) {
+    return Object.hasOwnProperty.call(data, 'blobs');
+  },
+
+  Time: window.performance
+  && window.performance.now
+  ? window.performance
+  : Date,
+
+  getBranch() {
+    return $('button.dropdown-menu-toggle').attr('data-ref');
+  },
+
+  getLanguageIDForFile(file, langs) {
+    const ext = file.name.split('.').pop();
+    const foundLang = RepoHelper.findLanguage(ext, langs);
+
+    return foundLang ? foundLang.id : 'plaintext';
+  },
+
+  getFilePathFromFullPath(fullPath, branch) {
+    return fullPath.split(`${Store.projectUrl}/blob/${branch}`)[1];
+  },
+
+  findLanguage(ext, langs) {
+    return langs.find(lang => lang.extensions && lang.extensions.indexOf(`.${ext}`) > -1);
+  },
+
+  setDirectoryOpen(tree) {
+    const file = tree;
+    if (!file) return undefined;
+
+    file.opened = true;
+    file.icon = 'fa-folder-open';
+    RepoHelper.toURL(file.url, file.name);
+    return file;
+  },
+
+  isKindaBinary() {
+    const okExts = ['md', 'svg'];
+    return okExts.indexOf(Store.activeFile.extension) > -1;
+  },
+
+  setBinaryDataAsBase64(file) {
+    Service.getBase64Content(file.raw_path)
+    .then((response) => {
+      Store.blobRaw = response;
+      file.base64 = response; // eslint-disable-line no-param-reassign
+    })
+    .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;
+  },
+
+  getNewMergedList(inDirectory, currentList, newList) {
+    const newListSorted = newList.sort(this.compareFilesCaseInsensitive);
+    if (!inDirectory) return newListSorted;
+    const indexOfFile = currentList.findIndex(file => file.url === inDirectory.url);
+    if (!indexOfFile) return newListSorted;
+    return RepoHelper.mergeNewListToOldList(newListSorted, currentList, inDirectory, indexOfFile);
+  },
+
+  mergeNewListToOldList(newList, oldList, inDirectory, indexOfFile) {
+    newList.reverse().forEach((newFile) => {
+      const fileIndex = indexOfFile + 1;
+      const file = newFile;
+      file.level = inDirectory.level + 1;
+      oldList.splice(fileIndex, 0, file);
+    });
+
+    return oldList;
+  },
+
+  compareFilesCaseInsensitive(a, b) {
+    const aName = a.name.toLowerCase();
+    const bName = b.name.toLowerCase();
+    if (a.level > 0) return 0;
+    if (aName < bName) { return -1; }
+    if (aName > bName) { return 1; }
+    return 0;
+  },
+
+  isRoot(url) {
+    // the url we are requesting -> split by the project URL. Grab the right side.
+    const isRoot = !!url.split(Store.projectUrl)[1]
+    // remove the first "/"
+    .slice(1)
+    // split this by "/"
+    .split('/')
+    // remove the first two items of the array... usually /tree/master.
+    .slice(2)
+    // we want to know the length of the array.
+    // If greater than 0 not root.
+    .length;
+    return isRoot;
+  },
+
+  getContent(treeOrFile, cb) {
+    let file = treeOrFile;
+    // const loadingData = RepoHelper.setLoading(true);
+    return Service.getContent()
+    .then((response) => {
+      const data = response.data;
+      // RepoHelper.setLoading(false, loadingData);
+      if (cb) cb();
+      Store.isTree = RepoHelper.isTree(data);
+      if (!Store.isTree) {
+        if (!file) file = data;
+        Store.binary = data.binary;
+
+        if (data.binary) {
+          Store.binaryMimeType = data.mime_type;
+          // file might be undefined
+          RepoHelper.setBinaryDataAsBase64(data);
+          Store.setViewToPreview();
+        } else if (!Store.isPreviewView()) {
+          if (!data.render_error) {
+            Service.getRaw(data.raw_path)
+            .then((rawResponse) => {
+              Store.blobRaw = rawResponse.data;
+              data.plain = rawResponse.data;
+              RepoHelper.setFile(data, file);
+            }).catch(RepoHelper.loadingError);
+          }
+        }
+
+        if (Store.isPreviewView()) {
+          RepoHelper.setFile(data, file);
+        }
+
+        // if the file tree is empty
+        if (Store.files.length === 0) {
+          const parentURL = Service.blobURLtoParentTree(Service.url);
+          Service.url = parentURL;
+          RepoHelper.getContent();
+        }
+      } else {
+        // it's a tree
+        if (!file) Store.isRoot = RepoHelper.isRoot(Service.url);
+        file = RepoHelper.setDirectoryOpen(file);
+        const newDirectory = RepoHelper.dataToListOfFiles(data);
+        Store.addFilesToDirectory(file, Store.files, newDirectory);
+        Store.prevURL = Service.blobURLtoParentTree(Service.url);
+      }
+    }).catch(RepoHelper.loadingError);
+  },
+
+  setFile(data, file) {
+    const newFile = data;
+
+    newFile.url = file.url || location.pathname;
+    newFile.url = file.url;
+    if (newFile.render_error === 'too_large') {
+      newFile.tooLarge = true;
+    }
+    newFile.newContent = '';
+
+    Store.addToOpenedFiles(newFile);
+    Store.setActiveFiles(newFile);
+  },
+
+  toFA(icon) {
+    return `fa-${icon}`;
+  },
+
+  serializeBlob(blob) {
+    const simpleBlob = RepoHelper.serializeRepoEntity('blob', blob);
+    simpleBlob.lastCommitMessage = blob.last_commit.message;
+    simpleBlob.lastCommitUpdate = blob.last_commit.committed_date;
+    simpleBlob.loading = false;
+
+    return simpleBlob;
+  },
+
+  serializeTree(tree) {
+    return RepoHelper.serializeRepoEntity('tree', tree);
+  },
+
+  serializeSubmodule(submodule) {
+    return RepoHelper.serializeRepoEntity('submodule', submodule);
+  },
+
+  serializeRepoEntity(type, entity) {
+    const { url, name, icon, last_commit } = entity;
+    const returnObj = {
+      type,
+      name,
+      url,
+      icon: RepoHelper.toFA(icon),
+      level: 0,
+      loading: false,
+    };
+
+    if (entity.last_commit) {
+      returnObj.lastCommitUrl = `${Store.projectUrl}/commit/${last_commit.id}`;
+    } else {
+      returnObj.lastCommitUrl = '';
+    }
+    return returnObj;
+  },
+
+  scrollTabsRight() {
+    // wait for the transition. 0.1 seconds.
+    setTimeout(() => {
+      const tabs = document.getElementById('tabs');
+      if (!tabs) return;
+      tabs.scrollLeft = 12000;
+    }, 200);
+  },
+
+  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;
+  },
+
+  genKey() {
+    return RepoHelper.Time.now().toFixed(3);
+  },
+
+  getStateKey() {
+    return RepoHelper.key;
+  },
+
+  setStateKey(key) {
+    RepoHelper.key = key;
+  },
+
+  toURL(url, title) {
+    const history = window.history;
+
+    RepoHelper.key = RepoHelper.genKey();
+
+    history.pushState({ key: RepoHelper.key }, '', url);
+
+    if (title) {
+      document.title = `${title} · GitLab`;
+    }
+  },
+
+  findOpenedFileFromActive() {
+    return Store.openedFiles.find(openedFile => Store.activeFile.url === openedFile.url);
+  },
+
+  loadingError() {
+    Flash('Unable to load the file at this time.');
+  },
+};
+
+export default RepoHelper;

app/assets/javascripts/repo/index.js

+import $ from 'jquery';
+import Vue from 'vue';
+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 Translate from '../vue_shared/translate';
+
+function initDropdowns() {
+  $('.project-refs-target-form').hide();
+  $('.fa-long-arrow-right').hide();
+}
+
+function addEventsForNonVueEls() {
+  $(document).on('change', '.dropdown', () => {
+    Store.targetBranch = $('.project-refs-target-form input[name="ref"]').val();
+  });
+
+  window.onbeforeunload = function confirmUnload(e) {
+    const hasChanged = Store.openedFiles
+      .some(file => file.changed);
+    if (!hasChanged) return undefined;
+    const event = e || window.event;
+    if (event) event.returnValue = 'Are you sure you want to lose unsaved changes?';
+    // For Safari
+    return 'Are you sure you want to lose unsaved changes?';
+  };
+}
+
+function setInitialStore(data) {
+  Store.service = Service;
+  Store.service.url = data.url;
+  Store.service.refsUrl = data.refsUrl;
+  Store.projectId = data.projectId;
+  Store.projectName = data.projectName;
+  Store.projectUrl = data.projectUrl;
+  Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref');
+  Store.checkIsCommitable();
+}
+
+function initRepo(el) {
+  return new Vue({
+    el,
+    components: {
+      repo: Repo,
+    },
+  });
+}
+
+function initRepoEditButton(el) {
+  return new Vue({
+    el,
+    components: {
+      repoEditButton: RepoEditButton,
+    },
+  });
+}
+
+function initRepoBundle() {
+  const repo = document.getElementById('repo');
+  const editButton = document.querySelector('.editable-mode');
+  setInitialStore(repo.dataset);
+  addEventsForNonVueEls();
+  initDropdowns();
+
+  Vue.use(Translate);
+
+  initRepo(repo);
+  initRepoEditButton(editButton);
+}
+
+$(initRepoBundle);
+
+export default initRepoBundle;

app/assets/javascripts/repo/mixins/repo_mixin.js

+import Store from '../stores/repo_store';
+
+const RepoMixin = {
+  computed: {
+    isMini() {
+      return !!Store.openedFiles.length;
+    },
+
+    changedFiles() {
+      const changedFileList = this.openedFiles
+      .filter(file => file.changed);
+      return changedFileList;
+    },
+  },
+};
+
+export default RepoMixin;

app/assets/javascripts/repo/monaco_loader.js

+/* eslint-disable no-underscore-dangle, camelcase */
+/* global __webpack_public_path__ */
+
+import monacoContext from 'monaco-editor/dev/vs/loader';
+
+monacoContext.require.config({
+  paths: {
+    vs: `${__webpack_public_path__}monaco-editor/vs`,
+  },
+});
+
+window.__monaco_context__ = monacoContext;
+export default monacoContext.require;

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

+/* global Flash */
+import axios from 'axios';
+import Store from '../stores/repo_store';
+import Api from '../../api';
+
+const RepoService = {
+  url: '',
+  options: {
+    params: {
+      format: 'json',
+    },
+  },
+  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, {
+      transformResponse: [res => res],
+    });
+  },
+
+  buildParams(url = this.url) {
+    // shallow clone object without reference
+    const params = Object.assign({}, this.options.params);
+
+    if (this.urlIsRichBlob(url)) params.viewer = 'rich';
+
+    return params;
+  },
+
+  urlIsRichBlob(url = this.url) {
+    const extension = url.split('.').pop();
+
+    return this.richExtensionRegExp.test(extension);
+  },
+
+  getContent(url = this.url) {
+    const params = this.buildParams(url);
+
+    return axios.get(url, {
+      params,
+    });
+  },
+
+  getBase64Content(url = this.url) {
+    const request = axios.get(url, {
+      responseType: 'arraybuffer',
+    });
+
+    return request.then(response => this.bufferToBase64(response.data));
+  },
+
+  bufferToBase64(data) {
+    return new Buffer(data, 'binary').toString('base64');
+  },
+
+  blobURLtoParentTree(url) {
+    const urlArray = url.split('/');
+    urlArray.pop();
+    const blobIndex = urlArray.lastIndexOf('blob');
+
+    if (blobIndex > -1) urlArray[blobIndex] = 'tree';
+
+    return urlArray.join('/');
+  },
+
+  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');
+      cb();
+    });
+  },
+};
+
+export default RepoService;

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

+/* global Flash */
+import Helper from '../helpers/repo_helper';
+import Service from '../services/repo_service';
+
+const RepoStore = {
+  ideEl: {},
+  monaco: {},
+  monacoLoading: false,
+  monacoInstance: {},
+  service: '',
+  editor: '',
+  sidebar: '',
+  editMode: false,
+  isTree: false,
+  isRoot: false,
+  prevURL: '',
+  projectId: '',
+  projectName: '',
+  projectUrl: '',
+  trees: [],
+  blobs: [],
+  submodules: [],
+  blobRaw: '',
+  blobRendered: '',
+  currentBlobView: 'repo-preview',
+  openedFiles: [],
+  tabSize: 100,
+  defaultTabSize: 100,
+  minTabSize: 30,
+  tabsOverflow: 41,
+  submitCommitsLoading: false,
+  binaryLoaded: false,
+  dialog: {
+    open: false,
+    title: '',
+    status: false,
+  },
+  activeFile: Helper.getDefaultActiveFile(),
+  activeFileIndex: 0,
+  activeLine: 0,
+  activeFileLabel: 'Raw',
+  files: [],
+  isCommitable: false,
+  binary: false,
+  currentBranch: '',
+  targetBranch: 'new-branch',
+  commitMessage: '',
+  binaryMimeType: '',
+  // scroll bar space for windows
+  scrollWidth: 0,
+  binaryTypes: {
+    png: false,
+    md: false,
+    svg: false,
+    unknown: false,
+  },
+  loading: {
+    tree: false,
+    blob: false,
+  },
+  readOnly: true,
+
+  resetBinaryTypes() {
+    Object.keys(RepoStore.binaryTypes).forEach((key) => {
+      RepoStore.binaryTypes[key] = false;
+    });
+  },
+
+  // 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.'));
+  },
+
+  addFilesToDirectory(inDirectory, currentList, newList) {
+    RepoStore.files = Helper.getNewMergedList(inDirectory, currentList, newList);
+  },
+
+  toggleRawPreview() {
+    RepoStore.activeFile.raw = !RepoStore.activeFile.raw;
+    RepoStore.activeFileLabel = RepoStore.activeFile.raw ? 'Display rendered file' : 'Display source';
+  },
+
+  setActiveFiles(file) {
+    if (RepoStore.isActiveFile(file)) return;
+    RepoStore.openedFiles = RepoStore.openedFiles
+      .map((openedFile, i) => RepoStore.setFileActivity(file, openedFile, i));
+
+    RepoStore.setActiveToRaw();
+
+    if (file.binary) {
+      RepoStore.blobRaw = file.base64;
+      RepoStore.binaryMimeType = file.mime_type;
+    } else if (file.newContent || file.plain) {
+      RepoStore.blobRaw = file.newContent || file.plain;
+    } else {
+      Service.getRaw(file.raw_path)
+        .then((rawResponse) => {
+          RepoStore.blobRaw = rawResponse.data;
+          Helper.findOpenedFileFromActive().plain = rawResponse.data;
+        }).catch(Helper.loadingError);
+    }
+
+    if (!file.loading) Helper.toURL(file.url, file.name);
+    RepoStore.binary = file.binary;
+  },
+
+  setFileActivity(file, openedFile, i) {
+    const activeFile = openedFile;
+    activeFile.active = file.url === activeFile.url;
+
+    if (activeFile.active) RepoStore.setActiveFile(activeFile, i);
+
+    return activeFile;
+  },
+
+  setActiveFile(activeFile, i) {
+    RepoStore.activeFile = Object.assign({}, RepoStore.activeFile, activeFile);
+    RepoStore.activeFileIndex = i;
+  },
+
+  setActiveToRaw() {
+    RepoStore.activeFile.raw = false;
+    // can't get vue to listen to raw for some reason so RepoStore for now.
+    RepoStore.activeFileLabel = 'Display source';
+  },
+
+  removeChildFilesOfTree(tree) {
+    let foundTree = false;
+    const treeToClose = tree;
+    let wereDone = 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;
+        return true;
+      }
+      if (wereDone) return true;
+
+      if (isItTheTreeWeWant) foundTree = true;
+
+      if (foundTree) return file.level <= treeToClose.level;
+      return true;
+    });
+
+    treeToClose.opened = false;
+    treeToClose.icon = 'fa-folder';
+    return treeToClose;
+  },
+
+  removeFromOpenedFiles(file) {
+    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;
+    });
+
+    // now activate the right tab based on what you closed.
+    if (RepoStore.openedFiles.length === 0) {
+      RepoStore.activeFile = {};
+      return;
+    }
+
+    if (RepoStore.openedFiles.length === 1 || foundIndex === 0) {
+      RepoStore.setActiveFiles(RepoStore.openedFiles[0]);
+      return;
+    }
+
+    if (foundIndex) {
+      if (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);
+
+    if (openedFilesAlreadyExists) return;
+
+    openFile.changed = false;
+    RepoStore.openedFiles.push(openFile);
+  },
+
+  setActiveFileContents(contents) {
+    if (!RepoStore.editMode) return;
+    const currentFile = RepoStore.openedFiles[RepoStore.activeFileIndex];
+    RepoStore.activeFile.newContent = contents;
+    RepoStore.activeFile.changed = RepoStore.activeFile.plain !== RepoStore.activeFile.newContent;
+    currentFile.changed = RepoStore.activeFile.changed;
+    currentFile.newContent = contents;
+  },
+
+  toggleBlobView() {
+    RepoStore.currentBlobView = RepoStore.isPreviewView() ? 'repo-editor' : 'repo-preview';
+  },
+
+  setViewToPreview() {
+    RepoStore.currentBlobView = 'repo-preview';
+  },
+
+  // getters
+
+  isActiveFile(file) {
+    return file && file.url === RepoStore.activeFile.url;
+  },
+
+  isPreviewView() {
+    return RepoStore.currentBlobView === 'repo-preview';
+  },
+};
+export default RepoStore;

app/assets/javascripts/test_utils/index.js

+import 'core-js/es6/map';
+import 'core-js/es6/set';
 import simulateDrag from './simulate_drag';
 
 // Export to global space for rspec to use

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

+<script>
+const PopupDialog = {
+  name: 'popup-dialog',
+
+  props: {
+    open: Boolean,
+    title: String,
+    body: String,
+    kind: {
+      type: String,
+      default: 'primary',
+    },
+    closeButtonLabel: {
+      type: String,
+      default: 'Cancel',
+    },
+    primaryButtonLabel: {
+      type: String,
+      default: 'Save changes',
+    },
+  },
+
+  computed: {
+    typeOfClass() {
+      const className = `btn-${this.kind}`;
+      const returnObj = {};
+      returnObj[className] = true;
+      return returnObj;
+    },
+  },
+
+  methods: {
+    close() {
+      this.$emit('toggle', false);
+    },
+
+    yesClick() {
+      this.$emit('submit', true);
+    },
+
+    noClick() {
+      this.$emit('submit', false);
+    },
+  },
+};
+
+export default PopupDialog;
+</script>
+<template>
+<div class="modal popup-dialog" tabindex="-1" v-show="open" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" @click="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">{{this.title}}</h4>
+      </div>
+      <div class="modal-body">
+        <p>{{this.body}}</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal" @click="noClick">{{closeButtonLabel}}</button>
+        <button type="button" class="btn" :class="typeOfClass" @click="yesClick">{{primaryButtonLabel}}</button>
+      </div>
+    </div>
+  </div>
+</div>
+</template>

app/assets/stylesheets/framework/layout.scss

@@ -116,3 +116,13 @@ body {
 .with-performance-bar .page-with-sidebar {
   margin-top: $header-height + $performance-bar-height;
 }
+
+[v-cloak] {
+  display: none;
+}
+
+.vertical-center {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+}

app/assets/stylesheets/framework/variables.scss

@@ -88,6 +88,7 @@ $indigo-950: #1a1a40;
 
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
+$almost-black: #242424;
 
 $border-white-light: darken($white-light, $darken-border-factor);
 $border-white-normal: darken($white-normal, $darken-border-factor);
@@ -618,6 +619,13 @@ $color-high-score: $green-400;
 $color-average-score: $orange-400;
 $color-low-score: $red-400;
 
+/*
+Repo editor
+*/
+$repo-editor-grey: #f6f7f9;
+$repo-editor-grey-darker: #e9ebee;
+$repo-editor-linear-gradient: linear-gradient(to right, $repo-editor-grey 0%, $repo-editor-grey-darker, 20%, $repo-editor-grey 40%, $repo-editor-grey 100%);
+
 /*
 Performance Bar
 */

app/assets/stylesheets/pages/repo.scss

+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .5s;
+}
+
+.monaco-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: $black-transparent;
+}
+
+.modal.popup-dialog {
+  display: block;
+  background-color: $black-transparent;
+  z-index: 2100;
+
+  @media (min-width: $screen-md-min) {
+    .modal-dialog {
+      width: 600px;
+      margin: 30px auto;
+    }
+  }
+}
+
+.project-refs-form,
+.project-refs-target-form {
+  display: inline-block;
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.commit-message {
+  @include str-truncated(250px);
+}
+
+.editable-mode {
+  display: inline-block;
+}
+
+.blob-viewer[data-type="rich"] {
+  margin: 20px;
+}
+
+.repository-view.tree-content-holder {
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+  color: $almost-black;
+
+  .panel-right {
+    display: inline-block;
+    width: 80%;
+
+    .monaco-editor.vs {
+      .line-numbers {
+        cursor: pointer;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      .cursor {
+        display: none !important;
+      }
+    }
+
+    &.edit-mode {
+      .blob-viewer-container {
+        overflow: hidden;
+      }
+
+      .monaco-editor.vs {
+        .cursor {
+          background: $black;
+          border-color: $black;
+          display: block !important;
+        }
+      }
+    }
+
+    .blob-viewer-container {
+      height: calc(100vh - 63px);
+      overflow: auto;
+    }
+
+    #tabs {
+      padding-left: 0;
+      margin-bottom: 0;
+      display: flex;
+      white-space: nowrap;
+      width: 100%;
+      overflow-y: hidden;
+      overflow-x: auto;
+
+      li {
+        animation: swipeRightAppear ease-in 0.1s;
+        animation-iteration-count: 1;
+        transform-origin: 0% 50%;
+        list-style-type: none;
+        background: $gray-normal;
+        display: inline-block;
+        padding: 10px 18px;
+        border-right: 1px solid $white-dark;
+        border-bottom: 1px solid $white-dark;
+        white-space: nowrap;
+
+        &.remove {
+          animation: swipeRightDissapear ease-in 0.1s;
+          animation-iteration-count: 1;
+          transform-origin: 0% 50%;
+
+          a {
+            width: 0;
+          }
+        }
+
+        &.active {
+          background: $white-light;
+          border-bottom: none;
+        }
+
+        a {
+          @include str-truncated(100px);
+          color: $black;
+          display: inline-block;
+          width: 100px;
+          text-align: center;
+          vertical-align: middle;
+
+          &.close {
+            width: auto;
+            font-size: 15px;
+            opacity: 1;
+            margin-right: -6px;
+          }
+        }
+
+        i.fa.fa-times,
+        i.fa.fa-circle {
+          float: right;
+          margin-top: 3px;
+          margin-left: 15px;
+          color: $gray-darkest;
+        }
+
+        i.fa.fa-circle {
+          color: $brand-success;
+        }
+
+        &.tabs-divider {
+          width: 100%;
+          background-color: $white-light;
+          border-right: none;
+          border-top-right-radius: 2px;
+        }
+      }
+    }
+
+    #repo-file-buttons {
+      background-color: $white-light;
+      border-bottom: 1px solid $white-normal;
+      padding: 5px 10px;
+      position: relative;
+      border-top: 1px solid $white-normal;
+      margin-top: -5px;
+    }
+
+    #binary-viewer {
+      height: 80vh;
+      overflow: auto;
+      margin: 0;
+
+      .blob-viewer {
+        padding-top: 20px;
+        padding-left: 20px;
+      }
+
+      .binary-unknown {
+        text-align: center;
+        padding-top: 100px;
+        background: $gray-light;
+        height: 100%;
+        font-size: 17px;
+
+        span {
+          display: block;
+        }
+      }
+    }
+  }
+
+  #commit-area {
+    background: $gray-light;
+    padding: 20px;
+
+    span.help-block {
+      padding-top: 7px;
+      margin-top: 0;
+    }
+  }
+
+  #view-toggler {
+    height: 41px;
+    position: relative;
+    display: block;
+    border-bottom: 1px solid $white-normal;
+    background: $white-light;
+    margin-top: -5px;
+  }
+
+  #binary-viewer {
+    img {
+      max-width: 100%;
+    }
+  }
+
+  #sidebar {
+
+    &.sidebar-mini {
+      display: inline-block;
+      vertical-align: top;
+      width: 20%;
+      border-right: 1px solid $white-normal;
+      height: calc(100vh + 20px);
+      overflow: auto;
+    }
+
+    table {
+      margin-bottom: 0;
+    }
+
+    tr {
+      animation: fadein 0.5s;
+      cursor: pointer;
+
+      &.repo-file-options td {
+        padding: 0;
+        border-top: none;
+        background: $gray-light;
+        width: 100%;
+        display: inline-block;
+
+        &:first-child {
+          border-top-left-radius: 2px;
+        }
+
+        .title {
+          display: inline-block;
+          font-size: 10px;
+          text-transform: uppercase;
+          font-weight: bold;
+          color: $gray-darkest;
+          width: 185px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          vertical-align: middle;
+          padding: 2px 16px;
+        }
+      }
+
+      .fa {
+        margin-right: 5px;
+      }
+
+      td {
+        white-space: nowrap;
+      }
+    }
+
+    a {
+      color: $almost-black;
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    ul {
+      list-style-type: none;
+      padding: 0;
+
+      li {
+        border-bottom: 1px solid $border-gray-normal;
+        padding: 10px 20px;
+
+        a {
+          color: $almost-black;
+        }
+
+        .fa {
+          font-size: $code_font_size;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+
+}
+
+.animation-container {
+  background: $repo-editor-grey;
+  height: 40px;
+  overflow: hidden;
+  position: relative;
+
+  &.animation-container-small {
+    height: 12px;
+  }
+
+  &::before {
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: blockTextShine;
+    animation-timing-function: linear;
+    background-image: $repo-editor-linear-gradient;
+    background-repeat: no-repeat;
+    background-size: 800px 45px;
+    content: ' ';
+    display: block;
+    height: 100%;
+    position: relative;
+  }
+
+  div {
+    background: $white-light;
+    height: 6px;
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+
+  .line-of-code-1 {
+    left: 0;
+    top: 8px;
+  }
+
+  .line-of-code-2 {
+    left: 150px;
+    top: 0;
+    height: 10px;
+  }
+
+  .line-of-code-3 {
+    left: 0;
+    top: 23px;
+  }
+
+  .line-of-code-4 {
+    left: 0;
+    top: 38px;
+  }
+
+  .line-of-code-5 {
+    left: 200px;
+    top: 28px;
+    height: 10px;
+  }
+
+  .line-of-code-6 {
+    top: 14px;
+    left: 230px;
+    height: 10px;
+  }
+}
+
+.render-error {
+  min-height: calc(100vh - 63px);
+
+  p {
+    width: 100%;
+  }
+}
+
+@keyframes blockTextShine {
+  0% {
+    transform: translateX(-468px);
+  }
+
+  100% {
+    transform: translateX(468px);
+  }
+}
+
+@keyframes swipeRightAppear {
+  0% {
+    transform: scaleX(0.00);
+  }
+
+  100% {
+    transform: scaleX(1.00);
+  }
+}
+
+@keyframes swipeRightDissapear {
+  0% {
+    transform: scaleX(1.00);
+  }
+
+  100% {
+    transform: scaleX(0.00);
+  }
+}

app/assets/stylesheets/pages/tree.scss

@@ -87,7 +87,7 @@
   }
 
   .add-to-tree {
-    vertical-align: top;
+    vertical-align: middle;
     padding: 6px 10px;
   }
 

app/controllers/concerns/renders_blob.rb

 module RendersBlob
   extend ActiveSupport::Concern
 
-  def render_blob_json(blob)
+  def blob_json(blob)
     viewer =
       case params[:viewer]
       when 'rich'
@@ -11,13 +11,21 @@ module RendersBlob
       else
         blob.simple_viewer
       end
-    return render_404 unless viewer
 
-    render json: {
+    return unless viewer
+
+    {
       html: view_to_html_string("projects/blob/_viewer", viewer: viewer, load_async: false)
     }
   end
 
+  def render_blob_json(blob)
+    json = blob_json(blob)
+    return render_404 unless json
+
+    render json: json
+  end
+
   def conditionally_expand_blob(blob)
     blob.expand! if params[:expanded] == 'true'
   end

app/controllers/projects/blob_controller.rb

@@ -37,16 +37,11 @@ class Projects::BlobController < Projects::ApplicationController
 
     respond_to do |format|
       format.html do
-        environment_params = @repository.branch_exists?(@ref) ? { ref: @ref } : { commit: @commit }
-        @environment = EnvironmentsFinder.new(@project, current_user, environment_params).execute.last
-
-        @last_commit = @repository.last_commit_for_path(@commit.id, @blob.path)
-
-        render 'show'
+        show_html
       end
 
       format.json do
-        render_blob_json(@blob)
+        show_json
       end
     end
   end
@@ -190,4 +185,34 @@ class Projects::BlobController < Projects::ApplicationController
     @last_commit_sha = Gitlab::Git::Commit
       .last_for_path(@repository, @ref, @path).sha
   end
+
+  def show_html
+    environment_params = @repository.branch_exists?(@ref) ? { ref: @ref } : { commit: @commit }
+    @environment = EnvironmentsFinder.new(@project, current_user, environment_params).execute.last
+    @last_commit = @repository.last_commit_for_path(@commit.id, @blob.path)
+
+    render 'show'
+  end
+
+  def show_json
+    json = blob_json(@blob)
+    return render_404 unless json
+
+    render json: json.merge(
+      path: blob.path,
+      name: blob.name,
+      extension: blob.extension,
+      size: blob.raw_size,
+      mime_type: blob.mime_type,
+      binary: blob.raw_binary?,
+      simple_viewer: blob.simple_viewer&.class&.partial_name,
+      rich_viewer: blob.rich_viewer&.class&.partial_name,
+      show_viewer_switcher: !!blob.show_viewer_switcher?,
+      render_error: blob.simple_viewer&.render_error || blob.rich_viewer&.render_error,
+      raw_path: project_raw_path(project, @id),
+      blame_path: project_blame_path(project, @id),
+      commits_path: project_commits_path(project, @id),
+      permalink: project_blob_path(project, File.join(@commit.id, @path))
+    )
+  end
 end

app/controllers/projects/tree_controller.rb

@@ -24,12 +24,19 @@ class Projects::TreeController < Projects::ApplicationController
       end
     end
 
-    @last_commit = @repository.last_commit_for_path(@commit.id, @tree.path) || @commit
-
     respond_to do |format|
-      format.html
-      # Disable cache so browser history works
-      format.js { no_cache_headers }
+      format.html do
+        @last_commit = @repository.last_commit_for_path(@commit.id, @tree.path) || @commit
+      end
+
+      format.js do
+        # Disable cache so browser history works
+        no_cache_headers
+      end
+
+      format.json do
+        render json: TreeSerializer.new(project: @project, repository: @repository, ref: @ref).represent(@tree)
+      end
     end
   end
 

app/controllers/projects_controller.rb

@@ -220,21 +220,34 @@ class ProjectsController < Projects::ApplicationController
   end
 
   def refs
-    branches = BranchesFinder.new(@repository, params).execute.map(&:name)
+    find_refs = params['find']
 
-    options = {
-      s_('RefSwitcher|Branches') => branches.take(100)
-    }
+    find_branches = true
+    find_tags = true
+    find_commits = true
+
+    unless find_refs.nil?
+      find_branches = find_refs.include?('branches')
+      find_tags = find_refs.include?('tags')
+      find_commits = find_refs.include?('commits')
+    end
+
+    options = {}
+
+    if find_branches
+      branches = BranchesFinder.new(@repository, params).execute.take(100).map(&:name)
+      options[s_('RefSwitcher|Branches')] = branches
+    end
 
-    unless @repository.tag_count.zero?
-      tags = TagsFinder.new(@repository, params).execute.map(&:name)
+    if find_tags && @repository.tag_count.nonzero?
+      tags = TagsFinder.new(@repository, params).execute.take(100).map(&:name)
 
-      options[s_('RefSwitcher|Tags')] = tags.take(100)
+      options[s_('RefSwitcher|Tags')] = tags
     end
 
     # If reference is commit id - we should add it to branch/tag selectbox
     ref = Addressable::URI.unescape(params[:ref])
-    if ref && options.flatten(2).exclude?(ref) && ref =~ /\A[0-9a-zA-Z]{6,52}\z/
+    if find_commits && ref && options.flatten(2).exclude?(ref) && ref =~ /\A[0-9a-zA-Z]{6,52}\z/
       options['Commits'] = [ref]
     end
 

app/helpers/application_helper.rb

@@ -309,4 +309,8 @@ module ApplicationHelper
   def collapsed_sidebar?
     cookies["sidebar_collapsed"] == "true"
   end
+
+  def show_new_repo?
+    cookies["new_repo"] == "true" && body_data_page != 'projects:show'
+  end
 end

app/helpers/blob_helper.rb

@@ -118,7 +118,7 @@ module BlobHelper
     icon("#{file_type_icon_class('file', mode, name)} fw")
   end
 
-  def blob_raw_url
+  def blob_raw_path
     if @build && @entry
       raw_project_job_artifacts_path(@project, @build, path: @entry.path)
     elsif @snippet
@@ -235,7 +235,7 @@ module BlobHelper
       title = 'Open raw'
     end
 
-    link_to icon, blob_raw_url, class: 'btn btn-sm has-tooltip', target: '_blank', rel: 'noopener noreferrer', title: title, data: { container: 'body' }
+    link_to icon, blob_raw_path, class: 'btn btn-sm has-tooltip', target: '_blank', rel: 'noopener noreferrer', title: title, data: { container: 'body' }
   end
 
   def blob_render_error_reason(viewer)
@@ -270,7 +270,7 @@ module BlobHelper
       options << link_to('view the source', '#', class: 'js-blob-viewer-switch-btn', data: { viewer: 'simple' })
     end
 
-    options << link_to('download it', blob_raw_url, target: '_blank', rel: 'noopener noreferrer')
+    options << link_to('download it', blob_raw_path, target: '_blank', rel: 'noopener noreferrer')
 
     options
   end

app/helpers/diff_helper.rb

@@ -88,15 +88,15 @@ module DiffHelper
   end
 
   def submodule_link(blob, ref, repository = @repository)
-    tree, commit = submodule_links(blob, ref, repository)
-    commit_id = if commit.nil?
+    project_url, tree_url = submodule_links(blob, ref, repository)
+    commit_id = if tree_url.nil?
                   Commit.truncate_sha(blob.id)
                 else
-                  link_to Commit.truncate_sha(blob.id), commit
+                  link_to Commit.truncate_sha(blob.id), tree_url
                 end
 
     [
-      content_tag(:span, link_to(truncate(blob.name, length: 40), tree)),
+      content_tag(:span, link_to(truncate(blob.name, length: 40), project_url)),
       '@',
       content_tag(:span, commit_id, class: 'commit-sha')
     ].join(' ').html_safe

app/helpers/dropdowns_helper.rb

@@ -48,11 +48,11 @@ module DropdownsHelper
     end
   end
 
-  def dropdown_title(title, back: false)
+  def dropdown_title(title, options: {})
     content_tag :div, class: "dropdown-title" do
       title_output = ""
 
-      if back
+      if options.fetch(:back, false)
         title_output << content_tag(:button, class: "dropdown-title-button dropdown-menu-back", aria: { label: "Go back" }, type: "button") do
           icon('arrow-left')
         end
@@ -60,14 +60,25 @@ module DropdownsHelper
 
       title_output << content_tag(:span, title)
 
-      title_output << content_tag(:button, class: "dropdown-title-button dropdown-menu-close", aria: { label: "Close" }, type: "button") do
-        icon('times', class: 'dropdown-menu-close-icon')
+      if options.fetch(:close, true)
+        title_output << content_tag(:button, class: "dropdown-title-button dropdown-menu-close", aria: { label: "Close" }, type: "button") do
+          icon('times', class: 'dropdown-menu-close-icon')
+        end
       end
 
       title_output.html_safe
     end
   end
 
+  def dropdown_input(placeholder, input_id: nil)
+    content_tag :div, class: "dropdown-input" do
+      filter_output = text_field_tag input_id, nil, class: "dropdown-input-field dropdown-no-filter", placeholder: placeholder, autocomplete: 'off'
+      filter_output << icon('times', class: "dropdown-input-clear js-dropdown-input-clear", role: "button")
+
+      filter_output.html_safe
+    end
+  end
+
   def dropdown_filter(placeholder, search_id: nil)
     content_tag :div, class: "dropdown-input" do
       filter_output = search_field_tag search_id, nil, class: "dropdown-input-field", placeholder: placeholder, autocomplete: 'off'

app/helpers/icons_helper.rb

 module IconsHelper
+  extend self
   include FontAwesome::Rails::IconHelper
 
   # Creates an icon tag given icon name(s) and possible icon modifiers.

app/helpers/submodule_helper.rb

 module SubmoduleHelper
-  include Gitlab::ShellAdapter
+  extend self
 
   VALID_SUBMODULE_PROTOCOLS = %w[http https git ssh].freeze
 
@@ -59,7 +59,7 @@ module SubmoduleHelper
     return true if url_no_dotgit == [Gitlab.config.gitlab.url, '/', namespace, '/',
                                      project].join('')
     url_with_dotgit = url_no_dotgit + '.git'
-    url_with_dotgit == gitlab_shell.url_to_repo([namespace, '/', project].join(''))
+    url_with_dotgit == Gitlab::Shell.new.url_to_repo([namespace, '/', project].join(''))
   end
 
   def relative_self_url?(url)

app/models/blob_viewer/base.rb

@@ -82,7 +82,7 @@ module BlobViewer
     # format of the blob.
     #
     # Prefer to implement a client-side viewer, where the JS component loads the
-    # binary from `blob_raw_url` and does its own format validation and error
+    # binary from `blob_raw_path` and does its own format validation and error
     # rendering, especially for potentially large binary formats.
     def render_error
       if too_large?

app/models/blob_viewer/server_side.rb

@@ -17,7 +17,7 @@ module BlobViewer
       # build artifacts, can only be rendered using a client-side viewer,
       # since we do not want to read large amounts of data into memory on the
       # server side. Client-side viewers use JS and can fetch the file from
-      # `blob_raw_url` using AJAX.
+      # `blob_raw_path` using AJAX.
       return :server_side_but_stored_externally if blob.stored_externally?
 
       super

app/serializers/blob_entity.rb

+class BlobEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :id, :path, :name, :mode
+
+  expose :last_commit do |blob|
+    request.project.repository.last_commit_for_path(blob.commit_id, blob.path)
+  end
+
+  expose :icon do |blob|
+    IconsHelper.file_type_icon_class('file', blob.mode, blob.name)
+  end
+
+  expose :url do |blob|
+    project_blob_path(request.project, File.join(request.ref, blob.path))
+  end
+end

app/serializers/submodule_entity.rb

+class SubmoduleEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :id, :path, :name, :mode
+
+  expose :icon do |blob|
+    'archive'
+  end
+
+  expose :project_url do |blob|
+    submodule_links(blob, request).first
+  end
+
+  expose :tree_url do |blob|
+    submodule_links(blob, request).last
+  end
+
+  private
+
+  def submodule_links(blob, request)
+    @submodule_links ||= SubmoduleHelper.submodule_links(blob, request.ref, request.repository)
+  end
+end

app/serializers/tree_entity.rb

+class TreeEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :id, :path, :name, :mode
+
+  expose :last_commit do |tree|
+    request.project.repository.last_commit_for_path(tree.commit_id, tree.path)
+  end
+
+  expose :icon do |tree|
+    IconsHelper.file_type_icon_class('folder', tree.mode, tree.name)
+  end
+
+  expose :url do |tree|
+    project_tree_path(request.project, File.join(request.ref, tree.path))
+  end
+end

app/serializers/tree_root_entity.rb

+# TODO: Inherit from TreeEntity, when `Tree` implements `id` and `name` like `Gitlab::Git::Tree`.
+class TreeRootEntity < Grape::Entity
+  expose :path
+  
+  expose :trees, using: TreeEntity
+  expose :blobs, using: BlobEntity
+  expose :submodules, using: SubmoduleEntity
+end

app/serializers/tree_serializer.rb

+class TreeSerializer < BaseSerializer
+  entity TreeRootEntity
+end

app/views/layouts/header/_default.html.haml

@@ -74,8 +74,7 @@
                     = link_to "Profile", current_user, class: 'profile-link', data: { user: current_user.username }
                   %li
                     = link_to "Settings", profile_path
-                  %li
-                    = link_to "Turn on new navigation", profile_preferences_path(anchor: "new-navigation")
+                  = render 'shared/user_dropdown_experimental_features'
                   %li.divider
                   %li
                     = link_to "Sign out", destroy_user_session_path, method: :delete, class: "sign-out-link"

app/views/layouts/header/_new.html.haml

@@ -68,8 +68,7 @@
                     = link_to "Profile", current_user, class: 'profile-link', data: { user: current_user.username }
                   %li
                     = link_to "Settings", profile_path
-                  %li
-                    = link_to "Turn off new navigation", profile_preferences_path(anchor: "new-navigation")
+                  = render 'shared/user_dropdown_experimental_features'
                   %li.divider
                   %li
                     = link_to "Sign out", destroy_user_session_path, method: :delete, class: "sign-out-link"

app/views/profiles/preferences/show.html.haml

@@ -18,6 +18,8 @@
         = scheme.name
   .col-sm-12
     %hr
+    %h3#experimental-features Experimental features
+    %hr
   .col-lg-4.profile-settings-sidebar#new-navigation
     %h4.prepend-top-0
       New Navigation
@@ -40,6 +42,28 @@
       New
   .col-sm-12
     %hr
+  .col-lg-4.profile-settings-sidebar#new-repository
+    %h4.prepend-top-0
+      New Repository
+    %p
+      This setting allows you to turn on or off the new upcoming repository concept.
+  .col-lg-8.syntax-theme
+    .nav-wip
+      %p
+        The new repository is currently a work-in-progress concept and  only usable on wide-screens. There are a number of improvements that we are working on in order to further refine the repository view.
+      %p
+        %a{ href: 'https://gitlab.com/gitlab-org/gitlab-ce/issues/31890', target: 'blank' } Learn more
+        about the improvements that are coming soon!
+    = label_tag do
+      .preview= image_tag "old_repo.png"
+      %input.js-experiment-feature-toggle{ type: "radio", value: "false", name: "new_repo", checked: !show_new_repo? }
+      Old
+    = label_tag do
+      .preview= image_tag "new_repo.png"
+      %input.js-experiment-feature-toggle{ type: "radio", value: "true", name: "new_repo", checked: show_new_repo? }
+      New
+  .col-sm-12
+    %hr
   .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       Behavior

app/views/projects/_files.html.haml

 - commit = local_assigns.fetch(:commit) { @repository.commit }
 - ref = local_assigns.fetch(:ref) { current_ref }
 - project = local_assigns.fetch(:project) { @project }
-.tree-holder.clearfix
+- content_url = local_assigns.fetch(:content_url) { @tree.readme ? project_blob_path(@project, tree_join(@ref, @tree.readme.path)) : project_tree_path(@project, @ref) }
+
+#tree-holder.tree-holder.clearfix
   .nav-block
     = render 'projects/tree/tree_header', tree: @tree
 
-  - if commit
-    .info-well.hidden-xs.project-last-commit.append-bottom-default
-      .well-segment
-        %ul.blob-commit-info
-          = render 'projects/commits/commit', commit: commit, ref: ref, project: project
+  - if !show_new_repo? && commit
+    = render 'shared/commit_well', commit: commit, ref: ref, project: project
 
-  = render 'projects/tree/tree_content', tree: @tree
+  = render 'projects/tree/tree_content', tree: @tree, content_url: content_url

app/views/projects/blob/_blob.html.haml

@@ -9,5 +9,5 @@
 
 #blob-content-holder.blob-content-holder
   %article.file-holder
-    = render "projects/blob/header", blob: blob
+    = render 'projects/blob/header', blob: blob
     = render 'projects/blob/content', blob: blob

app/views/projects/blob/_viewer.html.haml

@@ -17,3 +17,4 @@
     - viewer = BlobViewer::Download.new(viewer.blob) if viewer.binary_detected_after_load?
 
     = render viewer.partial_path, viewer: viewer
+

app/views/projects/blob/show.html.haml

@@ -5,16 +5,23 @@
 = render "projects/commits/head"
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('blob')
+  = webpack_bundle_tag 'blob'
+
+  - if show_new_repo?
+    = webpack_bundle_tag 'common_vue'
+    = webpack_bundle_tag 'repo'
 
 = render 'projects/last_push'
 
 %div{ class: container_class }
-  .tree-holder
-    = render 'blob', blob: @blob
+  - if show_new_repo?
+    = render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_blob_path(@project, @id)
+  - else
+    #tree-holder.tree-holder
+      = render 'blob', blob: @blob
 
-  - if can_modify_blob?(@blob)
-    = render 'projects/blob/remove'
+    - if can_modify_blob?(@blob)
+      = render 'projects/blob/remove'
 
-    - title = "Replace #{@blob.name}"
-    = render 'projects/blob/upload', title: title, placeholder: title, button_title: 'Replace file', form_path: project_update_blob_path(@project, @id), method: :put
+      - title = "Replace #{@blob.name}"
+      = render 'projects/blob/upload', title: title, placeholder: title, button_title: 'Replace file', form_path: project_update_blob_path(@project, @id), method: :put

app/views/projects/blob/viewers/_balsamiq.html.haml

 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('balsamiq_viewer')
 
-.file-content.balsamiq-viewer#js-balsamiq-viewer{ data: { endpoint: blob_raw_url } }
+.file-content.balsamiq-viewer#js-balsamiq-viewer{ data: { endpoint: blob_raw_path } }

app/views/projects/blob/viewers/_download.html.haml

 .file-content.blob_file.blob-no-preview
   .center
-    = link_to blob_raw_url do
+    = link_to blob_raw_path do
       %h1.light
         = icon('download')
       %h4

app/views/projects/blob/viewers/_image.html.haml

 .file-content.image_file
-  = image_tag(blob_raw_url, alt: viewer.blob.name)
+  = image_tag(blob_raw_path, alt: viewer.blob.name)

app/views/projects/blob/viewers/_notebook.html.haml

@@ -2,4 +2,4 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('notebook_viewer')
 
-.file-content#js-notebook-viewer{ data: { endpoint: blob_raw_url } }
+.file-content#js-notebook-viewer{ data: { endpoint: blob_raw_path } }

app/views/projects/blob/viewers/_pdf.html.haml

@@ -2,4 +2,4 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('pdf_viewer')
 
-.file-content#js-pdf-viewer{ data: { endpoint: blob_raw_url } }
+.file-content#js-pdf-viewer{ data: { endpoint: blob_raw_path } }

app/views/projects/blob/viewers/_sketch.html.haml

@@ -2,6 +2,6 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('sketch_viewer')
 
-.file-content#js-sketch-viewer{ data: { endpoint: blob_raw_url } }
+.file-content#js-sketch-viewer{ data: { endpoint: blob_raw_path } }
   .js-loading-icon.text-center.prepend-top-default.append-bottom-default.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }
     = icon('spinner spin 2x', 'aria-hidden' => 'true');

app/views/projects/blob/viewers/_stl.html.haml

@@ -2,7 +2,7 @@
   = page_specific_javascript_bundle_tag('stl_viewer')
 
 .file-content.is-stl-loading
-  .text-center#js-stl-viewer{ data: { endpoint: blob_raw_url } }
+  .text-center#js-stl-viewer{ data: { endpoint: blob_raw_path } }
     = icon('spinner spin 2x', class: 'prepend-top-default append-bottom-default', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
   .text-center.prepend-top-default.append-bottom-default.stl-controls
     .btn-group

app/views/projects/blob/viewers/_video.html.haml

 .file-content.video
-  %video{ src: blob_raw_url, controls: true, data: { setup: '{}' } }
+  %video{ src: blob_raw_path, controls: true, data: { setup: '{}' } }

app/views/projects/tree/_old_tree_content.html.haml

+.tree-content-holder.js-tree-content{ 'data-logs-path': @logs_path }
+  .table-holder
+    %table.table#tree-slider{ class: "table_#{@hex_path} tree-table" }
+      %thead
+        %tr
+          %th= s_('ProjectFileTree|Name')
+          %th.hidden-xs
+            .pull-left= _('Last commit')
+          %th.text-right= _('Last Update')
+      - if @path.present?
+        %tr.tree-item
+          %td.tree-item-file-name
+            = link_to "..", project_tree_path(@project, up_dir_path), class: 'prepend-left-10'
+          %td
+          %td.hidden-xs
+
+      = render_tree(tree)
+
+  - if tree.readme
+    = render "projects/tree/readme", readme: tree.readme
+
+- if can_edit_tree?
+  = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, @id), method: :post
+  = render 'projects/blob/new_dir'

app/views/projects/tree/_old_tree_header.html.haml

+%ul.breadcrumb.repo-breadcrumb
+  %li
+    = link_to project_tree_path(@project, @ref) do
+      = @project.path
+  - path_breadcrumbs do |title, path|
+    %li
+      = link_to truncate(title, length: 40), project_tree_path(@project, tree_join(@ref, path))
+
+  - if current_user
+    %li
+      - if !on_top_of_branch?
+        %span.btn.add-to-tree.disabled.has-tooltip{ title: _("You can only add files when you are on a branch"), data: { container: 'body' } }
+          = icon('plus')
+      - else
+        %span.dropdown
+          %a.dropdown-toggle.btn.add-to-tree{ href: '#', "data-toggle" => "dropdown", "data-target" => ".add-to-tree-dropdown" }
+            = icon('plus')
+        .add-to-tree-dropdown
+          %ul.dropdown-menu
+            - if can_edit_tree?
+              %li
+                = link_to project_new_blob_path(@project, @id) do
+                  = icon('pencil fw')
+                  #{ _('New file') }
+              %li
+                = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } do
+                  = icon('file fw')
+                  #{ _('Upload file') }
+              %li
+                = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal' } do
+                  = icon('folder fw')
+                  #{ _('New directory') }
+            - elsif can?(current_user, :fork_project, @project)
+              %li
+                - continue_params = { to:         project_new_blob_path(@project, @id),
+                                      notice:     edit_in_new_fork_notice,
+                                      notice_now: edit_in_new_fork_notice_now }
+                - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
+                                                                                        continue:       continue_params)
+                = link_to fork_path, method: :post do
+                  = icon('pencil fw')
+                  #{ _('New file') }
+              %li
+                - continue_params = { to:         request.fullpath,
+                                      notice:     edit_in_new_fork_notice + " Try to upload a file again.",
+                                      notice_now: edit_in_new_fork_notice_now }
+                - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
+                                                                                        continue:       continue_params)
+                = link_to fork_path, method: :post do
+                  = icon('file fw')
+                  #{ _('Upload file') }
+              %li
+                - continue_params = { to:         request.fullpath,
+                                      notice:     edit_in_new_fork_notice + " Try to create a new directory again.",
+                                      notice_now: edit_in_new_fork_notice_now }
+                - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
+                                                                                        continue:       continue_params)
+                = link_to fork_path, method: :post do
+                  = icon('folder fw')
+                  #{ _('New directory') }
+
+            %li.divider
+            %li
+              = link_to new_project_branch_path(@project) do
+                = icon('code-fork fw')
+                #{ _('New branch') }
+            %li
+              = link_to new_project_tag_path(@project) do
+                = icon('tags fw')
+                #{ _('New tag') }

app/views/projects/tree/_tree_content.html.haml

-.tree-content-holder.js-tree-content{ 'data-logs-path': @logs_path }
-  .table-holder
-    %table.table#tree-slider{ class: "table_#{@hex_path} tree-table" }
-      %thead
-        %tr
-          %th= s_('ProjectFileTree|Name')
-          %th.hidden-xs
-            .pull-left= _('Last commit')
-          %th.text-right= _('Last Update')
-      - if @path.present?
-        %tr.tree-item
-          %td.tree-item-file-name
-            = link_to "..", project_tree_path(@project, up_dir_path), class: 'prepend-left-10'
-          %td
-          %td.hidden-xs
-
-      = render_tree(tree)
-
-  - if tree.readme
-    = render "projects/tree/readme", readme: tree.readme
-
-- if can_edit_tree?
-  = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, @id), method: :post
-  = render 'projects/blob/new_dir'
+- content_url = local_assigns.fetch(:content_url, nil)
+- if show_new_repo?
+  = render 'shared/repo/repo', project: @project, content_url: content_url
+- else
+  = render 'projects/tree/old_tree_content', tree: tree

app/views/projects/tree/_tree_header.html.haml

 .tree-ref-container
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'tree', path: @path
+    - if show_new_repo?
+      = icon('long-arrow-right', title: 'to target branch')
+      = render 'shared/target_switcher', destination: 'tree', path: @path
 
-  %ul.breadcrumb.repo-breadcrumb
-    %li
-      = link_to project_tree_path(@project, @ref) do
-        = @project.path
-    - path_breadcrumbs do |title, path|
-      %li
-        = link_to truncate(title, length: 40), project_tree_path(@project, tree_join(@ref, path))
-
-    - if current_user
-      %li
-        - if !on_top_of_branch?
-          %span.btn.add-to-tree.disabled.has-tooltip{ title: _("You can only add files when you are on a branch"), data: { container: 'body' } }
-            = icon('plus')
-        - else
-          %span.dropdown
-            %a.dropdown-toggle.btn.add-to-tree{ href: '#', "data-toggle" => "dropdown", "data-target" => ".add-to-tree-dropdown" }
-              = icon('plus')
-          .add-to-tree-dropdown
-            %ul.dropdown-menu
-              - if can_edit_tree?
-                %li
-                  = link_to project_new_blob_path(@project, @id) do
-                    = icon('pencil fw')
-                    #{ _('New file') }
-                %li
-                  = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } do
-                    = icon('file fw')
-                    #{ _('Upload file') }
-                %li
-                  = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal' } do
-                    = icon('folder fw')
-                    #{ _('New directory') }
-              - elsif can?(current_user, :fork_project, @project)
-                %li
-                  - continue_params = { to:         project_new_blob_path(@project, @id),
-                                        notice:     edit_in_new_fork_notice,
-                                        notice_now: edit_in_new_fork_notice_now }
-                  - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
-                                                                                          continue:       continue_params)
-                  = link_to fork_path, method: :post do
-                    = icon('pencil fw')
-                    #{ _('New file') }
-                %li
-                  - continue_params = { to:         request.fullpath,
-                                        notice:     edit_in_new_fork_notice + " Try to upload a file again.",
-                                        notice_now: edit_in_new_fork_notice_now }
-                  - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
-                                                                                          continue:       continue_params)
-                  = link_to fork_path, method: :post do
-                    = icon('file fw')
-                    #{ _('Upload file') }
-                %li
-                  - continue_params = { to:         request.fullpath,
-                                        notice:     edit_in_new_fork_notice + " Try to create a new directory again.",
-                                        notice_now: edit_in_new_fork_notice_now }
-                  - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
-                                                                                          continue:       continue_params)
-                  = link_to fork_path, method: :post do
-                    = icon('folder fw')
-                    #{ _('New directory') }
-
-              %li.divider
-              %li
-                = link_to new_project_branch_path(@project) do
-                  = icon('code-fork fw')
-                  #{ _('New branch') }
-              %li
-                = link_to new_project_tag_path(@project) do
-                  = icon('tags fw')
-                  #{ _('New tag') }
+  - unless show_new_repo?
+    = render 'projects/tree/old_tree_header'
 
 .tree-controls
-  = render 'projects/find_file_link'
+  - if show_new_repo?
+    = render 'shared/repo/editable_mode'
+  - else
+    = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
 
-  = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
+  = render 'projects/find_file_link'
 
   = render 'projects/buttons/download', project: @project, ref: @ref

app/views/projects/tree/show.html.haml

@@ -5,8 +5,14 @@
 - page_title @path.presence || _("Files"), @ref
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_commits_url(@project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits")
+
+- if show_new_repo?
+  - content_for :page_specific_javascripts do
+    = webpack_bundle_tag 'common_vue'
+    = webpack_bundle_tag 'repo'
+
 = render "projects/commits/head"
 
 %div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
   = render 'projects/last_push'
-  = render 'projects/files', commit: @last_commit, project: @project, ref: @ref
+  = render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)

app/views/shared/_commit_well.html.haml

+.info-well.hidden-xs.project-last-commit.append-bottom-default
+  .well-segment
+    %ul.blob-commit-info
+      = render 'projects/commits/commit', commit: commit, ref: ref, project: project

app/views/shared/_target_switcher.html.haml

+- dropdown_toggle_text = @ref || @project.default_branch
+= form_tag nil, method: :get, class: "project-refs-target-form" do
+  = hidden_field_tag :destination, destination
+  - if defined?(path)
+    = hidden_field_tag :path, path
+  - @options && @options.each do |key, value|
+    = hidden_field_tag key, value, id: nil
+  .dropdown
+    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_project_path(@project, find: ['branches']), field_name: 'ref', input_field_name: 'new-branch', submit_form_on_click: true, visit: false }, { toggle_class: "js-project-refs-dropdown" }
+    %ul.dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
+      %li
+        = dropdown_title _("Create a new branch")
+      %li
+        = dropdown_input _("Create a new branch")
+      %li
+        = dropdown_title _("Select existing branch"), options: {close: false}
+      %li
+        = dropdown_filter _("Search branches and tags")
+        = dropdown_content
+        = dropdown_loading

app/views/shared/_user_dropdown_experimental_features.html.haml

+%li= link_to 'Experimental features', profile_preferences_path(anchor: 'experimental-features')

app/views/shared/issuable/_label_page_create.html.haml

 .dropdown-page-two.dropdown-new-label
-  = dropdown_title("Create new label", back: true)
+  = dropdown_title("Create new label", options: { back: true })
   = dropdown_content do
     .dropdown-labels-error.js-label-error
     %input#new_label_name.default-dropdown-input{ type: "text", placeholder: "Name new label" }

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

+.editable-mode
+  %repo-edit-button

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

+#repo{ data: { url: content_url, project_name: project.name, refs_url: refs_project_path(project, format: :json), project_url: project_path(project), project_id: project.id, can_commit: (!!can_push_branch?(project, @ref)).to_s } }
+  %repo

config/webpack.config.js

@@ -4,6 +4,7 @@ var fs = require('fs');
 var path = require('path');
 var webpack = require('webpack');
 var StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
+var CopyWebpackPlugin = require('copy-webpack-plugin');
 var CompressionPlugin = require('compression-webpack-plugin');
 var NameAllModulesPlugin = require('name-all-modules-plugin');
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -65,6 +66,7 @@ var config = {
     prometheus_metrics:   './prometheus_metrics',
     protected_branches:   './protected_branches',
     protected_tags:       './protected_tags',
+    repo:                 './repo/index.js',
     sidebar:              './sidebar/sidebar_bundle.js',
     schedule_form:        './pipeline_schedules/pipeline_schedule_form_bundle.js',
     schedules_index:      './pipeline_schedules/pipeline_schedules_index_bundle.js',
@@ -122,7 +124,16 @@ var config = {
         test: /locale\/\w+\/(.*)\.js$/,
         loader: 'exports-loader?locales',
       },
-    ]
+      {
+        test: /monaco-editor\/\w+\/vs\/loader\.js$/,
+        use: [
+          { loader: 'exports-loader', options: 'l.global' },
+          { loader: 'imports-loader', options: 'l=>{},this=>l,AMDLoader=>this,module=>undefined' },
+        ],
+      }
+    ],
+
+    noParse: [/monaco-editor\/\w+\/vs\//],
   },
 
   plugins: [
@@ -187,6 +198,7 @@ var config = {
         'pdf_viewer',
         'pipelines',
         'pipelines_details',
+        'repo',
         'schedule_form',
         'schedules_index',
         'sidebar',
@@ -210,6 +222,26 @@ var config = {
     new webpack.optimize.CommonsChunkPlugin({
       names: ['main', 'locale', 'common', 'webpack_runtime'],
     }),
+
+    // copy pre-compiled vendor libraries verbatim
+    new CopyWebpackPlugin([
+      {
+        from: path.join(ROOT_PATH, `node_modules/monaco-editor/${IS_PRODUCTION ? 'min' : 'dev'}/vs`),
+        to: 'monaco-editor/vs',
+        transform: function(content, path) {
+          if (/\.js$/.test(path) && !/worker/i.test(path)) {
+            return (
+              '(function(){\n' +
+              'var define = this.define, require = this.require;\n' +
+              'window.define = define; window.require = require;\n' +
+              content +
+              '\n}.call(window.__monaco_context__ || (window.__monaco_context__ = {})));'
+            );
+          }
+          return content;
+        }
+      }
+    ]),
   ],
 
   resolve: {

doc/api/commits.md

@@ -69,8 +69,9 @@ POST /projects/:id/repository/commits
 | Attribute | Type | Required | Description |
 | --------- | ---- | -------- | ----------- |
 | `id` | integer/string | yes | The ID or [URL-encoded path of the project](README.md#namespaced-path-encoding) |
-| `branch` | string | yes | The name of a branch |
+| `branch` | string | yes | Name of the branch to commit into. To create a new branch, also provide `start_branch`. |
 | `commit_message` | string | yes | Commit message |
+| `start_branch` | string | no | Name of the branch to start the new commit from |
 | `actions[]` | array | yes | An array of action hashes to commit as a batch. See the next table for what attributes it can take. |
 | `author_email` | string | no | Specify the commit author's email address |
 | `author_name` | string | no | Specify the commit author's name |

doc/api/repository_files.md

@@ -76,7 +76,8 @@ Example response:
 Parameters:
 
 - `file_path` (required) - Url encoded full path to new file. Ex. lib%2Fclass%2Erb
-- `branch` (required) - The name of branch
+- `branch` (required) - Name of the branch
+- `start_branch` (optional) - Name of the branch to start the new commit from
 - `encoding` (optional) - Change encoding to 'base64'. Default is text.
 - `author_email` (optional) - Specify the commit author's email address
 - `author_name` (optional) - Specify the commit author's name
@@ -105,7 +106,8 @@ Example response:
 Parameters:
 
 - `file_path` (required) - Url encoded full path to new file. Ex. lib%2Fclass%2Erb
-- `branch` (required) - The name of branch
+- `branch` (required) - Name of the branch
+- `start_branch` (optional) - Name of the branch to start the new commit from
 - `encoding` (optional) - Change encoding to 'base64'. Default is text.
 - `author_email` (optional) - Specify the commit author's email address
 - `author_name` (optional) - Specify the commit author's name
@@ -144,7 +146,8 @@ Example response:
 Parameters:
 
 - `file_path` (required) - Url encoded full path to new file. Ex. lib%2Fclass%2Erb
-- `branch` (required) - The name of branch
+- `branch` (required) - Name of the branch
+- `start_branch` (optional) - Name of the branch to start the new commit from
 - `author_email` (optional) - Specify the commit author's email address
 - `author_name` (optional) - Specify the commit author's name
 - `commit_message` (required) - Commit message

lib/api/commits.rb

@@ -53,16 +53,19 @@ module API
         detail 'This feature was introduced in GitLab 8.13'
       end
       params do
-        requires :branch, type: String, desc: 'The name of branch'
+        requires :branch, type: String, desc: 'Name of the branch to commit into. To create a new branch, also provide `start_branch`.'
         requires :commit_message, type: String, desc: 'Commit message'
         requires :actions, type: Array[Hash], desc: 'Actions to perform in commit'
+        optional :start_branch, type: String, desc: 'Name of the branch to start the new commit from'
         optional :author_email, type: String, desc: 'Author email for commit'
         optional :author_name, type: String, desc: 'Author name for commit'
       end
       post ":id/repository/commits" do
         authorize! :push_code, user_project
 
-        attrs = declared_params.merge(start_branch: declared_params[:branch], branch_name: declared_params[:branch])
+        attrs = declared_params
+        attrs[:branch_name] = attrs.delete(:branch)
+        attrs[:start_branch] ||= attrs[:branch_name]
 
         result = ::Files::MultiService.new(user_project, current_user, attrs).execute
 

lib/api/files.rb

@@ -4,7 +4,7 @@ module API
       def commit_params(attrs)
         {
           file_path: attrs[:file_path],
-          start_branch: attrs[:branch],
+          start_branch: attrs[:start_branch] || attrs[:branch],
           branch_name: attrs[:branch],
           commit_message: attrs[:commit_message],
           file_content: attrs[:content],
@@ -37,8 +37,9 @@ module API
 
       params :simple_file_params do
         requires :file_path, type: String, desc: 'The url encoded path to the file. Ex. lib%2Fclass%2Erb'
-        requires :branch, type: String, desc: 'The name of branch'
-        requires :commit_message, type: String, desc: 'Commit Message'
+        requires :branch, type: String, desc: 'Name of the branch to commit into. To create a new branch, also provide `start_branch`.'
+        requires :commit_message, type: String, desc: 'Commit message'
+        optional :start_branch, type: String, desc: 'Name of the branch to start the new commit from'
         optional :author_email, type: String, desc: 'The email of the author'
         optional :author_name, type: String, desc: 'The name of the author'
       end

package.json

@@ -12,6 +12,7 @@
     "webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
   },
   "dependencies": {
+    "axios": "^0.16.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.2.1",
     "babel-loader": "^7.1.1",
@@ -20,6 +21,7 @@
     "babel-preset-stage-2": "^6.22.0",
     "bootstrap-sass": "^3.3.6",
     "compression-webpack-plugin": "^0.3.2",
+    "copy-webpack-plugin": "^4.0.1",
     "core-js": "^2.4.1",
     "cropper": "^2.3.0",
     "css-loader": "^0.28.0",
@@ -31,6 +33,7 @@
     "eslint-plugin-html": "^2.0.1",
     "exports-loader": "^0.6.4",
     "file-loader": "^0.11.1",
+    "imports-loader": "^0.7.1",
     "jed": "^1.1.1",
     "jquery": "^2.2.1",
     "jquery-ujs": "^1.2.1",
@@ -38,6 +41,7 @@
     "jszip": "^3.1.3",
     "jszip-utils": "^0.0.2",
     "marked": "^0.3.6",
+    "monaco-editor": "0.8.3",
     "mousetrap": "^1.4.6",
     "name-all-modules-plugin": "^1.0.1",
     "pikaday": "^1.5.1",

spec/controllers/projects/blob_controller_spec.rb

@@ -35,6 +35,26 @@ describe Projects::BlobController do
       end
     end
 
+    context 'with file path and JSON format' do
+      context "valid branch, valid file" do
+        let(:id) { 'master/README.md' }
+
+        before do
+          get(:show,
+              namespace_id: project.namespace,
+              project_id: project,
+              id: id,
+              format: :json)
+        end
+
+        it do
+          expect(response).to be_ok
+          expect(json_response).to have_key 'html'
+          expect(json_response).to have_key 'raw_path'
+        end
+      end
+    end
+
     context 'with tree path' do
       before do
         get(:show,

spec/javascripts/blob/viewer/index_spec.js

@@ -3,10 +3,10 @@ import BlobViewer from '~/blob/viewer/index';
 
 describe('Blob viewer', () => {
   let blob;
-  preloadFixtures('blob/show.html.raw');
+  preloadFixtures('snippets/show.html.raw');
 
   beforeEach(() => {
-    loadFixtures('blob/show.html.raw');
+    loadFixtures('snippets/show.html.raw');
     $('#modal-upload-blob').remove();
 
     blob = new BlobViewer();

spec/javascripts/fixtures/blob.rb → spec/javascripts/fixtures/snippet.rb

 require 'spec_helper'
 
-describe Projects::BlobController, '(JavaScript fixtures)', type: :controller do
+describe SnippetsController, '(JavaScript fixtures)', type: :controller do
   include JavaScriptFixturesHelpers
 
   let(:admin) { create(:admin) }
   let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
   let(:project) { create(:project, :repository, namespace: namespace, path: 'branches-project') }
+  let(:snippet) { create(:personal_snippet, title: 'snippet.md', content: '# snippet', file_name: 'snippet.md', author: admin) }
 
   render_views
 
   before(:all) do
-    clean_frontend_fixtures('blob/')
+    clean_frontend_fixtures('snippets/')
   end
 
   before(:each) do
     sign_in(admin)
   end
 
-  it 'blob/show.html.raw' do |example|
-    get(:show,
-        namespace_id: project.namespace,
-        project_id: project,
-        id: 'add-ipython-files/files/ipython/basic.ipynb')
+  it 'snippets/show.html.raw' do |example|
+    get(:show, id: snippet.to_param)
 
     expect(response).to be_success
     store_frontend_fixture(response, example.description)

spec/javascripts/repo/components/repo_commit_section_spec.js

+import Vue from 'vue';
+import repoCommitSection from '~/repo/components/repo_commit_section.vue';
+import RepoStore from '~/repo/stores/repo_store';
+import RepoHelper from '~/repo/helpers/repo_helper';
+import Api from '~/api';
+
+describe('RepoCommitSection', () => {
+  const branch = 'master';
+  const projectUrl = 'projectUrl';
+  const openedFiles = [{
+    id: 0,
+    changed: true,
+    url: `/namespace/${projectUrl}/blob/${branch}/dir/file0.ext`,
+    newContent: 'a',
+  }, {
+    id: 1,
+    changed: true,
+    url: `/namespace/${projectUrl}/blob/${branch}/dir/file1.ext`,
+    newContent: 'b',
+  }, {
+    id: 2,
+    url: `/namespace/${projectUrl}/blob/${branch}/dir/file2.ext`,
+    changed: false,
+  }];
+
+  RepoStore.projectUrl = projectUrl;
+
+  function createComponent() {
+    const RepoCommitSection = Vue.extend(repoCommitSection);
+
+    return new RepoCommitSection().$mount();
+  }
+
+  it('renders a commit section', () => {
+    RepoStore.isCommitable = true;
+    RepoStore.targetBranch = branch;
+    RepoStore.openedFiles = openedFiles;
+
+    spyOn(RepoHelper, 'getBranch').and.returnValue(branch);
+
+    const vm = createComponent();
+    const changedFiles = [...vm.$el.querySelectorAll('.changed-files > li')];
+    const commitMessage = vm.$el.querySelector('#commit-message');
+    const submitCommit = vm.$el.querySelector('.submit-commit');
+    const targetBranch = vm.$el.querySelector('.target-branch');
+
+    expect(vm.$el.querySelector(':scope > form')).toBeTruthy();
+    expect(vm.$el.querySelector('.staged-files').textContent).toEqual('Staged files (2)');
+    expect(changedFiles.length).toEqual(2);
+
+    changedFiles.forEach((changedFile, i) => {
+      const filePath = RepoHelper.getFilePathFromFullPath(openedFiles[i].url, branch);
+
+      expect(changedFile.textContent).toEqual(filePath);
+    });
+
+    expect(commitMessage.tagName).toEqual('TEXTAREA');
+    expect(commitMessage.name).toEqual('commit-message');
+    expect(submitCommit.type).toEqual('submit');
+    expect(submitCommit.disabled).toBeTruthy();
+    expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeFalsy();
+    expect(vm.$el.querySelector('.commit-summary').textContent).toEqual('Commit 2 files');
+    expect(targetBranch.querySelector(':scope > label').textContent).toEqual('Target branch');
+    expect(targetBranch.querySelector('.help-block').textContent).toEqual(branch);
+  });
+
+  it('does not render if not isCommitable', () => {
+    RepoStore.isCommitable = false;
+    RepoStore.openedFiles = [{
+      id: 0,
+      changed: true,
+    }];
+
+    const vm = createComponent();
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+
+  it('does not render if no changedFiles', () => {
+    RepoStore.isCommitable = true;
+    RepoStore.openedFiles = [];
+
+    const vm = createComponent();
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+
+  it('shows commit submit and summary if commitMessage and spinner if submitCommitsLoading', (done) => {
+    const projectId = 'projectId';
+    const commitMessage = 'commitMessage';
+    RepoStore.isCommitable = true;
+    RepoStore.openedFiles = openedFiles;
+    RepoStore.projectId = projectId;
+
+    spyOn(RepoHelper, 'getBranch').and.returnValue(branch);
+
+    const vm = createComponent();
+    const commitMessageEl = vm.$el.querySelector('#commit-message');
+    const submitCommit = vm.$el.querySelector('.submit-commit');
+
+    vm.commitMessage = commitMessage;
+
+    Vue.nextTick(() => {
+      expect(commitMessageEl.value).toBe(commitMessage);
+      expect(submitCommit.disabled).toBeFalsy();
+
+      spyOn(vm, 'makeCommit').and.callThrough();
+      spyOn(Api, 'commitMultiple');
+
+      submitCommit.click();
+
+      Vue.nextTick(() => {
+        expect(vm.makeCommit).toHaveBeenCalled();
+        expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeTruthy();
+
+        const args = Api.commitMultiple.calls.allArgs()[0];
+        const { commit_message, actions, branch: payloadBranch } = args[1];
+
+        expect(args[0]).toBe(projectId);
+        expect(commit_message).toBe(commitMessage);
+        expect(actions.length).toEqual(2);
+        expect(payloadBranch).toEqual(branch);
+        expect(actions[0].action).toEqual('update');
+        expect(actions[1].action).toEqual('update');
+        expect(actions[0].content).toEqual(openedFiles[0].newContent);
+        expect(actions[1].content).toEqual(openedFiles[1].newContent);
+        expect(actions[0].file_path)
+          .toEqual(RepoHelper.getFilePathFromFullPath(openedFiles[0].url, branch));
+        expect(actions[1].file_path)
+          .toEqual(RepoHelper.getFilePathFromFullPath(openedFiles[1].url, branch));
+
+        done();
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('resetCommitState', () => {
+      it('should reset store vars and scroll to top', () => {
+        const vm = {
+          submitCommitsLoading: true,
+          changedFiles: new Array(10),
+          openedFiles: new Array(10),
+          commitMessage: 'commitMessage',
+          editMode: true,
+        };
+
+        repoCommitSection.methods.resetCommitState.call(vm);
+
+        expect(vm.submitCommitsLoading).toEqual(false);
+        expect(vm.changedFiles).toEqual([]);
+        expect(vm.openedFiles).toEqual([]);
+        expect(vm.commitMessage).toEqual('');
+        expect(vm.editMode).toEqual(false);
+      });
+    });
+  });
+});

spec/javascripts/repo/components/repo_edit_button_spec.js

+import Vue from 'vue';
+import repoEditButton from '~/repo/components/repo_edit_button.vue';
+import RepoStore from '~/repo/stores/repo_store';
+
+describe('RepoEditButton', () => {
+  function createComponent() {
+    const RepoEditButton = Vue.extend(repoEditButton);
+
+    return new RepoEditButton().$mount();
+  }
+
+  it('renders an edit button that toggles the view state', (done) => {
+    RepoStore.isCommitable = true;
+    RepoStore.changedFiles = [];
+
+    const vm = createComponent();
+
+    expect(vm.$el.tagName).toEqual('BUTTON');
+    expect(vm.$el.textContent).toMatch('Edit');
+
+    spyOn(vm, 'editClicked').and.callThrough();
+
+    vm.$el.click();
+
+    Vue.nextTick(() => {
+      expect(vm.editClicked).toHaveBeenCalled();
+      expect(vm.$el.textContent).toMatch('Cancel edit');
+      done();
+    });
+  });
+
+  it('does not render if not isCommitable', () => {
+    RepoStore.isCommitable = false;
+
+    const vm = createComponent();
+
+    expect(vm.$el.innerHTML).toBeUndefined();
+  });
+
+  describe('methods', () => {
+    describe('editClicked', () => {
+      it('sets dialog to open when there are changedFiles', () => {
+
+      });
+
+      it('toggles editMode and calls toggleBlobView', () => {
+
+      });
+    });
+  });
+});

spec/javascripts/repo/components/repo_editor_spec.js

+import Vue from 'vue';
+import repoEditor from '~/repo/components/repo_editor.vue';
+import RepoStore from '~/repo/stores/repo_store';
+
+describe('RepoEditor', () => {
+  function createComponent() {
+    const RepoEditor = Vue.extend(repoEditor);
+
+    return new RepoEditor().$mount();
+  }
+
+  it('renders an ide container', () => {
+    const monacoInstance = jasmine.createSpyObj('monacoInstance', ['onMouseUp', 'onKeyUp', 'setModel', 'updateOptions']);
+    const monaco = {
+      editor: jasmine.createSpyObj('editor', ['create']),
+    };
+    RepoStore.monaco = monaco;
+
+    monaco.editor.create.and.returnValue(monacoInstance);
+    spyOn(repoEditor.watch, 'blobRaw');
+
+    const vm = createComponent();
+
+    expect(vm.$el.id).toEqual('ide');
+  });
+});

spec/javascripts/repo/components/repo_file_buttons_spec.js

+import Vue from 'vue';
+import repoFileButtons from '~/repo/components/repo_file_buttons.vue';
+import RepoStore from '~/repo/stores/repo_store';
+
+describe('RepoFileButtons', () => {
+  function createComponent() {
+    const RepoFileButtons = Vue.extend(repoFileButtons);
+
+    return new RepoFileButtons().$mount();
+  }
+
+  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;
+    RepoStore.activeFileLabel = activeFileLabel;
+    RepoStore.editMode = true;
+
+    const vm = createComponent();
+    const raw = vm.$el.querySelector('.raw');
+    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).toEqual('Raw');
+    expect(blame.href).toMatch(`/${activeFile.blame_path}`);
+    expect(blame.textContent).toEqual('Blame');
+    expect(history.href).toMatch(`/${activeFile.commits_path}`);
+    expect(history.textContent).toEqual('History');
+    expect(vm.$el.querySelector('.permalink').textContent).toEqual('Permalink');
+    expect(vm.$el.querySelector('.preview').textContent).toEqual(activeFileLabel);
+  });
+
+  it('triggers rawPreviewToggle on preview click', () => {
+    const activeFile = {
+      extension: 'md',
+      url: 'url',
+    };
+    RepoStore.openedFiles = new Array(1);
+    RepoStore.activeFile = activeFile;
+    RepoStore.editMode = true;
+
+    const vm = createComponent();
+    const preview = vm.$el.querySelector('.preview');
+
+    spyOn(vm, 'rawPreviewToggle');
+
+    preview.click();
+
+    expect(vm.rawPreviewToggle).toHaveBeenCalled();
+  });
+
+  it('does not render preview toggle if not canPreview', () => {
+    const activeFile = {
+      extension: 'abcd',
+      url: 'url',
+    };
+    RepoStore.openedFiles = new Array(1);
+    RepoStore.activeFile = activeFile;
+
+    const vm = createComponent();
+
+    expect(vm.$el.querySelector('.preview')).toBeFalsy();
+  });
+
+  it('does not render if not isMini', () => {
+    RepoStore.openedFiles = [];
+
+    const vm = createComponent();
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+});

spec/javascripts/repo/components/repo_file_options_spec.js

+import Vue from 'vue';
+import repoFileOptions from '~/repo/components/repo_file_options.vue';
+
+describe('RepoFileOptions', () => {
+  const projectName = 'projectName';
+
+  function createComponent(propsData) {
+    const RepoFileOptions = Vue.extend(repoFileOptions);
+
+    return new RepoFileOptions({
+      propsData,
+    }).$mount();
+  }
+
+  it('renders the title and new file/folder buttons if isMini is true', () => {
+    const vm = createComponent({
+      isMini: true,
+      projectName,
+    });
+
+    expect(vm.$el.classList.contains('repo-file-options')).toBeTruthy();
+    expect(vm.$el.querySelector('.title').textContent).toEqual(projectName);
+  });
+
+  it('does not render if isMini is false', () => {
+    const vm = createComponent({
+      isMini: false,
+      projectName,
+    });
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+});

spec/javascripts/repo/components/repo_file_spec.js

+import Vue from 'vue';
+import repoFile from '~/repo/components/repo_file.vue';
+
+describe('RepoFile', () => {
+  const updated = 'updated';
+  const file = {
+    icon: 'icon',
+    url: 'url',
+    name: 'name',
+    lastCommitMessage: 'message',
+    lastCommitUpdate: Date.now(),
+    level: 10,
+  };
+  const activeFile = {
+    url: 'url',
+  };
+
+  function createComponent(propsData) {
+    const RepoFile = Vue.extend(repoFile);
+
+    return new RepoFile({
+      propsData,
+    }).$mount();
+  }
+
+  beforeEach(() => {
+    spyOn(repoFile.mixins[0].methods, 'timeFormated').and.returnValue(updated);
+  });
+
+  it('renders link, icon, name and last commit details', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+    });
+    const name = vm.$el.querySelector('.repo-file-name');
+    const fileIcon = vm.$el.querySelector('.file-icon');
+
+    expect(vm.$el.classList.contains('active')).toBeTruthy();
+    expect(vm.$el.querySelector(`.${file.icon}`).style.marginLeft).toEqual('100px');
+    expect(name.title).toEqual(file.url);
+    expect(name.href).toMatch(`/${file.url}`);
+    expect(name.textContent).toEqual(file.name);
+    expect(vm.$el.querySelector('.commit-message').textContent).toBe(file.lastCommitMessage);
+    expect(vm.$el.querySelector('.commit-update').textContent).toBe(updated);
+    expect(fileIcon.classList.contains(file.icon)).toBeTruthy();
+    expect(fileIcon.style.marginLeft).toEqual(`${file.level * 10}px`);
+  });
+
+  it('does render if hasFiles is true and is loading tree', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+      loading: {
+        tree: true,
+      },
+      hasFiles: true,
+    });
+
+    expect(vm.$el.innerHTML).toBeTruthy();
+    expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
+  });
+
+  it('renders a spinner if the file is loading', () => {
+    file.loading = true;
+    const vm = createComponent({
+      file,
+      activeFile,
+      loading: {
+        tree: true,
+      },
+      hasFiles: true,
+    });
+
+    expect(vm.$el.innerHTML).toBeTruthy();
+    expect(vm.$el.querySelector('.fa-spin.fa-spinner').style.marginLeft).toEqual(`${file.level * 10}px`);
+  });
+
+  it('does not render if loading tree', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+      loading: {
+        tree: true,
+      },
+    });
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+
+  it('does not render commit message and datetime if mini', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+      isMini: true,
+    });
+
+    expect(vm.$el.querySelector('.commit-message')).toBeFalsy();
+    expect(vm.$el.querySelector('.commit-update')).toBeFalsy();
+  });
+
+  it('does not set active class if file is active file', () => {
+    const vm = createComponent({
+      file,
+      activeFile: {},
+    });
+
+    expect(vm.$el.classList.contains('active')).toBeFalsy();
+  });
+
+  it('fires linkClicked when the link is clicked', () => {
+    const vm = createComponent({
+      file,
+      activeFile,
+    });
+
+    spyOn(vm, 'linkClicked');
+
+    vm.$el.querySelector('.repo-file-name').click();
+
+    expect(vm.linkClicked).toHaveBeenCalledWith(file);
+  });
+
+  describe('methods', () => {
+    describe('linkClicked', () => {
+      const vm = jasmine.createSpyObj('vm', ['$emit']);
+
+      it('$emits linkclicked with file obj', () => {
+        const theFile = {};
+
+        repoFile.methods.linkClicked.call(vm, theFile);
+
+        expect(vm.$emit).toHaveBeenCalledWith('linkclicked', theFile);
+      });
+    });
+  });
+});

spec/javascripts/repo/components/repo_loading_file_spec.js

+import Vue from 'vue';
+import repoLoadingFile from '~/repo/components/repo_loading_file.vue';
+
+describe('RepoLoadingFile', () => {
+  function createComponent(propsData) {
+    const RepoLoadingFile = Vue.extend(repoLoadingFile);
+
+    return new RepoLoadingFile({
+      propsData,
+    }).$mount();
+  }
+
+  function assertLines(lines) {
+    lines.forEach((line, n) => {
+      const index = n + 1;
+      expect(line.classList.contains(`line-of-code-${index}`)).toBeTruthy();
+    });
+  }
+
+  function assertColumns(columns) {
+    columns.forEach((column) => {
+      const container = column.querySelector('.animation-container');
+      const lines = [...container.querySelectorAll(':scope > div')];
+
+      expect(container).toBeTruthy();
+      expect(lines.length).toEqual(6);
+      assertLines(lines);
+    });
+  }
+
+  it('renders 3 columns of animated LoC', () => {
+    const vm = createComponent({
+      loading: {
+        tree: true,
+      },
+      hasFiles: false,
+    });
+    const columns = [...vm.$el.querySelectorAll('td')];
+
+    expect(columns.length).toEqual(3);
+    assertColumns(columns);
+  });
+
+  it('renders 1 column of animated LoC if isMini', () => {
+    const vm = createComponent({
+      loading: {
+        tree: true,
+      },
+      hasFiles: false,
+      isMini: true,
+    });
+    const columns = [...vm.$el.querySelectorAll('td')];
+
+    expect(columns.length).toEqual(1);
+    assertColumns(columns);
+  });
+
+  it('does not render if tree is not loading', () => {
+    const vm = createComponent({
+      loading: {
+        tree: false,
+      },
+      hasFiles: false,
+    });
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+
+  it('does not render if hasFiles is true', () => {
+    const vm = createComponent({
+      loading: {
+        tree: true,
+      },
+      hasFiles: true,
+    });
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+});

spec/javascripts/repo/components/repo_prev_directory_spec.js

+import Vue from 'vue';
+import repoPrevDirectory from '~/repo/components/repo_prev_directory.vue';
+
+describe('RepoPrevDirectory', () => {
+  function createComponent(propsData) {
+    const RepoPrevDirectory = Vue.extend(repoPrevDirectory);
+
+    return new RepoPrevDirectory({
+      propsData,
+    }).$mount();
+  }
+
+  it('renders a prev dir link', () => {
+    const prevUrl = 'prevUrl';
+    const vm = createComponent({
+      prevUrl,
+    });
+    const link = vm.$el.querySelector('a');
+
+    spyOn(vm, 'linkClicked');
+
+    expect(link.href).toMatch(`/${prevUrl}`);
+    expect(link.textContent).toEqual('..');
+
+    link.click();
+
+    expect(vm.linkClicked).toHaveBeenCalledWith(prevUrl);
+  });
+
+  describe('methods', () => {
+    describe('linkClicked', () => {
+      const vm = jasmine.createSpyObj('vm', ['$emit']);
+
+      it('$emits linkclicked with file obj', () => {
+        const file = {};
+
+        repoPrevDirectory.methods.linkClicked.call(vm, file);
+
+        expect(vm.$emit).toHaveBeenCalledWith('linkclicked', file);
+      });
+    });
+  });
+});

spec/javascripts/repo/components/repo_preview_spec.js

+import Vue from 'vue';
+import repoPreview from '~/repo/components/repo_preview.vue';
+import RepoStore from '~/repo/stores/repo_store';
+
+describe('RepoPreview', () => {
+  function createComponent() {
+    const RepoPreview = Vue.extend(repoPreview);
+
+    return new RepoPreview().$mount();
+  }
+
+  it('renders a div with the activeFile html', () => {
+    const activeFile = {
+      html: '<p class="file-content">html</p>',
+    };
+    RepoStore.activeFile = activeFile;
+
+    const vm = createComponent();
+
+    expect(vm.$el.tagName).toEqual('DIV');
+    expect(vm.$el.innerHTML).toContain(activeFile.html);
+  });
+});

spec/javascripts/repo/components/repo_sidebar_spec.js

+import Vue from 'vue';
+import RepoStore from '~/repo/stores/repo_store';
+import repoSidebar from '~/repo/components/repo_sidebar.vue';
+
+describe('RepoSidebar', () => {
+  function createComponent() {
+    const RepoSidebar = Vue.extend(repoSidebar);
+
+    return new RepoSidebar().$mount();
+  }
+
+  it('renders a sidebar', () => {
+    RepoStore.files = [{
+      id: 0,
+    }];
+    const vm = createComponent();
+    const thead = vm.$el.querySelector('thead');
+    const tbody = vm.$el.querySelector('tbody');
+
+    expect(vm.$el.id).toEqual('sidebar');
+    expect(vm.$el.classList.contains('sidebar-mini')).toBeFalsy();
+    expect(thead.querySelector('.name').textContent).toEqual('Name');
+    expect(thead.querySelector('.last-commit').textContent).toEqual('Last Commit');
+    expect(thead.querySelector('.last-update').textContent).toEqual('Last Update');
+    expect(tbody.querySelector('.repo-file-options')).toBeFalsy();
+    expect(tbody.querySelector('.prev-directory')).toBeFalsy();
+    expect(tbody.querySelector('.loading-file')).toBeFalsy();
+    expect(tbody.querySelector('.file')).toBeTruthy();
+  });
+
+  it('does not render a thead, renders repo-file-options and sets sidebar-mini class if isMini', () => {
+    RepoStore.openedFiles = [{
+      id: 0,
+    }];
+    const vm = createComponent();
+
+    expect(vm.$el.classList.contains('sidebar-mini')).toBeTruthy();
+    expect(vm.$el.querySelector('thead')).toBeFalsy();
+    expect(vm.$el.querySelector('tbody .repo-file-options')).toBeTruthy();
+  });
+
+  it('renders 5 loading files if tree is loading and not hasFiles', () => {
+    RepoStore.loading = {
+      tree: true,
+    };
+    RepoStore.files = [];
+    const vm = createComponent();
+
+    expect(vm.$el.querySelectorAll('tbody .loading-file').length).toEqual(5);
+  });
+
+  it('renders a prev directory if isRoot', () => {
+    RepoStore.files = [{
+      id: 0,
+    }];
+    RepoStore.isRoot = true;
+    const vm = createComponent();
+
+    expect(vm.$el.querySelector('tbody .prev-directory')).toBeTruthy();
+  });
+});

spec/javascripts/repo/components/repo_tab_spec.js

+import Vue from 'vue';
+import repoTab from '~/repo/components/repo_tab.vue';
+
+describe('RepoTab', () => {
+  function createComponent(propsData) {
+    const RepoTab = Vue.extend(repoTab);
+
+    return new RepoTab({
+      propsData,
+    }).$mount();
+  }
+
+  it('renders a close link and a name link', () => {
+    const tab = {
+      loading: false,
+      url: 'url',
+      name: 'name',
+    };
+    const vm = createComponent({
+      tab,
+    });
+    const close = vm.$el.querySelector('.close');
+    const name = vm.$el.querySelector(`a[title="${tab.url}"]`);
+
+    spyOn(vm, 'xClicked');
+    spyOn(vm, 'tabClicked');
+
+    expect(close.querySelector('.fa-times')).toBeTruthy();
+    expect(name.textContent).toEqual(tab.name);
+
+    close.click();
+    name.click();
+
+    expect(vm.xClicked).toHaveBeenCalledWith(tab);
+    expect(vm.tabClicked).toHaveBeenCalledWith(tab);
+  });
+
+  it('renders a spinner if tab is loading', () => {
+    const tab = {
+      loading: true,
+      url: 'url',
+    };
+    const vm = createComponent({
+      tab,
+    });
+    const close = vm.$el.querySelector('.close');
+    const name = vm.$el.querySelector(`a[title="${tab.url}"]`);
+
+    expect(close).toBeFalsy();
+    expect(name).toBeFalsy();
+    expect(vm.$el.querySelector('.fa.fa-spinner.fa-spin')).toBeTruthy();
+  });
+
+  it('renders an fa-circle icon if tab is changed', () => {
+    const tab = {
+      loading: false,
+      url: 'url',
+      name: 'name',
+      changed: true,
+    };
+    const vm = createComponent({
+      tab,
+    });
+
+    expect(vm.$el.querySelector('.close .fa-circle')).toBeTruthy();
+  });
+
+  describe('methods', () => {
+    describe('xClicked', () => {
+      const vm = jasmine.createSpyObj('vm', ['$emit']);
+
+      it('returns undefined and does not $emit if file is changed', () => {
+        const file = { changed: true };
+        const returnVal = repoTab.methods.xClicked.call(vm, file);
+
+        expect(returnVal).toBeUndefined();
+        expect(vm.$emit).not.toHaveBeenCalled();
+      });
+
+      it('$emits xclicked event with file obj', () => {
+        const file = { changed: false };
+        repoTab.methods.xClicked.call(vm, file);
+
+        expect(vm.$emit).toHaveBeenCalledWith('xclicked', file);
+      });
+    });
+  });
+});

spec/javascripts/repo/components/repo_tabs_spec.js

+import Vue from 'vue';
+import RepoStore from '~/repo/stores/repo_store';
+import repoTabs from '~/repo/components/repo_tabs.vue';
+
+describe('RepoTabs', () => {
+  const openedFiles = [{
+    id: 0,
+    active: true,
+  }, {
+    id: 1,
+  }];
+
+  function createComponent() {
+    const RepoTabs = Vue.extend(repoTabs);
+
+    return new RepoTabs().$mount();
+  }
+
+  it('renders a list of tabs', () => {
+    RepoStore.openedFiles = openedFiles;
+    RepoStore.tabsOverflow = true;
+
+    const vm = createComponent();
+    const tabs = [...vm.$el.querySelectorAll(':scope > li')];
+
+    expect(vm.$el.id).toEqual('tabs');
+    expect(vm.$el.classList.contains('overflown')).toBeTruthy();
+    expect(tabs.length).toEqual(3);
+    expect(tabs[0].classList.contains('active')).toBeTruthy();
+    expect(tabs[1].classList.contains('active')).toBeFalsy();
+    expect(tabs[2].classList.contains('tabs-divider')).toBeTruthy();
+  });
+
+  it('does not render a tabs list if not isMini', () => {
+    RepoStore.openedFiles = [];
+
+    const vm = createComponent();
+
+    expect(vm.$el.innerHTML).toBeFalsy();
+  });
+
+  it('does not apply overflown class if not tabsOverflow', () => {
+    RepoStore.openedFiles = openedFiles;
+    RepoStore.tabsOverflow = false;
+
+    const vm = createComponent();
+
+    expect(vm.$el.classList.contains('overflown')).toBeFalsy();
+  });
+
+  describe('methods', () => {
+    describe('xClicked', () => {
+      it('calls removeFromOpenedFiles with file obj', () => {
+        const file = {};
+
+        spyOn(RepoStore, 'removeFromOpenedFiles');
+
+        repoTabs.methods.xClicked(file);
+
+        expect(RepoStore.removeFromOpenedFiles).toHaveBeenCalledWith(file);
+      });
+    });
+  });
+});

spec/javascripts/repo/monaco_loader_spec.js

+/* global __webpack_public_path__ */
+import monacoContext from 'monaco-editor/dev/vs/loader';
+
+describe('MonacoLoader', () => {
+  it('calls require.config and exports require', () => {
+    spyOn(monacoContext.require, 'config');
+
+    const monacoLoader = require('~/repo/monaco_loader'); // eslint-disable-line global-require
+
+    expect(monacoContext.require.config).toHaveBeenCalledWith({
+      paths: {
+        vs: `${__webpack_public_path__}monaco-editor/vs`, // eslint-disable-line camelcase
+      },
+    });
+    expect(monacoLoader.default).toBe(monacoContext.require);
+  });
+});

spec/javascripts/repo/services/repo_service_spec.js

+import axios from 'axios';
+import RepoService from '~/repo/services/repo_service';
+
+describe('RepoService', () => {
+  it('has default json format param', () => {
+    expect(RepoService.options.params.format).toBe('json');
+  });
+
+  describe('buildParams', () => {
+    let newParams;
+    const url = 'url';
+
+    beforeEach(() => {
+      newParams = {};
+
+      spyOn(Object, 'assign').and.returnValue(newParams);
+    });
+
+    it('clones params', () => {
+      const params = RepoService.buildParams(url);
+
+      expect(Object.assign).toHaveBeenCalledWith({}, RepoService.options.params);
+
+      expect(params).toBe(newParams);
+    });
+
+    it('sets and returns viewer params to richif urlIsRichBlob is true', () => {
+      spyOn(RepoService, 'urlIsRichBlob').and.returnValue(true);
+
+      const params = RepoService.buildParams(url);
+
+      expect(params.viewer).toEqual('rich');
+    });
+
+    it('returns params urlIsRichBlob is false', () => {
+      spyOn(RepoService, 'urlIsRichBlob').and.returnValue(false);
+
+      const params = RepoService.buildParams(url);
+
+      expect(params.viewer).toBeUndefined();
+    });
+
+    it('calls urlIsRichBlob with the objects url prop if no url arg is provided', () => {
+      spyOn(RepoService, 'urlIsRichBlob');
+      RepoService.url = url;
+
+      RepoService.buildParams();
+
+      expect(RepoService.urlIsRichBlob).toHaveBeenCalledWith(url);
+    });
+  });
+
+  describe('urlIsRichBlob', () => {
+    it('returns true for md extension', () => {
+      const isRichBlob = RepoService.urlIsRichBlob('url.md');
+
+      expect(isRichBlob).toBeTruthy();
+    });
+
+    it('returns false for js extension', () => {
+      const isRichBlob = RepoService.urlIsRichBlob('url.js');
+
+      expect(isRichBlob).toBeFalsy();
+    });
+  });
+
+  describe('getContent', () => {
+    const params = {};
+    const url = 'url';
+    const requestPromise = Promise.resolve();
+
+    beforeEach(() => {
+      spyOn(RepoService, 'buildParams').and.returnValue(params);
+      spyOn(axios, 'get').and.returnValue(requestPromise);
+    });
+
+    it('calls buildParams and axios.get', () => {
+      const request = RepoService.getContent(url);
+
+      expect(RepoService.buildParams).toHaveBeenCalledWith(url);
+      expect(axios.get).toHaveBeenCalledWith(url, {
+        params,
+      });
+      expect(request).toBe(requestPromise);
+    });
+
+    it('uses object url prop if no url arg is provided', () => {
+      RepoService.url = url;
+
+      RepoService.getContent();
+
+      expect(axios.get).toHaveBeenCalledWith(url, {
+        params,
+      });
+    });
+  });
+
+  describe('getBase64Content', () => {
+    const url = 'url';
+    const response = { data: 'data' };
+
+    beforeEach(() => {
+      spyOn(RepoService, 'bufferToBase64');
+      spyOn(axios, 'get').and.returnValue(Promise.resolve(response));
+    });
+
+    it('calls axios.get and bufferToBase64 on completion', (done) => {
+      const request = RepoService.getBase64Content(url);
+
+      expect(axios.get).toHaveBeenCalledWith(url, {
+        responseType: 'arraybuffer',
+      });
+      expect(request).toEqual(jasmine.any(Promise));
+
+      request.then(() => {
+        expect(RepoService.bufferToBase64).toHaveBeenCalledWith(response.data);
+        done();
+      }).catch(done.fail);
+    });
+  });
+});