Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

.rubocop_todo/rspec/feature_category.yml

@@ -3311,7 +3311,6 @@ RSpec/FeatureCategory:
     - 'spec/models/ci/persistent_ref_spec.rb'
     - 'spec/models/ci/pipeline_schedule_variable_spec.rb'
     - 'spec/models/ci/resource_spec.rb'
-    - 'spec/models/ci/trigger_request_spec.rb'
     - 'spec/models/ci/unit_test_failure_spec.rb'
     - 'spec/models/ci/unit_test_spec.rb'
     - 'spec/models/clusters/agents/activity_event_spec.rb'

app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue

@@ -4,26 +4,23 @@ import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
 import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
 import { __ } from '~/locale';
 import { EDITOR_APP_DRAWER_NONE } from '~/ci/pipeline_editor/constants';
-import FirstPipelineCard from './cards/first_pipeline_card.vue';
-import GettingStartedCard from './cards/getting_started_card.vue';
-import GitlabUniversityCard from './cards/gitlab_university_card.vue';
-import PipelineConfigReferenceCard from './cards/pipeline_config_reference_card.vue';
-import VisualizeAndLintCard from './cards/visualize_and_lint_card.vue';
-
-const DRAWER_CARD_STYLES = ['gl-border-b-0', '!gl-pt-6', '!gl-pb-0', 'gl-leading-20'];
+import FirstPipelineSection from './sections/first_pipeline_section.vue';
+import GettingStartedSection from './sections/getting_started_section.vue';
+import GitlabUniversitySection from './sections/gitlab_university_section.vue';
+import PipelineConfigReferenceSection from './sections/pipeline_config_reference_section.vue';
+import VisualizeAndLintSection from './sections/visualize_and_lint_section.vue';
 
 export default {
-  DRAWER_CARD_STYLES,
   i18n: {
     title: __('Help'),
   },
   components: {
-    FirstPipelineCard,
-    GettingStartedCard,
-    GitlabUniversityCard,
+    FirstPipelineSection,
+    GettingStartedSection,
+    GitlabUniversitySection,
     GlDrawer,
-    PipelineConfigReferenceCard,
-    VisualizeAndLintCard,
+    PipelineConfigReferenceSection,
+    VisualizeAndLintSection,
   },
   props: {
     isVisible: {
@@ -60,11 +57,11 @@ export default {
       <h2 class="gl-m-0 gl-text-lg">{{ $options.i18n.title }}</h2>
     </template>
     <div class="gl-mb-5">
-      <getting-started-card :class="$options.DRAWER_CARD_STYLES" />
-      <first-pipeline-card :class="$options.DRAWER_CARD_STYLES" />
-      <visualize-and-lint-card :class="$options.DRAWER_CARD_STYLES" />
-      <pipeline-config-reference-card :class="$options.DRAWER_CARD_STYLES" />
-      <gitlab-university-card :class="$options.DRAWER_CARD_STYLES" />
+      <getting-started-section />
+      <first-pipeline-section />
+      <visualize-and-lint-section />
+      <pipeline-config-reference-section />
+      <gitlab-university-section />
     </div>
   </gl-drawer>
 </template>

app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer_section.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+  props: {
+    emoji: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-pb-6 gl-leading-20">
+    <span class="gl-flex gl-items-baseline">
+      <gl-emoji class="gl-mr-3" :data-name="emoji" data-testid="title-emoji" />
+      <h4 class="gl-text-lg">{{ title }}</h4>
+    </span>
+    <slot></slot>
+  </div>
+</template>

app/assets/javascripts/ci/pipeline_editor/components/drawer/cards/first_pipeline_card.vue renamed to app/assets/javascripts/ci/pipeline_editor/components/drawer/sections/first_pipeline_section.vue

@@ -4,10 +4,11 @@ import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import { DOCS_URL } from 'jh_else_ce/lib/utils/url_utility';
 import { pipelineEditorTrackingOptions } from '../../../constants';
+import PipelineEditorDrawerSection from '../pipeline_editor_drawer_section.vue';
 
 export default {
   i18n: {
-    title: s__('PipelineEditorTutorial|🚀 Run your first pipeline'),
+    title: s__('PipelineEditorTutorial|Run your first pipeline'),
     firstParagraph: s__(
       'PipelineEditorTutorial|This template creates a simple test pipeline. To use it:',
     ),
@@ -27,6 +28,7 @@ export default {
   components: {
     GlLink,
     GlSprintf,
+    PipelineEditorDrawerSection,
   },
   mixins: [Tracking.mixin()],
   methods: {
@@ -39,8 +41,7 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <h3 class="gl-mb-5 gl-mt-0 gl-text-lg">{{ $options.i18n.title }}</h3>
+  <pipeline-editor-drawer-section emoji="rocket" :title="$options.i18n.title">
     <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p>
     <ol class="gl-mb-3">
       <li v-for="(item, i) in $options.i18n.listItems" :key="`li-${i}`">{{ item }}</li>
@@ -54,5 +55,5 @@ export default {
         </template>
       </gl-sprintf>
     </p>
-  </div>
+  </pipeline-editor-drawer-section>
 </template>

app/assets/javascripts/ci/pipeline_editor/components/drawer/cards/getting_started_card.vue renamed to app/assets/javascripts/ci/pipeline_editor/components/drawer/sections/getting_started_section.vue

@@ -1,6 +1,7 @@
 <script>
 import { GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import PipelineEditorDrawerSection from '../pipeline_editor_drawer_section.vue';
 
 export default {
   i18n: {
@@ -14,12 +15,12 @@ export default {
   },
   components: {
     GlSprintf,
+    PipelineEditorDrawerSection,
   },
 };
 </script>
 <template>
-  <div>
-    <h3 class="gl-mb-5 gl-mt-0 gl-text-lg">{{ $options.i18n.title }}</h3>
+  <pipeline-editor-drawer-section emoji="wave" :title="$options.i18n.title">
     <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p>
     <p class="gl-mb-0">
       <gl-sprintf :message="$options.i18n.secondParagraph">
@@ -28,5 +29,5 @@ export default {
         </template>
       </gl-sprintf>
     </p>
-  </div>
+  </pipeline-editor-drawer-section>
 </template>

app/assets/javascripts/ci/pipeline_editor/components/drawer/cards/gitlab_university_card.vue renamed to app/assets/javascripts/ci/pipeline_editor/components/drawer/sections/gitlab_university_section.vue

@@ -3,20 +3,22 @@ import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import { GITLAB_UNIVERSITY_LINK, pipelineEditorTrackingOptions } from '../../../constants';
+import PipelineEditorDrawerSection from '../pipeline_editor_drawer_section.vue';
 
 export default {
   name: 'GitLabUniversityCard',
   GITLAB_UNIVERSITY_LINK,
   GITLAB_UNIVERSITY_URL: 'https://university.gitlab.com/pages/ci-cd-content',
   i18n: {
-    title: s__('PipelineEditorTutorial|🎓 Learn CI/CD with GitLab University'),
+    title: s__('PipelineEditorTutorial|Learn CI/CD with GitLab University'),
     body: s__(
-      'PipelineEditorTutorial|Learn how to set up and use GitLab CI/CD with guided tutorials, videos, and best practices in %{linkStart}GitLab University%{linkEnd}.',
+      'PipelineEditorTutorial|Learn how to set up and use GitLab CI/CD with guided tutorials, videos, and best practices in %{linkStart}GitLab University.%{linkEnd}',
     ),
   },
   components: {
     GlLink,
     GlSprintf,
+    PipelineEditorDrawerSection,
   },
   mixins: [Tracking.mixin()],
   methods: {
@@ -28,8 +30,7 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <h3 class="gl-mb-5 gl-mt-0 gl-text-lg">{{ $options.i18n.title }}</h3>
+  <pipeline-editor-drawer-section emoji="mortar_board" :title="$options.i18n.title">
     <p class="gl-mb-0">
       <gl-sprintf :message="$options.i18n.body">
         <template #link="{ content }">
@@ -43,5 +44,5 @@ export default {
         </template>
       </gl-sprintf>
     </p>
-  </div>
+  </pipeline-editor-drawer-section>
 </template>

app/assets/javascripts/ci/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue renamed to app/assets/javascripts/ci/pipeline_editor/components/drawer/sections/pipeline_config_reference_section.vue

@@ -9,14 +9,15 @@ import {
   CI_YAML_LINK,
   pipelineEditorTrackingOptions,
 } from '../../../constants';
+import PipelineEditorDrawerSection from '../pipeline_editor_drawer_section.vue';
 
 export default {
   CI_EXAMPLES_LINK,
   CI_HELP_LINK,
   CI_NEEDS_LINK,
   CI_YAML_LINK,
   i18n: {
-    title: s__('PipelineEditorTutorial|⚙️ Pipeline configuration reference'),
+    title: s__('PipelineEditorTutorial|Pipeline configuration reference'),
     firstParagraph: s__('PipelineEditorTutorial|Resources to help with your CI/CD configuration:'),
     browseExamples: s__(
       'PipelineEditorTutorial|Browse %{linkStart}CI/CD examples and templates%{linkEnd}',
@@ -34,6 +35,7 @@ export default {
   components: {
     GlLink,
     GlSprintf,
+    PipelineEditorDrawerSection,
   },
   mixins: [Tracking.mixin()],
   inject: ['ciExamplesHelpPagePath', 'ciHelpPagePath', 'needsHelpPagePath', 'ymlHelpPagePath'],
@@ -46,8 +48,7 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <h3 class="gl-mb-5 gl-mt-0 gl-text-lg">{{ $options.i18n.title }}</h3>
+  <pipeline-editor-drawer-section emoji="gear" :title="$options.i18n.title">
     <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p>
     <ul class="gl-mb-0">
       <li>
@@ -56,6 +57,7 @@ export default {
             <gl-link
               :href="ciExamplesHelpPagePath"
               target="_blank"
+              data-testid="ci-examples-link"
               @click="trackHelpPageClick($options.CI_EXAMPLES_LINK)"
             >
               {{ content }}
@@ -69,6 +71,7 @@ export default {
             <gl-link
               :href="ymlHelpPagePath"
               target="_blank"
+              data-testid="ci-yaml-link"
               @click="trackHelpPageClick($options.CI_YAML_LINK)"
             >
               {{ content }}
@@ -82,6 +85,7 @@ export default {
             <gl-link
               :href="ciHelpPagePath"
               target="_blank"
+              data-testid="ci-help-link"
               @click="trackHelpPageClick($options.CI_HELP_LINK)"
             >
               {{ content }}
@@ -95,6 +99,7 @@ export default {
             <gl-link
               :href="needsHelpPagePath"
               target="_blank"
+              data-testid="ci-needs-link"
               @click="trackHelpPageClick($options.CI_NEEDS_LINK)"
             >
               {{ content }}
@@ -103,5 +108,5 @@ export default {
         </gl-sprintf>
       </li>
     </ul>
-  </div>
+  </pipeline-editor-drawer-section>
 </template>

app/assets/javascripts/ci/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue renamed to app/assets/javascripts/ci/pipeline_editor/components/drawer/sections/visualize_and_lint_section.vue

@@ -1,18 +1,21 @@
 <script>
 import { s__ } from '~/locale';
+import PipelineEditorDrawerSection from '../pipeline_editor_drawer_section.vue';
 
 export default {
   i18n: {
-    title: s__('PipelineEditorTutorial|💡 Tip: Visualize and validate your pipeline'),
+    title: s__('PipelineEditorTutorial|Tip: Visualize and validate your pipeline'),
     firstParagraph: s__(
       'PipelineEditorTutorial|Use the Visualize and Lint tabs in the pipeline editor to visualize your pipeline and check for any errors or warnings before committing your changes.',
     ),
   },
+  components: {
+    PipelineEditorDrawerSection,
+  },
 };
 </script>
 <template>
-  <div>
-    <h3 class="gl-mb-5 gl-mt-0 gl-text-lg">{{ $options.i18n.title }}</h3>
+  <pipeline-editor-drawer-section emoji="bulb" :title="$options.i18n.title">
     <p class="gl-mb-0">{{ $options.i18n.firstParagraph }}</p>
-  </div>
+  </pipeline-editor-drawer-section>
 </template>

app/assets/javascripts/emoji/components/utils.js

@@ -1,6 +1,6 @@
 import { chunk, memoize, uniq } from 'lodash';
 import { getCookie, removeCookie } from '~/lib/utils/common_utils';
-import { initEmojiMap, getEmojiCategoryMap, getAllEmoji, loadCustomEmojiWithNames } from '~/emoji';
+import { initEmojiMap, getEmojiCategoryMap, getAllEmoji, getEmojisForCategory } from '~/emoji';
 import {
   EMOJIS_PER_ROW,
   EMOJI_ROW_HEIGHT,
@@ -35,8 +35,8 @@ export const getFrequentlyUsedEmojis = async () => {
     swapCookieToLocalStorage();
   }
 
-  const customEmoji = await loadCustomEmojiWithNames();
-  const possibleEmojiNames = [...customEmoji.names, ...getAllEmoji().map((e) => e.n)];
+  const customEmoji = await getEmojisForCategory('custom');
+  const possibleEmojiNames = [...customEmoji.map((e) => e.name), ...getAllEmoji().map((e) => e.n)];
 
   const emojis = chunk(
     uniq(savedEmojis.split(',')).filter((name) => possibleEmojiNames.includes(name)),

app/assets/javascripts/emoji/index.js

@@ -331,3 +331,9 @@ export function glEmojiTag(inputName, options) {
     name,
   )}"></gl-emoji>`;
 }
+
+export const getEmojisForCategory = async (category) => {
+  await initEmojiMap.promise;
+
+  return Object.values(emojiMap).filter((e) => e.c === category);
+};