diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 13:00:54 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 13:00:54 +0300 |
commit | 3cccd102ba543e02725d247893729e5c73b38295 (patch) | |
tree | f36a04ec38517f5deaaacb5acc7d949688d1e187 /app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue | |
parent | 205943281328046ef7b4528031b90fbda70c75ac (diff) |
Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42
Diffstat (limited to 'app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue')
-rw-r--r-- | app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue | 100 |
1 files changed, 69 insertions, 31 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 573f996a254..1667f2c3576 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,55 @@ 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" + data-track-experiment="video_tutorials_continuous_onboarding" + /> + </template> + </gitlab-experiment> + </div> </div> </template> |