Skip to content

G
gitlab-ce
Commit 218571ef authored by Jose Ivan Vargas's avatar Jose Ivan Vargas
Browse files
Options

Merge branch 'nicolasdular/learn-gitlab-design-b' into 'master' 

Introduce learn gitlab design b

See merge request gitlab-org/gitlab!54443
parents 38dbdc4a 8e5969d2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1234 additions and 189 deletions
app/assets/images/learn_gitlab/code_owners_enabled.svg 0 → 100644
View file @ 218571ef
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z" fill="white" stroke="#C2B7E6" stroke-width="2"/>
<path d="M1.16748 12.3359C2.88075 11.7701 4.4618 10.8635 5.81545 9.67055C7.16911 8.47763 8.26738 7.02313 9.04415 5.39461M6.94481 2.60461C9.28681 6.43995 13.5115 8.99995 18.3335 8.99995C20.2715 8.99995 22.1135 8.58661 23.7748 7.84261L6.94481 2.60461Z" stroke="#C2B7E6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1176 15.8941H15.7647C15.7647 17.447 14.4941 18.7176 12.9412 18.7176C11.3882 18.7176 10.1176 17.447 10.1176 15.8941ZM9.05882 15.1882C8.47294 15.1882 8 14.7153 8 14.1294C8 13.5435 8.47294 13.0706 9.05882 13.0706C9.64471 13.0706 10.1176 13.5435 10.1176 14.1294C10.1176 14.7153 9.64471 15.1882 9.05882 15.1882ZM16.8235 15.1882C16.2376 15.1882 15.7647 14.7153 15.7647 14.1294C15.7647 13.5435 16.2376 13.0706 16.8235 13.0706C17.4094 13.0706 17.8824 13.5435 17.8824 14.1294C17.8824 14.7153 17.4094 15.1882 16.8235 15.1882Z" fill="#6B4FBB"/>
</svg>
app/assets/images/learn_gitlab/git_write.svg 0 → 100644
View file @ 218571ef
<svg width="40" height="39" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M32.2886 3.99573H37.8624C38.1834 3.99573 38.4435 4.25587 38.4435 4.57679V33.9598C38.4435 34.2808 38.1834 34.5409 37.8624 34.5409H32.2886V3.99573Z" fill="#F0F0F0" stroke="#DBDBDB" stroke-width="2"/>
<path d="M10.757 9.4011L10.7363 4.92686C10.7337 4.35386 11.1491 3.86447 11.7148 3.77395L30.908 0.703095C31.614 0.590124 32.2537 1.13556 32.2537 1.85062V37.0106C32.2537 37.723 31.6184 38.2678 30.9143 38.1591L11.8555 35.2171C11.2908 35.13 10.8733 34.6453 10.8707 34.074L10.8502 29.6368" stroke="#DBDBDB" stroke-width="2"/>
<path d="M11.2195 29.7561C16.877 29.7561 21.4634 25.1698 21.4634 19.5122C21.4634 13.8547 16.877 9.26831 11.2195 9.26831C5.56194 9.26831 0.975586 13.8547 0.975586 19.5122C0.975586 25.1698 5.56194 29.7561 11.2195 29.7561Z" stroke="#6E49CB"/>
<path d="M11.2194 27.8048C15.7994 27.8048 19.5121 24.0921 19.5121 19.5122C19.5121 14.9322 15.7994 11.2195 11.2194 11.2195C6.63952 11.2195 2.92676 14.9322 2.92676 19.5122C2.92676 24.0921 6.63952 27.8048 11.2194 27.8048Z" fill="#6E49CB"/>
<path d="M11.2194 27.8048C15.7994 27.8048 19.5121 24.0921 19.5121 19.5122C19.5121 14.9322 15.7994 11.2195 11.2194 11.2195C6.63952 11.2195 2.92676 14.9322 2.92676 19.5122C2.92676 24.0921 6.63952 27.8048 11.2194 27.8048Z" fill="white" fill-opacity="0.9"/>
<path d="M10.8843 23.4146V16.276" stroke="#6E49CB" stroke-linecap="round"/>
<path d="M7.31689 19.6609H14.634" stroke="#6E49CB" stroke-linecap="round"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="40" height="39.0244" fill="white"/>
</clipPath>
</defs>
</svg>
app/assets/images/learn_gitlab/merge_request_created.svg 0 → 100644
View file @ 218571ef
This diff is collapsed.
app/assets/images/learn_gitlab/pipeline_created.svg 0 → 100644
View file @ 218571ef
This diff is collapsed.
app/assets/images/learn_gitlab/security_scan_enabled.svg 0 → 100644
View file @ 218571ef
This diff is collapsed.
app/assets/images/learn_gitlab/trial_started.svg 0 → 100644
View file @ 218571ef
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9653 29.8263L21.8368 11.6285H10.0933L15.9653 29.8263Z" fill="#E38800"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9656 29.8263L10.0936 11.6285H1.86475L15.9656 29.8263Z" fill="#F7980A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.86441 11.6285L0.0800968 17.1586C-0.0826524 17.663 0.0955967 18.2156 0.521693 18.5273L15.9652 29.8261L1.86441 11.6285Z" fill="#FCA326"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.86426 11.6286H10.0933L6.55678 0.668335C6.37489 0.104294 5.58257 0.104447 5.40067 0.668335L1.86426 11.6286Z" fill="#E38800"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9653 29.8263L21.8369 11.6285H30.0658L15.9653 29.8263Z" fill="#F7980A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.0662 11.6285L31.8505 17.1586C32.0132 17.663 31.835 18.2156 31.4089 18.5273L15.9653 29.8261L30.0662 11.6285Z" fill="#FCA326"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.066 11.6286H21.8369L25.3735 0.668335C25.5554 0.104294 26.3477 0.104447 26.5296 0.668335L30.066 11.6286Z" fill="#E38800"/>
</svg>
app/assets/images/learn_gitlab/user_added.svg 0 → 100644
View file @ 218571ef
<svg width="38" height="24" viewBox="0 0 38 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33.6353 7.51765H33.8824L32.4706 5.80941L31.0588 7.50353L29.6471 5.80941L28.2353 7.50353L26.8235 5.80941L25.4118 7.50353L24 5.80941L22.5882 7.51765H23.1318C23.6965 8.89412 24 10.4118 24 12C24 14.0047 23.5059 15.8824 22.6447 17.5482C24.0353 19.1576 26.0541 20.1176 28.2353 20.1176C32.3294 20.1176 35.6471 16.7718 35.6471 12.6353C35.6471 10.6588 34.8847 8.85177 33.6353 7.51765ZM22.0094 5.36471C23.7035 3.88235 25.9059 3.03529 28.2353 3.03529C33.5012 3.03529 37.7647 7.34118 37.7647 12.6353C37.7647 17.9294 33.5012 22.2353 28.2353 22.2353C25.6376 22.2353 23.2235 21.1765 21.4588 19.3835C19.2706 22.1929 15.84 24 12 24C5.36471 24 0 18.6353 0 12C0 5.36471 5.36471 0 12 0C14.2729 0 16.3976 0.635295 18.2118 1.72941C19.7153 2.64706 21.0141 3.88235 22.0094 5.37177V5.36471ZM3.52941 8.47059C3.07059 9.55765 2.82353 10.7506 2.82353 12C2.82353 17.0682 6.93177 21.1765 12 21.1765C17.0682 21.1765 21.1765 17.0682 21.1765 12C21.1765 10.7506 20.9294 9.55765 20.4706 8.47059H14.1176C13.7435 8.47059 13.3835 8.32941 13.1294 8.04706L12 6.94588L10.8706 8.06118C10.6165 8.34353 10.2565 8.48471 9.88235 8.48471H3.52941V8.47059ZM18.6212 5.64706C16.9271 3.88235 14.5553 2.82353 12 2.82353C9.44471 2.82353 7.07294 3.88235 5.37882 5.64706H9.29647L11.0047 3.95294C11.5271 3.38824 12.4165 3.38824 12.9812 3.95294L14.6753 5.64706H18.5859H18.6212Z" fill="#E1DBF2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.1292 14.3435C24.6633 14.3435 24.2821 13.9623 24.2821 13.4964C24.2821 13.0164 24.6633 12.6353 25.1292 12.6353C25.5951 12.6353 25.9762 13.0164 25.9762 13.4823C25.9762 13.9623 25.5951 14.3435 25.1292 14.3435ZM31.3409 14.3435C30.8751 14.3435 30.4939 13.9623 30.4939 13.4964C30.4939 13.0164 30.8751 12.6353 31.3409 12.6353C31.8068 12.6353 32.188 13.0164 32.188 13.4823C32.188 13.9623 31.8068 14.3435 31.3409 14.3435ZM9.17624 15.5294H14.8233C14.8233 17.0823 13.5527 18.3529 11.9998 18.3529C10.4468 18.3529 9.17624 17.0823 9.17624 15.5294ZM8.11742 14.8235C7.53153 14.8235 7.05859 14.3505 7.05859 13.7647C7.05859 13.1788 7.53153 12.7058 8.11742 12.7058C8.7033 12.7058 9.17624 13.1788 9.17624 13.7647C9.17624 14.3505 8.7033 14.8235 8.11742 14.8235ZM15.8821 14.8235C15.2962 14.8235 14.8233 14.3505 14.8233 13.7647C14.8233 13.1788 15.2962 12.7058 15.8821 12.7058C16.468 12.7058 16.9409 13.1788 16.9409 13.7647C16.9409 14.3505 16.468 14.8235 15.8821 14.8235Z" fill="#6B4FBB"/>
</svg>
app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue
View file @ 218571ef
<script>
import { GlLink } from '@gitlab/ui';
import { ACTION_TEXT } from '../constants';
import { ACTION_LABELS } from '../constants';
export default {
components: { GlLink },
i18n: {
ACTION_TEXT,
ACTION_LABELS,
},
props: {
actions: {
......@@ -18,9 +18,9 @@ export default {
<template>
<ul>
<li v-for="(value, action) in actions" :key="action">
<span v-if="value.completed">{{ $options.i18n.ACTION_TEXT[action] }}</span>
<span v-if="value.completed">{{ $options.i18n.ACTION_LABELS[action].title }}</span>
<span v-else>
<gl-link :href="value.url">{{ $options.i18n.ACTION_TEXT[action] }}</gl-link>
<gl-link :href="value.url">{{ $options.i18n.ACTION_LABELS[action].title }}</gl-link>
</span>
</li>
</ul>
......
app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue
View file @ 218571ef
<script>
import { GlLink } from '@gitlab/ui';
import { ACTION_TEXT } from '../constants';
import { GlProgressBar, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import { ACTION_LABELS } from '../constants';
import LearnGitlabInfoCard from './learn_gitlab_info_card.vue';
export default {
components: { GlLink },
components: { LearnGitlabInfoCard, GlProgressBar, GlSprintf },
i18n: {
ACTION_TEXT,
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: {
......@@ -13,15 +37,76 @@ export default {
type: Object,
},
},
maxValue: Object.keys(ACTION_LABELS).length,
methods: {
infoProps(action) {
return {
...this.actions[action],
...ACTION_LABELS[action],
};
},
progressValue() {
return Object.values(this.actions).filter((a) => a.completed).length;
},
progressPercentage() {
return Math.round((this.progressValue() / this.$options.maxValue) * 100);
},
},
};
</script>
<template>
<ul>
<li v-for="(value, action) in actions" :key="action">
<span v-if="value.completed">{{ $options.i18n.ACTION_TEXT[action] }}</span>
<span v-else>
<gl-link :href="value.url">{{ $options.i18n.ACTION_TEXT[action] }}</gl-link>
</span>
</li>
</ul>
<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('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>
app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue 0 → 100644
View file @ 218571ef
<script>
import { GlLink, GlCard, GlIcon } from '@gitlab/ui';
import { s__ } from '~/locale';
export default {
name: 'LearnGitlabInfoCard',
components: { GlLink, GlCard, GlIcon },
i18n: {
trial: s__('Learn GitLab|Trial only'),
},
props: {
title: {
required: true,
type: String,
},
description: {
required: true,
type: String,
},
actionLabel: {
required: true,
type: String,
},
url: {
required: true,
type: String,
},
completed: {
required: true,
type: Boolean,
},
svg: {
required: true,
type: String,
},
trialRequired: {
default: false,
required: false,
type: Boolean,
},
},
};
</script>
<template>
<gl-card class="gl-pt-0">
<div class="gl-text-right gl-h-5">
<gl-icon
v-if="completed"
name="check-circle-filled"
class="gl-text-green-500"
:size="16"
data-testid="completed-icon"
/>
<span
v-else-if="trialRequired"
class="gl-text-gray-500 gl-font-sm gl-font-style-italic"
data-testid="trial-only"
>{{ $options.i18n.trial }}</span
>
</div>
<div
class="gl-text-center gl-display-flex gl-justify-content-center gl-align-items-center gl-flex-direction-column learn-gitlab-info-card-content"
>
<img :src="svg" />
<h6>{{ title }}</h6>
<p class="gl-font-sm gl-text-gray-700">{{ description }}</p>
<gl-link :href="url" target="_blank">{{ actionLabel }}</gl-link>
</div>
</gl-card>
</template>
app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
View file @ 218571ef
import { s__ } from '~/locale';
export const ACTION_TEXT = {
gitWrite: s__('LearnGitLab|Create a repository'),
userAdded: s__('LearnGitLab|Invite your colleagues'),
pipelineCreated: s__('LearnGitLab|Set-up CI/CD'),
trialStarted: s__('LearnGitLab|Start a free trial of GitLab Gold'),
codeOwnersEnabled: s__('LearnGitLab|Add code owners'),
requiredMrApprovalsEnabled: s__('LearnGitLab|Enable require merge approvals'),
mergeRequestCreated: s__('LearnGitLab|Submit a merge request (MR)'),
securityScanEnabled: s__('LearnGitLab|Run a Security scan using CI/CD'),
export const ACTION_LABELS = {
gitWrite: {
title: s__('LearnGitLab|Create or import a repository'),
actionLabel: s__('LearnGitLab|Create or import a repository'),
description: s__('LearnGitLab|Create or import your first repository into your new project.'),
},
userAdded: {
title: s__('LearnGitLab|Invite your colleagues'),
actionLabel: s__('LearnGitLab|Invite your colleagues'),
description: s__(
'LearnGitLab|GitLab works best as a team. Invite your colleague to enjoy all features.',
),
},
pipelineCreated: {
title: s__('LearnGitLab|Set up CI/CD'),
actionLabel: s__('LearnGitLab|Set-up CI/CD'),
description: s__('LearnGitLab|Save time by automating your integration and deployment tasks.'),
},
trialStarted: {
title: s__('LearnGitLab|Start a free Ultimate trial'),
actionLabel: s__('LearnGitLab|Try GitLab Ultimate for free'),
description: s__('LearnGitLab|Try all GitLab features for 30 days, no credit card required.'),
},
codeOwnersEnabled: {
title: s__('LearnGitLab|Add code owners'),
actionLabel: s__('LearnGitLab|Add code owners'),
description: s__(
'LearnGitLab|Prevent unexpected changes to important assets by assigning ownership of files and paths.',
),
trialRequired: true,
},
requiredMrApprovalsEnabled: {
title: s__('LearnGitLab|Add merge request approval'),
actionLabel: s__('LearnGitLab|Enable require merge approvals'),
description: s__('LearnGitLab|Route code reviews to the right reviewers, every time.'),
trialRequired: true,
},
mergeRequestCreated: {
title: s__('LearnGitLab|Submit a merge request'),
actionLabel: s__('LearnGitLab|Submit a merge request (MR)'),
description: s__('LearnGitLab|Review and edit proposed changes to source code.'),
},
securityScanEnabled: {
title: s__('LearnGitLab|Run a security scan'),
actionLabel: s__('LearnGitLab|Run a Security scan'),
description: s__('LearnGitLab|Scan your code to uncover vulnerabilities before deploying.'),
},
};
app/assets/stylesheets/page_bundles/learn_gitlab.scss 0 → 100644
View file @ 218571ef
.learn-gitlab-info-card-content {
height: 200px;
}
app/helpers/learn_gitlab_helper.rb
View file @ 218571ef
......@@ -15,7 +15,8 @@ module LearnGitlabHelper
[
action,
url: url,
completed: attributes[OnboardingProgress.column_name(action)].present?
completed: attributes[OnboardingProgress.column_name(action)].present?,
svg: image_path("learn_gitlab/#{action}.svg")
]
end.to_h
end
......@@ -25,7 +26,7 @@ module LearnGitlabHelper
ACTION_ISSUE_IDS = {
git_write: 2,
pipeline_created: 4,
merge_request_created: 6,
merge_request_created: 5,
user_added: 7,
trial_started: 13,
required_mr_approvals_enabled: 15,
......
app/views/projects/learn_gitlab/index.html.haml
View file @ 218571ef
- breadcrumb_title _("Learn GitLab")
- page_title _("Learn GitLab")
- add_page_specific_style 'page_bundles/learn_gitlab'
#js-learn-gitlab-app{ data: { actions: onboarding_actions_data(@project).to_json } }
config/application.rb
View file @ 218571ef
......@@ -196,6 +196,7 @@ module Gitlab
config.assets.precompile << "page_bundles/iterations.css"
config.assets.precompile << "page_bundles/jira_connect.css"
config.assets.precompile << "page_bundles/jira_connect_users.css"
config.assets.precompile << "page_bundles/learn_gitlab.css"
config.assets.precompile << "page_bundles/merge_conflicts.css"
config.assets.precompile << "page_bundles/merge_requests.css"
config.assets.precompile << "page_bundles/milestone.css"
......
locale/gitlab.pot
View file @ 218571ef
......@@ -17520,6 +17520,9 @@ msgstr ""
msgid "Learn GitLab - Ultimate trial"
msgstr ""
msgid "Learn GitLab|Trial only"
msgstr ""
msgid "Learn how to %{link_start}contribute to the built-in templates%{link_end}"
msgstr ""
......@@ -17580,30 +17583,96 @@ msgstr ""
msgid "Learn more."
msgstr ""
msgid "LearnGitLab|%{percentage}%{percentSymbol} completed"
msgstr ""
msgid "LearnGitLab|Add code owners"
msgstr ""
msgid "LearnGitLab|Create a repository"
msgid "LearnGitLab|Add merge request approval"
msgstr ""
msgid "LearnGitLab|Complete these tasks first so you can enjoy GitLab's features to their fullest:"
msgstr ""
msgid "LearnGitLab|Create a workflow for your new workspace, and learn how GitLab features work together:"
msgstr ""
msgid "LearnGitLab|Create or import a repository"
msgstr ""
msgid "LearnGitLab|Create or import your first repository into your new project."
msgstr ""
msgid "LearnGitLab|Deploy"
msgstr ""
msgid "LearnGitLab|Enable require merge approvals"
msgstr ""
msgid "LearnGitLab|GitLab works best as a team. Invite your colleague to enjoy all features."
msgstr ""
msgid "LearnGitLab|Invite your colleagues"
msgstr ""
msgid "LearnGitLab|Run a Security scan using CI/CD"
msgid "LearnGitLab|Learn GitLab"
msgstr ""
msgid "LearnGitLab|Plan and execute"
msgstr ""
msgid "LearnGitLab|Prevent unexpected changes to important assets by assigning ownership of files and paths."
msgstr ""
msgid "LearnGitLab|Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project."
msgstr ""
msgid "LearnGitLab|Review and edit proposed changes to source code."
msgstr ""
msgid "LearnGitLab|Route code reviews to the right reviewers, every time."
msgstr ""
msgid "LearnGitLab|Run a Security scan"
msgstr ""
msgid "LearnGitLab|Run a security scan"
msgstr ""
msgid "LearnGitLab|Save time by automating your integration and deployment tasks."
msgstr ""
msgid "LearnGitLab|Scan your code to uncover vulnerabilities before deploying."
msgstr ""
msgid "LearnGitLab|Set up CI/CD"
msgstr ""
msgid "LearnGitLab|Set up your workspace"
msgstr ""
msgid "LearnGitLab|Set-up CI/CD"
msgstr ""
msgid "LearnGitLab|Start a free trial of GitLab Gold"
msgid "LearnGitLab|Start a free Ultimate trial"
msgstr ""
msgid "LearnGitLab|Submit a merge request"
msgstr ""
msgid "LearnGitLab|Submit a merge request (MR)"
msgstr ""
msgid "LearnGitLab|Try GitLab Ultimate for free"
msgstr ""
msgid "LearnGitLab|Try all GitLab features for 30 days, no credit card required."
msgstr ""
msgid "LearnGitLab|Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:"
msgstr ""
msgid "Leave"
msgstr ""
......
spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap
View file @ 218571ef
......@@ -4,7 +4,7 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
<ul>
<li>
<span>
Create a repository
Create or import a repository
</span>
</li>
<li>
......@@ -14,7 +14,11 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
</li>
<li>
<span>
Set-up CI/CD
<gl-link-stub
href="http://example.com/"
>
Set up CI/CD
</gl-link-stub>
</span>
</li>
<li>
......@@ -22,7 +26,7 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
<gl-link-stub
href="http://example.com/"
>
Start a free trial of GitLab Gold
Start a free Ultimate trial
</gl-link-stub>
</span>
</li>
......@@ -40,7 +44,7 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
<gl-link-stub
href="http://example.com/"
>
Enable require merge approvals
Add merge request approval
</gl-link-stub>
</span>
</li>
......@@ -49,7 +53,7 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
<gl-link-stub
href="http://example.com/"
>
Submit a merge request (MR)
Submit a merge request
</gl-link-stub>
</span>
</li>
......@@ -58,7 +62,7 @@ exports[`Learn GitLab Design A should render the loading state 1`] = `
<gl-link-stub
href="http://example.com/"
>
Run a Security scan using CI/CD
Run a security scan
</gl-link-stub>
</span>
</li>
......
spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js
View file @ 218571ef
import { shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import LearnGitlabA from '~/pages/projects/learn_gitlab/components/learn_gitlab_a.vue';
const TEST_ACTIONS = {
gitWrite: {
url: 'http://example.com/',
completed: true,
},
userAdded: {
url: 'http://example.com/',
completed: true,
},
pipelineCreated: {
url: 'http://example.com/',
completed: true,
},
trialStarted: {
url: 'http://example.com/',
completed: false,
},
codeOwnersEnabled: {
url: 'http://example.com/',
completed: false,
},
requiredMrApprovalsEnabled: {
url: 'http://example.com/',
completed: false,
},
mergeRequestCreated: {
url: 'http://example.com/',
completed: false,
},
securityScanEnabled: {
url: 'http://example.com/',
completed: false,
},
};
import { testActions } from './mock_data';
describe('Learn GitLab Design A', () => {
let wrapper;
......@@ -46,13 +11,7 @@ describe('Learn GitLab Design A', () => {
});
const createWrapper = () => {
wrapper = extendedWrapper(
shallowMount(LearnGitlabA, {
propsData: {
actions: TEST_ACTIONS,
},
}),
);
wrapper = shallowMount(LearnGitlabA, { propsData: { actions: testActions } });
};
it('should render the loading state', () => {
......
spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_b_spec.js
View file @ 218571ef
import { shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import LearnGitlabA from '~/pages/projects/learn_gitlab/components/learn_gitlab_a.vue';
const TEST_ACTIONS = {
gitWrite: {
url: 'http://example.com/',
completed: true,
},
userAdded: {
url: 'http://example.com/',
completed: true,
},
pipelineCreated: {
url: 'http://example.com/',
completed: true,
},
trialStarted: {
url: 'http://example.com/',
completed: false,
},
codeOwnersEnabled: {
url: 'http://example.com/',
completed: false,
},
requiredMrApprovalsEnabled: {
url: 'http://example.com/',
completed: false,
},
mergeRequestCreated: {
url: 'http://example.com/',
completed: false,
},
securityScanEnabled: {
url: 'http://example.com/',
completed: false,
},
};
import { GlProgressBar } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import LearnGitlabB from '~/pages/projects/learn_gitlab/components/learn_gitlab_b.vue';
import { testActions } from './mock_data';
describe('Learn GitLab Design B', () => {
let wrapper;
const createWrapper = () => {
wrapper = mount(LearnGitlabB, { propsData: { actions: testActions } });
};
beforeEach(() => {
createWrapper();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const createWrapper = () => {
wrapper = extendedWrapper(
shallowMount(LearnGitlabA, {
propsData: {
actions: TEST_ACTIONS,
},
}),
);
};
it('renders correctly', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('should render the loading state', () => {
createWrapper();
it('renders the progress percentage', () => {
const text = wrapper.find('[data-testid="completion-percentage"]').text();
expect(wrapper.element).toMatchSnapshot();
expect(text).toEqual('25% completed');
});
it('renders the progress bar with correct values', () => {
const progressBar = wrapper.find(GlProgressBar);
expect(progressBar.attributes('value')).toBe('2');
expect(progressBar.attributes('max')).toBe('8');
});
});
spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_info_card_spec.js 0 → 100644
View file @ 218571ef
import { shallowMount } from '@vue/test-utils';
import LearnGitlabInfoCard from '~/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue';
const defaultProps = {
title: 'Create Repository',
description: 'Some description',
actionLabel: 'Create Repository now',
url: 'https://example.com',
completed: false,
svg: 'https://example.com/illustration.svg',
};
describe('Learn GitLab Info Card', () => {
let wrapper;
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const createWrapper = (props = {}) => {
wrapper = shallowMount(LearnGitlabInfoCard, {
propsData: { ...defaultProps, ...props },
});
};
it('renders no icon when not completed', () => {
createWrapper({ completed: false });
expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(false);
});
it('renders the completion icon when completed', () => {
createWrapper({ completed: true });
expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(true);
});
it('renders no trial only when it is not required', () => {
createWrapper();
expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(false);
});
it('renders trial only when trial is required', () => {
createWrapper({ trialRequired: true });
expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(true);
});
it('renders completion icon when completed a trial-only feature', () => {
createWrapper({ trialRequired: true, completed: true });
expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(false);
expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(true);
});
});
spec/frontend/pages/projects/learn_gitlab/components/mock_data.js 0 → 100644
View file @ 218571ef
export const testActions = {
gitWrite: {
url: 'http://example.com/',
completed: true,
svg: 'http://example.com/images/illustration.svg',
},
userAdded: {
url: 'http://example.com/',
completed: true,
svg: 'http://example.com/images/illustration.svg',
},
pipelineCreated: {
url: 'http://example.com/',
completed: false,
svg: 'http://example.com/images/illustration.svg',
},
trialStarted: {
url: 'http://example.com/',
completed: false,
svg: 'http://example.com/images/illustration.svg',
},
codeOwnersEnabled: {
url: 'http://example.com/',
completed: false,
svg: 'http://example.com/images/illustration.svg',
},
requiredMrApprovalsEnabled: {
url: 'http://example.com/',
completed: false,
svg: 'http://example.com/images/illustration.svg',
},
mergeRequestCreated: {
url: 'http://example.com/',
completed: false,
svg: 'http://example.com/images/illustration.svg',
},
securityScanEnabled: {
url: 'http://example.com/',
completed: false,
svg: 'http://example.com/images/illustration.svg',
},
};
spec/helpers/learn_gitlab_helper_spec.rb
View file @ 218571ef
......@@ -41,11 +41,13 @@ RSpec.describe LearnGitlabHelper do
it 'sets correct path and completion status' do
expect(onboarding_actions_data[:git_write]).to eq({
url: project_issue_url(project, LearnGitlabHelper::ACTION_ISSUE_IDS[:git_write]),
completed: true
completed: true,
svg: helper.image_path("learn_gitlab/git_write.svg")
})
expect(onboarding_actions_data[:pipeline_created]).to eq({
url: project_issue_url(project, LearnGitlabHelper::ACTION_ISSUE_IDS[:pipeline_created]),
completed: false
completed: false,
svg: helper.image_path("learn_gitlab/pipeline_created.svg")
})
end
end
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7