Merge branch 'master' into 42568-pipeline-empty-state

.babelrc

 {
-  "presets": [
-    ["latest", { "es2015": { "modules": false } }],
-    "stage-2"
-  ],
+  "presets": [["latest", { "es2015": { "modules": false } }], "stage-2"],
   "env": {
     "coverage": {
       "plugins": [
-        ["istanbul", {
-          "exclude": [
-            "spec/javascripts/**/*",
-            "app/assets/javascripts/locale/**/app.js"
-          ]
-        }],
-        ["transform-define", {
+        [
+          "istanbul",
+          {
+            "exclude": ["spec/javascripts/**/*", "app/assets/javascripts/locale/**/app.js"]
+          }
+        ],
+        [
+          "transform-define",
+          {
             "process.env.BABEL_ENV": "coverage"
-        }]
+          }
+        ]
       ]
     }
   }

.eslintignore

+/app/assets/javascripts/locale/**/app.js
+/config/
 /builds/
 /coverage/
 /coverage-javascript/
 /node_modules/
 /public/
+/scripts/
 /tmp/
 /vendor/
 karma.config.js
 webpack.config.js
-svg.config.js
-/app/assets/javascripts/locale/**/app.js

.flayignore

@@ -8,3 +8,4 @@ lib/gitlab/redis/*.rb
 lib/gitlab/gitaly_client/operation_service.rb
 lib/gitlab/background_migration/*
 app/models/project_services/kubernetes_service.rb
+lib/gitlab/workhorse.rb

.gitignore

@@ -50,6 +50,7 @@ eslint-report.html
 /db/data.yml
 /doc/code/*
 /dump.rdb
+/jsconfig.json
 /log/*.log*
 /node_modules/
 /nohup.out

.gitlab-ci.yml

@@ -544,7 +544,7 @@ migration:path-mysql:
 .db-rollback: &db-rollback
   <<: *dedicated-no-docs-pull-cache-job
   script:
-    - bundle exec rake db:rollback STEP=119
+    - bundle exec rake db:migrate VERSION=20170523121229
     - bundle exec rake db:migrate
 
 db:rollback-pg:

.gitlab/merge_request_templates/Documentation.md

-See the general Documentation guidelines http://docs.gitlab.com/ce/development/doc_styleguide.html
+<!--See the general Documentation guidelines https://docs.gitlab.com/ce/development/writing_documentation.html -->
 
 ## What does this MR do?
 
-(briefly describe what this MR is about)
+<!-- Briefly describe what this MR is about -->
+
+## Related issues
+
+<!-- Mention the issue(s) this MR closes or is related to -->
+
+Closes 
 
 ## Moving docs to a new location?
 
-See the guidelines: http://docs.gitlab.com/ce/development/doc_styleguide.html#changing-document-location
+Read the guidelines:
+https://docs.gitlab.com/ce/development/writing_documentation.html#changing-document-location
 
-- [ ] Make sure the old link is not removed and has its contents replaced with a link to the new location.
+- [ ] Make sure the old link is not removed and has its contents replaced with
+      a link to the new location.
 - [ ] Make sure internal links pointing to the document in question are not broken.
-- [ ] Search and replace any links referring to old docs in GitLab Rails app, specifically under the `app/views/` directory.
-- [ ] Make sure to add [`redirect_from`](https://docs.gitlab.com/ee/development/doc_styleguide.html#redirections-for-pages-with-disqus-comments) to the new document if there are any Disqus comments on the old document thread.
-- [ ] If working on CE, submit an MR to EE with the changes as well.
+- [ ] Search and replace any links referring to old docs in GitLab Rails app,
+      specifically under the `app/views/` and `ee/app/views` (for GitLab EE)  directories.
+- [ ] Make sure to add [`redirect_from`](https://docs.gitlab.com/ce/development/writing_documentation.html#redirections-for-pages-with-disqus-comments)
+      to the new document if there are any Disqus comments on the old document thread.
+- [ ] If working on CE and the `ee-compat-check` jobs fails, submit an MR to EE
+      with the changes as well (https://docs.gitlab.com/ce/development/writing_documentation.html#cherry-picking-from-ce-to-ee).
 - [ ] Ping one of the technical writers for review.
+
+/label ~Documentation

.prettierignore

+/app/assets/javascripts/locale/**/app.js
+/node_modules/
+/public/
+/vendor/
+/tmp/

.prettierrc

 {
+  "printWidth": 100,
   "singleQuote": true,
+  "trailingComma": "es5",
+  "overrides": [
+    {
+      "files": ["**/app/**/*", "**/spec/**/*"],
+      "options": {
         "trailingComma": "all"
+      }
+    }
+  ]
 }

.rubocop.yml

@@ -118,6 +118,9 @@ Gitlab/ModuleWithInstanceVariables:
     - spec/support/**/*.rb
     - features/steps/**/*.rb
 
+Gitlab/HTTParty:
+  Enabled: true
+
 GitlabSecurity/PublicSend:
   Enabled: true
   Exclude:

GITALY_SERVER_VERSION

-0.91.0
+0.92.0

GITLAB_SHELL_VERSION

-6.0.4
+7.1.1

Gemfile

+# --- Special code for migrating to Rails 5.0 ---
+def rails5?
+  %w[1 true].include?(ENV["RAILS5"])
+end
+
+gem_versions = {}
+gem_versions['activerecord_sane_schema_dumper'] = rails5? ? '1.0'      : '0.2'
+gem_versions['default_value_for']               = rails5? ? '~> 3.0.5' : '~> 3.0.0'
+gem_versions['html-pipeline']                   = rails5? ? '~> 2.6.0' : '~> 1.11.0'
+gem_versions['rails']                           = rails5? ? '5.0.6'    : '4.2.10'
+gem_versions['rails-i18n']                      = rails5? ? '~> 5.1'   : '~> 4.0.9'
+# --- The end of special code for migrating to Rails 5.0 ---
+
 source 'https://rubygems.org'
 
-gem 'rails', '4.2.10'
+gem 'rails', gem_versions['rails']
 gem 'rails-deprecated_sanitizer', '~> 1.0.3'
 
 # Responders respond_to and respond_with
@@ -9,7 +22,7 @@ gem 'responders', '~> 2.0'
 gem 'sprockets', '~> 3.7.0'
 
 # Default values for AR models
-gem 'default_value_for', '~> 3.0.0'
+gem 'default_value_for', gem_versions['default_value_for']
 
 # Supported DBs
 gem 'mysql2', '~> 0.4.10', group: :mysql
@@ -22,10 +35,10 @@ gem 'faraday', '~> 0.12'
 
 # Authentication libraries
 gem 'devise', '~> 4.2'
-gem 'doorkeeper', '~> 4.2.0'
-gem 'doorkeeper-openid_connect', '~> 1.2.0'
-gem 'omniauth', '~> 1.4.2'
-gem 'omniauth-auth0', '~> 1.4.1'
+gem 'doorkeeper', '~> 4.3'
+gem 'doorkeeper-openid_connect', '~> 1.3'
+gem 'omniauth', '~> 1.8'
+gem 'omniauth-auth0', '~> 2.0.0'
 gem 'omniauth-azure-oauth2', '~> 0.0.9'
 gem 'omniauth-cas3', '~> 1.1.4'
 gem 'omniauth-facebook', '~> 4.0.0'
@@ -34,11 +47,12 @@ gem 'omniauth-gitlab', '~> 1.0.2'
 gem 'omniauth-google-oauth2', '~> 0.5.2'
 gem 'omniauth-kerberos', '~> 0.3.0', group: :kerberos
 gem 'omniauth-oauth2-generic', '~> 0.2.2'
-gem 'omniauth-saml', '~> 1.10.0'
+gem 'omniauth-saml', '~> 1.10'
 gem 'omniauth-shibboleth', '~> 1.2.0'
-gem 'omniauth-twitter', '~> 1.2.0'
+gem 'omniauth-twitter', '~> 1.4'
 gem 'omniauth_crowd', '~> 2.2.0'
 gem 'omniauth-authentiq', '~> 0.3.1'
+gem 'omniauth-jwt', '~> 0.0.2'
 gem 'rack-oauth2', '~> 1.2.1'
 gem 'jwt', '~> 1.5.6'
 
@@ -104,16 +118,16 @@ gem 'carrierwave', '~> 1.2'
 gem 'dropzonejs-rails', '~> 0.7.1'
 
 # for backups
-gem 'fog-aws', '~> 2.0'
+gem 'fog-aws', '~> 2.0.1'
 gem 'fog-core', '~> 1.44'
-gem 'fog-google', '~> 0.5'
+gem 'fog-google', '~> 1.3.3'
 gem 'fog-local', '~> 0.3'
 gem 'fog-openstack', '~> 0.1'
 gem 'fog-rackspace', '~> 0.1.1'
 gem 'fog-aliyun', '~> 0.2.0'
 
 # for Google storage
-gem 'google-api-client', '~> 0.13.6'
+gem 'google-api-client', '~> 0.19.8'
 
 # for aws storage
 gem 'unf', '~> 0.1.4'
@@ -122,7 +136,7 @@ gem 'unf', '~> 0.1.4'
 gem 'seed-fu', '~> 2.3.7'
 
 # Markdown and HTML processing
-gem 'html-pipeline', '~> 1.11.0'
+gem 'html-pipeline', gem_versions['html-pipeline']
 gem 'deckar01-task_list', '2.0.0'
 gem 'gitlab-markup', '~> 1.6.2'
 gem 'redcarpet', '~> 3.4'
@@ -132,8 +146,8 @@ gem 'rdoc', '~> 4.2'
 gem 'org-ruby', '~> 0.9.12'
 gem 'creole', '~> 0.5.0'
 gem 'wikicloth', '0.8.1'
-gem 'asciidoctor', '~> 1.5.2'
-gem 'asciidoctor-plantuml', '0.0.7'
+gem 'asciidoctor', '~> 1.5.6'
+gem 'asciidoctor-plantuml', '0.0.8'
 gem 'rouge', '~> 2.0'
 gem 'truncato', '~> 0.7.9'
 gem 'bootstrap_form', '~> 2.7.0'
@@ -149,7 +163,7 @@ group :unicorn do
 end
 
 # State machine
-gem 'state_machines-activerecord', '~> 0.4.0'
+gem 'state_machines-activerecord', '~> 0.5.1'
 
 # Issue tags
 gem 'acts-as-taggable-on', '~> 5.0'
@@ -218,10 +232,10 @@ gem 'sanitize', '~> 2.0'
 gem 'babosa', '~> 1.0.2'
 
 # Sanitizes SVG input
-gem 'loofah', '~> 2.0.3'
+gem 'loofah', '~> 2.2'
 
 # Working with license
-gem 'licensee', '~> 8.7.0'
+gem 'licensee', '~> 8.9'
 
 # Protect against bruteforcing
 gem 'rack-attack', '~> 4.4.1'
@@ -235,9 +249,6 @@ gem 'mousetrap-rails', '~> 1.4.6'
 # Detect and convert string character encoding
 gem 'charlock_holmes', '~> 0.7.5'
 
-# Faster JSON
-gem 'oj', '~> 2.17.4'
-
 # Faster blank
 gem 'fast_blank'
 
@@ -269,9 +280,9 @@ gem 'premailer-rails', '~> 1.9.7'
 
 # I18n
 gem 'ruby_parser', '~> 3.8', require: false
-gem 'rails-i18n', '~> 4.0.9'
+gem 'rails-i18n', gem_versions['rails-i18n']
 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'
@@ -279,7 +290,6 @@ gem 'batch-loader', '~> 1.2.1'
 # Perf bar
 gem 'peek', '~> 1.0.1'
 gem 'peek-gc', '~> 0.0.2'
-gem 'peek-host', '~> 1.0.0'
 gem 'peek-mysql2', '~> 1.1.0', group: :mysql
 gem 'peek-performance_bar', '~> 1.3.0'
 gem 'peek-pg', '~> 1.3.0', group: :postgres
@@ -361,7 +371,7 @@ group :development, :test do
   gem 'license_finder', '~> 3.1', require: false
   gem 'knapsack', '~> 1.16'
 
-  gem 'activerecord_sane_schema_dumper', '0.2'
+  gem 'activerecord_sane_schema_dumper', gem_versions['activerecord_sane_schema_dumper']
 
   gem 'stackprof', '~> 0.2.10', require: false
 
@@ -411,7 +421,7 @@ group :ed25519 do
 end
 
 # Gitaly GRPC client
-gem 'gitaly-proto', '~> 0.88.0', require: 'gitaly'
+gem 'gitaly-proto', '~> 0.91.0', require: 'gitaly'
 gem 'grpc', '~> 1.10.0'
 
 # Locked until https://github.com/google/protobuf/issues/4210 is closed

Gemfile.rails5

+# BUNDLE_GEMFILE=Gemfile.rails5 bundle install
+
+ENV["RAILS5"] = "true"
+
+gemfile = File.expand_path("../Gemfile", __FILE__)
+
+eval(File.read(gemfile), nil, gemfile)

Procfile

@@ -4,4 +4,3 @@
 #
 web: RAILS_ENV=development bin/web start_foreground
 worker: RAILS_ENV=development bin/background_jobs start_foreground
-# mail_room: bundle exec mail_room -q -c config/mail_room.yml

VERSION

-10.6.0-pre
+10.7.0-pre

app/assets/javascripts/behaviors/index.js

 import './autosize';
 import './bind_in_out';
-import initCopyAsGFM from './copy_as_gfm';
+import './markdown/render_gfm';
+import initCopyAsGFM from './markdown/copy_as_gfm';
 import initCopyToClipboard from './copy_to_clipboard';
 import './details_behavior';
 import installGlEmojiElement from './gl_emoji';

app/assets/javascripts/behaviors/copy_as_gfm.js → app/assets/javascripts/behaviors/markdown/copy_as_gfm.js

@@ -2,8 +2,8 @@
 
 import $ from 'jquery';
 import _ from 'underscore';
-import { insertText, getSelectedFragment, nodeMatchesSelector } from '../lib/utils/common_utils';
-import { placeholderImage } from '../lazy_loader';
+import { insertText, getSelectedFragment, nodeMatchesSelector } from '~/lib/utils/common_utils';
+import { placeholderImage } from '~/lazy_loader';
 
 const gfmRules = {
   // The filters referenced in lib/banzai/pipeline/gfm_pipeline.rb convert

app/assets/javascripts/render_gfm.js → app/assets/javascripts/behaviors/markdown/render_gfm.js

 import $ from 'jquery';
+import syntaxHighlight from '~/syntax_highlight';
 import renderMath from './render_math';
 import renderMermaid from './render_mermaid';
-import syntaxHighlight from './syntax_highlight';
 
 // Render Gitlab flavoured Markdown
 //

app/assets/javascripts/render_math.js → app/assets/javascripts/behaviors/markdown/render_math.js

 import $ from 'jquery';
-import { __ } from './locale';
-import flash from './flash';
+import { __ } from '~/locale';
+import flash from '~/flash';
 
 // Renders math using KaTeX in any element with the
 // `js-render-math` class

app/assets/javascripts/render_mermaid.js → app/assets/javascripts/behaviors/markdown/render_mermaid.js

+import flash from '~/flash';
+
 // Renders diagrams and flowcharts from text using Mermaid in any element with the
 // `js-render-mermaid` class.
 //
@@ -12,8 +14,6 @@
 // </pre>
 //
 
-import Flash from './flash';
-
 export default function renderMermaid($els) {
   if (!$els.length) return;
 
@@ -52,6 +52,6 @@ export default function renderMermaid($els) {
       });
     });
   }).catch((err) => {
-    Flash(`Can't load mermaid module: ${err}`);
+    flash(`Can't load mermaid module: ${err}`);
   });
 }

app/assets/javascripts/boards/components/issue_card_inner.js

 import $ from 'jquery';
 import Vue from 'vue';
-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../eventhub';
 
 const Store = gl.issueBoards.BoardsStore;
@@ -45,7 +45,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({
     };
   },
   components: {
-    userAvatarLink,
+    UserAvatarLink,
   },
   computed: {
     numberOverLimit() {

app/assets/javascripts/ci_variable_list/ci_variable_list.js

@@ -33,7 +33,7 @@ export default class VariableList {
         selector: '.js-ci-variable-input-key',
         default: '',
       },
-      value: {
+      secret_value: {
         selector: '.js-ci-variable-input-value',
         default: '',
       },
@@ -105,7 +105,7 @@ export default class VariableList {
     setupToggleButtons($row[0]);
 
     // Reset the resizable textarea
-    $row.find(this.inputMap.value.selector).css('height', '');
+    $row.find(this.inputMap.secret_value.selector).css('height', '');
 
     const $environmentSelect = $row.find('.js-variable-environment-toggle');
     if ($environmentSelect.length) {

app/assets/javascripts/commons/polyfills.js

 // ECMAScript polyfills
+import 'core-js/fn/array/fill';
 import 'core-js/fn/array/find';
 import 'core-js/fn/array/find-index';
 import 'core-js/fn/array/from';

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/dispatcher.js

@@ -53,8 +53,12 @@ function initPageShortcuts(page) {
 
 function initGFMInput() {
   $('.js-gfm-input:not(.js-vue-textarea)').each((i, el) => {
-    const gfm = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
-    const enableGFM = convertPermissionToBoolean(el.dataset.supportsAutocomplete);
+    const gfm = new GfmAutoComplete(
+      gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources,
+    );
+    const enableGFM = convertPermissionToBoolean(
+      el.dataset.supportsAutocomplete,
+    );
     gfm.setup($(el), {
       emojis: true,
       members: enableGFM,
@@ -67,9 +71,9 @@ function initGFMInput() {
 }
 
 function initPerformanceBar() {
-  if (document.querySelector('#peek')) {
+  if (document.querySelector('#js-peek')) {
     import('./performance_bar')
-      .then(m => new m.default({ container: '#peek' })) // eslint-disable-line new-cap
+      .then(m => new m.default({ container: '#js-peek' })) // eslint-disable-line new-cap
       .catch(() => Flash('Error loading performance bar module'));
   }
 }

app/assets/javascripts/gl_dropdown.js

@@ -753,7 +753,7 @@ GitLabDropdown = (function() {
     }
 
     if (this.options.isSelectable && !this.options.isSelectable(selectedObject, el)) {
-      return;
+      return [selectedObject];
     }
 
     if (el.hasClass(ACTIVE_CLASS) && value !== 0) {

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/groups/components/app.vue

@@ -4,7 +4,7 @@
 import $ from 'jquery';
 import { s__ } from '~/locale';
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-import modal from '~/vue_shared/components/modal.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 
@@ -15,7 +15,7 @@ import groupsComponent from './groups.vue';
 export default {
   components: {
     loadingIcon,
-    modal,
+    DeprecatedModal,
     groupsComponent,
   },
   props: {
@@ -52,8 +52,9 @@ export default {
     },
   },
   created() {
-    this.searchEmptyMessage = this.hideProjects ?
-      COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
+    this.searchEmptyMessage = this.hideProjects
+      ? COMMON_STR.GROUP_SEARCH_EMPTY
+      : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
 
     eventHub.$on('fetchPage', this.fetchPage);
     eventHub.$on('toggleChildren', this.toggleChildren);
@@ -72,9 +73,17 @@ export default {
     eventHub.$off('updateGroups', this.updateGroups);
   },
   methods: {
-    fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) {
-      return this.service.getGroups(parentId, page, filterGroupsBy, sortBy, archived)
-                .then((res) => {
+    fetchGroups({
+      parentId,
+      page,
+      filterGroupsBy,
+      sortBy,
+      archived,
+      updatePagination,
+    }) {
+      return this.service
+        .getGroups(parentId, page, filterGroupsBy, sortBy, archived)
+        .then(res => {
           if (updatePagination) {
             this.updatePagination(res.headers);
           }
@@ -103,7 +112,7 @@ export default {
         sortBy,
         archived,
         updatePagination: true,
-      }).then((res) => {
+      }).then(res => {
         this.isLoading = false;
         this.updateGroups(res, Boolean(filterGroupsBy));
       });
@@ -118,14 +127,18 @@ export default {
         sortBy,
         archived,
         updatePagination: true,
-      }).then((res) => {
+      }).then(res => {
         this.isLoading = false;
         $.scrollTo(0);
 
         const currentPath = mergeUrlParams({ page }, window.location.href);
-        window.history.replaceState({
+        window.history.replaceState(
+          {
             page: currentPath,
-        }, document.title, currentPath);
+          },
+          document.title,
+          currentPath,
+        );
 
         this.updateGroups(res);
       });
@@ -138,9 +151,11 @@ export default {
           // eslint-disable-next-line promise/catch-or-return
           this.fetchGroups({
             parentId: parentGroup.id,
-          }).then((res) => {
+          })
+            .then(res => {
               this.store.setGroupChildren(parentGroup, res);
-          }).catch(() => {
+            })
+            .catch(() => {
               parentGroup.isChildrenLoading = false;
             });
         } else {
@@ -154,7 +169,11 @@ export default {
       this.targetGroup = group;
       this.targetParentGroup = parentGroup;
       this.showModal = true;
-      this.groupLeaveConfirmationMessage = s__(`GroupsTree|Are you sure you want to leave the "${group.fullName}" group?`);
+      this.groupLeaveConfirmationMessage = s__(
+        `GroupsTree|Are you sure you want to leave the "${
+          group.fullName
+        }" group?`,
+      );
     },
     hideLeaveGroupModal() {
       this.showModal = false;
@@ -162,14 +181,15 @@ export default {
     leaveGroup() {
       this.showModal = false;
       this.targetGroup.isBeingRemoved = true;
-      this.service.leaveGroup(this.targetGroup.leavePath)
+      this.service
+        .leaveGroup(this.targetGroup.leavePath)
         .then(res => res.json())
-        .then((res) => {
+        .then(res => {
           $.scrollTo(0);
           this.store.removeGroup(this.targetGroup, this.targetParentGroup);
           Flash(res.notice, 'notice');
         })
-        .catch((err) => {
+        .catch(err => {
           let message = COMMON_STR.FAILURE;
           if (err.status === 403) {
             message = COMMON_STR.LEAVE_FORBIDDEN;
@@ -208,8 +228,8 @@ export default {
       :search-empty-message="searchEmptyMessage"
       :page-info="pageInfo"
     />
-    <modal
-      v-if="showModal"
+    <deprecated-modal
+      v-show="showModal"
       kind="warning"
       :primary-button-label="__('Leave')"
       :title="__('Are you sure?')"

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 DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+
+export default {
+  components: {
+    DeprecatedModal,
+  },
+  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>
+  <deprecated-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>
+  </deprecated-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 DeprecatedModal from '~/vue_shared/components/deprecated_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: {
+    DeprecatedModal,
+    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
+    }"
+  >
+    <deprecated-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>
+    </deprecated-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,
+        'is-open': this.file.opened,
+      };
+    },
+  },
+  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 path =
+                  to.params[0].slice(-1) === '/'
+                    ? to.params[0].slice(0, -1)
+                    : to.params[0];
+                const treeEntry = store.state.entries[path];
+                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),
+  });
+});