Merge branch '486985-frontend-add-links-to-gl-university' into 'master'

GL University links Part 1 - Add GitLab University link to pipeline editor

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/169327



Merged-by: Jiaan Louw <3468028-jiaan@users.noreply.gitlab.com>
Approved-by: Thomas Hutterer <thutterer@gitlab.com>
Approved-by: Sunjung Park <spark@gitlab.com>
Approved-by: Jiaan Louw <3468028-jiaan@users.noreply.gitlab.com>
Reviewed-by: Jiaan Louw <3468028-jiaan@users.noreply.gitlab.com>
Reviewed-by: Thomas Hutterer <thutterer@gitlab.com>
Co-authored-by: Briley Sandlin <bsandlin@gitlab.com>

app/assets/javascripts/ci/pipeline_editor/components/drawer/cards/gitlab_university_card.vue

+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import Tracking from '~/tracking';
+import { GITLAB_UNIVERSITY_LINK, pipelineEditorTrackingOptions } from '../../../constants';
+
+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'),
+    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}.',
+    ),
+  },
+  components: {
+    GlLink,
+    GlSprintf,
+  },
+  mixins: [Tracking.mixin()],
+  methods: {
+    trackHelpPageClick() {
+      const { label, actions } = pipelineEditorTrackingOptions;
+      this.track(actions.helpDrawerLinks[this.$options.GITLAB_UNIVERSITY_LINK], { label });
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <h3 class="gl-mb-5 gl-mt-0 gl-text-lg">{{ $options.i18n.title }}</h3>
+    <p class="gl-mb-0">
+      <gl-sprintf :message="$options.i18n.body">
+        <template #link="{ content }">
+          <gl-link
+            :href="$options.GITLAB_UNIVERSITY_URL"
+            target="_blank"
+            @click="trackHelpPageClick"
+          >
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+  </div>
+</template>

app/assets/javascripts/ci/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue

@@ -49,7 +49,7 @@ export default {
   <div>
     <h3 class="gl-mb-5 gl-mt-0 gl-text-lg">{{ $options.i18n.title }}</h3>
     <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p>
-    <ul>
+    <ul class="gl-mb-0">
       <li>
         <gl-sprintf :message="$options.i18n.browseExamples">
           <template #link="{ content }">

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

@@ -6,6 +6,7 @@ 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';
@@ -19,6 +20,7 @@ export default {
   components: {
     FirstPipelineCard,
     GettingStartedCard,
+    GitlabUniversityCard,
     GlDrawer,
     PipelineConfigReferenceCard,
     VisualizeAndLintCard,
@@ -57,9 +59,12 @@ export default {
     <template #title>
       <h2 class="gl-m-0 gl-text-lg">{{ $options.i18n.title }}</h2>
     </template>
-    <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" />
+    <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" />
+    </div>
   </gl-drawer>
 </template>

app/assets/javascripts/ci/pipeline_editor/constants.js

@@ -67,6 +67,7 @@ export const CI_HELP_LINK = 'CI_HELP_LINK';
 export const CI_NEEDS_LINK = 'CI_NEEDS_LINK';
 export const CI_RUNNERS_LINK = 'CI_RUNNERS_LINK';
 export const CI_YAML_LINK = 'CI_YAML_LINK';
+export const GITLAB_UNIVERSITY_LINK = 'GITLAB_UNIVERSITY_LINK';
 export const pipelineEditorTrackingOptions = {
   label: 'pipeline_editor',
@@ -81,6 +82,7 @@ export const pipelineEditorTrackingOptions = {
       [CI_NEEDS_LINK]: 'visit_help_drawer_link_needs',
       [CI_RUNNERS_LINK]: 'visit_help_drawer_link_runners',
       [CI_YAML_LINK]: 'visit_help_drawer_link_yaml',
+      [GITLAB_UNIVERSITY_LINK]: 'visit_help_drawer_link_gitlab_university',
     },
     openHelpDrawer: 'open_help_drawer',
     resimulatePipeline: 'resimulate_pipeline',

locale/gitlab.pot

@@ -39908,6 +39908,9 @@ msgstr ""
 msgid "PipelineEditorTutorial|If you’re using a self-managed GitLab instance, %{linkStart}make sure your instance has runners available.%{linkEnd}"
 msgstr ""
+msgid "PipelineEditorTutorial|Learn how to set up and use GitLab CI/CD with guided tutorials, videos, and best practices in %{linkStart}GitLab University%{linkEnd}."
+msgstr ""
+
 msgid "PipelineEditorTutorial|Learn more about %{linkStart}GitLab CI/CD concepts%{linkEnd}"
 msgstr ""
@@ -39938,6 +39941,9 @@ msgstr ""
 msgid "PipelineEditorTutorial|⚙️ Pipeline configuration reference"
 msgstr ""
+msgid "PipelineEditorTutorial|🎓 Learn CI/CD with GitLab University"
+msgstr ""
+
 msgid "PipelineEditorTutorial|💡 Tip: Visualize and validate your pipeline"
 msgstr ""

spec/frontend/ci/pipeline_editor/components/drawer/cards/gitlab_university_card_spec.js

+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import GitlabUniversityCard from '~/ci/pipeline_editor/components/drawer/cards/gitlab_university_card.vue';
+
+describe('GitLab University card', () => {
+  let wrapper;
+  const GITLAB_UNIVERSITY_LINK = 'https://university.gitlab.com/pages/ci-cd-content';
+
+  const createComponent = () => {
+    wrapper = shallowMount(GitlabUniversityCard, {
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  const findGitLabUniversityLink = () => wrapper.findComponent(GlLink);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders the title', () => {
+    expect(wrapper.text()).toContain('Learn CI/CD with GitLab University');
+  });
+
+  it('renders the body text', () => {
+    expect(wrapper.text()).toContain('Learn how to set up and use GitLab CI/CD');
+  });
+
+  it('renders the link', () => {
+    expect(findGitLabUniversityLink().exists()).toBe(true);
+  });
+
+  it('links to the correct URL', () => {
+    expect(findGitLabUniversityLink().attributes().href).toBe(GITLAB_UNIVERSITY_LINK);
+  });
+});