Merge branch 'master' into 44453-performance-bar-modalbox

* master:
  Changes empty project avatar to identicon in the IDE
  Apply NestingDepth (level 5) (framework/dropdowns.scss)
  Strip any query string parameters from Location headers from lograge
  Added monitoring docs
  Resolve "Loss of input text on comments after preview"
  fixed ide_edit_button not existing
  Update spec import path for vue mount component helper
  remove JS for cookie toggle
  move confirm_danger_modal bindings directly into the only two pages that need it
  remove un-used IDE helper module
  fixed SCSS lint
  updated file references in specs
  Move IDE to CE
  Fix test failures with licensee 8.9
  refactor ConfirmDangerModal into ES module
  Update licensee 8.7.0 -> 8.9
  Update gettext_i18n_rails_js 1.2.0 -> 1.3

Gemfile

@@ -221,7 +221,7 @@ gem 'babosa', '~> 1.0.2'
 gem 'loofah', '~> 2.0.3'
 
 # Working with license
-gem 'licensee', '~> 8.7.0'
+gem 'licensee', '~> 8.9'
 
 # Protect against bruteforcing
 gem 'rack-attack', '~> 4.4.1'
@@ -268,7 +268,7 @@ gem 'premailer-rails', '~> 1.9.7'
 gem 'ruby_parser', '~> 3.8', require: false
 gem 'rails-i18n', '~> 4.0.9'
 gem 'gettext_i18n_rails', '~> 1.8.0'
-gem 'gettext_i18n_rails_js', '~> 1.2.0'
+gem 'gettext_i18n_rails_js', '~> 1.3'
 gem 'gettext', '~> 3.2.2', require: false, group: :development
 
 gem 'batch-loader', '~> 1.2.1'

Gemfile.lock

@@ -211,7 +211,7 @@ GEM
       faraday_middleware
       multi_json
     fast_blank (1.0.0)
-    fast_gettext (1.4.0)
+    fast_gettext (1.6.0)
     ffaker (2.4.0)
     ffi (1.9.18)
     flay (2.10.0)
@@ -277,12 +277,12 @@ GEM
     gemojione (3.3.0)
       json
     get_process_mem (0.2.0)
-    gettext (3.2.2)
+    gettext (3.2.9)
       locale (>= 2.0.5)
       text (>= 1.3.0)
     gettext_i18n_rails (1.8.0)
       fast_gettext (>= 0.9.0)
-    gettext_i18n_rails_js (1.2.0)
+    gettext_i18n_rails_js (1.3.0)
       gettext (>= 3.0.2)
       gettext_i18n_rails (>= 0.7.1)
       po_to_json (>= 1.0.0)
@@ -474,7 +474,7 @@ GEM
       toml (= 0.1.2)
       with_env (> 1.0)
       xml-simple
-    licensee (8.7.0)
+    licensee (8.9.2)
       rugged (~> 0.24)
     little-plugger (1.1.4)
     locale (2.1.2)
@@ -498,7 +498,7 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2016.0521)
     mimemagic (0.3.0)
-    mini_mime (0.1.4)
+    mini_mime (1.0.0)
     mini_portile2 (2.3.0)
     minitest (5.7.0)
     mousetrap-rails (1.4.6)
@@ -1055,7 +1055,7 @@ DEPENDENCIES
   gemojione (~> 3.3)
   gettext (~> 3.2.2)
   gettext_i18n_rails (~> 1.8.0)
-  gettext_i18n_rails_js (~> 1.2.0)
+  gettext_i18n_rails_js (~> 1.3)
   gitaly-proto (~> 0.88.0)
   github-linguist (~> 5.3.3)
   gitlab-flowdock-git-hook (~> 1.0.1)
@@ -1091,7 +1091,7 @@ DEPENDENCIES
   kubeclient (~> 3.0)
   letter_opener_web (~> 1.3.0)
   license_finder (~> 3.1)
-  licensee (~> 8.7.0)
+  licensee (~> 8.9)
   lograge (~> 0.5)
   loofah (~> 2.0.3)
   mail_room (~> 0.9.1)

app/assets/javascripts/confirm_danger_modal.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, camelcase, one-var-declaration-per-line, no-else-return, max-len */
-
 import $ from 'jquery';
 import { rstrip } from './lib/utils/common_utils';
 
-window.ConfirmDangerModal = (function() {
-  function ConfirmDangerModal(form, text) {
-    var project_path, submit;
-    this.form = form;
+function openConfirmDangerModal($form, text) {
   $('.js-confirm-text').text(text || '');
   $('.js-confirm-danger-input').val('');
   $('#modal-confirm-danger').modal('show');
-    project_path = $('.js-confirm-danger-match').text();
-    submit = $('.js-confirm-danger-submit');
-    submit.disable();
-    $('.js-confirm-danger-input').off('input');
-    $('.js-confirm-danger-input').on('input', function() {
-      if (rstrip($(this).val()) === project_path) {
-        return submit.enable();
+
+  const confirmTextMatch = $('.js-confirm-danger-match').text();
+  const $submit = $('.js-confirm-danger-submit');
+  $submit.disable();
+
+  $('.js-confirm-danger-input').off('input').on('input', function handleInput() {
+    const confirmText = rstrip($(this).val());
+    if (confirmText === confirmTextMatch) {
+      $submit.enable();
     } else {
-        return submit.disable();
+      $submit.disable();
     }
   });
-    $('.js-confirm-danger-submit').off('click');
-    $('.js-confirm-danger-submit').on('click', (function(_this) {
-      return function() {
-        return _this.form.submit();
-      };
-    })(this));
-  }
+  $('.js-confirm-danger-submit').off('click').on('click', () => $form.submit());
+}
 
-  return ConfirmDangerModal;
-})();
+export default function initConfirmDangerModal() {
+  $(document).on('click', '.js-confirm-danger', (e) => {
+    e.preventDefault();
+    const $btn = $(e.target);
+    const $form = $btn.closest('form');
+    const text = $btn.data('confirmDangerMessage');
+    openConfirmDangerModal($form, text);
+  });
+}

app/assets/javascripts/gl_form.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import autosize from 'autosize';
 import GfmAutoComplete from './gfm_auto_complete';
 import dropzoneInput from './dropzone_input';
-import textUtils from './lib/utils/text_markdown';
+import { addMarkdownListeners, removeMarkdownListeners } from './lib/utils/text_markdown';
 
 export default class GLForm {
   constructor(form, enableGFM = false) {
@@ -47,7 +47,7 @@ export default class GLForm {
     }
     // form and textarea event listeners
     this.addEventListeners();
-    textUtils.init(this.form);
+    addMarkdownListeners(this.form);
     // hide discard button
     this.form.find('.js-note-discard').hide();
     this.form.show();
@@ -86,7 +86,7 @@ export default class GLForm {
   clearEventListeners() {
     this.textarea.off('focus');
     this.textarea.off('blur');
-    textUtils.removeListeners(this.form);
+    removeMarkdownListeners(this.form);
   }
 
   addEventListeners() {

app/assets/javascripts/ide/components/changed_file_icon.vue

+<script>
+  import icon from '~/vue_shared/components/icon.vue';
+
+  export default {
+    components: {
+      icon,
+    },
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      changedIcon() {
+        return this.file.tempFile ? 'file-addition' : 'file-modified';
+      },
+      changedIconClass() {
+        return `multi-${this.changedIcon}`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <icon
+    :name="changedIcon"
+    :size="12"
+    :css-classes="`ide-file-changed-icon ${changedIconClass}`"
+  />
+</template>

app/assets/javascripts/ide/components/commit_sidebar/actions.vue

+<script>
+  import { mapState } from 'vuex';
+  import { sprintf, __ } from '~/locale';
+  import * as consts from '../../stores/modules/commit/constants';
+  import RadioGroup from './radio_group.vue';
+
+  export default {
+    components: {
+      RadioGroup,
+    },
+    computed: {
+      ...mapState([
+        'currentBranchId',
+      ]),
+      newMergeRequestHelpText() {
+        return sprintf(
+          __('Creates a new branch from %{branchName} and re-directs to create a new merge request'),
+          { branchName: this.currentBranchId },
+        );
+      },
+      commitToCurrentBranchText() {
+        return sprintf(
+          __('Commit to %{branchName} branch'),
+          { branchName: `<strong>${this.currentBranchId}</strong>` },
+          false,
+        );
+      },
+      commitToNewBranchText() {
+        return sprintf(
+          __('Creates a new branch from %{branchName}'),
+          { branchName: this.currentBranchId },
+        );
+      },
+    },
+    commitToCurrentBranch: consts.COMMIT_TO_CURRENT_BRANCH,
+    commitToNewBranch: consts.COMMIT_TO_NEW_BRANCH,
+    commitToNewBranchMR: consts.COMMIT_TO_NEW_BRANCH_MR,
+  };
+</script>
+
+<template>
+  <div class="append-bottom-15 ide-commit-radios">
+    <radio-group
+      :value="$options.commitToCurrentBranch"
+      :checked="true"
+    >
+      <span
+        v-html="commitToCurrentBranchText"
+      >
+      </span>
+    </radio-group>
+    <radio-group
+      :value="$options.commitToNewBranch"
+      :label="__('Create a new branch')"
+      :show-input="true"
+      :help-text="commitToNewBranchText"
+    />
+    <radio-group
+      :value="$options.commitToNewBranchMR"
+      :label="__('Create a new branch and merge request')"
+      :show-input="true"
+      :help-text="newMergeRequestHelpText"
+    />
+  </div>
+</template>

app/assets/javascripts/ide/components/commit_sidebar/list.vue

+<script>
+  import { mapState } from 'vuex';
+  import icon from '~/vue_shared/components/icon.vue';
+  import listItem from './list_item.vue';
+  import listCollapsed from './list_collapsed.vue';
+
+  export default {
+    components: {
+      icon,
+      listItem,
+      listCollapsed,
+    },
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      fileList: {
+        type: Array,
+        required: true,
+      },
+    },
+    computed: {
+      ...mapState([
+        'currentProjectId',
+        'currentBranchId',
+        'rightPanelCollapsed',
+      ]),
+      isCommitInfoShown() {
+        return this.rightPanelCollapsed || this.fileList.length;
+      },
+    },
+    methods: {
+      toggleCollapsed() {
+        this.$emit('toggleCollapsed');
+      },
+    },
+  };
+</script>
+
+<template>
+  <div
+    :class="{
+      'multi-file-commit-list': isCommitInfoShown
+    }"
+  >
+    <list-collapsed
+      v-if="rightPanelCollapsed"
+    />
+    <template v-else>
+      <ul
+        v-if="fileList.length"
+        class="list-unstyled append-bottom-0"
+      >
+        <li
+          v-for="file in fileList"
+          :key="file.key"
+        >
+          <list-item
+            :file="file"
+          />
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>

app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue

+<script>
+  import { mapGetters } from 'vuex';
+  import icon from '~/vue_shared/components/icon.vue';
+
+  export default {
+    components: {
+      icon,
+    },
+    computed: {
+      ...mapGetters([
+        'addedFiles',
+        'modifiedFiles',
+      ]),
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="multi-file-commit-list-collapsed text-center"
+  >
+    <icon
+      name="file-addition"
+      :size="18"
+      css-classes="multi-file-addition append-bottom-10"
+    />
+    {{ addedFiles.length }}
+    <icon
+      name="file-modified"
+      :size="18"
+      css-classes="multi-file-modified prepend-top-10 append-bottom-10"
+    />
+    {{ modifiedFiles.length }}
+  </div>
+</template>

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

+<script>
+  import { mapActions } from 'vuex';
+  import icon from '~/vue_shared/components/icon.vue';
+  import router from '../../ide_router';
+
+  export default {
+    components: {
+      icon,
+    },
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      iconName() {
+        return this.file.tempFile ? 'file-addition' : 'file-modified';
+      },
+      iconClass() {
+        return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
+      },
+    },
+    methods: {
+      ...mapActions([
+        'discardFileChanges',
+        'updateViewer',
+      ]),
+      openFileInEditor(file) {
+        this.updateViewer('diff');
+
+        router.push(`/project${file.url}`);
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="multi-file-commit-list-item">
+    <button
+      type="button"
+      class="multi-file-commit-list-path"
+      @click="openFileInEditor(file)">
+      <span class="multi-file-commit-list-file-path">
+        <icon
+          :name="iconName"
+          :size="16"
+          :css-classes="iconClass"
+        />{{ file.path }}
+      </span>
+    </button>
+    <button
+      type="button"
+      class="btn btn-blank multi-file-discard-btn"
+      @click="discardFileChanges(file.path)"
+    >
+      Discard
+    </button>
+  </div>
+</template>

app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue

+<script>
+  import { mapActions, mapState, mapGetters } from 'vuex';
+  import tooltip from '~/vue_shared/directives/tooltip';
+
+  export default {
+    directives: {
+      tooltip,
+    },
+    props: {
+      value: {
+        type: String,
+        required: true,
+      },
+      label: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      checked: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      showInput: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      helpText: {
+        type: String,
+        required: false,
+        default: null,
+      },
+    },
+    computed: {
+      ...mapState('commit', [
+        'commitAction',
+      ]),
+      ...mapGetters('commit', [
+        'newBranchName',
+      ]),
+    },
+    methods: {
+      ...mapActions('commit', [
+        'updateCommitAction',
+        'updateBranchName',
+      ]),
+    },
+  };
+</script>
+
+<template>
+  <fieldset>
+    <label>
+      <input
+        type="radio"
+        name="commit-action"
+        :value="value"
+        @change="updateCommitAction($event.target.value)"
+        :checked="checked"
+        v-once
+      />
+      <span class="prepend-left-10">
+        <template v-if="label">
+          {{ label }}
+        </template>
+        <slot v-else></slot>
+        <span
+          v-if="helpText"
+          v-tooltip
+          class="help-block inline"
+          :title="helpText"
+        >
+          <i
+            class="fa fa-question-circle"
+            aria-hidden="true"
+          >
+          </i>
+        </span>
+      </span>
+    </label>
+    <div
+      v-if="commitAction === value && showInput"
+      class="ide-commit-new-branch"
+    >
+      <input
+        type="text"
+        class="form-control"
+        :placeholder="newBranchName"
+        @input="updateBranchName($event.target.value)"
+      />
+    </div>
+  </fieldset>
+</template>

app/assets/javascripts/ide/components/editor_mode_dropdown.vue

+<script>
+  import Icon from '~/vue_shared/components/icon.vue';
+
+  export default {
+    components: {
+      Icon,
+    },
+    props: {
+      hasChanges: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      viewer: {
+        type: String,
+        required: true,
+      },
+      showShadow: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    methods: {
+      changeMode(mode) {
+        this.$emit('click', mode);
+      },
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="dropdown"
+    :class="{
+      shadow: showShadow,
+    }"
+  >
+    <button
+      type="button"
+      class="btn btn-primary btn-sm"
+      :class="{
+        'btn-inverted': hasChanges,
+      }"
+      data-toggle="dropdown"
+    >
+      <template v-if="viewer === 'editor'">
+        {{ __('Editing') }}
+      </template>
+      <template v-else>
+        {{ __('Reviewing') }}
+      </template>
+      <icon
+        name="angle-down"
+        :size="12"
+        css-classes="caret-down"
+      />
+    </button>
+    <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
+      <ul>
+        <li>
+          <a
+            href="#"
+            @click.prevent="changeMode('editor')"
+            :class="{
+              'is-active': viewer === 'editor',
+            }"
+          >
+            <strong class="dropdown-menu-inner-title">{{ __('Editing') }}</strong>
+            <span class="dropdown-menu-inner-content">
+              {{ __('View and edit lines') }}
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            @click.prevent="changeMode('diff')"
+            :class="{
+              'is-active': viewer === 'diff',
+            }"
+          >
+            <strong class="dropdown-menu-inner-title">{{ __('Reviewing') }}</strong>
+            <span class="dropdown-menu-inner-content">
+              {{ __('Compare changes with the last commit') }}
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

app/assets/javascripts/ide/components/ide.vue

+<script>
+  import { mapState, mapGetters } from 'vuex';
+  import ideSidebar from './ide_side_bar.vue';
+  import ideContextbar from './ide_context_bar.vue';
+  import repoTabs from './repo_tabs.vue';
+  import repoFileButtons from './repo_file_buttons.vue';
+  import ideStatusBar from './ide_status_bar.vue';
+  import repoEditor from './repo_editor.vue';
+
+  export default {
+    components: {
+      ideSidebar,
+      ideContextbar,
+      repoTabs,
+      repoFileButtons,
+      ideStatusBar,
+      repoEditor,
+    },
+    props: {
+      emptyStateSvgPath: {
+        type: String,
+        required: true,
+      },
+      noChangesStateSvgPath: {
+        type: String,
+        required: true,
+      },
+      committedStateSvgPath: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      ...mapState(['changedFiles', 'openFiles', 'viewer']),
+      ...mapGetters(['activeFile', 'hasChanges']),
+    },
+    mounted() {
+      const returnValue = 'Are you sure you want to lose unsaved changes?';
+      window.onbeforeunload = e => {
+        if (!this.changedFiles.length) return undefined;
+
+        Object.assign(e, {
+          returnValue,
+        });
+        return returnValue;
+      };
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="ide-view"
+  >
+    <ide-sidebar />
+    <div
+      class="multi-file-edit-pane"
+    >
+      <template
+        v-if="activeFile"
+      >
+        <repo-tabs
+          :files="openFiles"
+          :viewer="viewer"
+          :has-changes="hasChanges"
+        />
+        <repo-editor
+          class="multi-file-edit-pane-content"
+          :file="activeFile"
+        />
+        <repo-file-buttons
+          :file="activeFile"
+        />
+        <ide-status-bar
+          :file="activeFile"
+        />
+      </template>
+      <template
+        v-else
+      >
+        <div
+          v-once
+          class="ide-empty-state"
+        >
+          <div class="row js-empty-state">
+            <div class="col-xs-12">
+              <div class="svg-content svg-250">
+                <img :src="emptyStateSvgPath" />
+              </div>
+            </div>
+            <div class="col-xs-12">
+              <div class="text-content text-center">
+                <h4>
+                  Welcome to the GitLab IDE
+                </h4>
+                <p>
+                  You can select a file in the left sidebar to begin
+                  editing and use the right sidebar to commit your changes.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+    <ide-contextbar
+      :no-changes-state-svg-path="noChangesStateSvgPath"
+      :committed-state-svg-path="committedStateSvgPath"
+    />
+  </div>
+</template>

app/assets/javascripts/ide/components/ide_context_bar.vue

+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import icon from '~/vue_shared/components/icon.vue';
+import panelResizer from '~/vue_shared/components/panel_resizer.vue';
+import repoCommitSection from './repo_commit_section.vue';
+import ResizablePanel from './resizable_panel.vue';
+
+export default {
+  components: {
+    repoCommitSection,
+    icon,
+    panelResizer,
+    ResizablePanel,
+  },
+  props: {
+    noChangesStateSvgPath: {
+      type: String,
+      required: true,
+    },
+    committedStateSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['changedFiles', 'rightPanelCollapsed']),
+    ...mapGetters(['currentIcon']),
+  },
+  methods: {
+    ...mapActions(['setPanelCollapsedStatus']),
+  },
+};
+</script>
+
+<template>
+  <resizable-panel
+    :collapsible="true"
+    :initial-width="340"
+    side="right"
+  >
+    <div
+      class="multi-file-commit-panel-section"
+    >
+      <header
+        class="multi-file-commit-panel-header"
+        :class="{
+          'is-collapsed': rightPanelCollapsed,
+        }"
+      >
+        <div
+          class="multi-file-commit-panel-header-title"
+          v-if="!rightPanelCollapsed"
+        >
+          <div
+            v-if="changedFiles.length"
+          >
+            <icon
+              name="list-bulleted"
+              :size="18"
+            />
+            Staged
+          </div>
+        </div>
+        <button
+          type="button"
+          class="btn btn-transparent multi-file-commit-panel-collapse-btn"
+          @click.stop="setPanelCollapsedStatus({
+            side: 'right',
+            collapsed: !rightPanelCollapsed,
+          })"
+        >
+          <icon
+            :name="currentIcon"
+            :size="18"
+          />
+        </button>
+      </header>
+      <repo-commit-section
+        :no-changes-state-svg-path="noChangesStateSvgPath"
+        :committed-state-svg-path="committedStateSvgPath"
+      />
+    </div>
+  </resizable-panel>
+</template>

app/assets/javascripts/ide/components/ide_external_links.vue

+<script>
+import icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    icon,
+  },
+  props: {
+    projectUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    goBackUrl() {
+      return document.referrer || this.projectUrl;
+    },
+  },
+};
+</script>
+
+<template>
+  <nav
+    class="ide-external-links"
+    v-once
+  >
+    <p>
+      <a
+        :href="goBackUrl"
+        class="ide-sidebar-link"
+      >
+        <icon
+          :size="16"
+          class="append-right-8"
+          name="go-back"
+        />
+        <span class="ide-external-links-text">
+          {{ s__('Go back') }}
+        </span>
+      </a>
+    </p>
+  </nav>
+</template>

app/assets/javascripts/ide/components/ide_project_branches_tree.vue

+<script>
+  import icon from '~/vue_shared/components/icon.vue';
+  import repoTree from './ide_repo_tree.vue';
+  import newDropdown from './new_dropdown/index.vue';
+
+  export default {
+    components: {
+      repoTree,
+      icon,
+      newDropdown,
+    },
+    props: {
+      projectId: {
+        type: String,
+        required: true,
+      },
+      branch: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="branch-container">
+    <div class="branch-header">
+      <div class="branch-header-title str-truncated ref-name">
+        <icon
+          name="branch"
+          :size="12"
+        />
+        {{ branch.name }}
+      </div>
+      <div class="branch-header-btns">
+        <new-dropdown
+          :project-id="projectId"
+          :branch="branch.name"
+          path=""
+        />
+      </div>
+    </div>
+    <repo-tree
+      :tree="branch.tree"
+    />
+  </div>
+</template>

app/assets/javascripts/ide/components/ide_project_tree.vue

+<script>
+import ProjectAvatarImage from '~/vue_shared/components/project_avatar/image.vue';
+import Identicon from '../../vue_shared/components/identicon.vue';
+import BranchesTree from './ide_project_branches_tree.vue';
+import ExternalLinks from './ide_external_links.vue';
+
+export default {
+  components: {
+    BranchesTree,
+    ExternalLinks,
+    ProjectAvatarImage,
+    Identicon,
+  },
+  props: {
+    project: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="projects-sidebar">
+    <div class="context-header">
+      <a
+        :title="project.name"
+        :href="project.web_url"
+      >
+        <div
+          v-if="project.avatar_url"
+          class="avatar-container s40 project-avatar"
+        >
+          <project-avatar-image
+            class="avatar-container project-avatar"
+            :link-href="project.path"
+            :img-src="project.avatar_url"
+            :img-alt="project.name"
+            :img-size="40"
+          />
+        </div>
+        <identicon
+          v-else
+          size-class="s40"
+          :entity-id="project.id"
+          :entity-name="project.name"
+        />
+        <div class="sidebar-context-title">
+          {{ project.name }}
+        </div>
+      </a>
+    </div>
+    <external-links
+      :project-url="project.web_url"
+    />
+    <div class="multi-file-commit-panel-inner-scroll">
+      <branches-tree
+        v-for="branch in project.branches"
+        :key="branch.name"
+        :project-id="project.path_with_namespace"
+        :branch="branch"
+      />
+    </div>
+  </div>
+</template>

app/assets/javascripts/ide/components/ide_repo_tree.vue

+<script>
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import RepoFile from './repo_file.vue';
+
+export default {
+  components: {
+    RepoFile,
+    SkeletonLoadingContainer,
+  },
+  props: {
+    tree: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="ide-file-list"
+  >
+    <template v-if="tree.loading">
+      <div
+        class="multi-file-loading-container"
+        v-for="n in 3"
+        :key="n"
+      >
+        <skeleton-loading-container />
+      </div>
+    </template>
+    <template v-else>
+      <repo-file
+        v-for="file in tree.tree"
+        :key="file.key"
+        :file="file"
+        :level="0"
+      />
+    </template>
+  </div>
+</template>

app/assets/javascripts/ide/components/ide_side_bar.vue

+<script>
+  import { mapState, mapGetters } from 'vuex';
+  import icon from '~/vue_shared/components/icon.vue';
+  import panelResizer from '~/vue_shared/components/panel_resizer.vue';
+  import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+  import projectTree from './ide_project_tree.vue';
+  import ResizablePanel from './resizable_panel.vue';
+
+  export default {
+    components: {
+      projectTree,
+      icon,
+      panelResizer,
+      skeletonLoadingContainer,
+      ResizablePanel,
+    },
+    computed: {
+      ...mapState([
+        'loading',
+      ]),
+      ...mapGetters([
+        'projectsWithTrees',
+      ]),
+    },
+  };
+</script>
+
+<template>
+  <resizable-panel
+    :collapsible="false"
+    :initial-width="290"
+    side="left"
+  >
+    <div class="multi-file-commit-panel-inner">
+      <template v-if="loading">
+        <div
+          class="multi-file-loading-container"
+          v-for="n in 3"
+          :key="n"
+        >
+          <skeleton-loading-container />
+        </div>
+      </template>
+      <project-tree
+        v-for="project in projectsWithTrees"
+        :key="project.id"
+        :project="project"
+      />
+    </div>
+  </resizable-panel>
+</template>

app/assets/javascripts/ide/components/ide_status_bar.vue

+<script>
+  import icon from '~/vue_shared/components/icon.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import timeAgoMixin from '~/vue_shared/mixins/timeago';
+
+  export default {
+    components: {
+      icon,
+    },
+    directives: {
+      tooltip,
+    },
+    mixins: [
+      timeAgoMixin,
+    ],
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="ide-status-bar">
+    <div class="ref-name">
+      <icon
+        name="branch"
+        :size="12"
+      />
+      {{ file.branchId }}
+    </div>
+    <div>
+      <div v-if="file.lastCommit && file.lastCommit.id">
+        Last commit:
+        <a
+          v-tooltip
+          :title="file.lastCommit.message"
+          :href="file.lastCommit.url"
+        >
+          {{ timeFormated(file.lastCommit.updatedAt) }} by
+          {{ file.lastCommit.author }}
+        </a>
+      </div>
+    </div>
+    <div class="text-right">
+      {{ file.name }}
+    </div>
+    <div class="text-right">
+      {{ file.eol }}
+    </div>
+    <div class="text-right">
+      {{ file.editorRow }}:{{ file.editorColumn }}
+    </div>
+    <div class="text-right">
+      {{ file.fileLanguage }}
+    </div>
+  </div>
+</template>

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

+<script>
+  import { mapActions } from 'vuex';
+  import icon from '~/vue_shared/components/icon.vue';
+  import newModal from './modal.vue';
+  import upload from './upload.vue';
+
+  export default {
+    components: {
+      icon,
+      newModal,
+      upload,
+    },
+    props: {
+      branch: {
+        type: String,
+        required: true,
+      },
+      path: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        openModal: false,
+        modalType: '',
+        dropdownOpen: false,
+      };
+    },
+    methods: {
+      ...mapActions([
+        'createTempEntry',
+      ]),
+      createNewItem(type) {
+        this.modalType = type;
+        this.openModal = true;
+        this.dropdownOpen = false;
+      },
+      hideModal() {
+        this.openModal = false;
+      },
+      openDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="ide-new-btn">
+    <div
+      class="dropdown"
+      :class="{
+        open: dropdownOpen,
+      }"
+    >
+      <button
+        type="button"
+        class="btn btn-sm btn-default dropdown-toggle add-to-tree"
+        aria-label="Create new file or directory"
+        @click.stop="openDropdown()"
+      >
+        <icon
+          name="plus"
+          :size="12"
+          css-classes="pull-left"
+        />
+        <icon
+          name="arrow-down"
+          :size="12"
+          css-classes="pull-left"
+        />
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right">
+        <li>
+          <a
+            href="#"
+            role="button"
+            @click.stop.prevent="createNewItem('blob')"
+          >
+            {{ __('New file') }}
+          </a>
+        </li>
+        <li>
+          <upload
+            :branch-id="branch"
+            :path="path"
+            @create="createTempEntry"
+          />
+        </li>
+        <li>
+          <a
+            href="#"
+            role="button"
+            @click.stop.prevent="createNewItem('tree')"
+          >
+            {{ __('New directory') }}
+          </a>
+        </li>
+      </ul>
+    </div>
+    <new-modal
+      v-if="openModal"
+      :type="modalType"
+      :branch-id="branch"
+      :path="path"
+      @hide="hideModal"
+      @create="createTempEntry"
+    />
+  </div>
+</template>

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

+<script>
+  import { __ } from '~/locale';
+  import modal from '~/vue_shared/components/modal.vue';
+
+  export default {
+    components: {
+      modal,
+    },
+    props: {
+      branchId: {
+        type: String,
+        required: true,
+      },
+      type: {
+        type: String,
+        required: true,
+      },
+      path: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        entryName: this.path !== '' ? `${this.path}/` : '',
+      };
+    },
+    computed: {
+      modalTitle() {
+        if (this.type === 'tree') {
+          return __('Create new directory');
+        }
+
+        return __('Create new file');
+      },
+      buttonLabel() {
+        if (this.type === 'tree') {
+          return __('Create directory');
+        }
+
+        return __('Create file');
+      },
+      formLabelName() {
+        if (this.type === 'tree') {
+          return __('Directory name');
+        }
+
+        return __('File name');
+      },
+    },
+    mounted() {
+      this.$refs.fieldName.focus();
+    },
+    methods: {
+      createEntryInStore() {
+        this.$emit('create', {
+          branchId: this.branchId,
+          name: this.entryName,
+          type: this.type,
+        });
+
+        this.hideModal();
+      },
+      hideModal() {
+        this.$emit('hide');
+      },
+    },
+  };
+</script>
+
+<template>
+  <modal
+    :title="modalTitle"
+    :primary-button-label="buttonLabel"
+    kind="success"
+    @cancel="hideModal"
+    @submit="createEntryInStore"
+  >
+    <form
+      class="form-horizontal"
+      slot="body"
+      @submit.prevent="createEntryInStore"
+    >
+      <fieldset class="form-group append-bottom-0">
+        <label class="label-light col-sm-3">
+          {{ formLabelName }}
+        </label>
+        <div class="col-sm-9">
+          <input
+            type="text"
+            class="form-control"
+            v-model="entryName"
+            ref="fieldName"
+          />
+        </div>
+      </fieldset>
+    </form>
+  </modal>
+</template>

app/assets/javascripts/ide/components/new_dropdown/upload.vue

+<script>
+  export default {
+    props: {
+      branchId: {
+        type: String,
+        required: true,
+      },
+      path: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    mounted() {
+      this.$refs.fileUpload.addEventListener('change', this.openFile);
+    },
+    beforeDestroy() {
+      this.$refs.fileUpload.removeEventListener('change', this.openFile);
+    },
+    methods: {
+      createFile(target, file, isText) {
+        const { name } = file;
+        let { result } = target;
+
+        if (!isText) {
+          result = result.split('base64,')[1];
+        }
+
+        this.$emit('create', {
+          name: `${(this.path ? `${this.path}/` : '')}${name}`,
+          branchId: this.branchId,
+          type: 'blob',
+          content: result,
+          base64: !isText,
+        });
+      },
+      readFile(file) {
+        const reader = new FileReader();
+        const isText = file.type.match(/text.*/) !== null;
+
+        reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true });
+
+        if (isText) {
+          reader.readAsText(file);
+        } else {
+          reader.readAsDataURL(file);
+        }
+      },
+      openFile() {
+        Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
+      },
+      startFileUpload() {
+        this.$refs.fileUpload.click();
+      },
+    },
+  };
+</script>
+
+<template>
+  <div>
+    <a
+      href="#"
+      role="button"
+      @click.stop.prevent="startFileUpload"
+    >
+      {{ __('Upload file') }}
+    </a>
+    <input
+      id="file-upload"
+      type="file"
+      class="hidden"
+      ref="fileUpload"
+    />
+  </div>
+</template>

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

+<script>
+import { mapState, mapActions, mapGetters } from 'vuex';
+import tooltip from '~/vue_shared/directives/tooltip';
+import icon from '~/vue_shared/components/icon.vue';
+import modal from '~/vue_shared/components/modal.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import commitFilesList from './commit_sidebar/list.vue';
+import * as consts from '../stores/modules/commit/constants';
+import Actions from './commit_sidebar/actions.vue';
+
+export default {
+  components: {
+    modal,
+    icon,
+    commitFilesList,
+    Actions,
+    LoadingButton,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    noChangesStateSvgPath: {
+      type: String,
+      required: true,
+    },
+    committedStateSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState([
+      'currentProjectId',
+      'currentBranchId',
+      'rightPanelCollapsed',
+      'lastCommitMsg',
+      'changedFiles',
+    ]),
+    ...mapState('commit', [
+      'commitMessage',
+      'submitCommitLoading',
+    ]),
+    ...mapGetters('commit', [
+      'commitButtonDisabled',
+      'discardDraftButtonDisabled',
+      'branchName',
+    ]),
+    statusSvg() {
+      return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
+    },
+  },
+  methods: {
+    ...mapActions([
+      'setPanelCollapsedStatus',
+    ]),
+    ...mapActions('commit', [
+      'updateCommitMessage',
+      'discardDraft',
+      'commitChanges',
+      'updateCommitAction',
+    ]),
+    toggleCollapsed() {
+      this.setPanelCollapsedStatus({
+        side: 'right',
+        collapsed: !this.rightPanelCollapsed,
+      });
+    },
+    forceCreateNewBranch() {
+      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH)
+        .then(() => this.commitChanges());
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="multi-file-commit-panel-section"
+    :class="{
+      'multi-file-commit-empty-state-container': !changedFiles.length
+    }"
+  >
+    <modal
+      id="ide-create-branch-modal"
+      :primary-button-label="__('Create new branch')"
+      kind="success"
+      :title="__('Branch has changed')"
+      @submit="forceCreateNewBranch"
+    >
+      <template slot="body">
+        {{ __(`This branch has changed since you started editing.
+          Would you like to create a new branch?`) }}
+      </template>
+    </modal>
+    <commit-files-list
+      title="Staged"
+      :file-list="changedFiles"
+      :collapsed="rightPanelCollapsed"
+      @toggleCollapsed="toggleCollapsed"
+    />
+    <template
+      v-if="changedFiles.length"
+    >
+      <form
+        class="form-horizontal multi-file-commit-form"
+        @submit.prevent.stop="commitChanges"
+        v-if="!rightPanelCollapsed"
+      >
+        <div class="multi-file-commit-fieldset">
+          <textarea
+            class="form-control multi-file-commit-message"
+            name="commit-message"
+            :value="commitMessage"
+            :placeholder="__('Write a commit message...')"
+            @input="updateCommitMessage($event.target.value)"
+          >
+          </textarea>
+        </div>
+        <div class="clearfix prepend-top-15">
+          <actions />
+          <loading-button
+            :loading="submitCommitLoading"
+            :disabled="commitButtonDisabled"
+            container-class="btn btn-success btn-sm pull-left"
+            :label="__('Commit')"
+            @click="commitChanges"
+          />
+          <button
+            v-if="!discardDraftButtonDisabled"
+            type="button"
+            class="btn btn-default btn-sm pull-right"
+            @click="discardDraft"
+          >
+            {{ __('Discard draft') }}
+          </button>
+        </div>
+      </form>
+    </template>
+    <div
+      v-else-if="!rightPanelCollapsed"
+      class="row js-empty-state"
+    >
+      <div class="col-xs-10 col-xs-offset-1">
+        <div class="svg-content svg-80">
+          <img :src="statusSvg" />
+        </div>
+      </div>
+      <div class="col-xs-10 col-xs-offset-1">
+        <div
+          class="text-content text-center"
+          v-if="!lastCommitMsg"
+        >
+          <h4>
+            {{ __('No changes') }}
+          </h4>
+          <p>
+            {{ __('Edit files in the editor and commit changes here') }}
+          </p>
+        </div>
+        <div
+          class="text-content text-center"
+          v-else
+        >
+          <h4>
+            {{ __('All changes are committed') }}
+          </h4>
+          <p v-html="lastCommitMsg">
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

+<script>
+/* global monaco */
+import { mapState, mapActions } from 'vuex';
+import flash from '~/flash';
+import monacoLoader from '../monaco_loader';
+import Editor from '../lib/editor';
+
+export default {
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState([
+      'leftPanelCollapsed',
+      'rightPanelCollapsed',
+      'viewer',
+      'delayViewerUpdated',
+    ]),
+    shouldHideEditor() {
+      return this.file && this.file.binary && !this.file.raw;
+    },
+  },
+  watch: {
+    file(oldVal, newVal) {
+      if (newVal.path !== this.file.path) {
+        this.initMonaco();
+      }
+    },
+    leftPanelCollapsed() {
+      this.editor.updateDimensions();
+    },
+    rightPanelCollapsed() {
+      this.editor.updateDimensions();
+    },
+    viewer() {
+      this.createEditorInstance();
+    },
+  },
+  beforeDestroy() {
+    this.editor.dispose();
+  },
+  mounted() {
+    if (this.editor && monaco) {
+      this.initMonaco();
+    } else {
+      monacoLoader(['vs/editor/editor.main'], () => {
+        this.editor = Editor.create(monaco);
+
+        this.initMonaco();
+      });
+    }
+  },
+  methods: {
+    ...mapActions([
+      'getRawFileData',
+      'changeFileContent',
+      'setFileLanguage',
+      'setEditorPosition',
+      'setFileEOL',
+      'updateViewer',
+      'updateDelayViewerUpdated',
+    ]),
+    initMonaco() {
+      if (this.shouldHideEditor) return;
+
+      this.editor.clearEditor();
+
+      this.getRawFileData(this.file)
+        .then(() => {
+          const viewerPromise = this.delayViewerUpdated ? this.updateViewer('editor') : Promise.resolve();
+
+          return viewerPromise;
+        })
+        .then(() => {
+          this.updateDelayViewerUpdated(false);
+          this.createEditorInstance();
+        })
+        .catch((err) => {
+          flash('Error setting up monaco. Please try again.', 'alert', document, null, false, true);
+          throw err;
+        });
+    },
+    createEditorInstance() {
+      this.editor.dispose();
+
+      this.$nextTick(() => {
+        if (this.viewer === 'editor') {
+          this.editor.createInstance(this.$refs.editor);
+        } else {
+          this.editor.createDiffInstance(this.$refs.editor);
+        }
+
+        this.setupEditor();
+      });
+    },
+    setupEditor() {
+      if (!this.file || !this.editor.instance) return;
+
+      this.model = this.editor.createModel(this.file);
+
+      this.editor.attachModel(this.model);
+
+      this.model.onChange((model) => {
+        const { file } = model;
+
+        if (file.active) {
+          this.changeFileContent({
+            path: file.path,
+            content: model.getModel().getValue(),
+          });
+        }
+      });
+
+      // Handle Cursor Position
+      this.editor.onPositionChange((instance, e) => {
+        this.setEditorPosition({
+          editorRow: e.position.lineNumber,
+          editorColumn: e.position.column,
+        });
+      });
+
+      this.editor.setPosition({
+        lineNumber: this.file.editorRow,
+        column: this.file.editorColumn,
+      });
+
+      // Handle File Language
+      this.setFileLanguage({
+        fileLanguage: this.model.language,
+      });
+
+      // Get File eol
+      this.setFileEOL({
+        eol: this.model.eol,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    id="ide"
+    class="blob-viewer-container blob-editor-container"
+  >
+    <div
+      v-if="shouldHideEditor"
+      v-html="file.html"
+    >
+    </div>
+    <div
+      v-show="!shouldHideEditor"
+      ref="editor"
+      class="multi-file-editor-holder"
+    >
+    </div>
+  </div>
+</template>

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

+<script>
+import { mapActions } from 'vuex';
+import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import fileIcon from '~/vue_shared/components/file_icon.vue';
+import router from '../ide_router';
+import newDropdown from './new_dropdown/index.vue';
+import fileStatusIcon from './repo_file_status_icon.vue';
+import changedFileIcon from './changed_file_icon.vue';
+
+export default {
+  name: 'RepoFile',
+  components: {
+    skeletonLoadingContainer,
+    newDropdown,
+    fileStatusIcon,
+    fileIcon,
+    changedFileIcon,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+    level: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    isTree() {
+      return this.file.type === 'tree';
+    },
+    isBlob() {
+      return this.file.type === 'blob';
+    },
+    levelIndentation() {
+      return {
+        marginLeft: `${this.level * 16}px`,
+      };
+    },
+    fileClass() {
+      return {
+        'file-open': this.isBlob && this.file.opened,
+        'file-active': this.isBlob && this.file.active,
+        folder: this.isTree,
+      };
+    },
+  },
+  updated() {
+    if (this.file.type === 'blob' && this.file.active) {
+      this.$el.scrollIntoView();
+    }
+  },
+  methods: {
+    ...mapActions(['toggleTreeOpen', 'updateDelayViewerUpdated']),
+    clickFile() {
+      // Manual Action if a tree is selected/opened
+      if (
+        this.isTree &&
+        this.$router.currentRoute.path === `/project${this.file.url}`
+      ) {
+        this.toggleTreeOpen(this.file.path);
+      }
+
+      const delayPromise = this.file.changed
+        ? Promise.resolve()
+        : this.updateDelayViewerUpdated(true);
+
+      return delayPromise.then(() => {
+        router.push(`/project${this.file.url}`);
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      class="file"
+      :class="fileClass"
+    >
+      <div
+        class="file-name"
+        @click="clickFile"
+        role="button"
+      >
+        <span
+          class="ide-file-name str-truncated"
+          :style="levelIndentation"
+        >
+          <file-icon
+            :file-name="file.name"
+            :loading="file.loading"
+            :folder="isTree"
+            :opened="file.opened"
+            :size="16"
+          />
+          {{ file.name }}
+          <file-status-icon
+            :file="file"
+          />
+        </span>
+        <changed-file-icon
+          :file="file"
+          v-if="file.changed || file.tempFile"
+          class="prepend-top-5 pull-right"
+        />
+        <new-dropdown
+          v-if="isTree"
+          :project-id="file.projectId"
+          :branch="file.branchId"
+          :path="file.path"
+          class="pull-right prepend-left-8"
+        />
+      </div>
+    </div>
+    <template v-if="file.opened">
+      <repo-file
+        v-for="childFile in file.tree"
+        :key="childFile.key"
+        :file="childFile"
+        :level="level + 1"
+      />
+    </template>
+  </div>
+</template>

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

+<script>
+export default {
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    showButtons() {
+      return this.file.rawPath ||
+        this.file.blamePath ||
+        this.file.commitsPath ||
+        this.file.permalink;
+    },
+    rawDownloadButtonLabel() {
+      return this.file.binary ? 'Download' : 'Raw';
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="showButtons"
+    class="multi-file-editor-btn-group"
+  >
+    <a
+      :href="file.rawPath"
+      target="_blank"
+      class="btn btn-default btn-sm raw"
+      rel="noopener noreferrer">
+      {{ rawDownloadButtonLabel }}
+    </a>
+
+    <div
+      class="btn-group"
+      role="group"
+      aria-label="File actions"
+    >
+      <a
+        :href="file.blamePath"
+        class="btn btn-default btn-sm blame"
+      >
+        Blame
+      </a>
+      <a
+        :href="file.commitsPath"
+        class="btn btn-default btn-sm history"
+      >
+        History
+      </a>
+      <a
+        :href="file.permalink"
+        class="btn btn-default btn-sm permalink"
+      >
+        Permalink
+      </a>
+    </div>
+  </div>
+</template>

app/assets/javascripts/ide/components/repo_file_status_icon.vue

+<script>
+  import icon from '~/vue_shared/components/icon.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import '~/lib/utils/datetime_utility';
+
+  export default {
+    components: {
+      icon,
+    },
+    directives: {
+      tooltip,
+    },
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      lockTooltip() {
+        return `Locked by ${this.file.file_lock.user.name}`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <span
+    v-if="file.file_lock"
+    v-tooltip
+    :title="lockTooltip"
+    data-container="body"
+  >
+    <icon
+      name="lock"
+      css-classes="file-status-icon"
+    />
+  </span>
+</template>

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

+<script>
+  import { mapState } from 'vuex';
+  import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+
+  export default {
+    components: {
+      skeletonLoadingContainer,
+    },
+    computed: {
+      ...mapState([
+        'leftPanelCollapsed',
+      ]),
+    },
+  };
+</script>
+
+<template>
+  <tr
+    class="loading-file"
+    aria-label="Loading files"
+  >
+    <td class="multi-file-table-col-name">
+      <skeleton-loading-container
+        :small="true"
+      />
+    </td>
+    <template v-if="!leftPanelCollapsed">
+      <td class="hidden-sm hidden-xs">
+        <skeleton-loading-container
+          :small="true"
+        />
+      </td>
+
+      <td class="hidden-xs">
+        <skeleton-loading-container
+          class="animation-container-right"
+          :small="true"
+        />
+      </td>
+    </template>
+  </tr>
+</template>

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

+<script>
+  import { mapActions } from 'vuex';
+
+  import fileIcon from '~/vue_shared/components/file_icon.vue';
+  import icon from '~/vue_shared/components/icon.vue';
+  import fileStatusIcon from './repo_file_status_icon.vue';
+  import changedFileIcon from './changed_file_icon.vue';
+
+  export default {
+    components: {
+      fileStatusIcon,
+      fileIcon,
+      icon,
+      changedFileIcon,
+    },
+    props: {
+      tab: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        tabMouseOver: false,
+      };
+    },
+    computed: {
+      closeLabel() {
+        if (this.tab.changed || this.tab.tempFile) {
+          return `${this.tab.name} changed`;
+        }
+        return `Close ${this.tab.name}`;
+      },
+      showChangedIcon() {
+        return this.tab.changed ? !this.tabMouseOver : false;
+      },
+    },
+
+    methods: {
+      ...mapActions([
+        'closeFile',
+      ]),
+      clickFile(tab) {
+        this.$router.push(`/project${tab.url}`);
+      },
+      mouseOverTab() {
+        if (this.tab.changed) {
+          this.tabMouseOver = true;
+        }
+      },
+      mouseOutTab() {
+        if (this.tab.changed) {
+          this.tabMouseOver = false;
+        }
+      },
+    },
+  };
+</script>
+
+<template>
+  <li
+    @click="clickFile(tab)"
+    @mouseover="mouseOverTab"
+    @mouseout="mouseOutTab"
+  >
+    <button
+      type="button"
+      class="multi-file-tab-close"
+      @click.stop.prevent="closeFile(tab.path)"
+      :aria-label="closeLabel"
+    >
+      <icon
+        v-if="!showChangedIcon"
+        name="close"
+        :size="12"
+      />
+      <changed-file-icon
+        v-else
+        :file="tab"
+      />
+    </button>
+
+    <div
+      class="multi-file-tab"
+      :class="{active : tab.active }"
+      :title="tab.url"
+    >
+      <file-icon
+        :file-name="tab.name"
+        :size="16"
+      />
+      {{ tab.name }}
+      <file-status-icon
+        :file="tab"
+      />
+    </div>
+  </li>
+</template>

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

+<script>
+  import { mapActions } from 'vuex';
+  import RepoTab from './repo_tab.vue';
+  import EditorMode from './editor_mode_dropdown.vue';
+
+  export default {
+    components: {
+      RepoTab,
+      EditorMode,
+    },
+    props: {
+      files: {
+        type: Array,
+        required: true,
+      },
+      viewer: {
+        type: String,
+        required: true,
+      },
+      hasChanges: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        showShadow: false,
+      };
+    },
+    updated() {
+      if (!this.$refs.tabsScroller) return;
+
+      this.showShadow =
+        this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth;
+    },
+    methods: {
+      ...mapActions(['updateViewer']),
+    },
+  };
+</script>
+
+<template>
+  <div class="multi-file-tabs">
+    <ul
+      class="list-unstyled append-bottom-0"
+      ref="tabsScroller"
+    >
+      <repo-tab
+        v-for="tab in files"
+        :key="tab.key"
+        :tab="tab"
+      />
+    </ul>
+    <editor-mode
+      :viewer="viewer"
+      :show-shadow="showShadow"
+      :has-changes="hasChanges"
+      @click="updateViewer"
+    />
+  </div>
+</template>

app/assets/javascripts/ide/components/resizable_panel.vue

+<script>
+  import { mapActions, mapState } from 'vuex';
+  import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
+
+  export default {
+    components: {
+      PanelResizer,
+    },
+    props: {
+      collapsible: {
+        type: Boolean,
+        required: true,
+      },
+      initialWidth: {
+        type: Number,
+        required: true,
+      },
+      minSize: {
+        type: Number,
+        required: false,
+        default: 200,
+      },
+      side: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        width: this.initialWidth,
+      };
+    },
+    computed: {
+      ...mapState({
+        collapsed(state) {
+          return state[`${this.side}PanelCollapsed`];
+        },
+      }),
+      panelStyle() {
+        if (!this.collapsed) {
+          return {
+            width: `${this.width}px`,
+          };
+        }
+
+        return {};
+      },
+    },
+    methods: {
+      ...mapActions([
+        'setPanelCollapsedStatus',
+        'setResizingStatus',
+      ]),
+      toggleFullbarCollapsed() {
+        if (this.collapsed && this.collapsible) {
+          this.setPanelCollapsedStatus({
+            side: this.side,
+            collapsed: !this.collapsed,
+          });
+        }
+      },
+    },
+    maxSize: (window.innerWidth / 2),
+  };
+</script>
+
+<template>
+  <div
+    class="multi-file-commit-panel"
+    :class="{
+      'is-collapsed': collapsed && collapsible,
+    }"
+    :style="panelStyle"
+    @click="toggleFullbarCollapsed"
+  >
+    <slot></slot>
+    <panel-resizer
+      :size.sync="width"
+      :enabled="!collapsed"
+      :start-size="initialWidth"
+      :min-size="minSize"
+      :max-size="$options.maxSize"
+      @resize-start="setResizingStatus(true)"
+      @resize-end="setResizingStatus(false)"
+      :side="side === 'right' ? 'left' : 'right'"
+    />
+  </div>
+</template>

app/assets/javascripts/ide/eventhub.js

+import Vue from 'vue';
+
+export default new Vue();

app/assets/javascripts/ide/ide_router.js

+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import flash from '~/flash';
+import store from './stores';
+
+Vue.use(VueRouter);
+
+/**
+ * Routes below /-/ide/:
+
+/project/h5bp/html5-boilerplate/blob/master
+/project/h5bp/html5-boilerplate/blob/master/app/js/test.js
+
+/project/h5bp/html5-boilerplate/mr/123
+/project/h5bp/html5-boilerplate/mr/123/app/js/test.js
+
+/workspace/123
+/workspace/project/h5bp/html5-boilerplate/blob/my-special-branch
+/workspace/project/h5bp/html5-boilerplate/mr/123
+
+/ = /workspace
+
+/settings
+*/
+
+// Unfortunately Vue Router doesn't work without at least a fake component
+// If you do only data handling
+const EmptyRouterComponent = {
+  render(createElement) {
+    return createElement('div');
+  },
+};
+
+const router = new VueRouter({
+  mode: 'history',
+  base: `${gon.relative_url_root}/-/ide/`,
+  routes: [
+    {
+      path: '/project/:namespace/:project',
+      component: EmptyRouterComponent,
+      children: [
+        {
+          path: ':targetmode/:branch/*',
+          component: EmptyRouterComponent,
+        },
+        {
+          path: 'mr/:mrid',
+          component: EmptyRouterComponent,
+        },
+      ],
+    },
+  ],
+});
+
+router.beforeEach((to, from, next) => {
+  if (to.params.namespace && to.params.project) {
+    store.dispatch('getProjectData', {
+      namespace: to.params.namespace,
+      projectId: to.params.project,
+    })
+    .then(() => {
+      const fullProjectId = `${to.params.namespace}/${to.params.project}`;
+
+      if (to.params.branch) {
+        store.dispatch('getBranchData', {
+          projectId: fullProjectId,
+          branchId: to.params.branch,
+        });
+
+        store.dispatch('getFiles', {
+          projectId: fullProjectId,
+          branchId: to.params.branch,
+        })
+        .then(() => {
+          if (to.params[0]) {
+            const treeEntry = store.state.entries[to.params[0]];
+            if (treeEntry) {
+              store.dispatch('handleTreeEntryAction', treeEntry);
+            }
+          }
+        })
+        .catch((e) => {
+          flash('Error while loading the branch files. Please try again.', 'alert', document, null, false, true);
+          throw e;
+        });
+      }
+    })
+    .catch((e) => {
+      flash('Error while loading the project data. Please try again.', 'alert', document, null, false, true);
+      throw e;
+    });
+  }
+
+  next();
+});
+
+export default router;

app/assets/javascripts/ide/index.js

+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import ide from './components/ide.vue';
+import store from './stores';
+import router from './ide_router';
+
+function initIde(el) {
+  if (!el) return null;
+
+  return new Vue({
+    el,
+    store,
+    router,
+    components: {
+      ide,
+    },
+    render(createElement) {
+      return createElement('ide', {
+        props: {
+          emptyStateSvgPath: el.dataset.emptyStateSvgPath,
+          noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
+          committedStateSvgPath: el.dataset.committedStateSvgPath,
+        },
+      });
+    },
+  });
+}
+
+const ideElement = document.getElementById('ide');
+
+Vue.use(Translate);
+
+initIde(ideElement);

app/assets/javascripts/ide/lib/common/disposable.js

+export default class Disposable {
+  constructor() {
+    this.disposers = new Set();
+  }
+
+  add(...disposers) {
+    disposers.forEach(disposer => this.disposers.add(disposer));
+  }
+
+  dispose() {
+    this.disposers.forEach(disposer => disposer.dispose());
+    this.disposers.clear();
+  }
+}

app/assets/javascripts/ide/lib/common/model.js

+/* global monaco */
+import Disposable from './disposable';
+import eventHub from '../../eventhub';
+
+export default class Model {
+  constructor(monaco, file) {
+    this.monaco = monaco;
+    this.disposable = new Disposable();
+    this.file = file;
+    this.content = file.content !== '' ? file.content : file.raw;
+
+    this.disposable.add(
+      (this.originalModel = this.monaco.editor.createModel(
+        this.file.raw,
+        undefined,
+        new this.monaco.Uri(null, null, `original/${this.file.path}`),
+      )),
+      (this.model = this.monaco.editor.createModel(
+        this.content,
+        undefined,
+        new this.monaco.Uri(null, null, this.file.path),
+      )),
+    );
+
+    this.events = new Map();
+
+    this.updateContent = this.updateContent.bind(this);
+    this.dispose = this.dispose.bind(this);
+
+    eventHub.$on(`editor.update.model.dispose.${this.file.path}`, this.dispose);
+    eventHub.$on(
+      `editor.update.model.content.${this.file.path}`,
+      this.updateContent,
+    );
+  }
+
+  get url() {
+    return this.model.uri.toString();
+  }
+
+  get language() {
+    return this.model.getModeId();
+  }
+
+  get eol() {
+    return this.model.getEOL() === '\n' ? 'LF' : 'CRLF';
+  }
+
+  get path() {
+    return this.file.path;
+  }
+
+  getModel() {
+    return this.model;
+  }
+
+  getOriginalModel() {
+    return this.originalModel;
+  }
+
+  setValue(value) {
+    this.getModel().setValue(value);
+  }
+
+  onChange(cb) {
+    this.events.set(
+      this.path,
+      this.disposable.add(this.model.onDidChangeContent(e => cb(this, e))),
+    );
+  }
+
+  updateContent(content) {
+    this.getOriginalModel().setValue(content);
+    this.getModel().setValue(content);
+  }
+
+  dispose() {
+    this.disposable.dispose();
+    this.events.clear();
+
+    eventHub.$off(
+      `editor.update.model.dispose.${this.file.path}`,
+      this.dispose,
+    );
+    eventHub.$off(
+      `editor.update.model.content.${this.file.path}`,
+      this.updateContent,
+    );
+  }
+}

app/assets/javascripts/ide/lib/common/model_manager.js

+import eventHub from '../../eventhub';
+import Disposable from './disposable';
+import Model from './model';
+
+export default class ModelManager {
+  constructor(monaco) {
+    this.monaco = monaco;
+    this.disposable = new Disposable();
+    this.models = new Map();
+  }
+
+  hasCachedModel(path) {
+    return this.models.has(path);
+  }
+
+  getModel(path) {
+    return this.models.get(path);
+  }
+
+  addModel(file) {
+    if (this.hasCachedModel(file.path)) {
+      return this.getModel(file.path);
+    }
+
+    const model = new Model(this.monaco, file);
+    this.models.set(model.path, model);
+    this.disposable.add(model);
+
+    eventHub.$on(
+      `editor.update.model.dispose.${file.path}`,
+      this.removeCachedModel.bind(this, file),
+    );
+
+    return model;
+  }
+
+  removeCachedModel(file) {
+    this.models.delete(file.path);
+
+    eventHub.$off(
+      `editor.update.model.dispose.${file.path}`,
+      this.removeCachedModel,
+    );
+  }
+
+  dispose() {
+    // dispose of all the models
+    this.disposable.dispose();
+    this.models.clear();
+  }
+}

app/assets/javascripts/ide/lib/decorations/controller.js

+export default class DecorationsController {
+  constructor(editor) {
+    this.editor = editor;
+    this.decorations = new Map();
+    this.editorDecorations = new Map();
+  }
+
+  getAllDecorationsForModel(model) {
+    if (!this.decorations.has(model.url)) return [];
+
+    const modelDecorations = this.decorations.get(model.url);
+    const decorations = [];
+
+    modelDecorations.forEach(val => decorations.push(...val));
+
+    return decorations;
+  }
+
+  addDecorations(model, decorationsKey, decorations) {
+    const decorationMap = this.decorations.get(model.url) || new Map();
+
+    decorationMap.set(decorationsKey, decorations);
+
+    this.decorations.set(model.url, decorationMap);
+
+    this.decorate(model);
+  }
+
+  decorate(model) {
+    if (!this.editor.instance) return;
+
+    const decorations = this.getAllDecorationsForModel(model);
+    const oldDecorations = this.editorDecorations.get(model.url) || [];
+
+    this.editorDecorations.set(
+      model.url,
+      this.editor.instance.deltaDecorations(oldDecorations, decorations),
+    );
+  }
+
+  dispose() {
+    this.decorations.clear();
+    this.editorDecorations.clear();
+  }
+}

app/assets/javascripts/ide/lib/diff/controller.js

+/* global monaco */
+import { throttle } from 'underscore';
+import DirtyDiffWorker from './diff_worker';
+import Disposable from '../common/disposable';
+
+export const getDiffChangeType = (change) => {
+  if (change.modified) {
+    return 'modified';
+  } else if (change.added) {
+    return 'added';
+  } else if (change.removed) {
+    return 'removed';
+  }
+
+  return '';
+};
+
+export const getDecorator = change => ({
+  range: new monaco.Range(
+    change.lineNumber,
+    1,
+    change.endLineNumber,
+    1,
+  ),
+  options: {
+    isWholeLine: true,
+    linesDecorationsClassName: `dirty-diff dirty-diff-${getDiffChangeType(change)}`,
+  },
+});
+
+export default class DirtyDiffController {
+  constructor(modelManager, decorationsController) {
+    this.disposable = new Disposable();
+    this.editorSimpleWorker = null;
+    this.modelManager = modelManager;
+    this.decorationsController = decorationsController;
+    this.dirtyDiffWorker = new DirtyDiffWorker();
+    this.throttledComputeDiff = throttle(this.computeDiff, 250);
+    this.decorate = this.decorate.bind(this);
+
+    this.dirtyDiffWorker.addEventListener('message', this.decorate);
+  }
+
+  attachModel(model) {
+    model.onChange(() => this.throttledComputeDiff(model));
+  }
+
+  computeDiff(model) {
+    this.dirtyDiffWorker.postMessage({
+      path: model.path,
+      originalContent: model.getOriginalModel().getValue(),
+      newContent: model.getModel().getValue(),
+    });
+  }
+
+  reDecorate(model) {
+    this.decorationsController.decorate(model);
+  }
+
+  decorate({ data }) {
+    const decorations = data.changes.map(change => getDecorator(change));
+    const model = this.modelManager.getModel(data.path);
+    this.decorationsController.addDecorations(model, 'dirtyDiff', decorations);
+  }
+
+  dispose() {
+    this.disposable.dispose();
+
+    this.dirtyDiffWorker.removeEventListener('message', this.decorate);
+    this.dirtyDiffWorker.terminate();
+  }
+}

app/assets/javascripts/ide/lib/diff/diff.js

+import { diffLines } from 'diff';
+
+// eslint-disable-next-line import/prefer-default-export
+export const computeDiff = (originalContent, newContent) => {
+  const changes = diffLines(originalContent, newContent);
+
+  let lineNumber = 1;
+  return changes.reduce((acc, change) => {
+    const findOnLine = acc.find(c => c.lineNumber === lineNumber);
+
+    if (findOnLine) {
+      Object.assign(findOnLine, change, {
+        modified: true,
+        endLineNumber: (lineNumber + change.count) - 1,
+      });
+    } else if ('added' in change || 'removed' in change) {
+      acc.push(Object.assign({}, change, {
+        lineNumber,
+        modified: undefined,
+        endLineNumber: (lineNumber + change.count) - 1,
+      }));
+    }
+
+    if (!change.removed) {
+      lineNumber += change.count;
+    }
+
+    return acc;
+  }, []);
+};

app/assets/javascripts/ide/lib/diff/diff_worker.js

+import { computeDiff } from './diff';
+
+self.addEventListener('message', (e) => {
+  const data = e.data;
+
+  self.postMessage({
+    path: data.path,
+    changes: computeDiff(data.originalContent, data.newContent),
+  });
+});

app/assets/javascripts/ide/lib/editor.js

+import _ from 'underscore';
+import DecorationsController from './decorations/controller';
+import DirtyDiffController from './diff/controller';
+import Disposable from './common/disposable';
+import ModelManager from './common/model_manager';
+import editorOptions, { defaultEditorOptions } from './editor_options';
+import gitlabTheme from './themes/gl_theme';
+
+export const clearDomElement = el => {
+  if (!el || !el.firstChild) return;
+
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+};
+
+export default class Editor {
+  static create(monaco) {
+    if (this.editorInstance) return this.editorInstance;
+
+    this.editorInstance = new Editor(monaco);
+
+    return this.editorInstance;
+  }
+
+  constructor(monaco) {
+    this.monaco = monaco;
+    this.currentModel = null;
+    this.instance = null;
+    this.dirtyDiffController = null;
+    this.disposable = new Disposable();
+    this.modelManager = new ModelManager(this.monaco);
+    this.decorationsController = new DecorationsController(this);
+
+    this.setupMonacoTheme();
+
+    this.debouncedUpdate = _.debounce(() => {
+      this.updateDimensions();
+    }, 200);
+  }
+
+  createInstance(domElement) {
+    if (!this.instance) {
+      clearDomElement(domElement);
+
+      this.disposable.add(
+        (this.instance = this.monaco.editor.create(domElement, {
+          ...defaultEditorOptions,
+        })),
+        (this.dirtyDiffController = new DirtyDiffController(
+          this.modelManager,
+          this.decorationsController,
+        )),
+      );
+
+      window.addEventListener('resize', this.debouncedUpdate, false);
+    }
+  }
+
+  createDiffInstance(domElement) {
+    if (!this.instance) {
+      clearDomElement(domElement);
+
+      this.disposable.add(
+        (this.instance = this.monaco.editor.createDiffEditor(domElement, {
+          ...defaultEditorOptions,
+          readOnly: true,
+        })),
+      );
+
+      window.addEventListener('resize', this.debouncedUpdate, false);
+    }
+  }
+
+  createModel(file) {
+    return this.modelManager.addModel(file);
+  }
+
+  attachModel(model) {
+    if (this.instance.getEditorType() === 'vs.editor.IDiffEditor') {
+      this.instance.setModel({
+        original: model.getOriginalModel(),
+        modified: model.getModel(),
+      });
+
+      return;
+    }
+
+    this.instance.setModel(model.getModel());
+    if (this.dirtyDiffController) this.dirtyDiffController.attachModel(model);
+
+    this.currentModel = model;
+
+    this.instance.updateOptions(
+      editorOptions.reduce((acc, obj) => {
+        Object.keys(obj).forEach(key => {
+          Object.assign(acc, {
+            [key]: obj[key](model),
+          });
+        });
+        return acc;
+      }, {}),
+    );
+
+    if (this.dirtyDiffController) this.dirtyDiffController.reDecorate(model);
+  }
+
+  setupMonacoTheme() {
+    this.monaco.editor.defineTheme(
+      gitlabTheme.themeName,
+      gitlabTheme.monacoTheme,
+    );
+
+    this.monaco.editor.setTheme('gitlab');
+  }
+
+  clearEditor() {
+    if (this.instance) {
+      this.instance.setModel(null);
+    }
+  }
+
+  dispose() {
+    window.removeEventListener('resize', this.debouncedUpdate);
+
+    // catch any potential errors with disposing the error
+    // this is mainly for tests caused by elements not existing
+    try {
+      this.disposable.dispose();
+
+      this.instance = null;
+    } catch (e) {
+      this.instance = null;
+
+      if (process.env.NODE_ENV !== 'test') {
+        // eslint-disable-next-line no-console
+        console.error(e);
+      }
+    }
+  }
+
+  updateDimensions() {
+    this.instance.layout();
+  }
+
+  setPosition({ lineNumber, column }) {
+    this.instance.revealPositionInCenter({
+      lineNumber,
+      column,
+    });
+    this.instance.setPosition({
+      lineNumber,
+      column,
+    });
+  }
+
+  onPositionChange(cb) {
+    if (!this.instance.onDidChangeCursorPosition) return;
+
+    this.disposable.add(
+      this.instance.onDidChangeCursorPosition(e => cb(this.instance, e)),
+    );
+  }
+}

app/assets/javascripts/ide/lib/editor_options.js

+export const defaultEditorOptions = {
+  model: null,
+  readOnly: false,
+  contextmenu: true,
+  scrollBeyondLastLine: false,
+  minimap: {
+    enabled: false,
+  },
+};
+
+export default [
+  {
+    readOnly: model => !!model.file.file_lock,
+  },
+];

app/assets/javascripts/ide/lib/themes/gl_theme.js

+export default {
+  themeName: 'gitlab',
+  monacoTheme: {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editorLineNumber.foreground': '#CCCCCC',
+      'diffEditor.insertedTextBackground': '#ddfbe6',
+      'diffEditor.removedTextBackground': '#f9d7dc',
+      'editor.selectionBackground': '#aad6f8',
+    },
+  },
+};

app/assets/javascripts/ide/monaco_loader.js

+import monacoContext from 'monaco-editor/dev/vs/loader';
+
+monacoContext.require.config({
+  paths: {
+    vs: `${__webpack_public_path__}monaco-editor/vs`, // eslint-disable-line camelcase
+  },
+});
+
+// ignore CDN config and use local assets path for service worker which cannot be cross-domain
+const relativeRootPath = (gon && gon.relative_url_root) || '';
+const monacoPath = `${relativeRootPath}/assets/webpack/monaco-editor/vs`;
+window.MonacoEnvironment = { getWorkerUrl: () => `${monacoPath}/base/worker/workerMain.js` };
+
+// eslint-disable-next-line no-underscore-dangle
+window.__monaco_context__ = monacoContext;
+export default monacoContext.require;

app/assets/javascripts/ide/services/index.js

+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import Api from '~/api';
+
+Vue.use(VueResource);
+
+export default {
+  getTreeData(endpoint) {
+    return Vue.http.get(endpoint, { params: { format: 'json' } });
+  },
+  getFileData(endpoint) {
+    return Vue.http.get(endpoint, { params: { format: 'json' } });
+  },
+  getRawFileData(file) {
+    if (file.tempFile) {
+      return Promise.resolve(file.content);
+    }
+
+    if (file.raw) {
+      return Promise.resolve(file.raw);
+    }
+
+    return Vue.http.get(file.rawPath, { params: { format: 'json' } })
+      .then(res => res.text());
+  },
+  getProjectData(namespace, project) {
+    return Api.project(`${namespace}/${project}`);
+  },
+  getBranchData(projectId, currentBranchId) {
+    return Api.branchSingle(projectId, currentBranchId);
+  },
+  createBranch(projectId, payload) {
+    const url = Api.buildUrl(Api.createBranchPath).replace(':id', projectId);
+
+    return Vue.http.post(url, payload);
+  },
+  commit(projectId, payload) {
+    return Api.commitMultiple(projectId, payload);
+  },
+  getTreeLastCommit(endpoint) {
+    return Vue.http.get(endpoint, {
+      params: {
+        format: 'json',
+      },
+    });
+  },
+  getFiles(projectUrl, branchId) {
+    const url = `${projectUrl}/files/${branchId}`;
+    return Vue.http.get(url, {
+      params: {
+        format: 'json',
+      },
+    });
+  },
+};

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

+import Vue from 'vue';
+import { visitUrl } from '~/lib/utils/url_utility';
+import flash from '~/flash';
+import * as types from './mutation_types';
+import FilesDecoratorWorker from './workers/files_decorator_worker';
+
+export const redirectToUrl = (_, url) => visitUrl(url);
+
+export const setInitialData = ({ commit }, data) =>
+  commit(types.SET_INITIAL_DATA, data);
+
+export const discardAllChanges = ({ state, commit, dispatch }) => {
+  state.changedFiles.forEach(file => {
+    commit(types.DISCARD_FILE_CHANGES, file.path);
+
+    if (file.tempFile) {
+      dispatch('closeFile', file.path);
+    }
+  });
+
+  commit(types.REMOVE_ALL_CHANGES_FILES);
+};
+
+export const closeAllFiles = ({ state, dispatch }) => {
+  state.openFiles.forEach(file => dispatch('closeFile', file.path));
+};
+
+export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => {
+  if (side === 'left') {
+    commit(types.SET_LEFT_PANEL_COLLAPSED, collapsed);
+  } else {
+    commit(types.SET_RIGHT_PANEL_COLLAPSED, collapsed);
+  }
+};
+
+export const setResizingStatus = ({ commit }, resizing) => {
+  commit(types.SET_RESIZING_STATUS, resizing);
+};
+
+export const createTempEntry = (
+  { state, commit, dispatch },
+  { branchId, name, type, content = '', base64 = false },
+) =>
+  new Promise(resolve => {
+    const worker = new FilesDecoratorWorker();
+    const fullName =
+      name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name;
+
+    if (state.entries[name]) {
+      flash(
+        `The name "${name
+          .split('/')
+          .pop()}" is already taken in this directory.`,
+        'alert',
+        document,
+        null,
+        false,
+        true,
+      );
+
+      resolve();
+
+      return null;
+    }
+
+    worker.addEventListener('message', ({ data }) => {
+      const { file } = data;
+
+      worker.terminate();
+
+      commit(types.CREATE_TMP_ENTRY, {
+        data,
+        projectId: state.currentProjectId,
+        branchId,
+      });
+
+      if (type === 'blob') {
+        commit(types.TOGGLE_FILE_OPEN, file.path);
+        commit(types.ADD_FILE_TO_CHANGED, file.path);
+        dispatch('setFileActive', file.path);
+      }
+
+      resolve(file);
+    });
+
+    worker.postMessage({
+      data: [fullName],
+      projectId: state.currentProjectId,
+      branchId,
+      type,
+      tempFile: true,
+      base64,
+      content,
+    });
+
+    return null;
+  });
+
+export const scrollToTab = () => {
+  Vue.nextTick(() => {
+    const tabs = document.getElementById('tabs');
+
+    if (tabs) {
+      const tabEl = tabs.querySelector('.active .repo-tab');
+
+      tabEl.focus();
+    }
+  });
+};
+
+export const updateViewer = ({ commit }, viewer) => {
+  commit(types.UPDATE_VIEWER, viewer);
+};
+
+export const updateDelayViewerUpdated = ({ commit }, delay) => {
+  commit(types.UPDATE_DELAY_VIEWER_CHANGE, delay);
+};
+
+export * from './actions/tree';
+export * from './actions/file';
+export * from './actions/project';

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

+import { normalizeHeaders } from '~/lib/utils/common_utils';
+import flash from '~/flash';
+import eventHub from '../../eventhub';
+import service from '../../services';
+import * as types from '../mutation_types';
+import router from '../../ide_router';
+import { setPageTitle } from '../utils';
+
+export const closeFile = ({ commit, state, getters, dispatch }, path) => {
+  const indexOfClosedFile = state.openFiles.findIndex(f => f.path === path);
+  const file = state.entries[path];
+  const fileWasActive = file.active;
+
+  commit(types.TOGGLE_FILE_OPEN, path);
+  commit(types.SET_FILE_ACTIVE, { path, active: false });
+
+  if (state.openFiles.length > 0 && fileWasActive) {
+    const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
+    const nextFileToOpen = state.entries[state.openFiles[nextIndexToOpen].path];
+
+    router.push(`/project${nextFileToOpen.url}`);
+  } else if (!state.openFiles.length) {
+    router.push(`/project/${file.projectId}/tree/${file.branchId}/`);
+  }
+
+  eventHub.$emit(`editor.update.model.dispose.${file.path}`);
+};
+
+export const setFileActive = ({ commit, state, getters, dispatch }, path) => {
+  const file = state.entries[path];
+  const currentActiveFile = getters.activeFile;
+
+  if (file.active) return;
+
+  if (currentActiveFile) {
+    commit(types.SET_FILE_ACTIVE, {
+      path: currentActiveFile.path,
+      active: false,
+    });
+  }
+
+  commit(types.SET_FILE_ACTIVE, { path, active: true });
+  dispatch('scrollToTab');
+
+  commit(types.SET_CURRENT_PROJECT, file.projectId);
+  commit(types.SET_CURRENT_BRANCH, file.branchId);
+};
+
+export const getFileData = ({ state, commit, dispatch }, file) => {
+  commit(types.TOGGLE_LOADING, { entry: file });
+
+  return service
+    .getFileData(file.url)
+    .then(res => {
+      const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']);
+
+      setPageTitle(pageTitle);
+
+      return res.json();
+    })
+    .then(data => {
+      commit(types.SET_FILE_DATA, { data, file });
+      commit(types.TOGGLE_FILE_OPEN, file.path);
+      dispatch('setFileActive', file.path);
+      commit(types.TOGGLE_LOADING, { entry: file });
+    })
+    .catch(() => {
+      commit(types.TOGGLE_LOADING, { entry: file });
+      flash(
+        'Error loading file data. Please try again.',
+        'alert',
+        document,
+        null,
+        false,
+        true,
+      );
+    });
+};
+
+export const getRawFileData = ({ commit, dispatch }, file) =>
+  service
+    .getRawFileData(file)
+    .then(raw => {
+      commit(types.SET_FILE_RAW_DATA, { file, raw });
+    })
+    .catch(() =>
+      flash(
+        'Error loading file content. Please try again.',
+        'alert',
+        document,
+        null,
+        false,
+        true,
+      ),
+    );
+
+export const changeFileContent = ({ state, commit }, { path, content }) => {
+  const file = state.entries[path];
+  commit(types.UPDATE_FILE_CONTENT, { path, content });
+
+  const indexOfChangedFile = state.changedFiles.findIndex(f => f.path === path);
+
+  if (file.changed && indexOfChangedFile === -1) {
+    commit(types.ADD_FILE_TO_CHANGED, path);
+  } else if (!file.changed && indexOfChangedFile !== -1) {
+    commit(types.REMOVE_FILE_FROM_CHANGED, path);
+  }
+};
+
+export const setFileLanguage = ({ getters, commit }, { fileLanguage }) => {
+  if (getters.activeFile) {
+    commit(types.SET_FILE_LANGUAGE, { file: getters.activeFile, fileLanguage });
+  }
+};
+
+export const setFileEOL = ({ getters, commit }, { eol }) => {
+  if (getters.activeFile) {
+    commit(types.SET_FILE_EOL, { file: getters.activeFile, eol });
+  }
+};
+
+export const setEditorPosition = (
+  { getters, commit },
+  { editorRow, editorColumn },
+) => {
+  if (getters.activeFile) {
+    commit(types.SET_FILE_POSITION, {
+      file: getters.activeFile,
+      editorRow,
+      editorColumn,
+    });
+  }
+};
+
+export const discardFileChanges = ({ state, commit }, path) => {
+  const file = state.entries[path];
+
+  commit(types.DISCARD_FILE_CHANGES, path);
+  commit(types.REMOVE_FILE_FROM_CHANGED, path);
+
+  if (file.tempFile && file.opened) {
+    commit(types.TOGGLE_FILE_OPEN, path);
+  }
+
+  eventHub.$emit(`editor.update.model.content.${file.path}`, file.raw);
+};

app/assets/javascripts/ide/stores/actions/project.js

+import flash from '~/flash';
+import service from '../../services';
+import * as types from '../mutation_types';
+
+export const getProjectData = (
+  { commit, state, dispatch },
+  { namespace, projectId, force = false } = {},
+) => new Promise((resolve, reject) => {
+  if (!state.projects[`${namespace}/${projectId}`] || force) {
+    commit(types.TOGGLE_LOADING, { entry: state });
+    service.getProjectData(namespace, projectId)
+    .then(res => res.data)
+    .then((data) => {
+      commit(types.TOGGLE_LOADING, { entry: state });
+      commit(types.SET_PROJECT, { projectPath: `${namespace}/${projectId}`, project: data });
+      if (!state.currentProjectId) commit(types.SET_CURRENT_PROJECT, `${namespace}/${projectId}`);
+      resolve(data);
+    })
+    .catch(() => {
+      flash('Error loading project data. Please try again.', 'alert', document, null, false, true);
+      reject(new Error(`Project not loaded ${namespace}/${projectId}`));
+    });
+  } else {
+    resolve(state.projects[`${namespace}/${projectId}`]);
+  }
+});
+
+export const getBranchData = (
+  { commit, state, dispatch },
+  { projectId, branchId, force = false } = {},
+) => new Promise((resolve, reject) => {
+  if ((typeof state.projects[`${projectId}`] === 'undefined' ||
+        !state.projects[`${projectId}`].branches[branchId])
+        || force) {
+    service.getBranchData(`${projectId}`, branchId)
+      .then(({ data }) => {
+        const { id } = data.commit;
+        commit(types.SET_BRANCH, { projectPath: `${projectId}`, branchName: branchId, branch: data });
+        commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id });
+        resolve(data);
+      })
+      .catch(() => {
+        flash('Error loading branch data. Please try again.', 'alert', document, null, false, true);
+        reject(new Error(`Branch not loaded - ${projectId}/${branchId}`));
+      });
+  } else {
+    resolve(state.projects[`${projectId}`].branches[branchId]);
+  }
+});

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

+import { normalizeHeaders } from '~/lib/utils/common_utils';
+import flash from '~/flash';
+import service from '../../services';
+import * as types from '../mutation_types';
+import {
+  findEntry,
+} from '../utils';
+import FilesDecoratorWorker from '../workers/files_decorator_worker';
+
+export const toggleTreeOpen = ({ commit, dispatch }, path) => {
+  commit(types.TOGGLE_TREE_OPEN, path);
+};
+
+export const handleTreeEntryAction = ({ commit, dispatch }, row) => {
+  if (row.type === 'tree') {
+    dispatch('toggleTreeOpen', row.path);
+  } else if (row.type === 'blob' && (row.opened || row.changed)) {
+    if (row.changed && !row.opened) {
+      commit(types.TOGGLE_FILE_OPEN, row.path);
+    }
+
+    dispatch('setFileActive', row.path);
+  } else {
+    dispatch('getFileData', row);
+  }
+};
+
+export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = state) => {
+  if (!tree || tree.lastCommitPath === null || !tree.lastCommitPath) return;
+
+  service.getTreeLastCommit(tree.lastCommitPath)
+    .then((res) => {
+      const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
+
+      commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath });
+
+      return res.json();
+    })
+    .then((data) => {
+      data.forEach((lastCommit) => {
+        const entry = findEntry(tree.tree, lastCommit.type, lastCommit.file_name);
+
+        if (entry) {
+          commit(types.SET_LAST_COMMIT_DATA, { entry, lastCommit });
+        }
+      });
+
+      dispatch('getLastCommitData', tree);
+    })
+    .catch(() => flash('Error fetching log data.', 'alert', document, null, false, true));
+};
+
+export const getFiles = (
+  { state, commit, dispatch },
+  { projectId, branchId } = {},
+) => new Promise((resolve, reject) => {
+  if (!state.trees[`${projectId}/${branchId}`]) {
+    const selectedProject = state.projects[projectId];
+    commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
+
+    service
+      .getFiles(selectedProject.web_url, branchId)
+      .then(res => res.json())
+      .then((data) => {
+        const worker = new FilesDecoratorWorker();
+        worker.addEventListener('message', (e) => {
+          const { entries, treeList } = e.data;
+          const selectedTree = state.trees[`${projectId}/${branchId}`];
+
+          commit(types.SET_ENTRIES, entries);
+          commit(types.SET_DIRECTORY_DATA, { treePath: `${projectId}/${branchId}`, data: treeList });
+          commit(types.TOGGLE_LOADING, { entry: selectedTree, forceValue: false });
+
+          worker.terminate();
+
+          resolve();
+        });
+
+        worker.postMessage({
+          data,
+          projectId,
+          branchId,
+        });
+      })
+      .catch((e) => {
+        flash('Error loading tree data. Please try again.', 'alert', document, null, false, true);
+        reject(e);
+      });
+  } else {
+    resolve();
+  }
+});
+

app/assets/javascripts/ide/stores/getters.js

+export const activeFile = state =>
+  state.openFiles.find(file => file.active) || null;
+
+export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
+
+export const modifiedFiles = state =>
+  state.changedFiles.filter(f => !f.tempFile);
+
+export const projectsWithTrees = state =>
+  Object.keys(state.projects).map(projectId => {
+    const project = state.projects[projectId];
+
+    return {
+      ...project,
+      branches: Object.keys(project.branches).map(branchId => {
+        const branch = project.branches[branchId];
+
+        return {
+          ...branch,
+          tree: state.trees[branch.treeId],
+        };
+      }),
+    };
+  });
+
+// eslint-disable-next-line no-confusing-arrow
+export const currentIcon = state =>
+  state.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
+
+export const hasChanges = state => !!state.changedFiles.length;

app/assets/javascripts/ide/stores/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import state from './state';
+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+import commitModule from './modules/commit';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: state(),
+  actions,
+  mutations,
+  getters,
+  modules: {
+    commit: commitModule,
+  },
+});

app/assets/javascripts/ide/stores/modules/commit/actions.js

+import $ from 'jquery';
+import { sprintf, __ } from '~/locale';
+import flash from '~/flash';
+import { stripHtml } from '~/lib/utils/text_utility';
+import * as rootTypes from '../../mutation_types';
+import { createCommitPayload, createNewMergeRequestUrl } from '../../utils';
+import router from '../../../ide_router';
+import service from '../../../services';
+import * as types from './mutation_types';
+import * as consts from './constants';
+import eventHub from '../../../eventhub';
+
+export const updateCommitMessage = ({ commit }, message) => {
+  commit(types.UPDATE_COMMIT_MESSAGE, message);
+};
+
+export const discardDraft = ({ commit }) => {
+  commit(types.UPDATE_COMMIT_MESSAGE, '');
+};
+
+export const updateCommitAction = ({ commit }, commitAction) => {
+  commit(types.UPDATE_COMMIT_ACTION, commitAction);
+};
+
+export const updateBranchName = ({ commit }, branchName) => {
+  commit(types.UPDATE_NEW_BRANCH_NAME, branchName);
+};
+
+export const setLastCommitMessage = ({ rootState, commit }, data) => {
+  const currentProject = rootState.projects[rootState.currentProjectId];
+  const commitStats = data.stats
+    ? sprintf(__('with %{additions} additions, %{deletions} deletions.'), {
+        additions: data.stats.additions, // eslint-disable-line indent
+        deletions: data.stats.deletions, // eslint-disable-line indent
+      }) // eslint-disable-line indent
+    : '';
+  const commitMsg = sprintf(
+    __('Your changes have been committed. Commit %{commitId} %{commitStats}'),
+    {
+      commitId: `<a href="${currentProject.web_url}/commit/${
+        data.short_id
+      }" class="commit-sha">${data.short_id}</a>`,
+      commitStats,
+    },
+    false,
+  );
+
+  commit(rootTypes.SET_LAST_COMMIT_MSG, commitMsg, { root: true });
+};
+
+export const checkCommitStatus = ({ rootState }) =>
+  service
+    .getBranchData(rootState.currentProjectId, rootState.currentBranchId)
+    .then(({ data }) => {
+      const { id } = data.commit;
+      const selectedBranch =
+        rootState.projects[rootState.currentProjectId].branches[
+          rootState.currentBranchId
+        ];
+
+      if (selectedBranch.workingReference !== id) {
+        return true;
+      }
+
+      return false;
+    })
+    .catch(() =>
+      flash(
+        __('Error checking branch data. Please try again.'),
+        'alert',
+        document,
+        null,
+        false,
+        true,
+      ),
+    );
+
+export const updateFilesAfterCommit = (
+  { commit, dispatch, state, rootState, rootGetters },
+  { data, branch },
+) => {
+  const selectedProject = rootState.projects[rootState.currentProjectId];
+  const lastCommit = {
+    commit_path: `${selectedProject.web_url}/commit/${data.id}`,
+    commit: {
+      id: data.id,
+      message: data.message,
+      authored_date: data.committed_date,
+      author_name: data.committer_name,
+    },
+  };
+
+  commit(
+    rootTypes.SET_BRANCH_WORKING_REFERENCE,
+    {
+      projectId: rootState.currentProjectId,
+      branchId: rootState.currentBranchId,
+      reference: data.id,
+    },
+    { root: true },
+  );
+
+  rootState.changedFiles.forEach(entry => {
+    commit(
+      rootTypes.SET_LAST_COMMIT_DATA,
+      {
+        entry,
+        lastCommit,
+      },
+      { root: true },
+    );
+
+    eventHub.$emit(`editor.update.model.content.${entry.path}`, entry.content);
+
+    commit(
+      rootTypes.SET_FILE_RAW_DATA,
+      {
+        file: entry,
+        raw: entry.content,
+      },
+      { root: true },
+    );
+
+    commit(
+      rootTypes.TOGGLE_FILE_CHANGED,
+      {
+        file: entry,
+        changed: false,
+      },
+      { root: true },
+    );
+  });
+
+  commit(rootTypes.REMOVE_ALL_CHANGES_FILES, null, { root: true });
+
+  if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH) {
+    router.push(
+      `/project/${rootState.currentProjectId}/blob/${branch}/${
+        rootGetters.activeFile.path
+      }`,
+    );
+  }
+
+  dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH);
+};
+
+export const commitChanges = ({
+  commit,
+  state,
+  getters,
+  dispatch,
+  rootState,
+}) => {
+  const newBranch = state.commitAction !== consts.COMMIT_TO_CURRENT_BRANCH;
+  const payload = createCommitPayload(
+    getters.branchName,
+    newBranch,
+    state,
+    rootState,
+  );
+  const getCommitStatus = newBranch
+    ? Promise.resolve(false)
+    : dispatch('checkCommitStatus');
+
+  commit(types.UPDATE_LOADING, true);
+
+  return getCommitStatus
+    .then(
+      branchChanged =>
+        new Promise(resolve => {
+          if (branchChanged) {
+            // show the modal with a Bootstrap call
+            $('#ide-create-branch-modal').modal('show');
+          } else {
+            resolve();
+          }
+        }),
+    )
+    .then(() => service.commit(rootState.currentProjectId, payload))
+    .then(({ data }) => {
+      commit(types.UPDATE_LOADING, false);
+
+      if (!data.short_id) {
+        flash(data.message, 'alert', document, null, false, true);
+        return;
+      }
+
+      dispatch('setLastCommitMessage', data);
+      dispatch('updateCommitMessage', '');
+
+      if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH_MR) {
+        dispatch(
+          'redirectToUrl',
+          createNewMergeRequestUrl(
+            rootState.projects[rootState.currentProjectId].web_url,
+            getters.branchName,
+            rootState.currentBranchId,
+          ),
+          { root: true },
+        );
+      } else {
+        dispatch('updateFilesAfterCommit', {
+          data,
+          branch: getters.branchName,
+        });
+      }
+    })
+    .catch(err => {
+      let errMsg = __('Error committing changes. Please try again.');
+      if (err.response.data && err.response.data.message) {
+        errMsg += ` (${stripHtml(err.response.data.message)})`;
+      }
+      flash(errMsg, 'alert', document, null, false, true);
+      window.dispatchEvent(new Event('resize'));
+
+      commit(types.UPDATE_LOADING, false);
+    });
+};

app/assets/javascripts/ide/stores/modules/commit/constants.js

+export const COMMIT_TO_CURRENT_BRANCH = '1';
+export const COMMIT_TO_NEW_BRANCH = '2';
+export const COMMIT_TO_NEW_BRANCH_MR = '3';

app/assets/javascripts/ide/stores/modules/commit/getters.js

+import * as consts from './constants';
+
+export const discardDraftButtonDisabled = state => state.commitMessage === '' || state.submitCommitLoading;
+
+export const commitButtonDisabled = (state, getters, rootState) =>
+  getters.discardDraftButtonDisabled || !rootState.changedFiles.length;
+
+export const newBranchName = (state, _, rootState) =>
+  `${gon.current_username}-${rootState.currentBranchId}-patch-${`${new Date().getTime()}`.substr(-5)}`;
+
+export const branchName = (state, getters, rootState) => {
+  if (
+    state.commitAction === consts.COMMIT_TO_NEW_BRANCH ||
+    state.commitAction === consts.COMMIT_TO_NEW_BRANCH_MR
+  ) {
+    if (state.newBranchName === '') {
+      return getters.newBranchName;
+    }
+
+    return state.newBranchName;
+  }
+
+  return rootState.currentBranchId;
+};

app/assets/javascripts/ide/stores/modules/commit/index.js

+import state from './state';
+import mutations from './mutations';
+import * as actions from './actions';
+import * as getters from './getters';
+
+export default {
+  namespaced: true,
+  state: state(),
+  mutations,
+  actions,
+  getters,
+};

app/assets/javascripts/ide/stores/modules/commit/mutation_types.js

+export const UPDATE_COMMIT_MESSAGE = 'UPDATE_COMMIT_MESSAGE';
+export const UPDATE_COMMIT_ACTION = 'UPDATE_COMMIT_ACTION';
+export const UPDATE_NEW_BRANCH_NAME = 'UPDATE_NEW_BRANCH_NAME';
+export const UPDATE_LOADING = 'UPDATE_LOADING';

app/assets/javascripts/ide/stores/modules/commit/mutations.js

+import * as types from './mutation_types';
+
+export default {
+  [types.UPDATE_COMMIT_MESSAGE](state, commitMessage) {
+    Object.assign(state, {
+      commitMessage,
+    });
+  },
+  [types.UPDATE_COMMIT_ACTION](state, commitAction) {
+    Object.assign(state, {
+      commitAction,
+    });
+  },
+  [types.UPDATE_NEW_BRANCH_NAME](state, newBranchName) {
+    Object.assign(state, {
+      newBranchName,
+    });
+  },
+  [types.UPDATE_LOADING](state, submitCommitLoading) {
+    Object.assign(state, {
+      submitCommitLoading,
+    });
+  },
+};

app/assets/javascripts/ide/stores/modules/commit/state.js

+export default () => ({
+  commitMessage: '',
+  commitAction: '1',
+  newBranchName: '',
+  submitCommitLoading: false,
+});

app/assets/javascripts/ide/stores/mutation_types.js

+export const SET_INITIAL_DATA = 'SET_INITIAL_DATA';
+export const TOGGLE_LOADING = 'TOGGLE_LOADING';
+export const SET_LAST_COMMIT_DATA = 'SET_LAST_COMMIT_DATA';
+export const SET_LAST_COMMIT_MSG = 'SET_LAST_COMMIT_MSG';
+export const SET_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED';
+export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED';
+export const SET_RESIZING_STATUS = 'SET_RESIZING_STATUS';
+
+// Project Mutation Types
+export const SET_PROJECT = 'SET_PROJECT';
+export const SET_CURRENT_PROJECT = 'SET_CURRENT_PROJECT';
+export const TOGGLE_PROJECT_OPEN = 'TOGGLE_PROJECT_OPEN';
+
+// Branch Mutation Types
+export const SET_BRANCH = 'SET_BRANCH';
+export const SET_BRANCH_WORKING_REFERENCE = 'SET_BRANCH_WORKING_REFERENCE';
+export const TOGGLE_BRANCH_OPEN = 'TOGGLE_BRANCH_OPEN';
+
+// Tree mutation types
+export const SET_DIRECTORY_DATA = 'SET_DIRECTORY_DATA';
+export const TOGGLE_TREE_OPEN = 'TOGGLE_TREE_OPEN';
+export const SET_LAST_COMMIT_URL = 'SET_LAST_COMMIT_URL';
+export const CREATE_TREE = 'CREATE_TREE';
+export const REMOVE_ALL_CHANGES_FILES = 'REMOVE_ALL_CHANGES_FILES';
+
+// File mutation types
+export const SET_FILE_DATA = 'SET_FILE_DATA';
+export const TOGGLE_FILE_OPEN = 'TOGGLE_FILE_OPEN';
+export const SET_FILE_ACTIVE = 'SET_FILE_ACTIVE';
+export const SET_FILE_RAW_DATA = 'SET_FILE_RAW_DATA';
+export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
+export const SET_FILE_LANGUAGE = 'SET_FILE_LANGUAGE';
+export const SET_FILE_POSITION = 'SET_FILE_POSITION';
+export const SET_FILE_EOL = 'SET_FILE_EOL';
+export const DISCARD_FILE_CHANGES = 'DISCARD_FILE_CHANGES';
+export const ADD_FILE_TO_CHANGED = 'ADD_FILE_TO_CHANGED';
+export const REMOVE_FILE_FROM_CHANGED = 'REMOVE_FILE_FROM_CHANGED';
+export const TOGGLE_FILE_CHANGED = 'TOGGLE_FILE_CHANGED';
+export const SET_CURRENT_BRANCH = 'SET_CURRENT_BRANCH';
+export const SET_ENTRIES = 'SET_ENTRIES';
+export const CREATE_TMP_ENTRY = 'CREATE_TMP_ENTRY';
+export const UPDATE_VIEWER = 'UPDATE_VIEWER';
+export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE';

app/assets/javascripts/ide/stores/mutations.js

+import * as types from './mutation_types';
+import projectMutations from './mutations/project';
+import fileMutations from './mutations/file';
+import treeMutations from './mutations/tree';
+import branchMutations from './mutations/branch';
+
+export default {
+  [types.SET_INITIAL_DATA](state, data) {
+    Object.assign(state, data);
+  },
+  [types.TOGGLE_LOADING](state, { entry, forceValue = undefined }) {
+    if (entry.path) {
+      Object.assign(state.entries[entry.path], {
+        loading:
+          forceValue !== undefined
+            ? forceValue
+            : !state.entries[entry.path].loading,
+      });
+    } else {
+      Object.assign(entry, {
+        loading: forceValue !== undefined ? forceValue : !entry.loading,
+      });
+    }
+  },
+  [types.SET_LEFT_PANEL_COLLAPSED](state, collapsed) {
+    Object.assign(state, {
+      leftPanelCollapsed: collapsed,
+    });
+  },
+  [types.SET_RIGHT_PANEL_COLLAPSED](state, collapsed) {
+    Object.assign(state, {
+      rightPanelCollapsed: collapsed,
+    });
+  },
+  [types.SET_RESIZING_STATUS](state, resizing) {
+    Object.assign(state, {
+      panelResizing: resizing,
+    });
+  },
+  [types.SET_LAST_COMMIT_DATA](state, { entry, lastCommit }) {
+    Object.assign(entry.lastCommit, {
+      id: lastCommit.commit.id,
+      url: lastCommit.commit_path,
+      message: lastCommit.commit.message,
+      author: lastCommit.commit.author_name,
+      updatedAt: lastCommit.commit.authored_date,
+    });
+  },
+  [types.SET_LAST_COMMIT_MSG](state, lastCommitMsg) {
+    Object.assign(state, {
+      lastCommitMsg,
+    });
+  },
+  [types.SET_ENTRIES](state, entries) {
+    Object.assign(state, {
+      entries,
+    });
+  },
+  [types.CREATE_TMP_ENTRY](state, { data, projectId, branchId }) {
+    Object.keys(data.entries).reduce((acc, key) => {
+      const entry = data.entries[key];
+      const foundEntry = state.entries[key];
+
+      if (!foundEntry) {
+        Object.assign(state.entries, {
+          [key]: entry,
+        });
+      } else {
+        const tree = entry.tree.filter(
+          f => foundEntry.tree.find(e => e.path === f.path) === undefined,
+        );
+        Object.assign(foundEntry, {
+          tree: foundEntry.tree.concat(tree),
+        });
+      }
+
+      return acc.concat(key);
+    }, []);
+
+    const foundEntry = state.trees[`${projectId}/${branchId}`].tree.find(
+      e => e.path === data.treeList[0].path,
+    );
+
+    if (!foundEntry) {
+      Object.assign(state.trees[`${projectId}/${branchId}`], {
+        tree: state.trees[`${projectId}/${branchId}`].tree.concat(
+          data.treeList,
+        ),
+      });
+    }
+  },
+  [types.UPDATE_VIEWER](state, viewer) {
+    Object.assign(state, {
+      viewer,
+    });
+  },
+  [types.UPDATE_DELAY_VIEWER_CHANGE](state, delayViewerUpdated) {
+    Object.assign(state, {
+      delayViewerUpdated,
+    });
+  },
+  ...projectMutations,
+  ...fileMutations,
+  ...treeMutations,
+  ...branchMutations,
+};

app/assets/javascripts/ide/stores/mutations/branch.js

+import * as types from '../mutation_types';
+
+export default {
+  [types.SET_CURRENT_BRANCH](state, currentBranchId) {
+    Object.assign(state, {
+      currentBranchId,
+    });
+  },
+  [types.SET_BRANCH](state, { projectPath, branchName, branch }) {
+    Object.assign(state.projects[projectPath], {
+      branches: {
+        [branchName]: {
+          ...branch,
+          treeId: `${projectPath}/${branchName}`,
+          active: true,
+          workingReference: '',
+        },
+      },
+    });
+  },
+  [types.SET_BRANCH_WORKING_REFERENCE](state, { projectId, branchId, reference }) {
+    Object.assign(state.projects[projectId].branches[branchId], {
+      workingReference: reference,
+    });
+  },
+};

app/assets/javascripts/ide/stores/mutations/file.js

+import * as types from '../mutation_types';
+
+export default {
+  [types.SET_FILE_ACTIVE](state, { path, active }) {
+    Object.assign(state.entries[path], {
+      active,
+    });
+  },
+  [types.TOGGLE_FILE_OPEN](state, path) {
+    Object.assign(state.entries[path], {
+      opened: !state.entries[path].opened,
+    });
+
+    if (state.entries[path].opened) {
+      state.openFiles.push(state.entries[path]);
+    } else {
+      Object.assign(state, {
+        openFiles: state.openFiles.filter(f => f.path !== path),
+      });
+    }
+  },
+  [types.SET_FILE_DATA](state, { data, file }) {
+    Object.assign(state.entries[file.path], {
+      id: data.id,
+      blamePath: data.blame_path,
+      commitsPath: data.commits_path,
+      permalink: data.permalink,
+      rawPath: data.raw_path,
+      binary: data.binary,
+      renderError: data.render_error,
+    });
+  },
+  [types.SET_FILE_RAW_DATA](state, { file, raw }) {
+    Object.assign(state.entries[file.path], {
+      raw,
+    });
+  },
+  [types.UPDATE_FILE_CONTENT](state, { path, content }) {
+    const changed = content !== state.entries[path].raw;
+
+    Object.assign(state.entries[path], {
+      content,
+      changed,
+    });
+  },
+  [types.SET_FILE_LANGUAGE](state, { file, fileLanguage }) {
+    Object.assign(state.entries[file.path], {
+      fileLanguage,
+    });
+  },
+  [types.SET_FILE_EOL](state, { file, eol }) {
+    Object.assign(state.entries[file.path], {
+      eol,
+    });
+  },
+  [types.SET_FILE_POSITION](state, { file, editorRow, editorColumn }) {
+    Object.assign(state.entries[file.path], {
+      editorRow,
+      editorColumn,
+    });
+  },
+  [types.DISCARD_FILE_CHANGES](state, path) {
+    Object.assign(state.entries[path], {
+      content: state.entries[path].raw,
+      changed: false,
+    });
+  },
+  [types.ADD_FILE_TO_CHANGED](state, path) {
+    Object.assign(state, {
+      changedFiles: state.changedFiles.concat(state.entries[path]),
+    });
+  },
+  [types.REMOVE_FILE_FROM_CHANGED](state, path) {
+    Object.assign(state, {
+      changedFiles: state.changedFiles.filter(f => f.path !== path),
+    });
+  },
+  [types.TOGGLE_FILE_CHANGED](state, { file, changed }) {
+    Object.assign(state.entries[file.path], {
+      changed,
+    });
+  },
+};

app/assets/javascripts/ide/stores/mutations/project.js

+import * as types from '../mutation_types';
+
+export default {
+  [types.SET_CURRENT_PROJECT](state, currentProjectId) {
+    Object.assign(state, {
+      currentProjectId,
+    });
+  },
+  [types.SET_PROJECT](state, { projectPath, project }) {
+    // Add client side properties
+    Object.assign(project, {
+      tree: [],
+      branches: {},
+      active: true,
+    });
+
+    Object.assign(state, {
+      projects: Object.assign({}, state.projects, {
+        [projectPath]: project,
+      }),
+    });
+  },
+};

app/assets/javascripts/ide/stores/mutations/tree.js

+import * as types from '../mutation_types';
+
+export default {
+  [types.TOGGLE_TREE_OPEN](state, path) {
+    Object.assign(state.entries[path], {
+      opened: !state.entries[path].opened,
+    });
+  },
+  [types.CREATE_TREE](state, { treePath }) {
+    Object.assign(state, {
+      trees: Object.assign({}, state.trees, {
+        [treePath]: {
+          tree: [],
+          loading: true,
+        },
+      }),
+    });
+  },
+  [types.SET_DIRECTORY_DATA](state, { data, treePath }) {
+    Object.assign(state, {
+      trees: Object.assign(state.trees, {
+        [treePath]: {
+          tree: data,
+        },
+      }),
+    });
+  },
+  [types.SET_LAST_COMMIT_URL](state, { tree = state, url }) {
+    Object.assign(tree, {
+      lastCommitPath: url,
+    });
+  },
+  [types.REMOVE_ALL_CHANGES_FILES](state) {
+    Object.assign(state, {
+      changedFiles: [],
+    });
+  },
+};

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

+export default () => ({
+  currentProjectId: '',
+  currentBranchId: '',
+  changedFiles: [],
+  endpoints: {},
+  lastCommitMsg: '',
+  lastCommitPath: '',
+  loading: false,
+  openFiles: [],
+  parentTreeUrl: '',
+  trees: {},
+  projects: {},
+  leftPanelCollapsed: false,
+  rightPanelCollapsed: false,
+  panelResizing: false,
+  entries: {},
+  viewer: 'editor',
+  delayViewerUpdated: false,
+});

app/assets/javascripts/ide/stores/utils.js

+export const dataStructure = () => ({
+  id: '',
+  key: '',
+  type: '',
+  projectId: '',
+  branchId: '',
+  name: '',
+  url: '',
+  path: '',
+  tempFile: false,
+  tree: [],
+  loading: false,
+  opened: false,
+  active: false,
+  changed: false,
+  lastCommitPath: '',
+  lastCommit: {
+    id: '',
+    url: '',
+    message: '',
+    updatedAt: '',
+    author: '',
+  },
+  blamePath: '',
+  commitsPath: '',
+  permalink: '',
+  rawPath: '',
+  binary: false,
+  html: '',
+  raw: '',
+  content: '',
+  parentTreeUrl: '',
+  renderError: false,
+  base64: false,
+  editorRow: 1,
+  editorColumn: 1,
+  fileLanguage: '',
+  eol: '',
+});
+
+export const decorateData = (entity) => {
+  const {
+    id,
+    projectId,
+    branchId,
+    type,
+    url,
+    name,
+    path,
+    renderError,
+    content = '',
+    tempFile = false,
+    active = false,
+    opened = false,
+    changed = false,
+    parentTreeUrl = '',
+    base64 = false,
+
+    file_lock,
+
+  } = entity;
+
+  return {
+    ...dataStructure(),
+    id,
+    projectId,
+    branchId,
+    key: `${name}-${type}-${id}`,
+    type,
+    name,
+    url,
+    path,
+    tempFile,
+    opened,
+    active,
+    parentTreeUrl,
+    changed,
+    renderError,
+    content,
+    base64,
+
+    file_lock,
+
+  };
+};
+
+export const findEntry = (tree, type, name, prop = 'name') => tree.find(
+  f => f.type === type && f[prop] === name,
+);
+
+export const findIndexOfFile = (state, file) => state.findIndex(f => f.path === file.path);
+
+export const setPageTitle = (title) => {
+  document.title = title;
+};
+
+export const createCommitPayload = (branch, newBranch, state, rootState) => ({
+  branch,
+  commit_message: state.commitMessage,
+  actions: rootState.changedFiles.map(f => ({
+    action: f.tempFile ? 'create' : 'update',
+    file_path: f.path,
+    content: f.content,
+    encoding: f.base64 ? 'base64' : 'text',
+  })),
+  start_branch: newBranch ? rootState.currentBranchId : undefined,
+});
+
+export const createNewMergeRequestUrl = (projectUrl, source, target) =>
+  `${projectUrl}/merge_requests/new?merge_request[source_branch]=${source}&merge_request[target_branch]=${target}`;
+
+const sortTreesByTypeAndName = (a, b) => {
+  if (a.type === 'tree' && b.type === 'blob') {
+    return -1;
+  } else if (a.type === 'blob' && b.type === 'tree') {
+    return 1;
+  }
+  if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
+  if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
+  return 0;
+};
+
+export const sortTree = sortedTree => sortedTree.map(entity => Object.assign(entity, {
+  tree: entity.tree.length ? sortTree(entity.tree) : [],
+})).sort(sortTreesByTypeAndName);

app/assets/javascripts/ide/stores/workers/files_decorator_worker.js

+import {
+  decorateData,
+  sortTree,
+} from '../utils';
+
+self.addEventListener('message', (e) => {
+  const { data, projectId, branchId, tempFile = false, content = '', base64 = false } = e.data;
+
+  const treeList = [];
+  let file;
+  const entries = data.reduce((acc, path) => {
+    const pathSplit = path.split('/');
+    const blobName = pathSplit.pop().trim();
+
+    if (pathSplit.length > 0) {
+      pathSplit.reduce((pathAcc, folderName) => {
+        const parentFolder = acc[pathAcc[pathAcc.length - 1]];
+        const folderPath = `${(parentFolder ? `${parentFolder.path}/` : '')}${folderName}`;
+        const foundEntry = acc[folderPath];
+
+        if (!foundEntry) {
+          const tree = decorateData({
+            projectId,
+            branchId,
+            id: folderPath,
+            name: folderName,
+            path: folderPath,
+            url: `/${projectId}/tree/${branchId}/${folderPath}`,
+            type: 'tree',
+            parentTreeUrl: parentFolder ? parentFolder.url : `/${projectId}/tree/${branchId}/`,
+            tempFile,
+            changed: tempFile,
+            opened: tempFile,
+          });
+
+          Object.assign(acc, {
+            [folderPath]: tree,
+          });
+
+          if (parentFolder) {
+            parentFolder.tree.push(tree);
+          } else {
+            treeList.push(tree);
+          }
+
+          pathAcc.push(tree.path);
+        } else {
+          pathAcc.push(foundEntry.path);
+        }
+
+        return pathAcc;
+      }, []);
+    }
+
+    if (blobName !== '') {
+      const fileFolder = acc[pathSplit.join('/')];
+      file = decorateData({
+        projectId,
+        branchId,
+        id: path,
+        name: blobName,
+        path,
+        url: `/${projectId}/blob/${branchId}/${path}`,
+        type: 'blob',
+        parentTreeUrl: fileFolder ? fileFolder.url : `/${projectId}/blob/${branchId}`,
+        tempFile,
+        changed: tempFile,
+        content,
+        base64,
+      });
+
+      Object.assign(acc, {
+        [path]: file,
+      });
+
+      if (fileFolder) {
+        fileFolder.tree.push(file);
+      } else {
+        treeList.push(file);
+      }
+    }
+
+    return acc;
+  }, {});
+
+  self.postMessage({
+    entries,
+    treeList: sortTree(treeList),
+    file,
+  });
+});

app/assets/javascripts/lib/utils/text_markdown.js

 /* eslint-disable import/prefer-default-export, func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, quotes, one-var, one-var-declaration-per-line, operator-assignment, no-else-return, prefer-template, prefer-arrow-callback, no-empty, max-len, consistent-return, no-unused-vars, no-return-assign, max-len, vars-on-top */
-
 import $ from 'jquery';
+import { insertText } from '~/lib/utils/common_utils';
 
-const textUtils = {};
-
-textUtils.selectedText = function(text, textarea) {
+function selectedText(text, textarea) {
   return text.substring(textarea.selectionStart, textarea.selectionEnd);
-};
+}
 
-textUtils.lineBefore = function(text, textarea) {
+function lineBefore(text, textarea) {
   var split;
   split = text.substring(0, textarea.selectionStart).trim().split('\n');
   return split[split.length - 1];
-};
+}
 
-textUtils.lineAfter = function(text, textarea) {
+function lineAfter(text, textarea) {
   return text.substring(textarea.selectionEnd).trim().split('\n')[0];
-};
+}
 
-textUtils.blockTagText = function(text, textArea, blockTag, selected) {
-  var lineAfter, lineBefore;
-  lineBefore = this.lineBefore(text, textArea);
-  lineAfter = this.lineAfter(text, textArea);
-  if (lineBefore === blockTag && lineAfter === blockTag) {
+function blockTagText(text, textArea, blockTag, selected) {
+  const before = lineBefore(text, textArea);
+  const after = lineAfter(text, textArea);
+  if (before === blockTag && after === blockTag) {
     // To remove the block tag we have to select the line before & after
     if (blockTag != null) {
       textArea.selectionStart = textArea.selectionStart - (blockTag.length + 1);
@@ -32,10 +29,30 @@ textUtils.blockTagText = function(text, textArea, blockTag, selected) {
   } else {
     return blockTag + "\n" + selected + "\n" + blockTag;
   }
-};
+}
 
-textUtils.insertText = function(textArea, text, tag, blockTag, selected, wrap) {
-  var insertText, inserted, selectedSplit, startChar, removedLastNewLine, removedFirstNewLine, currentLineEmpty, lastNewLine;
+function moveCursor(textArea, tag, wrapped, removedLastNewLine) {
+  var pos;
+  if (!textArea.setSelectionRange) {
+    return;
+  }
+  if (textArea.selectionStart === textArea.selectionEnd) {
+    if (wrapped) {
+      pos = textArea.selectionStart - tag.length;
+    } else {
+      pos = textArea.selectionStart;
+    }
+
+    if (removedLastNewLine) {
+      pos -= 1;
+    }
+
+    return textArea.setSelectionRange(pos, pos);
+  }
+}
+
+export function insertMarkdownText(textArea, text, tag, blockTag, selected, wrap) {
+  var textToInsert, inserted, selectedSplit, startChar, removedLastNewLine, removedFirstNewLine, currentLineEmpty, lastNewLine;
   removedLastNewLine = false;
   removedFirstNewLine = false;
   currentLineEmpty = false;
@@ -67,9 +84,9 @@ textUtils.insertText = function(textArea, text, tag, blockTag, selected, wrap) {
 
   if (selectedSplit.length > 1 && (!wrap || (blockTag != null && blockTag !== ''))) {
     if (blockTag != null && blockTag !== '') {
-      insertText = this.blockTagText(text, textArea, blockTag, selected);
+      textToInsert = blockTagText(text, textArea, blockTag, selected);
     } else {
-      insertText = selectedSplit.map(function(val) {
+      textToInsert = selectedSplit.map(function(val) {
         if (val.indexOf(tag) === 0) {
           return "" + (val.replace(tag, ''));
         } else {
@@ -78,78 +95,42 @@ textUtils.insertText = function(textArea, text, tag, blockTag, selected, wrap) {
       }).join('\n');
     }
   } else {
-    insertText = "" + startChar + tag + selected + (wrap ? tag : ' ');
+    textToInsert = "" + startChar + tag + selected + (wrap ? tag : ' ');
   }
 
   if (removedFirstNewLine) {
-    insertText = '\n' + insertText;
+    textToInsert = '\n' + textToInsert;
   }
 
   if (removedLastNewLine) {
-    insertText += '\n';
+    textToInsert += '\n';
   }
 
-  if (document.queryCommandSupported('insertText')) {
-    inserted = document.execCommand('insertText', false, insertText);
-  }
-  if (!inserted) {
-    try {
-      document.execCommand("ms-beginUndoUnit");
-    } catch (error) {}
-    textArea.value = this.replaceRange(text, textArea.selectionStart, textArea.selectionEnd, insertText);
-    try {
-      document.execCommand("ms-endUndoUnit");
-    } catch (error) {}
-  }
-  return this.moveCursor(textArea, tag, wrap, removedLastNewLine);
-};
+  insertText(textArea, textToInsert);
+  return moveCursor(textArea, tag, wrap, removedLastNewLine);
+}
 
-textUtils.moveCursor = function(textArea, tag, wrapped, removedLastNewLine) {
-  var pos;
-  if (!textArea.setSelectionRange) {
-    return;
-  }
-  if (textArea.selectionStart === textArea.selectionEnd) {
-    if (wrapped) {
-      pos = textArea.selectionStart - tag.length;
-    } else {
-      pos = textArea.selectionStart;
-    }
-
-    if (removedLastNewLine) {
-      pos -= 1;
-    }
-
-    return textArea.setSelectionRange(pos, pos);
-  }
-};
-
-textUtils.updateText = function(textArea, tag, blockTag, wrap) {
+function updateText(textArea, tag, blockTag, wrap) {
   var $textArea, selected, text;
   $textArea = $(textArea);
   textArea = $textArea.get(0);
   text = $textArea.val();
-  selected = this.selectedText(text, textArea);
+  selected = selectedText(text, textArea);
   $textArea.focus();
-  return this.insertText(textArea, text, tag, blockTag, selected, wrap);
-};
+  return insertMarkdownText(textArea, text, tag, blockTag, selected, wrap);
+}
 
-textUtils.init = function(form) {
-  var self;
-  self = this;
+function replaceRange(s, start, end, substitute) {
+  return s.substring(0, start) + substitute + s.substring(end);
+}
+
+export function addMarkdownListeners(form) {
   return $('.js-md', form).off('click').on('click', function() {
-    var $this;
-    $this = $(this);
-    return self.updateText($this.closest('.md-area').find('textarea'), $this.data('mdTag'), $this.data('mdBlock'), !$this.data('mdPrepend'));
+    const $this = $(this);
+    return updateText($this.closest('.md-area').find('textarea'), $this.data('mdTag'), $this.data('mdBlock'), !$this.data('mdPrepend'));
   });
-};
+}
 
-textUtils.removeListeners = function(form) {
+export function removeMarkdownListeners(form) {
   return $('.js-md', form).off('click');
-};
-
-textUtils.replaceRange = function(s, start, end, substitute) {
-  return s.substring(0, start) + substitute + s.substring(end);
-};
-
-export default textUtils;
+}

app/assets/javascripts/main.js

 /* eslint-disable import/first */
-/* global ConfirmDangerModal */
 /* global $ */
 
 import jQuery from 'jquery';
@@ -21,7 +20,6 @@ import './behaviors/';
 // everything else
 import loadAwardsHandler from './awards_handler';
 import bp from './breakpoints';
-import './confirm_danger_modal';
 import Flash, { removeFlashClickListener } from './flash';
 import './gl_dropdown';
 import initTodoToggle from './header';
@@ -214,16 +212,6 @@ document.addEventListener('DOMContentLoaded', () => {
     $(document).trigger('toggle.comments');
   });
 
-  $document.on('click', '.js-confirm-danger', (e) => {
-    const btn = $(e.target);
-    const form = btn.closest('form');
-    const text = btn.data('confirmDangerMessage');
-    e.preventDefault();
-
-    // eslint-disable-next-line no-new
-    new ConfirmDangerModal(form, text);
-  });
-
   $document.on('breakpoint:change', (e, breakpoint) => {
     if (breakpoint === 'sm' || breakpoint === 'xs') {
       const $gutterIcon = $sidebarGutterToggle.find('i');

app/assets/javascripts/pages/groups/edit/index.js

 import groupAvatar from '~/group_avatar';
 import TransferDropdown from '~/groups/transfer_dropdown';
+import initConfirmDangerModal from '~/confirm_danger_modal';
 
 document.addEventListener('DOMContentLoaded', () => {
   groupAvatar();
   new TransferDropdown(); // eslint-disable-line no-new
+  initConfirmDangerModal();
 });

app/assets/javascripts/pages/projects/edit/index.js

 import initSettingsPanels from '~/settings_panels';
 import setupProjectEdit from '~/project_edit';
+import initConfirmDangerModal from '~/confirm_danger_modal';
 import ProjectNew from '../shared/project_new';
 import projectAvatar from '../shared/project_avatar';
 import initProjectPermissionsSettings from '../shared/permissions';
@@ -11,4 +12,5 @@ document.addEventListener('DOMContentLoaded', () => {
   initSettingsPanels();
   projectAvatar();
   initProjectPermissionsSettings();
+  initConfirmDangerModal();
 });

app/assets/javascripts/profile/profile.js

 /* eslint-disable comma-dangle, no-unused-vars, class-methods-use-this, quotes, consistent-return, func-names, prefer-arrow-callback, space-before-function-paren, max-len */
 
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import flash from '../flash';
@@ -10,7 +9,6 @@ export default class Profile {
   constructor({ form } = {}) {
     this.onSubmitForm = this.onSubmitForm.bind(this);
     this.form = form || $('.edit-user');
-    this.newRepoActivated = Cookies.get('new_repo');
     this.setRepoRadio();
     this.bindEvents();
     this.initAvatarGlCrop();
@@ -23,21 +21,28 @@ export default class Profile {
       modalCrop: '.modal-profile-crop',
       pickImageEl: '.js-choose-user-avatar-button',
       uploadImageBtn: '.js-upload-user-avatar',
-      modalCropImg: '.modal-profile-crop-image'
+      modalCropImg: '.modal-profile-crop-image',
     };
-    this.avatarGlCrop = $('.js-user-avatar-input').glCrop(cropOpts).data('glcrop');
+    this.avatarGlCrop = $('.js-user-avatar-input')
+      .glCrop(cropOpts)
+      .data('glcrop');
   }
 
   bindEvents() {
-    $('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
-    $('input[name="user[multi_file]"]').on('change', this.setNewRepoCookie);
+    $('.js-preferences-form').on(
+      'change.preference',
+      'input[type=radio]',
+      this.submitForm,
+    );
     $('#user_notification_email').on('change', this.submitForm);
     $('#user_notified_of_own_activity').on('change', this.submitForm);
     this.form.on('submit', this.onSubmitForm);
   }
 
   submitForm() {
-    return $(this).parents('form').submit();
+    return $(this)
+      .parents('form')
+      .submit();
   }
 
   onSubmitForm(e) {
@@ -68,14 +73,6 @@ export default class Profile {
       .catch(error => flash(error.message));
   }
 
-  setNewRepoCookie() {
-    if (this.value === 'off') {
-      Cookies.remove('new_repo');
-    } else {
-      Cookies.set('new_repo', true, { expires_in: 365 });
-    }
-  }
-
   setRepoRadio() {
     const multiEditRadios = $('input[name="user[multi_file]"]');
     if (this.newRepoActivated || this.newRepoActivated === 'true') {

app/assets/stylesheets/framework/dropdowns.scss

@@ -501,12 +501,10 @@
           -moz-osx-font-smoothing: grayscale;
         }
 
-        &.dropdown-menu-user-link {
-          &::before {
+        &.dropdown-menu-user-link::before {
           top: 50%;
         }
       }
-      }
 
       &.is-indeterminate::before {
         content: "\f068";

app/assets/stylesheets/framework/images.scss

@@ -20,7 +20,7 @@
     width: 100%;
   }
 
-  $image-widths: 250 306 394 430;
+  $image-widths: 80 250 306 394 430;
   @each $width in $image-widths {
     &.svg-#{$width} {
       img,
@@ -39,12 +39,35 @@
 svg {
   fill: currentColor;
 
-  &.s8 { @include svg-size(8px); }
-  &.s12 { @include svg-size(12px); }
-  &.s16 { @include svg-size(16px); }
-  &.s18 { @include svg-size(18px); }
-  &.s24 { @include svg-size(24px); }
-  &.s32 { @include svg-size(32px); }
-  &.s48 { @include svg-size(48px); }
-  &.s72 { @include svg-size(72px); }
+  &.s8 {
+    @include svg-size(8px);
+  }
+
+  &.s12 {
+    @include svg-size(12px);
+  }
+
+  &.s16 {
+    @include svg-size(16px);
+  }
+
+  &.s18 {
+    @include svg-size(18px);
+  }
+
+  &.s24 {
+    @include svg-size(24px);
+  }
+
+  &.s32 {
+    @include svg-size(32px);
+  }
+
+  &.s48 {
+    @include svg-size(48px);
+  }
+
+  &.s72 {
+    @include svg-size(72px);
+  }
 }

app/controllers/ide_controller.rb

+class IdeController < ApplicationController
+  layout 'nav_only'
+
+  def index
+  end
+end

app/helpers/blob_helper.rb

@@ -33,6 +33,17 @@ module BlobHelper
                     ref)
   end
 
+  def ide_edit_button(project = @project, ref = @ref, path = @path, options = {})
+    return unless blob = readable_blob(options, path, project, ref)
+
+    edit_button_tag(blob,
+                    'btn btn-default',
+                    _('Web IDE'),
+                    ide_edit_path(project, ref, path, options),
+                    project,
+                    ref)
+  end
+
   def modify_file_button(project = @project, ref = @ref, path = @path, label:, action:, btn_class:, modal_type:)
     return unless current_user
 

app/views/ide/index.html.haml

+- @body_class = 'ide'
+- page_title 'IDE'
+
+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag 'ide', force_same_domain: true
+
+#ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg'),
+  "no-changes-state-svg-path" => image_path('illustrations/multi-editor_no_changes_empty.svg'),
+  "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg') } }
+  .text-center
+    = icon('spinner spin 2x')
+    %h2.clgray= _('Loading the GitLab IDE...')

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

@@ -12,6 +12,7 @@
 
     .btn-group{ role: "group" }<
       = edit_blob_button
+      = ide_edit_button
       - if current_user
         = replace_blob_link
         = delete_blob_link

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

@@ -76,4 +76,8 @@
 
   = render 'projects/find_file_link'
 
+  = succeed " " do
+    = link_to ide_edit_path(@project, @id), class: 'btn btn-default' do
+      = _('Web IDE')
+
   = render 'projects/buttons/download', project: @project, ref: @ref

changelogs/unreleased/39584-nesting-depth-5-framework-dropdowns.yml

+---
+title: Apply NestingDepth (level 5) (framework/dropdowns.scss)
+merge_request: 17820
+author: Takuya Noguchi
+type: other

changelogs/unreleased/42880-loss-of-input-text-on-comments-after-preview.yml

+---
+title: Fix Firefox stealing formatting characters on issue notes
+merge_request:
+author:
+type: fixed

changelogs/unreleased/ide-project-avatar-identicon.yml

+---
+title: Make project avatar in IDE consistent with the rest of GitLab
+merge_request:
+author:
+type: changed

changelogs/unreleased/update-spec-import-path-for-vue-mount-component-helper.yml

+---
+title: Update spec import path for vue mount component helper
+merge_request: 17880
+author: George Tsiolis
+type: performance

config/initializers/lograge.rb

+# Monkey patch lograge until https://github.com/roidrage/lograge/pull/241 is released
+module Lograge
+  class RequestLogSubscriber < ActiveSupport::LogSubscriber
+    def strip_query_string(path)
+      index = path.index('?')
+      index ? path[0, index] : path
+    end
+
+    def extract_location
+      location = Thread.current[:lograge_location]
+      return {} unless location
+
+      Thread.current[:lograge_location] = nil
+      { location: strip_query_string(location) }
+    end
+  end
+end
+
 # Only use Lograge for Rails
 unless Sidekiq.server?
   filename = File.join(Rails.root, 'log', "#{Rails.env}_json.log")

config/routes.rb

@@ -61,6 +61,9 @@ Rails.application.routes.draw do
 
     # UserCallouts
     resources :user_callouts, only: [:create]
+
+    get 'ide' => 'ide#index'
+    get 'ide/*vueroute' => 'ide#index', format: false
   end
 
   # Koding route

config/webpack.config.js

@@ -9,12 +9,14 @@ const StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const NameAllModulesPlugin = require('name-all-modules-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 
 const ROOT_PATH = path.resolve(__dirname, '..');
 const IS_PRODUCTION = process.env.NODE_ENV === 'production';
-const IS_DEV_SERVER = process.argv.join(' ').indexOf('webpack-dev-server') !== -1;
+const IS_DEV_SERVER =
+  process.argv.join(' ').indexOf('webpack-dev-server') !== -1;
 const DEV_SERVER_HOST = process.env.DEV_SERVER_HOST || 'localhost';
 const DEV_SERVER_PORT = parseInt(process.env.DEV_SERVER_PORT, 10) || 3808;
 const DEV_SERVER_LIVERELOAD = process.env.DEV_SERVER_LIVERELOAD !== 'false';
@@ -27,10 +29,10 @@ let watchAutoEntries = [];
 function generateEntries() {
   // generate automatic entry points
   const autoEntries = {};
-  const pageEntries = glob.sync('pages/**/index.js', { cwd: path.join(ROOT_PATH, 'app/assets/javascripts') });
-  watchAutoEntries = [
-    path.join(ROOT_PATH, 'app/assets/javascripts/pages/'),
-  ];
+  const pageEntries = glob.sync('pages/**/index.js', {
+    cwd: path.join(ROOT_PATH, 'app/assets/javascripts'),
+  });
+  watchAutoEntries = [path.join(ROOT_PATH, 'app/assets/javascripts/pages/')];
 
   function generateAutoEntries(path, prefix = '.') {
     const chunkPath = path.replace(/\/index\.js$/, '');
@@ -38,7 +40,7 @@ function generateEntries() {
     autoEntries[chunkName] = `${prefix}/${path}`;
   }
 
-  pageEntries.forEach(( path ) => generateAutoEntries(path));
+  pageEntries.forEach(path => generateAutoEntries(path));
 
   autoEntriesCount = Object.keys(autoEntries).length;
 
@@ -47,6 +49,7 @@ function generateEntries() {
     main: './main.js',
     raven: './raven/index.js',
     webpack_runtime: './webpack.js',
+    ide: './ide/index.js',
   };
 
   return Object.assign(manualEntries, autoEntries);
@@ -60,8 +63,12 @@ const config = {
   output: {
     path: path.join(ROOT_PATH, 'public/assets/webpack'),
     publicPath: '/assets/webpack/',
-    filename: IS_PRODUCTION ? '[name].[chunkhash].bundle.js' : '[name].bundle.js',
-    chunkFilename: IS_PRODUCTION ? '[name].[chunkhash].chunk.js' : '[name].chunk.js',
+    filename: IS_PRODUCTION
+      ? '[name].[chunkhash].bundle.js'
+      : '[name].bundle.js',
+    chunkFilename: IS_PRODUCTION
+      ? '[name].[chunkhash].chunk.js'
+      : '[name].chunk.js',
   },
 
   module: {
@@ -90,8 +97,8 @@ const config = {
           {
             loader: 'worker-loader',
             options: {
-              inline: true
-            }
+              inline: true,
+            },
           },
           { loader: 'babel-loader' },
         ],
@@ -102,7 +109,7 @@ const config = {
         loader: 'file-loader',
         options: {
           name: '[name].[hash].[ext]',
-        }
+        },
       },
       {
         test: /katex.css$/,
@@ -112,8 +119,8 @@ const config = {
           {
             loader: 'css-loader',
             options: {
-              name: '[name].[hash].[ext]'
-            }
+              name: '[name].[hash].[ext]',
+            },
           },
         ],
       },
@@ -123,15 +130,18 @@ const config = {
         loader: 'file-loader',
         options: {
           name: '[name].[hash].[ext]',
-        }
+        },
       },
       {
         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' },
+          {
+            loader: 'imports-loader',
+            options: 'l=>{},this=>l,AMDLoader=>this,module=>undefined',
+          },
         ],
-      }
+      },
     ],
 
     noParse: [/monaco-editor\/\w+\/vs\//],
@@ -149,10 +159,10 @@ const config = {
           source: false,
           chunks: false,
           modules: false,
-          assets: true
+          assets: true,
         });
         return JSON.stringify(stats, null, 2);
-      }
+      },
     }),
 
     // prevent pikaday from including moment.js
@@ -169,7 +179,7 @@ const config = {
     new NameAllModulesPlugin(),
 
     // assign deterministic chunk ids
-    new webpack.NamedChunksPlugin((chunk) => {
+    new webpack.NamedChunksPlugin(chunk => {
       if (chunk.name) {
         return chunk.name;
       }
@@ -186,9 +196,12 @@ const config = {
         const pagesBase = path.join(ROOT_PATH, 'app/assets/javascripts/pages');
 
         if (m.resource.indexOf(pagesBase) === 0) {
-          moduleNames.push(path.relative(pagesBase, m.resource)
+          moduleNames.push(
+            path
+              .relative(pagesBase, m.resource)
               .replace(/\/index\.[a-z]+$/, '')
-            .replace(/\//g, '__'));
+              .replace(/\//g, '__'),
+          );
         } else {
           moduleNames.push(path.relative(m.context, m.resource));
         }
@@ -196,7 +209,8 @@ const config = {
 
       chunk.forEachModule(collectModuleNames);
 
-      const hash = crypto.createHash('sha256')
+      const hash = crypto
+        .createHash('sha256')
         .update(moduleNames.join('_'))
         .digest('hex');
 
@@ -214,10 +228,17 @@ const config = {
     // copy pre-compiled vendor libraries verbatim
     new CopyWebpackPlugin([
       {
-        from: path.join(ROOT_PATH, `node_modules/monaco-editor/${IS_PRODUCTION ? 'min' : 'dev'}/vs`),
+        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) && !/typescript/i.test(path)) {
+          if (
+            /\.js$/.test(path) &&
+            !/worker/i.test(path) &&
+            !/typescript/i.test(path)
+          ) {
             return (
               '(function(){\n' +
               'var define = this.define, require = this.require;\n' +
@@ -227,8 +248,8 @@ const config = {
             );
           }
           return content;
-        }
-      }
+        },
+      },
     ]),
   ],
 
@@ -236,14 +257,14 @@ const config = {
     extensions: ['.js'],
     alias: {
       '~': path.join(ROOT_PATH, 'app/assets/javascripts'),
-      'emojis':         path.join(ROOT_PATH, 'fixtures/emojis'),
-      'empty_states':   path.join(ROOT_PATH, 'app/views/shared/empty_states'),
-      'icons':          path.join(ROOT_PATH, 'app/views/shared/icons'),
-      'images':         path.join(ROOT_PATH, 'app/assets/images'),
-      'vendor':         path.join(ROOT_PATH, 'vendor/assets/javascripts'),
-      'vue$':           'vue/dist/vue.esm.js',
-      'spec':           path.join(ROOT_PATH, 'spec/javascripts'),
-    }
+      emojis: path.join(ROOT_PATH, 'fixtures/emojis'),
+      empty_states: path.join(ROOT_PATH, 'app/views/shared/empty_states'),
+      icons: path.join(ROOT_PATH, 'app/views/shared/icons'),
+      images: path.join(ROOT_PATH, 'app/assets/images'),
+      vendor: path.join(ROOT_PATH, 'vendor/assets/javascripts'),
+      vue$: 'vue/dist/vue.esm.js',
+      spec: path.join(ROOT_PATH, 'spec/javascripts'),
+    },
   },
 
   // sqljs requires fs
@@ -258,14 +279,14 @@ if (IS_PRODUCTION) {
     new webpack.NoEmitOnErrorsPlugin(),
     new webpack.LoaderOptionsPlugin({
       minimize: true,
-      debug: false
+      debug: false,
     }),
     new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true
+      sourceMap: true,
     }),
     new webpack.DefinePlugin({
-      'process.env': { NODE_ENV: JSON.stringify('production') }
-    })
+      'process.env': { NODE_ENV: JSON.stringify('production') },
+    }),
   );
 
   // compression can require a lot of compute time and is disabled in CI
@@ -283,7 +304,7 @@ if (IS_DEV_SERVER) {
     headers: { 'Access-Control-Allow-Origin': '*' },
     stats: 'errors-only',
     hot: DEV_SERVER_LIVERELOAD,
-    inline: DEV_SERVER_LIVERELOAD
+    inline: DEV_SERVER_LIVERELOAD,
   };
   config.plugins.push(
     // watch node_modules for changes if we encounter a missing module compile error
@@ -299,12 +320,14 @@ if (IS_DEV_SERVER) {
           ];
 
           // report our auto-generated bundle count
-          console.log(`${autoEntriesCount} entries from '/pages' automatically added to webpack output.`);
+          console.log(
+            `${autoEntriesCount} entries from '/pages' automatically added to webpack output.`,
+          );
 
           callback();
-        })
+        });
+      },
     },
-    }
   );
   if (DEV_SERVER_LIVERELOAD) {
     config.plugins.push(new webpack.HotModuleReplacementPlugin());
@@ -319,7 +342,7 @@ if (WEBPACK_REPORT) {
       openAnalyzer: false,
       reportFilename: path.join(ROOT_PATH, 'webpack-report/index.html'),
       statsFilename: path.join(ROOT_PATH, 'webpack-report/stats.json'),
-    })
+    }),
   );
 }
 

doc/development/new_fe_guide/development/performance.md

 # Performance
 
-> TODO: Add content
+## Monitoring
+
+We have a performance dashboard available in one of our [grafana instances](https://performance.gprd.gitlab.com/dashboard/db/sitespeed-page-summary?orgId=1). This dashboard automatically aggregates metric data from [sitespeed.io](https://sitespeed.io) every 6 hours. These changes are displayed after a set number of pages are aggregated.
+
+These pages can be found inside a text file in the gitlab-build-images [repository](https://gitlab.com/gitlab-org/gitlab-build-images) called [gitlab.txt](https://gitlab.com/gitlab-org/gitlab-build-images/blob/master/scripts/gitlab.txt)
+Any frontend engineer can contribute to this dashboard. They can contribute by adding or removing urls of pages from this text file. Please have a [frontend monitoring expert](https://about.gitlab.com/team) review your changes before assigning to a maintainer of the `gitlab-build-images` project. The changes will go live on the next scheduled run after the changes are merged into `master`.
+
+There are 3 recommended high impact metrics to review on each page
+
+* [First visual change](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)
+* [Speed Index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index)
+* [Visual Complete 95%](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index)
+
+For these metrics, lower numbers are better as it means that the website is more performant.

spec/javascripts/ide/components/commit_sidebar/actions_spec.js

+import Vue from 'vue';
+import store from '~/ide/stores';
+import commitActions from '~/ide/components/commit_sidebar/actions.vue';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { resetStore } from 'spec/ide/helpers';
+
+describe('IDE commit sidebar actions', () => {
+  let vm;
+
+  beforeEach(done => {
+    const Component = Vue.extend(commitActions);
+
+    vm = createComponentWithStore(Component, store);
+
+    vm.$store.state.currentBranchId = 'master';
+
+    vm.$mount();
+
+    Vue.nextTick(done);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  it('renders 3 groups', () => {
+    expect(vm.$el.querySelectorAll('input[type="radio"]').length).toBe(3);
+  });
+
+  it('renders current branch text', () => {
+    expect(vm.$el.textContent).toContain('Commit to master branch');
+  });
+});