Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

5 files changed, 45 insertions, 276 deletions

diff --git a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
index 417567c9f4c..43361bb6f24 100644
--- a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
+++ b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
@@ -12,11 +12,11 @@ exports[`Code Coverage when fetching data is successful matches the snapshot 1`]
     <gl-dropdown-stub
       category="primary"
       clearalltext="Clear all"
+      clearalltextclass="gl-px-5"
       headertext=""
       hideheaderborder="true"
       highlighteditemstitle="Selected"
       highlighteditemstitleclass="gl-px-5"
-      showhighlighteditemstitle="true"
       size="medium"
       text="rspec"
       variant="default"
diff --git a/spec/frontend/pages/projects/new/components/app_spec.js b/spec/frontend/pages/projects/new/components/app_spec.js
deleted file mode 100644
index ab8c6d529a8..00000000000
--- a/spec/frontend/pages/projects/new/components/app_spec.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import App from '~/pages/projects/new/components/app.vue';
-import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue';
-
-describe('Experimental new project creation app', () => {
-  let wrapper;
-
-  const createComponent = (propsData) => {
-    wrapper = shallowMount(App, { propsData });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('passes custom new project guideline text to underlying component', () => {
-    const DEMO_GUIDELINES = 'Demo guidelines';
-    const guidelineSelector = '#new-project-guideline';
-    createComponent({
-      newProjectGuidelines: DEMO_GUIDELINES,
-    });
-
-    expect(wrapper.find(guidelineSelector).text()).toBe(DEMO_GUIDELINES);
-  });
-
-  it.each`
-    isCiCdAvailable | outcome
-    ${false}        | ${'do not show CI/CD panel'}
-    ${true}         | ${'show CI/CD panel'}
-  `('$outcome when isCiCdAvailable is $isCiCdAvailable', ({ isCiCdAvailable }) => {
-    createComponent({
-      isCiCdAvailable,
-    });
-
-    expect(
-      Boolean(
-        wrapper
-          .findComponent(NewNamespacePage)
-          .props()
-          .panels.find((p) => p.name === 'cicd_for_external_repo'),
-      ),
-    ).toBe(isCiCdAvailable);
-  });
-});
diff --git a/spec/frontend/pages/projects/new/components/new_project_push_tip_popover_spec.js b/spec/frontend/pages/projects/new/components/new_project_push_tip_popover_spec.js
deleted file mode 100644
index d4cf8c78600..00000000000
--- a/spec/frontend/pages/projects/new/components/new_project_push_tip_popover_spec.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { GlPopover, GlFormInputGroup } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import NewProjectPushTipPopover from '~/pages/projects/new/components/new_project_push_tip_popover.vue';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-
-describe('New project push tip popover', () => {
-  let wrapper;
-  const targetId = 'target';
-  const pushToCreateProjectCommand = 'command';
-  const workingWithProjectsHelpPath = 'path';
-
-  const findPopover = () => wrapper.findComponent(GlPopover);
-  const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
-  const findFormInput = () => wrapper.findComponent(GlFormInputGroup);
-  const findHelpLink = () => wrapper.find('a');
-  const findTarget = () => document.getElementById(targetId);
-
-  const buildWrapper = () => {
-    wrapper = shallowMount(NewProjectPushTipPopover, {
-      propsData: {
-        target: findTarget(),
-      },
-      stubs: {
-        GlFormInputGroup,
-      },
-      provide: {
-        pushToCreateProjectCommand,
-        workingWithProjectsHelpPath,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    setFixtures(`<a id="${targetId}"></a>`);
-    buildWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('renders popover that targets the specified target', () => {
-    expect(findPopover().props()).toMatchObject({
-      target: findTarget(),
-      triggers: 'click blur',
-      placement: 'top',
-      title: 'Push to create a project',
-    });
-  });
-
-  it('renders a readonly form input with the push to create command', () => {
-    expect(findFormInput().props()).toMatchObject({
-      value: pushToCreateProjectCommand,
-      selectOnClick: true,
-    });
-    expect(findFormInput().attributes()).toMatchObject({
-      'aria-label': 'Push project from command line',
-      readonly: 'readonly',
-    });
-  });
-
-  it('allows copying the push command using the clipboard button', () => {
-    expect(findClipboardButton().props()).toMatchObject({
-      text: pushToCreateProjectCommand,
-      tooltipPlacement: 'right',
-      title: 'Copy command',
-    });
-  });
-
-  it('displays a link to open the push command help page reference', () => {
-    expect(findHelpLink().attributes().href).toBe(
-      `${workingWithProjectsHelpPath}#push-to-create-a-new-project`,
-    );
-  });
-});
diff --git a/spec/frontend/pages/projects/new/components/new_project_url_select_spec.js b/spec/frontend/pages/projects/new/components/new_project_url_select_spec.js
deleted file mode 100644
index 8a7f9229503..00000000000
--- a/spec/frontend/pages/projects/new/components/new_project_url_select_spec.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import { GlButton, GlDropdown, GlDropdownItem, GlDropdownSectionHeader } from '@gitlab/ui';
-import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
-import VueApollo from 'vue-apollo';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import NewProjectUrlSelect from '~/pages/projects/new/components/new_project_url_select.vue';
-import searchQuery from '~/pages/projects/new/queries/search_namespaces_where_user_can_create_projects.query.graphql';
-
-describe('NewProjectUrlSelect component', () => {
-  let wrapper;
-
-  const data = {
-    currentUser: {
-      groups: {
-        nodes: [
-          {
-            id: 'gid://gitlab/Group/26',
-            fullPath: 'flightjs',
-          },
-          {
-            id: 'gid://gitlab/Group/28',
-            fullPath: 'h5bp',
-          },
-        ],
-      },
-      namespace: {
-        id: 'gid://gitlab/Namespace/1',
-        fullPath: 'root',
-      },
-    },
-  };
-
-  const localVue = createLocalVue();
-  localVue.use(VueApollo);
-
-  const requestHandlers = [[searchQuery, jest.fn().mockResolvedValue({ data })]];
-  const apolloProvider = createMockApollo(requestHandlers);
-
-  const provide = {
-    namespaceFullPath: 'h5bp',
-    namespaceId: '28',
-    rootUrl: 'https://gitlab.com/',
-    trackLabel: 'blank_project',
-  };
-
-  const mountComponent = ({ mountFn = shallowMount } = {}) =>
-    mountFn(NewProjectUrlSelect, { localVue, apolloProvider, provide });
-
-  const findButtonLabel = () => wrapper.findComponent(GlButton);
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findHiddenInput = () => wrapper.find('input');
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('renders the root url as a label', () => {
-    wrapper = mountComponent();
-
-    expect(findButtonLabel().text()).toBe(provide.rootUrl);
-    expect(findButtonLabel().props('label')).toBe(true);
-  });
-
-  it('renders a dropdown with the initial namespace full path as the text', () => {
-    wrapper = mountComponent();
-
-    expect(findDropdown().props('text')).toBe(provide.namespaceFullPath);
-  });
-
-  it('renders a dropdown with the initial namespace id in the hidden input', () => {
-    wrapper = mountComponent();
-
-    expect(findHiddenInput().attributes('value')).toBe(provide.namespaceId);
-  });
-
-  it('renders expected dropdown items', async () => {
-    wrapper = mountComponent({ mountFn: mount });
-
-    jest.runOnlyPendingTimers();
-    await wrapper.vm.$nextTick();
-
-    const listItems = wrapper.findAll('li');
-
-    expect(listItems.at(0).findComponent(GlDropdownSectionHeader).text()).toBe('Groups');
-    expect(listItems.at(1).text()).toBe(data.currentUser.groups.nodes[0].fullPath);
-    expect(listItems.at(2).text()).toBe(data.currentUser.groups.nodes[1].fullPath);
-    expect(listItems.at(3).findComponent(GlDropdownSectionHeader).text()).toBe('Users');
-    expect(listItems.at(4).text()).toBe(data.currentUser.namespace.fullPath);
-  });
-
-  it('updates hidden input with selected namespace', async () => {
-    wrapper = mountComponent();
-
-    jest.runOnlyPendingTimers();
-    await wrapper.vm.$nextTick();
-
-    wrapper.findComponent(GlDropdownItem).vm.$emit('click');
-
-    await wrapper.vm.$nextTick();
-
-    expect(findHiddenInput().attributes()).toMatchObject({
-      name: 'project[namespace_id]',
-      value: getIdFromGraphQLId(data.currentUser.groups.nodes[0].id).toString(),
-    });
-  });
-
-  it('tracks clicking on the dropdown', () => {
-    wrapper = mountComponent();
-
-    const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-
-    findDropdown().vm.$emit('show');
-
-    expect(trackingSpy).toHaveBeenCalledWith(undefined, 'activate_form_input', {
-      label: provide.trackLabel,
-      property: 'project_path',
-    });
-
-    unmockTracking();
-  });
-});
diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
index 2a3b07f95f2..53c1733eab9 100644
--- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
+++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
@@ -10,7 +10,17 @@ describe('Timezone Dropdown', () => {
   let $dropdownEl = null;
   let $wrapper = null;
   const tzListSel = '.dropdown-content ul li a.is-active';
-  const tzDropdownToggleText = '.dropdown-toggle-text';
+
+  const initTimezoneDropdown = (options = {}) => {
+    // eslint-disable-next-line no-new
+    new TimezoneDropdown({
+      $inputEl,
+      $dropdownEl,
+      ...options,
+    });
+  };
+
+  const findDropdownToggleText = () => $wrapper.find('.dropdown-toggle-text');
 
   describe('Initialize', () => {
     describe('with dropdown already loaded', () => {
@@ -18,16 +28,13 @@ describe('Timezone Dropdown', () => {
         loadFixtures('pipeline_schedules/edit.html');
         $wrapper = $('.dropdown');
         $inputEl = $('#schedule_cron_timezone');
+        $inputEl.val('');
         $dropdownEl = $('.js-timezone-dropdown');
-
-        // eslint-disable-next-line no-new
-        new TimezoneDropdown({
-          $inputEl,
-          $dropdownEl,
-        });
       });
 
       it('can take an $inputEl in the constructor', () => {
+        initTimezoneDropdown();
+
         const tzStr = '[UTC + 5.5] Sri Jayawardenepura';
         const tzValue = 'Asia/Colombo';
 
@@ -42,6 +49,8 @@ describe('Timezone Dropdown', () => {
       });
 
       it('will format data array of timezones into a list of offsets', () => {
+        initTimezoneDropdown();
+
         const data = $dropdownEl.data('data');
         const formatted = $wrapper.find(tzListSel).text();
 
@@ -50,10 +59,28 @@ describe('Timezone Dropdown', () => {
         });
       });
 
-      it('will default the timezone to UTC', () => {
-        const tz = $inputEl.val();
+      describe('when `allowEmpty` property is `false`', () => {
+        beforeEach(() => {
+          initTimezoneDropdown();
+        });
+
+        it('will default the timezone to UTC', () => {
+          const tz = $inputEl.val();
 
-        expect(tz).toBe('UTC');
+          expect(tz).toBe('UTC');
+        });
+      });
+
+      describe('when `allowEmpty` property is `true`', () => {
+        beforeEach(() => {
+          initTimezoneDropdown({
+            allowEmpty: true,
+          });
+        });
+
+        it('will default the value of the input to an empty string', () => {
+          expect($inputEl.val()).toBe('');
+        });
       });
     });
 
@@ -68,23 +95,15 @@ describe('Timezone Dropdown', () => {
       it('will populate the list of UTC offsets after the dropdown is loaded', () => {
         expect($wrapper.find(tzListSel).length).toEqual(0);
 
-        // eslint-disable-next-line no-new
-        new TimezoneDropdown({
-          $inputEl,
-          $dropdownEl,
-        });
+        initTimezoneDropdown();
 
         expect($wrapper.find(tzListSel).length).toEqual($($dropdownEl).data('data').length);
       });
 
       it('will call a provided handler when a new timezone is selected', () => {
         const onSelectTimezone = jest.fn();
-        // eslint-disable-next-line no-new
-        new TimezoneDropdown({
-          $inputEl,
-          $dropdownEl,
-          onSelectTimezone,
-        });
+
+        initTimezoneDropdown({ onSelectTimezone });
 
         $wrapper.find(tzListSel).first().trigger('click');
 
@@ -94,24 +113,15 @@ describe('Timezone Dropdown', () => {
       it('will correctly set the dropdown label if a timezone identifier is set on the inputEl', () => {
         $inputEl.val('America/St_Johns');
 
-        // eslint-disable-next-line no-new
-        new TimezoneDropdown({
-          $inputEl,
-          $dropdownEl,
-          displayFormat: (selectedItem) => formatTimezone(selectedItem),
-        });
+        initTimezoneDropdown({ displayFormat: (selectedItem) => formatTimezone(selectedItem) });
 
-        expect($wrapper.find(tzDropdownToggleText).html()).toEqual('[UTC - 2.5] Newfoundland');
+        expect(findDropdownToggleText().html()).toEqual('[UTC - 2.5] Newfoundland');
       });
 
       it('will call a provided `displayFormat` handler to format the dropdown value', () => {
         const displayFormat = jest.fn();
-        // eslint-disable-next-line no-new
-        new TimezoneDropdown({
-          $inputEl,
-          $dropdownEl,
-          displayFormat,
-        });
+
+        initTimezoneDropdown({ displayFormat });
 
         $wrapper.find(tzListSel).first().trigger('click');