summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/pages/projects/learn_gitlab
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/pages/projects/learn_gitlab')
-rw-r--r--app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue (renamed from app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue)0
-rw-r--r--app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue116
-rw-r--r--app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue2
-rw-r--r--app/assets/javascripts/pages/projects/learn_gitlab/index/index.js10
4 files changed, 3 insertions, 125 deletions
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
index 51980b2d971..51980b2d971 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue
deleted file mode 100644
index 8f92ce95dbf..00000000000
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script>
-import { GlProgressBar, GlSprintf } from '@gitlab/ui';
-import { pick } from 'lodash';
-import { s__ } from '~/locale';
-import { ACTION_LABELS } from '../constants';
-import LearnGitlabInfoCard from './learn_gitlab_info_card.vue';
-
-export default {
- components: { LearnGitlabInfoCard, GlProgressBar, GlSprintf },
- i18n: {
- title: s__('LearnGitLab|Learn GitLab'),
- description: s__(
- 'LearnGitLab|Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project.',
- ),
- percentageCompleted: s__(`LearnGitLab|%{percentage}%{percentSymbol} completed`),
- workspace: {
- title: s__('LearnGitLab|Set up your workspace'),
- description: s__(
- "LearnGitLab|Complete these tasks first so you can enjoy GitLab's features to their fullest:",
- ),
- },
- plan: {
- title: s__('LearnGitLab|Plan and execute'),
- description: s__(
- 'LearnGitLab|Create a workflow for your new workspace, and learn how GitLab features work together:',
- ),
- },
- deploy: {
- title: s__('LearnGitLab|Deploy'),
- description: s__(
- 'LearnGitLab|Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:',
- ),
- },
- },
- props: {
- actions: {
- required: true,
- type: Object,
- },
- },
- maxValue: Object.keys(ACTION_LABELS).length,
- methods: {
- infoProps(action) {
- return {
- ...this.actions[action],
- ...pick(ACTION_LABELS[action], ['title', 'actionLabel', 'description', 'trialRequired']),
- };
- },
- progressValue() {
- return Object.values(this.actions).filter((a) => a.completed).length;
- },
- progressPercentage() {
- return Math.round((this.progressValue() / this.$options.maxValue) * 100);
- },
- },
-};
-</script>
-<template>
- <div>
- <div class="row">
- <div class="gl-mb-7 col-md-8 col-lg-7">
- <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
- <p class="gl-text-gray-700 gl-mb-0">{{ $options.i18n.description }}</p>
- </div>
- </div>
-
- <div class="gl-mb-3">
- <p class="gl-text-gray-500 gl-mb-2" data-testid="completion-percentage">
- <gl-sprintf :message="$options.i18n.percentageCompleted">
- <template #percentage>{{ progressPercentage() }}</template>
- <template #percentSymbol>%</template>
- </gl-sprintf>
- </p>
- <gl-progress-bar :value="progressValue()" :max="$options.maxValue" />
- </div>
-
- <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n.workspace.title }}</h2>
- <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n.workspace.description }}</p>
-
- <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4">
- <div class="col gl-mb-6"><learn-gitlab-info-card v-bind="infoProps('userAdded')" /></div>
- <div class="col gl-mb-6"><learn-gitlab-info-card v-bind="infoProps('gitWrite')" /></div>
- <div class="col gl-mb-6">
- <learn-gitlab-info-card v-bind="infoProps('pipelineCreated')" />
- </div>
- <div class="col gl-mb-6"><learn-gitlab-info-card v-bind="infoProps('trialStarted')" /></div>
- <div class="col gl-mb-6">
- <learn-gitlab-info-card v-bind="infoProps('codeOwnersEnabled')" />
- </div>
- <div class="col gl-mb-6">
- <learn-gitlab-info-card v-bind="infoProps('requiredMrApprovalsEnabled')" />
- </div>
- </div>
-
- <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n.plan.title }}</h2>
- <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n.plan.description }}</p>
-
- <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4">
- <div class="col gl-mb-6">
- <learn-gitlab-info-card v-bind="infoProps('issueCreated')" />
- </div>
- <div class="col gl-mb-6">
- <learn-gitlab-info-card v-bind="infoProps('mergeRequestCreated')" />
- </div>
- </div>
-
- <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n.deploy.title }}</h2>
- <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n.deploy.description }}</p>
-
- <div class="row row-cols-2 row-cols-lg-4 g-2 g-lg-3">
- <div class="col gl-mb-6">
- <learn-gitlab-info-card v-bind="infoProps('securityScanEnabled')" />
- </div>
- </div>
- </div>
-</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 3d31ac6c267..69fb5878f5c 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
@@ -39,7 +39,7 @@ export default {
:href="value.url"
data-track-action="click_link"
:data-track-label="$options.i18n.ACTION_LABELS[action].title"
- data-track-property="Growth::Conversion::Experiment::LearnGitLabA"
+ data-track-property="Growth::Conversion::Experiment::LearnGitLab"
>
{{ $options.i18n.ACTION_LABELS[action].title }}
</gl-link>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
index ac7c94bdd9e..6da0a8fd212 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
@@ -1,8 +1,6 @@
import Vue from 'vue';
-import trackLearnGitlab from '~/learn_gitlab/track_learn_gitlab';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import LearnGitlabA from '../components/learn_gitlab_a.vue';
-import LearnGitlabB from '../components/learn_gitlab_b.vue';
+import LearnGitlab from '../components/learn_gitlab.vue';
function initLearnGitlab() {
const el = document.getElementById('js-learn-gitlab-app');
@@ -14,14 +12,10 @@ function initLearnGitlab() {
const actions = convertObjectPropsToCamelCase(JSON.parse(el.dataset.actions));
const sections = convertObjectPropsToCamelCase(JSON.parse(el.dataset.sections));
- const { learnGitlabA } = gon.experiments;
-
- trackLearnGitlab(learnGitlabA);
-
return new Vue({
el,
render(createElement) {
- return createElement(learnGitlabA ? LearnGitlabA : LearnGitlabB, {
+ return createElement(LearnGitlab, {
props: { actions, sections },
});
},