Automatic merge of gitlab-org/gitlab-ce master

app/assets/javascripts/awards_handler.js

@@ -615,10 +615,18 @@ export class AwardsHandler {
 let awardsHandlerPromise = null;
 export default function loadAwardsHandler(reload = false) {
   if (!awardsHandlerPromise || reload) {
-    awardsHandlerPromise = import(/* webpackChunkName: 'emoji' */ './emoji').then(Emoji => {
-      const awardsHandler = new AwardsHandler(Emoji);
-      awardsHandler.bindEvents();
-      return awardsHandler;
+    awardsHandlerPromise = new Promise((resolve, reject) => {
+      import(/* webpackChunkName: 'emoji' */ './emoji')
+        .then(Emoji => {
+          Emoji.initEmojiMap()
+            .then(() => {
+              const awardsHandler = new AwardsHandler(Emoji);
+              awardsHandler.bindEvents();
+              resolve(awardsHandler);
+            })
+            .catch(() => reject);
+        })
+        .catch(() => reject);
     });
   }
   return awardsHandlerPromise;

app/assets/javascripts/behaviors/gl_emoji.js

 import 'document-register-element';
 import isEmojiUnicodeSupported from '../emoji/support';
+import { initEmojiMap, getEmojiInfo, emojiFallbackImageSrc, emojiImageTag } from '../emoji';
 
 class GlEmoji extends HTMLElement {
   constructor() {
     super();
 
-    const emojiUnicode = this.textContent.trim();
-    const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset;
-
-    const isEmojiUnicode =
-      this.childNodes &&
-      Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
-    const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
-    const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
-
-    if (emojiUnicode && isEmojiUnicode && !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)) {
-      // CSS sprite fallback takes precedence over image fallback
-      if (hasCssSpriteFalback) {
-        if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
-          const emojiSpriteLinkTag = document.createElement('link');
-          emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
-          emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
-          document.head.appendChild(emojiSpriteLinkTag);
-          gon.emoji_sprites_css_added = true;
-        }
-        // IE 11 doesn't like adding multiple at once :(
-        this.classList.add('emoji-icon');
-        this.classList.add(fallbackSpriteClass);
-      } else {
-        import(/* webpackChunkName: 'emoji' */ '../emoji')
-          .then(({ emojiImageTag, emojiFallbackImageSrc }) => {
-            if (hasImageFallback) {
-              this.innerHTML = emojiImageTag(name, fallbackSrc);
+    let emojiUnicode = this.textContent.trim();
+    const { fallbackSpriteClass, fallbackSrc, forceFallback } = this.dataset;
+    let { name, unicodeVersion } = this.dataset;
+
+    initEmojiMap()
+      .then(() => {
+        if (!unicodeVersion) {
+          const emojiInfo = getEmojiInfo(name);
+
+          if (emojiInfo) {
+            if (name !== emojiInfo.name) {
+              ({ name } = emojiInfo);
+              this.dataset.name = emojiInfo.name;
+            }
+            unicodeVersion = emojiInfo.u;
+            this.dataset.uni = unicodeVersion;
+
+            if (forceFallback === 'true' && !fallbackSpriteClass) {
+              this.innerHTML = emojiImageTag(name, emojiFallbackImageSrc(name));
             } else {
-              const src = emojiFallbackImageSrc(name);
-              this.innerHTML = emojiImageTag(name, src);
+              emojiUnicode = emojiInfo.e;
+              this.innerHTML = emojiInfo.e;
             }
-          })
-          .catch(() => {
-            // do nothing
-          });
-      }
-    }
+
+            this.title = emojiInfo.d;
+          }
+        }
+
+        const isEmojiUnicode =
+          this.childNodes &&
+          Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
+        const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
+        const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
+
+        if (
+          emojiUnicode &&
+          isEmojiUnicode &&
+          !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
+        ) {
+          // CSS sprite fallback takes precedence over image fallback
+          if (hasCssSpriteFalback) {
+            if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
+              const emojiSpriteLinkTag = document.createElement('link');
+              emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
+              emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
+              document.head.appendChild(emojiSpriteLinkTag);
+              gon.emoji_sprites_css_added = true;
+            }
+            // IE 11 doesn't like adding multiple at once :(
+            this.classList.add('emoji-icon');
+            this.classList.add(fallbackSpriteClass);
+          } else if (hasImageFallback) {
+            this.innerHTML = emojiImageTag(name, fallbackSrc);
+          } else {
+            const src = emojiFallbackImageSrc(name);
+            this.innerHTML = emojiImageTag(name, src);
+          }
+        }
+      })
+      .catch(error => {
+        // Only reject is already handled in initEmojiMap
+        throw error;
+      });
   }
 }
 

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';
+import axios from '../lib/utils/axios_utils';
 
-export const validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
+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 name = normalizeEmojiName(inputName);
 
-  const fallbackImageSrc = emojiFallbackImageSrc(name);
   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/visual_token_value.js

@@ -102,15 +102,24 @@ export default class VisualTokenValue {
     return (
       import(/* webpackChunkName: 'emoji' */ '../emoji')
         .then(Emoji => {
-          if (!Emoji.isEmojiNameValid(value)) {
-            return;
-          }
-
-          container.dataset.originalValue = value;
-          element.innerHTML = Emoji.glEmojiTag(value);
+          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(() => {})
+        .catch(importError => {
+          throw importError;
+        })
     );
   }
 }

app/assets/javascripts/gfm_auto_complete.js

@@ -494,9 +494,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) {

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

@@ -75,8 +75,7 @@ export const decorateData = entity => {
     parentPath = '',
   } = entity;
 
-  return {
-    ...dataStructure(),
+  return Object.assign(dataStructure(), {
     id,
     projectId,
     branchId,
@@ -97,7 +96,7 @@ export const decorateData = entity => {
     file_lock,
     html,
     parentPath,
-  };
+  });
 };
 
 export const findEntry = (tree, type, name, prop = 'name') =>

app/assets/javascripts/ide/stores/workers/files_decorator_worker.js

-import { viewerInformationForPath } from '~/vue_shared/components/content_viewer/lib/viewer_utils';
-import { decorateData, sortTree } from '../utils';
-
-// eslint-disable-next-line no-restricted-globals
-self.addEventListener('message', e => {
-  const { data, projectId, branchId, tempFile = false, content = '', base64 = false } = e.data;
-
-  const treeList = [];
-  let file;
-  let parentPath;
-  const entries = data.reduce((acc, path) => {
-    const pathSplit = path.split('/');
-    const blobName = pathSplit.pop().trim();
-
-    if (pathSplit.length > 0) {
-      pathSplit.reduce((pathAcc, folderName) => {
-        const parentFolder = acc[pathAcc[pathAcc.length - 1]];
-        const folderPath = `${parentFolder ? `${parentFolder.path}/` : ''}${folderName}`;
-        const foundEntry = acc[folderPath];
-
-        if (!foundEntry) {
-          parentPath = parentFolder ? parentFolder.path : null;
-
-          const tree = decorateData({
-            projectId,
-            branchId,
-            id: folderPath,
-            name: folderName,
-            path: folderPath,
-            url: `/${projectId}/tree/${branchId}/-/${folderPath}/`,
-            type: 'tree',
-            parentTreeUrl: parentFolder ? parentFolder.url : `/${projectId}/tree/${branchId}/`,
-            tempFile,
-            changed: tempFile,
-            opened: tempFile,
-            parentPath,
-          });
-
-          Object.assign(acc, {
-            [folderPath]: tree,
-          });
-
-          if (parentFolder) {
-            parentFolder.tree.push(tree);
-          } else {
-            treeList.push(tree);
-          }
-
-          pathAcc.push(tree.path);
-        } else {
-          pathAcc.push(foundEntry.path);
-        }
-
-        return pathAcc;
-      }, []);
-    }
-
-    if (blobName !== '') {
-      const fileFolder = acc[pathSplit.join('/')];
-      parentPath = fileFolder ? fileFolder.path : null;
-
-      file = decorateData({
-        projectId,
-        branchId,
-        id: path,
-        name: blobName,
-        path,
-        url: `/${projectId}/blob/${branchId}/-/${path}`,
-        type: 'blob',
-        parentTreeUrl: fileFolder ? fileFolder.url : `/${projectId}/blob/${branchId}`,
-        tempFile,
-        changed: tempFile,
-        content,
-        base64,
-        previewMode: viewerInformationForPath(blobName),
-        parentPath,
-      });
-
-      Object.assign(acc, {
-        [path]: file,
-      });
-
-      if (fileFolder) {
-        fileFolder.tree.push(file);
-      } else {
-        treeList.push(file);
-      }
-    }
-
-    return acc;
-  }, {});
-
-  // eslint-disable-next-line no-restricted-globals
-  self.postMessage({
-    entries,
-    treeList: sortTree(treeList),
-    file,
-    parentPath,
-  });
-});

app/assets/javascripts/pages/profiles/show/index.js

@@ -56,30 +56,34 @@ document.addEventListener('DOMContentLoaded', () => {
 
   import(/* webpackChunkName: 'emoji' */ '~/emoji')
     .then(Emoji => {
-      const emojiMenu = new EmojiMenu(
-        Emoji,
-        toggleEmojiMenuButtonSelector,
-        'js-status-emoji-menu',
-        selectEmojiCallback,
-      );
-      emojiMenu.bindEvents();
+      Emoji.initEmojiMap()
+        .then(() => {
+          const emojiMenu = new EmojiMenu(
+            Emoji,
+            toggleEmojiMenuButtonSelector,
+            'js-status-emoji-menu',
+            selectEmojiCallback,
+          );
+          emojiMenu.bindEvents();
 
-      const defaultEmojiTag = Emoji.glEmojiTag(defaultStatusEmoji);
-      statusMessageField.addEventListener('input', () => {
-        const hasStatusMessage = statusMessageField.value.trim() !== '';
-        const statusEmoji = findStatusEmoji();
-        if (hasStatusMessage && statusEmoji) {
-          return;
-        }
+          const defaultEmojiTag = Emoji.glEmojiTag(defaultStatusEmoji);
+          statusMessageField.addEventListener('input', () => {
+            const hasStatusMessage = statusMessageField.value.trim() !== '';
+            const statusEmoji = findStatusEmoji();
+            if (hasStatusMessage && statusEmoji) {
+              return;
+            }
 
-        if (hasStatusMessage) {
-          toggleNoEmojiPlaceholder(false);
-          toggleEmojiMenuButton.innerHTML += defaultEmojiTag;
-        } else if (statusEmoji.dataset.name === defaultStatusEmoji) {
-          toggleNoEmojiPlaceholder(true);
-          removeStatusEmoji();
-        }
-      });
+            if (hasStatusMessage) {
+              toggleNoEmojiPlaceholder(false);
+              toggleEmojiMenuButton.innerHTML += defaultEmojiTag;
+            } else if (statusEmoji.dataset.name === defaultStatusEmoji) {
+              toggleNoEmojiPlaceholder(true);
+              removeStatusEmoji();
+            }
+          });
+        })
+        .catch(() => createFlash('Failed to load emoji list.'));
     })
     .catch(() => createFlash('Failed to load emoji list.'));
 });

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -66,19 +66,23 @@ export default {
 
       import(/* webpackChunkName: 'emoji' */ '~/emoji')
         .then(Emoji => {
-          if (this.emoji) {
-            this.emojiTag = Emoji.glEmojiTag(this.emoji);
-          }
-          this.noEmoji = this.emoji === '';
-          this.defaultEmojiTag = Emoji.glEmojiTag('speech_balloon');
+          Emoji.initEmojiMap()
+            .then(() => {
+              if (this.emoji) {
+                this.emojiTag = Emoji.glEmojiTag(this.emoji);
+              }
+              this.noEmoji = this.emoji === '';
+              this.defaultEmojiTag = Emoji.glEmojiTag('speech_balloon');
 
-          this.emojiMenu = new EmojiMenuInModal(
-            Emoji,
-            toggleEmojiMenuButtonSelector,
-            emojiMenuClass,
-            this.setEmoji,
-            this.$refs.userStatusForm,
-          );
+              this.emojiMenu = new EmojiMenuInModal(
+                Emoji,
+                toggleEmojiMenuButtonSelector,
+                emojiMenuClass,
+                this.setEmoji,
+                this.$refs.userStatusForm,
+              );
+            })
+            .catch(() => createFlash(__('Failed to load emoji list.')));
         })
         .catch(() => createFlash(__('Failed to load emoji list.')));
     },

app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue

@@ -20,7 +20,6 @@ export default {
   <div>
     <gl-dropdown
       right
-      no-caret
       text="Use an existing commit message"
       variant="link"
       class="mr-commit-dropdown"

app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue

@@ -333,7 +333,7 @@ export default {
         >
           <ul class="border-top content-list commits-list flex-list">
             <commit-edit
-              v-if="squashBeforeMerge"
+              v-if="squashBeforeMerge && shouldShowSquashBeforeMerge"
               v-model="squashCommitMessage"
               :label="__('Squash commit message')"
               input-id="squash-message-edit"

app/views/projects/deployments/_actions.haml

@@ -11,4 +11,4 @@
             - next unless can?(current_user, :update_build, action)
             %li
               = link_to [:play, @project.namespace.becomes(Namespace), @project, action], method: :post, rel: 'nofollow', class: 'btn' do
-                %span= action.name.humanize
+                %span= action.name

changelogs/unreleased/52459-display-job-names-consistently-on-pipelines-and-environments-list.yml

+---
+title: Display job names consistently on pipelines and environments list
+merge_request: 24984
+author:
+type: fixed

changelogs/unreleased/53336-improve-web-ide-launch-performance.yml

+---
+title: Improve Web IDE launch performance
+merge_request: 25700
+author:
+type: performance

changelogs/unreleased/58369-hide-squash-commit.yml

+---
+title: Resolve showing squash commit edit issue when only single commit is present
+merge_request: 25807
+author:
+type: fixed

lib/tasks/gemojione.rake

@@ -30,33 +30,28 @@ namespace :gemojione do
     # We don't have `node_modules` available in built versions of GitLab
     FileUtils.cp_r(Rails.root.join('node_modules', 'emoji-unicode-version', 'emoji-unicode-version-map.json'), File.join(Rails.root, 'fixtures', 'emojis'))
 
-    dir = Gemojione.images_path
     resultant_emoji_map = {}
 
     Gitlab::Emoji.emojis.each do |name, emoji_hash|
       # Ignore aliases
       unless Gitlab::Emoji.emojis_aliases.key?(name)
-        fpath = File.join(dir, "#{emoji_hash['unicode']}.png")
-        hash_digest = Digest::SHA256.file(fpath).hexdigest
-
         category = emoji_hash['category']
         if name == 'gay_pride_flag'
           category = 'flags'
         end
 
         entry = {
-          category: category,
-          moji: emoji_hash['moji'],
-          description: emoji_hash['description'],
-          unicodeVersion: Gitlab::Emoji.emoji_unicode_version(name),
-          digest: hash_digest
+          c: category,
+          e: emoji_hash['moji'],
+          d: emoji_hash['description'],
+          u: Gitlab::Emoji.emoji_unicode_version(name)
         }
 
         resultant_emoji_map[name] = entry
       end
     end
 
-    out = File.join(Rails.root, 'fixtures', 'emojis', 'digests.json')
+    out = File.join(Rails.root, 'public', '-', 'emojis', '1', 'emojis.json')
     File.open(out, 'w') do |handle|
       handle.write(JSON.pretty_generate(resultant_emoji_map))
     end

locale/gitlab.pot

@@ -3601,6 +3601,9 @@ msgstr ""
 msgid "Embed"
 msgstr ""
 
+msgid "Emojis|Something went wrong while loading emojis."
+msgstr ""
+
 msgid "Empty file"
 msgstr ""