diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-19 03:09:03 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-19 03:09:03 +0300 |
commit | cd49d91db362a479c1b53de07741713f7e7ea2cc (patch) | |
tree | 6d5f244f9d6e805a15ffc93172454788658af1d7 /app/assets/javascripts/pages | |
parent | 705210af74e93f829f59e00f311cba07ea8bd5c7 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pages')
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'), |