Add latest changes from gitlab-org/gitlab@master

9 files changed, 58 insertions, 67 deletions

diff --git a/app/assets/javascripts/behaviors/index.js b/app/assets/javascripts/behaviors/index.js
index dc9153e61f7..84ff8fa7f33 100644
--- a/app/assets/javascripts/behaviors/index.js
+++ b/app/assets/javascripts/behaviors/index.js
@@ -3,7 +3,6 @@ import './autosize';
 import initCollapseSidebarOnWindowResize from './collapse_sidebar_on_window_resize';
 import initCopyToClipboard from './copy_to_clipboard';
 import installGlEmojiElement from './gl_emoji';
-import { loadStartupCSS } from './load_startup_css';
 import initCopyAsGFM from './markdown/copy_as_gfm';
 import './quick_submit';
 import './requires_input';
@@ -13,8 +12,6 @@ import { initGlobalAlerts } from './global_alerts';
 import './toggler_behavior';
 import './preview_markdown';
 
-loadStartupCSS();
-
 installGlEmojiElement();
 
 initCopyAsGFM();
diff --git a/app/assets/javascripts/behaviors/load_startup_css.js b/app/assets/javascripts/behaviors/load_startup_css.js
deleted file mode 100644
index dbe9ff8b6e7..00000000000
--- a/app/assets/javascripts/behaviors/load_startup_css.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export const loadStartupCSS = () => {
-  // We need to fallback to dispatching `load` in case our event listener was added too late
-  // or the browser environment doesn't load media=print.
-  // Do this on `window.load` so that the default deferred behavior takes precedence.
-  // https://gitlab.com/gitlab-org/gitlab/-/issues/239357
-  window.addEventListener(
-    'load',
-    () => {
-      document
-        .querySelectorAll('link[media=print]')
-        .forEach((x) => x.dispatchEvent(new Event('load')));
-    },
-    { once: true },
-  );
-};
diff --git a/app/assets/javascripts/content_editor/extensions/emoji.js b/app/assets/javascripts/content_editor/extensions/emoji.js
index 7f8b5da5f46..be6ecb6cafd 100644
--- a/app/assets/javascripts/content_editor/extensions/emoji.js
+++ b/app/assets/javascripts/content_editor/extensions/emoji.js
@@ -1,5 +1,5 @@
 import { Node, InputRule } from '@tiptap/core';
-import { initEmojiMap, getAllEmoji } from '~/emoji';
+import { initEmojiMap, getEmojiMap } from '~/emoji';
 
 export default Node.create({
   name: 'emoji',
@@ -58,7 +58,7 @@ export default Node.create({
         find: emojiInputRegex,
         handler: ({ state, range: { from, to }, match }) => {
           const [, , name] = match;
-          const emojis = getAllEmoji();
+          const emojis = getEmojiMap();
           const emoji = emojis[name];
           const { tr } = state;
 
diff --git a/app/assets/javascripts/content_editor/extensions/suggestions.js b/app/assets/javascripts/content_editor/extensions/suggestions.js
index 913439aaffe..0560322191e 100644
--- a/app/assets/javascripts/content_editor/extensions/suggestions.js
+++ b/app/assets/javascripts/content_editor/extensions/suggestions.js
@@ -235,7 +235,7 @@ export default Node.create({
       createSuggestionPlugin({
         editor: this.editor,
         char: ':',
-        dataSource: () => Object.values(getAllEmoji()),
+        dataSource: () => getAllEmoji(),
         nodeType: 'emoji',
         search: (query) => ({ d, name }) => find(d, query) || find(name, query),
         limit: 10,
diff --git a/app/assets/javascripts/emoji/components/picker.vue b/app/assets/javascripts/emoji/components/picker.vue
index 238f0d81b22..462420ba4e5 100644
--- a/app/assets/javascripts/emoji/components/picker.vue
+++ b/app/assets/javascripts/emoji/components/picker.vue
@@ -3,8 +3,8 @@
 import { GlIcon, GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { findLastIndex } from 'lodash';
 import VirtualList from 'vue-virtual-scroll-list';
-import { CATEGORY_NAMES, getEmojiCategoryMap, state } from '~/emoji';
-import { CATEGORY_ICON_MAP, FREQUENTLY_USED_KEY } from '../constants';
+import { getEmojiCategoryMap, state } from '~/emoji';
+import { CATEGORY_NAMES, CATEGORY_ICON_MAP, FREQUENTLY_USED_KEY } from '../constants';
 import Category from './category.vue';
 import EmojiList from './emoji_list.vue';
 import { addToFrequentlyUsed, getEmojiCategories, hasFrequentlyUsedEmojis } from './utils';
diff --git a/app/assets/javascripts/emoji/constants.js b/app/assets/javascripts/emoji/constants.js
index 215ecbfe605..c8bcb79ad15 100644
--- a/app/assets/javascripts/emoji/constants.js
+++ b/app/assets/javascripts/emoji/constants.js
@@ -1,6 +1,18 @@
 export const FREQUENTLY_USED_KEY = 'frequently_used';
 export const FREQUENTLY_USED_COOKIE_KEY = 'frequently_used_emojis';
 
+export const CATEGORY_NAMES = [
+  FREQUENTLY_USED_KEY,
+  'custom',
+  'people',
+  'activity',
+  'nature',
+  'food',
+  'travel',
+  'objects',
+  'symbols',
+  'flags',
+];
 export const CATEGORY_ICON_MAP = {
   [FREQUENTLY_USED_KEY]: 'history',
   custom: 'tanuki',
diff --git a/app/assets/javascripts/emoji/index.js b/app/assets/javascripts/emoji/index.js
index 1fa81a000a5..c9b74e74483 100644
--- a/app/assets/javascripts/emoji/index.js
+++ b/app/assets/javascripts/emoji/index.js
@@ -8,7 +8,7 @@ import { getEmojiScoreWithIntent } from '~/emoji/utils';
 import AccessorUtilities from '../lib/utils/accessor';
 import axios from '../lib/utils/axios_utils';
 import customEmojiQuery from './queries/custom_emoji.query.graphql';
-import { CACHE_KEY, CACHE_VERSION_KEY, CATEGORY_ICON_MAP, FREQUENTLY_USED_KEY } from './constants';
+import { CACHE_KEY, CACHE_VERSION_KEY, CATEGORY_NAMES, FREQUENTLY_USED_KEY } from './constants';
 
 let emojiMap = null;
 let validEmojiNames = null;
@@ -20,7 +20,7 @@ export const state = Vue.observable({
 export const FALLBACK_EMOJI_KEY = 'grey_question';
 
 // Keep the version in sync with `lib/gitlab/emoji.rb`
-export const EMOJI_VERSION = '2';
+export const EMOJI_VERSION = '3';
 
 const isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage();
 
@@ -30,12 +30,7 @@ async function loadEmoji() {
     window.localStorage.getItem(CACHE_VERSION_KEY) === EMOJI_VERSION &&
     window.localStorage.getItem(CACHE_KEY)
   ) {
-    const emojis = JSON.parse(window.localStorage.getItem(CACHE_KEY));
-    // Workaround because the pride flag is broken in EMOJI_VERSION = '1'
-    if (emojis.gay_pride_flag) {
-      emojis.gay_pride_flag.e = '🏳️‍🌈';
-    }
-    return emojis;
+    return JSON.parse(window.localStorage.getItem(CACHE_KEY));
   }
 
   // We load the JSON file direct from the server
@@ -52,13 +47,17 @@ async function loadEmoji() {
 async function loadEmojiWithNames() {
   const emojiRegex = emojiRegexFactory();
 
-  return Object.entries(await loadEmoji()).reduce((acc, [key, value]) => {
-    // Filter out entries which aren't emojis
-    if (value.e.match(emojiRegex)?.[0] === value.e) {
-      acc[key] = { ...value, name: key };
-    }
-    return acc;
-  }, {});
+  return (await loadEmoji()).reduce(
+    (acc, emoji) => {
+      // Filter out entries which aren't emojis
+      if (emoji.e.match(emojiRegex)?.[0] === emoji.e) {
+        acc.emojis[emoji.n] = { ...emoji, name: emoji.n };
+        acc.names.push(emoji.n);
+      }
+      return acc;
+    },
+    { emojis: {}, names: [] },
+  );
 }
 
 export async function loadCustomEmojiWithNames() {
@@ -71,31 +70,35 @@ export async function loadCustomEmojiWithNames() {
       },
     });
 
-    return data?.group?.customEmoji?.nodes?.reduce((acc, e) => {
-      // Map the custom emoji into the format of the normal emojis
-      acc[e.name] = {
-        c: 'custom',
-        d: e.name,
-        e: undefined,
-        name: e.name,
-        src: e.url,
-        u: 'custom',
-      };
+    return data?.group?.customEmoji?.nodes?.reduce(
+      (acc, e) => {
+        // Map the custom emoji into the format of the normal emojis
+        acc.emojis[e.name] = {
+          c: 'custom',
+          d: e.name,
+          e: undefined,
+          name: e.name,
+          src: e.url,
+          u: 'custom',
+        };
+        acc.names.push(e.name);
 
-      return acc;
-    }, {});
+        return acc;
+      },
+      { emojis: {}, names: [] },
+    );
   }
 
-  return {};
+  return { emojis: {}, names: [] };
 }
 
 async function prepareEmojiMap() {
   return Promise.all([loadEmojiWithNames(), loadCustomEmojiWithNames()]).then((values) => {
     emojiMap = {
-      ...values[0],
-      ...values[1],
+      ...values[0].emojis,
+      ...values[1].emojis,
     };
-    validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
+    validEmojiNames = [...values[0].names, ...values[1].names];
     state.loading = false;
   });
 }
@@ -109,10 +112,6 @@ export function normalizeEmojiName(name) {
   return Object.prototype.hasOwnProperty.call(emojiAliases, name) ? emojiAliases[name] : name;
 }
 
-export function getValidEmojiNames() {
-  return validEmojiNames;
-}
-
 export function isEmojiNameValid(name) {
   if (!emojiMap) {
     // eslint-disable-next-line @gitlab/require-i18n-strings
@@ -122,10 +121,14 @@ export function isEmojiNameValid(name) {
   return name in emojiMap || name in emojiAliases;
 }
 
-export function getAllEmoji() {
+export function getEmojiMap() {
   return emojiMap;
 }
 
+export function getAllEmoji() {
+  return validEmojiNames.map((n) => emojiMap[n]);
+}
+
 export function findCustomEmoji(name) {
   return emojiMap[name];
 }
@@ -218,8 +221,6 @@ export function searchEmoji(query) {
     .sort(sortEmoji);
 }
 
-export const CATEGORY_NAMES = Object.keys(CATEGORY_ICON_MAP);
-
 let emojiCategoryMap;
 export function getEmojiCategoryMap() {
   if (!emojiCategoryMap && emojiMap) {
@@ -229,7 +230,7 @@ export function getEmojiCategoryMap() {
       }
       return { ...acc, [category]: [] };
     }, {});
-    Object.keys(emojiMap).forEach((name) => {
+    validEmojiNames.forEach((name) => {
       const emoji = emojiMap[name];
       if (emojiCategoryMap[emoji.c]) {
         emojiCategoryMap[emoji.c].push(name);
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 99d22b1330b..39a8b1d0a9c 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -979,7 +979,7 @@ GfmAutoComplete.Emoji = {
   },
   filter(query) {
     if (query.length === 0) {
-      return Object.values(Emoji.getAllEmoji())
+      return Emoji.getAllEmoji()
         .map((emoji) => ({
           emoji,
           fieldValue: emoji.name,
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 40228b93e01..ce8ccb2bc08 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -31,7 +31,3 @@
 @media print {
   @import 'print';
 }
-
-/* Rules for overriding cloaking in startup-general.scss */
-@import 'startup/cloaking';
-@include cloak-startup-scss(block);