.gitlab-ci.yml

-image: "dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.3.5-golang-1.8-git-2.14-chrome-63.0-node-8.x-yarn-1.2-postgresql-9.6"
+image: "dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.3.6-golang-1.9-git-2.14-chrome-63.0-node-8.x-yarn-1.2-postgresql-9.6"
+
+.dedicated-runner: &dedicated-runner
+  retry: 1
+  tags:
+    - gitlab-org
 .default-cache: &default-cache
   key: "ruby-235-with-yarn"
@@ -42,11 +47,6 @@ stages:
   - post-cleanup
 # Predefined scopes
-.dedicated-runner: &dedicated-runner
-  retry: 1
-  tags:
-    - gitlab-org
-
 .tests-metadata-state: &tests-metadata-state
   <<: *dedicated-runner
   variables:
@@ -76,10 +76,19 @@ stages:
   except:
     - /(^docs[\/-].*|.*-docs$)/
+.except-qa: &except-qa
+  except:
+    - /(^qa[\/-].*|.*-qa$)/
+
+.except-docs-and-qa: &except-docs-and-qa
+  except:
+    - /(^docs[\/-].*|.*-docs$)/
+    - /(^qa[\/-].*|.*-qa$)/
+
 .rspec-metadata: &rspec-metadata
   <<: *dedicated-runner
+  <<: *except-docs-and-qa
   <<: *pull-cache
-  <<: *except-docs
   stage: test
   script:
     - JOB_NAME=( $CI_JOB_NAME )
@@ -116,8 +125,8 @@ stages:
 .spinach-metadata: &spinach-metadata
   <<: *dedicated-runner
+  <<: *except-docs-and-qa
   <<: *pull-cache
-  <<: *except-docs
   stage: test
   script:
     - JOB_NAME=( $CI_JOB_NAME )
@@ -156,6 +165,7 @@ stages:
 # Trigger a package build in omnibus-gitlab repository
 #
 package-qa:
+  <<: *dedicated-runner
   image: ruby:2.4-alpine
   before_script: []
   stage: build
@@ -169,6 +179,8 @@ package-qa:
 # Review docs base
 .review-docs: &review-docs
+  <<: *dedicated-runner
+  <<: *except-qa
   image: ruby:2.4-alpine
   before_script:
     - gem install gitlab --no-doc
@@ -213,7 +225,7 @@ review-docs-cleanup:
 # Retrieve knapsack and rspec_flaky reports
 retrieve-tests-metadata:
   <<: *tests-metadata-state
-  <<: *except-docs
+  <<: *except-docs-and-qa
   stage: prepare
   cache:
     key: tests_metadata
@@ -265,6 +277,7 @@ flaky-examples-check:
   except:
     - master
     - /(^docs[\/-].*|.*-docs$)/
+    - /(^qa[\/-].*|.*-qa$)/
   artifacts:
     expire_in: 30d
     paths:
@@ -275,9 +288,9 @@ flaky-examples-check:
     - scripts/detect-new-flaky-examples $NEW_FLAKY_SPECS_REPORT
 setup-test-env:
-  <<: *use-pg
   <<: *dedicated-runner
   <<: *except-docs
+  <<: *use-pg
   stage: prepare
   cache:
     <<: *default-cache
@@ -366,18 +379,18 @@ spinach-mysql 3 4: *spinach-metadata-mysql
     SETUP_DB: "false"
 .rake-exec: &rake-exec
-  <<: *ruby-static-analysis
   <<: *dedicated-runner
-  <<: *except-docs
+  <<: *except-docs-and-qa
   <<: *pull-cache
+  <<: *ruby-static-analysis
   stage: test
   script:
     - bundle exec rake $CI_JOB_NAME
 static-analysis:
-  <<: *ruby-static-analysis
   <<: *dedicated-runner
   <<: *except-docs
+  <<: *ruby-static-analysis
   stage: test
   script:
     - scripts/static-analysis
@@ -387,6 +400,7 @@ static-analysis:
 # - Make sure cURL examples in API docs use the full switches
 docs lint:
   <<: *dedicated-runner
+  <<: *except-qa
   image: "registry.gitlab.com/gitlab-org/gitlab-build-images:nanoc-bootstrap-ruby-2.4-alpine"
   stage: test
   cache: {}
@@ -409,6 +423,7 @@ downtime_check:
     - tags
     - /^[\d-]+-stable(-ee)?$/
     - /(^docs[\/-].*|.*-docs$)/
+    - /(^qa[\/-].*|.*-qa$)/
 ee_compat_check:
   <<: *rake-exec
@@ -429,7 +444,7 @@ ee_compat_check:
 # DB migration, rollback, and seed jobs
 .db-migrate-reset: &db-migrate-reset
   <<: *dedicated-runner
-  <<: *except-docs
+  <<: *except-docs-and-qa
   <<: *pull-cache
   stage: test
   script:
@@ -443,10 +458,16 @@ db:migrate:reset-mysql:
   <<: *db-migrate-reset
   <<: *use-mysql
+db:check-schema-pg:
+  <<: *db-migrate-reset
+  <<: *use-pg
+  script:
+    - source scripts/schema_changed.sh
+
 .migration-paths: &migration-paths
   <<: *dedicated-runner
+  <<: *except-docs-and-qa
   <<: *pull-cache
-  <<: *except-docs
   stage: test
   variables:
     SETUP_DB: "false"
@@ -472,7 +493,7 @@ migration:path-mysql:
 .db-rollback: &db-rollback
   <<: *dedicated-runner
-  <<: *except-docs
+  <<: *except-docs-and-qa
   <<: *pull-cache
   stage: test
   script:
@@ -489,7 +510,7 @@ db:rollback-mysql:
 .db-seed_fu: &db-seed_fu
   <<: *dedicated-runner
-  <<: *except-docs
+  <<: *except-docs-and-qa
   <<: *pull-cache
   stage: test
   variables:
@@ -514,16 +535,10 @@ db:seed_fu-mysql:
   <<: *db-seed_fu
   <<: *use-mysql
-db:check-schema-pg:
-  <<: *db-migrate-reset
-  <<: *use-pg
-  script:
-    - source scripts/schema_changed.sh
-
 # Frontend-related jobs
 gitlab:assets:compile:
   <<: *dedicated-runner
-  <<: *except-docs
+  <<: *except-docs-and-qa
   <<: *pull-cache
   stage: test
   dependencies: []
@@ -544,10 +559,10 @@ gitlab:assets:compile:
       - webpack-report/
 karma:
-  <<: *use-pg
   <<: *dedicated-runner
-  <<: *except-docs
+  <<: *except-docs-and-qa
   <<: *pull-cache
+  <<: *use-pg
   stage: test
   variables:
     BABEL_ENV: "coverage"
@@ -586,6 +601,7 @@ codequality:
     paths: [codeclimate.json]
 qa:internal:
+  <<: *dedicated-runner
   <<: *except-docs
   stage: test
   variables:
@@ -598,7 +614,7 @@ qa:internal:
 coverage:
   <<: *dedicated-runner
-  <<: *except-docs
+  <<: *except-docs-and-qa
   <<: *pull-cache
   stage: post-test
   services: []
@@ -617,7 +633,7 @@ coverage:
 lint:javascript:report:
   <<: *dedicated-runner
-  <<: *except-docs
+  <<: *except-docs-and-qa
   <<: *pull-cache
   stage: post-test
   dependencies:
@@ -675,8 +691,9 @@ cache gems:
     - master@gitlab-org/gitlab-ee
 gitlab_git_test:
+  <<: *dedicated-runner
+  <<: *except-docs-and-qa
   <<: *pull-cache
-  <<: *except-docs
   variables:
     SETUP_DB: "false"
   script:

.ruby-version

-2.3.5
+2.3.6

Gemfile

@@ -263,7 +263,7 @@ gem 'gettext_i18n_rails', '~> 1.8.0'
 gem 'gettext_i18n_rails_js', '~> 1.2.0'
 gem 'gettext', '~> 3.2.2', require: false, group: :development
-gem 'batch-loader'
+gem 'batch-loader', '~> 1.2.1'
 # Perf bar
 gem 'peek', '~> 1.0.1'

Gemfile.lock

@@ -78,7 +78,7 @@ GEM
       thread_safe (~> 0.3, >= 0.3.1)
     babosa (1.0.2)
     base32 (0.3.2)
-    batch-loader (1.1.1)
+    batch-loader (1.2.1)
     bcrypt (3.1.11)
     bcrypt_pbkdf (1.0.0)
     benchmark-ips (2.3.0)
@@ -988,7 +988,7 @@ DEPENDENCIES
   awesome_print (~> 1.2.0)
   babosa (~> 1.0.2)
   base32 (~> 0.3.0)
-  batch-loader
+  batch-loader (~> 1.2.1)
   bcrypt_pbkdf (~> 1.0)
   benchmark-ips (~> 2.3.0)
   better_errors (~> 2.1.0)

app/assets/javascripts/api.js

 import $ from 'jquery';
+import axios from './lib/utils/axios_utils';
 const Api = {
   groupsPath: '/api/:version/groups.json',
@@ -6,6 +7,7 @@ const Api = {
   namespacesPath: '/api/:version/namespaces.json',
   groupProjectsPath: '/api/:version/groups/:id/projects.json',
   projectsPath: '/api/:version/projects.json',
+  projectPath: '/api/:version/projects/:id',
   projectLabelsPath: '/:namespace_path/:project_path/labels',
   groupLabelsPath: '/groups/:namespace_path/labels',
   licensePath: '/api/:version/templates/licenses/:key',
@@ -76,6 +78,14 @@ const Api = {
       .done(projects => callback(projects));
   },
+  // Return single project
+  project(projectPath) {
+    const url = Api.buildUrl(Api.projectPath)
+            .replace(':id', encodeURIComponent(projectPath));
+
+    return axios.get(url);
+  },
+
   newLabel(namespacePath, projectPath, data, callback) {
     let url;
@@ -115,7 +125,7 @@ const Api = {
   commitMultiple(id, data) {
     // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
     const url = Api.buildUrl(Api.commitPath)
-      .replace(':id', id);
+      .replace(':id', encodeURIComponent(id));
     return this.wrapAjaxCall({
       url,
       type: 'POST',
@@ -127,7 +137,7 @@ const Api = {
   branchSingle(id, branch) {
     const url = Api.buildUrl(Api.branchSinglePath)
-      .replace(':id', id)
+      .replace(':id', encodeURIComponent(id))
       .replace(':branch', branch);
     return this.wrapAjaxCall({

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

 /* eslint-disable comma-dangle, space-before-function-paren, no-new */
 /* global MilestoneSelect */
-/* global Sidebar */
 import Vue from 'vue';
 import Flash from '../../flash';
+import Sidebar from '../../right_sidebar';
 import eventHub from '../../sidebar/event_hub';
 import assigneeTitle from '../../sidebar/components/assignees/assignee_title';
 import assignees from '../../sidebar/components/assignees/assignees';

app/assets/javascripts/commit/image_file.js

@@ -176,6 +176,7 @@ export default class ImageFile {
             left: dragTrackWidth
           });
+          $frameAdded.css('opacity', 1);
           framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
           _this.initDraggable($dragger, framePadding, function(e, left) {

app/assets/javascripts/commons/gl_dropdown.js

@@ -300,7 +300,7 @@ GitLabDropdown = (function() {
             return function(data) {
               _this.fullData = data;
               _this.parseData(_this.fullData);
-              _this.focusTextInput(true);
+              _this.focusTextInput();
               if (_this.options.filterable && _this.filter && _this.filter.input && _this.filter.input.val() && _this.filter.input.val().trim() !== '') {
                 return _this.filter.input.trigger('input');
               }
@@ -790,24 +790,16 @@ GitLabDropdown = (function() {
     return [selectedObject, isMarking];
   };
-  GitLabDropdown.prototype.focusTextInput = function(triggerFocus = false) {
+  GitLabDropdown.prototype.focusTextInput = function() {
     if (this.options.filterable) {
-      this.dropdown.one('transitionend', () => {
-        const initialScrollTop = $(window).scrollTop();
-        if (this.dropdown.is('.open')) {
-          this.filterInput.focus();
-        }
-
-        if ($(window).scrollTop() < initialScrollTop) {
-          $(window).scrollTop(initialScrollTop);
-        }
-      });
-      if (triggerFocus) {
-        // This triggers after a ajax request
-        // in case of slow requests, the dropdown transition could already be finished
-        this.dropdown.trigger('transitionend');
+      const initialScrollTop = $(window).scrollTop();
+      if (this.dropdown.is('.open')) {
+        this.filterInput.focus();
+      }
+      if ($(window).scrollTop() < initialScrollTop) {
+        $(window).scrollTop(initialScrollTop);
       }
     }
   };

app/assets/javascripts/diff_notes/components/diff_note_avatars.js

 /* global CommentsStore */
-/* global notes */
 import Vue from 'vue';
 import collapseIcon from '../icons/collapse_icon.svg';
+import Notes from '../../notes';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 const DiffNoteAvatars = Vue.extend({
@@ -129,7 +129,7 @@ const DiffNoteAvatars = Vue.extend({
   },
   methods: {
     clickedAvatar(e) {
-      notes.onAddDiffNote(e);
+      Notes.instance.onAddDiffNote(e);
       // Toggle the active state of the toggle all button
       this.toggleDiscussionsToggleState();

app/assets/javascripts/dispatcher.js

@@ -11,7 +11,7 @@ import NotificationsForm from './notifications_form';
 import notificationsDropdown from './notifications_dropdown';
 import groupAvatar from './group_avatar';
 import GroupLabelSubscription from './group_label_subscription';
-/* global LineHighlighter */
+import LineHighlighter from './line_highlighter';
 import BuildArtifacts from './build_artifacts';
 import CILintEditor from './ci_lint_editor';
 import groupsSelect from './groups_select';
@@ -21,7 +21,7 @@ import NamespaceSelect from './namespace_select';
 import NewCommitForm from './new_commit_form';
 import Project from './project';
 import projectAvatar from './project_avatar';
-/* global MergeRequest */
+import MergeRequest from './merge_request';
 import Compare from './compare';
 import initCompareAutocomplete from './compare_autocomplete';
 import ProjectFindFile from './project_find_file';
@@ -29,7 +29,7 @@ import ProjectNew from './project_new';
 import projectImport from './project_import';
 import Labels from './labels';
 import LabelManager from './label_manager';
-/* global Sidebar */
+import Sidebar from './right_sidebar';
 import IssuableTemplateSelectors from './templates/issuable_template_selectors';
 import Flash from './flash';
 import CommitsList from './commits';
@@ -73,7 +73,6 @@ import initLegacyFilters from './init_legacy_filters';
 import initIssuableSidebar from './init_issuable_sidebar';
 import initProjectVisibilitySelector from './project_visibility';
 import GpgBadges from './gpg_badges';
-import UserFeatureHelper from './helpers/user_feature_helper';
 import initChangesDropdown from './init_changes_dropdown';
 import NewGroupChild from './groups/new_group_child';
 import AbuseReports from './abuse_reports';
@@ -111,6 +110,8 @@ import Activities from './activities';
         return false;
       }
+      const fail = () => Flash('Error loading dynamic module');
+
       path = page.split(':');
       shortcut_handler = null;
@@ -447,9 +448,6 @@ import Activities from './activities';
           break;
         case 'projects:tree:show':
           shortcut_handler = new ShortcutsNavigation();
-
-          if (UserFeatureHelper.isNewRepoEnabled()) break;
-
           new TreeView();
           new BlobViewer();
           new NewCommitForm($('.js-create-dir-form'));
@@ -468,7 +466,6 @@ import Activities from './activities';
           shortcut_handler = true;
           break;
         case 'projects:blob:show':
-          if (UserFeatureHelper.isNewRepoEnabled()) break;
           new BlobViewer();
           initBlob();
           break;
@@ -545,7 +542,7 @@ import Activities from './activities';
           new CILintEditor();
           break;
         case 'users:show':
-          new UserCallout();
+          import('./pages/users/show').then(m => m.default()).catch(fail);
           break;
         case 'admin:conversational_development_index:show':
           new UserCallout();

app/assets/javascripts/docs/docs_bundle.js

+import Mousetrap from 'mousetrap';
+
+function addMousetrapClick(el, key) {
+  el.addEventListener('click', () => Mousetrap.trigger(key));
+}
+
+function domContentLoaded() {
+  addMousetrapClick(document.querySelector('.js-trigger-shortcut'), '?');
+  addMousetrapClick(document.querySelector('.js-trigger-search-bar'), 's');
+}
+
+document.addEventListener('DOMContentLoaded', domContentLoaded);
+

app/assets/javascripts/fly_out_nav.js

@@ -161,13 +161,16 @@ export default () => {
   const items = [...sidebar.querySelectorAll('.sidebar-top-level-items > li')];
-  sidebar.querySelector('.sidebar-top-level-items').addEventListener('mouseleave', () => {
-    clearTimeout(timeoutId);
-
-    timeoutId = setTimeout(() => {
-      if (currentOpenMenu) hideMenu(currentOpenMenu);
-    }, getHideSubItemsInterval());
-  });
+  const topItems = sidebar.querySelector('.sidebar-top-level-items');
+  if (topItems) {
+    sidebar.querySelector('.sidebar-top-level-items').addEventListener('mouseleave', () => {
+      clearTimeout(timeoutId);
+
+      timeoutId = setTimeout(() => {
+        if (currentOpenMenu) hideMenu(currentOpenMenu);
+      }, getHideSubItemsInterval());
+    });
+  }
   headerHeight = document.querySelector('.nav-sidebar').offsetTop;

app/assets/javascripts/graphs/stat_graph_contributors.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, camelcase, one-var-declaration-per-line, quotes, no-param-reassign, quote-props, comma-dangle, prefer-template, max-len, no-return-assign, no-shadow */
 import _ from 'underscore';
-import d3 from 'd3';
 import { ContributorsGraph, ContributorsAuthorGraph, ContributorsMasterGraph } from './stat_graph_contributors_graph';
 import ContributorsStatGraphUtil from './stat_graph_contributors_util';
-import { n__ } from '../locale';
+import { n__, s__, createDateTimeFormat, sprintf } from '../locale';
 export default (function() {
-  function ContributorsStatGraph() {}
+  function ContributorsStatGraph() {
+    this.dateFormat = createDateTimeFormat({ year: 'numeric', month: 'long', day: 'numeric' });
+  }
   ContributorsStatGraph.prototype.init = function(log) {
     var author_commits, total_commits;
@@ -83,9 +84,12 @@ export default (function() {
     return _.each(author_commits, (function(_this) {
       return function(d) {
         _this.redraw_author_commit_info(d);
-        $(_this.authors[d.author_name].list_item).appendTo("ol");
-        _this.authors[d.author_name].set_data(d.dates);
-        return _this.authors[d.author_name].redraw();
+        if (_this.authors[d.author_name] != null) {
+          $(_this.authors[d.author_name].list_item).appendTo("ol");
+          _this.authors[d.author_name].set_data(d.dates);
+          return _this.authors[d.author_name].redraw();
+        }
+        return '';
       };
     })(this));
   };
@@ -95,18 +99,26 @@ export default (function() {
   };
   ContributorsStatGraph.prototype.change_date_header = function() {
-    var print, print_date_format, x_domain;
-    x_domain = ContributorsGraph.prototype.x_domain;
-    print_date_format = d3.time.format("%B %e %Y");
-    print = print_date_format(x_domain[0]) + " - " + print_date_format(x_domain[1]);
-    return $("#date_header").text(print);
+    const x_domain = ContributorsGraph.prototype.x_domain;
+    const formattedDateRange = sprintf(
+      s__('ContributorsPage|%{startDate} – %{endDate}'),
+      {
+        startDate: this.dateFormat.format(new Date(x_domain[0])),
+        endDate: this.dateFormat.format(new Date(x_domain[1])),
+      },
+    );
+    return $('#date_header').text(formattedDateRange);
   };
   ContributorsStatGraph.prototype.redraw_author_commit_info = function(author) {
-    var author_commit_info, author_list_item;
-    author_list_item = $(this.authors[author.author_name].list_item);
-    author_commit_info = this.format_author_commit_info(author);
-    return author_list_item.find("span").html(author_commit_info);
+    var author_commit_info, author_list_item, $author;
+    $author = this.authors[author.author_name];
+    if ($author != null) {
+      author_list_item = $(this.authors[author.author_name].list_item);
+      author_commit_info = this.format_author_commit_info(author);
+      return author_list_item.find("span").html(author_commit_info);
+    }
+    return '';
   };
   return ContributorsStatGraph;

app/assets/javascripts/graphs/stat_graph_contributors_graph.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, max-len, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, comma-dangle, no-return-assign, prefer-arrow-callback, quotes, prefer-template, newline-per-chained-call, no-else-return, no-shadow */
 import _ from 'underscore';
-import d3 from 'd3';
+import { extent, max } from 'd3-array';
+import { select, event as d3Event } from 'd3-selection';
+import { scaleTime, scaleLinear } from 'd3-scale';
+import { axisLeft, axisBottom } from 'd3-axis';
+import { area } from 'd3-shape';
+import { brushX } from 'd3-brush';
+import { timeParse } from 'd3-time-format';
+import { dateTickFormat } from '../lib/utils/tick_formats';
+
+const d3 = { extent, max, select, scaleTime, scaleLinear, axisLeft, axisBottom, area, brushX, timeParse };
 const extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 const hasProp = {}.hasOwnProperty;
@@ -70,8 +79,8 @@ export const ContributorsGraph = (function() {
   };
   ContributorsGraph.prototype.create_scale = function(width, height) {
-    this.x = d3.time.scale().range([0, width]).clamp(true);
-    return this.y = d3.scale.linear().range([height, 0]).nice();
+    this.x = d3.scaleTime().range([0, width]).clamp(true);
+    return this.y = d3.scaleLinear().range([height, 0]).nice();
   };
   ContributorsGraph.prototype.draw_x_axis = function() {
@@ -93,9 +102,12 @@ export const ContributorsMasterGraph = (function(superClass) {
   extend(ContributorsMasterGraph, superClass);
   function ContributorsMasterGraph(data1) {
+    const $parentElement = $('#contributors-master');
+    const parentPadding = parseFloat($parentElement.css('padding-left')) + parseFloat($parentElement.css('padding-right'));
+
     this.data = data1;
     this.update_content = this.update_content.bind(this);
-    this.width = $('.content').width() - 70;
+    this.width = $('.content').width() - parentPadding - (this.MARGIN.left + this.MARGIN.right);
     this.height = 200;
     this.x = null;
     this.y = null;
@@ -120,7 +132,7 @@ export const ContributorsMasterGraph = (function(superClass) {
   ContributorsMasterGraph.prototype.parse_dates = function(data) {
     var parseDate;
-    parseDate = d3.time.format("%Y-%m-%d").parse;
+    parseDate = d3.timeParse("%Y-%m-%d");
     return data.forEach(function(d) {
       return d.date = parseDate(d.date);
     });
@@ -131,8 +143,10 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
   ContributorsMasterGraph.prototype.create_axes = function() {
-    this.x_axis = d3.svg.axis().scale(this.x).orient("bottom");
-    return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
+    this.x_axis = d3.axisBottom()
+      .scale(this.x)
+      .tickFormat(dateTickFormat);
+    return this.y_axis = d3.axisLeft().scale(this.y).ticks(5);
   };
   ContributorsMasterGraph.prototype.create_svg = function() {
@@ -140,16 +154,16 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
   ContributorsMasterGraph.prototype.create_area = function(x, y) {
-    return this.area = d3.svg.area().x(function(d) {
+    return this.area = d3.area().x(function(d) {
       return x(d.date);
     }).y0(this.height).y1(function(d) {
       d.commits = d.commits || d.additions || d.deletions;
       return y(d.commits);
-    }).interpolate("basis");
+    });
   };
   ContributorsMasterGraph.prototype.create_brush = function() {
-    return this.brush = d3.svg.brush().x(this.x).on("brushend", this.update_content);
+    return this.brush = d3.brushX(this.x).extent([[this.x.range()[0], 0], [this.x.range()[1], this.height]]).on("end", this.update_content);
   };
   ContributorsMasterGraph.prototype.draw_path = function(data) {
@@ -161,7 +175,12 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
   ContributorsMasterGraph.prototype.update_content = function() {
-    ContributorsGraph.set_x_domain(this.brush.empty() ? this.x_max_domain : this.brush.extent());
+    // d3Event.selection replaces the function brush.empty() calls
+    if (d3Event.selection != null) {
+      ContributorsGraph.set_x_domain(d3Event.selection.map(this.x.invert));
+    } else {
+      ContributorsGraph.set_x_domain(this.x_max_domain);
+    }
     return $("#brush_change").trigger('change');
   };
@@ -219,14 +238,17 @@ export const ContributorsAuthorGraph = (function(superClass) {
   };
   ContributorsAuthorGraph.prototype.create_axes = function() {
-    this.x_axis = d3.svg.axis().scale(this.x).orient("bottom").ticks(8);
-    return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
+    this.x_axis = d3.axisBottom()
+      .scale(this.x)
+      .ticks(8)
+      .tickFormat(dateTickFormat);
+    return this.y_axis = d3.axisLeft().scale(this.y).ticks(5);
   };
   ContributorsAuthorGraph.prototype.create_area = function(x, y) {
-    return this.area = d3.svg.area().x(function(d) {
+    return this.area = d3.area().x(function(d) {
       var parseDate;
-      parseDate = d3.time.format("%Y-%m-%d").parse;
+      parseDate = d3.timeParse("%Y-%m-%d");
       return x(parseDate(d));
     }).y0(this.height).y1((function(_this) {
       return function(d) {
@@ -236,11 +258,12 @@ export const ContributorsAuthorGraph = (function(superClass) {
           return y(0);
         }
       };
-    })(this)).interpolate("basis");
+    })(this));
   };
   ContributorsAuthorGraph.prototype.create_svg = function() {
-    this.list_item = d3.selectAll(".person")[0].pop();
+    var persons = document.querySelectorAll('.person');
+    this.list_item = persons[persons.length - 1];
     return this.svg = d3.select(this.list_item).append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "spark").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
   };

app/assets/javascripts/helpers/user_feature_helper.js

-import Cookies from 'js-cookie';
-
-export default {
-  isNewRepoEnabled() {
-    return Cookies.get('new_repo') === 'true';
-  },
-};

app/assets/javascripts/repo/components/commit_sidebar/list.vue → 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';
@@ -18,72 +19,48 @@
         type: Array,
         required: true,
       },
-      collapsed: {
-        type: Boolean,
-        required: true,
-      },
+    },
+    computed: {
+      ...mapState([
+        'currentProjectId',
+        'currentBranchId',
+        'rightPanelCollapsed',
+      ]),
     },
     methods: {
       toggleCollapsed() {
         this.$emit('toggleCollapsed');
       },
     },
+
   };
 </script>
 <template>
-  <div class="multi-file-commit-panel-section">
-    <header
-      class="multi-file-commit-panel-header"
-      :class="{
-        'is-collapsed': collapsed,
-      }"
-    >
-      <icon
-        name="list-bulleted"
-        :size="18"
-        css-classes="append-right-default"
-      />
-      <template v-if="!collapsed">
-        {{ title }}
-        <button
-          type="button"
-          class="btn btn-transparent multi-file-commit-panel-collapse-btn"
-          @click="toggleCollapsed"
-        >
-          <i
-            aria-hidden="true"
-            class="fa fa-angle-double-right"
-          >
-          </i>
-        </button>
-      </template>
-    </header>
-    <div class="multi-file-commit-list">
-      <list-collapsed
-        v-if="collapsed"
-      />
-      <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>
-        <div
-          v-else
-          class="help-block prepend-top-0"
+  <div class="multi-file-commit-list">
+    <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"
         >
-          No changes
-        </div>
-      </template>
-    </div>
+          <list-item
+            :file="file"
+          />
+        </li>
+      </ul>
+      <div
+        v-else
+        class="help-block prepend-top-0"
+      >
+        No changes
+      </div>
+    </template>
   </div>
 </template>

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

 <script>
 import { mapState, mapGetters } from 'vuex';
-import RepoSidebar from './repo_sidebar.vue';
-import RepoCommitSection from './repo_commit_section.vue';
-import RepoTabs from './repo_tabs.vue';
-import RepoFileButtons from './repo_file_buttons.vue';
-import RepoPreview from './repo_preview.vue';
+import 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 repoPreview from './repo_preview.vue';
 import repoEditor from './repo_editor.vue';
 export default {
   computed: {
     ...mapState([
       'currentBlobView',
+      'selectedFile',
     ]),
     ...mapGetters([
-      'isCollapsed',
       'changedFiles',
+      'activeFile',
     ]),
   },
   components: {
-    RepoSidebar,
-    RepoTabs,
-    RepoFileButtons,
+    ideSidebar,
+    ideContextbar,
+    repoTabs,
+    repoFileButtons,
+    ideStatusBar,
     repoEditor,
-    RepoCommitSection,
-    RepoPreview,
+    repoPreview,
   },
   mounted() {
     const returnValue = 'Are you sure you want to lose unsaved changes?';
@@ -40,24 +43,31 @@ export default {
 </script>
 <template>
-  <div
-    class="multi-file"
-    :class="{
-      'is-collapsed': isCollapsed
-    }"
+  <div 
+    class="ide-view"
   >
-    <repo-sidebar/>
+    <ide-sidebar/>
     <div
-      v-if="isCollapsed"
       class="multi-file-edit-pane"
     >
-      <repo-tabs />
-      <component
-        class="multi-file-edit-pane-content"
-        :is="currentBlobView"
-      />
-      <repo-file-buttons />
+      <template
+        v-if="activeFile">
+        <repo-tabs/>
+        <component
+          class="multi-file-edit-pane-content"
+          :is="currentBlobView"
+        />
+        <repo-file-buttons/>
+        <ide-status-bar
+          :file="selectedFile"/>
+      </template>
+      <template
+        v-else>
+        <div class="ide-empty-state">
+          <h2 class="clgray">Welcome to the GitLab IDE</h2>
+        </div>
+      </template>
     </div>
-    <repo-commit-section />
+    <ide-contextbar/>
   </div>
 </template>

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

+<script>
+import { mapGetters, mapState, mapActions } from 'vuex';
+import repoCommitSection from './repo_commit_section.vue';
+import icon from '../../vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    repoCommitSection,
+    icon,
+  },
+  computed: {
+    ...mapState([
+      'rightPanelCollapsed',
+    ]),
+    ...mapGetters([
+      'changedFiles',
+    ]),
+    currentIcon() {
+      return this.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
+    },
+  },
+  methods: {
+    ...mapActions([
+      'setPanelCollapsedStatus',
+    ]),
+    toggleCollapsed() {
+      this.setPanelCollapsedStatus({
+        side: 'right',
+        collapsed: !this.rightPanelCollapsed,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="multi-file-commit-panel"
+    :class="{
+      'is-collapsed': rightPanelCollapsed,
+    }"
+  >
+    <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">
+          <icon
+            name="list-bulleted"
+            :size="18"
+          />
+          Staged
+        </div>
+        <button
+          type="button"
+          class="btn btn-transparent multi-file-commit-panel-collapse-btn"
+          @click="toggleCollapsed"
+        >
+          <icon
+            :name="currentIcon"
+            :size="18"
+          />
+        </button>
+      </header>
+      <repo-commit-section 
+        class=""/>
+    </div>
+  </div>
+</template>