Merge branch 'master' into list-multiple-clusters

* master: (154 commits)
  Don't disable the Rails mailer when seeding the test environment
  Documentation bug fixes: Added procedure to disable built-in Issues.
  Ensure `Namespace`'s is namespaced in `Gitlab::Kubernetes::Helm#initialize` and fix a transient failing spec due to that
  Add changelog entry
  Show only group name by default and put full namespace in tooltip
  Adds validation for Project#ci_config_path not to contain leading slash
  Gracefully handle case when repository's root ref does not exist
  Set EE variable
  issue note store
  allow caching options to be specified for counting services
  Update CHANGELOG.md for 10.2.3
  Add link to gitaly converation
  Fix pipeline config source specs and test it explicitly
  Set an artificial $HOME for gitaly in test
  Add a fixture file that uses seed-fu in the test env so that a borken seed-fu is detected
  Pin seed-fu to 2.3.6 since 2.3.7 is broken
  Do not set pipeline source after initialization
  updated diff spec
  fix for special charecter in file names
  We could simply count the commits
  ...

.gitlab-ci.yml

@@ -579,7 +579,7 @@ codequality:
   script:
     - cp .rubocop.yml .rubocop.yml.bak
     - grep -v "rubocop-gitlab-security" .rubocop.yml.bak > .rubocop.yml
-    - docker run --env CODECLIMATE_CODE="$PWD" --volume "$PWD":/code --volume /var/run/docker.sock:/var/run/docker.sock --volume /tmp/cc:/tmp/cc codeclimate/codeclimate:0.69.0 analyze -f json > raw_codeclimate.json
+    - docker run --env CODECLIMATE_CODE="$PWD" --volume "$PWD":/code --volume /var/run/docker.sock:/var/run/docker.sock --volume /tmp/cc:/tmp/cc codeclimate/codeclimate analyze -f json > raw_codeclimate.json
     - cat raw_codeclimate.json | docker run -i stedolan/jq -c 'map({check_name,fingerprint,location})' > codeclimate.json
     - mv .rubocop.yml.bak .rubocop.yml
   artifacts:

CHANGELOG.md

@@ -2,6 +2,25 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
 
+## 10.2.3 (2017-11-30)
+
+### Fixed (7 changes)
+
+- Fix hashed storage for Import/Export uploads. !15482
+- Ensure that rake gitlab:cleanup:repos task does not mess with hashed repositories. !15520
+- Ensure that rake gitlab:cleanup:dirs task does not mess with hashed repositories. !15600
+- Fix WIP system note not being created.
+- Fix link text from group context.
+- Fix defaults for MR states and merge statuses.
+- Fix pulling and pushing using a personal access token with the sudo scope.
+
+### Performance (3 changes)
+
+- Drastically improve project search performance by no longer searching namespace name.
+- Reuse authors when rendering event Atom feeds.
+- Optimise StuckCiJobsWorker using cheap SQL query outside, and expensive inside.
+
+
 ## 10.2.2 (2017-11-23)
 
 ### Fixed (5 changes)

Gemfile

@@ -111,7 +111,7 @@ gem 'google-api-client', '~> 0.13.6'
 gem 'unf', '~> 0.1.4'
 
 # Seed data
-gem 'seed-fu', '~> 2.3.5'
+gem 'seed-fu', '2.3.6' # Upgrade to > 2.3.7 once https://github.com/mbleigh/seed-fu/issues/123 is solved
 
 # Markdown and HTML processing
 gem 'html-pipeline', '~> 1.11.0'
@@ -283,7 +283,7 @@ group :metrics do
   gem 'influxdb', '~> 0.2', require: false
 
   # Prometheus
-  gem 'prometheus-client-mmap', '~> 0.7.0.beta37'
+  gem 'prometheus-client-mmap', '~> 0.7.0.beta39'
   gem 'raindrops', '~> 0.18'
 end
 

Gemfile.lock

@@ -625,7 +625,7 @@ GEM
       parser
       unparser
     procto (0.0.3)
-    prometheus-client-mmap (0.7.0.beta37)
+    prometheus-client-mmap (0.7.0.beta39)
       mmap2 (~> 2.2, >= 2.2.9)
     pry (0.10.4)
       coderay (~> 1.1.0)
@@ -1111,7 +1111,7 @@ DEPENDENCIES
   peek-sidekiq (~> 1.0.3)
   pg (~> 0.18.2)
   premailer-rails (~> 1.9.7)
-  prometheus-client-mmap (~> 0.7.0.beta37)
+  prometheus-client-mmap (~> 0.7.0.beta39)
   pry-byebug (~> 3.4.1)
   pry-rails (~> 0.3.4)
   rack-attack (~> 4.4.1)
@@ -1153,7 +1153,7 @@ DEPENDENCIES
   sanitize (~> 2.0)
   sass-rails (~> 5.0.6)
   scss_lint (~> 0.54.0)
-  seed-fu (~> 2.3.5)
+  seed-fu (= 2.3.6)
   select2-rails (~> 3.5.9)
   selenium-webdriver (~> 3.5)
   sentry-raven (~> 2.5.3)

app/assets/javascripts/copy_to_clipboard.js → app/assets/javascripts/behaviors/copy_to_clipboard.js

-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, prefer-arrow-callback, max-len */
+import Clipboard from 'clipboard';
 
-import Clipboard from 'vendor/clipboard';
+function showTooltip(target, title) {
+  const $target = $(target);
+  const originalTitle = $target.data('original-title');
 
-var genericError, genericSuccess, showTooltip;
+  if (!$target.data('hideTooltip')) {
+    $target
+      .attr('title', title)
+      .tooltip('fixTitle')
+      .tooltip('show')
+      .attr('title', originalTitle)
+      .tooltip('fixTitle');
+  }
+}
 
-genericSuccess = function(e) {
+function genericSuccess(e) {
   showTooltip(e.trigger, 'Copied');
   // Clear the selection and blur the trigger so it loses its border
   e.clearSelection();
-  return $(e.trigger).blur();
-};
+  $(e.trigger).blur();
+}
 
-// Safari doesn't support `execCommand`, so instead we inform the user to
-// copy manually.
-//
-// See http://clipboardjs.com/#browser-support
-genericError = function(e) {
-  var key;
+/**
+ * Safari > 10 doesn't support `execCommand`, so instead we inform the user to copy manually.
+ * See http://clipboardjs.com/#browser-support
+ */
+function genericError(e) {
+  let key;
   if (/Mac/i.test(navigator.userAgent)) {
     key = '⌘'; // Command
   } else {
     key = 'Ctrl';
   }
-  return showTooltip(e.trigger, "Press " + key + "-C to copy");
-};
-
-showTooltip = function(target, title) {
-  var $target = $(target);
-  var originalTitle = $target.data('original-title');
-
-  if (!$target.data('hideTooltip')) {
-    $target
-      .attr('title', 'Copied')
-      .tooltip('fixTitle')
-      .tooltip('show')
-      .attr('title', originalTitle)
-      .tooltip('fixTitle');
-  }
-};
+  showTooltip(e.trigger, `Press ${key}-C to copy`);
+}
 
-$(function() {
+export default function initCopyToClipboard() {
   const clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
   clipboard.on('success', genericSuccess);
   clipboard.on('error', genericError);
 
-  // This a workaround around ClipboardJS limitations to allow the context-specific copy/pasting of plain text or GFM.
-  // The Ruby `clipboard_button` helper sneaks a JSON hash with `text` and `gfm` keys into the `data-clipboard-text`
-  // attribute that ClipboardJS reads from.
-  // When ClipboardJS creates a new `textarea` (directly inside `body`, with a `readonly` attribute`), sets its value
-  // to the value of this data attribute, focusses on it, and finally programmatically issues the 'Copy' command,
-  // this code intercepts the copy command/event at the last minute to deconstruct this JSON hash and set the
-  // `text/plain` and `text/x-gfm` copy data types to the intended values.
-  $(document).on('copy', 'body > textarea[readonly]', function(e) {
+  /**
+   * This a workaround around ClipboardJS limitations to allow the context-specific copy/pasting
+   * of plain text or GFM. The Ruby `clipboard_button` helper sneaks a JSON hash with `text` and
+   * `gfm` keys into the `data-clipboard-text` attribute that ClipboardJS reads from.
+   * When ClipboardJS creates a new `textarea` (directly inside `body`, with a `readonly`
+   * attribute`), sets its value to the value of this data attribute, focusses on it, and finally
+   * programmatically issues the 'Copy' command, this code intercepts the copy command/event at
+   * the last minute to deconstruct this JSON hash and set the `text/plain` and `text/x-gfm` copy
+   * data types to the intended values.
+   */
+  $(document).on('copy', 'body > textarea[readonly]', (e) => {
     const clipboardData = e.originalEvent.clipboardData;
     if (!clipboardData) return;
 
@@ -71,4 +70,4 @@ $(function() {
     clipboardData.setData('text/plain', json.text);
     clipboardData.setData('text/x-gfm', json.gfm);
   });
-});
+}

app/assets/javascripts/behaviors/index.js

 import './autosize';
 import './bind_in_out';
 import initCopyAsGFM from './copy_as_gfm';
+import initCopyToClipboard from './copy_to_clipboard';
 import './details_behavior';
 import installGlEmojiElement from './gl_emoji';
 import './quick_submit';
@@ -9,3 +10,4 @@ import './toggler_behavior';
 
 installGlEmojiElement();
 initCopyAsGFM();
+initCopyToClipboard();

app/assets/javascripts/dispatcher.js

@@ -383,6 +383,7 @@ import ProjectVariables from './project_variables';
           projectImport();
           break;
         case 'projects:pipelines:new':
+        case 'projects:pipelines:create':
           new NewBranchForm($('.js-new-pipeline-form'));
           break;
         case 'projects:pipelines:builds':
@@ -521,6 +522,13 @@ import ProjectVariables from './project_variables';
         case 'projects:settings:ci_cd:show':
           // Initialize expandable settings panels
           initSettingsPanels();
+
+          import(/* webpackChunkName: "ci-cd-settings" */ './projects/ci_cd_settings_bundle')
+            .then(ciCdSettings => ciCdSettings.default())
+            .catch((err) => {
+              Flash(s__('ProjectSettings|Problem setting up the CI/CD settings JavaScript'));
+              throw err;
+            });
         case 'groups:settings:ci_cd:show':
           new ProjectVariables();
           break;

app/assets/javascripts/droplab/constants.js

@@ -3,6 +3,7 @@ const DATA_DROPDOWN = 'data-dropdown';
 const SELECTED_CLASS = 'droplab-item-selected';
 const ACTIVE_CLASS = 'droplab-item-active';
 const IGNORE_CLASS = 'droplab-item-ignore';
+const IGNORE_HIDING_CLASS = 'droplab-item-ignore-hiding';
 // Matches `{{anything}}` and `{{ everything }}`.
 const TEMPLATE_REGEX = /\{\{(.+?)\}\}/g;
 
@@ -13,4 +14,5 @@ export {
   ACTIVE_CLASS,
   TEMPLATE_REGEX,
   IGNORE_CLASS,
+  IGNORE_HIDING_CLASS,
 };

app/assets/javascripts/droplab/drop_down.js

 import utils from './utils';
-import { SELECTED_CLASS, IGNORE_CLASS } from './constants';
+import { SELECTED_CLASS, IGNORE_CLASS, IGNORE_HIDING_CLASS } from './constants';
 
 class DropDown {
-  constructor(list) {
+  constructor(list, config = {}) {
     this.currentIndex = 0;
     this.hidden = true;
     this.list = typeof list === 'string' ? document.querySelector(list) : list;
     this.items = [];
-
     this.eventWrapper = {};
 
+    if (config.addActiveClassToDropdownButton) {
+      this.dropdownToggle = this.list.parentNode.querySelector('.js-dropdown-toggle');
+    }
+
     this.getItems();
     this.initTemplateString();
     this.addEvents();
@@ -42,7 +45,7 @@ class DropDown {
     this.addSelectedClass(selected);
 
     e.preventDefault();
-    this.hide();
+    if (!e.target.classList.contains(IGNORE_HIDING_CLASS)) this.hide();
 
     const listEvent = new CustomEvent('click.dl', {
       detail: {
@@ -67,7 +70,20 @@ class DropDown {
 
   addEvents() {
     this.eventWrapper.clickEvent = this.clickEvent.bind(this);
+    this.eventWrapper.closeDropdown = this.closeDropdown.bind(this);
+
     this.list.addEventListener('click', this.eventWrapper.clickEvent);
+    this.list.addEventListener('keyup', this.eventWrapper.closeDropdown);
+  }
+
+  closeDropdown(event) {
+    // `ESC` key closes the dropdown.
+    if (event.keyCode === 27) {
+      event.preventDefault();
+      return this.toggle();
+    }
+
+    return true;
   }
 
   setData(data) {
@@ -110,6 +126,8 @@ class DropDown {
     this.list.style.display = 'block';
     this.currentIndex = 0;
     this.hidden = false;
+
+    if (this.dropdownToggle) this.dropdownToggle.classList.add('active');
   }
 
   hide() {
@@ -117,6 +135,8 @@ class DropDown {
     this.list.style.display = 'none';
     this.currentIndex = 0;
     this.hidden = true;
+
+    if (this.dropdownToggle) this.dropdownToggle.classList.remove('active');
   }
 
   toggle() {
@@ -128,6 +148,7 @@ class DropDown {
   destroy() {
     this.hide();
     this.list.removeEventListener('click', this.eventWrapper.clickEvent);
+    this.list.removeEventListener('keyup', this.eventWrapper.closeDropdown);
   }
 
   static setImagesSrc(template) {

app/assets/javascripts/droplab/hook.js

@@ -3,7 +3,7 @@ import DropDown from './drop_down';
 class Hook {
   constructor(trigger, list, plugins, config) {
     this.trigger = trigger;
-    this.list = new DropDown(list);
+    this.list = new DropDown(list, config);
     this.type = 'Hook';
     this.event = 'click';
     this.plugins = plugins || [];

app/assets/javascripts/dropzone_input.js

@@ -36,7 +36,10 @@ export default function dropzoneInput(form) {
   $formDropzone.append(divHover);
   $formDropzone.find('.div-dropzone-hover').append(iconPaperclip);
 
-  if (!uploadsPath) return;
+  if (!uploadsPath) {
+    $formDropzone.addClass('js-invalid-dropzone');
+    return;
+  }
 
   const dropzone = $formDropzone.dropzone({
     url: uploadsPath,

app/assets/javascripts/flash.js

@@ -41,7 +41,7 @@ const createFlashEl = (message, type, isInContentWrapper = false) => `
 `;
 
 const removeFlashClickListener = (flashEl, fadeTransition) => {
-  flashEl.parentNode.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
+  flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
 };
 
 /*

app/assets/javascripts/groups/components/group_item.vue

 <script>
+import tooltip from '../../vue_shared/directives/tooltip';
 import identicon from '../../vue_shared/components/identicon.vue';
 import eventHub from '../event_hub';
 
@@ -8,6 +9,9 @@ import itemStats from './item_stats.vue';
 import itemActions from './item_actions.vue';
 
 export default {
+  directives: {
+    tooltip,
+  },
   components: {
     identicon,
     itemCaret,
@@ -112,10 +116,16 @@ export default {
         </a>
       </div>
       <div
-        class="title">
+        class="title namespace-title">
         <a
+          v-tooltip
           :href="group.relativePath"
-          class="no-expand">{{group.fullName}}</a>
+          :title="group.fullName"
+          class="no-expand"
+          data-placement="top"
+        >
+          {{group.name}}
+        </a>
         <span
           v-if="group.permission"
           class="access-type"

app/assets/javascripts/issue_show/components/app.vue

@@ -16,6 +16,10 @@ export default {
       required: true,
       type: String,
     },
+    updateEndpoint: {
+      required: true,
+      type: String,
+    },
     canUpdate: {
       required: true,
       type: Boolean,
@@ -34,6 +38,11 @@ export default {
       required: false,
       default: true,
     },
+    enableAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     issuableRef: {
       type: String,
       required: true,
@@ -240,6 +249,7 @@ export default {
       :project-namespace="projectNamespace"
       :show-delete-button="showDeleteButton"
       :can-attach-file="canAttachFile"
+      :enable-autocomplete="enableAutocomplete"
     />
     <div v-else>
       <title-component
@@ -256,6 +266,8 @@ export default {
         :description-text="state.descriptionText"
         :updated-at="state.updatedAt"
         :task-status="state.taskStatus"
+        :issuable-type="issuableType"
+        :update-url="updateEndpoint"
       />
       <edited-component
         v-if="hasUpdated"

app/assets/javascripts/issue_show/components/description.vue

@@ -22,6 +22,16 @@
         required: false,
         default: '',
       },
+      issuableType: {
+        type: String,
+        required: false,
+        default: 'issue',
+      },
+      updateUrl: {
+        type: String,
+        required: false,
+        default: null,
+      },
     },
     data() {
       return {
@@ -48,7 +58,7 @@
         if (this.canUpdate) {
           // eslint-disable-next-line no-new
           new TaskList({
-            dataType: 'issue',
+            dataType: this.issuableType,
             fieldName: 'description',
             selector: '.detail-page-description',
           });
@@ -95,7 +105,9 @@
     <textarea
       class="hidden js-task-list-field"
       v-if="descriptionText"
-      v-model="descriptionText">
+      v-model="descriptionText"
+      :data-update-url="updateUrl"
+    >
     </textarea>
   </div>
 </template>

app/assets/javascripts/issue_show/components/fields/description.vue

@@ -22,6 +22,11 @@
         required: false,
         default: true,
       },
+      enableAutocomplete: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     components: {
       markdownField,
@@ -42,7 +47,9 @@
     <markdown-field
       :markdown-preview-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"
-      :can-attach-file="canAttachFile">
+      :can-attach-file="canAttachFile"
+      :enable-autocomplete="enableAutocomplete"
+    >
       <textarea
         id="issue-description"
         class="note-textarea js-gfm-input js-autosize markdown-area"

app/assets/javascripts/issue_show/components/form.vue

@@ -46,6 +46,11 @@
         required: false,
         default: true,
       },
+      enableAutocomplete: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     components: {
       lockedWarning,
@@ -89,7 +94,9 @@
       :form-state="formState"
       :markdown-preview-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"
-      :can-attach-file="canAttachFile" />
+      :can-attach-file="canAttachFile"
+      :enable-autocomplete="enableAutocomplete"
+    />
     <edit-actions
       :form-state="formState"
       :can-destroy="canDestroy"

app/assets/javascripts/issue_show/components/title.vue

@@ -79,7 +79,7 @@
       v-tooltip
       v-if="showInlineEditButton && canUpdate"
       type="button"
-      class="btn-blank btn-edit note-action-button"
+      class="btn btn-default btn-edit btn-svg"
       v-html="pencilIcon"
       title="Edit title and description"
       data-placement="bottom"

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

@@ -190,7 +190,7 @@ export const insertText = (target, text) => {
   target.selectionStart = target.selectionEnd = selectionStart + insertedText.length;
 
   // Trigger autosave
-  $(target).trigger('input');
+  target.dispatchEvent(new Event('input'));
 
   // Trigger autosize
   const event = document.createEvent('Event');

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

@@ -150,3 +150,17 @@ export function timeIntervalInWords(intervalInSeconds) {
   }
   return text;
 }
+
+export function dateInWords(date, abbreviated = false) {
+  if (!date) return date;
+
+  const month = date.getMonth();
+  const year = date.getFullYear();
+
+  const monthNames = [s__('January'), s__('February'), s__('March'), s__('April'), s__('May'), s__('June'), s__('July'), s__('August'), s__('September'), s__('October'), s__('November'), s__('December')];
+  const monthNamesAbbr = [s__('Jan'), s__('Feb'), s__('Mar'), s__('Apr'), s__('May'), s__('Jun'), s__('Jul'), s__('Aug'), s__('Sep'), s__('Oct'), s__('Nov'), s__('Dec')];
+
+  const monthName = abbreviated ? monthNamesAbbr[month] : monthNames[month];
+
+  return `${monthName} ${date.getDate()}, ${year}`;
+}

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

@@ -55,3 +55,12 @@ export const slugify = str => str.trim().toLowerCase();
  */
 export const truncate = (string, maxLength) => `${string.substr(0, (maxLength - 3))}...`;
 
+/**
+ * Capitalizes first character
+ *
+ * @param {String} text
+ * @return {String}
+ */
+export function capitalizeFirstCharacter(text) {
+  return `${text[0].toUpperCase()}${text.slice(1)}`;
+}

app/assets/javascripts/main.js

@@ -44,7 +44,6 @@ import './commits';
 import './compare';
 import './compare_autocomplete';
 import './confirm_danger_modal';
-import './copy_to_clipboard';
 import Flash, { removeFlashClickListener } from './flash';
 import './gl_dropdown';
 import './gl_field_error';
@@ -301,6 +300,8 @@ $(function () {
   const flashContainer = document.querySelector('.flash-container');
 
   if (flashContainer && flashContainer.children.length) {
-    removeFlashClickListener(flashContainer.children[0]);
+    flashContainer.querySelectorAll('.flash-alert, .flash-notice, .flash-success').forEach((flashEl) => {
+      removeFlashClickListener(flashEl);
+    });
   }
 });

app/assets/javascripts/notes/components/issue_comment_form.vue

@@ -22,7 +22,7 @@
         noteType: constants.COMMENT,
         // Can't use mapGetters,
         // this needs to be in the data object because it belongs to the state
-        issueState: this.$store.getters.getIssueData.state,
+        issueState: this.$store.getters.getNoteableData.state,
         isSubmitting: false,
         isSubmitButtonDisabled: true,
       };
@@ -46,7 +46,7 @@
       ...mapGetters([
         'getCurrentUserLastNote',
         'getUserData',
-        'getIssueData',
+        'getNoteableData',
         'getNotesData',
       ]),
       isLoggedIn() {
@@ -59,7 +59,7 @@
         return this.issueState === constants.OPENED || this.issueState === constants.REOPENED;
       },
       canCreateNote() {
-        return this.getIssueData.current_user.can_create_note;
+        return this.getNoteableData.current_user.can_create_note;
       },
       issueActionButtonTitle() {
         if (this.note.length) {
@@ -85,16 +85,16 @@
         return this.getNotesData.quickActionsDocsPath;
       },
       markdownPreviewPath() {
-        return this.getIssueData.preview_note_path;
+        return this.getNoteableData.preview_note_path;
       },
       author() {
         return this.getUserData;
       },
       canUpdateIssue() {
-        return this.getIssueData.current_user.can_update;
+        return this.getNoteableData.current_user.can_update;
       },
       endpoint() {
-        return this.getIssueData.create_note_path;
+        return this.getNoteableData.create_note_path;
       },
     },
     methods: {
@@ -119,7 +119,7 @@
             data: {
               note: {
                 noteable_type: constants.NOTEABLE_TYPE,
-                noteable_id: this.getIssueData.id,
+                noteable_id: this.getNoteableData.id,
                 note: this.note,
               },
             },
@@ -207,7 +207,7 @@
       },
       initAutoSave() {
         if (this.isLoggedIn) {
-          this.autosave = new Autosave($(this.$refs.textarea), ['Note', 'Issue', this.getIssueData.id], 'issue');
+          this.autosave = new Autosave($(this.$refs.textarea), ['Note', 'Issue', this.getNoteableData.id], 'issue');
         }
       },
       initTaskList() {
@@ -266,9 +266,9 @@
               <div class="error-alert"></div>
 
               <issue-warning
-                v-if="hasWarning(getIssueData)"
-                :is-locked="isLocked(getIssueData)"
-                :is-confidential="isConfidential(getIssueData)"
+                v-if="hasWarning(getNoteableData)"
+                :is-locked="isLocked(getNoteableData)"
+                :is-confidential="isConfidential(getNoteableData)"
               />
 
               <markdown-field

app/assets/javascripts/notes/components/issue_discussion.vue

@@ -41,7 +41,7 @@
     ],
     computed: {
       ...mapGetters([
-        'getIssueData',
+        'getNoteableData',
       ]),
       discussion() {
         return this.note.notes[0];
@@ -50,10 +50,10 @@
         return this.discussion.author;
       },
       canReply() {
-        return this.getIssueData.current_user.can_create_note;
+        return this.getNoteableData.current_user.can_create_note;
       },
       newNotePath() {
-        return this.getIssueData.create_note_path;
+        return this.getNoteableData.create_note_path;
       },
       lastUpdatedBy() {
         const { notes } = this.note;

app/assets/javascripts/notes/components/issue_note_form.vue

@@ -46,8 +46,8 @@
     computed: {
       ...mapGetters([
         'getDiscussionLastNote',
-        'getIssueData',
-        'getIssueDataByProp',
+        'getNoteableData',
+        'getNoteableDataByProp',
         'getNotesDataByProp',
         'getUserDataByProp',
       ]),
@@ -55,7 +55,7 @@
         return `#note_${this.noteId}`;
       },
       markdownPreviewPath() {
-        return this.getIssueDataByProp('preview_note_path');
+        return this.getNoteableDataByProp('preview_note_path');
       },
       markdownDocsPath() {
         return this.getNotesDataByProp('markdownDocsPath');
@@ -129,9 +129,9 @@
       class="edit-note common-note-form js-quick-submit gfm-form">
 
       <issue-warning
-        v-if="hasWarning(getIssueData)"
-        :is-locked="isLocked(getIssueData)"
-        :is-confidential="isConfidential(getIssueData)"
+        v-if="hasWarning(getNoteableData)"
+        :is-locked="isLocked(getNoteableData)"
+        :is-confidential="isConfidential(getNoteableData)"
       />
 
       <markdown-field

app/assets/javascripts/notes/components/issue_notes_app.vue

@@ -14,7 +14,7 @@
   export default {
     name: 'issueNotesApp',
     props: {
-      issueData: {
+      noteableData: {
         type: Object,
         required: true,
       },
@@ -56,7 +56,7 @@
         actionToggleAward: 'toggleAward',
         scrollToNoteIfNeeded: 'scrollToNoteIfNeeded',
         setNotesData: 'setNotesData',
-        setIssueData: 'setIssueData',
+        setNoteableData: 'setNoteableData',
         setUserData: 'setUserData',
         setLastFetchedAt: 'setLastFetchedAt',
         setTargetNoteHash: 'setTargetNoteHash',
@@ -106,7 +106,7 @@
     },
     created() {
       this.setNotesData(this.notesData);
-      this.setIssueData(this.issueData);
+      this.setNoteableData(this.noteableData);
       this.setUserData(this.userData);
     },
     mounted() {

app/assets/javascripts/notes/index.js

@@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', () => new Vue({
     const notesDataset = document.getElementById('js-vue-notes').dataset;
 
     return {
-      issueData: JSON.parse(notesDataset.issueData),
+      noteableData: JSON.parse(notesDataset.noteableData),
       currentUserData: JSON.parse(notesDataset.currentUserData),
       notesData: {
         lastFetchedAt: notesDataset.lastFetchedAt,
@@ -26,7 +26,7 @@ document.addEventListener('DOMContentLoaded', () => new Vue({
   render(createElement) {
     return createElement('issue-notes-app', {
       props: {
-        issueData: this.issueData,
+        noteableData: this.noteableData,
         notesData: this.notesData,
         userData: this.currentUserData,
       },

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

@@ -4,7 +4,7 @@ import Poll from '../../lib/utils/poll';
 import * as types from './mutation_types';
 import * as utils from './utils';
 import * as constants from '../constants';
-import service from '../services/issue_notes_service';
+import service from '../services/notes_service';
 import loadAwardsHandler from '../../awards_handler';
 import sidebarTimeTrackingEventHub from '../../sidebar/event_hub';
 import { isInViewport, scrollToElement } from '../../lib/utils/common_utils';
@@ -12,7 +12,7 @@ import { isInViewport, scrollToElement } from '../../lib/utils/common_utils';
 let eTagPoll;
 
 export const setNotesData = ({ commit }, data) => commit(types.SET_NOTES_DATA, data);
-export const setIssueData = ({ commit }, data) => commit(types.SET_ISSUE_DATA, data);
+export const setNoteableData = ({ commit }, data) => commit(types.SET_NOTEABLE_DATA, data);
 export const setUserData = ({ commit }, data) => commit(types.SET_USER_DATA, data);
 export const setLastFetchedAt = ({ commit }, data) => commit(types.SET_LAST_FETCHED_AT, data);
 export const setInitialNotes = ({ commit }, data) => commit(types.SET_INITIAL_NOTES, data);

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

@@ -6,8 +6,8 @@ export const targetNoteHash = state => state.targetNoteHash;
 export const getNotesData = state => state.notesData;
 export const getNotesDataByProp = state => prop => state.notesData[prop];
 
-export const getIssueData = state => state.issueData;
-export const getIssueDataByProp = state => prop => state.issueData[prop];
+export const getNoteableData = state => state.noteableData;
+export const getNoteableDataByProp = state => prop => state.noteableData[prop];
 
 export const getUserData = state => state.userData || {};
 export const getUserDataByProp = state => prop => state.userData && state.userData[prop];

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

@@ -15,7 +15,7 @@ export default new Vuex.Store({
     // holds endpoints and permissions provided through haml
     notesData: {},
     userData: {},
-    issueData: {},
+    noteableData: {},
   },
   actions,
   getters,

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

@@ -3,7 +3,7 @@ export const ADD_NEW_REPLY_TO_DISCUSSION = 'ADD_NEW_REPLY_TO_DISCUSSION';
 export const DELETE_NOTE = 'DELETE_NOTE';
 export const REMOVE_PLACEHOLDER_NOTES = 'REMOVE_PLACEHOLDER_NOTES';
 export const SET_NOTES_DATA = 'SET_NOTES_DATA';
-export const SET_ISSUE_DATA = 'SET_ISSUE_DATA';
+export const SET_NOTEABLE_DATA = 'SET_NOTEABLE_DATA';
 export const SET_USER_DATA = 'SET_USER_DATA';
 export const SET_INITIAL_NOTES = 'SET_INITIAL_NOTES';
 export const SET_LAST_FETCHED_AT = 'SET_LAST_FETCHED_AT';

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

@@ -66,8 +66,8 @@ export default {
     Object.assign(state, { notesData: data });
   },
 
-  [types.SET_ISSUE_DATA](state, data) {
-    Object.assign(state, { issueData: data });
+  [types.SET_NOTEABLE_DATA](state, data) {
+    Object.assign(state, { noteableData: data });
   },
 
   [types.SET_USER_DATA](state, data) {

app/assets/javascripts/project.js

@@ -17,13 +17,14 @@ export default class Project {
     $('a', $cloneOptions).on('click', (e) => {
       const $this = $(e.currentTarget);
       const url = $this.attr('href');
+      const activeText = $this.find('.dropdown-menu-inner-title').text();
 
       e.preventDefault();
 
       $('.is-active', $cloneOptions).not($this).removeClass('is-active');
       $this.toggleClass('is-active');
       $projectCloneField.val(url);
-      $cloneBtnText.text($this.text());
+      $cloneBtnText.text(activeText);
 
       return $('.clone').text(url);
     });

app/assets/javascripts/projects/ci_cd_settings_bundle.js

+function updateAutoDevopsRadios(radioWrappers) {
+  radioWrappers.forEach((radioWrapper) => {
+    const radio = radioWrapper.querySelector('.js-auto-devops-enable-radio');
+    const runPipelineCheckboxWrapper = radioWrapper.querySelector('.js-run-auto-devops-pipeline-checkbox-wrapper');
+    const runPipelineCheckbox = radioWrapper.querySelector('.js-run-auto-devops-pipeline-checkbox');
+
+    if (runPipelineCheckbox) {
+      runPipelineCheckbox.checked = radio.checked;
+      runPipelineCheckboxWrapper.classList.toggle('hide', !radio.checked);
+    }
+  });
+}
+
+export default function initCiCdSettings() {
+  const radioWrappers = document.querySelectorAll('.js-auto-devops-enable-radio-wrapper');
+  radioWrappers.forEach(radioWrapper =>
+    radioWrapper.addEventListener('change', () => updateAutoDevopsRadios(radioWrappers)),
+  );
+}

app/assets/javascripts/projects_dropdown/components/projects_list_item.vue

@@ -48,6 +48,27 @@ export default {
       }
       return this.projectName;
     },
+    /**
+     * Smartly truncates project namespace by doing two things;
+     * 1. Only include Group names in path by removing project name
+     * 2. Only include first and last group names in the path
+     *    when namespace has more than 2 groups present
+     *
+     * First part (removal of project name from namespace) can be
+     * done from backend but doing so involves migration of
+     * existing project namespaces which is not wise thing to do.
+     */
+    truncatedNamespace() {
+      const namespaceArr = this.namespace.split(' / ');
+      namespaceArr.splice(-1, 1);
+      let namespace = namespaceArr.join(' / ');
+
+      if (namespaceArr.length > 2) {
+        namespace = `${namespaceArr[0]} / ... / ${namespaceArr.pop()}`;
+      }
+
+      return namespace;
+    },
   },
 };
 </script>
@@ -87,9 +108,7 @@ export default {
         <div
           class="project-namespace"
           :title="namespace"
-        >
-          {{namespace}}
-        </div>
+        >{{truncatedNamespace}}</div>
       </div>
     </a>
   </li>

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

+<script>
+  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,
+      },
+      collapsed: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    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"
+        >
+          No changes
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

app/assets/javascripts/repo/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/repo/components/commit_sidebar/list_item.vue

+<script>
+  import icon from '../../../vue_shared/components/icon.vue';
+
+  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`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="multi-file-commit-list-item">
+    <icon
+      :name="iconName"
+      :size="16"
+      :css-classes="iconClass"
+    />
+    <span class="multi-file-commit-list-path">
+      {{ file.path }}
+    </span>
+  </div>
+</template>

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

@@ -40,20 +40,24 @@ export default {
 </script>
 
 <template>
-  <div class="repository-view">
-    <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isCollapsed}">
-      <repo-sidebar/>
-      <div
-        v-if="isCollapsed"
-        class="panel-right"
-      >
-        <repo-tabs/>
-        <component
-          :is="currentBlobView"
-        />
-        <repo-file-buttons/>
-      </div>
+  <div
+    class="multi-file"
+    :class="{
+      'is-collapsed': isCollapsed
+    }"
+  >
+    <repo-sidebar/>
+    <div
+      v-if="isCollapsed"
+      class="multi-file-edit-pane"
+    >
+      <repo-tabs />
+      <component
+        class="multi-file-edit-pane-content"
+        :is="currentBlobView"
+      />
+      <repo-file-buttons />
     </div>
-    <repo-commit-section v-if="changedFiles.length" />
+    <repo-commit-section />
   </div>
 </template>

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

 <script>
 import { mapGetters, mapState, mapActions } from 'vuex';
+import tooltip from '../../vue_shared/directives/tooltip';
+import icon from '../../vue_shared/components/icon.vue';
 import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
-import { n__ } from '../../locale';
+import commitFilesList from './commit_sidebar/list.vue';
 
 export default {
   components: {
     PopupDialog,
+    icon,
+    commitFilesList,
+  },
+  directives: {
+    tooltip,
   },
   data() {
     return {
@@ -13,6 +20,7 @@ export default {
       submitCommitsLoading: false,
       startNewMR: false,
       commitMessage: '',
+      collapsed: true,
     };
   },
   computed: {
@@ -23,10 +31,10 @@ export default {
       'changedFiles',
     ]),
     commitButtonDisabled() {
-      return !this.commitMessage || this.submitCommitsLoading;
+      return this.commitMessage === '' || this.submitCommitsLoading || !this.changedFiles.length;
     },
-    commitButtonText() {
-      return n__('Commit %d file', 'Commit %d files', this.changedFiles.length);
+    commitMessageCount() {
+      return this.commitMessage.length;
     },
   },
   methods: {
@@ -77,12 +85,20 @@ export default {
           this.submitCommitsLoading = false;
         });
     },
+    toggleCollapsed() {
+      this.collapsed = !this.collapsed;
+    },
   },
 };
 </script>
 
 <template>
-<div id="commit-area">
+<div
+  class="multi-file-commit-panel"
+  :class="{
+    'is-collapsed': collapsed,
+  }"
+>
   <popup-dialog
     v-if="showNewBranchDialog"
     :primary-button-label="__('Create new branch')"
@@ -92,78 +108,71 @@ export default {
     @toggle="showNewBranchDialog = false"
     @submit="makeCommit(true)"
   />
+  <button
+    v-if="collapsed"
+    type="button"
+    class="btn btn-transparent multi-file-commit-panel-collapse-btn is-collapsed prepend-top-10 append-bottom-10"
+    @click="toggleCollapsed"
+  >
+    <i
+      aria-hidden="true"
+      class="fa fa-angle-double-left"
+    >
+    </i>
+  </button>
+  <commit-files-list
+    title="Staged"
+    :file-list="changedFiles"
+    :collapsed="collapsed"
+    @toggleCollapsed="toggleCollapsed"
+  />
   <form
-    class="form-horizontal"
-    @submit.prevent="tryCommit()">
-    <fieldset>
-      <div class="form-group">
-        <label class="col-md-4 control-label staged-files">
-          Staged files ({{changedFiles.length}})
-        </label>
-        <div class="col-md-6">
-          <ul class="list-unstyled changed-files">
-            <li
-              v-for="(file, index) in changedFiles"
-              :key="index">
-              <span class="help-block">
-                {{ file.path }}
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="form-group">
-        <label
-          class="col-md-4 control-label"
-          for="commit-message">
-          Commit message
-        </label>
-        <div class="col-md-6">
-          <textarea
-            id="commit-message"
-            class="form-control"
-            name="commit-message"
-            v-model="commitMessage">
-          </textarea>
-        </div>
-      </div>
-      <div class="form-group target-branch">
-        <label
-          class="col-md-4 control-label"
-          for="target-branch">
-          Target branch
-        </label>
-        <div class="col-md-6">
-          <span class="help-block">
-            {{currentBranch}}
-          </span>
-        </div>
-      </div>
-      <div class="col-md-offset-4 col-md-6">
-        <button
-          type="submit"
-          :disabled="commitButtonDisabled"
-          class="btn btn-success">
-          <i
-            v-if="submitCommitsLoading"
-            class="js-commit-loading-icon fa fa-spinner fa-spin"
-            aria-hidden="true"
-            aria-label="loading">
-          </i>
-          <span class="commit-summary">
-            {{ commitButtonText }}
-          </span>
-        </button>
-      </div>
-      <div class="col-md-offset-4 col-md-6">
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" v-model="startNewMR">
-            <span>Start a <strong>new merge request</strong> with these changes</span>
-          </label>
-        </div>
+    class="form-horizontal multi-file-commit-form"
+    @submit.prevent="tryCommit"
+    v-if="!collapsed"
+  >
+    <div class="multi-file-commit-fieldset">
+      <textarea
+        class="form-control multi-file-commit-message"
+        name="commit-message"
+        v-model="commitMessage"
+        placeholder="Commit message"
+      >
+      </textarea>
+    </div>
+    <div class="multi-file-commit-fieldset">
+      <label
+        v-tooltip
+        title="Create a new merge request with these changes"
+        data-container="body"
+        data-placement="top"
+      >
+        <input
+          type="checkbox"
+          v-model="startNewMR"
+        />
+        Merge Request
+      </label>
+      <button
+        type="submit"
+        :disabled="commitButtonDisabled"
+        class="btn btn-default btn-sm append-right-10 prepend-left-10"
+      >
+        <i
+          v-if="submitCommitsLoading"
+          class="js-commit-loading-icon fa fa-spinner fa-spin"
+          aria-hidden="true"
+          aria-label="loading"
+        >
+        </i>
+        Commit
+      </button>
+      <div
+        class="multi-file-commit-message-count"
+      >
+        {{ commitMessageCount }}
       </div>
-    </fieldset>
+    </div>
   </form>
 </div>
 </template>

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

@@ -3,19 +3,18 @@
 import { mapGetters, mapActions } from 'vuex';
 import flash from '../../flash';
 import monacoLoader from '../monaco_loader';
+import Editor from '../lib/editor';
 
 export default {
-  destroyed() {
-    if (this.monacoInstance) {
-      this.monacoInstance.destroy();
-    }
+  beforeDestroy() {
+    this.editor.dispose();
   },
   mounted() {
-    if (this.monaco) {
+    if (this.editor && monaco) {
       this.initMonaco();
     } else {
       monacoLoader(['vs/editor/editor.main'], () => {
-        this.monaco = monaco;
+        this.editor = Editor.create(monaco);
 
         this.initMonaco();
       });
@@ -29,47 +28,25 @@ export default {
     initMonaco() {
       if (this.shouldHideEditor) return;
 
-      if (this.monacoInstance) {
-        this.monacoInstance.setModel(null);
-      }
+      this.editor.clearEditor();
 
       this.getRawFileData(this.activeFile)
         .then(() => {
-          if (!this.monacoInstance) {
-            this.monacoInstance = this.monaco.editor.create(this.$el, {
-              model: null,
-              readOnly: false,
-              contextmenu: true,
-              scrollBeyondLastLine: false,
-            });
-
-            this.languages = this.monaco.languages.getLanguages();
-
-            this.addMonacoEvents();
-          }
-
-          this.setupEditor();
+          this.editor.createInstance(this.$refs.editor);
         })
+        .then(() => this.setupEditor())
         .catch(() => flash('Error setting up monaco. Please try again.'));
     },
     setupEditor() {
       if (!this.activeFile) return;
-      const content = this.activeFile.content !== '' ? this.activeFile.content : this.activeFile.raw;
 
-      const foundLang = this.languages.find(lang =>
-        lang.extensions && lang.extensions.indexOf(this.activeFileExtension) === 0,
-      );
-      const newModel = this.monaco.editor.createModel(
-        content, foundLang ? foundLang.id : 'plaintext',
-      );
+      const model = this.editor.createModel(this.activeFile);
 
-      this.monacoInstance.setModel(newModel);
-    },
-    addMonacoEvents() {
-      this.monacoInstance.onKeyUp(() => {
+      this.editor.attachModel(model);
+      model.onChange((m) => {
         this.changeFileContent({
           file: this.activeFile,
-          content: this.monacoInstance.getValue(),
+          content: m.getValue(),
         });
       });
     },
@@ -99,9 +76,14 @@ export default {
     class="blob-viewer-container blob-editor-container"
   >
     <div
-      v-if="shouldHideEditor"
+      v-show="shouldHideEditor"
       v-html="activeFile.html"
     >
     </div>
+    <div
+      v-show="!shouldHideEditor"
+      ref="editor"
+    >
+    </div>
   </div>
 </template>

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

@@ -55,7 +55,7 @@
     class="file"
     @click.prevent="clickedTreeRow(file)">
     <td
-      class="multi-file-table-col-name"
+      class="multi-file-table-name"
       :colspan="submoduleColSpan"
     >
       <i
@@ -85,12 +85,11 @@
     </td>
 
     <template v-if="!isCollapsed && !isSubmodule">
-      <td class="hidden-sm hidden-xs">
+      <td class="multi-file-table-col-commit-message hidden-sm hidden-xs">
         <a
           v-if="file.lastCommit.message"
           @click.stop
           :href="file.lastCommit.url"
-          class="commit-message"
         >
           {{ file.lastCommit.message }}
         </a>

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

@@ -22,12 +22,12 @@ export default {
 <template>
   <div
     v-if="showButtons"
-    class="repo-file-buttons"
+    class="multi-file-editor-btn-group"
   >
     <a
       :href="activeFile.rawPath"
       target="_blank"
-      class="btn btn-default raw"
+      class="btn btn-default btn-sm raw"
       rel="noopener noreferrer">
       {{ rawDownloadButtonLabel }}
     </a>
@@ -38,17 +38,17 @@ export default {
       aria-label="File actions">
       <a
         :href="activeFile.blamePath"
-        class="btn btn-default blame">
+        class="btn btn-default btn-sm blame">
         Blame
       </a>
       <a
         :href="activeFile.commitsPath"
-        class="btn btn-default history">
+        class="btn btn-default btn-sm history">
         History
       </a>
       <a
         :href="activeFile.permalink"
-        class="btn btn-default permalink">
+        class="btn btn-default btn-sm permalink">
         Permalink
       </a>
     </div>

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

@@ -32,10 +32,12 @@ export default {
 </script>
 
 <template>
-<div class="blob-viewer-container">
+<div>
   <div
     v-if="!activeFile.renderError"
-    v-html="activeFile.html">
+    v-html="activeFile.html"
+    class="multi-file-preview-holder"
+  >
   </div>
   <div
     v-else-if="activeFile.tempFile"

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

@@ -44,20 +44,16 @@ export default {
 </script>
 
 <template>
-<div id="sidebar" :class="{'sidebar-mini' : isCollapsed}">
+<div class="ide-file-list">
   <table class="table">
     <thead>
       <tr>
         <th
           v-if="isCollapsed"
-          class="repo-file-options title"
         >
-          <strong class="clgray">
-            {{ projectName }}
-          </strong>
         </th>
         <template v-else>
-          <th class="name multi-file-table-col-name">
+          <th class="name multi-file-table-name">
             Name
           </th>
           <th class="hidden-sm hidden-xs last-commit">
@@ -79,7 +75,7 @@ export default {
         :key="n"
       />
       <repo-file
-        v-for="(file, index) in treeList"
+        v-for="file in treeList"
         :key="file.key"
         :file="file"
       />

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

@@ -36,27 +36,32 @@ export default {
 
 <template>
   <li
-    :class="{ active : tab.active }"
     @click="setFileActive(tab)"
   >
     <button
       type="button"
-      class="close-btn"
+      class="multi-file-tab-close"
       @click.stop.prevent="closeFile({ file: tab })"
-      :aria-label="closeLabel">
+      :aria-label="closeLabel"
+      :class="{
+        'modified': tab.changed,
+      }"
+      :disabled="tab.changed"
+    >
       <i
         class="fa"
         :class="changedClass"
-        aria-hidden="true">
+        aria-hidden="true"
+      >
       </i>
     </button>
 
-    <a
-      href="#"
-      class="repo-tab"
+    <div
+      class="multi-file-tab"
+      :class="{active : tab.active }"
       :title="tab.url"
-      @click.prevent.stop="setFileActive(tab)">
-      {{tab.name}}
-    </a>
+    >
+      {{ tab.name }}
+    </div>
   </li>
 </template>

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

@@ -16,14 +16,12 @@
 
 <template>
   <ul
-    id="tabs"
-    class="list-unstyled"
+    class="multi-file-tabs list-unstyled append-bottom-0"
   >
     <repo-tab
       v-for="tab in openFiles"
       :key="tab.id"
       :tab="tab"
     />
-    <li class="tabs-divider" />
   </ul>
 </template>

app/assets/javascripts/repo/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/repo/lib/common/model.js

+/* global monaco */
+import Disposable from './disposable';
+
+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();
+  }
+
+  get url() {
+    return this.model.uri.toString();
+  }
+
+  get path() {
+    return this.file.path;
+  }
+
+  getModel() {
+    return this.model;
+  }
+
+  getOriginalModel() {
+    return this.originalModel;
+  }
+
+  onChange(cb) {
+    this.events.set(
+      this.path,
+      this.disposable.add(
+        this.model.onDidChangeContent(e => cb(this.model, e)),
+      ),
+    );
+  }
+
+  dispose() {
+    this.disposable.dispose();
+    this.events.clear();
+  }
+}

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

+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);
+  }
+
+  addModel(file) {
+    if (this.hasCachedModel(file.path)) {
+      return this.models.get(file.path);
+    }
+
+    const model = new Model(this.monaco, file);
+    this.models.set(model.path, model);
+    this.disposable.add(model);
+
+    return model;
+  }
+
+  dispose() {
+    // dispose of all the models
+    this.disposable.dispose();
+    this.models.clear();
+  }
+}

app/assets/javascripts/repo/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) {
+    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/repo/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));
+    this.decorationsController.addDecorations(data.path, 'dirtyDiff', decorations);
+  }
+
+  dispose() {
+    this.disposable.dispose();
+
+    this.dirtyDiffWorker.removeEventListener('message', this.decorate);
+    this.dirtyDiffWorker.terminate();
+  }
+}

app/assets/javascripts/repo/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/repo/lib/diff/diff_worker.js

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

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

+import DecorationsController from './decorations/controller';
+import DirtyDiffController from './diff/controller';
+import Disposable from './common/disposable';
+import ModelManager from './common/model_manager';
+import editorOptions from './editor_options';
+
+export default class Editor {
+  static create(monaco) {
+    this.editorInstance = new Editor(monaco);
+
+    return this.editorInstance;
+  }
+
+  constructor(monaco) {
+    this.monaco = monaco;
+    this.currentModel = null;
+    this.instance = null;
+    this.dirtyDiffController = null;
+    this.disposable = new Disposable();
+
+    this.disposable.add(
+      this.modelManager = new ModelManager(this.monaco),
+      this.decorationsController = new DecorationsController(this),
+    );
+  }
+
+  createInstance(domElement) {
+    if (!this.instance) {
+      this.disposable.add(
+        this.instance = this.monaco.editor.create(domElement, {
+          model: null,
+          readOnly: false,
+          contextmenu: true,
+          scrollBeyondLastLine: false,
+        }),
+        this.dirtyDiffController = new DirtyDiffController(
+          this.modelManager, this.decorationsController,
+        ),
+      );
+    }
+  }
+
+  createModel(file) {
+    return this.modelManager.addModel(file);
+  }
+
+  attachModel(model) {
+    this.instance.setModel(model.getModel());
+    this.dirtyDiffController.attachModel(model);
+
+    this.currentModel = model;
+
+    this.instance.updateOptions(editorOptions.reduce((acc, obj) => {
+      Object.keys(obj).forEach((key) => {
+        Object.assign(acc, {
+          [key]: obj[key](model),
+        });
+      });
+      return acc;
+    }, {}));
+
+    this.dirtyDiffController.reDecorate(model);
+  }
+
+  clearEditor() {
+    if (this.instance) {
+      this.instance.setModel(null);
+    }
+  }
+
+  dispose() {
+    this.disposable.dispose();
+
+    // dispose main monaco instance
+    if (this.instance) {
+      this.instance = null;
+    }
+  }
+}

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

+export default [{
+}];

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

@@ -16,6 +16,10 @@ export default {
       return Promise.resolve(file.content);
     }
 
+    if (file.raw) {
+      return Promise.resolve(file.raw);
+    }
+
     return Vue.http.get(file.rawPath, { params: { format: 'json' } })
       .then(res => res.text());
   },

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

@@ -34,3 +34,7 @@ export const canEditFile = (state) => {
     openedFiles.length &&
     (currentActiveFile && !currentActiveFile.renderError && !currentActiveFile.binary);
 };
+
+export const addedFiles = state => changedFiles(state).filter(f => f.tempFile);
+
+export const modifiedFiles = state => changedFiles(state).filter(f => !f.tempFile);

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

@@ -12,6 +12,9 @@
   />
 
 */
+  // only allow classes in images.scss e.g. s12
+  const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
+
   export default {
     props: {
       name: {
@@ -22,7 +25,10 @@
       size: {
         type: Number,
         required: false,
-        default: 0,
+        default: 16,
+        validator(value) {
+          return validSizes.includes(value);
+        },
       },
 
       cssClasses: {
@@ -42,10 +48,11 @@
     },
   };
 </script>
+
 <template>
   <svg
     :class="[iconSizeClass, cssClasses]">
-    <use 
+    <use
       v-bind="{'xlink:href':spriteHref}"/>
   </svg>
 </template>

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -30,6 +30,11 @@
         required: false,
         default: true,
       },
+      enableAutocomplete: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     data() {
       return {
@@ -97,7 +102,7 @@
       /*
         GLForm class handles all the toolbar buttons
       */
-      return new GLForm($(this.$refs['gl-form']), true);
+      return new GLForm($(this.$refs['gl-form']), this.enableAutocomplete);
     },
     beforeDestroy() {
       const glForm = $(this.$refs['gl-form']).data('gl-form');

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

+<script>
+  import Pikaday from 'pikaday';
+  import { parsePikadayDate, pikadayToString } from '../../lib/utils/datefix';
+
+  export default {
+    name: 'datePicker',
+    props: {
+      label: {
+        type: String,
+        required: false,
+        default: 'Date picker',
+      },
+      selectedDate: {
+        type: Date,
+        required: false,
+      },
+      minDate: {
+        type: Date,
+        required: false,
+      },
+      maxDate: {
+        type: Date,
+        required: false,
+      },
+    },
+    methods: {
+      selected(dateText) {
+        this.$emit('newDateSelected', this.calendar.toString(dateText));
+      },
+      toggled() {
+        this.$emit('hidePicker');
+      },
+    },
+    mounted() {
+      this.calendar = new Pikaday({
+        field: this.$el.querySelector('.dropdown-menu-toggle'),
+        theme: 'gitlab-theme animate-picker',
+        format: 'yyyy-mm-dd',
+        container: this.$el,
+        defaultDate: this.selectedDate,
+        setDefaultDate: !!this.selectedDate,
+        minDate: this.minDate,
+        maxDate: this.maxDate,
+        parse: dateString => parsePikadayDate(dateString),
+        toString: date => pikadayToString(date),
+        onSelect: this.selected.bind(this),
+        onClose: this.toggled.bind(this),
+      });
+
+      this.$el.append(this.calendar.el);
+      this.calendar.show();
+    },
+    beforeDestroy() {
+      this.calendar.destroy();
+    },
+  };
+</script>
+
+<template>
+  <div class="pikaday-container">
+    <div class="dropdown open">
+      <button
+        type="button"
+        class="dropdown-menu-toggle"
+        data-toggle="dropdown"
+        @click="toggled"
+      >
+        <span class="dropdown-toggle-text">
+          {{label}}
+        </span>
+        <i
+          class="fa fa-chevron-down"
+          aria-hidden="true"
+        >
+        </i>
+      </button>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue

+<script>
+  export default {
+    name: 'collapsedCalendarIcon',
+    props: {
+      containerClass: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      text: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      showIcon: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+    },
+    methods: {
+      click() {
+        this.$emit('click');
+      },
+    },
+  };
+</script>
+
+<template>
+  <div
+    :class="containerClass"
+    @click="click"
+  >
+    <i
+      v-if="showIcon"
+      class="fa fa-calendar"
+      aria-hidden="true"
+    >
+    </i>
+    <slot>
+      <span>
+        {{ text }}
+      </span>
+    </slot>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue

+<script>
+  import { dateInWords } from '../../../lib/utils/datetime_utility';
+  import toggleSidebar from './toggle_sidebar.vue';
+  import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
+
+  export default {
+    name: 'sidebarCollapsedGroupedDatePicker',
+    props: {
+      collapsed: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      showToggleSidebar: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      minDate: {
+        type: Date,
+        required: false,
+      },
+      maxDate: {
+        type: Date,
+        required: false,
+      },
+      disableClickableIcons: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    components: {
+      toggleSidebar,
+      collapsedCalendarIcon,
+    },
+    computed: {
+      hasMinAndMaxDates() {
+        return this.minDate && this.maxDate;
+      },
+      hasNoMinAndMaxDates() {
+        return !this.minDate && !this.maxDate;
+      },
+      showMinDateBlock() {
+        return this.minDate || this.hasNoMinAndMaxDates;
+      },
+      showFromText() {
+        return !this.maxDate && this.minDate;
+      },
+      iconClass() {
+        const disabledClass = this.disableClickableIcons ? 'disabled' : '';
+        return `block sidebar-collapsed-icon calendar-icon ${disabledClass}`;
+      },
+    },
+    methods: {
+      toggleSidebar() {
+        this.$emit('toggleCollapse');
+      },
+      dateText(dateType = 'min') {
+        const date = this[`${dateType}Date`];
+        const dateWords = dateInWords(date, true);
+        const parsedDateWords = dateWords ? dateWords.replace(',', '') : dateWords;
+
+        return date ? parsedDateWords : 'None';
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="block sidebar-grouped-item">
+    <div
+      v-if="showToggleSidebar"
+      class="issuable-sidebar-header"
+    >
+      <toggle-sidebar
+        :collapsed="collapsed"
+        @toggle="toggleSidebar"
+      />
+    </div>
+    <collapsed-calendar-icon
+      v-if="showMinDateBlock"
+      :container-class="iconClass"
+      @click="toggleSidebar"
+    >
+      <span class="sidebar-collapsed-value">
+        <span v-if="showFromText">From</span>
+        <span>{{ dateText('min') }}</span>
+      </span>
+    </collapsed-calendar-icon>
+    <div
+      v-if="hasMinAndMaxDates"
+      class="text-center sidebar-collapsed-divider"
+    >
+      -
+    </div>
+    <collapsed-calendar-icon
+      v-if="maxDate"
+      :container-class="iconClass"
+      :show-icon="!minDate"
+      @click="toggleSidebar"
+    >
+      <span class="sidebar-collapsed-value">
+        <span v-if="!minDate">Until</span>
+        <span>{{ dateText('max') }}</span>
+      </span>
+    </collapsed-calendar-icon>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue

+<script>
+  import datePicker from '../pikaday.vue';
+  import loadingIcon from '../loading_icon.vue';
+  import toggleSidebar from './toggle_sidebar.vue';
+  import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
+  import { dateInWords } from '../../../lib/utils/datetime_utility';
+
+  export default {
+    name: 'sidebarDatePicker',
+    props: {
+      collapsed: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      showToggleSidebar: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      isLoading: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      editable: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      label: {
+        type: String,
+        required: false,
+        default: 'Date picker',
+      },
+      selectedDate: {
+        type: Date,
+        required: false,
+      },
+      minDate: {
+        type: Date,
+        required: false,
+      },
+      maxDate: {
+        type: Date,
+        required: false,
+      },
+    },
+    data() {
+      return {
+        editing: false,
+      };
+    },
+    components: {
+      datePicker,
+      toggleSidebar,
+      loadingIcon,
+      collapsedCalendarIcon,
+    },
+    computed: {
+      selectedAndEditable() {
+        return this.selectedDate && this.editable;
+      },
+      selectedDateWords() {
+        return dateInWords(this.selectedDate, true);
+      },
+      collapsedText() {
+        return this.selectedDateWords ? this.selectedDateWords : 'None';
+      },
+    },
+    methods: {
+      stopEditing() {
+        this.editing = false;
+      },
+      toggleDatePicker() {
+        this.editing = !this.editing;
+      },
+      newDateSelected(date = null) {
+        this.date = date;
+        this.editing = false;
+        this.$emit('saveDate', date);
+      },
+      toggleSidebar() {
+        this.$emit('toggleCollapse');
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="block">
+    <div class="issuable-sidebar-header">
+      <toggle-sidebar
+        :collapsed="collapsed"
+        @toggle="toggleSidebar"
+      />
+    </div>
+    <collapsed-calendar-icon
+      class="sidebar-collapsed-icon"
+      :text="collapsedText"
+    />
+    <div class="title">
+      {{ label }}
+      <loading-icon
+        v-if="isLoading"
+        :inline="true"
+      />
+      <div class="pull-right">
+        <button
+          v-if="editable && !editing"
+          type="button"
+          class="btn-blank btn-link btn-primary-hover-link btn-sidebar-action"
+          @click="toggleDatePicker"
+        >
+          Edit
+        </button>
+        <toggle-sidebar
+          v-if="showToggleSidebar"
+          :collapsed="collapsed"
+          @toggle="toggleSidebar"
+        />
+      </div>
+    </div>
+    <div class="value">
+      <date-picker
+        v-if="editing"
+        :selected-date="selectedDate"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :label="label"
+        @newDateSelected="newDateSelected"
+        @hidePicker="stopEditing"
+      />
+      <span
+        v-else
+        class="value-content"
+      >
+        <template v-if="selectedDate">
+          <strong>{{ selectedDateWords }}</strong>
+          <span
+            v-if="selectedAndEditable"
+            class="no-value"
+          >
+            -
+            <button
+              type="button"
+              class="btn-blank btn-link btn-secondary-hover-link"
+              @click="newDateSelected(null)"
+            >
+              remove
+            </button>
+          </span>
+        </template>
+        <span
+          v-else
+          class="no-value"
+        >
+          None
+        </span>
+      </span>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue

+<script>
+  export default {
+    name: 'toggleSidebar',
+    props: {
+      collapsed: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    methods: {
+      toggle() {
+        this.$emit('toggle');
+      },
+    },
+  };
+</script>
+
+<template>
+  <button
+    type="button"
+    class="btn btn-blank gutter-toggle btn-sidebar-action"
+    @click="toggle"
+  >
+    <i
+      aria-label="toggle collapse"
+      class="fa"
+      :class="{ 'fa-angle-double-right': !collapsed, 'fa-angle-double-left': collapsed }"
+    ></i>
+  </button>
+</template>

app/assets/javascripts/zen_mode.js

@@ -71,7 +71,7 @@ export default class ZenMode {
     this.active_textarea = this.active_backdrop.find('textarea');
     // Prevent a user-resized textarea from persisting to fullscreen
     this.active_textarea.removeAttr('style');
-    return this.active_textarea.focus();
+    this.active_textarea.focus();
   }
 
   exit() {
@@ -81,7 +81,11 @@ export default class ZenMode {
       this.scrollTo(this.active_textarea);
       this.active_textarea = null;
       this.active_backdrop = null;
-      return Dropzone.forElement('.div-dropzone').enable();
+
+      const $dropzone = $('.div-dropzone');
+      if ($dropzone && !$dropzone.hasClass('js-invalid-dropzone')) {
+        Dropzone.forElement('.div-dropzone').enable();
+      }
     }
   }
 

app/assets/stylesheets/framework/animations.scss

@@ -125,7 +125,7 @@
   @include transition(border-color);
 }
 
-.note-action-button .link-highlight,
+.note-action-button,
 .toolbar-btn,
 .dropdown-toggle-caret {
   @include transition(color);

app/assets/stylesheets/framework/buttons.scss

@@ -88,17 +88,6 @@
     border-color: $border-dark;
     color: $color;
   }
-
-  svg {
-
-    path {
-      fill: $color;
-    }
-
-    use {
-      stroke: $color;
-    }
-  }
 }
 
 @mixin btn-green {
@@ -142,6 +131,13 @@
   }
 }
 
+@mixin btn-svg {
+  height: $gl-padding;
+  width: $gl-padding;
+  top: 0;
+  vertical-align: text-top;
+}
+
 .btn {
   @include btn-default;
   @include btn-white;
@@ -408,6 +404,7 @@
   padding: 0;
   background: transparent;
   border: 0;
+  border-radius: 0;
 
   &:hover,
   &:active,
@@ -417,3 +414,29 @@
     box-shadow: none;
   }
 }
+
+.btn-link.btn-secondary-hover-link {
+  color: $gl-text-color-secondary;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $gl-link-color;
+    text-decoration: none;
+  }
+}
+
+.btn-link.btn-primary-hover-link {
+  color: inherit;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $gl-link-color;
+    text-decoration: none;
+  }
+}
+
+.btn-svg svg {
+  @include btn-svg;
+}

app/assets/stylesheets/framework/common.scss

@@ -2,14 +2,43 @@
 .cgray { color: $common-gray; }
 .clgray { color: $common-gray-light; }
 .cred { color: $common-red; }
-svg.cred { fill: $common-red; }
 .cgreen { color: $common-green; }
-svg.cgreen { fill: $common-green; }
 .cdark { color: $common-gray-dark; }
+
+.text-plain,
+.text-plain:hover {
+  color: $gl-text-color;
+}
+
 .text-secondary {
   color: $gl-text-color-secondary;
 }
 
+.text-primary,
+.text-primary:hover {
+  color: $brand-primary;
+}
+
+.text-success,
+.text-success:hover {
+  color: $brand-success;
+}
+
+.text-danger,
+.text-danger:hover {
+  color: $brand-danger;
+}
+
+.text-warning,
+.text-warning:hover {
+  color: $brand-warning;
+}
+
+.text-info,
+.text-info:hover {
+  color: $brand-info;
+}
+
 .underlined-link { text-decoration: underline; }
 .hint { font-style: italic; color: $hint-color; }
 .light { color: $common-gray; }

app/assets/stylesheets/framework/dropdowns.scss

@@ -1002,6 +1002,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     max-width: 250px;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &:hover {

app/assets/stylesheets/framework/flash.scss

@@ -34,8 +34,15 @@
     }
   }
 
+  .flash-success {
+    @extend .alert;
+    @extend .alert-success;
+    margin: 0;
+  }
+
   .flash-notice,
-  .flash-alert {
+  .flash-alert,
+  .flash-success {
     border-radius: $border-radius-default;
 
     .container-fluid,
@@ -48,7 +55,8 @@
     margin-bottom: 0;
 
     .flash-notice,
-    .flash-alert {
+    .flash-alert,
+    .flash-success {
       border-radius: 0;
     }
   }

app/assets/stylesheets/framework/icons.scss

 .ci-status-icon-success,
 .ci-status-icon-passed {
-  color: $green-500;
+  svg {
+    fill: $green-500;
+  }
 }
 
 .ci-status-icon-failed {
-  color: $gl-danger;
+  svg {
+    fill: $gl-danger;
+  }
 }
 
 .ci-status-icon-pending,
 .ci-status-icon-failed_with_warnings,
 .ci-status-icon-success_with_warnings {
-  color: $orange-500;
+  svg {
+    fill: $orange-500;
+  }
 }
 
 .ci-status-icon-running {
-  color: $blue-400;
+  svg {
+    fill: $blue-400;
+  }
 }
 
 .ci-status-icon-canceled,
 .ci-status-icon-disabled,
 .ci-status-icon-not-found {
-  color: $gl-text-color;
+  svg {
+    fill: $gl-text-color;
+  }
 }
 
 .ci-status-icon-created,
 .ci-status-icon-skipped {
-  color: $gray-darkest;
+  svg {
+    fill: $gray-darkest;
+  }
 }
 
 .ci-status-icon-manual {
-  color: $gl-text-color;
+  svg {
+    fill: $gl-text-color;
+  }
 }
 
 .icon-link {

app/assets/stylesheets/framework/lists.scss

@@ -449,6 +449,12 @@ ul.indent-list {
   }
 }
 
+.namespace-title {
+  .tooltip-inner {
+    max-width: 350px;
+  }
+}
+
 ul.group-list-tree {
   li.group-row {
     &.has-description {

app/assets/stylesheets/framework/selects.scss

@@ -134,19 +134,22 @@
 }
 
 .select2-search {
-  padding: 15px 15px 5px;
+  padding: $grid-size;
 
   .select2-drop-auto-width & {
-    padding: 15px 15px 5px;
+    padding: $grid-size;
   }
 
   input {
-    padding: 2px 25px 2px 5px;
+    padding: $grid-size;
     background: $white-light image-url('select2.png');
+    background-clip: content-box;
+    background-origin: content-box;
     background-repeat: no-repeat;
-    background-position: right 0 bottom 6px;
+    background-position: right 0 bottom 0 !important;
     border: 1px solid $input-border;
     border-radius: $border-radius-default;
+    line-height: 16px;
     transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 
     &:focus {
@@ -156,11 +159,16 @@
     &.select2-active {
       background-color: $white-light;
       background-image: image-url('select2-spinner.gif') !important;
+      background-origin: content-box;
       background-repeat: no-repeat;
-      background-position: right 5px center !important;
+      background-position: right 6px center !important;
       background-size: 16px 16px !important;
     }
   }
+
+  + .select2-results {
+    padding-top: 0;
+  }
 }
 
 .select2-results {

app/assets/stylesheets/framework/sidebar.scss

@@ -43,11 +43,13 @@
   }
 
   .sidebar-collapsed-icon {
-    cursor: pointer;
-
     .btn {
       background-color: $gray-light;
     }
+
+    &:not(.disabled) {
+      cursor: pointer;
+    }
   }
 }
 
@@ -55,6 +57,10 @@
   padding-right: 0;
   z-index: 300;
 
+  .btn-sidebar-action {
+    display: inline-flex;
+  }
+
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
@@ -136,3 +142,18 @@
 .issuable-sidebar {
   @include new-style-dropdown;
 }
+
+.pikaday-container {
+  .pika-single {
+    margin-top: 2px;
+    width: 250px;
+  }
+
+  .dropdown-menu-toggle {
+    line-height: 20px;
+  }
+}
+
+.sidebar-collapsed-icon .sidebar-collapsed-value {
+  font-size: 12px;
+}

app/assets/stylesheets/framework/tw_bootstrap.scss

@@ -195,33 +195,6 @@ summary {
   }
 }
 
-// Typography =================================================================
-
-.text-primary,
-.text-primary:hover {
-  color: $brand-primary;
-}
-
-.text-success,
-.text-success:hover {
-  color: $brand-success;
-}
-
-.text-danger,
-.text-danger:hover {
-  color: $brand-danger;
-}
-
-.text-warning,
-.text-warning:hover {
-  color: $brand-warning;
-}
-
-.text-info,
-.text-info:hover {
-  color: $brand-info;
-}
-
 // Prevent datetimes on tooltips to break into two lines
 .local-timeago {
   white-space: nowrap;

app/assets/stylesheets/pages/issuable.scss

@@ -70,14 +70,13 @@
 
   .title {
     padding: 0;
-    margin-bottom: 16px;
+    margin-bottom: $gl-padding;
     border-bottom: 0;
   }
 
   .btn-edit {
     margin-left: auto;
-    // Set height to match title height
-    height: 2em;
+    height: $gl-padding * 2;
   }
 
   // Border around images in issue and MR descriptions.
@@ -276,10 +275,15 @@
       font-weight: $gl-font-weight-normal;
     }
 
-    .no-value {
+    .no-value,
+    .btn-secondary-hover-link {
       color: $gl-text-color-secondary;
     }
 
+    .btn-secondary-hover-link:hover {
+      color: $gl-link-color;
+    }
+
     .sidebar-collapsed-icon {
       display: none;
     }
@@ -287,6 +291,8 @@
     .gutter-toggle {
       margin-top: 7px;
       border-left: 1px solid $border-gray-normal;
+      padding-left: 0;
+      text-align: center;
     }
 
     .title .gutter-toggle {
@@ -359,7 +365,7 @@
         fill: $issuable-sidebar-color;
       }
 
-      &:hover,
+      &:hover:not(.disabled),
       &:hover .todo-undone {
         color: $gl-text-color;
 
@@ -900,3 +906,21 @@
     margin: 0 3px;
   }
 }
+
+.right-sidebar-collapsed {
+  .sidebar-grouped-item {
+    .sidebar-collapsed-icon {
+      margin-bottom: 0;
+    }
+
+    .sidebar-collapsed-divider {
+      line-height: 5px;
+      font-size: 12px;
+      color: $theme-gray-700;
+
+      + .sidebar-collapsed-icon {
+        padding-top: 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/pages/issues.scss

@@ -203,7 +203,24 @@ ul.related-merge-requests > li {
 }
 
 .create-mr-dropdown-wrap {
-  @include new-style-dropdown;
+  .branch-message,
+  .ref-message {
+    display: none;
+  }
+
+  .ref::selection {
+    color: $placeholder-text-color;
+  }
+
+  .dropdown {
+    .dropdown-menu-toggle {
+      min-width: 285px;
+    }
+
+    .dropdown-select {
+      width: 285px;
+    }
+  }
 
   .btn-group:not(.hide) {
     display: flex;
@@ -214,15 +231,16 @@ ul.related-merge-requests > li {
     flex-shrink: 0;
   }
 
-  .dropdown-menu {
+  .create-merge-request-dropdown-menu {
     width: 300px;
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
     display: none;
+    margin-top: 4px;
   }
 
-  .dropdown-toggle {
+  .create-merge-request-dropdown-toggle {
     .fa-caret-down {
       pointer-events: none;
       color: inherit;
@@ -230,18 +248,50 @@ ul.related-merge-requests > li {
     }
   }
 
+  .droplab-item-ignore {
+    pointer-events: auto;
+  }
+
+  .create-item {
+    cursor: pointer;
+    margin: 0 1px;
+
+    &:hover,
+    &:focus {
+      background-color: $dropdown-item-hover-bg;
+      color: $gl-text-color;
+    }
+  }
+
+  li.divider {
+    margin: 8px 10px;
+  }
+
   li:not(.divider) {
+    padding: 8px 9px;
+
+    &:last-child {
+      padding-bottom: 8px;
+    }
+
     &.droplab-item-selected {
       .icon-container {
         i {
           visibility: visible;
         }
       }
+
+      .description {
+        display: block;
+      }
+    }
+
+    &.droplab-item-ignore {
+      padding-top: 8px;
     }
 
     .icon-container {
       float: left;
-      padding-left: 6px;
 
       i {
         visibility: hidden;
@@ -249,13 +299,12 @@ ul.related-merge-requests > li {
     }
 
     .description {
-      padding-left: 30px;
-      font-size: 13px;
+      padding-left: 22px;
+    }
 
-      strong {
-        display: block;
-        font-weight: $gl-font-weight-bold;
-      }
+    input,
+    span {
+      margin: 4px 0 0;
     }
   }
 }

app/assets/stylesheets/pages/login.scss

@@ -252,6 +252,10 @@
       background: $white-light;
     }
 
+    .login-page-broadcast {
+      margin-top: 50px;
+    }
+
     .navless-container {
       padding: 65px 15px; // height of footer + bottom padding of email confirmation link
 

app/assets/stylesheets/pages/notes.scss

@@ -543,10 +543,7 @@ ul.notes {
   }
 
   svg {
-    height: 16px;
-    width: 16px;
-    top: 0;
-    vertical-align: text-top;
+    @include btn-svg;
   }
 
   .award-control-icon-positive,
@@ -780,12 +777,6 @@ ul.notes {
     }
   }
 
-  svg {
-    fill: currentColor;
-    height: 16px;
-    width: 16px;
-  }
-
   .loading {
     margin: 0;
     height: auto;

app/assets/stylesheets/pages/projects.scss

@@ -204,14 +204,7 @@
     }
 
     svg {
-
-      path {
-        fill: $layout-link-gray;
-      }
-
-      use {
-        stroke: $layout-link-gray;
-      }
+      fill: $layout-link-gray;
     }
 
     .fa-caret-down {
@@ -315,6 +308,18 @@
       }
     }
   }
+
+  .clone-dropdown-btn {
+    background-color: $white-light;
+  }
+
+  .clone-options-dropdown {
+    min-width: 240px;
+
+    .dropdown-menu-inner-content {
+      min-width: 320px;
+    }
+  }
 }
 
 .project-repo-buttons {
@@ -799,10 +804,6 @@ pre.light-well {
     font-size: $gl-font-size;
   }
 
-  a {
-    color: $gl-text-color;
-  }
-
   .avatar-container,
   .controls {
     flex: 0 0 auto;

app/assets/stylesheets/pages/repo.scss

@@ -35,270 +35,276 @@
   }
 }
 
-.repository-view {
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  color: $almost-black;
+.multi-file {
+  display: flex;
+  height: calc(100vh - 145px);
+  border-top: 1px solid $white-dark;
+  border-bottom: 1px solid $white-dark;
+
+  &.is-collapsed {
+    .ide-file-list {
+      max-width: 250px;
+    }
+  }
+}
 
-  .code.white pre .hll {
-    background-color: $well-light-border !important;
+.ide-file-list {
+  flex: 1;
+  overflow: scroll;
+
+  .file {
+    cursor: pointer;
   }
 
-  .tree-content-holder {
-    display: -webkit-flex;
-    display: flex;
-    min-height: 300px;
+  a {
+    color: $gl-text-color;
   }
 
-  .tree-content-holder-mini {
-    height: 100vh;
+  th {
+    position: sticky;
+    top: 0;
   }
+}
 
-  .panel-right {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-    width: 80%;
-    height: 100%;
+.multi-file-table-name,
+.multi-file-table-col-commit-message {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 0;
+}
 
-    .monaco-editor.vs {
-      .current-line {
-        border: 0;
-        background: $well-light-border;
-      }
+.multi-file-table-name {
+  width: 350px;
+}
 
-      .line-numbers {
-        cursor: pointer;
+.multi-file-table-col-commit-message {
+  width: 50%;
+}
 
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
+.multi-file-edit-pane {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  border-left: 1px solid $white-dark;
+  overflow: hidden;
+}
 
-    .blob-no-preview {
-      .vertical-center {
-        justify-content: center;
-        width: 100%;
-      }
-    }
+.multi-file-tabs {
+  display: flex;
+  overflow: scroll;
+  background-color: $white-normal;
+  box-shadow: inset 0 -1px $white-dark;
 
-    &.blob-editor-container {
-      overflow: hidden;
-    }
+  > li {
+    position: relative;
+  }
+}
 
-    .blob-viewer-container {
-      -webkit-flex: 1;
-      flex: 1;
-      overflow: auto;
-
-      > div,
-      .file-content:not(.wiki) {
-        display: flex;
-      }
-
-      > div,
-      .file-content,
-      .blob-viewer,
-      .line-number,
-      .blob-content,
-      .code {
-        min-height: 100%;
-        width: 100%;
-      }
-
-      .line-numbers {
-        min-width: 44px;
-      }
-
-      .blob-content {
-        flex: 1;
-        overflow-x: auto;
-      }
-    }
+.multi-file-tab {
+  @include str-truncated(150px);
+  padding: ($gl-padding / 2) ($gl-padding + 12) ($gl-padding / 2) $gl-padding;
+  background-color: $gray-normal;
+  border-right: 1px solid $white-dark;
+  border-bottom: 1px solid $white-dark;
+  cursor: pointer;
+
+  &.active {
+    background-color: $white-light;
+    border-bottom-color: $white-light;
+  }
+}
 
-    #tabs {
-      position: relative;
-      flex-shrink: 0;
-      display: flex;
-      width: 100%;
-      padding-left: 0;
-      margin-bottom: 0;
-      white-space: nowrap;
-      overflow-y: hidden;
-      overflow-x: auto;
-
-      li {
-        position: relative;
-        background: $gray-normal;
-        padding: #{$gl-padding / 2} $gl-padding;
-        border-right: 1px solid $white-dark;
-        border-bottom: 1px solid $white-dark;
-        cursor: pointer;
-
-        &.active {
-          background: $white-light;
-          border-bottom: 0;
-        }
-
-        a {
-          @include str-truncated(100px);
-          color: $gl-text-color;
-          vertical-align: middle;
-          text-decoration: none;
-          margin-right: 12px;
-
-          &:focus {
-            outline: none;
-          }
-        }
-
-        .close-btn {
-          position: absolute;
-          right: 8px;
-          top: 50%;
-          padding: 0;
-          background: none;
-          border: 0;
-          font-size: $gl-font-size;
-          transform: translateY(-50%);
-        }
-
-        .close-icon:hover {
-          color: $hint-color;
-        }
-
-        .close-icon,
-        .unsaved-icon {
-          color: $gray-darkest;
-        }
-
-        .unsaved-icon {
-          color: $brand-success;
-        }
-
-        &.tabs-divider {
-          width: 100%;
-          background-color: $white-light;
-          border-right: 0;
-          border-top-right-radius: 2px;
-        }
-      }
-    }
+.multi-file-tab-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  padding: 0;
+  background: none;
+  border: 0;
+  font-size: $gl-font-size;
+  color: $gray-darkest;
+  transform: translateY(-50%);
+
+  &:not(.modified):hover,
+  &:not(.modified):focus {
+    color: $hint-color;
+  }
 
-    .repo-file-buttons {
-      background-color: $white-light;
-      padding: 5px 10px;
-      border-top: 1px solid $white-normal;
-    }
+  &.modified {
+    color: $indigo-700;
+  }
+}
 
-    #binary-viewer {
-      height: 80vh;
-      overflow: auto;
-      margin: 0;
-
-      .blob-viewer {
-        padding-top: 20px;
-        padding-left: 20px;
-      }
-
-      .binary-unknown {
-        text-align: center;
-        padding-top: 100px;
-        background: $gray-light;
-        height: 100%;
-        font-size: 17px;
-
-        span {
-          display: block;
-        }
-      }
-    }
+.multi-file-edit-pane-content {
+  flex: 1;
+  height: 0;
+}
+
+.multi-file-editor-btn-group {
+  padding: $grid-size;
+  border-top: 1px solid $white-dark;
+}
+
+// Not great, but this is to deal with our current output
+.multi-file-preview-holder {
+  height: 100%;
+  overflow: scroll;
+
+  .blob-viewer {
+    height: 100%;
   }
 
-  #commit-area {
-    background: $gray-light;
-    padding: 20px;
+  .file-content.code {
+    display: flex;
 
-    .help-block {
-      padding-top: 7px;
-      margin-top: 0;
+    i {
+      margin-left: -10px;
     }
   }
 
-  #view-toggler {
-    height: 41px;
-    position: relative;
-    display: block;
-    border-bottom: 1px solid $white-normal;
-    background: $white-light;
-    margin-top: -5px;
+  .line-numbers {
+    min-width: 50px;
   }
 
-  #binary-viewer {
-    img {
-      max-width: 100%;
-    }
+  .file-content,
+  .line-numbers,
+  .blob-content,
+  .code {
+    min-height: 100%;
   }
+}
 
-  #sidebar {
-    flex: 1;
-    height: 100%;
+.multi-file-commit-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 290px;
+  padding: $gl-padding;
+  background-color: $gray-light;
+  border-left: 1px solid $white-dark;
+
+  &.is-collapsed {
+    width: 60px;
+    padding: 0;
+  }
+}
 
-    &.sidebar-mini {
-      width: 20%;
-      border-right: 1px solid $white-normal;
-      overflow: auto;
-    }
+.multi-file-commit-panel-section {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
 
-    .table {
-      margin-bottom: 0;
-    }
+.multi-file-commit-panel-header {
+  display: flex;
+  align-items: center;
+  padding: 0 0 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid $white-dark;
 
-    tr {
-      .repo-file-options {
-        padding: 2px 16px;
-        width: 100%;
-      }
-
-      .title {
-        font-size: 10px;
-        text-transform: uppercase;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-      }
-
-      .file-icon {
-        margin-right: 5px;
-      }
-
-      td {
-        white-space: nowrap;
-      }
-    }
+  &.is-collapsed {
+    border-bottom: 1px solid $white-dark;
 
-    .file {
-      cursor: pointer;
+    svg {
+      margin-left: auto;
+      margin-right: auto;
     }
+  }
+}
 
-    a {
-      @include str-truncated(250px);
-      color: $almost-black;
-    }
+.multi-file-commit-panel-collapse-btn {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-left: auto;
+  font-size: 20px;
+
+  &.is-collapsed {
+    margin-right: auto;
+  }
+}
+
+.multi-file-commit-list {
+  flex: 1;
+  overflow: scroll;
+}
+
+.multi-file-commit-list-item {
+  display: flex;
+  align-items: center;
+}
+
+.multi-file-addition {
+  fill: $green-500;
+}
+
+.multi-file-modified {
+  fill: $orange-500;
+}
+
+.multi-file-commit-list-collapsed {
+  display: flex;
+  flex-direction: column;
+
+  > svg {
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
-.render-error {
-  min-height: calc(100vh - 62px);
+.multi-file-commit-list-path {
+  @include str-truncated(100%);
+}
+
+.multi-file-commit-form {
+  padding-top: 12px;
+  border-top: 1px solid $white-dark;
+}
+
+.multi-file-commit-fieldset {
+  display: flex;
+  align-items: center;
+  padding-bottom: 12px;
 
-  p {
-    width: 100%;
+  .btn {
+    flex: 1;
   }
 }
 
-.multi-file-table-col-name {
-  width: 350px;
+.multi-file-commit-message.form-control {
+  height: 80px;
+  resize: none;
+}
+
+.dirty-diff {
+  // !important need to override monaco inline style
+  width: 4px !important;
+  left: 0 !important;
+
+  &-modified {
+    background-color: $blue-500;
+  }
+
+  &-added {
+    background-color: $green-600;
+  }
+
+  &-removed {
+    height: 0 !important;
+    width: 0 !important;
+    bottom: -2px;
+    border-style: solid;
+    border-width: 5px;
+    border-color: transparent transparent transparent $red-500;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100px;
+      height: 1px;
+      background-color: rgba($red-500, .5);
+    }
+  }
 }

app/controllers/concerns/issuable_actions.rb

@@ -54,7 +54,7 @@ module IssuableActions
   end
 
   def destroy
-    issuable.destroy
+    Issuable::DestroyService.new(issuable.project, current_user).execute(issuable)
     TodoService.new.destroy_issuable(issuable, current_user)
 
     name = issuable.human_class_name

app/controllers/projects/branches_controller.rb

@@ -41,7 +41,7 @@ class Projects::BranchesController < Projects::ApplicationController
     branch_name = sanitize(strip_tags(params[:branch_name]))
     branch_name = Addressable::URI.unescape(branch_name)
 
-    redirect_to_autodeploy = project.empty_repo? && project.deployment_services.present?
+    redirect_to_autodeploy = project.empty_repo? && project.deployment_platform.present?
 
     result = CreateBranchService.new(project, current_user)
         .execute(branch_name, ref)

app/controllers/projects/commits_controller.rb

@@ -45,8 +45,7 @@ class Projects::CommitsController < Projects::ApplicationController
   private
 
   def set_commits
-    render_404 unless request.format == :atom || @repository.blob_at(@commit.id, @path) || @repository.tree(@commit.id, @path).entries.present?
-
+    render_404 unless @path.empty? || request.format == :atom || @repository.blob_at(@commit.id, @path) || @repository.tree(@commit.id, @path).entries.present?
     @limit, @offset = (params[:limit] || 40).to_i, (params[:offset] || 0).to_i
     search = params[:search]
 

app/controllers/projects/issues_controller.rb

@@ -158,7 +158,8 @@ class Projects::IssuesController < Projects::ApplicationController
   end
 
   def create_merge_request
-    result = ::MergeRequests::CreateFromIssueService.new(project, current_user, issue_iid: issue.iid).execute
+    create_params = params.slice(:branch_name, :ref).merge(issue_iid: issue.iid)
+    result = ::MergeRequests::CreateFromIssueService.new(project, current_user, create_params).execute
 
     if result[:status] == :success
       render json: MergeRequestCreateSerializer.new.represent(result[:merge_request])

app/controllers/projects/merge_requests/creations_controller.rb

@@ -65,7 +65,7 @@ class Projects::MergeRequests::CreationsController < Projects::MergeRequests::Ap
 
     if params[:ref].present?
       @ref = params[:ref]
-      @commit = @repository.commit("refs/heads/#{@ref}")
+      @commit = @repository.commit(Gitlab::Git::BRANCH_REF_PREFIX + @ref)
     end
 
     render layout: false
@@ -76,7 +76,7 @@ class Projects::MergeRequests::CreationsController < Projects::MergeRequests::Ap
 
     if params[:ref].present?
       @ref = params[:ref]
-      @commit = @target_project.commit("refs/heads/#{@ref}")
+      @commit = @target_project.commit(Gitlab::Git::BRANCH_REF_PREFIX + @ref)
     end
 
     render layout: false

app/controllers/projects/merge_requests/diffs_controller.rb

@@ -27,7 +27,7 @@ class Projects::MergeRequests::DiffsController < Projects::MergeRequests::Applic
         @merge_request.merge_request_diff
       end
 
-    @merge_request_diffs = @merge_request.merge_request_diffs.viewable.select_without_diff.order_id_desc
+    @merge_request_diffs = @merge_request.merge_request_diffs.viewable.order_id_desc
     @comparable_diffs = @merge_request_diffs.select { |diff| diff.id < @merge_request_diff.id }
 
     if params[:start_sha].present?

app/controllers/projects/pipelines_settings_controller.rb

@@ -6,11 +6,19 @@ class Projects::PipelinesSettingsController < Projects::ApplicationController
   end
 
   def update
-    if @project.update(update_params)
-      flash[:notice] = "Pipelines settings for '#{@project.name}' were successfully updated."
-      redirect_to project_settings_ci_cd_path(@project)
-    else
-      render 'show'
+    Projects::UpdateService.new(project, current_user, update_params).tap do |service|
+      if service.execute
+        flash[:notice] = "Pipelines settings for '#{@project.name}' were successfully updated."
+
+        if service.run_auto_devops_pipeline?
+          CreatePipelineWorker.perform_async(project.id, current_user.id, project.default_branch, :web, ignore_skip_ci: true, save_on_errors: false)
+          flash[:success] = "A new Auto DevOps pipeline has been created, go to <a href=\"#{project_pipelines_path(@project)}\">Pipelines page</a> for details".html_safe
+        end
+
+        redirect_to project_settings_ci_cd_path(@project)
+      else
+        render 'show'
+      end
     end
   end
 
@@ -21,6 +29,7 @@ class Projects::PipelinesSettingsController < Projects::ApplicationController
       :runners_token, :builds_enabled, :build_allow_git_fetch,
       :build_timeout_in_minutes, :build_coverage_regex, :public_builds,
       :auto_cancel_pending_pipelines, :ci_config_path,
+      :run_auto_devops_pipeline_implicit, :run_auto_devops_pipeline_explicit,
       auto_devops_attributes: [:id, :domain, :enabled]
     )
   end

app/finders/notes_finder.rb

@@ -104,8 +104,7 @@ class NotesFinder
     query = @params[:search]
     return notes unless query
 
-    pattern = "%#{query}%"
-    notes.where(Note.arel_table[:note].matches(pattern))
+    notes.search(query)
   end
 
   # Notes changed since last fetch

app/finders/runner_jobs_finder.rb

+class RunnerJobsFinder
+  attr_reader :runner, :params
+
+  def initialize(runner, params = {})
+    @runner = runner
+    @params = params
+  end
+
+  def execute
+    items = @runner.builds
+    items = by_status(items)
+    items
+  end
+
+  private
+
+  def by_status(items)
+    return items unless HasStatus::AVAILABLE_STATUSES.include?(params[:status])
+
+    items.where(status: params[:status])
+  end
+end

app/helpers/application_settings_helper.rb

@@ -30,9 +30,9 @@ module ApplicationSettingsHelper
   def enabled_project_button(project, protocol)
     case protocol
     when 'ssh'
-      ssh_clone_button(project, 'bottom', append_link: false)
+      ssh_clone_button(project, append_link: false)
     else
-      http_clone_button(project, 'bottom', append_link: false)
+      http_clone_button(project, append_link: false)
     end
   end
 
@@ -177,6 +177,9 @@ module ApplicationSettingsHelper
       :ed25519_key_restriction,
       :email_author_in_body,
       :enabled_git_access_protocol,
+      :gitaly_timeout_default,
+      :gitaly_timeout_medium,
+      :gitaly_timeout_fast,
       :gravatar_enabled,
       :hashed_storage_enabled,
       :help_page_hide_commercial_content,

app/helpers/auto_devops_helper.rb

@@ -8,9 +8,25 @@ module AutoDevopsHelper
       !project.ci_service
   end
 
+  def show_run_auto_devops_pipeline_checkbox_for_instance_setting?(project)
+    return false if project.repository.gitlab_ci_yml
+
+    if project&.auto_devops&.enabled.present?
+      !project.auto_devops.enabled && current_application_settings.auto_devops_enabled?
+    else
+      current_application_settings.auto_devops_enabled?
+    end
+  end
+
+  def show_run_auto_devops_pipeline_checkbox_for_explicit_setting?(project)
+    return false if project.repository.gitlab_ci_yml
+
+    !project.auto_devops_enabled?
+  end
+
   def auto_devops_warning_message(project)
     missing_domain = !project.auto_devops&.has_domain?
-    missing_service = !project.kubernetes_service&.active?
+    missing_service = !project.deployment_platform&.active?
 
     if missing_service
       params = {

app/helpers/button_helper.rb

@@ -56,42 +56,36 @@ module ButtonHelper
     end
   end
 
-  def http_clone_button(project, placement = 'right', append_link: true)
-    klass = 'http-selector'
-    klass << ' has-tooltip' if current_user.try(:require_extra_setup_for_git_auth?)
-
+  def http_clone_button(project, append_link: true)
     protocol = gitlab_config.protocol.upcase
+    dropdown_description = http_dropdown_description(protocol)
+    append_url = project.http_url_to_repo if append_link
+
+    dropdown_item_with_description(protocol, dropdown_description, href: append_url)
+  end
+
+  def http_dropdown_description(protocol)
+    if current_user.try(:require_password_creation_for_git?)
+      _("Set a password on your account to pull or push via %{protocol}.") % { protocol: protocol }
+    else
+      _("Create a personal access token on your account to pull or push via %{protocol}.") % { protocol: protocol }
+    end
+  end
 
-    tooltip_title =
-      if current_user.try(:require_password_creation_for_git?)
-        _("Set a password on your account to pull or push via %{protocol}.") % { protocol: protocol }
-      else
-        _("Create a personal access token on your account to pull or push via %{protocol}.") % { protocol: protocol }
-      end
+  def ssh_clone_button(project, append_link: true)
+    dropdown_description = _("You won't be able to pull or push project code via SSH until you add an SSH key to your profile") if current_user.try(:require_ssh_key?)
+    append_url = project.ssh_url_to_repo if append_link
 
-    content_tag (append_link ? :a : :span), protocol,
-      class: klass,
-      href: (project.http_url_to_repo if append_link),
-      data: {
-        html: true,
-        placement: placement,
-        container: 'body',
-        title: tooltip_title
-      }
+    dropdown_item_with_description('SSH', dropdown_description, href: append_url)
   end
 
-  def ssh_clone_button(project, placement = 'right', append_link: true)
-    klass = 'ssh-selector'
-    klass << ' has-tooltip' if current_user.try(:require_ssh_key?)
+  def dropdown_item_with_description(title, description, href: nil)
+    button_content = content_tag(:strong, title, class: 'dropdown-menu-inner-title')
+    button_content << content_tag(:span, description, class: 'dropdown-menu-inner-content') if description
 
-    content_tag (append_link ? :a : :span), 'SSH',
-      class: klass,
-      href: (project.ssh_url_to_repo if append_link),
-      data: {
-        html: true,
-        placement: placement,
-        container: 'body',
-        title: _('Add an SSH key to your profile to pull or push via SSH.')
-      }
+    content_tag (href ? :a : :span),
+      button_content,
+      class: "#{title.downcase}-selector",
+      href: (href if href)
   end
 end

app/helpers/issuables_helper.rb

@@ -212,6 +212,7 @@ module IssuablesHelper
   def issuable_initial_data(issuable)
     data = {
       endpoint: issuable_path(issuable),
+      updateEndpoint: "#{issuable_path(issuable)}.json",
       canUpdate: can?(current_user, :"update_#{issuable.to_ability_name}", issuable),
       canDestroy: can?(current_user, :"destroy_#{issuable.to_ability_name}", issuable),
       issuableRef: issuable.to_reference,

app/models/application_setting.rb

@@ -172,6 +172,27 @@ class ApplicationSetting < ActiveRecord::Base
     end
   end
 
+  validates :gitaly_timeout_default,
+            presence: true,
+            numericality: { only_integer: true, greater_than_or_equal_to: 0 }
+
+  validates :gitaly_timeout_medium,
+            presence: true,
+            numericality: { only_integer: true, greater_than_or_equal_to: 0 }
+  validates :gitaly_timeout_medium,
+            numericality: { less_than_or_equal_to: :gitaly_timeout_default },
+            if: :gitaly_timeout_default
+  validates :gitaly_timeout_medium,
+            numericality: { greater_than_or_equal_to: :gitaly_timeout_fast },
+            if: :gitaly_timeout_fast
+
+  validates :gitaly_timeout_fast,
+            presence: true,
+            numericality: { only_integer: true, greater_than_or_equal_to: 0 }
+  validates :gitaly_timeout_fast,
+            numericality: { less_than_or_equal_to: :gitaly_timeout_default },
+            if: :gitaly_timeout_default
+
   SUPPORTED_KEY_TYPES.each do |type|
     validates :"#{type}_key_restriction", presence: true, key_restriction: { type: type }
   end
@@ -308,7 +329,10 @@ class ApplicationSetting < ActiveRecord::Base
       two_factor_grace_period: 48,
       user_default_external: false,
       polling_interval_multiplier: 1,
-      usage_ping_enabled: Settings.gitlab['usage_ping_enabled']
+      usage_ping_enabled: Settings.gitlab['usage_ping_enabled'],
+      gitaly_timeout_fast: 10,
+      gitaly_timeout_medium: 30,
+      gitaly_timeout_default: 55
     }
   end
 

app/models/ci/build.rb

@@ -104,6 +104,7 @@ module Ci
       end
 
       before_transition any => [:failed] do |build|
+        next unless build.project
         next if build.retries_max.zero?
 
         if build.retries_count < build.retries_max