diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
index 67962d69fa5ea1d06473a1d69731f9c125cfa7a6..db9ef4df8afaa93be4ec5fa453d5273943da0447 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
@@ -127,8 +127,12 @@ export default {
</p>
<gl-progress-bar :value="progressValue" :max="$options.maxValue" />
</div>
- <div class="row row-cols-1 row-cols-md-3 gl-mt-5">
- <div v-for="section in $options.actionSections" :key="section" class="col gl-mb-6">
+ <div class="row">
+ <div
+ v-for="section in $options.actionSections"
+ :key="section"
+ class="gl-mt-5 col-sm-12 col-mb-6 col-lg-4"
+ >
<learn-gitlab-section-card
:section="section"
:svg="svgFor(section)"
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue
index 6a196687a7601236a3cbfb8624db7d57047d8dcc..e8f0e6c47ee0eb8be7f4dd9eb9a7d6216d8c599f 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue
@@ -34,17 +34,23 @@ export default {
};
</script>
<template>
- <gl-card class="gl-pt-0 learn-gitlab-section-card">
- <div class="learn-gitlab-section-card-header">
+ <gl-card
+ class="gl-pt-0 h-100"
+ header-class="gl-bg-white gl-border-0 gl-pb-0"
+ body-class="gl-pt-0"
+ >
+ <template #header>
<img :src="svg" />
<h2 class="gl-font-lg gl-mb-3">{{ $options.i18n[section].title }}</h2>
<p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n[section].description }}</p>
- </div>
- <learn-gitlab-section-link
- v-for="[action, value] in sortedActions"
- :key="action"
- :action="action"
- :value="value"
- />
+ </template>
+ <template #default>
+ <learn-gitlab-section-link
+ v-for="[action, value] in sortedActions"
+ :key="action"
+ :action="action"
+ :value="value"
+ />
+ </template>
</gl-card>
</template>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
index 573f996a2542b2eef0b355f7014c6d82bbd8931f..b391252ce28b1fe17ef06132508f3195b2b89b37 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
@@ -1,16 +1,25 @@
<script>
-import { GlLink, GlIcon } from '@gitlab/ui';
+import { GlLink, GlIcon, GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
import { isExperimentVariant } from '~/experimentation/utils';
import eventHub from '~/invite_members/event_hub';
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
import { ACTION_LABELS } from '../constants';
export default {
name: 'LearnGitlabSectionLink',
- components: { GlLink, GlIcon },
+ components: {
+ GlLink,
+ GlIcon,
+ GlButton,
+ GitlabExperiment,
+ },
+ directives: {
+ GlTooltip,
+ },
i18n: {
- ACTION_LABELS,
trialOnly: s__('LearnGitlab|Trial only'),
+ watchHow: __('Watch how'),
},
props: {
action: {
@@ -23,6 +32,9 @@ export default {
},
},
computed: {
+ linkTitle() {
+ return ACTION_LABELS[this.action].title;
+ },
trialOnly() {
return ACTION_LABELS[this.action].trialRequired;
},
@@ -34,6 +46,9 @@ export default {
openInNewTab() {
return ACTION_LABELS[this.action]?.openInNewTab === true || this.value.openInNewTab === true;
},
+ linkToVideoTutorial() {
+ return ACTION_LABELS[this.action].videoTutorial;
+ },
},
methods: {
openModal() {
@@ -44,32 +59,54 @@ export default {
</script>
<template>
<div class="gl-mb-4">
- <span v-if="value.completed" class="gl-text-green-500">
- <gl-icon name="check-circle-filled" :size="16" data-testid="completed-icon" />
- {{ $options.i18n.ACTION_LABELS[action].title }}
- </span>
- <gl-link
- v-else-if="showInviteModalLink"
- data-track-action="click_link"
- :data-track-label="$options.i18n.ACTION_LABELS[action].title"
- data-track-property="Growth::Activation::Experiment::InviteForHelpContinuousOnboarding"
- data-testid="invite-for-help-continuous-onboarding-experiment-link"
- @click="openModal"
- >
- {{ $options.i18n.ACTION_LABELS[action].title }}
- </gl-link>
- <gl-link
- v-else
- :target="openInNewTab ? '_blank' : '_self'"
- :href="value.url"
- data-testid="uncompleted-learn-gitlab-link"
- data-track-action="click_link"
- :data-track-label="$options.i18n.ACTION_LABELS[action].title"
- >
- {{ $options.i18n.ACTION_LABELS[action].title }}
- </gl-link>
- <span v-if="trialOnly" class="gl-font-style-italic gl-text-gray-500" data-testid="trial-only">
- - {{ $options.i18n.trialOnly }}
- </span>
+ <div v-if="trialOnly" class="gl-font-style-italic gl-text-gray-500" data-testid="trial-only">
+ {{ $options.i18n.trialOnly }}
+ </div>
+ <div class="flex align-items-center">
+ <span v-if="value.completed" class="gl-text-green-500">
+ <gl-icon name="check-circle-filled" :size="16" data-testid="completed-icon" />
+ {{ linkTitle }}
+ </span>
+ <gl-link
+ v-else-if="showInviteModalLink"
+ data-track-action="click_link"
+ :data-track-label="linkTitle"
+ data-track-property="Growth::Activation::Experiment::InviteForHelpContinuousOnboarding"
+ data-testid="invite-for-help-continuous-onboarding-experiment-link"
+ @click="openModal"
+ >
+ {{ linkTitle }}
+ </gl-link>
+ <gl-link
+ v-else
+ :target="openInNewTab ? '_blank' : '_self'"
+ :href="value.url"
+ data-testid="uncompleted-learn-gitlab-link"
+ data-track-action="click_link"
+ :data-track-label="linkTitle"
+ >
+ {{ linkTitle }}
+ </gl-link>
+ <gitlab-experiment name="video_tutorials_continuous_onboarding">
+ <template #control></template>
+ <template #candidate>
+ <gl-button
+ v-if="linkToVideoTutorial"
+ v-gl-tooltip
+ category="tertiary"
+ icon="live-preview"
+ :title="$options.i18n.watchHow"
+ :aria-label="$options.i18n.watchHow"
+ :href="linkToVideoTutorial"
+ target="_blank"
+ class="ml-auto"
+ data-testid="video-tutorial-link"
+ data-track-action="click_video_link"
+ :data-track-label="linkTitle"
+ data-track-property="Growth::Conversion::Experiment::LearnGitLab"
+ />
+ </template>
+ </gitlab-experiment>
+ </div>
</div>
</template>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
index 1887c48dd1bf9eee68f78c54b0f100a06372d63c..9ba5e17237af8a9d178a906e6bb3f3592a516b5f 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
@@ -40,6 +40,7 @@ export const ACTION_LABELS = {
trialRequired: true,
section: 'workspace',
position: 4,
+ videoTutorial: 'https://vimeo.com/670896787',
},
requiredMrApprovalsEnabled: {
title: s__('LearnGitLab|Add merge request approval'),
@@ -48,6 +49,7 @@ export const ACTION_LABELS = {
trialRequired: true,
section: 'workspace',
position: 5,
+ videoTutorial: 'https://vimeo.com/670904904',
},
mergeRequestCreated: {
title: s__('LearnGitLab|Submit a merge request'),
diff --git a/app/assets/stylesheets/page_bundles/learn_gitlab.scss b/app/assets/stylesheets/page_bundles/learn_gitlab.scss
index 10a4a210d4183b53f2667f0c525fee22fd0be873..189aefb330bd86eb55cd6f1355d626f375efbc91 100644
--- a/app/assets/stylesheets/page_bundles/learn_gitlab.scss
+++ b/app/assets/stylesheets/page_bundles/learn_gitlab.scss
@@ -1,11 +1,3 @@
.learn-gitlab-info-card-content {
height: 200px;
}
-
-.learn-gitlab-section-card {
- height: 400px;
-}
-
-.learn-gitlab-section-card-header {
- height: 165px;
-}
diff --git a/app/controllers/projects/learn_gitlab_controller.rb b/app/controllers/projects/learn_gitlab_controller.rb
index 177533b89c87110ed730e2b35bc744e689adeb26..b9f9a1810b705e4e901ab708c68880bd1487970a 100644
--- a/app/controllers/projects/learn_gitlab_controller.rb
+++ b/app/controllers/projects/learn_gitlab_controller.rb
@@ -4,6 +4,7 @@ class Projects::LearnGitlabController < Projects::ApplicationController
before_action :authenticate_user!
before_action :check_experiment_enabled?
before_action :enable_invite_for_help_continuous_onboarding_experiment
+ before_action :enable_video_tutorials_continuous_onboarding_experiment
feature_category :users
@@ -24,4 +25,8 @@ def enable_invite_for_help_continuous_onboarding_experiment
e.publish_to_database
end
end
+
+ def enable_video_tutorials_continuous_onboarding_experiment
+ experiment(:video_tutorials_continuous_onboarding, namespace: project&.namespace).publish
+ end
end
diff --git a/app/experiments/video_tutorials_continuous_onboarding_experiment.rb b/app/experiments/video_tutorials_continuous_onboarding_experiment.rb
new file mode 100644
index 0000000000000000000000000000000000000000..3cb676b25f201c396c0a8b57e67c380292bd8c24
--- /dev/null
+++ b/app/experiments/video_tutorials_continuous_onboarding_experiment.rb
@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+class VideoTutorialsContinuousOnboardingExperiment < ApplicationExperiment
+ control { }
+ candidate { }
+end
diff --git a/config/feature_flags/experiment/video_tutorials_continuous_onboarding.yml b/config/feature_flags/experiment/video_tutorials_continuous_onboarding.yml
new file mode 100644
index 0000000000000000000000000000000000000000..6dc3f798f637c483784dd75e0ee418418ab86b6f
--- /dev/null
+++ b/config/feature_flags/experiment/video_tutorials_continuous_onboarding.yml
@@ -0,0 +1,8 @@
+---
+name: video_tutorials_continuous_onboarding
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/82274
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/351916
+milestone: '14.9'
+type: experiment
+group: group::adoption
+default_enabled: false
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index c71c614ebda11f32704d0b68c2800bd4ff9591d4..36f573bb5a3fb00f4e776ff761f5b3bed6aa31a3 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -41559,6 +41559,9 @@ msgstr ""
msgid "Warning: Synchronizing LDAP removes direct members' access."
msgstr ""
+msgid "Watch how"
+msgstr ""
+
msgid "We are currently unable to fetch data for the pipeline header."
msgstr ""
diff --git a/spec/experiments/video_tutorials_continuous_onboarding_experiment_spec.rb b/spec/experiments/video_tutorials_continuous_onboarding_experiment_spec.rb
new file mode 100644
index 0000000000000000000000000000000000000000..596791308a40a87dc132ba7eeb661fdf2bce22df
--- /dev/null
+++ b/spec/experiments/video_tutorials_continuous_onboarding_experiment_spec.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe VideoTutorialsContinuousOnboardingExperiment do
+ it "defines a control and candidate" do
+ expect(subject.behaviors.keys).to match_array(%w[control candidate])
+ end
+end
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
index 9e00ace761c528bd4f0990524de3a7eda1833c5d..83feb6214785a0c41559084d08d78f78670d1dab 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
+++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
@@ -2,31 +2,26 @@
exports[`Learn GitLab Section Card renders correctly 1`] = `
<gl-card-stub
- bodyclass=""
- class="gl-pt-0 learn-gitlab-section-card"
+ bodyclass="gl-pt-0"
+ class="gl-pt-0 h-100"
footerclass=""
- headerclass=""
+ headerclass="gl-bg-white gl-border-0 gl-pb-0"
>
- <div
- class="learn-gitlab-section-card-header"
+ <img
+ src="workspace.svg"
+ />
+
+ <h2
+ class="gl-font-lg gl-mb-3"
>
- <img
- src="workspace.svg"
- />
-
- <h2
- class="gl-font-lg gl-mb-3"
- >
- Set up your workspace
- </h2>
-
- <p
- class="gl-text-gray-700 gl-mb-6"
- >
- Complete these tasks first so you can enjoy GitLab's features to their fullest:
- </p>
- </div>
+ Set up your workspace
+ </h2>
+ <p
+ class="gl-text-gray-700 gl-mb-6"
+ >
+ Complete these tasks first so you can enjoy GitLab's features to their fullest:
+ </p>
<learn-gitlab-section-link-stub
action="userAdded"
value="[object Object]"
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
index 62cf769cffd7185158262e3a76a6cb160eaafcf5..269c7467c8b1b567e27db1b0d30e0909ad522305 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
+++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
@@ -51,170 +51,204 @@ exports[`Learn GitLab renders correctly 1`] = `
</div>
<div
- class="row row-cols-1 row-cols-md-3 gl-mt-5"
+ class="row"
>
<div
- class="col gl-mb-6"
+ class="gl-mt-5 col-sm-12 col-mb-6 col-lg-4"
>
<div
- class="gl-card gl-pt-0 learn-gitlab-section-card"
+ class="gl-card gl-pt-0 h-100"
>
- <!---->
-
<div
- class="gl-card-body"
+ class="gl-card-header gl-bg-white gl-border-0 gl-pb-0"
>
- <div
- class="learn-gitlab-section-card-header"
+ <img
+ src="workspace.svg"
+ />
+
+ <h2
+ class="gl-font-lg gl-mb-3"
>
- <img
- src="workspace.svg"
- />
-
- <h2
- class="gl-font-lg gl-mb-3"
- >
- Set up your workspace
- </h2>
-
- <p
- class="gl-text-gray-700 gl-mb-6"
- >
- Complete these tasks first so you can enjoy GitLab's features to their fullest:
- </p>
- </div>
+ Set up your workspace
+ </h2>
+ <p
+ class="gl-text-gray-700 gl-mb-6"
+ >
+ Complete these tasks first so you can enjoy GitLab's features to their fullest:
+ </p>
+ </div>
+
+ <div
+ class="gl-card-body gl-pt-0"
+ >
<div
class="gl-mb-4"
>
- <span
- class="gl-text-green-500"
+ <!---->
+
+ <div
+ class="flex align-items-center"
>
- <svg
- aria-hidden="true"
- class="gl-icon s16"
- data-testid="completed-icon"
- role="img"
+ <span
+ class="gl-text-green-500"
>
- <use
- href="#check-circle-filled"
- />
- </svg>
-
- Invite your colleagues
-
- </span>
-
- <!---->
+ <svg
+ aria-hidden="true"
+ class="gl-icon s16"
+ data-testid="completed-icon"
+ role="img"
+ >
+ <use
+ href="#check-circle-filled"
+ />
+ </svg>
+
+ Invite your colleagues
+
+ </span>
+
+ <!---->
+ </div>
</div>
<div
class="gl-mb-4"
>
- <span
- class="gl-text-green-500"
+ <!---->
+
+ <div
+ class="flex align-items-center"
>
- <svg
- aria-hidden="true"
- class="gl-icon s16"
- data-testid="completed-icon"
- role="img"
+ <span
+ class="gl-text-green-500"
>
- <use
- href="#check-circle-filled"
- />
- </svg>
-
- Create or import a repository
-
- </span>
-
- <!---->
+ <svg
+ aria-hidden="true"
+ class="gl-icon s16"
+ data-testid="completed-icon"
+ role="img"
+ >
+ <use
+ href="#check-circle-filled"
+ />
+ </svg>
+
+ Create or import a repository
+
+ </span>
+
+ <!---->
+ </div>
</div>
<div
class="gl-mb-4"
>
- <a
- class="gl-link"
- data-testid="uncompleted-learn-gitlab-link"
- data-track-action="click_link"
- data-track-label="Set up CI/CD"
- href="http://example.com/"
- target="_self"
- >
-
- Set up CI/CD
-
- </a>
-
<!---->
+
+ <div
+ class="flex align-items-center"
+ >
+ <a
+ class="gl-link"
+ data-testid="uncompleted-learn-gitlab-link"
+ data-track-action="click_link"
+ data-track-label="Set up CI/CD"
+ href="http://example.com/"
+ target="_self"
+ >
+
+ Set up CI/CD
+
+ </a>
+
+ <!---->
+ </div>
</div>
<div
class="gl-mb-4"
>
- <a
- class="gl-link"
- data-testid="uncompleted-learn-gitlab-link"
- data-track-action="click_link"
- data-track-label="Start a free Ultimate trial"
- href="http://example.com/"
- target="_self"
- >
-
- Start a free Ultimate trial
-
- </a>
-
<!---->
+
+ <div
+ class="flex align-items-center"
+ >
+ <a
+ class="gl-link"
+ data-testid="uncompleted-learn-gitlab-link"
+ data-track-action="click_link"
+ data-track-label="Start a free Ultimate trial"
+ href="http://example.com/"
+ target="_self"
+ >
+
+ Start a free Ultimate trial
+
+ </a>
+
+ <!---->
+ </div>
</div>
<div
class="gl-mb-4"
>
- <a
- class="gl-link"
- data-testid="uncompleted-learn-gitlab-link"
- data-track-action="click_link"
- data-track-label="Add code owners"
- href="http://example.com/"
- target="_self"
- >
-
- Add code owners
-
- </a>
-
- <span
+ <div
class="gl-font-style-italic gl-text-gray-500"
data-testid="trial-only"
>
- - Trial only
+ Trial only
- </span>
+ </div>
+
+ <div
+ class="flex align-items-center"
+ >
+ <a
+ class="gl-link"
+ data-testid="uncompleted-learn-gitlab-link"
+ data-track-action="click_link"
+ data-track-label="Add code owners"
+ href="http://example.com/"
+ target="_self"
+ >
+
+ Add code owners
+
+ </a>
+
+ <!---->
+ </div>
</div>
<div
class="gl-mb-4"
>
- <a
- class="gl-link"
- data-testid="uncompleted-learn-gitlab-link"
- data-track-action="click_link"
- data-track-label="Add merge request approval"
- href="http://example.com/"
- target="_self"
- >
-
- Add merge request approval
-
- </a>
-
- <span
+ <div
class="gl-font-style-italic gl-text-gray-500"
data-testid="trial-only"
>
- - Trial only
+ Trial only
- </span>
+ </div>
+
+ <div
+ class="flex align-items-center"
+ >
+ <a
+ class="gl-link"
+ data-testid="uncompleted-learn-gitlab-link"
+ data-track-action="click_link"
+ data-track-label="Add merge request approval"
+ href="http://example.com/"
+ target="_self"
+ >
+
+ Add merge request approval
+
+ </a>
+
+ <!---->
+ </div>
</div>
</div>
@@ -222,71 +256,81 @@ exports[`Learn GitLab renders correctly 1`] = `
</div>
</div>
<div
- class="col gl-mb-6"
+ class="gl-mt-5 col-sm-12 col-mb-6 col-lg-4"
>
<div
- class="gl-card gl-pt-0 learn-gitlab-section-card"
+ class="gl-card gl-pt-0 h-100"
>
- <!---->
-
<div
- class="gl-card-body"
+ class="gl-card-header gl-bg-white gl-border-0 gl-pb-0"
>
- <div
- class="learn-gitlab-section-card-header"
+ <img
+ src="plan.svg"
+ />
+
+ <h2
+ class="gl-font-lg gl-mb-3"
>
- <img
- src="plan.svg"
- />
-
- <h2
- class="gl-font-lg gl-mb-3"
- >
- Plan and execute
- </h2>
-
- <p
- class="gl-text-gray-700 gl-mb-6"
- >
- Create a workflow for your new workspace, and learn how GitLab features work together:
- </p>
- </div>
+ Plan and execute
+ </h2>
+ <p
+ class="gl-text-gray-700 gl-mb-6"
+ >
+ Create a workflow for your new workspace, and learn how GitLab features work together:
+ </p>
+ </div>
+
+ <div
+ class="gl-card-body gl-pt-0"
+ >
<div
class="gl-mb-4"
>
- <a
- class="gl-link"
- data-testid="uncompleted-learn-gitlab-link"
- data-track-action="click_link"
- data-track-label="Create an issue"
- href="http://example.com/"
- target="_self"
- >
-
- Create an issue
-
- </a>
-
<!---->
+
+ <div
+ class="flex align-items-center"
+ >
+ <a
+ class="gl-link"
+ data-testid="uncompleted-learn-gitlab-link"
+ data-track-action="click_link"
+ data-track-label="Create an issue"
+ href="http://example.com/"
+ target="_self"
+ >
+
+ Create an issue
+
+ </a>
+
+ <!---->
+ </div>
</div>
<div
class="gl-mb-4"
>
- <a
- class="gl-link"
- data-testid="uncompleted-learn-gitlab-link"
- data-track-action="click_link"
- data-track-label="Submit a merge request"
- href="http://example.com/"
- target="_self"
- >
-
- Submit a merge request
-
- </a>
-
<!---->
+
+ <div
+ class="flex align-items-center"
+ >
+ <a
+ class="gl-link"
+ data-testid="uncompleted-learn-gitlab-link"
+ data-track-action="click_link"
+ data-track-label="Submit a merge request"
+ href="http://example.com/"
+ target="_self"
+ >
+
+ Submit a merge request
+
+ </a>
+
+ <!---->
+ </div>
</div>
</div>
@@ -294,54 +338,58 @@ exports[`Learn GitLab renders correctly 1`] = `
</div>
</div>
<div
- class="col gl-mb-6"
+ class="gl-mt-5 col-sm-12 col-mb-6 col-lg-4"
>
<div
- class="gl-card gl-pt-0 learn-gitlab-section-card"
+ class="gl-card gl-pt-0 h-100"
>
- <!---->
-
<div
- class="gl-card-body"
+ class="gl-card-header gl-bg-white gl-border-0 gl-pb-0"
>
- <div
- class="learn-gitlab-section-card-header"
+ <img
+ src="deploy.svg"
+ />
+
+ <h2
+ class="gl-font-lg gl-mb-3"
>
- <img
- src="deploy.svg"
- />
-
- <h2
- class="gl-font-lg gl-mb-3"
- >
- Deploy
- </h2>
-
- <p
- class="gl-text-gray-700 gl-mb-6"
- >
- Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:
- </p>
- </div>
+ Deploy
+ </h2>
+ <p
+ class="gl-text-gray-700 gl-mb-6"
+ >
+ Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:
+ </p>
+ </div>
+
+ <div
+ class="gl-card-body gl-pt-0"
+ >
<div
class="gl-mb-4"
>
- <a
- class="gl-link"
- data-testid="uncompleted-learn-gitlab-link"
- data-track-action="click_link"
- data-track-label="Run a Security scan using CI/CD"
- href="https://docs.gitlab.com/ee/foobar/"
- rel="noopener noreferrer"
- target="_blank"
- >
-
- Run a Security scan using CI/CD
-
- </a>
-
<!---->
+
+ <div
+ class="flex align-items-center"
+ >
+ <a
+ class="gl-link"
+ data-testid="uncompleted-learn-gitlab-link"
+ data-track-action="click_link"
+ data-track-label="Run a Security scan using CI/CD"
+ href="https://docs.gitlab.com/ee/foobar/"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+
+ Run a Security scan using CI/CD
+
+ </a>
+
+ <!---->
+ </div>
</div>
</div>
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js
index e21371123e8e4d95a38039e0964f1bb980d22873..551c68a99ab42c80762d20423b20c9bd31ff85da 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js
@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import { stubExperiments } from 'helpers/experimentation_helper';
import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper';
import eventHub from '~/invite_members/event_hub';
@@ -26,7 +26,7 @@ describe('Learn GitLab Section Link', () => {
});
const createWrapper = (action = defaultAction, props = {}) => {
- wrapper = shallowMount(LearnGitlabSectionLink, {
+ wrapper = mount(LearnGitlabSectionLink, {
propsData: { action, value: { ...defaultProps, ...props } },
});
};
@@ -36,6 +36,8 @@ describe('Learn GitLab Section Link', () => {
const findUncompletedLink = () => wrapper.find('[data-testid="uncompleted-learn-gitlab-link"]');
+ const videoTutorialLink = () => wrapper.find('[data-testid="video-tutorial-link"]');
+
it('renders no icon when not completed', () => {
createWrapper(undefined, { completed: false });
@@ -130,4 +132,44 @@ describe('Learn GitLab Section Link', () => {
unmockTracking();
});
});
+
+ describe('video_tutorials_continuous_onboarding experiment', () => {
+ describe('when control', () => {
+ beforeEach(() => {
+ stubExperiments({ video_tutorials_continuous_onboarding: 'control' });
+ createWrapper('codeOwnersEnabled');
+ });
+
+ it('renders no video link', () => {
+ expect(videoTutorialLink().exists()).toBe(false);
+ });
+ });
+
+ describe('when candidate', () => {
+ beforeEach(() => {
+ stubExperiments({ video_tutorials_continuous_onboarding: 'candidate' });
+ createWrapper('codeOwnersEnabled');
+ });
+
+ it('renders video link with blank target', () => {
+ const videoLinkElement = videoTutorialLink();
+
+ expect(videoLinkElement.exists()).toBe(true);
+ expect(videoLinkElement.attributes('target')).toEqual('_blank');
+ });
+
+ it('tracks the click', () => {
+ const trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+
+ videoTutorialLink().trigger('click');
+
+ expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_video_link', {
+ label: 'Add code owners',
+ property: 'Growth::Conversion::Experiment::LearnGitLab',
+ });
+
+ unmockTracking();
+ });
+ });
+ });
});