1 files changed, 35 insertions, 38 deletions

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 1912477758b..4eab0cccb06 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
@@ -6,6 +6,7 @@ import { isExperimentVariant } from '~/experimentation/utils';
 import eventHub from '~/invite_members/event_hub';
 import { s__, __ } from '~/locale';
 import { ACTION_LABELS } from '../constants';
+import IncludedInTrialIndicator from './included_in_trial_indicator.vue';
 
 export default {
   name: 'LearnGitlabSectionLink',
@@ -15,12 +16,12 @@ export default {
     GlButton,
     GlPopover,
     GitlabExperiment,
+    IncludedInTrialIndicator,
   },
   directives: {
     GlTooltip,
   },
   i18n: {
-    trialOnly: s__('LearnGitlab|Trial only'),
     contactAdmin: s__('LearnGitlab|Contact your administrator to start a free Ultimate trial.'),
     viewAdminList: s__('LearnGitlab|View administrator list'),
     watchHow: __('Watch how'),
@@ -41,12 +42,6 @@ export default {
     };
   },
   computed: {
-    linkTitle() {
-      return ACTION_LABELS[this.action].title;
-    },
-    trialOnly() {
-      return ACTION_LABELS[this.action].trialRequired;
-    },
     showInviteModalLink() {
       return (
         this.action === 'userAdded' && isExperimentVariant('invite_for_help_continuous_onboarding')
@@ -55,49 +50,51 @@ export default {
     openInNewTab() {
       return ACTION_LABELS[this.action]?.openInNewTab === true || this.value.openInNewTab === true;
     },
-    linkToVideoTutorial() {
-      return ACTION_LABELS[this.action].videoTutorial;
-    },
   },
   methods: {
     openModal() {
       eventHub.$emit('openModal', { source: 'learn_gitlab' });
     },
+    actionLabelValue(value) {
+      return ACTION_LABELS[this.action][value];
+    },
   },
 };
 </script>
 <template>
   <div class="gl-mb-4">
-    <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 }}
+        {{ actionLabelValue('title') }}
+        <included-in-trial-indicator v-if="actionLabelValue('trialRequired')" />
       </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-if="value.enabled"
-        :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>
+      <div v-else-if="showInviteModalLink">
+        <gl-link
+          data-track-action="click_link"
+          :data-track-label="actionLabelValue('trackLabel')"
+          data-track-property="Growth::Activation::Experiment::InviteForHelpContinuousOnboarding"
+          data-testid="invite-for-help-continuous-onboarding-experiment-link"
+          @click="openModal"
+          >{{ actionLabelValue('title') }}</gl-link
+        >
+
+        <included-in-trial-indicator v-if="actionLabelValue('trialRequired')" />
+      </div>
+      <div v-else-if="value.enabled">
+        <gl-link
+          :target="openInNewTab ? '_blank' : '_self'"
+          :href="value.url"
+          data-testid="uncompleted-learn-gitlab-link"
+          data-track-action="click_link"
+          :data-track-label="actionLabelValue('trackLabel')"
+          >{{ actionLabelValue('title') }}</gl-link
+        >
+
+        <included-in-trial-indicator v-if="actionLabelValue('trialRequired')" />
+      </div>
       <template v-else>
-        <div data-testid="disabled-learn-gitlab-link">{{ linkTitle }}</div>
+        <div data-testid="disabled-learn-gitlab-link">{{ actionLabelValue('title') }}</div>
         <gl-button
           :id="popoverId"
           category="tertiary"
@@ -127,19 +124,19 @@ export default {
         <template #control></template>
         <template #candidate>
           <gl-button
-            v-if="linkToVideoTutorial"
+            v-if="actionLabelValue('videoTutorial')"
             v-gl-tooltip
             category="tertiary"
             icon="live-preview"
             :title="$options.i18n.watchHow"
             :aria-label="$options.i18n.watchHow"
-            :href="linkToVideoTutorial"
+            :href="actionLabelValue('videoTutorial')"
             target="_blank"
             class="ml-auto"
             size="small"
             data-testid="video-tutorial-link"
             data-track-action="click_video_link"
-            :data-track-label="linkTitle"
+            :data-track-label="actionLabelValue('trackLabel')"
             data-track-property="Growth::Conversion::Experiment::LearnGitLab"
             data-track-experiment="video_tutorials_continuous_onboarding"
           />