Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

8 files changed, 550 insertions, 77 deletions

diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap
index 1c1327e7a4e..8b54a06ac7c 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap
+++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap
@@ -1,70 +1,322 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Learn GitLab Design A should render the loading state 1`] = `
-<ul>
-  <li>
-    <span>
-      Create or import a repository
-    </span>
-  </li>
-  <li>
-    <span>
-      Invite your colleagues
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+exports[`Learn GitLab Design A renders correctly 1`] = `
+<div>
+  <div
+    class="row"
+  >
+    <div
+      class="gl-mb-7 gl-ml-5"
+    >
+      <h1
+        class="gl-font-size-h1"
       >
-        Set up CI/CD
-      </gl-link-stub>
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+        Learn GitLab
+      </h1>
+       
+      <p
+        class="gl-text-gray-700 gl-mb-0"
       >
-        Start a free Ultimate trial
-      </gl-link-stub>
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+        Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project.
+      </p>
+    </div>
+  </div>
+   
+  <div
+    class="gl-mb-3"
+  >
+    <p
+      class="gl-text-gray-500 gl-mb-2"
+      data-testid="completion-percentage"
+    >
+      22% completed
+    </p>
+     
+    <div
+      class="progress"
+      max="9"
+      value="2"
+    >
+      <div
+        aria-valuemax="9"
+        aria-valuemin="0"
+        aria-valuenow="2"
+        class="progress-bar"
+        role="progressbar"
+        style="width: 22.22222222222222%;"
       >
-        Add code owners
-      </gl-link-stub>
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+        <!---->
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="row row-cols-1 row-cols-md-3 gl-mt-5"
+  >
+    <div
+      class="col gl-mb-6"
+    >
+      <div
+        class="gl-card gl-pt-0 learn-gitlab-section-card"
       >
-        Add merge request approval
-      </gl-link-stub>
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+        <!---->
+         
+        <div
+          class="gl-card-body"
+        >
+          <div
+            class="learn-gitlab-section-card-header"
+          >
+            <img
+              src="/assets/learn_gitlab/section_workspace.svg"
+            />
+             
+            <h2
+              class="gl-font-lg gl-mb-3"
+            >
+              Set up your workspace
+            </h2>
+             
+            <p
+              class="gl-text-gray-700 gl-mb-6"
+            >
+              Complete these tasks first so you can enjoy GitLab's features to their fullest:
+            </p>
+          </div>
+           
+          <div
+            class="gl-mb-4"
+          >
+            <span
+              class="gl-text-green-500"
+            >
+              <svg
+                aria-hidden="true"
+                class="gl-icon s16"
+                data-testid="completed-icon"
+              >
+                <use
+                  href="#check-circle-filled"
+                />
+              </svg>
+              
+    Invite your colleagues
+  
+            </span>
+             
+            <!---->
+          </div>
+          <div
+            class="gl-mb-4"
+          >
+            <span
+              class="gl-text-green-500"
+            >
+              <svg
+                aria-hidden="true"
+                class="gl-icon s16"
+                data-testid="completed-icon"
+              >
+                <use
+                  href="#check-circle-filled"
+                />
+              </svg>
+              
+    Create or import a repository
+  
+            </span>
+             
+            <!---->
+          </div>
+          <div
+            class="gl-mb-4"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Set up CI/CD
+              </a>
+            </span>
+             
+            <!---->
+          </div>
+          <div
+            class="gl-mb-4"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Start a free Ultimate trial
+              </a>
+            </span>
+             
+            <!---->
+          </div>
+          <div
+            class="gl-mb-4"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Add code owners
+              </a>
+            </span>
+             
+            <span
+              class="gl-font-style-italic gl-text-gray-500"
+              data-testid="trial-only"
+            >
+              
+    - Trial only
+  
+            </span>
+          </div>
+          <div
+            class="gl-mb-4"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Add merge request approval
+              </a>
+            </span>
+             
+            <span
+              class="gl-font-style-italic gl-text-gray-500"
+              data-testid="trial-only"
+            >
+              
+    - Trial only
+  
+            </span>
+          </div>
+        </div>
+         
+        <!---->
+      </div>
+    </div>
+    <div
+      class="col gl-mb-6"
+    >
+      <div
+        class="gl-card gl-pt-0 learn-gitlab-section-card"
       >
-        Submit a merge request
-      </gl-link-stub>
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+        <!---->
+         
+        <div
+          class="gl-card-body"
+        >
+          <div
+            class="learn-gitlab-section-card-header"
+          >
+            <img
+              src="/assets/learn_gitlab/section_plan.svg"
+            />
+             
+            <h2
+              class="gl-font-lg gl-mb-3"
+            >
+              Plan and execute
+            </h2>
+             
+            <p
+              class="gl-text-gray-700 gl-mb-6"
+            >
+              Create a workflow for your new workspace, and learn how GitLab features work together:
+            </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"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Submit a merge request
+              </a>
+            </span>
+             
+            <!---->
+          </div>
+        </div>
+         
+        <!---->
+      </div>
+    </div>
+    <div
+      class="col gl-mb-6"
+    >
+      <div
+        class="gl-card gl-pt-0 learn-gitlab-section-card"
       >
-        Run a security scan
-      </gl-link-stub>
-    </span>
-  </li>
-</ul>
+        <!---->
+         
+        <div
+          class="gl-card-body"
+        >
+          <div
+            class="learn-gitlab-section-card-header"
+          >
+            <img
+              src="/assets/learn_gitlab/section_deploy.svg"
+            />
+             
+            <h2
+              class="gl-font-lg gl-mb-3"
+            >
+              Deploy
+            </h2>
+             
+            <p
+              class="gl-text-gray-700 gl-mb-6"
+            >
+              Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:
+            </p>
+          </div>
+           
+          <div
+            class="gl-mb-4"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Run a Security scan using CI/CD
+              </a>
+            </span>
+             
+            <!---->
+          </div>
+        </div>
+         
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
 `;
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_b_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_b_spec.js.snap
index dd899b93302..07c7f2df09e 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_b_spec.js.snap
+++ b/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,11 +544,12 @@ 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"
             />
              
             <h6>
-              Run a security scan
+              Run a Security scan using CI/CD
             </h6>
              
             <p
@@ -506,7 +564,7 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
               rel="noopener noreferrer"
               target="_blank"
             >
-              Run a Security scan
+              Run a Security scan using CI/CD
             </a>
           </div>
         </div>
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
new file mode 100644
index 00000000000..ad8db0822cc
--- /dev/null
+++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Learn GitLab Section Card renders correctly 1`] = `
+<gl-card-stub
+  bodyclass=""
+  class="gl-pt-0 learn-gitlab-section-card"
+  footerclass=""
+  headerclass=""
+>
+  <div
+    class="learn-gitlab-section-card-header"
+  >
+    <img
+      src="/assets/learn_gitlab/section_workspace.svg"
+    />
+     
+    <h2
+      class="gl-font-lg gl-mb-3"
+    >
+      Set up your workspace
+    </h2>
+     
+    <p
+      class="gl-text-gray-700 gl-mb-6"
+    >
+      Complete these tasks first so you can enjoy GitLab's features to their fullest:
+    </p>
+  </div>
+   
+  <learn-gitlab-section-link-stub
+    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]"
+  />
+  <learn-gitlab-section-link-stub
+    action="mergeRequestCreated"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="securityScanEnabled"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="pipelineCreated"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="trialStarted"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="codeOwnersEnabled"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="requiredMrApprovalsEnabled"
+    value="[object Object]"
+  />
+</gl-card-stub>
+`;
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js
index 2154358de51..64ace341038 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js
@@ -1,22 +1,38 @@
-import { shallowMount } from '@vue/test-utils';
+import { GlProgressBar } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
 import LearnGitlabA from '~/pages/projects/learn_gitlab/components/learn_gitlab_a.vue';
 import { testActions } from './mock_data';
 
 describe('Learn GitLab Design A', () => {
   let wrapper;
 
+  const createWrapper = () => {
+    wrapper = mount(LearnGitlabA, { propsData: { actions: testActions } });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  const createWrapper = () => {
-    wrapper = shallowMount(LearnGitlabA, { propsData: { actions: testActions } });
-  };
+  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).toBe('22% completed');
+  });
+
+  it('renders the progress bar with correct values', () => {
+    const progressBar = wrapper.findComponent(GlProgressBar);
+
+    expect(progressBar.attributes('value')).toBe('2');
+    expect(progressBar.attributes('max')).toBe('9');
   });
 });
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_b_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_b_spec.js
index fbb989fae32..207944bfa1f 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_b_spec.js
+++ b/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');
   });
 });
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_card_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_card_spec.js
new file mode 100644
index 00000000000..de6aca08235
--- /dev/null
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_card_spec.js
@@ -0,0 +1,26 @@
+import { shallowMount } from '@vue/test-utils';
+import LearnGitlabSectionCard from '~/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue';
+import { testActions } from './mock_data';
+
+const defaultSection = 'workspace';
+
+describe('Learn GitLab Section Card', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const createWrapper = () => {
+    wrapper = shallowMount(LearnGitlabSectionCard, {
+      propsData: { section: defaultSection, actions: testActions },
+    });
+  };
+
+  it('renders correctly', () => {
+    createWrapper({ completed: false });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js
new file mode 100644
index 00000000000..882d233a239
--- /dev/null
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js
@@ -0,0 +1,49 @@
+import { shallowMount } from '@vue/test-utils';
+import LearnGitlabSectionLink from '~/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue';
+
+const defaultAction = 'gitWrite';
+const defaultProps = {
+  title: 'Create Repository',
+  description: 'Some description',
+  url: 'https://example.com',
+  completed: false,
+};
+
+describe('Learn GitLab Section Link', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const createWrapper = (action = defaultAction, props = {}) => {
+    wrapper = shallowMount(LearnGitlabSectionLink, {
+      propsData: { action, value: { ...defaultProps, ...props } },
+    });
+  };
+
+  it('renders no icon when not completed', () => {
+    createWrapper(undefined, { completed: false });
+
+    expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(false);
+  });
+
+  it('renders the completion icon when completed', () => {
+    createWrapper(undefined, { 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('codeOwnersEnabled');
+
+    expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js b/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js
index caac667e2b1..d6ee2b00c8e 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js
+++ b/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',
+  },
 };