Add latest changes from gitlab-org/gitlab@master

4 files changed, 91 insertions, 42 deletions

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 67962d69fa5..db9ef4df8af 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 6a196687a76..e8f0e6c47ee 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 573f996a254..b391252ce28 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 1887c48dd1b..9ba5e17237a 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'),