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

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,