Merge remote-tracking branch 'upstream/master' into 25680-CI_ENVIRONMENT_URL

* upstream/master: (251 commits)
  Don't match email addresses or foo@bar as user references
  Revert "Update GITLAB_SHELL_VERSION"
  Update GITLAB_SHELL_VERSION
  Add feature toggles through Flipper
  Change no_limits to limits
  Move includes call to scope
  Add GitLab Resources to University
  Add Documentation for GIT_CHECKOUT variable
  Remove entry variable
  Do not try to preload Commits when using Note.includes(:noteable)
  Ui improvements for count badges and permission badges
  Rename the other jobs
  Update jobs_spec for changes from builds_spec
  Introduce source to pipeline entity
  Update docs related to protected actions
  Add changelog for protected branches abilities fix
  Ask for an example project for bug reports
  Center loading spinner in issuable filters
  Fix chat commands specs related to protected actions
  Fix builds controller specs related to protected actions
  ...

.codeclimate.yml

+---
+engines:
+  brakeman:
+    enabled: true
+  bundler-audit:
+    enabled: true
+  duplication:
+    enabled: true
+    config:
+      languages:
+      - ruby
+      - javascript
+  eslint:
+    enabled: true
+  fixme:
+    enabled: true
+  rubocop:
+    enabled: true
+ratings:
+  paths:
+  - Gemfile.lock
+  - "**.erb"
+  - "**.haml"
+  - "**.rb"
+  - "**.rhtml"
+  - "**.slim"
+  - "**.inc"
+  - "**.js"
+  - "**.jsx"
+  - "**.module"
+exclude_paths:
+- config/
+- db/
+- features/
+- node_modules/
+- spec/
+- vendor/
+- lib/api/v3/

.gitlab/issue_templates/Bug.md

@@ -20,6 +20,12 @@ Please remove this notice if you're confident your issue isn't a duplicate.
 
 (How one can reproduce the issue - this is very important)
 
+### Example Project
+
+(If possible, please create an example project here on GitLab.com that exhibits the problematic behaviour, and link to it here in the bug report)
+
+(If you are using an older version of GitLab, this will also determine whether the bug has been fixed in a more recent version)
+
 ### What is the current *bug* behavior?
 
 (What actually happens)

.scss-lint.yml

@@ -57,7 +57,7 @@ linters:
 
   # Reports when you define the same property twice in a single rule set.
   DuplicateProperty:
-    enabled: false
+    enabled: true
 
   # Separate rule, function, and mixin declarations with empty lines.
   EmptyLineBetweenBlocks:

Gemfile

@@ -109,7 +109,7 @@ gem 'seed-fu', '~> 2.3.5'
 
 # Markdown and HTML processing
 gem 'html-pipeline', '~> 1.11.0'
-gem 'deckar01-task_list', '1.0.6', require: 'task_list/railtie'
+gem 'deckar01-task_list', '2.0.0'
 gem 'gitlab-markup', '~> 1.5.1'
 gem 'redcarpet', '~> 3.4'
 gem 'RedCloth', '~> 4.3.2'
@@ -370,3 +370,7 @@ gem 'sys-filesystem', '~> 1.1.6'
 gem 'gitaly', '~> 0.7.0'
 
 gem 'toml-rb', '~> 0.3.15', require: false
+
+# Feature toggles
+gem 'flipper', '~> 0.10.2'
+gem 'flipper-active_record', '~> 0.10.2'

Gemfile.lock

@@ -141,10 +141,8 @@ GEM
     database_cleaner (1.5.3)
     debug_inspector (0.0.2)
     debugger-ruby_core_source (1.3.8)
-    deckar01-task_list (1.0.6)
-      activesupport (~> 4.0)
+    deckar01-task_list (2.0.0)
       html-pipeline
-      rack (~> 1.0)
     default_value_for (3.0.2)
       activerecord (>= 3.2.0, < 5.1)
     descendants_tracker (0.0.4)
@@ -208,6 +206,10 @@ GEM
       path_expander (~> 1.0)
       ruby_parser (~> 3.0)
       sexp_processor (~> 4.0)
+    flipper (0.10.2)
+    flipper-active_record (0.10.2)
+      activerecord (>= 3.2, < 6)
+      flipper (~> 0.10.2)
     flowdock (0.7.1)
       httparty (~> 0.7)
       multi_json
@@ -341,7 +343,7 @@ GEM
     grape-entity (0.6.0)
       activesupport
       multi_json (>= 1.3.2)
-    grpc (1.3.4)
+    grpc (1.2.5)
       google-protobuf (~> 3.1)
       googleauth (~> 0.5.1)
     haml (4.0.7)
@@ -499,11 +501,10 @@ GEM
       omniauth (~> 1.0)
       omniauth-oauth2 (~> 1.0)
     omniauth-google-oauth2 (0.4.1)
-      addressable (~> 2.3)
-      jwt (~> 1.0)
+      jwt (~> 1.5.2)
       multi_json (~> 1.3)
       omniauth (>= 1.1.1)
-      omniauth-oauth2 (~> 1.3.1)
+      omniauth-oauth2 (>= 1.3.1)
     omniauth-kerberos (0.3.0)
       omniauth-multipassword
       timfel-krb5-auth (~> 0.8)
@@ -896,7 +897,7 @@ DEPENDENCIES
   creole (~> 0.5.0)
   d3_rails (~> 3.5.0)
   database_cleaner (~> 1.5.0)
-  deckar01-task_list (= 1.0.6)
+  deckar01-task_list (= 2.0.0)
   default_value_for (~> 3.0.0)
   devise (~> 4.2)
   devise-two-factor (~> 3.0.0)
@@ -910,6 +911,8 @@ DEPENDENCIES
   faraday (~> 0.11.0)
   ffaker (~> 2.4)
   flay (~> 2.8.0)
+  flipper (~> 0.10.2)
+  flipper-active_record (~> 0.10.2)
   fog-aws (~> 0.9)
   fog-core (~> 1.44)
   fog-google (~> 0.5)
@@ -1060,4 +1063,4 @@ DEPENDENCIES
   wikicloth (= 0.8.1)
 
 BUNDLED WITH
-   1.14.6
+   1.15.0

app/assets/javascripts/blob/viewer/index.js

@@ -111,7 +111,7 @@ export default class BlobViewer {
 
     BlobViewer.loadViewer(newViewer)
     .then((viewer) => {
-      $(viewer).syntaxHighlight();
+      $(viewer).renderGFM();
 
       this.$fileHolder.trigger('highlight:line');
       gl.utils.handleLocationHash();

app/assets/javascripts/boards/boards_bundle.js

@@ -70,6 +70,7 @@ $(() => {
       gl.boardService = new BoardService(this.endpoint, this.bulkUpdatePath, this.boardId);
 
       this.filterManager = new FilteredSearchBoards(Store.filter, true);
+      this.filterManager.setup();
 
       // Listen for updateTokens event
       eventHub.$on('updateTokens', this.updateTokens);

app/assets/javascripts/boards/components/modal/filters.js

@@ -13,6 +13,7 @@ export default {
     FilteredSearchContainer.container = this.$el;
 
     this.filteredSearch = new FilteredSearchBoards(this.store);
+    this.filteredSearch.setup();
     this.filteredSearch.removeTokens();
     this.filteredSearch.handleInputPlaceholder();
     this.filteredSearch.toggleClearSearchButton();

app/assets/javascripts/boards/filtered_search_boards.js

@@ -2,7 +2,7 @@
 import FilteredSearchContainer from '../filtered_search/container';
 
 export default class FilteredSearchBoards extends gl.FilteredSearchManager {
-  constructor(store, updateUrl = false) {
+  constructor(store, updateUrl = false, cantEdit = []) {
     super('boards');
 
     this.store = store;
@@ -11,6 +11,8 @@ export default class FilteredSearchBoards extends gl.FilteredSearchManager {
     // Issue boards is slightly different, we handle all the requests async
     // instead or reloading the page, we just re-fire the list ajax requests
     this.isHandledAsync = true;
+
+    this.cantEdit = cantEdit;
   }
 
   updateObject(path) {
@@ -40,4 +42,8 @@ export default class FilteredSearchBoards extends gl.FilteredSearchManager {
     // Get the placeholder back if search is empty
     this.filteredSearchInput.dispatchEvent(new Event('input'));
   }
+
+  canEdit(tokenName) {
+    return this.cantEdit.indexOf(tokenName) === -1;
+  }
 }

app/assets/javascripts/dispatcher.js

@@ -118,13 +118,14 @@ import ShortcutsBlob from './shortcuts_blob';
           shortcut_handler = new ShortcutsNavigation();
           new UsersSelect();
           break;
-        case 'projects:builds:show':
+        case 'projects:jobs:show':
           new Build();
           break;
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
           if (gl.FilteredSearchManager && document.querySelector('.filtered-search')) {
-            new gl.FilteredSearchManager(page === 'projects:issues:index' ? 'issues' : 'merge_requests');
+            const filteredSearchManager = new gl.FilteredSearchManager(page === 'projects:issues:index' ? 'issues' : 'merge_requests');
+            filteredSearchManager.setup();
           }
           Issuable.init();
           new gl.IssuableBulkActions({

app/assets/javascripts/dropzone_input.js

@@ -194,6 +194,7 @@ window.DropzoneInput = (function() {
       $(child).val(beforeSelection + formattedText + afterSelection);
       textarea.setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
       textarea.style.height = `${textarea.scrollHeight}px`;
+      formTextarea.get(0).dispatchEvent(new Event('input'));
       return formTextarea.trigger('input');
     };
 

app/assets/javascripts/filtered_search/filtered_search_bundle.js

@@ -2,9 +2,9 @@ import './dropdown_hint';
 import './dropdown_non_user';
 import './dropdown_user';
 import './dropdown_utils';
+import './filtered_search_token_keys';
 import './filtered_search_dropdown_manager';
 import './filtered_search_dropdown';
 import './filtered_search_manager';
-import './filtered_search_token_keys';
 import './filtered_search_tokenizer';
 import './filtered_search_visual_tokens';

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -6,6 +6,7 @@ import eventHub from './event_hub';
 
 class FilteredSearchManager {
   constructor(page) {
+    this.page = page;
     this.container = FilteredSearchContainer.container;
     this.filteredSearchInput = this.container.querySelector('.filtered-search');
     this.filteredSearchInputForm = this.filteredSearchInput.form;
@@ -17,16 +18,18 @@ class FilteredSearchManager {
       isLocalStorageAvailable: RecentSearchesService.isAvailable(),
       allowedKeys: this.filteredSearchTokenKeys.getKeys(),
     });
-    const searchHistoryDropdownElement = document.querySelector('.js-filtered-search-history-dropdown');
-    const projectPath = searchHistoryDropdownElement ?
-      searchHistoryDropdownElement.dataset.projectFullPath : 'project';
+    this.searchHistoryDropdownElement = document.querySelector('.js-filtered-search-history-dropdown');
+    const projectPath = this.searchHistoryDropdownElement ?
+      this.searchHistoryDropdownElement.dataset.projectFullPath : 'project';
     let recentSearchesPagePrefix = 'issue-recent-searches';
-    if (page === 'merge_requests') {
+    if (this.page === 'merge_requests') {
       recentSearchesPagePrefix = 'merge-request-recent-searches';
     }
     const recentSearchesKey = `${projectPath}-${recentSearchesPagePrefix}`;
     this.recentSearchesService = new RecentSearchesService(recentSearchesKey);
+  }
 
+  setup() {
     // Fetch recent searches from localStorage
     this.fetchingRecentSearchesPromise = this.recentSearchesService.fetch()
       .catch((error) => {
@@ -47,12 +50,12 @@ class FilteredSearchManager {
 
     if (this.filteredSearchInput) {
       this.tokenizer = gl.FilteredSearchTokenizer;
-      this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', this.tokenizer, page);
+      this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', this.tokenizer, this.page);
 
       this.recentSearchesRoot = new RecentSearchesRoot(
         this.recentSearchesStore,
         this.recentSearchesService,
-        searchHistoryDropdownElement,
+        this.searchHistoryDropdownElement,
       );
       this.recentSearchesRoot.init();
 
@@ -141,7 +144,9 @@ class FilteredSearchManager {
     if (e.keyCode === 8 || e.keyCode === 46) {
       const { lastVisualToken } = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
-      if (this.filteredSearchInput.value === '' && lastVisualToken) {
+      const sanitizedTokenName = lastVisualToken && lastVisualToken.querySelector('.name').textContent.trim();
+      const canEdit = sanitizedTokenName && this.canEdit && this.canEdit(sanitizedTokenName);
+      if (this.filteredSearchInput.value === '' && lastVisualToken && canEdit) {
         this.filteredSearchInput.value = gl.FilteredSearchVisualTokens.getLastTokenPartial();
         gl.FilteredSearchVisualTokens.removeLastTokenPartial();
       }
@@ -240,8 +245,10 @@ class FilteredSearchManager {
 
   editToken(e) {
     const token = e.target.closest('.js-visual-token');
+    const sanitizedTokenName = token.querySelector('.name').textContent.trim();
+    const canEdit = this.canEdit && this.canEdit(sanitizedTokenName);
 
-    if (token) {
+    if (token && canEdit) {
       gl.FilteredSearchVisualTokens.editToken(token);
       this.tokenChange();
     }
@@ -391,7 +398,12 @@ class FilteredSearchManager {
 
       if (condition) {
         hasFilteredSearch = true;
-        gl.FilteredSearchVisualTokens.addFilterVisualToken(condition.tokenKey, condition.value);
+        const canEdit = this.canEdit && this.canEdit(condition.tokenKey);
+        gl.FilteredSearchVisualTokens.addFilterVisualToken(
+          condition.tokenKey,
+          condition.value,
+          canEdit,
+        );
       } else {
         // Sanitize value since URL converts spaces into +
         // Replace before decode so that we know what was originally + versus the encoded +
@@ -410,18 +422,27 @@ class FilteredSearchManager {
           }
 
           hasFilteredSearch = true;
-          gl.FilteredSearchVisualTokens.addFilterVisualToken(sanitizedKey, `${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`);
+          const canEdit = this.canEdit && this.canEdit(sanitizedKey);
+          gl.FilteredSearchVisualTokens.addFilterVisualToken(
+            sanitizedKey,
+            `${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`,
+            canEdit,
+          );
         } else if (!match && keyParam === 'assignee_id') {
           const id = parseInt(value, 10);
           if (usernameParams[id]) {
             hasFilteredSearch = true;
-            gl.FilteredSearchVisualTokens.addFilterVisualToken('assignee', `@${usernameParams[id]}`);
+            const tokenName = 'assignee';
+            const canEdit = this.canEdit && this.canEdit(tokenName);
+            gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, `@${usernameParams[id]}`, canEdit);
           }
         } else if (!match && keyParam === 'author_id') {
           const id = parseInt(value, 10);
           if (usernameParams[id]) {
             hasFilteredSearch = true;
-            gl.FilteredSearchVisualTokens.addFilterVisualToken('author', `@${usernameParams[id]}`);
+            const tokenName = 'author';
+            const canEdit = this.canEdit && this.canEdit(tokenName);
+            gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, `@${usernameParams[id]}`, canEdit);
           }
         } else if (!match && keyParam === 'search') {
           hasFilteredSearch = true;
@@ -516,6 +537,11 @@ class FilteredSearchManager {
     this.filteredSearchInput.dispatchEvent(new CustomEvent('input'));
     this.search();
   }
+
+  // eslint-disable-next-line class-methods-use-this
+  canEdit() {
+    return true;
+  }
 }
 
 window.gl = window.gl || {};

app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js

@@ -36,15 +36,22 @@ class FilteredSearchVisualTokens {
     }
   }
 
-  static createVisualTokenElementHTML() {
+  static createVisualTokenElementHTML(canEdit = true) {
+    let removeTokenMarkup = '';
+    if (canEdit) {
+      removeTokenMarkup = `
+        <div class="remove-token" role="button">
+          <i class="fa fa-close"></i>
+        </div>
+      `;
+    }
+
     return `
       <div class="selectable" role="button">
         <div class="name"></div>
         <div class="value-container">
           <div class="value"></div>
-          <div class="remove-token" role="button">
-            <i class="fa fa-close"></i>
-          </div>
+          ${removeTokenMarkup}
         </div>
       </div>
     `;
@@ -84,13 +91,13 @@ class FilteredSearchVisualTokens {
     }
   }
 
-  static addVisualTokenElement(name, value, isSearchTerm) {
+  static addVisualTokenElement(name, value, isSearchTerm, canEdit) {
     const li = document.createElement('li');
     li.classList.add('js-visual-token');
     li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token');
 
     if (value) {
-      li.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML();
+      li.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML(canEdit);
       FilteredSearchVisualTokens.renderVisualTokenValue(li, name, value);
     } else {
       li.innerHTML = '<div class="name"></div>';
@@ -114,20 +121,20 @@ class FilteredSearchVisualTokens {
     }
   }
 
-  static addFilterVisualToken(tokenName, tokenValue) {
+  static addFilterVisualToken(tokenName, tokenValue, canEdit) {
     const { lastVisualToken, isLastVisualTokenValid }
       = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
     const addVisualTokenElement = FilteredSearchVisualTokens.addVisualTokenElement;
 
     if (isLastVisualTokenValid) {
-      addVisualTokenElement(tokenName, tokenValue, false);
+      addVisualTokenElement(tokenName, tokenValue, false, canEdit);
     } else {
       const previousTokenName = lastVisualToken.querySelector('.name').innerText;
       const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
       tokensContainer.removeChild(lastVisualToken);
 
       const value = tokenValue || tokenName;
-      addVisualTokenElement(previousTokenName, value, false);
+      addVisualTokenElement(previousTokenName, value, false, canEdit);
     }
   }
 

app/assets/javascripts/gl_dropdown.js

@@ -468,8 +468,8 @@ GitLabDropdown = (function() {
 
     // Process the data to make sure rendered data
     // matches the correct layout
-    if (this.fullData && hasMultiSelect && this.options.processData) {
-      const inputValue = this.filterInput.val();
+    const inputValue = this.filterInput.val();
+    if (this.fullData && hasMultiSelect && this.options.processData && inputValue.length === 0) {
       this.options.processData.call(this.options, inputValue, this.filteredFullData(), this.parseData.bind(this));
     }
 
@@ -740,6 +740,12 @@ GitLabDropdown = (function() {
       $input.attr('id', this.options.inputId);
     }
 
+    if (this.options.multiSelect) {
+      Object.keys(selectedObject).forEach((attribute) => {
+        $input.attr(`data-${attribute}`, selectedObject[attribute]);
+      });
+    }
+
     if (this.options.inputMeta) {
       $input.attr('data-meta', selectedObject[this.options.inputMeta]);
     }

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

 <script>
+/* global Flash */
 import Visibility from 'visibilityjs';
 import Poll from '../../lib/utils/poll';
+import eventHub from '../event_hub';
 import Service from '../services/index';
 import Store from '../stores';
 import titleComponent from './title.vue';
 import descriptionComponent from './description.vue';
+import formComponent from './form.vue';
+import '../../lib/utils/url_utility';
 
 export default {
   props: {
@@ -12,15 +16,27 @@ export default {
       required: true,
       type: String,
     },
+    canMove: {
+      required: true,
+      type: Boolean,
+    },
     canUpdate: {
       required: true,
       type: Boolean,
     },
+    canDestroy: {
+      required: true,
+      type: Boolean,
+    },
     issuableRef: {
       type: String,
       required: true,
     },
-    initialTitle: {
+    initialTitleHtml: {
+      type: String,
+      required: true,
+    },
+    initialTitleText: {
       type: String,
       required: true,
     },
@@ -34,10 +50,40 @@ export default {
       required: false,
       default: '',
     },
+    issuableTemplates: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    isConfidential: {
+      type: Boolean,
+      required: true,
+    },
+    markdownPreviewUrl: {
+      type: String,
+      required: true,
+    },
+    markdownDocs: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    projectNamespace: {
+      type: String,
+      required: true,
+    },
+    projectsAutocompleteUrl: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     const store = new Store({
-      titleHtml: this.initialTitle,
+      titleHtml: this.initialTitleHtml,
+      titleText: this.initialTitleText,
       descriptionHtml: this.initialDescriptionHtml,
       descriptionText: this.initialDescriptionText,
     });
@@ -45,19 +91,97 @@ export default {
     return {
       store,
       state: store.state,
+      showForm: false,
     };
   },
+  computed: {
+    formState() {
+      return this.store.formState;
+    },
+  },
   components: {
     descriptionComponent,
     titleComponent,
+    formComponent,
+  },
+  methods: {
+    openForm() {
+      if (!this.showForm) {
+        this.showForm = true;
+        this.store.setFormState({
+          title: this.state.titleText,
+          confidential: this.isConfidential,
+          description: this.state.descriptionText,
+          lockedWarningVisible: false,
+          move_to_project_id: 0,
+          updateLoading: false,
+        });
+      }
+    },
+    closeForm() {
+      this.showForm = false;
+    },
+    updateIssuable() {
+      const canPostUpdate = this.store.formState.move_to_project_id !== 0 ?
+        confirm('Are you sure you want to move this issue to another project?') : true; // eslint-disable-line no-alert
+
+      if (!canPostUpdate) {
+        this.store.setFormState({
+          updateLoading: false,
+        });
+        return;
+      }
+
+      this.service.updateIssuable(this.store.formState)
+        .then(res => res.json())
+        .then((data) => {
+          if (location.pathname !== data.web_url) {
+            gl.utils.visitUrl(data.web_url);
+          } else if (data.confidential !== this.isConfidential) {
+            gl.utils.visitUrl(location.pathname);
+          }
+
+          return this.service.getData();
+        })
+        .then(res => res.json())
+        .then((data) => {
+          this.store.updateState(data);
+          eventHub.$emit('close.form');
+        })
+        .catch(() => {
+          eventHub.$emit('close.form');
+          return new Flash('Error updating issue');
+        });
+    },
+    deleteIssuable() {
+      this.service.deleteIssuable()
+        .then(res => res.json())
+        .then((data) => {
+          // Stop the poll so we don't get 404's with the issue not existing
+          this.poll.stop();
+
+          gl.utils.visitUrl(data.web_url);
+        })
+        .catch(() => {
+          eventHub.$emit('close.form');
+          return new Flash('Error deleting issue');
+        });
+    },
   },
   created() {
-    const resource = new Service(this.endpoint);
-    const poll = new Poll({
-      resource,
+    this.service = new Service(this.endpoint);
+    this.poll = new Poll({
+      resource: this.service,
       method: 'getData',
       successCallback: (res) => {
-        this.store.updateState(res.json());
+        const data = res.json();
+        const shouldUpdate = this.store.stateShouldUpdate(data);
+
+        this.store.updateState(data);
+
+        if (this.showForm && (shouldUpdate.title || shouldUpdate.description)) {
+          this.store.formState.lockedWarningVisible = true;
+        }
       },
       errorCallback(err) {
         throw new Error(err);
@@ -65,32 +189,57 @@ export default {
     });
 
     if (!Visibility.hidden()) {
-      poll.makeRequest();
+      this.poll.makeRequest();
     }
 
     Visibility.change(() => {
       if (!Visibility.hidden()) {
-        poll.restart();
+        this.poll.restart();
       } else {
-        poll.stop();
+        this.poll.stop();
       }
     });
+
+    eventHub.$on('delete.issuable', this.deleteIssuable);
+    eventHub.$on('update.issuable', this.updateIssuable);
+    eventHub.$on('close.form', this.closeForm);
+    eventHub.$on('open.form', this.openForm);
+  },
+  beforeDestroy() {
+    eventHub.$off('delete.issuable', this.deleteIssuable);
+    eventHub.$off('update.issuable', this.updateIssuable);
+    eventHub.$off('close.form', this.closeForm);
+    eventHub.$off('open.form', this.openForm);
   },
 };
 </script>
 
 <template>
   <div>
-    <title-component
-      :issuable-ref="issuableRef"
-      :title-html="state.titleHtml"
-      :title-text="state.titleText" />
-    <description-component
-      v-if="state.descriptionHtml"
-      :can-update="canUpdate"
-      :description-html="state.descriptionHtml"
-      :description-text="state.descriptionText"
-      :updated-at="state.updatedAt"
-      :task-status="state.taskStatus" />
+    <form-component
+      v-if="canUpdate && showForm"
+      :form-state="formState"
+      :can-move="canMove"
+      :can-destroy="canDestroy"
+      :issuable-templates="issuableTemplates"
+      :markdown-docs="markdownDocs"
+      :markdown-preview-url="markdownPreviewUrl"
+      :project-path="projectPath"
+      :project-namespace="projectNamespace"
+      :projects-autocomplete-url="projectsAutocompleteUrl"
+    />
+    <div v-else>
+      <title-component
+        :issuable-ref="issuableRef"
+        :title-html="state.titleHtml"
+        :title-text="state.titleText" />
+      <description-component
+        v-if="state.descriptionHtml"
+        :can-update="canUpdate"
+        :description-html="state.descriptionHtml"
+        :description-text="state.descriptionText"
+        :updated-at="state.updatedAt"
+        :task-status="state.taskStatus" />
+    </div>
   </div>
 </template>

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

@@ -18,11 +18,13 @@
       },
       updatedAt: {
         type: String,
-        required: true,
+        required: false,
+        default: '',
       },
       taskStatus: {
         type: String,
-        required: true,
+        required: false,
+        default: '',
       },
     },
     data() {
@@ -83,6 +85,7 @@
 
 <template>
   <div
+    v-if="descriptionHtml"
     class="description"
     :class="{
       'js-task-list-container': canUpdate

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

+<script>
+  import updateMixin from '../mixins/update';
+  import eventHub from '../event_hub';
+
+  export default {
+    mixins: [updateMixin],
+    props: {
+      canDestroy: {
+        type: Boolean,
+        required: true,
+      },
+      formState: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        deleteLoading: false,
+      };
+    },
+    computed: {
+      isSubmitEnabled() {
+        return this.formState.title.trim() !== '';
+      },
+    },
+    methods: {
+      closeForm() {
+        eventHub.$emit('close.form');
+      },
+      deleteIssuable() {
+        // eslint-disable-next-line no-alert
+        if (confirm('Issue will be removed! Are you sure?')) {
+          this.deleteLoading = true;
+
+          eventHub.$emit('delete.issuable');
+        }
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="prepend-top-default append-bottom-default clearfix">
+    <button
+      class="btn btn-save pull-left"
+      :class="{ disabled: formState.updateLoading || !isSubmitEnabled }"
+      type="submit"
+      :disabled="formState.updateLoading || !isSubmitEnabled"
+      @click.prevent="updateIssuable">
+      Save changes
+      <i
+        class="fa fa-spinner fa-spin"
+        aria-hidden="true"
+        v-if="formState.updateLoading">
+      </i>
+    </button>
+    <button
+      class="btn btn-default pull-right"
+      type="button"
+      @click="closeForm">
+      Cancel
+    </button>
+    <button
+      v-if="canDestroy"
+      class="btn btn-danger pull-right append-right-default"
+      :class="{ disabled: deleteLoading }"
+      type="button"
+      :disabled="deleteLoading"
+      @click="deleteIssuable">
+      Delete
+      <i
+        class="fa fa-spinner fa-spin"
+        aria-hidden="true"
+        v-if="deleteLoading">
+      </i>
+    </button>
+  </div>
+</template>

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

+<script>
+  export default {
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <fieldset class="checkbox">
+    <label for="issue-confidential">
+      <input
+        type="checkbox"
+        value="1"
+        id="issue-confidential"
+        v-model="formState.confidential" />
+      This issue is confidential and should only be visible to team members with at least Reporter access.
+    </label>
+  </fieldset>
+</template>

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

+<script>
+  /* global Flash */
+  import updateMixin from '../../mixins/update';
+  import markdownField from '../../../vue_shared/components/markdown/field.vue';
+
+  export default {
+    mixins: [updateMixin],
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+      markdownPreviewUrl: {
+        type: String,
+        required: true,
+      },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+    },
+    components: {
+      markdownField,
+    },
+    mounted() {
+      this.$refs.textarea.focus();
+    },
+  };
+</script>
+
+<template>
+  <div class="common-note-form">
+    <label
+      class="sr-only"
+      for="issue-description">
+      Description
+    </label>
+    <markdown-field
+      :markdown-preview-url="markdownPreviewUrl"
+      :markdown-docs="markdownDocs">
+      <textarea
+        id="issue-description"
+        class="note-textarea js-gfm-input js-autosize markdown-area"
+        data-supports-slash-commands="false"
+        aria-label="Description"
+        v-model="formState.description"
+        ref="textarea"
+        slot="textarea"
+        placeholder="Write a comment or drag your files here..."
+        @keydown.meta.enter="updateIssuable">
+      </textarea>
+    </markdown-field>
+  </div>
+</template>

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

+<script>
+  export default {
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+      issuableTemplates: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      projectPath: {
+        type: String,
+        required: true,
+      },
+      projectNamespace: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      issuableTemplatesJson() {
+        return JSON.stringify(this.issuableTemplates);
+      },
+    },
+    mounted() {
+      // Create the editor for the template
+      const editor = document.querySelector('.detail-page-description .note-textarea') || {};
+      editor.setValue = (val) => {
+        this.formState.description = val;
+      };
+      editor.getValue = () => this.formState.description;
+
+      this.issuableTemplate = new gl.IssuableTemplateSelectors({
+        $dropdowns: $(this.$refs.toggle),
+        editor,
+      });
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="dropdown js-issuable-selector-wrap"
+    data-issuable-type="issue">
+    <button
+      class="dropdown-menu-toggle js-issuable-selector"
+      type="button"
+      ref="toggle"
+      data-field-name="issuable_template"
+      data-selected="null"
+      data-toggle="dropdown"
+      :data-namespace-path="projectNamespace"
+      :data-project-path="projectPath"
+      :data-data="issuableTemplatesJson">
+      <span class="dropdown-toggle-text">
+        Choose a template
+      </span>
+      <i
+        aria-hidden="true"
+        class="fa fa-chevron-down">
+      </i>
+    </button>
+    <div class="dropdown-menu dropdown-select">
+      <div class="dropdown-title">
+        Choose a template
+        <button
+          class="dropdown-title-button dropdown-menu-close"
+          aria-label="Close"
+          type="button">
+          <i
+            aria-hidden="true"
+            class="fa fa-times dropdown-menu-close-icon">
+          </i>
+        </button>
+      </div>
+      <div class="dropdown-input">
+        <input
+          type="search"
+          class="dropdown-input-field"
+          placeholder="Filter"
+          autocomplete="off" />
+        <i
+          aria-hidden="true"
+          class="fa fa-search dropdown-input-search">
+        </i>
+        <i
+          role="button"
+          aria-label="Clear templates search input"
+          class="fa fa-times dropdown-input-clear js-dropdown-input-clear">
+        </i>
+      </div>
+      <div class="dropdown-content"></div>
+      <div class="dropdown-footer">
+        <ul class="dropdown-footer-list">
+          <li>
+            <a class="no-template">
+              No template
+            </a>
+          </li>
+          <li>
+            <a class="reset-template">
+              Reset template
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>

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

+<script>
+  import tooltipMixin from '../../../vue_shared/mixins/tooltip';
+
+  export default {
+    mixins: [
+      tooltipMixin,
+    ],
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+      projectsAutocompleteUrl: {
+        type: String,
+        required: true,
+      },
+    },
+    mounted() {
+      const $moveDropdown = $(this.$refs['move-dropdown']);
+
+      $moveDropdown.select2({
+        ajax: {
+          url: this.projectsAutocompleteUrl,
+          quietMillis: 125,
+          data(term, page, context) {
+            return {
+              search: term,
+              offset_id: context,
+            };
+          },
+          results(data) {
+            const more = data.length >= 50;
+            const context = data[data.length - 1] ? data[data.length - 1].id : null;
+
+            return {
+              results: data,
+              more,
+              context,
+            };
+          },
+        },
+        formatResult(project) {
+          return project.name_with_namespace;
+        },
+        formatSelection(project) {
+          return project.name_with_namespace;
+        },
+      })
+      .on('change', (e) => {
+        this.formState.move_to_project_id = parseInt(e.target.value, 10);
+      });
+    },
+    beforeDestroy() {
+      $(this.$refs['move-dropdown']).select2('destroy');
+    },
+  };
+</script>
+
+<template>
+  <fieldset>
+    <label
+      for="issuable-move"
+      class="sr-only">
+      Move
+    </label>
+    <div class="issuable-form-select-holder append-right-5">
+      <input
+        ref="move-dropdown"
+        type="hidden"
+        id="issuable-move"
+        data-placeholder="Move to a different project" />
+    </div>
+    <span
+      data-placement="auto top"
+      title="Moving an issue will copy the discussion to a different project and close it here. All participants will be notified of the new location."
+      ref="tooltip">
+      <i
+        class="fa fa-question-circle"
+        aria-hidden="true">
+      </i>
+    </span>
+  </fieldset>
+</template>

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

+<script>
+  import updateMixin from '../../mixins/update';
+
+  export default {
+    mixins: [updateMixin],
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <fieldset>
+    <label
+      class="sr-only"
+      for="issue-title">
+      Title
+    </label>
+    <input
+      id="issue-title"
+      class="form-control"
+      type="text"
+      placeholder="Issue title"
+      aria-label="Issue title"
+      v-model="formState.title"
+      @keydown.meta.enter="updateIssuable" />
+  </fieldset>
+</template>

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

+<script>
+  import lockedWarning from './locked_warning.vue';
+  import titleField from './fields/title.vue';
+  import descriptionField from './fields/description.vue';
+  import editActions from './edit_actions.vue';
+  import descriptionTemplate from './fields/description_template.vue';
+  import projectMove from './fields/project_move.vue';
+  import confidentialCheckbox from './fields/confidential_checkbox.vue';
+
+  export default {
+    props: {
+      canMove: {
+        type: Boolean,
+        required: true,
+      },
+      canDestroy: {
+        type: Boolean,
+        required: true,
+      },
+      formState: {
+        type: Object,
+        required: true,
+      },
+      issuableTemplates: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      markdownPreviewUrl: {
+        type: String,
+        required: true,
+      },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+      projectPath: {
+        type: String,
+        required: true,
+      },
+      projectNamespace: {
+        type: String,
+        required: true,
+      },
+      projectsAutocompleteUrl: {
+        type: String,
+        required: true,
+      },
+    },
+    components: {
+      lockedWarning,
+      titleField,
+      descriptionField,
+      descriptionTemplate,
+      editActions,
+      projectMove,
+      confidentialCheckbox,
+    },
+    computed: {
+      hasIssuableTemplates() {
+        return this.issuableTemplates.length;
+      },
+    },
+  };
+</script>
+
+<template>
+  <form>
+    <locked-warning v-if="formState.lockedWarningVisible" />
+    <div class="row">
+      <div
+        class="col-sm-4 col-lg-3"
+        v-if="hasIssuableTemplates">
+        <description-template
+          :form-state="formState"
+          :issuable-templates="issuableTemplates"
+          :project-path="projectPath"
+          :project-namespace="projectNamespace" />
+      </div>
+      <div
+        :class="{
+          'col-sm-8 col-lg-9': hasIssuableTemplates,
+          'col-xs-12': !hasIssuableTemplates,
+        }">
+        <title-field
+          :form-state="formState"
+          :issuable-templates="issuableTemplates" />
+      </div>
+    </div>
+    <description-field
+      :form-state="formState"
+      :markdown-preview-url="markdownPreviewUrl"
+      :markdown-docs="markdownDocs" />
+    <confidential-checkbox
+      :form-state="formState" />
+    <project-move
+      v-if="canMove"
+      :form-state="formState"
+      :projects-autocomplete-url="projectsAutocompleteUrl" />
+    <edit-actions
+      :form-state="formState"
+      :can-destroy="canDestroy" />
+  </form>
+</template>

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

+<script>
+  export default {
+    computed: {
+      currentPath() {
+        return location.pathname;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="alert alert-danger">
+    Someone edited the issue at the same time you did. Please check out
+    <a
+      :href="currentPath"
+      target="_blank"
+      rel="nofollow">the issue</a>
+    and make sure your changes will not unintentionally remove theirs.
+  </div>
+</template>

app/assets/javascripts/issue_show/event_hub.js

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

app/assets/javascripts/issue_show/index.js

 import Vue from 'vue';
+import eventHub from './event_hub';
 import issuableApp from './components/app.vue';
 import '../vue_shared/vue_resource_interceptor';
 
-document.addEventListener('DOMContentLoaded', () => new Vue({
-  el: document.getElementById('js-issuable-app'),
-  components: {
-    issuableApp,
-  },
-  data() {
-    const issuableElement = this.$options.el;
-    const issuableTitleElement = issuableElement.querySelector('.title');
-    const issuableDescriptionElement = issuableElement.querySelector('.wiki');
-    const issuableDescriptionTextarea = issuableElement.querySelector('.js-task-list-field');
-    const {
-      canUpdate,
-      endpoint,
-      issuableRef,
-    } = issuableElement.dataset;
+document.addEventListener('DOMContentLoaded', () => {
+  const initialDataEl = document.getElementById('js-issuable-app-initial-data');
+  const initialData = JSON.parse(initialDataEl.innerHTML.replace(/"/g, '"'));
 
-    return {
-      canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
-      endpoint,
-      issuableRef,
-      initialTitle: issuableTitleElement.innerHTML,
-      initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
-      initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
-    };
-  },
-  render(createElement) {
-    return createElement('issuable-app', {
-      props: {
-        canUpdate: this.canUpdate,
-        endpoint: this.endpoint,
-        issuableRef: this.issuableRef,
-        initialTitle: this.initialTitle,
-        initialDescriptionHtml: this.initialDescriptionHtml,
-        initialDescriptionText: this.initialDescriptionText,
-      },
-    });
-  },
-}));
+  $('.issuable-edit').on('click', (e) => {
+    e.preventDefault();
+
+    eventHub.$emit('open.form');
+  });
+
+  return new Vue({
+    el: document.getElementById('js-issuable-app'),
+    components: {
+      issuableApp,
+    },
+    data() {
+      return {
+        ...initialData,
+      };
+    },
+    render(createElement) {
+      return createElement('issuable-app', {
+        props: {
+          canUpdate: this.canUpdate,
+          canDestroy: this.canDestroy,
+          canMove: this.canMove,
+          endpoint: this.endpoint,
+          issuableRef: this.issuableRef,
+          initialTitleHtml: this.initialTitleHtml,
+          initialTitleText: this.initialTitleText,
+          initialDescriptionHtml: this.initialDescriptionHtml,
+          initialDescriptionText: this.initialDescriptionText,
+          issuableTemplates: this.issuableTemplates,
+          isConfidential: this.isConfidential,
+          markdownPreviewUrl: this.markdownPreviewUrl,
+          markdownDocs: this.markdownDocs,
+          projectPath: this.projectPath,
+          projectNamespace: this.projectNamespace,
+          projectsAutocompleteUrl: this.projectsAutocompleteUrl,
+        },
+      });
+    },
+  });
+});

app/assets/javascripts/issue_show/mixins/animate.js

@@ -4,7 +4,7 @@ export default {
       this.preAnimation = true;
       this.pulseAnimation = false;
 
-      this.$nextTick(() => {
+      setTimeout(() => {
         this.preAnimation = false;
         this.pulseAnimation = true;
       });

app/assets/javascripts/issue_show/mixins/update.js

+import eventHub from '../event_hub';
+
+export default {
+  methods: {
+    updateIssuable() {
+      this.formState.updateLoading = true;
+      eventHub.$emit('update.issuable');
+    },
+  },
+};

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

@@ -7,10 +7,23 @@ export default class Service {
   constructor(endpoint) {
     this.endpoint = endpoint;
 
-    this.resource = Vue.resource(this.endpoint);
+    this.resource = Vue.resource(`${this.endpoint}.json`, {}, {
+      realtimeChanges: {
+        method: 'GET',
+        url: `${this.endpoint}/realtime_changes`,
+      },
+    });
   }
 
   getData() {
-    return this.resource.get();
+    return this.resource.realtimeChanges();
+  }
+
+  deleteIssuable() {
+    return this.resource.delete();
+  }
+
+  updateIssuable(data) {
+    return this.resource.update(data);
   }
 }

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

 export default class Store {
   constructor({
     titleHtml,
+    titleText,
     descriptionHtml,
     descriptionText,
   }) {
     this.state = {
       titleHtml,
-      titleText: '',
+      titleText,
       descriptionHtml,
       descriptionText,
       taskStatus: '',
       updatedAt: '',
     };
+    this.formState = {
+      title: '',
+      confidential: false,
+      description: '',
+      lockedWarningVisible: false,
+      move_to_project_id: 0,
+      updateLoading: false,
+    };
   }
 
   updateState(data) {
@@ -22,4 +31,15 @@ export default class Store {
     this.state.taskStatus = data.task_status;
     this.state.updatedAt = data.updated_at;
   }
+
+  stateShouldUpdate(data) {
+    return {
+      title: this.state.titleText !== data.title_text,
+      description: this.state.descriptionText !== data.description_text,
+    };
+  }
+
+  setFormState(state) {
+    this.formState = Object.assign(this.formState, state);
+  }
 }

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

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, consistent-return, prefer-arrow-callback, no-return-assign, object-shorthand, comma-dangle, no-param-reassign, max-len */
 
-(function() {
-  (function(w) {
-    var notificationGranted, notifyMe, notifyPermissions;
-    notificationGranted = function(message, opts, onclick) {
-      var notification;
-      notification = new Notification(message, opts);
-      setTimeout(function() {
-        return notification.close();
-      // Hide the notification after X amount of seconds
-      }, 8000);
-      if (onclick) {
-        return notification.onclick = onclick;
-      }
-    };
-    notifyPermissions = function() {
-      if ('Notification' in window) {
-        return Notification.requestPermission();
-      }
-    };
-    notifyMe = function(message, body, icon, onclick) {
-      var opts;
-      opts = {
-        body: body,
-        icon: icon
-      };
-      // Let's check if the browser supports notifications
-      if (!('Notification' in window)) {
+function notificationGranted(message, opts, onclick) {
+  var notification;
+  notification = new Notification(message, opts);
+  setTimeout(function() {
+    // Hide the notification after X amount of seconds
+    return notification.close();
+  }, 8000);
+
+  return notification.onclick = onclick || notification.close;
+}
 
-      // do nothing
-      } else if (Notification.permission === 'granted') {
-        // If it's okay let's create a notification
+function notifyPermissions() {
+  if ('Notification' in window) {
+    return Notification.requestPermission();
+  }
+}
+
+function notifyMe(message, body, icon, onclick) {
+  var opts;
+  opts = {
+    body: body,
+    icon: icon
+  };
+  // Let's check if the browser supports notifications
+  if (!('Notification' in window)) {
+    // do nothing
+  } else if (Notification.permission === 'granted') {
+    // If it's okay let's create a notification
+    return notificationGranted(message, opts, onclick);
+  } else if (Notification.permission !== 'denied') {
+    return Notification.requestPermission(function(permission) {
+      // If the user accepts, let's create a notification
+      if (permission === 'granted') {
         return notificationGranted(message, opts, onclick);
-      } else if (Notification.permission !== 'denied') {
-        return Notification.requestPermission(function(permission) {
-          // If the user accepts, let's create a notification
-          if (permission === 'granted') {
-            return notificationGranted(message, opts, onclick);
-          }
-        });
       }
-    };
-    w.notify = notifyMe;
-    return w.notifyPermissions = notifyPermissions;
-  })(window);
-}).call(window);
+    });
+  }
+}
+
+const notify = {
+  notificationGranted,
+  notifyPermissions,
+  notifyMe,
+};
+
+export default notify;

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

@@ -42,3 +42,13 @@ export function formatRelevantDigits(number) {
 export function bytesToKiB(number) {
   return number / BYTES_IN_KIB;
 }
+
+/**
+ * Utility function that calculates MiB of the given bytes.
+ *
+ * @param  {Number} number bytes
+ * @return {Number}        MiB
+ */
+export function bytesToMiB(number) {
+  return number / (BYTES_IN_KIB * BYTES_IN_KIB);
+}

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

@@ -170,7 +170,7 @@ gl.text.init = function(form) {
   });
 };
 gl.text.removeListeners = function(form) {
-  return $('.js-md', form).off();
+  return $('.js-md', form).off('click');
 };
 gl.text.humanize = function(string) {
   return string.charAt(0).toUpperCase() + string.replace(/_/g, ' ').slice(1);

app/assets/javascripts/main.js

@@ -56,7 +56,6 @@ import './lib/utils/animate';
 import './lib/utils/bootstrap_linked_tabs';
 import './lib/utils/common_utils';
 import './lib/utils/datetime_utility';
-import './lib/utils/notify';
 import './lib/utils/pretty_time';
 import './lib/utils/text_utility';
 import './lib/utils/url_utility';

app/assets/javascripts/notebook/cells/markdown.vue

@@ -30,7 +30,7 @@
     |
     \\s\\$(?!\\$)
   )
-    (.+?)
+    ((.|\\n)+?)
   (
     \\s\\\\end{[a-zA-Z]+}$
     |
@@ -45,15 +45,25 @@
     let inline = false;
 
     if (typeof katex !== 'undefined') {
-      const katexString = text.replace(/\\/g, '\\');
-      const matches = new RegExp(katexRegexString, 'gi').exec(katexString);
+      const katexString = text.replace(/&/g, '&')
+        .replace(/&=&/g, '\\space=\\space')
+        .replace(/<(\/?)em>/g, '_');
+      const regex = new RegExp(katexRegexString, 'gi');
+      const matchLocation = katexString.search(regex);
+      const numberOfMatches = katexString.match(regex);
 
-      if (matches && matches.length > 0) {
-        if (matches[1].trim() === '$' && matches[3].trim() === '$') {
+      if (numberOfMatches && numberOfMatches.length !== 0) {
+        if (matchLocation > 0) {
+          let matches = regex.exec(katexString);
           inline = true;
 
-          text = `${katexString.replace(matches[0], '')} ${katex.renderToString(matches[2])}`;
+          while (matches !== null) {
+            const renderedKatex = katex.renderToString(matches[0].replace(/\$/g, ''));
+            text = `${text.replace(matches[0], ` ${renderedKatex}`)}`;
+            matches = regex.exec(katexString);
+          }
         } else {
+          const matches = regex.exec(katexString);
           text = katex.renderToString(matches[2]);
         }
       }
@@ -79,7 +89,7 @@
     },
     computed: {
       markdown() {
-        return marked(this.cell.source.join(''));
+        return marked(this.cell.source.join('').replace(/\\/g, '\\\\'));
       },
     },
   };

app/assets/javascripts/pipelines/components/graph/graph_component.vue

 <script>
-  /* global Flash */
-  import Visibility from 'visibilityjs';
-  import Poll from '../../../lib/utils/poll';
-  import PipelineService from '../../services/pipeline_service';
-  import PipelineStore from '../../stores/pipeline_store';
   import stageColumnComponent from './stage_column_component.vue';
   import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
   import '../../../flash';
 
   export default {
+    props: {
+      isLoading: {
+        type: Boolean,
+        required: true,
+      },
+      pipeline: {
+        type: Object,
+        required: true,
+      },
+    },
+
     components: {
       stageColumnComponent,
       loadingIcon,
     },
 
-    data() {
-      const DOMdata = document.getElementById('js-pipeline-graph-vue').dataset;
-      const store = new PipelineStore();
-
-      return {
-        isLoading: false,
-        endpoint: DOMdata.endpoint,
-        store,
-        state: store.state,
-      };
-    },
-
-    created() {
-      this.service = new PipelineService(this.endpoint);
-
-      const poll = new Poll({
-        resource: this.service,
-        method: 'getPipeline',
-        successCallback: this.successCallback,
-        errorCallback: this.errorCallback,
-      });
-
-      if (!Visibility.hidden()) {
-        this.isLoading = true;
-        poll.makeRequest();
-      }
-
-      Visibility.change(() => {
-        if (!Visibility.hidden()) {
-          poll.restart();
-        } else {
-          poll.stop();
-        }
-      });
+    computed: {
+      graph() {
+        return this.pipeline.details && this.pipeline.details.stages;
+      },
     },
 
     methods: {
-      successCallback(response) {
-        const data = response.json();
-
-        this.isLoading = false;
-        this.store.storeGraph(data.details.stages);
-      },
-
-      errorCallback() {
-        this.isLoading = false;
-        return new Flash('An error occurred while fetching the pipeline.');
-      },
-
       capitalizeStageName(name) {
         return name.charAt(0).toUpperCase() + name.slice(1);
       },
@@ -101,7 +65,7 @@
         v-if="!isLoading"
         class="stage-column-list">
         <stage-column-component
-          v-for="(stage, index) in state.graph"
+          v-for="(stage, index) in graph"
           :title="capitalizeStageName(stage.name)"
           :jobs="stage.groups"
           :key="stage.name"

app/assets/javascripts/pipelines/components/pipeline_url.js

-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-
-export default {
-  props: [
-    'pipeline',
-  ],
-  computed: {
-    user() {
-      return !!this.pipeline.user;
-    },
-  },
-  components: {
-    userAvatarLink,
-  },
-  template: `
-    <td>
-      <a
-        :href="pipeline.path"
-        class="js-pipeline-url-link">
-        <span class="pipeline-id">#{{pipeline.id}}</span>
-      </a>
-      <span>by</span>
-      <user-avatar-link
-        v-if="user"
-        class="js-pipeline-url-user"
-        :link-href="pipeline.user.web_url"
-        :img-src="pipeline.user.avatar_url"
-        :tooltip-text="pipeline.user.name"
-      />
-      <span
-        v-if="!user"
-        class="js-pipeline-url-api api">
-        API
-      </span>
-      <span
-        v-if="pipeline.flags.latest"
-        class="js-pipeline-url-lastest label label-success has-tooltip"
-        title="Latest pipeline for this branch"
-        data-original-title="Latest pipeline for this branch">
-        latest
-      </span>
-      <span
-        v-if="pipeline.flags.yaml_errors"
-        class="js-pipeline-url-yaml label label-danger has-tooltip"
-        :title="pipeline.yaml_errors"
-        :data-original-title="pipeline.yaml_errors">
-        yaml invalid
-      </span>
-      <span
-        v-if="pipeline.flags.stuck"
-        class="js-pipeline-url-stuck label label-warning">
-        stuck
-      </span>
-    </td>
-  `,
-};

app/assets/javascripts/pipelines/components/pipeline_url.vue

+<script>
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import tooltipMixin from '../../vue_shared/mixins/tooltip';
+
+export default {
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    userAvatarLink,
+  },
+  mixins: [
+    tooltipMixin,
+  ],
+  computed: {
+    user() {
+      return this.pipeline.user;
+    },
+  },
+};
+</script>
+<template>
+  <td>
+    <a
+      :href="pipeline.path"
+      class="js-pipeline-url-link">
+      <span class="pipeline-id">#{{pipeline.id}}</span>
+    </a>
+    <span>by</span>
+    <user-avatar-link
+      v-if="user"
+      class="js-pipeline-url-user"
+      :link-href="pipeline.user.web_url"
+      :img-src="pipeline.user.avatar_url"
+      :tooltip-text="pipeline.user.name"
+    />
+    <span
+      v-if="!user"
+      class="js-pipeline-url-api api">
+      API
+    </span>
+    <span
+      v-if="pipeline.flags.latest"
+      class="js-pipeline-url-lastest label label-success"
+      title="Latest pipeline for this branch"
+      ref="tooltip">
+      latest
+    </span>
+    <span
+      v-if="pipeline.flags.yaml_errors"
+      class="js-pipeline-url-yaml label label-danger"
+      :title="pipeline.yaml_errors"
+      ref="tooltip">
+      yaml invalid
+    </span>
+    <span
+      v-if="pipeline.flags.stuck"
+      class="js-pipeline-url-stuck label label-warning">
+      stuck
+    </span>
+  </td>
+</template>

app/assets/javascripts/pipelines/graph_bundle.js

-import Vue from 'vue';
-import pipelineGraph from './components/graph/graph_component.vue';
-
-document.addEventListener('DOMContentLoaded', () => new Vue({
-  el: '#js-pipeline-graph-vue',
-  components: {
-    pipelineGraph,
-  },
-  render: createElement => createElement('pipeline-graph'),
-}));

app/assets/javascripts/pipelines/pipeline_details_bundle.js

+import Vue from 'vue';
+import PipelinesMediator from './pipeline_details_mediatior';
+import pipelineGraph from './components/graph/graph_component.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const dataset = document.querySelector('.js-pipeline-details-vue').dataset;
+
+  const mediator = new PipelinesMediator({ endpoint: dataset.endpoint });
+
+  mediator.fetchPipeline();
+
+  const pipelineGraphApp = new Vue({
+    el: '#js-pipeline-graph-vue',
+    data() {
+      return {
+        mediator,
+      };
+    },
+    components: {
+      pipelineGraph,
+    },
+    render(createElement) {
+      return createElement('pipeline-graph', {
+        props: {
+          isLoading: this.mediator.state.isLoading,
+          pipeline: this.mediator.store.state.pipeline,
+        },
+      });
+    },
+  });
+
+  return pipelineGraphApp;
+});

app/assets/javascripts/pipelines/pipeline_details_mediatior.js

+/* global Flash */
+
+import Visibility from 'visibilityjs';
+import Poll from '../lib/utils/poll';
+import PipelineStore from './stores/pipeline_store';
+import PipelineService from './services/pipeline_service';
+
+export default class pipelinesMediator {
+  constructor(options = {}) {
+    this.options = options;
+    this.store = new PipelineStore();
+    this.service = new PipelineService(options.endpoint);
+
+    this.state = {};
+    this.state.isLoading = false;
+  }
+
+  fetchPipeline() {
+    this.poll = new Poll({
+      resource: this.service,
+      method: 'getPipeline',
+      successCallback: this.successCallback.bind(this),
+      errorCallback: this.errorCallback.bind(this),
+    });
+
+    if (!Visibility.hidden()) {
+      this.state.isLoading = true;
+      this.poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        this.poll.restart();
+      } else {
+        this.poll.stop();
+      }
+    });
+  }
+
+  successCallback(response) {
+    const data = response.json();
+
+    this.state.isLoading = false;
+    this.store.storePipeline(data);
+  }
+
+  errorCallback() {
+    this.state.isLoading = false;
+    return new Flash('An error occurred while fetching the pipeline.');
+  }
+}

app/assets/javascripts/pipelines/stores/pipeline_store.js

@@ -2,10 +2,10 @@ export default class PipelineStore {
   constructor() {
     this.state = {};
 
-    this.state.graph = [];
+    this.state.pipeline = {};
   }
 
-  storeGraph(graph = []) {
-    this.state.graph = graph;
+  storePipeline(pipeline = {}) {
+    this.state.pipeline = pipeline;
   }
 }

app/assets/javascripts/project_select.js

@@ -51,6 +51,9 @@ import Api from './api';
         this.groupId = $(select).data('group-id');
         this.includeGroups = $(select).data('include-groups');
         this.orderBy = $(select).data('order-by') || 'id';
+        this.withIssuesEnabled = $(select).data('with-issues-enabled');
+        this.withMergeRequestsEnabled = $(select).data('with-merge-requests-enabled');
+
         placeholder = "Search for project";
         if (this.includeGroups) {
           placeholder += " or group";
@@ -84,7 +87,11 @@ import Api from './api';
               if (_this.groupId) {
                 return Api.groupProjects(_this.groupId, query.term, projectsCallback);
               } else {
-                return Api.projects(query.term, { order_by: _this.orderBy }, projectsCallback);
+                return Api.projects(query.term, {
+                  order_by: _this.orderBy,
+                  with_issues_enabled: _this.withIssuesEnabled,
+                  with_merge_requests_enabled: _this.withMergeRequestsEnabled
+                }, projectsCallback);
               }
             };
           })(this),

app/assets/javascripts/shortcuts_issuable.js

@@ -77,7 +77,9 @@ import './shortcuts_navigation';
     ShortcutsIssuable.prototype.editIssue = function() {
       var $editBtn;
       $editBtn = $('.issuable-edit');
-      return gl.utils.visitUrl($editBtn.attr('href'));
+      // Need to click the element as on issues, editing is inline
+      // on merge request, editing is on a different page
+      $editBtn.get(0).click();
     };
 
     ShortcutsIssuable.prototype.openSidebarDropdown = function(name) {

app/assets/javascripts/task_list.js

 /* global Flash */
 
-import 'vendor/task_list';
+import 'deckar01-task_list';
 
 class TaskList {
   constructor(options = {}) {

app/assets/javascripts/users_select.js

@@ -35,6 +35,7 @@ function UsersSelect(currentUser, els) {
       options.showCurrentUser = $dropdown.data('current-user');
       options.todoFilter = $dropdown.data('todo-filter');
       options.todoStateFilter = $dropdown.data('todo-state-filter');
+      options.perPage = $dropdown.data('per-page');
       showNullUser = $dropdown.data('null-user');
       defaultNullUser = $dropdown.data('null-user-default');
       showMenuAbove = $dropdown.data('showMenuAbove');
@@ -214,7 +215,36 @@ function UsersSelect(currentUser, els) {
             glDropdown.options.processData(term, users, callback);
           }.bind(this));
         },
-        processData: function(term, users, callback) {
+        processData: function(term, data, callback) {
+          let users = data;
+
+          // Only show assigned user list when there is no search term
+          if ($dropdown.hasClass('js-multiselect') && term.length === 0) {
+            const selectedInputs = getSelectedUserInputs();
+
+            // Potential duplicate entries when dealing with issue board
+            // because issue board is also managed by vue
+            const selectedUsers = _.uniq(selectedInputs, false, a => a.value)
+              .filter((input) => {
+                const userId = parseInt(input.value, 10);
+                const inUsersArray = users.find(u => u.id === userId);
+
+                return !inUsersArray && userId !== 0;
+              })
+              .map((input) => {
+                const userId = parseInt(input.value, 10);
+                const { avatarUrl, avatar_url, name, username } = input.dataset;
+                return {
+                  avatar_url: avatarUrl || avatar_url,
+                  id: userId,
+                  name,
+                  username,
+                };
+              });
+
+            users = data.concat(selectedUsers);
+          }
+
           let anyUser;
           let index;
           let j;
@@ -645,7 +675,7 @@ UsersSelect.prototype.users = function(query, options, callback) {
     url: url,
     data: {
       search: query,
-      per_page: 20,
+      per_page: options.perPage || 20,
       active: true,
       project_id: options.projectId || null,
       group_id: options.groupId || null,

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js

 import statusCodes from '~/lib/utils/http_status';
+import { bytesToMiB } from '~/lib/utils/number_utils';
+
 import MemoryGraph from '../../vue_shared/components/memory_graph';
 import MRWidgetService from '../services/mr_widget_service';
 
@@ -9,8 +11,8 @@ export default {
   },
   data() {
     return {
-      // memoryFrom: 0,
-      // memoryTo: 0,
+      memoryFrom: 0,
+      memoryTo: 0,
       memoryMetrics: [],
       deploymentTime: 0,
       hasMetrics: false,
@@ -35,18 +37,38 @@ export default {
     shouldShowMetricsUnavailable() {
       return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
     },
+    memoryChangeType() {
+      const memoryTo = Number(this.memoryTo);
+      const memoryFrom = Number(this.memoryFrom);
+
+      if (memoryTo > memoryFrom) {
+        return 'increased';
+      } else if (memoryTo < memoryFrom) {
+        return 'decreased';
+      }
+
+      return 'unchanged';
+    },
   },
   methods: {
+    getMegabytes(bytesString) {
+      const valueInBytes = Number(bytesString).toFixed(2);
+      return (bytesToMiB(valueInBytes)).toFixed(2);
+    },
     computeGraphData(metrics, deploymentTime) {
       this.loadingMetrics = false;
-      const { memory_values } = metrics;
-      // if (memory_previous.length > 0) {
-      //   this.memoryFrom = Number(memory_previous[0].value[1]).toFixed(2);
-      // }
-      //
-      // if (memory_current.length > 0) {
-      //   this.memoryTo = Number(memory_current[0].value[1]).toFixed(2);
-      // }
+      const { memory_before, memory_after, memory_values } = metrics;
+
+      // Both `memory_before` and `memory_after` objects
+      // have peculiar structure where accessing only a specific
+      // index yeilds correct value that we can use to show memory delta.
+      if (memory_before.length > 0) {
+        this.memoryFrom = this.getMegabytes(memory_before[0].value[1]);
+      }
+
+      if (memory_after.length > 0) {
+        this.memoryTo = this.getMegabytes(memory_after[0].value[1]);
+      }
 
       if (memory_values.length > 0) {
         this.hasMetrics = true;
@@ -102,7 +124,7 @@ export default {
       <p
         v-if="shouldShowMemoryGraph"
         class="usage-info js-usage-info">
-        Deployment memory usage:
+        Memory usage <b>{{memoryChangeType}}</b> from {{memoryFrom}}MB to {{memoryTo}}MB
       </p>
       <p
         v-if="shouldShowLoadFailure"

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js

@@ -13,7 +13,7 @@ export default {
   },
   data() {
     return {
-      removeSourceBranch: true,
+      removeSourceBranch: this.mr.shouldRemoveSourceBranch,
       mergeWhenBuildSucceeds: false,
       useCommitMessageWithDescription: false,
       setToMergeWhenPipelineSucceeds: false,
@@ -69,6 +69,9 @@ export default {
         || this.isMakingRequest
         || this.mr.preventMerge);
     },
+    isRemoveSourceBranchButtonDisabled() {
+      return this.isMergeButtonDisabled || !this.mr.canRemoveSourceBranch;
+    },
     shouldShowSquashBeforeMerge() {
       const { commitsCount, enableSquashBeforeMerge } = this.mr;
       return enableSquashBeforeMerge && commitsCount > 1;
@@ -252,8 +255,9 @@ export default {
       <template v-if="isMergeAllowed()">
         <label class="spacing">
           <input
+            id="remove-source-branch-input"
             v-model="removeSourceBranch"
-            :disabled="isMergeButtonDisabled"
+            :disabled="isRemoveSourceBranchButtonDisabled"
             type="checkbox"/> Remove source branch
         </label>
 

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -41,3 +41,4 @@ export { default as getStateKey } from './stores/get_state_key';
 export { default as mrWidgetOptions } from './mr_widget_options';
 export { default as stateMaps } from './stores/state_maps';
 export { default as SquashBeforeMerge } from './components/states/mr_widget_squash_before_merge';
+export { default as notify } from '../lib/utils/notify';

app/assets/javascripts/vue_merge_request_widget/index.js

@@ -4,6 +4,8 @@ import {
 } from './dependencies';
 
 document.addEventListener('DOMContentLoaded', () => {
+  gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;
+
   const vm = new Vue(mrWidgetOptions);
 
   window.gl.mrWidget = {

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -29,6 +29,7 @@ import {
   eventHub,
   stateMaps,
   SquashBeforeMerge,
+  notify,
 } from './dependencies';
 
 export default {
@@ -77,8 +78,10 @@ export default {
       this.service.checkStatus()
         .then(res => res.json())
         .then((res) => {
+          this.handleNotification(res);
           this.mr.setData(res);
           this.setFavicon();
+
           if (cb) {
             cb.call(null, res);
           }
@@ -136,6 +139,15 @@ export default {
           new Flash('Something went wrong. Please try again.'); // eslint-disable-line
         });
     },
+    handleNotification(data) {
+      if (data.ci_status === this.mr.ciStatus) return;
+
+      const label = data.pipeline.details.status.label;
+      const title = `Pipeline ${label}`;
+      const message = `Pipeline ${label} for "${data.title}"`;
+
+      notify.notifyMe(title, message, this.mr.gitlabLogo);
+    },
     resumePolling() {
       this.pollingInterval.resume();
     },

app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -5,6 +5,8 @@ export default class MergeRequestStore {
 
   constructor(data) {
     this.sha = data.diff_head_sha;
+    this.gitlabLogo = data.gitlabLogo;
+
     this.setData(data);
   }
 
@@ -50,7 +52,7 @@ export default class MergeRequestStore {
     this.cancelAutoMergePath = data.cancel_merge_when_pipeline_succeeds_path;
     this.removeWIPPath = data.remove_wip_path;
     this.sourceBranchRemoved = !data.source_branch_exists;
-    this.shouldRemoveSourceBranch = (data.merge_params || {}).should_remove_source_branch || false;
+    this.shouldRemoveSourceBranch = data.remove_source_branch || false;
     this.onlyAllowMergeIfPipelineSucceeds = data.only_allow_merge_if_pipeline_succeeds || false;
     this.mergeWhenPipelineSucceeds = data.merge_when_pipeline_succeeds || false;
     this.mergePath = data.merge_path;

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

+<script>
+  /* global Flash */
+  import markdownHeader from './header.vue';
+  import markdownToolbar from './toolbar.vue';
+
+  export default {
+    props: {
+      markdownPreviewUrl: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        markdownPreview: '',
+        markdownPreviewLoading: false,
+        previewMarkdown: false,
+      };
+    },
+    components: {
+      markdownHeader,
+      markdownToolbar,
+    },
+    methods: {
+      toggleMarkdownPreview() {
+        this.previewMarkdown = !this.previewMarkdown;
+
+        if (!this.previewMarkdown) {
+          this.markdownPreview = '';
+        } else {
+          this.markdownPreviewLoading = true;
+          this.$http.post(
+            this.markdownPreviewUrl,
+            {
+              /*
+                Can't use `$refs` as the component is technically in the parent component
+                so we access the VNode & then get the element
+              */
+              text: this.$slots.textarea[0].elm.value,
+            },
+          )
+          .then((res) => {
+            const data = res.json();
+
+            this.markdownPreviewLoading = false;
+            this.markdownPreview = data.body;
+
+            this.$nextTick(() => {
+              $(this.$refs['markdown-preview']).renderGFM();
+            });
+          })
+          .catch(() => new Flash('Error loading markdown preview'));
+        }
+      },
+    },
+    mounted() {
+      /*
+        GLForm class handles all the toolbar buttons
+      */
+      return new gl.GLForm($(this.$refs['gl-form']), true);
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="md-area prepend-top-default append-bottom-default js-vue-markdown-field"
+    ref="gl-form">
+    <markdown-header
+      :preview-markdown="previewMarkdown"
+      @toggle-markdown="toggleMarkdownPreview" />
+    <div
+      class="md-write-holder"
+      v-show="!previewMarkdown">
+      <div class="zen-backdrop">
+        <slot name="textarea"></slot>
+        <a
+          class="zen-control zen-control-leave js-zen-leave"
+          href="#"
+          aria-label="Enter zen mode">
+          <i
+            class="fa fa-compress"
+            aria-hidden="true">
+          </i>
+        </a>
+        <markdown-toolbar
+          :markdown-docs="markdownDocs" />
+      </div>
+    </div>
+    <div
+      class="md md-preview-holder md-preview"
+      v-show="previewMarkdown">
+      <div
+        ref="markdown-preview"
+        v-html="markdownPreview">
+      </div>
+      <span v-if="markdownPreviewLoading">
+        Loading...
+      </span>
+    </div>
+  </div>
+</template>

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

+<script>
+  import tooltipMixin from '../../mixins/tooltip';
+  import toolbarButton from './toolbar_button.vue';
+
+  export default {
+    mixins: [
+      tooltipMixin,
+    ],
+    props: {
+      previewMarkdown: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    components: {
+      toolbarButton,
+    },
+    methods: {
+      toggleMarkdownPreview(e, form) {
+        if (form && !form.find('.js-vue-markdown-field').length) {
+          return;
+        } else if (e.target.blur) {
+          e.target.blur();
+        }
+
+        this.$emit('toggle-markdown');
+      },
+    },
+    mounted() {
+      $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
+      $(document).on('markdown-preview:hide.vue', this.toggleMarkdownPreview);
+    },
+    beforeDestroy() {
+      $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
+      $(document).off('markdown-preview:hide.vue', this.toggleMarkdownPreview);
+    },
+  };
+</script>
+
+<template>
+  <div class="md-header">
+    <ul class="nav-links clearfix">
+      <li :class="{ active: !previewMarkdown }">
+        <a
+          href="#md-write-holder"
+          tabindex="-1"
+          @click.prevent="toggleMarkdownPreview($event)">
+          Write
+        </a>
+      </li>
+      <li :class="{ active: previewMarkdown }">
+        <a
+          href="#md-preview-holder"
+          tabindex="-1"
+          @click.prevent="toggleMarkdownPreview($event)">
+          Preview
+        </a>
+      </li>
+      <li class="pull-right">
+        <div class="toolbar-group">
+          <toolbar-button
+            tag="**"
+            button-title="Add bold text"
+            icon="bold" />
+          <toolbar-button
+            tag="*"
+            button-title="Add italic text"
+            icon="italic" />
+          <toolbar-button
+            tag="> "
+            :prepend="true"
+            button-title="Insert a quote"
+            icon="quote-right" />
+          <toolbar-button
+            tag="`"
+            tag-block="```"
+            button-title="Insert code"
+            icon="code" />
+          <toolbar-button
+            tag="* "
+            :prepend="true"
+            button-title="Add a bullet list"
+            icon="list-ul" />
+          <toolbar-button
+            tag="1. "
+            :prepend="true"
+            button-title="Add a numbered list"
+            icon="list-ol" />
+          <toolbar-button
+            tag="* [ ] "
+            :prepend="true"
+            button-title="Add a task list"
+            icon="check-square-o" />
+        </div>
+        <div class="toolbar-group">
+          <button
+            aria-label="Go full screen"
+            class="toolbar-btn js-zen-enter"
+            data-container="body"
+            tabindex="-1"
+            title="Go full screen"
+            type="button"
+            ref="tooltip">
+            <i
+              aria-hidden="true"
+              class="fa fa-arrows-alt fa-fw">
+            </i>
+          </button>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>

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

+<script>
+  export default {
+    props: {
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="comment-toolbar clearfix">
+    <div class="toolbar-text">
+      <a
+        :href="markdownDocs"
+        target="_blank"
+        tabindex="-1">
+        Markdown is supported
+      </a>
+    </div>
+    <button
+      class="toolbar-button markdown-selector"
+      type="button"
+      tabindex="-1">
+      <i
+        class="fa fa-file-image-o toolbar-button-icon"
+        aria-hidden="true">
+      </i>
+      Attach a file
+    </button>
+  </div>
+</template>

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

+<script>
+  import tooltipMixin from '../../mixins/tooltip';
+
+  export default {
+    mixins: [
+      tooltipMixin,
+    ],
+    props: {
+      buttonTitle: {
+        type: String,
+        required: true,
+      },
+      icon: {
+        type: String,
+        required: true,
+      },
+      tag: {
+        type: String,
+        required: true,
+      },
+      tagBlock: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      prepend: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    computed: {
+      iconClass() {
+        return `fa-${this.icon}`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <button
+    type="button"
+    class="toolbar-btn js-md hidden-xs"
+    tabindex="-1"
+    ref="tooltip"
+    data-container="body"
+    :data-md-tag="tag"
+    :data-md-block="tagBlock"
+    :data-md-prepend="prepend"
+    :title="buttonTitle"
+    :aria-label="buttonTitle">
+    <i
+      aria-hidden="true"
+      class="fa fa-fw"
+      :class="iconClass">
+    </i>
+  </button>
+</template>

app/assets/javascripts/vue_shared/components/pipelines_table_row.js

@@ -4,7 +4,7 @@ import PipelinesActionsComponent from '../../pipelines/components/pipelines_acti
 import PipelinesArtifactsComponent from '../../pipelines/components/pipelines_artifacts';
 import ciBadge from './ci_badge_link.vue';
 import PipelinesStageComponent from '../../pipelines/components/stage.vue';
-import PipelinesUrlComponent from '../../pipelines/components/pipeline_url';
+import PipelinesUrlComponent from '../../pipelines/components/pipeline_url.vue';
 import PipelinesTimeagoComponent from '../../pipelines/components/time_ago';
 import CommitComponent from './commit';
 

app/assets/javascripts/vue_shared/mixins/tooltip.js

@@ -6,4 +6,8 @@ export default {
   updated() {
     $(this.$refs.tooltip).tooltip('fixTitle');
   },
+
+  beforeDestroy() {
+    $(this.$refs.tooltip).tooltip('destroy');
+  },
 };

app/assets/stylesheets/framework.scss

@@ -34,6 +34,7 @@
 @import "framework/selects.scss";
 @import "framework/sidebar.scss";
 @import "framework/tables.scss";
+@import "framework/notes.scss";
 @import "framework/timeline.scss";
 @import "framework/typography.scss";
 @import "framework/zen.scss";

app/assets/stylesheets/framework/blocks.scss

@@ -23,7 +23,6 @@
 
 .row-content-block {
   margin-top: 0;
-  margin-bottom: -$gl-padding;
   background-color: $gray-light;
   padding: $gl-padding;
   margin-bottom: 0;

app/assets/stylesheets/framework/emojis.scss

 gl-emoji {
-  display: inline-block;
   display: inline-flex;
   vertical-align: middle;
   font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

app/assets/stylesheets/framework/filters.scss

@@ -104,6 +104,22 @@
     padding: 2px 7px;
   }
 
+  .name {
+    background-color: $filter-name-resting-color;
+    color: $filter-name-text-color;
+    border-radius: 2px 0 0 2px;
+    margin-right: 1px;
+    text-transform: capitalize;
+  }
+
+  .value-container {
+    background-color: $white-normal;
+    color: $filter-value-text-color;
+    border-radius: 0 2px 2px 0;
+    margin-right: 5px;
+    padding-right: 8px;
+  }
+
   .value {
     padding-right: 0;
   }
@@ -111,7 +127,7 @@
   .remove-token {
     display: inline-block;
     padding-left: 4px;
-    padding-right: 8px;
+    padding-right: 0;
 
     .fa-close {
       color: $gl-text-color-secondary;
@@ -132,21 +148,6 @@
     }
   }
 
-  .name {
-    background-color: $filter-name-resting-color;
-    color: $filter-name-text-color;
-    border-radius: 2px 0 0 2px;
-    margin-right: 1px;
-    text-transform: capitalize;
-  }
-
-  .value-container {
-    background-color: $white-normal;
-    color: $filter-value-text-color;
-    border-radius: 0 2px 2px 0;
-    margin-right: 5px;
-  }
-
   .selected {
     .name {
       background-color: $filter-name-selected-color;
@@ -474,4 +475,5 @@
 
 .filter-dropdown-loading {
   padding: 8px 16px;
+  text-align: center;
 }

app/assets/stylesheets/framework/lists.scss

@@ -11,7 +11,6 @@
   > li {
     padding: 10px 15px;
     min-height: 20px;
-    border-bottom: 1px solid $list-border-light;
     border-bottom: 1px solid $list-border;
 
     &::after {

app/assets/stylesheets/framework/notes.scss

+@mixin notes-media($condition, $breakpoint-width) {
+  @media (#{$condition}-width: ($breakpoint-width)) {
+    @content;
+  }
+
+  // Diff is side by side
+  .notes_content.parallel & {
+    // We hide at double what we normally hide at because
+    // there are two columns of notes
+    @media (#{$condition}-width: (2 * $breakpoint-width)) {
+      @content;
+    }
+  }
+}

app/assets/stylesheets/framework/selects.scss

@@ -96,7 +96,6 @@
 
     .select2-search-field input {
       padding: 5px $gl-padding / 2;
-      font-size: 13px;
       height: auto;
       font-family: inherit;
       font-size: inherit;

app/assets/stylesheets/framework/timeline.scss

@@ -3,6 +3,12 @@
   margin: 0;
   padding: 0;
 
+  &::before {
+    @include notes-media('max', $screen-xs-max) {
+      background: none;
+    }
+  }
+
   .system-note {
     .note-text {
       color: $gl-text-color !important;
@@ -23,6 +29,16 @@
 
   .timeline-entry-inner {
     position: relative;
+
+    @include notes-media('max', $screen-xs-max) {
+      .timeline-icon {
+        display: none;
+      }
+
+      .timeline-content {
+        margin-left: 0;
+      }
+    }
   }
 
   &:target,
@@ -40,24 +56,6 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
-  .timeline {
-    &::before {
-      background: none;
-    }
-  }
-
-  .timeline-entry .timeline-entry-inner {
-    .timeline-icon {
-      display: none;
-    }
-
-    .timeline-content {
-      margin-left: 0;
-    }
-  }
-}
-
 .discussion .timeline-entry {
   margin: 0;
   border-right: none;

app/assets/stylesheets/framework/variables.scss

@@ -293,7 +293,7 @@ $btn-white-active: #848484;
 /*
 * Badges
 */
-$badge-bg: #eee;
+$badge-bg: rgba(0, 0, 0, 0.07);
 $badge-color: $gl-text-color-secondary;
 
 /*

app/assets/stylesheets/pages/boards.scss

@@ -72,7 +72,9 @@
 
   @media (min-width: $screen-sm-min) {
     height: 475px; // Needed for PhantomJS
+    // scss-lint:disable DuplicateProperty
     height: calc(100vh - 222px);
+    // scss-lint:enable DuplicateProperty
     min-height: 475px;
     transition: width .2s;
 

app/assets/stylesheets/pages/builds.scss

@@ -29,129 +29,140 @@
   }
 }
 
-.build-page {
-  pre.trace {
-    background: $builds-trace-bg;
-    color: $white-light;
-    font-family: $monospace_font;
-    white-space: pre-wrap;
-    overflow: auto;
-    overflow-y: hidden;
-    font-size: 12px;
-
-    .fa-spinner {
-      font-size: 24px;
-      margin-left: 20px;
-    }
-  }
-
-  .environment-information {
-    background-color: $gray-light;
-    border: 1px solid $border-color;
-    padding: 12px $gl-padding;
-    border-radius: $border-radius-default;
+@keyframes blinking-scroll-button {
+  0% { opacity: 0.2; }
+  25% { opacity: 0.5; }
+  50% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
 
-    svg {
-      position: relative;
-      top: 1px;
-      margin-right: 5px;
-    }
+.build-page {
+  .sticky {
+    position: absolute;
+    left: 0;
+    right: 0;
   }
 
-  .truncated-info {
-    text-align: center;
-    border-bottom: 1px solid;
-    background-color: $black;
-    height: 45px;
-    padding: 15px;
+  .build-trace-container {
+    position: absolute;
+    top: 225px;
+    left: 15px;
+    bottom: 10px;
+    background: $black;
+    color: $gray-darkest;
+    font-family: $monospace_font;
+    font-size: 12px;
 
-    &.affix {
-      top: 0;
+    &.sidebar-expanded {
+      right: 305px;
     }
 
-    // with sidebar
-    &.affix.sidebar-expanded {
-      right: 312px;
-      left: 22px;
+    &.sidebar-collapsed {
+      right: 16px;
     }
 
-    // without sidebar
-    &.affix.sidebar-collapsed {
-      right: 20px;
-      left: 20px;
+    code {
+      background: $black;
+      color: $gray-darkest;
     }
 
-    &.affix-top {
-      position: absolute;
+    .top-bar {
       top: 0;
-      margin: 0 auto;
-      right: 5px;
-      left: 5px;
-    }
+      height: 35px;
+      display: flex;
+      justify-content: flex-end;
+      border-bottom: 1px outset $white-light;
 
-    .truncated-info-size {
-      margin: 0 5px;
-    }
+      .truncated-info {
+        margin: 0 auto;
+        align-self: center;
 
-    .raw-link {
-      color: inherit;
-      margin-left: 5px;
-      text-decoration: underline;
+        .truncated-info-size {
+          margin: 0 5px;
+        }
+
+        .raw-link {
+          color: inherit;
+          margin-left: 5px;
+          text-decoration: underline;
+        }
+      }
     }
-  }
-}
 
-.scroll-controls {
-  height: 100%;
+    .controllers {
+      display: flex;
+      align-self: center;
+      font-size: 15px;
 
-  .scroll-step {
-    width: 31px;
-    margin: 0 0 0 auto;
-  }
+      svg {
+        height: 15px;
+        display: block;
+        fill: $white-light;
+      }
 
-  .scroll-link,
-  .autoscroll-container {
-    right: 25px;
-    z-index: 1;
-  }
+      a,
+      .btn-scroll {
+        margin: 0 8px;
+        color: $white-light;
+      }
 
-  .scroll-link {
-    position: fixed;
-    display: block;
-    margin-bottom: 10px;
+      .btn-scroll.animate {
+        .first-triangle {
+          animation: blinking-scroll-button 1s ease infinite;
+          animation-delay: .3s;
+        }
 
-    &.scroll-top .gitlab-icon-scroll-up-hover,
-    &.scroll-top:hover .gitlab-icon-scroll-up,
-    &.scroll-bottom .gitlab-icon-scroll-down-hover,
-    &.scroll-bottom:hover .gitlab-icon-scroll-down {
-      display: none;
-    }
+        .second-triangle {
+          animation: blinking-scroll-button 1s ease infinite;
+          animation-delay: .2s;
+        }
 
-    &.scroll-top:hover .gitlab-icon-scroll-up-hover,
-    &.scroll-bottom:hover .gitlab-icon-scroll-down-hover {
-      display: inline-block;
-    }
+        .third-triangle {
+          animation: blinking-scroll-button 1s ease infinite;
+        }
 
-    &.scroll-top {
-      top: 10px;
-    }
+        &:disabled {
+          opacity: 1;
+        }
+      }
 
-    &.scroll-bottom {
-      bottom: -2px;
+      .btn-scroll:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+      }
     }
   }
 
-  .autoscroll-container {
-    position: absolute;
+  .bash {
+    top: 35px;
+    left: 10px;
+    bottom: 0;
+    overflow-y: hidden;
+    padding-bottom: 20px;
+    padding-right: 20px;
   }
 
-  &.sidebar-expanded {
+  .environment-information {
+    background-color: $gray-light;
+    border: 1px solid $border-color;
+    padding: 12px $gl-padding;
+    border-radius: $border-radius-default;
 
-    .scroll-link,
-    .autoscroll-container {
-      right: ($gutter_width + ($gl-padding * 2));
+    svg {
+      position: relative;
+      top: 1px;
+      margin-right: 5px;
     }
   }
+
+  .build-loader-animation {
+    position: relative;
+    width: 6px;
+    height: 6px;
+    margin: auto auto 12px 2px;
+    border-radius: 50%;
+    animation: blinking-dots 1s linear infinite;
+  }
 }
 
 .status-message {
@@ -223,32 +234,6 @@
   }
 }
 
-.build-trace {
-  background: $black;
-  color: $gray-darkest;
-  white-space: pre;
-  overflow-x: auto;
-  font-size: 12px;
-  position: relative;
-
-  .fa-spinner {
-    font-size: 24px;
-  }
-
-  .bash {
-    display: block;
-  }
-
-  .build-loader-animation {
-    position: relative;
-    width: 6px;
-    height: 6px;
-    margin: auto auto 12px 2px;
-    border-radius: 50%;
-    animation: blinking-dots 1s linear infinite;
-  }
-}
-
 .right-sidebar.build-sidebar {
   padding: $gl-padding 0;
 
@@ -390,6 +375,10 @@
   .container-fluid.container-limited {
     max-width: 100%;
   }
+
+  .content-wrapper {
+    padding-bottom: 6px;
+  }
 }
 
 .build-detail-row {

app/assets/stylesheets/pages/ci_projects.scss

@@ -36,7 +36,6 @@
     pre.commit-message {
       background: none;
       padding: 0;
-      margin: 0;
       border: none;
       margin: 20px 0;
       border-radius: 0;

app/assets/stylesheets/pages/diff.scss

@@ -94,7 +94,6 @@
     .old_line,
     .new_line {
       margin: 0;
-      padding: 0;
       border: none;
       padding: 0 5px;
       border-right: 1px solid;

app/assets/stylesheets/pages/environments.scss

@@ -64,6 +64,10 @@
       }
     }
 
+    .btn .text-center {
+      display: inline;
+    }
+
     .commit-title {
       margin: 0;
     }

app/assets/stylesheets/pages/issues.scss

@@ -204,7 +204,6 @@ ul.related-merge-requests > li {
   .dropdown-toggle {
     .fa-caret-down {
       pointer-events: none;
-      margin-left: 0;
       color: inherit;
       margin-left: 0;
     }

app/assets/stylesheets/pages/merge_requests.scss

@@ -520,17 +520,13 @@
       position: absolute;
       border-top: 2px solid $border-color;
       height: 1px;
-      top: 8px;
+      top: 9px;
       width: 8px;
       left: 0;
     }
 
     &:last-child {
       margin-bottom: 0;
-
-      &::before {
-        top: 14px;
-      }
     }
   }
 
@@ -539,7 +535,7 @@
     width: 2px;
     background: $border-color;
     position: absolute;
-    top: -5px;
+    top: -9px;
   }
 }
 

app/assets/stylesheets/pages/notes.scss

@@ -18,7 +18,7 @@ ul.notes {
     margin-left: 55px;
 
     &.timeline-content-form {
-      @media (max-width: $screen-sm-max) {
+      @include notes-media('max', $screen-sm-max) {
         margin-left: 0;
       }
     }
@@ -120,7 +120,7 @@ ul.notes {
 
     .note-header {
 
-      @media (max-width: $screen-xs-min) {
+      @include notes-media('max', $screen-xs-min) {
         .inline {
           display: block;
         }
@@ -152,7 +152,7 @@ ul.notes {
     padding-left: 0;
     clear: both;
 
-    @media (min-width: $screen-sm-min) {
+    @include notes-media('min', $screen-sm-min) {
       margin-left: 65px;
     }
 
@@ -200,7 +200,7 @@ ul.notes {
     }
 
     .timeline-content {
-      @media (min-width: $screen-sm-min) {
+      @include notes-media('min', $screen-sm-min) {
         margin-left: 30px;
       }
     }
@@ -370,7 +370,7 @@ ul.notes {
   display: flex;
   justify-content: space-between;
 
-  @media (max-width: $screen-xs-max) {
+  @include notes-media('max', $screen-xs-max) {
     flex-flow: row wrap;
   }
 }
@@ -385,7 +385,7 @@ ul.notes {
 }
 
 .note-header-author-name {
-  @media (max-width: $screen-xs-max) {
+  @include notes-media('max', $screen-xs-max) {
     display: none;
   }
 }
@@ -393,7 +393,7 @@ ul.notes {
 .note-headline-light {
   display: inline;
 
-  @media (max-width: $screen-xs-min) {
+  @include notes-media('max', $screen-xs-min) {
     display: block;
   }
 }
@@ -435,7 +435,7 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
 
-  @media (max-width: $screen-xs-max) {
+  @include notes-media('max', $screen-xs-max) {
     float: none;
     margin-left: 0;
   }
@@ -446,7 +446,7 @@ ul.notes {
 }
 
 .discussion-actions {
-  @media (max-width: $screen-md-max) {
+  @include notes-media('max', $screen-md-max) {
     float: none;
     margin-left: 0;
 
@@ -460,7 +460,7 @@ ul.notes {
   display: inline;
   line-height: 20px;
 
-  @media (min-width: $screen-sm-min) {
+  @include notes-media('min', $screen-sm-min) {
     margin-left: 10px;
     line-height: 24px;
   }
@@ -550,13 +550,13 @@ ul.notes {
   position: relative;
   top: -2px;
   display: inline-block;
-  padding-left: 4px;
-  padding-right: 4px;
+  padding-left: 7px;
+  padding-right: 7px;
   color: $notes-role-color;
   font-size: 12px;
   line-height: 20px;
   border: 1px solid $border-color;
-  border-radius: $border-radius-base;
+  border-radius: $label-border-radius;
 }
 
 
@@ -629,7 +629,7 @@ ul.notes {
 }
 
 .line-resolve-all-container {
-  @media (min-width: $screen-sm-min) {
+  @include notes-media('min', $screen-sm-min) {
     margin-right: 0;
     padding-left: $gl-padding;
   }
@@ -744,10 +744,6 @@ ul.notes {
 
 // Merge request notes in diffs
 .diff-file {
-  // Diff is side by side
-  .notes_content.parallel .note-header .note-header-author-name {
-    display: block;
-  }
   // Diff is inline
   .notes_content .note-header .note-headline-light {
     display: inline-block;

app/assets/stylesheets/pages/pipelines.scss

@@ -88,6 +88,10 @@
         }
       }
 
+      .btn .text-center {
+        display: inline;
+      }
+
       .tooltip {
         white-space: nowrap;
       }

app/assets/stylesheets/pages/projects.scss

@@ -247,7 +247,6 @@
       font-size: 13px;
       font-weight: 600;
       line-height: 13px;
-      padding: $gl-vert-padding $gl-padding;
       letter-spacing: .4px;
       padding: 6px 14px;
       text-align: center;

app/controllers/admin/builds_controller.rb → app/controllers/admin/jobs_controller.rb

-class Admin::BuildsController < Admin::ApplicationController
+class Admin::JobsController < Admin::ApplicationController
   def index
     @scope = params[:scope]
     @all_builds = Ci::Build
@@ -20,6 +20,6 @@ class Admin::BuildsController < Admin::ApplicationController
   def cancel_all
     Ci::Build.running_or_pending.each(&:cancel)
 
-    redirect_to admin_builds_path
+    redirect_to admin_jobs_path
   end
 end

app/controllers/autocomplete_controller.rb

@@ -9,7 +9,7 @@ class AutocompleteController < ApplicationController
     @users = @users.where.not(id: params[:skip_users]) if params[:skip_users].present?
     @users = @users.active
     @users = @users.reorder(:name)
-    @users = @users.page(params[:page])
+    @users = @users.page(params[:page]).per(params[:per_page])
 
     if params[:todo_filter].present? && current_user
       @users = @users.todo_authors(current_user.id, params[:todo_state_filter])

app/controllers/concerns/issuable_actions.rb

@@ -14,7 +14,16 @@ module IssuableActions
 
     name = issuable.human_class_name
     flash[:notice] = "The #{name} was successfully deleted."
-    redirect_to polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable.class])
+    index_path = polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable.class])
+
+    respond_to do |format|
+      format.html { redirect_to index_path }
+      format.json do
+        render json: {
+          web_url: index_path
+        }
+      end
+    end
   end
 
   def bulk_update

app/controllers/concerns/renders_blob.rb

@@ -18,7 +18,7 @@ module RendersBlob
     }
   end
 
-  def override_max_blob_size(blob)
-    blob.override_max_size! if params[:override_max_size] == 'true'
+  def conditionally_expand_blob(blob)
+    blob.expand! if params[:expanded] == 'true'
   end
 end

app/controllers/dashboard_controller.rb

@@ -24,7 +24,7 @@ class DashboardController < Dashboard::ApplicationController
   def load_events
     projects =
       if params[:filter] == "starred"
-        current_user.viewable_starred_projects
+        ProjectsFinder.new(current_user: current_user, params: { starred: true }).execute
       else
         current_user.authorized_projects
       end

app/controllers/groups_controller.rb

@@ -64,6 +64,8 @@ class GroupsController < Groups::ApplicationController
   end
 
   def subgroups
+    return not_found unless Group.supports_nested_groups?
+
     @nested_groups = GroupsFinder.new(current_user, parent: group).execute
     @nested_groups = @nested_groups.search(params[:filter_groups]) if params[:filter_groups].present?
   end

app/controllers/projects/artifacts_controller.rb

@@ -27,7 +27,7 @@ class Projects::ArtifactsController < Projects::ApplicationController
 
   def file
     blob = @entry.blob
-    override_max_blob_size(blob)
+    conditionally_expand_blob(blob)
 
     respond_to do |format|
       format.html do
@@ -46,7 +46,7 @@ class Projects::ArtifactsController < Projects::ApplicationController
 
   def keep
     build.keep_artifacts!
-    redirect_to namespace_project_build_path(project.namespace, project, build)
+    redirect_to namespace_project_job_path(project.namespace, project, build)
   end
 
   def latest_succeeded
@@ -79,7 +79,7 @@ class Projects::ArtifactsController < Projects::ApplicationController
   end
 
   def build_from_id
-    project.builds.find_by(id: params[:build_id]) if params[:build_id]
+    project.builds.find_by(id: params[:job_id]) if params[:job_id]
   end
 
   def build_from_ref

app/controllers/projects/blob_controller.rb

@@ -35,7 +35,7 @@ class Projects::BlobController < Projects::ApplicationController
   end
 
   def show
-    override_max_blob_size(@blob)
+    conditionally_expand_blob(@blob)
 
     respond_to do |format|
       format.html do

app/controllers/projects/build_artifacts_controller.rb

+class Projects::BuildArtifactsController < Projects::ApplicationController
+  include ExtractsPath
+  include RendersBlob
+
+  before_action :authorize_read_build!
+  before_action :extract_ref_name_and_path
+  before_action :validate_artifacts!
+
+  def download
+    redirect_to download_namespace_project_job_artifacts_path(project.namespace, project, job)
+  end
+
+  def browse
+    redirect_to browse_namespace_project_job_artifacts_path(project.namespace, project, job, path: params[:path])
+  end
+
+  def file
+    redirect_to file_namespace_project_job_artifacts_path(project.namespace, project, job, path: params[:path])
+  end
+
+  def raw
+    redirect_to raw_namespace_project_job_artifacts_path(project.namespace, project, job, path: params[:path])
+  end
+
+  def latest_succeeded
+    redirect_to latest_succeeded_namespace_project_artifacts_path(project.namespace, project, job, ref_name_and_path: params[:ref_name_and_path], job: params[:job])
+  end
+
+  private
+
+  def validate_artifacts!
+    render_404 unless job && job.artifacts?
+  end
+
+  def extract_ref_name_and_path
+    return unless params[:ref_name_and_path]
+
+    @ref_name, @path = extract_ref(params[:ref_name_and_path])
+  end
+
+  def job
+    @job ||= job_from_id || job_from_ref
+  end
+
+  def job_from_id
+    project.builds.find_by(id: params[:build_id]) if params[:build_id]
+  end
+
+  def job_from_ref
+    return unless @ref_name
+
+    jobs = project.latest_successful_builds_for(@ref_name)
+    jobs.find_by(name: params[:job])
+  end
+end

app/controllers/projects/builds_controller.rb

 class Projects::BuildsController < Projects::ApplicationController
-  before_action :build, except: [:index, :cancel_all]
-
-  before_action :authorize_read_build!,
-    only: [:index, :show, :status, :raw, :trace]
-  before_action :authorize_update_build!,
-    except: [:index, :show, :status, :raw, :trace, :cancel_all]
-
-  layout 'project'
+  before_action :authorize_read_build!
 
   def index
-    @scope = params[:scope]
-    @all_builds = project.builds.relevant
-    @builds = @all_builds.order('created_at DESC')
-    @builds =
-      case @scope
-      when 'pending'
-        @builds.pending.reverse_order
-      when 'running'
-        @builds.running.reverse_order
-      when 'finished'
-        @builds.finished
-      else
-        @builds
-      end
-    @builds = @builds.includes([
-      { pipeline: :project },
-      :project,
-      :tags
-    ])
-    @builds = @builds.page(params[:page]).per(30)
-  end
-
-  def cancel_all
-    return access_denied! unless can?(current_user, :update_build, project)
-
-    @project.builds.running_or_pending.each do |build|
-      build.cancel if can?(current_user, :update_build, build)
-    end
-
-    redirect_to namespace_project_builds_path(project.namespace, project)
+    redirect_to namespace_project_jobs_path(project.namespace, project)
   end
 
   def show
-    @builds = @project.pipelines.find_by_sha(@build.sha).builds.order('id DESC')
-    @builds = @builds.where("id not in (?)", @build.id)
-    @pipeline = @build.pipeline
-  end
-
-  def trace
-    build.trace.read do |stream|
-      respond_to do |format|
-        format.json do
-          result = {
-            id: @build.id, status: @build.status, complete: @build.complete?
-          }
-
-          if stream.valid?
-            stream.limit
-            state = params[:state].presence
-            trace = stream.html_with_state(state)
-            result.merge!(trace.to_h)
-          end
-
-          render json: result
-        end
-      end
-    end
-  end
-
-  def retry
-    return respond_422 unless @build.retryable?
-
-    build = Ci::Build.retry(@build, current_user)
-    redirect_to build_path(build)
-  end
-
-  def play
-    return respond_422 unless @build.playable?
-
-    build = @build.play(current_user)
-    redirect_to build_path(build)
-  end
-
-  def cancel
-    return respond_422 unless @build.cancelable?
-
-    @build.cancel
-    redirect_to build_path(@build)
-  end
-
-  def status
-    render json: BuildSerializer
-      .new(project: @project, current_user: @current_user)
-      .represent_status(@build)
-  end
-
-  def erase
-    if @build.erase(erased_by: current_user)
-      redirect_to namespace_project_build_path(project.namespace, project, @build),
-                notice: "Build has been successfully erased!"
-    else
-      respond_422
-    end
+    redirect_to namespace_project_job_path(project.namespace, project, job)
   end
 
   def raw
-    build.trace.read do |stream|
-      if stream.file?
-        send_file stream.path, type: 'text/plain; charset=utf-8', disposition: 'inline'
-      else
-        render_404
-      end
-    end
+    redirect_to raw_namespace_project_job_path(project.namespace, project, job)
   end
 
   private
 
-  def authorize_update_build!
-    return access_denied! unless can?(current_user, :update_build, build)
-  end
-
-  def build
-    @build ||= project.builds.find(params[:id])
-      .present(current_user: current_user)
-  end
-
-  def build_path(build)
-    namespace_project_build_path(build.project.namespace, build.project, build)
+  def job
+    @job ||= project.builds.find(params[:id])
   end
 end

app/controllers/projects/issues_controller.rb

@@ -148,10 +148,7 @@ class Projects::IssuesController < Projects::ApplicationController
 
       format.json do
         if @issue.valid?
-          render json: @issue.to_json(methods: [:task_status, :task_status_short],
-                                      include: { milestone: {},
-                                                 assignees: { only: [:id, :name, :username], methods: [:avatar_url] },
-                                                 labels: { methods: :text_color } })
+          render json: IssueSerializer.new.represent(@issue)
         else
           render json: { errors: @issue.errors.full_messages }, status: :unprocessable_entity
         end

app/controllers/projects/jobs_controller.rb

+class Projects::JobsController < Projects::ApplicationController
+  before_action :build, except: [:index, :cancel_all]
+
+  before_action :authorize_read_build!,
+    only: [:index, :show, :status, :raw, :trace]
+  before_action :authorize_update_build!,
+    except: [:index, :show, :status, :raw, :trace, :cancel_all]
+
+  layout 'project'
+
+  def index
+    @scope = params[:scope]
+    @all_builds = project.builds.relevant
+    @builds = @all_builds.order('created_at DESC')
+    @builds =
+      case @scope
+      when 'pending'
+        @builds.pending.reverse_order
+      when 'running'
+        @builds.running.reverse_order
+      when 'finished'
+        @builds.finished
+      else
+        @builds
+      end
+    @builds = @builds.includes([
+      { pipeline: :project },
+      :project,
+      :tags
+    ])
+    @builds = @builds.page(params[:page]).per(30)
+  end
+
+  def cancel_all
+    return access_denied! unless can?(current_user, :update_build, project)
+
+    @project.builds.running_or_pending.each do |build|
+      build.cancel if can?(current_user, :update_build, build)
+    end
+
+    redirect_to namespace_project_jobs_path(project.namespace, project)
+  end
+
+  def show
+    @builds = @project.pipelines.find_by_sha(@build.sha).builds.order('id DESC')
+    @builds = @builds.where("id not in (?)", @build.id)
+    @pipeline = @build.pipeline
+  end
+
+  def trace
+    build.trace.read do |stream|
+      respond_to do |format|
+        format.json do
+          result = {
+            id: @build.id, status: @build.status, complete: @build.complete?
+          }
+
+          if stream.valid?
+            stream.limit
+            state = params[:state].presence
+            trace = stream.html_with_state(state)
+            result.merge!(trace.to_h)
+          end
+
+          render json: result
+        end
+      end
+    end
+  end
+
+  def retry
+    return respond_422 unless @build.retryable?
+
+    build = Ci::Build.retry(@build, current_user)
+    redirect_to build_path(build)
+  end
+
+  def play
+    return respond_422 unless @build.playable?
+
+    build = @build.play(current_user)
+    redirect_to build_path(build)
+  end
+
+  def cancel
+    return respond_422 unless @build.cancelable?
+
+    @build.cancel
+    redirect_to build_path(@build)
+  end
+
+  def status
+    render json: BuildSerializer
+      .new(project: @project, current_user: @current_user)
+      .represent_status(@build)
+  end
+
+  def erase
+    if @build.erase(erased_by: current_user)
+      redirect_to namespace_project_job_path(project.namespace, project, @build),
+                notice: "Build has been successfully erased!"
+    else
+      respond_422
+    end
+  end
+
+  def raw
+    build.trace.read do |stream|
+      if stream.file?
+        send_file stream.path, type: 'text/plain; charset=utf-8', disposition: 'inline'
+      else
+        render_404
+      end
+    end
+  end
+
+  private
+
+  def authorize_update_build!
+    return access_denied! unless can?(current_user, :update_build, build)
+  end
+
+  def build
+    @build ||= project.builds.find(params[:id])
+      .present(current_user: current_user)
+  end
+
+  def build_path(build)
+    namespace_project_job_path(build.project.namespace, build.project, build)
+  end
+end

app/controllers/projects/pipelines_controller.rb

@@ -58,7 +58,7 @@ class Projects::PipelinesController < Projects::ApplicationController
   def create
     @pipeline = Ci::CreatePipelineService
       .new(project, current_user, create_params)
-      .execute(ignore_skip_ci: true, save_on_errors: false)
+      .execute(:web, ignore_skip_ci: true, save_on_errors: false)
 
     if @pipeline.persisted?
       redirect_to namespace_project_pipeline_path(project.namespace, project, @pipeline)

app/controllers/projects/snippets_controller.rb

@@ -56,7 +56,7 @@ class Projects::SnippetsController < Projects::ApplicationController
 
   def show
     blob = @snippet.blob
-    override_max_blob_size(blob)
+    conditionally_expand_blob(blob)
 
     respond_to do |format|
       format.html do

app/controllers/snippets_controller.rb

@@ -58,7 +58,7 @@ class SnippetsController < ApplicationController
 
   def show
     blob = @snippet.blob
-    override_max_blob_size(blob)
+    conditionally_expand_blob(blob)
 
     @note = Note.new(noteable: @snippet)
     @noteable = @snippet

app/finders/projects_finder.rb

@@ -7,6 +7,7 @@
 #   project_ids_relation: int[] - project ids to use
 #   params:
 #     trending: boolean
+#     owned: boolean
 #     non_public: boolean
 #     starred: boolean
 #     sort: string
@@ -28,13 +29,17 @@ class ProjectsFinder < UnionFinder
 
   def execute
     items = init_collection
-    items = by_ids(items)
+    items = items.map do |item|
+      item = by_ids(item)
+      item = by_personal(item)
+      item = by_starred(item)
+      item = by_trending(item)
+      item = by_visibilty_level(item)
+      item = by_tags(item)
+      item = by_search(item)
+      by_archived(item)
+    end
     items = union(items)
-    items = by_personal(items)
-    items = by_visibilty_level(items)
-    items = by_tags(items)
-    items = by_search(items)
-    items = by_archived(items)
     sort(items)
   end
 
@@ -43,10 +48,8 @@ class ProjectsFinder < UnionFinder
   def init_collection
     projects = []
 
-    if params[:trending].present?
-      projects << Project.trending
-    elsif params[:starred].present? && current_user
-      projects << current_user.viewable_starred_projects
+    if params[:owned].present?
+      projects << current_user.owned_projects if current_user
     else
       projects << current_user.authorized_projects if current_user
       projects << Project.unscoped.public_to_user(current_user) unless params[:non_public].present?
@@ -56,7 +59,7 @@ class ProjectsFinder < UnionFinder
   end
 
   def by_ids(items)
-    project_ids_relation ? items.map { |item| item.where(id: project_ids_relation) } : items
+    project_ids_relation ? items.where(id: project_ids_relation) : items
   end
 
   def union(items)
@@ -67,6 +70,14 @@ class ProjectsFinder < UnionFinder
     (params[:personal].present? && current_user) ? items.personal(current_user) : items
   end
 
+  def by_starred(items)
+    (params[:starred].present? && current_user) ? items.starred_by(current_user) : items
+  end
+
+  def by_trending(items)
+    params[:trending].present? ? items.trending : items
+  end
+
   def by_visibilty_level(items)
     params[:visibility_level].present? ? items.where(visibility_level: params[:visibility_level]) : items
   end

app/helpers/application_helper.rb

@@ -276,7 +276,7 @@ module ApplicationHelper
   end
 
   def show_user_callout?
-    cookies[:user_callout_dismissed] == 'true'
+    cookies[:user_callout_dismissed].nil?
   end
 
   def linkedin_url(user)

app/helpers/blob_helper.rb

@@ -120,7 +120,7 @@ module BlobHelper
 
   def blob_raw_url
     if @build && @entry
-      raw_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: @entry.path)
+      raw_namespace_project_job_artifacts_path(@project.namespace, @project, @build, path: @entry.path)
     elsif @snippet
       if @snippet.project_id
         raw_namespace_project_snippet_path(@project.namespace, @project, @snippet)
@@ -240,14 +240,10 @@ module BlobHelper
 
   def blob_render_error_reason(viewer)
     case viewer.render_error
+    when :collapsed
+      "it is larger than #{number_to_human_size(viewer.collapse_limit)}"
     when :too_large
-      max_size =
-        if viewer.can_override_max_size?
-          viewer.overridable_max_size
-        else
-          viewer.max_size
-        end
-      "it is larger than #{number_to_human_size(max_size)}"
+      "it is larger than #{number_to_human_size(viewer.size_limit)}"
     when :server_side_but_stored_externally
       case viewer.blob.external_storage
       when :lfs
@@ -264,8 +260,8 @@ module BlobHelper
     error = viewer.render_error
     options = []
 
-    if error == :too_large && viewer.can_override_max_size?
-      options << link_to('load it anyway', url_for(params.merge(viewer: viewer.type, override_max_size: true, format: nil)))
+    if error == :collapsed
+      options << link_to('load it anyway', url_for(params.merge(viewer: viewer.type, expanded: true, format: nil)))
     end
 
     # If the error is `:server_side_but_stored_externally`, the simple viewer will show the same error,

app/helpers/builds_helper.rb

@@ -2,7 +2,7 @@ module BuildsHelper
   def build_summary(build, skip: false)
     if build.has_trace?
       if skip
-        link_to "View job trace", pipeline_build_url(build.pipeline, build)
+        link_to "View job trace", pipeline_job_url(build.pipeline, build)
       else
         build.trace.html(last_lines: 10).html_safe
       end
@@ -20,8 +20,8 @@ module BuildsHelper
 
   def javascript_build_options
     {
-      page_url: namespace_project_build_url(@project.namespace, @project, @build),
-      build_url: namespace_project_build_url(@project.namespace, @project, @build, :json),
+      page_url: namespace_project_job_url(@project.namespace, @project, @build),
+      build_url: namespace_project_job_url(@project.namespace, @project, @build, :json),
       build_status: @build.status,
       build_stage: @build.stage,
       log_state: ''
@@ -31,7 +31,7 @@ module BuildsHelper
   def build_failed_issue_options
     {
       title: "Build Failed ##{@build.id}",
-      description: namespace_project_build_url(@project.namespace, @project, @build)
+      description: namespace_project_job_url(@project.namespace, @project, @build)
     }
   end
 end

app/helpers/button_helper.rb

@@ -56,7 +56,7 @@ module ButtonHelper
 
     content_tag (append_link ? :a : :span), protocol,
       class: klass,
-      href: (project.http_url_to_repo(current_user) if append_link),
+      href: (project.http_url_to_repo if append_link),
       data: {
         html: true,
         placement: placement,