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

15 files changed, 856 insertions, 126 deletions

diff --git a/spec/frontend/pages/admin/users/components/__snapshots__/delete_user_modal_spec.js.snap b/spec/frontend/pages/admin/users/components/__snapshots__/delete_user_modal_spec.js.snap
index ddeaa2a79db..9f02e5b9432 100644
--- a/spec/frontend/pages/admin/users/components/__snapshots__/delete_user_modal_spec.js.snap
+++ b/spec/frontend/pages/admin/users/components/__snapshots__/delete_user_modal_spec.js.snap
@@ -50,11 +50,11 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
    
   <gl-button-stub
     buttontextclasses=""
-    category="primary"
+    category="secondary"
     disabled="true"
     icon=""
     size="medium"
-    variant="warning"
+    variant="danger"
   >
     
       secondaryAction
diff --git a/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js b/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
index c7293b00adf..318b6d16008 100644
--- a/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
+++ b/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
@@ -11,15 +11,15 @@ describe('User Operation confirmation modal', () => {
   let wrapper;
   let formSubmitSpy;
 
-  const findButton = (variant) =>
+  const findButton = (variant, category) =>
     wrapper
       .findAll(GlButton)
-      .filter((w) => w.attributes('variant') === variant)
+      .filter((w) => w.attributes('variant') === variant && w.attributes('category') === category)
       .at(0);
   const findForm = () => wrapper.find('form');
   const findUsernameInput = () => wrapper.find(GlFormInput);
-  const findPrimaryButton = () => findButton('danger');
-  const findSecondaryButton = () => findButton('warning');
+  const findPrimaryButton = () => findButton('danger', 'primary');
+  const findSecondaryButton = () => findButton('danger', 'secondary');
   const findAuthenticityToken = () => new FormData(findForm().element).get('authenticity_token');
   const getUsername = () => findUsernameInput().attributes('value');
   const getMethodParam = () => new FormData(findForm().element).get('_method');
diff --git a/spec/frontend/pages/admin/users/new/index_spec.js b/spec/frontend/pages/admin/users/new/index_spec.js
deleted file mode 100644
index ec9fe487030..00000000000
--- a/spec/frontend/pages/admin/users/new/index_spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import $ from 'jquery';
-import UserInternalRegexHandler from '~/pages/admin/users/new/index';
-
-describe('UserInternalRegexHandler', () => {
-  const FIXTURE = 'admin/users/new_with_internal_user_regex.html';
-  let $userExternal;
-  let $userEmail;
-  let $warningMessage;
-
-  beforeEach(() => {
-    loadFixtures(FIXTURE);
-    // eslint-disable-next-line no-new
-    new UserInternalRegexHandler();
-    $userExternal = $('#user_external');
-    $userEmail = $('#user_email');
-    $warningMessage = $('#warning_external_automatically_set');
-    if (!$userExternal.prop('checked')) $userExternal.prop('checked', 'checked');
-  });
-
-  describe('Behaviour of userExternal checkbox when', () => {
-    it('matches email as internal', (done) => {
-      expect($warningMessage.hasClass('hidden')).toBeTruthy();
-
-      $userEmail.val('test@').trigger('input');
-
-      expect($userExternal.prop('checked')).toBeFalsy();
-      expect($warningMessage.hasClass('hidden')).toBeFalsy();
-      done();
-    });
-
-    it('matches email as external', (done) => {
-      expect($warningMessage.hasClass('hidden')).toBeTruthy();
-
-      $userEmail.val('test.ext@').trigger('input');
-
-      expect($userExternal.prop('checked')).toBeTruthy();
-      expect($warningMessage.hasClass('hidden')).toBeTruthy();
-      done();
-    });
-  });
-});
diff --git a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
index 694a0c2b9c1..2992c7f0624 100644
--- a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
+++ b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
@@ -1,7 +1,8 @@
-import { GlForm, GlFormInputGroup } from '@gitlab/ui';
+import { GlForm, GlFormInputGroup, GlFormInput } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import AxiosMockAdapter from 'axios-mock-adapter';
+import { kebabCase } from 'lodash';
 import createFlash from '~/flash';
 import httpStatus from '~/lib/utils/http_status';
 import * as urlUtility from '~/lib/utils/url_utility';
@@ -59,6 +60,7 @@ describe('ForkForm component', () => {
       },
       stubs: {
         GlFormInputGroup,
+        GlFormInput,
       },
     });
   };
@@ -204,6 +206,37 @@ describe('ForkForm component', () => {
     });
   });
 
+  describe('project slug', () => {
+    const projectPath = 'some other project slug';
+
+    beforeEach(() => {
+      mockGetRequest();
+      createComponent({
+        projectPath,
+      });
+    });
+
+    it('initially loads slug without kebab-case transformation', () => {
+      expect(findForkSlugInput().attributes('value')).toBe(projectPath);
+    });
+
+    it('changes to kebab case when project name changes', async () => {
+      const newInput = `${projectPath}1`;
+      findForkNameInput().vm.$emit('input', newInput);
+      await wrapper.vm.$nextTick();
+
+      expect(findForkSlugInput().attributes('value')).toBe(kebabCase(newInput));
+    });
+
+    it('does not change to kebab case when project slug is changed manually', async () => {
+      const newInput = `${projectPath}1`;
+      findForkSlugInput().vm.$emit('input', newInput);
+      await wrapper.vm.$nextTick();
+
+      expect(findForkSlugInput().attributes('value')).toBe(newInput);
+    });
+  });
+
   describe('visibility level', () => {
     it.each`
       project       | namespace     | privateIsDisabled | internalIsDisabled | publicIsDisabled
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',
+  },
 };
diff --git a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
index bee628c3a56..878721666ff 100644
--- a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
+++ b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
@@ -46,6 +46,7 @@ const defaultProps = {
   pagesHelpPath: '/help/user/project/pages/introduction#gitlab-pages-access-control',
   packagesAvailable: false,
   packagesHelpPath: '/help/user/packages/index',
+  requestCveAvailable: true,
 };
 
 describe('Settings Panel', () => {
@@ -76,6 +77,7 @@ describe('Settings Panel', () => {
   const findRepositoryFeatureSetting = () =>
     findRepositoryFeatureProjectRow().find(projectFeatureSetting);
   const findProjectVisibilitySettings = () => wrapper.find({ ref: 'project-visibility-settings' });
+  const findIssuesSettingsRow = () => wrapper.find({ ref: 'issues-settings' });
   const findAnalyticsRow = () => wrapper.find({ ref: 'analytics-settings' });
   const findProjectVisibilityLevelInput = () => wrapper.find('[name="project[visibility_level]"]');
   const findRequestAccessEnabledInput = () =>
@@ -174,6 +176,16 @@ describe('Settings Panel', () => {
     });
   });
 
+  describe('Issues settings', () => {
+    it('has label for CVE request toggle', () => {
+      wrapper = mountComponent();
+
+      expect(findIssuesSettingsRow().findComponent(GlToggle).props('label')).toBe(
+        settingsPanel.i18n.cve_request_toggle_label,
+      );
+    });
+  });
+
   describe('Repository', () => {
     it('should set the repository help text when the visibility level is set to private', () => {
       wrapper = mountComponent({ currentSettings: { visibilityLevel: visibilityOptions.PRIVATE } });
@@ -228,7 +240,7 @@ describe('Settings Panel', () => {
     });
   });
 
-  describe('Pipelines', () => {
+  describe('CI/CD', () => {
     it('should enable the builds access level input when the repository is enabled', () => {
       wrapper = mountComponent({
         currentSettings: { repositoryAccessLevel: featureAccessLevel.EVERYONE },
@@ -304,6 +316,17 @@ describe('Settings Panel', () => {
 
       expect(findContainerRegistryEnabledInput().props('disabled')).toBe(true);
     });
+
+    it('has label for the toggle', () => {
+      wrapper = mountComponent({
+        currentSettings: { visibilityLevel: visibilityOptions.PUBLIC },
+        registryAvailable: true,
+      });
+
+      expect(findContainerRegistrySettings().findComponent(GlToggle).props('label')).toBe(
+        settingsPanel.i18n.containerRegistryLabel,
+      );
+    });
   });
 
   describe('Git Large File Storage', () => {
@@ -342,6 +365,15 @@ describe('Settings Panel', () => {
       expect(findLFSFeatureToggle().props('disabled')).toBe(true);
     });
 
+    it('has label for toggle', () => {
+      wrapper = mountComponent({
+        currentSettings: { repositoryAccessLevel: featureAccessLevel.EVERYONE },
+        lfsAvailable: true,
+      });
+
+      expect(findLFSFeatureToggle().props('label')).toBe(settingsPanel.i18n.lfsLabel);
+    });
+
     it('should not change lfsEnabled when disabling the repository', async () => {
       // mount over shallowMount, because we are aiming to test rendered state of toggle
       wrapper = mountComponent({ currentSettings: { lfsEnabled: true } }, mount);
@@ -432,6 +464,17 @@ describe('Settings Panel', () => {
 
       expect(findPackagesEnabledInput().props('disabled')).toBe(true);
     });
+
+    it('has label for toggle', () => {
+      wrapper = mountComponent({
+        currentSettings: { repositoryAccessLevel: featureAccessLevel.EVERYONE },
+        packagesAvailable: true,
+      });
+
+      expect(findPackagesEnabledInput().findComponent(GlToggle).props('label')).toBe(
+        settingsPanel.i18n.packagesLabel,
+      );
+    });
   });
 
   describe('Pages', () => {
diff --git a/spec/frontend/pages/shared/wikis/wiki_alert_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js
index 6a18473b1a7..6a18473b1a7 100644
--- a/spec/frontend/pages/shared/wikis/wiki_alert_spec.js
+++ b/spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js
diff --git a/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
new file mode 100644
index 00000000000..8ab0b87d2ee
--- /dev/null
+++ b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
@@ -0,0 +1,222 @@
+import { mount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import WikiForm from '~/pages/shared/wikis/components/wiki_form.vue';
+
+describe('WikiForm', () => {
+  let wrapper;
+
+  const findForm = () => wrapper.find('form');
+  const findTitle = () => wrapper.find('#wiki_title');
+  const findFormat = () => wrapper.find('#wiki_format');
+  const findContent = () => wrapper.find('#wiki_content');
+  const findMessage = () => wrapper.find('#wiki_message');
+  const findSubmitButton = () => wrapper.findByTestId('wiki-submit-button');
+  const findCancelButton = () => wrapper.findByTestId('wiki-cancel-button');
+  const findTitleHelpLink = () => wrapper.findByTestId('wiki-title-help-link');
+  const findMarkdownHelpLink = () => wrapper.findByTestId('wiki-markdown-help-link');
+
+  const pageInfoNew = {
+    persisted: false,
+    uploadsPath: '/project/path/-/wikis/attachments',
+    wikiPath: '/project/path/-/wikis',
+    helpPath: '/help/user/project/wiki/index',
+    markdownHelpPath: '/help/user/markdown',
+    markdownPreviewPath: '/project/path/-/wikis/.md/preview-markdown',
+    createPath: '/project/path/-/wikis/new',
+  };
+
+  const pageInfoPersisted = {
+    ...pageInfoNew,
+    persisted: true,
+
+    title: 'My page',
+    content: 'My page content',
+    format: 'markdown',
+    path: '/project/path/-/wikis/home',
+  };
+
+  function createWrapper(persisted = false, pageInfo = {}) {
+    wrapper = extendedWrapper(
+      mount(
+        WikiForm,
+        {
+          provide: {
+            formatOptions: {
+              Markdown: 'markdown',
+              RDoc: 'rdoc',
+              AsciiDoc: 'asciidoc',
+              Org: 'org',
+            },
+            pageInfo: {
+              ...(persisted ? pageInfoPersisted : pageInfoNew),
+              ...pageInfo,
+            },
+          },
+        },
+        { attachToDocument: true },
+      ),
+    );
+
+    jest.spyOn(wrapper.vm, 'onBeforeUnload');
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it.each`
+    title                | persisted | message
+    ${'my page'}         | ${false}  | ${'Create my page'}
+    ${'my-page'}         | ${false}  | ${'Create my page'}
+    ${'somedir/my-page'} | ${false}  | ${'Create somedir/my page'}
+    ${'my-page'}         | ${true}   | ${'Update my page'}
+  `(
+    'updates the commit message to $message when title is $title and persisted=$persisted',
+    async ({ title, message, persisted }) => {
+      createWrapper(persisted);
+
+      findTitle().setValue(title);
+
+      await wrapper.vm.$nextTick();
+
+      expect(findMessage().element.value).toBe(message);
+    },
+  );
+
+  it('sets the commit message to "Update My page" when the page first loads when persisted', async () => {
+    createWrapper(true);
+
+    await wrapper.vm.$nextTick();
+
+    expect(findMessage().element.value).toBe('Update My page');
+  });
+
+  it.each`
+    value         | text
+    ${'markdown'} | ${'[Link Title](page-slug)'}
+    ${'rdoc'}     | ${'{Link title}[link:page-slug]'}
+    ${'asciidoc'} | ${'link:page-slug[Link title]'}
+    ${'org'}      | ${'[[page-slug]]'}
+  `('updates the link help message when format=$value is selected', async ({ value, text }) => {
+    createWrapper();
+
+    findFormat().find(`option[value=${value}]`).setSelected();
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.text()).toContain(text);
+  });
+
+  it('starts with no unload warning', async () => {
+    createWrapper();
+
+    await wrapper.vm.$nextTick();
+
+    window.dispatchEvent(new Event('beforeunload'));
+
+    expect(wrapper.vm.onBeforeUnload).not.toHaveBeenCalled();
+  });
+
+  it.each`
+    persisted | titleHelpText                                                                                              | titleHelpLink
+    ${true}   | ${'You can move this page by adding the path to the beginning of the title.'}                              | ${'/help/user/project/wiki/index#move-a-wiki-page'}
+    ${false}  | ${'You can specify the full path for the new file. We will automatically create any missing directories.'} | ${'/help/user/project/wiki/index#create-a-new-wiki-page'}
+  `(
+    'shows appropriate title help text and help link for when persisted=$persisted',
+    async ({ persisted, titleHelpLink, titleHelpText }) => {
+      createWrapper(persisted);
+
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.text()).toContain(titleHelpText);
+      expect(findTitleHelpLink().attributes().href).toEqual(titleHelpLink);
+    },
+  );
+
+  it('shows correct link for wiki specific markdown docs', async () => {
+    createWrapper();
+
+    await wrapper.vm.$nextTick();
+
+    expect(findMarkdownHelpLink().attributes().href).toEqual(
+      '/help/user/markdown#wiki-specific-markdown',
+    );
+  });
+
+  describe('when wiki content is updated', () => {
+    beforeEach(() => {
+      createWrapper();
+
+      const input = findContent();
+      input.setValue('Lorem ipsum dolar sit!');
+      input.element.dispatchEvent(new Event('input'));
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('sets before unload warning', () => {
+      window.dispatchEvent(new Event('beforeunload'));
+
+      expect(wrapper.vm.onBeforeUnload).toHaveBeenCalled();
+    });
+
+    it('when form submitted, unsets before unload warning', async () => {
+      findForm().element.dispatchEvent(new Event('submit'));
+
+      await wrapper.vm.$nextTick();
+
+      window.dispatchEvent(new Event('beforeunload'));
+
+      expect(wrapper.vm.onBeforeUnload).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('submit button state', () => {
+    it.each`
+      title          | content        | buttonState   | disabledAttr
+      ${'something'} | ${'something'} | ${'enabled'}  | ${undefined}
+      ${''}          | ${'something'} | ${'disabled'} | ${'disabled'}
+      ${'something'} | ${''}          | ${'disabled'} | ${'disabled'}
+      ${''}          | ${''}          | ${'disabled'} | ${'disabled'}
+      ${'   '}       | ${'   '}       | ${'disabled'} | ${'disabled'}
+    `(
+      "when title='$title', content='$content', then the button is $buttonState'",
+      async ({ title, content, disabledAttr }) => {
+        createWrapper();
+
+        findTitle().setValue(title);
+        findContent().setValue(content);
+
+        await wrapper.vm.$nextTick();
+
+        expect(findSubmitButton().attributes().disabled).toBe(disabledAttr);
+      },
+    );
+
+    it.each`
+      persisted | buttonLabel
+      ${true}   | ${'Save changes'}
+      ${false}  | ${'Create page'}
+    `('when persisted=$persisted, label is set to $buttonLabel', ({ persisted, buttonLabel }) => {
+      createWrapper(persisted);
+
+      expect(findSubmitButton().text()).toBe(buttonLabel);
+    });
+  });
+
+  describe('cancel button state', () => {
+    it.each`
+      persisted | redirectLink
+      ${false}  | ${'/project/path/-/wikis'}
+      ${true}   | ${'/project/path/-/wikis/home'}
+    `(
+      'when persisted=$persisted, redirects the user to appropriate path',
+      ({ persisted, redirectLink }) => {
+        createWrapper(persisted);
+
+        expect(findCancelButton().attributes().href).toEqual(redirectLink);
+      },
+    );
+  });
+});