Add latest changes from gitlab-org/gitlab@16-1-stable-eev16.1.0-rc42

8 files changed, 128 insertions, 122 deletions

diff --git a/spec/frontend/projects/commit/components/commit_options_dropdown_spec.js b/spec/frontend/projects/commit/components/commit_options_dropdown_spec.js
index 7df498f597b..8a9c3bfff44 100644
--- a/spec/frontend/projects/commit/components/commit_options_dropdown_spec.js
+++ b/spec/frontend/projects/commit/components/commit_options_dropdown_spec.js
@@ -1,6 +1,4 @@
-import { GlDropdownDivider, GlDropdownSectionHeader } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import CommitOptionsDropdown from '~/projects/commit/components/commit_options_dropdown.vue';
 import { OPEN_REVERT_MODAL, OPEN_CHERRY_PICK_MODAL } from '~/projects/commit/constants';
 import eventHub from '~/projects/commit/event_hub';
@@ -14,18 +12,16 @@ describe('BranchesDropdown', () => {
   };
 
   const createComponent = (props = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(CommitOptionsDropdown, {
-        provide,
-        propsData: {
-          canRevert: true,
-          canCherryPick: true,
-          canTag: true,
-          canEmailPatches: true,
-          ...props,
-        },
-      }),
-    );
+    wrapper = mountExtended(CommitOptionsDropdown, {
+      provide,
+      propsData: {
+        canRevert: true,
+        canCherryPick: true,
+        canTag: true,
+        canEmailPatches: true,
+        ...props,
+      },
+    });
   };
 
   const findRevertLink = () => wrapper.findByTestId('revert-link');
@@ -33,8 +29,6 @@ describe('BranchesDropdown', () => {
   const findTagItem = () => wrapper.findByTestId('tag-link');
   const findEmailPatchesItem = () => wrapper.findByTestId('email-patches-link');
   const findPlainDiffItem = () => wrapper.findByTestId('plain-diff-link');
-  const findDivider = () => wrapper.findComponent(GlDropdownDivider);
-  const findSectionHeader = () => wrapper.findComponent(GlDropdownSectionHeader);
 
   describe('Everything enabled', () => {
     beforeEach(() => {
@@ -42,7 +36,7 @@ describe('BranchesDropdown', () => {
     });
 
     it('has expected dropdown button text', () => {
-      expect(wrapper.attributes('text')).toBe('Options');
+      expect(wrapper.findByTestId('base-dropdown-toggle').text()).toBe('Options');
     });
 
     it('has expected items', () => {
@@ -51,8 +45,6 @@ describe('BranchesDropdown', () => {
           findRevertLink().exists(),
           findCherryPickLink().exists(),
           findTagItem().exists(),
-          findDivider().exists(),
-          findSectionHeader().exists(),
           findEmailPatchesItem().exists(),
           findPlainDiffItem().exists(),
         ].every((exists) => exists),
@@ -94,7 +86,6 @@ describe('BranchesDropdown', () => {
     it('only has the download items', () => {
       createComponent({ canRevert: false, canCherryPick: false, canTag: false });
 
-      expect(findDivider().exists()).toBe(false);
       expect(findEmailPatchesItem().exists()).toBe(true);
       expect(findPlainDiffItem().exists()).toBe(true);
     });
@@ -109,13 +100,13 @@ describe('BranchesDropdown', () => {
     });
 
     it('emits openModal for revert', () => {
-      findRevertLink().vm.$emit('click');
+      findRevertLink().trigger('click');
 
       expect(spy).toHaveBeenCalledWith(OPEN_REVERT_MODAL);
     });
 
     it('emits openModal for cherry-pick', () => {
-      findCherryPickLink().vm.$emit('click');
+      findCherryPickLink().trigger('click');
 
       expect(spy).toHaveBeenCalledWith(OPEN_CHERRY_PICK_MODAL);
     });
diff --git a/spec/frontend/projects/commit_box/info/load_branches_spec.js b/spec/frontend/projects/commit_box/info/load_branches_spec.js
deleted file mode 100644
index b00a6378e07..00000000000
--- a/spec/frontend/projects/commit_box/info/load_branches_spec.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
-import { setHTMLFixture } from 'helpers/fixtures';
-import waitForPromises from 'helpers/wait_for_promises';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
-import { loadBranches } from '~/projects/commit_box/info/load_branches';
-import { initDetailsButton } from '~/projects/commit_box/info/init_details_button';
-
-jest.mock('~/projects/commit_box/info/init_details_button');
-
-const mockCommitPath = '/commit/abcd/branches';
-const mockBranchesRes =
-  '<a href="/-/commits/main">main</a><span><a href="/-/commits/my-branch">my-branch</a></span>';
-
-describe('~/projects/commit_box/info/load_branches', () => {
-  let mock;
-
-  const getElInnerHtml = () => document.querySelector('.js-commit-box-info').innerHTML;
-
-  beforeEach(() => {
-    setHTMLFixture(`
-      <div class="js-commit-box-info" data-commit-path="${mockCommitPath}">
-        <div class="commit-info branches">
-          <span class="spinner"/>
-        </div>
-      </div>`);
-
-    mock = new MockAdapter(axios);
-    mock.onGet(mockCommitPath).reply(HTTP_STATUS_OK, mockBranchesRes);
-  });
-
-  it('initializes the details button', async () => {
-    loadBranches();
-    await waitForPromises();
-
-    expect(initDetailsButton).toHaveBeenCalled();
-  });
-
-  it('loads and renders branches info', async () => {
-    loadBranches();
-    await waitForPromises();
-
-    expect(getElInnerHtml()).toMatchInterpolatedText(
-      `<div class="commit-info branches">${mockBranchesRes}</div>`,
-    );
-  });
-
-  it('does not load when no container is provided', async () => {
-    loadBranches('.js-another-class');
-    await waitForPromises();
-
-    expect(mock.history.get).toHaveLength(0);
-  });
-
-  describe('when branches request returns unsafe content', () => {
-    beforeEach(() => {
-      mock
-        .onGet(mockCommitPath)
-        .reply(HTTP_STATUS_OK, '<a onload="alert(\'xss!\');" href="/-/commits/main">main</a>');
-    });
-
-    it('displays sanitized html', async () => {
-      loadBranches();
-      await waitForPromises();
-
-      expect(getElInnerHtml()).toMatchInterpolatedText(
-        '<div class="commit-info branches"><a href="/-/commits/main">main</a></div>',
-      );
-    });
-  });
-
-  describe('when branches request fails', () => {
-    beforeEach(() => {
-      mock.onGet(mockCommitPath).reply(HTTP_STATUS_INTERNAL_SERVER_ERROR, 'Error!');
-    });
-
-    it('attempts to load and renders an error', async () => {
-      loadBranches();
-      await waitForPromises();
-
-      expect(getElInnerHtml()).toMatchInterpolatedText(
-        '<div class="commit-info branches">Failed to load branches. Please try again.</div>',
-      );
-    });
-  });
-});
diff --git a/spec/frontend/projects/compare/components/repo_dropdown_spec.js b/spec/frontend/projects/compare/components/repo_dropdown_spec.js
index 0b1085470b8..44aaac21733 100644
--- a/spec/frontend/projects/compare/components/repo_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/repo_dropdown_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlCollapsibleListbox, GlListboxItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import RepoDropdown from '~/projects/compare/components/repo_dropdown.vue';
@@ -13,10 +13,14 @@ describe('RepoDropdown component', () => {
         ...defaultProps,
         ...props,
       },
+      stubs: {
+        GlCollapsibleListbox,
+        GlListboxItem,
+      },
     });
   };
 
-  const findGlDropdown = () => wrapper.findComponent(GlDropdown);
+  const findGlCollapsibleListbox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findHiddenInput = () => wrapper.find('input[type="hidden"]');
 
   describe('Source Revision', () => {
@@ -29,8 +33,10 @@ describe('RepoDropdown component', () => {
     });
 
     it('displays the project name in the disabled dropdown', () => {
-      expect(findGlDropdown().props('text')).toBe(defaultProps.selectedProject.name);
-      expect(findGlDropdown().props('disabled')).toBe(true);
+      expect(findGlCollapsibleListbox().props('toggleText')).toBe(
+        defaultProps.selectedProject.name,
+      );
+      expect(findGlCollapsibleListbox().props('disabled')).toBe(true);
     });
 
     it('does not emit `changeTargetProject` event', async () => {
@@ -57,18 +63,21 @@ describe('RepoDropdown component', () => {
     });
 
     it('displays matching project name of the source revision initially in the dropdown', () => {
-      expect(findGlDropdown().props('text')).toBe(defaultProps.selectedProject.name);
+      expect(findGlCollapsibleListbox().props('toggleText')).toBe(
+        defaultProps.selectedProject.name,
+      );
     });
 
-    it('updates the hidden input value when onClick method is triggered', async () => {
+    it('updates the hidden input value when dropdown item is selected', () => {
       const repoId = '1';
-      wrapper.vm.onClick({ id: repoId });
-      await nextTick();
+      findGlCollapsibleListbox().vm.$emit('select', repoId);
       expect(findHiddenInput().attributes('value')).toBe(repoId);
     });
 
     it('emits `selectProject` event when another target project is selected', async () => {
-      findGlDropdown().findAllComponents(GlDropdownItem).at(0).vm.$emit('click');
+      const repoId = '1';
+      findGlCollapsibleListbox().vm.$emit('select', repoId);
+
       await nextTick();
 
       expect(wrapper.emitted('selectProject')[0][0]).toEqual({
diff --git a/spec/frontend/projects/project_new_spec.js b/spec/frontend/projects/project_new_spec.js
index 8a1e9904a3f..54d0cfaa8c6 100644
--- a/spec/frontend/projects/project_new_spec.js
+++ b/spec/frontend/projects/project_new_spec.js
@@ -13,6 +13,8 @@ describe('New Project', () => {
 
   const mockKeyup = (el) => el.dispatchEvent(new KeyboardEvent('keyup'));
   const mockChange = (el) => el.dispatchEvent(new Event('change'));
+  const mockSubmit = () =>
+    document.getElementById('new_project').dispatchEvent(new Event('submit'));
 
   beforeEach(() => {
     setHTMLFixture(`
@@ -311,4 +313,35 @@ describe('New Project', () => {
       expect($projectName.value).toEqual(dummyProjectName);
     });
   });
+
+  describe('project path trimming', () => {
+    beforeEach(() => {
+      projectNew.bindEvents();
+    });
+
+    describe('when the project path field is filled in', () => {
+      const dirtyProjectPath = ' my-awesome-project   ';
+      const cleanProjectPath = dirtyProjectPath.trim();
+
+      beforeEach(() => {
+        $projectPath.value = dirtyProjectPath;
+        mockSubmit();
+      });
+
+      it('trims the project path on submit', () => {
+        expect($projectPath.value).not.toBe(dirtyProjectPath);
+        expect($projectPath.value).toBe(cleanProjectPath);
+      });
+    });
+
+    describe('when the project path field is left empty', () => {
+      beforeEach(() => {
+        mockSubmit();
+      });
+
+      it('leaves the field empty', () => {
+        expect($projectPath.value).toBe('');
+      });
+    });
+  });
 });
diff --git a/spec/frontend/projects/settings/components/new_access_dropdown_spec.js b/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
index f3e536de703..ce696ee321b 100644
--- a/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
+++ b/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
@@ -99,6 +99,9 @@ describe('Access Level Dropdown', () => {
   const findDropdownItemWithText = (items, text) =>
     items.filter((item) => item.text().includes(text)).at(0);
 
+  const findSelected = (type) =>
+    wrapper.findAllByTestId(`${type}-dropdown-item`).filter((w) => w.props('isChecked'));
+
   describe('data request', () => {
     it('should make an api call for users, groups && deployKeys when user has a license', () => {
       createComponent();
@@ -305,9 +308,6 @@ describe('Access Level Dropdown', () => {
       { id: 122, type: 'deploy_key', deploy_key_id: 12 },
     ];
 
-    const findSelected = (type) =>
-      wrapper.findAllByTestId(`${type}-dropdown-item`).filter((w) => w.props('isChecked'));
-
     beforeEach(async () => {
       createComponent({ preselectedItems });
       await waitForPromises();
@@ -339,6 +339,34 @@ describe('Access Level Dropdown', () => {
     });
   });
 
+  describe('handling two-way data binding', () => {
+    it('emits a formatted update on selection', async () => {
+      createComponent();
+      await waitForPromises();
+      const dropdownItems = findAllDropdownItems();
+      // select new item from each group
+      findDropdownItemWithText(dropdownItems, 'role1').trigger('click');
+      findDropdownItemWithText(dropdownItems, 'group4').trigger('click');
+      findDropdownItemWithText(dropdownItems, 'user7').trigger('click');
+      findDropdownItemWithText(dropdownItems, 'key10').trigger('click');
+
+      await wrapper.setProps({ items: [{ user_id: 7 }] });
+
+      const selectedUsers = findSelected(LEVEL_TYPES.USER);
+      expect(selectedUsers).toHaveLength(1);
+      expect(selectedUsers.at(0).text()).toBe('user7');
+
+      const selectedRoles = findSelected(LEVEL_TYPES.ROLE);
+      expect(selectedRoles).toHaveLength(0);
+
+      const selectedGroups = findSelected(LEVEL_TYPES.GROUP);
+      expect(selectedGroups).toHaveLength(0);
+
+      const selectedDeployKeys = findSelected(LEVEL_TYPES.DEPLOY_KEY);
+      expect(selectedDeployKeys).toHaveLength(0);
+    });
+  });
+
   describe('on dropdown open', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
index 86e4e88e3cf..7f6ecbac748 100644
--- a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
@@ -18,6 +18,7 @@ describe('ServiceDeskRoot', () => {
     endpoint: '/gitlab-org/gitlab-test/service_desk',
     initialIncomingEmail: 'servicedeskaddress@example.com',
     initialIsEnabled: true,
+    isIssueTrackerEnabled: true,
     outgoingName: 'GitLab Support Bot',
     projectKey: 'key',
     selectedTemplate: 'Bug',
@@ -59,6 +60,7 @@ describe('ServiceDeskRoot', () => {
         initialSelectedTemplate: provideData.selectedTemplate,
         initialSelectedFileTemplateProjectId: provideData.selectedFileTemplateProjectId,
         isEnabled: provideData.initialIsEnabled,
+        isIssueTrackerEnabled: provideData.isIssueTrackerEnabled,
         isTemplateSaving: false,
         templates: provideData.templates,
       });
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 84eafc3d0f3..5631927cc2f 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
@@ -1,7 +1,8 @@
-import { GlButton, GlDropdown, GlLoadingIcon, GlToggle } from '@gitlab/ui';
+import { GlButton, GlDropdown, GlLoadingIcon, GlToggle, GlAlert } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import ServiceDeskSetting from '~/projects/settings_service_desk/components/service_desk_setting.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
@@ -16,17 +17,44 @@ describe('ServiceDeskSetting', () => {
   const findTemplateDropdown = () => wrapper.findComponent(GlDropdown);
   const findToggle = () => wrapper.findComponent(GlToggle);
   const findSuffixFormGroup = () => wrapper.findByTestId('suffix-form-group');
+  const findIssueTrackerInfo = () => wrapper.findComponent(GlAlert);
+  const findIssueHelpLink = () => wrapper.findByTestId('issue-help-page');
 
   const createComponent = ({ props = {} } = {}) =>
     extendedWrapper(
       mount(ServiceDeskSetting, {
         propsData: {
           isEnabled: true,
+          isIssueTrackerEnabled: true,
           ...props,
         },
       }),
     );
 
+  describe('with issue tracker', () => {
+    it('does not show the info notice when enabled', () => {
+      wrapper = createComponent();
+
+      expect(findIssueTrackerInfo().exists()).toBe(false);
+    });
+
+    it('shows info notice when disabled with help page link', () => {
+      wrapper = createComponent({
+        props: {
+          isIssueTrackerEnabled: false,
+        },
+      });
+
+      expect(findIssueTrackerInfo().exists()).toBe(true);
+      expect(findIssueHelpLink().text()).toEqual('activate the issue tracker');
+      expect(findIssueHelpLink().attributes('href')).toBe(
+        helpPagePath('user/project/settings/index.md', {
+          anchor: 'configure-project-visibility-features-and-permissions',
+        }),
+      );
+    });
+  });
+
   describe('when isEnabled=true', () => {
     describe('only isEnabled', () => {
       describe('as project admin', () => {
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js
index 7090db5cad7..1a76e7d1ec6 100644
--- a/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js
@@ -14,6 +14,7 @@ describe('ServiceDeskTemplateDropdown', () => {
       mount(ServiceDeskTemplateDropdown, {
         propsData: {
           isEnabled: true,
+          isIssueTrackerEnabled: true,
           ...props,
         },
       }),