Merge commit '207d3100' into 11-9-stable-prepare-rc4

app/assets/javascripts/diffs/components/parallel_diff_view.vue

 <script>
 import { mapGetters } from 'vuex';
+import draftCommentsMixin from 'ee_else_ce/diffs/mixins/draft_comments';
 import parallelDiffTableRow from './parallel_diff_table_row.vue';
 import parallelDiffCommentRow from './parallel_diff_comment_row.vue';
@@ -7,7 +8,10 @@ export default {
   components: {
     parallelDiffTableRow,
     parallelDiffCommentRow,
+    ParallelDraftCommentRow: () =>
+      import('ee_component/batch_comments/components/parallel_draft_comment_row.vue'),
   },
+  mixins: [draftCommentsMixin],
   props: {
     diffFile: {
       type: Object,
@@ -56,6 +60,12 @@ export default {
             :line-index="index"
             :help-page-path="helpPagePath"
           />
+          <parallel-draft-comment-row
+            v-if="shouldRenderParallelDraftRow(diffFile.file_hash, line)"
+            :key="`drafts-${index}`"
+            :line="line"
+            :diff-file-content-sha="diffFile.file_hash"
+          />
         </template>
       </tbody>
     </table>

app/assets/javascripts/diffs/constants.js

@@ -42,3 +42,8 @@ export const INITIAL_TREE_WIDTH = 320;
 export const MIN_TREE_WIDTH = 240;
 export const MAX_TREE_WIDTH = 400;
 export const TREE_HIDE_STATS_WIDTH = 260;
+
+export const OLD_LINE_KEY = 'old_line';
+export const NEW_LINE_KEY = 'new_line';
+export const TYPE_KEY = 'type';
+export const LEFT_LINE_KEY = 'left';

app/assets/javascripts/diffs/mixins/draft_comments.js

 export default {
   computed: {
     shouldRenderDraftRow: () => () => false,
+    shouldRenderParallelDraftRow: () => () => false,
     draftForLine: () => () => ({}),
   },
 };

app/assets/javascripts/diffs/store/actions.js

@@ -309,5 +309,40 @@ export const cacheTreeListWidth = (_, size) => {
   localStorage.setItem(TREE_LIST_WIDTH_STORAGE_KEY, size);
 };
+export const requestFullDiff = ({ commit }, filePath) => commit(types.REQUEST_FULL_DIFF, filePath);
+export const receiveFullDiffSucess = ({ commit }, { filePath, data }) =>
+  commit(types.RECEIVE_FULL_DIFF_SUCCESS, { filePath, data });
+export const receiveFullDiffError = ({ commit }, filePath) => {
+  commit(types.RECEIVE_FULL_DIFF_ERROR, filePath);
+  createFlash(s__('MergeRequest|Error loading full diff. Please try again.'));
+};
+
+export const fetchFullDiff = ({ dispatch }, file) =>
+  axios
+    .get(file.context_lines_path, {
+      params: {
+        full: true,
+        from_merge_request: true,
+      },
+    })
+    .then(({ data }) => dispatch('receiveFullDiffSucess', { filePath: file.file_path, data }))
+    .then(() => scrollToElement(`#${file.file_hash}`))
+    .catch(() => dispatch('receiveFullDiffError', file.file_path));
+
+export const toggleFullDiff = ({ dispatch, getters, state }, filePath) => {
+  const file = state.diffFiles.find(f => f.file_path === filePath);
+
+  dispatch('requestFullDiff', filePath);
+
+  if (file.isShowingFullFile) {
+    dispatch('loadCollapsedDiff', file)
+      .then(() => dispatch('assignDiscussionsToDiff', getters.getDiffFileDiscussions(file)))
+      .then(() => scrollToElement(`#${file.file_hash}`))
+      .catch(() => dispatch('receiveFullDiffError', filePath));
+  } else {
+    dispatch('fetchFullDiff', file);
+  }
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

app/assets/javascripts/diffs/store/mutation_types.js

@@ -23,3 +23,7 @@ export const SET_TREE_DATA = 'SET_TREE_DATA';
 export const SET_RENDER_TREE_LIST = 'SET_RENDER_TREE_LIST';
 export const SET_SHOW_WHITESPACE = 'SET_SHOW_WHITESPACE';
 export const TOGGLE_FILE_FINDER_VISIBLE = 'TOGGLE_FILE_FINDER_VISIBLE';
+
+export const REQUEST_FULL_DIFF = 'REQUEST_FULL_DIFF';
+export const RECEIVE_FULL_DIFF_SUCCESS = 'RECEIVE_FULL_DIFF_SUCCESS';
+export const RECEIVE_FULL_DIFF_ERROR = 'RECEIVE_FULL_DIFF_ERROR';

app/assets/javascripts/diffs/store/mutations.js

@@ -6,8 +6,10 @@ import {
   addContextLines,
   prepareDiffData,
   isDiscussionApplicableToLine,
+  convertExpandLines,
 } from './utils';
 import * as types from './mutation_types';
+import { OLD_LINE_KEY, NEW_LINE_KEY, TYPE_KEY, LEFT_LINE_KEY } from '../constants';
 export default {
   [types.SET_BASE_CONFIG](state, options) {
@@ -248,4 +250,54 @@ export default {
   [types.TOGGLE_FILE_FINDER_VISIBLE](state, visible) {
     state.fileFinderVisible = visible;
   },
+  [types.REQUEST_FULL_DIFF](state, filePath) {
+    const file = findDiffFile(state.diffFiles, filePath, 'file_path');
+
+    file.isLoadingFullFile = true;
+  },
+  [types.RECEIVE_FULL_DIFF_ERROR](state, filePath) {
+    const file = findDiffFile(state.diffFiles, filePath, 'file_path');
+
+    file.isLoadingFullFile = false;
+  },
+  [types.RECEIVE_FULL_DIFF_SUCCESS](state, { filePath, data }) {
+    const file = findDiffFile(state.diffFiles, filePath, 'file_path');
+
+    file.isShowingFullFile = true;
+    file.isLoadingFullFile = false;
+
+    file.highlighted_diff_lines = convertExpandLines({
+      diffLines: file.highlighted_diff_lines,
+      typeKey: [TYPE_KEY],
+      oldLineKey: [OLD_LINE_KEY],
+      newLineKey: [NEW_LINE_KEY],
+      data,
+      mapLine: ({ line, oldLine, newLine }) => ({
+        ...line,
+        old_line: oldLine,
+        new_line: newLine,
+        line_code: `${file.file_hash}_${oldLine}_${newLine}`,
+      }),
+    });
+
+    file.parallel_diff_lines = convertExpandLines({
+      diffLines: file.parallel_diff_lines,
+      typeKey: [LEFT_LINE_KEY, TYPE_KEY],
+      oldLineKey: [LEFT_LINE_KEY, OLD_LINE_KEY],
+      newLineKey: [LEFT_LINE_KEY, NEW_LINE_KEY],
+      data,
+      mapLine: ({ line, oldLine, newLine }) => ({
+        left: {
+          ...line,
+          old_line: oldLine,
+          line_code: `${file.file_hash}_${oldLine}_${newLine}`,
+        },
+        right: {
+          ...line,
+          new_line: newLine,
+          line_code: `${file.file_hash}_${newLine}_${oldLine}`,
+        },
+      }),
+    });
+  },
 };

app/assets/javascripts/diffs/store/utils.js

@@ -15,8 +15,8 @@ import {
   TREE_TYPE,
 } from '../constants';
-export function findDiffFile(files, hash) {
-  return files.filter(file => file.file_hash === hash)[0];
+export function findDiffFile(files, match, matchKey = 'file_hash') {
+  return files.find(file => file[matchKey] === match);
 }
 export const getReversePosition = linePosition => {
@@ -250,6 +250,8 @@ export function prepareDiffData(diffData) {
       renderIt: showingLines < LINES_TO_BE_RENDERED_DIRECTLY,
       collapsed:
         file.viewer.name === diffViewerModes.text && showingLines > MAX_LINES_TO_BE_RENDERED,
+      isShowingFullFile: false,
+      isLoadingFullFile: false,
       discussions: [],
     });
   }
@@ -411,3 +413,37 @@ export const getDiffMode = diffFile => {
     diffModes.replaced
   );
 };
+
+export const convertExpandLines = ({
+  diffLines,
+  data,
+  typeKey,
+  oldLineKey,
+  newLineKey,
+  mapLine,
+}) => {
+  const dataLength = data.length;
+
+  return diffLines.reduce((acc, line, i) => {
+    if (_.property(typeKey)(line) === 'match') {
+      const beforeLine = diffLines[i - 1];
+      const afterLine = diffLines[i + 1];
+      const beforeLineIndex = _.property(newLineKey)(beforeLine) || 0;
+      const afterLineIndex = _.property(newLineKey)(afterLine) - 1 || dataLength;
+
+      acc.push(
+        ...data.slice(beforeLineIndex, afterLineIndex).map((l, index) => ({
+          ...mapLine({
+            line: { ...l, hasForm: false, discussions: [] },
+            oldLine: (_.property(oldLineKey)(beforeLine) || 0) + index + 1,
+            newLine: (_.property(newLineKey)(beforeLine) || 0) + index + 1,
+          }),
+        })),
+      );
+    } else {
+      acc.push(line);
+    }
+
+    return acc;
+  }, []);
+};

app/assets/javascripts/emoji/index.js

 import _ from 'underscore';
-import emojiMap from 'emojis/digests.json';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
 import emojiAliases from 'emojis/aliases.json';
-export const validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
+import axios from '../lib/utils/axios_utils';
+import AccessorUtilities from '../lib/utils/accessor';
+
+let emojiMap = null;
+let validEmojiNames = null;
+
+export const EMOJI_VERSION = '1';
+const EMOJI_VERSION_LOCALSTORAGE = `EMOJIS_${EMOJI_VERSION}`;
+
+const isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
+
+export function initEmojiMap() {
+  return new Promise((resolve, reject) => {
+    if (emojiMap) {
+      resolve(emojiMap);
+    } else if (isLocalStorageAvailable && window.localStorage.getItem(EMOJI_VERSION_LOCALSTORAGE)) {
+      emojiMap = JSON.parse(window.localStorage.getItem(EMOJI_VERSION_LOCALSTORAGE));
+      validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
+      resolve(emojiMap);
+    } else {
+      // We load the JSON from server
+      axios
+        .get(
+          `${gon.asset_host || ''}${gon.relative_url_root ||
+            ''}/-/emojis/${EMOJI_VERSION}/emojis.json`,
+        )
+        .then(({ data }) => {
+          emojiMap = data;
+          validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
+          resolve(emojiMap);
+          if (isLocalStorageAvailable) {
+            window.localStorage.setItem(EMOJI_VERSION_LOCALSTORAGE, JSON.stringify(emojiMap));
+          }
+        })
+        .catch(err => {
+          createFlash(s__('Emojis|Something went wrong while loading emojis.'));
+          reject(err);
+        });
+    }
+  });
+}
 export function normalizeEmojiName(name) {
   return Object.prototype.hasOwnProperty.call(emojiAliases, name) ? emojiAliases[name] : name;
 }
+export function getValidEmojiNames() {
+  return validEmojiNames;
+}
+
 export function isEmojiNameValid(name) {
   return validEmojiNames.indexOf(name) >= 0;
 }
@@ -36,8 +81,8 @@ export function getEmojiCategoryMap() {
     };
     Object.keys(emojiMap).forEach(name => {
       const emoji = emojiMap[name];
-      if (emojiCategoryMap[emoji.category]) {
-        emojiCategoryMap[emoji.category].push(name);
+      if (emojiCategoryMap[emoji.c]) {
+        emojiCategoryMap[emoji.c].push(name);
       }
     });
   }
@@ -58,8 +103,9 @@ export function getEmojiInfo(query) {
 }
 export function emojiFallbackImageSrc(inputName) {
-  const { name, digest } = getEmojiInfo(inputName);
-  return `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${digest}.png`;
+  const { name } = getEmojiInfo(inputName);
+  return `${gon.asset_host || ''}${gon.relative_url_root ||
+    ''}/-/emojis/${EMOJI_VERSION}/${name}.png`;
 }
 export function emojiImageTag(name, src) {
@@ -68,9 +114,8 @@ export function emojiImageTag(name, src) {
 export function glEmojiTag(inputName, options) {
   const opts = { sprite: false, forceFallback: false, ...options };
-  const { name, ...emojiInfo } = getEmojiInfo(inputName);
-  const fallbackImageSrc = emojiFallbackImageSrc(name);
+  const name = normalizeEmojiName(inputName);
   const fallbackSpriteClass = `emoji-${name}`;
   const classList = [];
@@ -79,24 +124,19 @@ export function glEmojiTag(inputName, options) {
     classList.push(fallbackSpriteClass);
   }
   const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : '';
+
   const fallbackSpriteAttribute = opts.sprite
     ? `data-fallback-sprite-class="${fallbackSpriteClass}"`
     : '';
-  let contents = emojiInfo.moji;
-  if (opts.forceFallback && !opts.sprite) {
-    contents = emojiImageTag(name, fallbackImageSrc);
-  }
+  const forceFallbackAttribute = opts.forceFallback ? 'data-force-fallback="true"' : '';
   return `
     <gl-emoji
       ${classAttribute}
       data-name="${name}"
-      data-fallback-src="${fallbackImageSrc}"
       ${fallbackSpriteAttribute}
-      data-unicode-version="${emojiInfo.unicodeVersion}"
-      title="${emojiInfo.description}"
+      ${forceFallbackAttribute}
     >
-      ${contents}
     </gl-emoji>
   `;
 }

app/assets/javascripts/emoji/support/index.js

@@ -5,6 +5,9 @@ import getUnicodeSupportMap from './unicode_support_map';
 let browserUnicodeSupportMap;
 export default function isEmojiUnicodeSupportedByBrowser(emojiUnicode, unicodeVersion) {
+  // Our Spec browser would fail producing emoji maps
+  if (/\bHeadlessChrome\//.test(navigator.userAgent)) return true;
+
   browserUnicodeSupportMap = browserUnicodeSupportMap || getUnicodeSupportMap();
   return isEmojiUnicodeSupported(browserUnicodeSupportMap, emojiUnicode, unicodeVersion);
 }

app/assets/javascripts/environments/components/environment_item.vue

@@ -3,7 +3,6 @@ import Timeago from 'timeago.js';
 import _ from 'underscore';
 import { GlTooltipDirective } from '@gitlab/ui';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-import { humanize } from '~/lib/utils/text_utility';
 import Icon from '~/vue_shared/components/icon.vue';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
@@ -156,7 +155,7 @@ export default {
       const combinedActions = (manualActions || []).concat(scheduledActions || []);
       return combinedActions.map(action => ({
         ...action,
-        name: humanize(action.name),
+        name: action.name,
       }));
     },

app/assets/javascripts/filtered_search/add_extra_tokens_for_merge_requests.js

+export default IssuableTokenKeys => {
+  const wipToken = {
+    key: 'wip',
+    type: 'string',
+    param: '',
+    symbol: '',
+    icon: 'admin',
+    tag: 'Yes or No',
+    lowercaseValueOnSubmit: true,
+    uppercaseTokenName: true,
+    capitalizeTokenValue: true,
+  };
+
+  IssuableTokenKeys.tokenKeys.push(wipToken);
+  IssuableTokenKeys.tokenKeysWithAlternative.push(wipToken);
+};

app/assets/javascripts/filtered_search/available_dropdown_mappings.js

+import DropdownHint from './dropdown_hint';
+import DropdownUser from './dropdown_user';
+import DropdownNonUser from './dropdown_non_user';
+import DropdownEmoji from './dropdown_emoji';
+import NullDropdown from './null_dropdown';
+import DropdownAjaxFilter from './dropdown_ajax_filter';
+import DropdownUtils from './dropdown_utils';
+
+export default class AvailableDropdownMappings {
+  constructor(container, baseEndpoint, groupsOnly, includeAncestorGroups, includeDescendantGroups) {
+    this.container = container;
+    this.baseEndpoint = baseEndpoint;
+    this.groupsOnly = groupsOnly;
+    this.includeAncestorGroups = includeAncestorGroups;
+    this.includeDescendantGroups = includeDescendantGroups;
+  }
+
+  getAllowedMappings(supportedTokens) {
+    return this.buildMappings(supportedTokens, this.getMappings());
+  }
+
+  buildMappings(supportedTokens, availableMappings) {
+    const allowedMappings = {
+      hint: {
+        reference: null,
+        gl: DropdownHint,
+        element: this.container.querySelector('#js-dropdown-hint'),
+      },
+    };
+
+    supportedTokens.forEach(type => {
+      if (availableMappings[type]) {
+        allowedMappings[type] = availableMappings[type];
+      }
+    });
+
+    return allowedMappings;
+  }
+
+  getMappings() {
+    return {
+      author: {
+        reference: null,
+        gl: DropdownUser,
+        element: this.container.querySelector('#js-dropdown-author'),
+      },
+      assignee: {
+        reference: null,
+        gl: DropdownUser,
+        element: this.container.querySelector('#js-dropdown-assignee'),
+      },
+      milestone: {
+        reference: null,
+        gl: DropdownNonUser,
+        extraArguments: {
+          endpoint: this.getMilestoneEndpoint(),
+          symbol: '%',
+        },
+        element: this.container.querySelector('#js-dropdown-milestone'),
+      },
+      label: {
+        reference: null,
+        gl: DropdownNonUser,
+        extraArguments: {
+          endpoint: this.getLabelsEndpoint(),
+          symbol: '~',
+          preprocessing: DropdownUtils.duplicateLabelPreprocessing,
+        },
+        element: this.container.querySelector('#js-dropdown-label'),
+      },
+      'my-reaction': {
+        reference: null,
+        gl: DropdownEmoji,
+        element: this.container.querySelector('#js-dropdown-my-reaction'),
+      },
+      wip: {
+        reference: null,
+        gl: DropdownNonUser,
+        element: this.container.querySelector('#js-dropdown-wip'),
+      },
+      confidential: {
+        reference: null,
+        gl: DropdownNonUser,
+        element: this.container.querySelector('#js-dropdown-confidential'),
+      },
+      status: {
+        reference: null,
+        gl: NullDropdown,
+        element: this.container.querySelector('#js-dropdown-admin-runner-status'),
+      },
+      type: {
+        reference: null,
+        gl: NullDropdown,
+        element: this.container.querySelector('#js-dropdown-admin-runner-type'),
+      },
+      tag: {
+        reference: null,
+        gl: DropdownAjaxFilter,
+        extraArguments: {
+          endpoint: this.getRunnerTagsEndpoint(),
+          symbol: '~',
+        },
+        element: this.container.querySelector('#js-dropdown-runner-tag'),
+      },
+    };
+  }
+
+  getMilestoneEndpoint() {
+    return `${this.baseEndpoint}/milestones.json`;
+  }
+
+  getLabelsEndpoint() {
+    let endpoint = `${this.baseEndpoint}/labels.json?`;
+
+    if (this.groupsOnly) {
+      endpoint = `${endpoint}only_group_labels=true&`;
+    }
+
+    if (this.includeAncestorGroups) {
+      endpoint = `${endpoint}include_ancestor_groups=true&`;
+    }
+
+    if (this.includeDescendantGroups) {
+      endpoint = `${endpoint}include_descendant_groups=true`;
+    }
+
+    return endpoint;
+  }
+
+  getRunnerTagsEndpoint() {
+    return `${this.baseEndpoint}/admin/runners/tag_list.json`;
+  }
+}

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

+import AvailableDropdownMappings from 'ee_else_ce/filtered_search/available_dropdown_mappings';
 import _ from 'underscore';
 import DropLab from '~/droplab/drop_lab';
 import FilteredSearchContainer from './container';
 import FilteredSearchTokenKeys from './filtered_search_token_keys';
 import DropdownUtils from './dropdown_utils';
-import DropdownHint from './dropdown_hint';
-import DropdownEmoji from './dropdown_emoji';
-import DropdownNonUser from './dropdown_non_user';
-import DropdownUser from './dropdown_user';
-import DropdownAjaxFilter from './dropdown_ajax_filter';
-import NullDropdown from './null_dropdown';
 import FilteredSearchVisualTokens from './filtered_search_visual_tokens';
 export default class FilteredSearchDropdownManager {
@@ -50,114 +45,15 @@ export default class FilteredSearchDropdownManager {
   setupMapping() {
     const supportedTokens = this.filteredSearchTokenKeys.getKeys();
-    const allowedMappings = {
-      hint: {
-        reference: null,
-        gl: DropdownHint,
-        element: this.container.querySelector('#js-dropdown-hint'),
-      },
-    };
-    const availableMappings = {
-      author: {
-        reference: null,
-        gl: DropdownUser,
-        element: this.container.querySelector('#js-dropdown-author'),
-      },
-      assignee: {
-        reference: null,
-        gl: DropdownUser,
-        element: this.container.querySelector('#js-dropdown-assignee'),
-      },
-      milestone: {
-        reference: null,
-        gl: DropdownNonUser,
-        extraArguments: {
-          endpoint: this.getMilestoneEndpoint(),
-          symbol: '%',
-        },
-        element: this.container.querySelector('#js-dropdown-milestone'),
-      },
-      label: {
-        reference: null,
-        gl: DropdownNonUser,
-        extraArguments: {
-          endpoint: this.getLabelsEndpoint(),
-          symbol: '~',
-          preprocessing: DropdownUtils.duplicateLabelPreprocessing,
-        },
-        element: this.container.querySelector('#js-dropdown-label'),
-      },
-      'my-reaction': {
-        reference: null,
-        gl: DropdownEmoji,
-        element: this.container.querySelector('#js-dropdown-my-reaction'),
-      },
-      wip: {
-        reference: null,
-        gl: DropdownNonUser,
-        element: this.container.querySelector('#js-dropdown-wip'),
-      },
-      confidential: {
-        reference: null,
-        gl: DropdownNonUser,
-        element: this.container.querySelector('#js-dropdown-confidential'),
-      },
-      status: {
-        reference: null,
-        gl: NullDropdown,
-        element: this.container.querySelector('#js-dropdown-admin-runner-status'),
-      },
-      type: {
-        reference: null,
-        gl: NullDropdown,
-        element: this.container.querySelector('#js-dropdown-admin-runner-type'),
-      },
-      tag: {
-        reference: null,
-        gl: DropdownAjaxFilter,
-        extraArguments: {
-          endpoint: this.getRunnerTagsEndpoint(),
-          symbol: '~',
-        },
-        element: this.container.querySelector('#js-dropdown-runner-tag'),
-      },
-    };
-
-    supportedTokens.forEach(type => {
-      if (availableMappings[type]) {
-        allowedMappings[type] = availableMappings[type];
-      }
-    });
-
-    this.mapping = allowedMappings;
-  }
-
-  getMilestoneEndpoint() {
-    const endpoint = `${this.baseEndpoint}/milestones.json`;
-
-    return endpoint;
-  }
-
-  getLabelsEndpoint() {
-    let endpoint = `${this.baseEndpoint}/labels.json?`;
-
-    if (this.groupsOnly) {
-      endpoint = `${endpoint}only_group_labels=true&`;
-    }
-
-    if (this.includeAncestorGroups) {
-      endpoint = `${endpoint}include_ancestor_groups=true&`;
-    }
-
-    if (this.includeDescendantGroups) {
-      endpoint = `${endpoint}include_descendant_groups=true`;
-    }
-
-    return endpoint;
-  }
-  getRunnerTagsEndpoint() {
-    return `${this.baseEndpoint}/admin/runners/tag_list.json`;
+    const availableMappings = new AvailableDropdownMappings(
+      this.container,
+      this.baseEndpoint,
+      this.groupsOnly,
+      this.includeAncestorGroups,
+      this.includeDescendantGroups,
+    );
+    this.mapping = availableMappings.getAllowedMappings(supportedTokens);
   }
   static addWordToInput(tokenName, tokenValue = '', clicked = false, options = {}) {

app/assets/javascripts/filtered_search/filtered_search_token_keys.js

@@ -88,21 +88,4 @@ export default class FilteredSearchTokenKeys {
     this.tokenKeys.push(confidentialToken);
     this.tokenKeysWithAlternative.push(confidentialToken);
   }
-
-  addExtraTokensForMergeRequests() {
-    const wipToken = {
-      key: 'wip',
-      type: 'string',
-      param: '',
-      symbol: '',
-      icon: 'admin',
-      tag: 'Yes or No',
-      lowercaseValueOnSubmit: true,
-      uppercaseTokenName: true,
-      capitalizeTokenValue: true,
-    };
-
-    this.tokenKeys.push(wipToken);
-    this.tokenKeysWithAlternative.push(wipToken);
-  }
 }

app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js

-import _ from 'underscore';
-import AjaxCache from '~/lib/utils/ajax_cache';
+import VisualTokenValue from 'ee_else_ce/filtered_search/visual_token_value';
 import { objectToQueryString } from '~/lib/utils/common_utils';
-import Flash from '../flash';
 import FilteredSearchContainer from './container';
-import UsersCache from '../lib/utils/users_cache';
-import DropdownUtils from './dropdown_utils';
 export default class FilteredSearchVisualTokens {
   static getLastVisualTokenBeforeInput() {
@@ -20,21 +16,6 @@ export default class FilteredSearchVisualTokens {
     };
   }
-  /**
-   * Returns a computed API endpoint
-   * and query string composed of values from endpointQueryParams
-   * @param {String} endpoint
-   * @param {String} endpointQueryParams
-   */
-  static getEndpointWithQueryParams(endpoint, endpointQueryParams) {
-    if (!endpointQueryParams) {
-      return endpoint;
-    }
-
-    const queryString = objectToQueryString(JSON.parse(endpointQueryParams));
-    return `${endpoint}?${queryString}`;
-  }
-
   static unselectTokens() {
     const otherTokens = FilteredSearchContainer.container.querySelectorAll(
       '.js-visual-token .selectable.selected',
@@ -76,114 +57,15 @@ export default class FilteredSearchVisualTokens {
     `;
   }
-  static setTokenStyle(tokenContainer, backgroundColor, textColor) {
-    const token = tokenContainer;
-
-    token.style.backgroundColor = backgroundColor;
-    token.style.color = textColor;
-
-    if (textColor === '#FFFFFF') {
-      const removeToken = token.querySelector('.remove-token');
-      removeToken.classList.add('inverted');
-    }
-
-    return token;
-  }
-
-  static updateLabelTokenColor(tokenValueContainer, tokenValue) {
-    const filteredSearchInput = FilteredSearchContainer.container.querySelector('.filtered-search');
-    const { baseEndpoint } = filteredSearchInput.dataset;
-    const labelsEndpoint = FilteredSearchVisualTokens.getEndpointWithQueryParams(
-      `${baseEndpoint}/labels.json`,
-      filteredSearchInput.dataset.endpointQueryParams,
-    );
-
-    return AjaxCache.retrieve(labelsEndpoint)
-      .then(labels => {
-        const matchingLabel = (labels || []).find(
-          label => `~${DropdownUtils.getEscapedText(label.title)}` === tokenValue,
-        );
-
-        if (!matchingLabel) {
-          return;
-        }
-
-        FilteredSearchVisualTokens.setTokenStyle(
-          tokenValueContainer,
-          matchingLabel.color,
-          matchingLabel.text_color,
-        );
-      })
-      .catch(() => new Flash('An error occurred while fetching label colors.'));
-  }
-
-  static updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) {
-    const username = tokenValue.replace(/^@/, '');
-    return (
-      UsersCache.retrieve(username)
-        .then(user => {
-          if (!user) {
-            return;
-          }
-
-          /* eslint-disable no-param-reassign */
-          tokenValueContainer.dataset.originalValue = tokenValue;
-          tokenValueElement.innerHTML = `
-          <img class="avatar s20" src="${user.avatar_url}" alt="">
-          ${_.escape(user.name)}
-        `;
-          /* eslint-enable no-param-reassign */
-        })
-        // ignore error and leave username in the search bar
-        .catch(() => {})
-    );
-  }
-
-  static updateEmojiTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) {
-    const container = tokenValueContainer;
-    const element = tokenValueElement;
-
-    return (
-      import(/* webpackChunkName: 'emoji' */ '../emoji')
-        .then(Emoji => {
-          if (!Emoji.isEmojiNameValid(tokenValue)) {
-            return;
-          }
-
-          container.dataset.originalValue = tokenValue;
-          element.innerHTML = Emoji.glEmojiTag(tokenValue);
-        })
-        // ignore error and leave emoji name in the search bar
-        .catch(() => {})
-    );
-  }
-
   static renderVisualTokenValue(parentElement, tokenName, tokenValue) {
+    const tokenType = tokenName.toLowerCase();
     const tokenValueContainer = parentElement.querySelector('.value-container');
     const tokenValueElement = tokenValueContainer.querySelector('.value');
     tokenValueElement.innerText = tokenValue;
-    if (['none', 'any'].includes(tokenValue.toLowerCase())) {
-      return;
-    }
-    const tokenType = tokenName.toLowerCase();
-
-    if (tokenType === 'label') {
-      FilteredSearchVisualTokens.updateLabelTokenColor(tokenValueContainer, tokenValue);
-    } else if (tokenType === 'author' || tokenType === 'assignee') {
-      FilteredSearchVisualTokens.updateUserTokenAppearance(
-        tokenValueContainer,
-        tokenValueElement,
-        tokenValue,
-      );
-    } else if (tokenType === 'my-reaction') {
-      FilteredSearchVisualTokens.updateEmojiTokenAppearance(
-        tokenValueContainer,
-        tokenValueElement,
-        tokenValue,
-      );
-    }
+    const visualTokenValue = new VisualTokenValue(tokenValue, tokenType);
+    visualTokenValue.render(tokenValueContainer, tokenValueElement);
   }
   static addVisualTokenElement(name, value, options = {}) {
@@ -318,6 +200,21 @@ export default class FilteredSearchVisualTokens {
     }
   }
+  /**
+   * Returns a computed API endpoint
+   * and query string composed of values from endpointQueryParams
+   * @param {String} endpoint
+   * @param {String} endpointQueryParams
+   */
+  static getEndpointWithQueryParams(endpoint, endpointQueryParams) {
+    if (!endpointQueryParams) {
+      return endpoint;
+    }
+
+    const queryString = objectToQueryString(JSON.parse(endpointQueryParams));
+    return `${endpoint}?${queryString}`;
+  }
+
   static editToken(token) {
     const input = FilteredSearchContainer.container.querySelector('.filtered-search');

app/assets/javascripts/filtered_search/visual_token_value.js

+import _ from 'underscore';
+import FilteredSearchContainer from '~/filtered_search/container';
+import FilteredSearchVisualTokens from '~/filtered_search/filtered_search_visual_tokens';
+import AjaxCache from '~/lib/utils/ajax_cache';
+import DropdownUtils from '~/filtered_search/dropdown_utils';
+import Flash from '~/flash';
+import UsersCache from '~/lib/utils/users_cache';
+
+export default class VisualTokenValue {
+  constructor(tokenValue, tokenType) {
+    this.tokenValue = tokenValue;
+    this.tokenType = tokenType;
+  }
+
+  render(tokenValueContainer, tokenValueElement) {
+    const { tokenType } = this;
+
+    if (['none', 'any'].includes(tokenType)) {
+      return;
+    }
+
+    if (tokenType === 'label') {
+      this.updateLabelTokenColor(tokenValueContainer);
+    } else if (tokenType === 'author' || tokenType === 'assignee') {
+      this.updateUserTokenAppearance(tokenValueContainer, tokenValueElement);
+    } else if (tokenType === 'my-reaction') {
+      this.updateEmojiTokenAppearance(tokenValueContainer, tokenValueElement);
+    }
+  }
+
+  updateUserTokenAppearance(tokenValueContainer, tokenValueElement) {
+    const { tokenValue } = this;
+    const username = this.tokenValue.replace(/^@/, '');
+
+    return (
+      UsersCache.retrieve(username)
+        .then(user => {
+          if (!user) {
+            return;
+          }
+
+          /* eslint-disable no-param-reassign */
+          tokenValueContainer.dataset.originalValue = tokenValue;
+          tokenValueElement.innerHTML = `
+          <img class="avatar s20" src="${user.avatar_url}" alt="">
+          ${_.escape(user.name)}
+        `;
+          /* eslint-enable no-param-reassign */
+        })
+        // ignore error and leave username in the search bar
+        .catch(() => {})
+    );
+  }
+
+  updateLabelTokenColor(tokenValueContainer) {
+    const { tokenValue } = this;
+    const filteredSearchInput = FilteredSearchContainer.container.querySelector('.filtered-search');
+    const { baseEndpoint } = filteredSearchInput.dataset;
+    const labelsEndpoint = FilteredSearchVisualTokens.getEndpointWithQueryParams(
+      `${baseEndpoint}/labels.json`,
+      filteredSearchInput.dataset.endpointQueryParams,
+    );
+
+    return AjaxCache.retrieve(labelsEndpoint)
+      .then(labels => {
+        const matchingLabel = (labels || []).find(
+          label => `~${DropdownUtils.getEscapedText(label.title)}` === tokenValue,
+        );
+
+        if (!matchingLabel) {
+          return;
+        }
+
+        VisualTokenValue.setTokenStyle(
+          tokenValueContainer,
+          matchingLabel.color,
+          matchingLabel.text_color,
+        );
+      })
+      .catch(() => new Flash('An error occurred while fetching label colors.'));
+  }
+
+  static setTokenStyle(tokenValueContainer, backgroundColor, textColor) {
+    const token = tokenValueContainer;
+
+    token.style.backgroundColor = backgroundColor;
+    token.style.color = textColor;
+
+    if (textColor === '#FFFFFF') {
+      const removeToken = token.querySelector('.remove-token');
+      removeToken.classList.add('inverted');
+    }
+
+    return token;
+  }
+
+  updateEmojiTokenAppearance(tokenValueContainer, tokenValueElement) {
+    const container = tokenValueContainer;
+    const element = tokenValueElement;
+    const value = this.tokenValue;
+
+    return (
+      import(/* webpackChunkName: 'emoji' */ '../emoji')
+        .then(Emoji => {
+          Emoji.initEmojiMap()
+            .then(() => {
+              if (!Emoji.isEmojiNameValid(value)) {
+                return;
+              }
+
+              container.dataset.originalValue = value;
+              element.innerHTML = Emoji.glEmojiTag(value);
+            })
+            // ignore error and leave emoji name in the search bar
+            .catch(err => {
+              throw err;
+            });
+        })
+        // ignore error and leave emoji name in the search bar
+        .catch(importError => {
+          throw importError;
+        })
+    );
+  }
+}

app/assets/javascripts/gfm_auto_complete.js

@@ -487,9 +487,15 @@ class GfmAutoComplete {
       this.loadData($input, at, this.cachedData[at]);
     } else if (GfmAutoComplete.atTypeMap[at] === 'emojis') {
       import(/* webpackChunkName: 'emoji' */ './emoji')
-        .then(({ validEmojiNames, glEmojiTag }) => {
-          this.loadData($input, at, validEmojiNames);
-          GfmAutoComplete.glEmojiTag = glEmojiTag;
+        .then(({ initEmojiMap, getValidEmojiNames, glEmojiTag }) => {
+          initEmojiMap()
+            .then(() => {
+              this.loadData($input, at, getValidEmojiNames());
+              GfmAutoComplete.glEmojiTag = glEmojiTag;
+            })
+            .catch(() => {
+              this.isLoadingData[at] = false;
+            });
         })
         .catch(() => {
           this.isLoadingData[at] = false;

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

+import { viewerInformationForPath } from '~/vue_shared/components/content_viewer/lib/viewer_utils';
+import { decorateData, sortTree } from '../stores/utils';
+
+export const splitParent = path => {
+  const idx = path.lastIndexOf('/');
+
+  return {
+    parent: idx >= 0 ? path.substring(0, idx) : null,
+    name: idx >= 0 ? path.substring(idx + 1) : path,
+  };
+};
+
+/**
+ * Create file objects from a list of file paths.
+ */
+export const decorateFiles = ({
+  data,
+  projectId,
+  branchId,
+  tempFile = false,
+  content = '',
+  base64 = false,
+}) => {
+  const treeList = [];
+  const entries = {};
+
+  // These mutable variable references end up being exported and used by `createTempEntry`
+  let file;
+  let parentPath;
+
+  const insertParent = path => {
+    if (!path) {
+      return null;
+    } else if (entries[path]) {
+      return entries[path];
+    }
+
+    const { parent, name } = splitParent(path);
+    const parentFolder = parent && insertParent(parent);
+    parentPath = parentFolder && parentFolder.path;
+
+    const tree = decorateData({
+      projectId,
+      branchId,
+      id: path,
+      name,
+      path,
+      url: `/${projectId}/tree/${branchId}/-/${path}/`,
+      type: 'tree',
+      parentTreeUrl: parentFolder ? parentFolder.url : `/${projectId}/tree/${branchId}/`,
+      tempFile,
+      changed: tempFile,
+      opened: tempFile,
+      parentPath,
+    });
+
+    Object.assign(entries, {
+      [path]: tree,
+    });
+
+    if (parentFolder) {
+      parentFolder.tree.push(tree);
+    } else {
+      treeList.push(tree);
+    }
+
+    return tree;
+  };
+
+  data.forEach(path => {
+    const { parent, name } = splitParent(path);
+
+    const fileFolder = parent && insertParent(parent);
+
+    if (name) {
+      parentPath = fileFolder && fileFolder.path;
+
+      file = decorateData({
+        projectId,
+        branchId,
+        id: path,
+        name,
+        path,
+        url: `/${projectId}/blob/${branchId}/-/${path}`,
+        type: 'blob',
+        parentTreeUrl: fileFolder ? fileFolder.url : `/${projectId}/blob/${branchId}`,
+        tempFile,
+        changed: tempFile,
+        content,
+        base64,
+        previewMode: viewerInformationForPath(name),
+        parentPath,
+      });
+
+      Object.assign(entries, {
+        [path]: file,
+      });
+
+      if (fileFolder) {
+        fileFolder.tree.push(file);
+      } else {
+        treeList.push(file);
+      }
+    }
+  });
+
+  return {
+    entries,
+    treeList: sortTree(treeList),
+    file,
+    parentPath,
+  };
+};

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

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import { visitUrl } from '~/lib/utils/url_utility';
 import flash from '~/flash';
 import * as types from './mutation_types';
-import FilesDecoratorWorker from './workers/files_decorator_worker';
+import { decorateFiles } from '../lib/files';
 import { stageKeys } from '../constants';
 export const redirectToUrl = (_, url) => visitUrl(url);
@@ -56,7 +56,6 @@ export const createTempEntry = (
   { name, type, content = '', base64 = false },
 ) =>
   new Promise(resolve => {
-    const worker = new FilesDecoratorWorker();
     const fullName = name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name;
     if (state.entries[name]) {
@@ -74,31 +73,7 @@ export const createTempEntry = (
       return null;
     }
-    worker.addEventListener('message', ({ data }) => {
-      const { file, parentPath } = data;
-
-      worker.terminate();
-
-      commit(types.CREATE_TMP_ENTRY, {
-        data,
-        projectId: state.currentProjectId,
-        branchId: state.currentBranchId,
-      });
-
-      if (type === 'blob') {
-        commit(types.TOGGLE_FILE_OPEN, file.path);
-        commit(types.ADD_FILE_TO_CHANGED, file.path);
-        dispatch('setFileActive', file.path);
-      }
-
-      if (parentPath && !state.entries[parentPath].opened) {
-        commit(types.TOGGLE_TREE_OPEN, parentPath);
-      }
-
-      resolve(file);
-    });
-
-    worker.postMessage({
+    const data = decorateFiles({
       data: [fullName],
       projectId: state.currentProjectId,
       branchId: state.currentBranchId,
@@ -107,6 +82,25 @@ export const createTempEntry = (
       base64,
       content,
     });
+    const { file, parentPath } = data;
+
+    commit(types.CREATE_TMP_ENTRY, {
+      data,
+      projectId: state.currentProjectId,
+      branchId: state.currentBranchId,
+    });
+
+    if (type === 'blob') {
+      commit(types.TOGGLE_FILE_OPEN, file.path);
+      commit(types.ADD_FILE_TO_CHANGED, file.path);
+      dispatch('setFileActive', file.path);
+    }
+
+    if (parentPath && !state.entries[parentPath].opened) {
+      commit(types.TOGGLE_TREE_OPEN, parentPath);
+    }
+
+    resolve(file);
     return null;
   });

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

+import _ from 'underscore';
 import { __ } from '../../../locale';
 import service from '../../services';
 import * as types from '../mutation_types';
-import FilesDecoratorWorker from '../workers/files_decorator_worker';
+import { decorateFiles } from '../../lib/files';
 export const toggleTreeOpen = ({ commit }, path) => {
   commit(types.TOGGLE_TREE_OPEN, path);
@@ -32,6 +33,19 @@ export const handleTreeEntryAction = ({ commit, dispatch }, row) => {
   dispatch('showTreeEntry', row.path);
 };
+export const setDirectoryData = ({ state, commit }, { projectId, branchId, treeList }) => {
+  const selectedTree = state.trees[`${projectId}/${branchId}`];
+
+  commit(types.SET_DIRECTORY_DATA, {
+    treePath: `${projectId}/${branchId}`,
+    data: treeList,
+  });
+  commit(types.TOGGLE_LOADING, {
+    entry: selectedTree,
+    forceValue: false,
+  });
+};
+
 export const getFiles = ({ state, commit, dispatch }, { projectId, branchId } = {}) =>
   new Promise((resolve, reject) => {
     if (
@@ -45,31 +59,19 @@ export const getFiles = ({ state, commit, dispatch }, { projectId, branchId } =
       service
         .getFiles(selectedProject.web_url, branchId)
         .then(({ data }) => {
-          const worker = new FilesDecoratorWorker();
-          worker.addEventListener('message', e => {
-            const { entries, treeList } = e.data;
-            const selectedTree = state.trees[`${projectId}/${branchId}`];
-
-            commit(types.SET_ENTRIES, entries);
-            commit(types.SET_DIRECTORY_DATA, {
-              treePath: `${projectId}/${branchId}`,
-              data: treeList,
-            });
-            commit(types.TOGGLE_LOADING, {
-              entry: selectedTree,
-              forceValue: false,
-            });
-
-            worker.terminate();
-
-            resolve();
-          });
-
-          worker.postMessage({
+          const { entries, treeList } = decorateFiles({
             data,
             projectId,
             branchId,
           });
+
+          commit(types.SET_ENTRIES, entries);
+
+          // Defer setting the directory data because this triggers some intense rendering.
+          // The entries is all we need to load the file editor.
+          _.defer(() => dispatch('setDirectoryData', { projectId, branchId, treeList }));
+
+          resolve();
         })
         .catch(e => {
           if (e.response.status === 404) {