Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

12 files changed, 52 insertions, 14 deletions

diff --git a/spec/frontend/projects/commits/components/author_select_spec.js b/spec/frontend/projects/commits/components/author_select_spec.js
index 4e567ab030e..d11090cba8a 100644
--- a/spec/frontend/projects/commits/components/author_select_spec.js
+++ b/spec/frontend/projects/commits/components/author_select_spec.js
@@ -2,6 +2,7 @@ import { GlDropdown, GlDropdownSectionHeader, GlSearchBoxByType, GlDropdownItem
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import * as urlUtility from '~/lib/utils/url_utility';
 import AuthorSelect from '~/projects/commits/components/author_select.vue';
 import { createStore } from '~/projects/commits/store';
@@ -30,7 +31,7 @@ describe('Author Select', () => {
   let wrapper;
 
   const createComponent = () => {
-    setFixtures(`
+    setHTMLFixture(`
       <div class="js-project-commits-show">
         <input id="commits-search" type="text" />
         <div id="commits-list"></div>
@@ -54,6 +55,7 @@ describe('Author Select', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    resetHTMLFixture();
   });
 
   const findDropdownContainer = () => wrapper.find({ ref: 'dropdownContainer' });
diff --git a/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap b/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap
index 26a3b27d958..736d149f06d 100644
--- a/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap
+++ b/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap
@@ -31,6 +31,7 @@ exports[`Project remove modal initialized matches the snapshot 1`] = `
   <gl-modal-stub
     actioncancel="[object Object]"
     actionprimary="[object Object]"
+    arialabel=""
     dismisslabel="Close"
     footer-class="gl-bg-gray-10 gl-p-5"
     modalclass=""
@@ -49,6 +50,7 @@ exports[`Project remove modal initialized matches the snapshot 1`] = `
         primarybuttontext=""
         secondarybuttonlink=""
         secondarybuttontext=""
+        showicon="true"
         title=""
         variant="danger"
       >
diff --git a/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap b/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap
index 2d1039a8743..26495fbcf83 100644
--- a/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap
+++ b/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap
@@ -43,6 +43,7 @@ exports[`Project remove modal intialized matches the snapshot 1`] = `
         primarybuttontext=""
         secondarybuttonlink=""
         secondarybuttontext=""
+        showicon="true"
         title=""
         variant="danger"
       >
diff --git a/spec/frontend/projects/new/components/deployment_target_select_spec.js b/spec/frontend/projects/new/components/deployment_target_select_spec.js
index 1c443879dc3..f3b22d4a1b9 100644
--- a/spec/frontend/projects/new/components/deployment_target_select_spec.js
+++ b/spec/frontend/projects/new/components/deployment_target_select_spec.js
@@ -1,6 +1,7 @@
 import { GlFormGroup, GlFormSelect, GlFormText, GlLink, GlSprintf } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { mockTracking } from 'helpers/tracking_helper';
 import DeploymentTargetSelect from '~/projects/new/components/deployment_target_select.vue';
 import {
@@ -32,7 +33,7 @@ describe('Deployment target select', () => {
   };
 
   const createForm = () => {
-    setFixtures(`
+    setHTMLFixture(`
       <form id="${NEW_PROJECT_FORM}">
       </form>
     `);
@@ -47,6 +48,7 @@ describe('Deployment target select', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    resetHTMLFixture();
   });
 
   it('renders the correct label', () => {
diff --git a/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js b/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js
index 31ddbc80ae4..42259a5c392 100644
--- a/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js
+++ b/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js
@@ -1,5 +1,6 @@
 import { GlPopover, GlFormInputGroup } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import NewProjectPushTipPopover from '~/projects/new/components/new_project_push_tip_popover.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
@@ -31,12 +32,13 @@ describe('New project push tip popover', () => {
   };
 
   beforeEach(() => {
-    setFixtures(`<a id="${targetId}"></a>`);
+    setHTMLFixture(`<a id="${targetId}"></a>`);
     buildWrapper();
   });
 
   afterEach(() => {
     wrapper.destroy();
+    resetHTMLFixture();
   });
 
   it('renders popover that targets the specified target', () => {
diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
index cafb3f231bd..7bb289408b8 100644
--- a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
@@ -1,8 +1,8 @@
 import { nextTick } from 'vue';
-import { GlSegmentedControl } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import CiCdAnalyticsAreaChart from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue';
 import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
+import SegmentedControlButtonGroup from '~/vue_shared/components/segmented_control_button_group.vue';
 import { transformedAreaChartData, chartOptions } from '../mock_data';
 
 const DEFAULT_PROPS = {
@@ -48,7 +48,7 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', (
   });
 
   const findMetricsSlot = () => wrapper.findByTestId('metrics-slot');
-  const findSegmentedControl = () => wrapper.findComponent(GlSegmentedControl);
+  const findSegmentedControl = () => wrapper.findComponent(SegmentedControlButtonGroup);
 
   describe('segmented control', () => {
     beforeEach(() => {
@@ -56,7 +56,7 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', (
     });
 
     it('should default to the first chart', () => {
-      expect(findSegmentedControl().props('checked')).toBe(0);
+      expect(findSegmentedControl().props('value')).toBe(0);
     });
 
     it('should use the title and index as values', () => {
diff --git a/spec/frontend/projects/project_import_gitlab_project_spec.js b/spec/frontend/projects/project_import_gitlab_project_spec.js
index aaf8a81f626..76621ba9c06 100644
--- a/spec/frontend/projects/project_import_gitlab_project_spec.js
+++ b/spec/frontend/projects/project_import_gitlab_project_spec.js
@@ -1,3 +1,4 @@
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import projectImportGitlab from '~/projects/project_import_gitlab_project';
 
 describe('Import Gitlab project', () => {
@@ -7,7 +8,7 @@ describe('Import Gitlab project', () => {
   const setTestFixtures = (url) => {
     window.history.pushState({}, null, url);
 
-    setFixtures(`
+    setHTMLFixture(`
       <input class="js-path-name" />
       <input class="js-project-name" />
     `);
@@ -21,6 +22,7 @@ describe('Import Gitlab project', () => {
 
   afterEach(() => {
     window.history.pushState({}, null, '');
+    resetHTMLFixture();
   });
 
   describe('project name', () => {
diff --git a/spec/frontend/projects/project_new_spec.js b/spec/frontend/projects/project_new_spec.js
index d2936cb9efe..fe325343da8 100644
--- a/spec/frontend/projects/project_new_spec.js
+++ b/spec/frontend/projects/project_new_spec.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { TEST_HOST } from 'helpers/test_constants';
 import projectNew from '~/projects/project_new';
 
@@ -8,7 +9,7 @@ describe('New Project', () => {
   let $projectName;
 
   beforeEach(() => {
-    setFixtures(`
+    setHTMLFixture(`
       <div class='toggle-import-form'>
         <div class='import-url-data'>
           <div class="form-group">
@@ -33,6 +34,10 @@ describe('New Project', () => {
     $projectName = $('#project_name');
   });
 
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
   describe('deriveProjectPathFromUrl', () => {
     const dummyImportUrl = `${TEST_HOST}/dummy/import/url.git`;
 
diff --git a/spec/frontend/projects/projects_filterable_list_spec.js b/spec/frontend/projects/projects_filterable_list_spec.js
index a41e8b7bc09..f217efa411e 100644
--- a/spec/frontend/projects/projects_filterable_list_spec.js
+++ b/spec/frontend/projects/projects_filterable_list_spec.js
@@ -1,4 +1,4 @@
-import { setHTMLFixture } from 'helpers/fixtures';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import ProjectsFilterableList from '~/projects/projects_filterable_list';
 
 describe('ProjectsFilterableList', () => {
@@ -20,6 +20,10 @@ describe('ProjectsFilterableList', () => {
     List = new ProjectsFilterableList(form, filter, holder);
   });
 
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
   describe('getFilterEndpoint', () => {
     it('updates converts getPagePath for projects', () => {
       jest.spyOn(List, 'getPagePath').mockReturnValue('blah/projects?');
diff --git a/spec/frontend/projects/settings/access_dropdown_spec.js b/spec/frontend/projects/settings/access_dropdown_spec.js
index 236968a3736..65b01172e7e 100644
--- a/spec/frontend/projects/settings/access_dropdown_spec.js
+++ b/spec/frontend/projects/settings/access_dropdown_spec.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import AccessDropdown from '~/projects/settings/access_dropdown';
 import { LEVEL_TYPES } from '~/projects/settings/constants';
 
@@ -7,7 +8,7 @@ describe('AccessDropdown', () => {
   let dropdown;
 
   beforeEach(() => {
-    setFixtures(`
+    setHTMLFixture(`
       <div id="dummy-dropdown">
         <span class="dropdown-toggle-text"></span>
       </div>
@@ -28,6 +29,10 @@ describe('AccessDropdown', () => {
     dropdown = new AccessDropdown(options);
   });
 
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
   describe('toggleLabel', () => {
     let $dropdownToggleText;
     const dummyItems = [
diff --git a/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js b/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js
index dbea94cbd53..8b8e7d1454d 100644
--- a/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js
+++ b/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js
@@ -1,11 +1,11 @@
-import { GlTokenSelector, GlToken } from '@gitlab/ui';
+import { GlAvatarLabeled, GlTokenSelector, GlToken } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import TopicsTokenSelector from '~/projects/settings/topics/components/topics_token_selector.vue';
 
 const mockTopics = [
-  { id: 1, name: 'topic1', avatarUrl: 'avatar.com/topic1.png' },
-  { id: 2, name: 'GitLab', avatarUrl: 'avatar.com/GitLab.png' },
+  { id: 1, name: 'topic1', title: 'Topic 1', avatarUrl: 'avatar.com/topic1.png' },
+  { id: 2, name: 'GitLab', title: 'GitLab', avatarUrl: 'avatar.com/GitLab.png' },
 ];
 
 describe('TopicsTokenSelector', () => {
@@ -38,6 +38,8 @@ describe('TopicsTokenSelector', () => {
 
   const findTokenSelectorInput = () => findTokenSelector().find('input[type="text"]');
 
+  const findAllAvatars = () => wrapper.findAllComponents(GlAvatarLabeled).wrappers;
+
   const setTokenSelectorInputValue = (value) => {
     const tokenSelectorInput = findTokenSelectorInput();
 
@@ -81,6 +83,13 @@ describe('TopicsTokenSelector', () => {
         expect(tokenWrapper.text()).toBe(selected[index].name);
       });
     });
+
+    it('passes topic title to the avatar', async () => {
+      createComponent();
+      const avatars = findAllAvatars();
+
+      mockTopics.map((topic, index) => expect(avatars[index].text()).toBe(topic.title));
+    });
   });
 
   describe('when enter key is pressed', () => {
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
index 57e515723e5..aac1a418142 100644
--- a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
@@ -165,8 +165,12 @@ describe('ServiceDeskSetting', () => {
   describe('save button', () => {
     it('renders a save button to save a template', () => {
       wrapper = createComponent();
+      const saveButton = findButton();
 
-      expect(findButton().text()).toContain('Save changes');
+      expect(saveButton.text()).toContain('Save changes');
+      expect(saveButton.props()).toMatchObject({
+        variant: 'confirm',
+      });
     });
 
     it('emits a save event with the chosen template when the save button is clicked', async () => {