Skip to content

G
gitlab-ce
Commit 5f33f792 authored by David O'Regan's avatar David O'Regan
Browse files
Options

Merge branch '281022-engineering-continuous-onboarding-add-issue-creations' into 'master' 

Add "issues created" action to continuous onboarding design

See merge request gitlab-org/gitlab!58690
parents 112dea5f c7056a32
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 181 additions and 15 deletions
app/assets/images/learn_gitlab/issue_created.svg 0 → 100644
View file @ 5f33f792
This diff is collapsed.
app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue
View file @ 5f33f792
......@@ -96,6 +96,9 @@ export default {
<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>
......
app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue
View file @ 5f33f792
......@@ -61,7 +61,7 @@ export default {
<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" />
<img :src="svg" :alt="actionLabel" />
<h6>{{ title }}</h6>
<p class="gl-font-sm gl-text-gray-700">{{ description }}</p>
<gl-link :href="url" target="_blank">{{ actionLabel }}</gl-link>
......
app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
View file @ 5f33f792
......@@ -63,6 +63,15 @@ export const ACTION_LABELS = {
section: 'deploy',
position: 1,
},
issueCreated: {
title: s__('LearnGitLab|Create an issue'),
actionLabel: s__('LearnGitLab|Create an issue'),
description: s__(
'LearnGitLab|Create/import issues (tickets) to collaborate on ideas and plan work.',
),
section: 'plan',
position: 0,
},
};
export const ACTION_SECTIONS = {
......
app/helpers/learn_gitlab_helper.rb
View file @ 5f33f792
......@@ -24,6 +24,7 @@ module LearnGitlabHelper
private
ACTION_ISSUE_IDS = {
issue_created: 4,
git_write: 6,
pipeline_created: 7,
merge_request_created: 9,
......
locale/gitlab.pot
View file @ 5f33f792
......@@ -18496,12 +18496,18 @@ msgstr ""
msgid "LearnGitLab|Create a workflow for your new workspace, and learn how GitLab features work together:"
msgstr ""
msgid "LearnGitLab|Create an issue"
msgstr ""
msgid "LearnGitLab|Create or import a repository"
msgstr ""
msgid "LearnGitLab|Create or import your first repository into your new project."
msgstr ""
msgid "LearnGitLab|Create/import issues (tickets) to collaborate on ideas and plan work."
msgstr ""
msgid "LearnGitLab|Deploy"
msgstr ""
......
spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap
View file @ 5f33f792
......@@ -29,21 +29,21 @@ exports[`Learn GitLab Design A renders correctly 1`] = `
class="gl-text-gray-500 gl-mb-2"
data-testid="completion-percentage"
>
25% completed
22% completed
</p>
<div
class="progress"
max="8"
max="9"
value="2"
>
<div
aria-valuemax="8"
aria-valuemax="9"
aria-valuemin="0"
aria-valuenow="2"
class="progress-bar"
role="progressbar"
style="width: 25%;"
style="width: 22.22222222222222%;"
>
<!---->
</div>
......@@ -234,6 +234,20 @@ exports[`Learn GitLab Design A renders correctly 1`] = `
</p>
</div>
<div
class="gl-mb-4"
>
<span>
<a
class="gl-link"
href="http://example.com/"
>
Create an issue
</a>
</span>
<!---->
</div>
<div
class="gl-mb-4"
>
......
spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_b_spec.js.snap
View file @ 5f33f792
......@@ -29,21 +29,21 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
class="gl-text-gray-500 gl-mb-2"
data-testid="completion-percentage"
>
25% completed
22% completed
</p>
<div
class="progress"
max="8"
max="9"
value="2"
>
<div
aria-valuemax="8"
aria-valuemax="9"
aria-valuemin="0"
aria-valuenow="2"
class="progress-bar"
role="progressbar"
style="width: 25%;"
style="width: 22.22222222222222%;"
>
<!---->
</div>
......@@ -94,6 +94,7 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
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
alt="Invite your colleagues"
src="http://example.com/images/illustration.svg"
/>
......@@ -151,6 +152,7 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
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
alt="Create or import a repository"
src="http://example.com/images/illustration.svg"
/>
......@@ -200,6 +202,7 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
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
alt="Set-up CI/CD"
src="http://example.com/images/illustration.svg"
/>
......@@ -249,6 +252,7 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
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
alt="Try GitLab Ultimate for free"
src="http://example.com/images/illustration.svg"
/>
......@@ -303,6 +307,7 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
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
alt="Add code owners"
src="http://example.com/images/illustration.svg"
/>
......@@ -357,6 +362,7 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
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
alt="Enable require merge approvals"
src="http://example.com/images/illustration.svg"
/>
......@@ -422,6 +428,57 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
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
alt="Create an issue"
src="http://example.com/images/illustration.svg"
/>
<h6>
Create an issue
</h6>
<p
class="gl-font-sm gl-text-gray-700"
>
Create/import issues (tickets) to collaborate on ideas and plan work.
</p>
<a
class="gl-link"
href="http://example.com/"
rel="noopener noreferrer"
target="_blank"
>
Create an issue
</a>
</div>
</div>
<!---->
</div>
</div>
<div
class="col gl-mb-6"
>
<div
class="gl-card gl-pt-0"
>
<!---->
<div
class="gl-card-body"
>
<div
class="gl-text-right gl-h-5"
>
<!---->
</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
alt="Submit a merge request (MR)"
src="http://example.com/images/illustration.svg"
/>
......@@ -487,6 +544,7 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
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
alt="Run a Security scan using CI/CD"
src="http://example.com/images/illustration.svg"
/>
......
spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
View file @ 5f33f792
......@@ -31,6 +31,10 @@ exports[`Learn GitLab Section Card renders correctly 1`] = `
action="userAdded"
value="[object Object]"
/>
<learn-gitlab-section-link-stub
action="issueCreated"
value="[object Object]"
/>
<learn-gitlab-section-link-stub
action="gitWrite"
value="[object Object]"
......
spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js
View file @ 5f33f792
......@@ -26,13 +26,13 @@ describe('Learn GitLab Design A', () => {
it('renders the progress percentage', () => {
const text = wrapper.find('[data-testid="completion-percentage"]').text();
expect(text).toEqual('25% completed');
expect(text).toBe('22% completed');
});
it('renders the progress bar with correct values', () => {
const progressBar = wrapper.find(GlProgressBar);
const progressBar = wrapper.findComponent(GlProgressBar);
expect(progressBar.attributes('value')).toBe('2');
expect(progressBar.attributes('max')).toBe('8');
expect(progressBar.attributes('max')).toBe('9');
});
});
spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_b_spec.js
View file @ 5f33f792
......@@ -26,13 +26,13 @@ describe('Learn GitLab Design B', () => {
it('renders the progress percentage', () => {
const text = wrapper.find('[data-testid="completion-percentage"]').text();
expect(text).toEqual('25% completed');
expect(text).toBe('22% completed');
});
it('renders the progress bar with correct values', () => {
const progressBar = wrapper.find(GlProgressBar);
const progressBar = wrapper.findComponent(GlProgressBar);
expect(progressBar.attributes('value')).toBe('2');
expect(progressBar.attributes('max')).toBe('8');
expect(progressBar.attributes('max')).toBe('9');
});
});
spec/frontend/pages/projects/learn_gitlab/components/mock_data.js
View file @ 5f33f792
......@@ -39,4 +39,9 @@ export const testActions = {
completed: false,
svg: 'http://example.com/images/illustration.svg',
},
issueCreated: {
url: 'http://example.com/',
completed: false,
svg: 'http://example.com/images/illustration.svg',
},
};
spec/helpers/learn_gitlab_helper_spec.rb
View file @ 5f33f792
......@@ -27,6 +27,7 @@ RSpec.describe LearnGitlabHelper do
it 'has all actions' do
expect(onboarding_actions_data.keys).to contain_exactly(
:issue_created,
:git_write,
:pipeline_created,
:merge_request_created,
......
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