Add latest changes from gitlab-org/gitlab@15-9-stable-eev15.9.0-rc42

7 files changed, 329 insertions, 13 deletions

diff --git a/spec/frontend/super_sidebar/components/counter_spec.js b/spec/frontend/super_sidebar/components/counter_spec.js
index 1150b0a3aa8..8f514540413 100644
--- a/spec/frontend/super_sidebar/components/counter_spec.js
+++ b/spec/frontend/super_sidebar/components/counter_spec.js
@@ -13,10 +13,6 @@ describe('Counter component', () => {
     label: __('Issues'),
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findButton = () => wrapper.find('button');
   const findIcon = () => wrapper.getComponent(GlIcon);
   const findLink = () => wrapper.find('a');
diff --git a/spec/frontend/super_sidebar/components/create_menu_spec.js b/spec/frontend/super_sidebar/components/create_menu_spec.js
new file mode 100644
index 00000000000..b24c6b8de7f
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/create_menu_spec.js
@@ -0,0 +1,39 @@
+import { GlDisclosureDropdown, GlTooltip } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { __ } from '~/locale';
+import CreateMenu from '~/super_sidebar/components/create_menu.vue';
+import { createNewMenuGroups } from '../mock_data';
+
+describe('CreateMenu component', () => {
+  let wrapper;
+
+  const findGlDisclosureDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
+  const findGlTooltip = () => wrapper.findComponent(GlTooltip);
+
+  const createWrapper = () => {
+    wrapper = shallowMountExtended(CreateMenu, {
+      propsData: {
+        groups: createNewMenuGroups,
+      },
+    });
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it("sets the toggle's label", () => {
+      expect(findGlDisclosureDropdown().props('toggleText')).toBe(__('Create new...'));
+    });
+
+    it('passes the groups to the disclosure dropdown', () => {
+      expect(findGlDisclosureDropdown().props('items')).toBe(createNewMenuGroups);
+    });
+
+    it("sets the toggle ID and tooltip's target", () => {
+      expect(findGlDisclosureDropdown().props('toggleId')).toBe(wrapper.vm.$options.toggleId);
+      expect(findGlTooltip().props('target')).toBe(`#${wrapper.vm.$options.toggleId}`);
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/help_center_spec.js b/spec/frontend/super_sidebar/components/help_center_spec.js
new file mode 100644
index 00000000000..bc847a3e159
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/help_center_spec.js
@@ -0,0 +1,152 @@
+import { GlDisclosureDropdownGroup } from '@gitlab/ui';
+import { within } from '@testing-library/dom';
+import toggleWhatsNewDrawer from '~/whats_new';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import HelpCenter from '~/super_sidebar/components/help_center.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { PROMO_URL } from 'jh_else_ce/lib/utils/url_utility';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+import { STORAGE_KEY } from '~/whats_new/utils/notification';
+import { sidebarData } from '../mock_data';
+
+jest.mock('~/whats_new');
+
+describe('HelpCenter component', () => {
+  let wrapper;
+
+  const GlEmoji = { template: '<img/>' };
+
+  const findDropdownGroup = (i = 0) => {
+    return wrapper.findAllComponents(GlDisclosureDropdownGroup).at(i);
+  };
+  const withinComponent = () => within(wrapper.element);
+  const findButton = (name) => withinComponent().getByRole('button', { name });
+
+  // eslint-disable-next-line no-shadow
+  const createWrapper = (sidebarData) => {
+    wrapper = mountExtended(HelpCenter, {
+      propsData: { sidebarData },
+      stubs: { GlEmoji },
+    });
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createWrapper(sidebarData);
+    });
+
+    it('renders menu items', () => {
+      expect(findDropdownGroup(0).props('group').items).toEqual([
+        { text: HelpCenter.i18n.help, href: helpPagePath() },
+        { text: HelpCenter.i18n.support, href: sidebarData.support_path },
+        { text: HelpCenter.i18n.docs, href: 'https://docs.gitlab.com' },
+        { text: HelpCenter.i18n.plans, href: `${PROMO_URL}/pricing` },
+        { text: HelpCenter.i18n.forum, href: 'https://forum.gitlab.com/' },
+        {
+          text: HelpCenter.i18n.contribute,
+          href: helpPagePath('', { anchor: 'contributing-to-gitlab' }),
+        },
+        { text: HelpCenter.i18n.feedback, href: 'https://about.gitlab.com/submit-feedback' },
+      ]);
+
+      expect(findDropdownGroup(1).props('group').items).toEqual([
+        expect.objectContaining({ text: HelpCenter.i18n.shortcuts }),
+        expect.objectContaining({ text: HelpCenter.i18n.whatsnew }),
+      ]);
+    });
+
+    describe('with Gitlab version check feature enabled', () => {
+      beforeEach(() => {
+        createWrapper({ ...sidebarData, show_version_check: true });
+      });
+
+      it('shows version information as first item', () => {
+        expect(findDropdownGroup(0).props('group').items).toEqual([
+          { text: HelpCenter.i18n.version, href: helpPagePath('update/index'), version: '16.0' },
+        ]);
+      });
+    });
+
+    describe('showKeyboardShortcuts', () => {
+      beforeEach(() => {
+        jest.spyOn(wrapper.vm.$refs.dropdown, 'close');
+        window.toggleShortcutsHelp = jest.fn();
+        findButton('Keyboard shortcuts ?').click();
+      });
+
+      it('closes the dropdown', () => {
+        expect(wrapper.vm.$refs.dropdown.close).toHaveBeenCalled();
+      });
+
+      it('shows the keyboard shortcuts modal', () => {
+        expect(window.toggleShortcutsHelp).toHaveBeenCalled();
+      });
+    });
+
+    describe('showWhatsNew', () => {
+      beforeEach(() => {
+        jest.spyOn(wrapper.vm.$refs.dropdown, 'close');
+        findButton("What's new 5").click();
+      });
+
+      it('closes the dropdown', () => {
+        expect(wrapper.vm.$refs.dropdown.close).toHaveBeenCalled();
+      });
+
+      it('shows the "What\'s new" slideout', () => {
+        expect(toggleWhatsNewDrawer).toHaveBeenCalledWith(expect.any(Object));
+      });
+
+      it('shows the existing "What\'s new" slideout instance on subsequent clicks', () => {
+        findButton("What's new").click();
+        expect(toggleWhatsNewDrawer).toHaveBeenCalledTimes(2);
+        expect(toggleWhatsNewDrawer).toHaveBeenLastCalledWith();
+      });
+    });
+
+    describe('shouldShowWhatsNewNotification', () => {
+      describe('when setting is disabled', () => {
+        beforeEach(() => {
+          createWrapper({ ...sidebarData, display_whats_new: false });
+        });
+
+        it('is false', () => {
+          expect(wrapper.vm.showWhatsNewNotification).toBe(false);
+        });
+      });
+
+      describe('when setting is enabled', () => {
+        useLocalStorageSpy();
+
+        beforeEach(() => {
+          createWrapper({ ...sidebarData, display_whats_new: true });
+        });
+
+        it('is true', () => {
+          expect(wrapper.vm.showWhatsNewNotification).toBe(true);
+        });
+
+        describe('when "What\'s new" drawer got opened', () => {
+          beforeEach(() => {
+            findButton("What's new 5").click();
+          });
+
+          it('is false', () => {
+            expect(wrapper.vm.showWhatsNewNotification).toBe(false);
+          });
+        });
+
+        describe('with matching version digest in local storage', () => {
+          beforeEach(() => {
+            window.localStorage.setItem(STORAGE_KEY, 1);
+            createWrapper({ ...sidebarData, display_whats_new: true });
+          });
+
+          it('is false', () => {
+            expect(wrapper.vm.showWhatsNewNotification).toBe(false);
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/merge_request_menu_spec.js b/spec/frontend/super_sidebar/components/merge_request_menu_spec.js
new file mode 100644
index 00000000000..fe87c4be9c3
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/merge_request_menu_spec.js
@@ -0,0 +1,46 @@
+import { GlBadge, GlDisclosureDropdown } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import MergeRequestMenu from '~/super_sidebar/components/merge_request_menu.vue';
+import { mergeRequestMenuGroup } from '../mock_data';
+
+describe('MergeRequestMenu component', () => {
+  let wrapper;
+
+  const findGlBadge = (at) => wrapper.findAllComponents(GlBadge).at(at);
+  const findGlDisclosureDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
+  const findLink = () => wrapper.findByRole('link');
+
+  const createWrapper = () => {
+    wrapper = mountExtended(MergeRequestMenu, {
+      propsData: {
+        items: mergeRequestMenuGroup,
+      },
+    });
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('passes the items to the disclosure dropdown', () => {
+      expect(findGlDisclosureDropdown().props('items')).toBe(mergeRequestMenuGroup);
+    });
+
+    it('renders item text and count in link', () => {
+      const { text, href, count } = mergeRequestMenuGroup[0].items[0];
+      expect(findLink().text()).toContain(text);
+      expect(findLink().text()).toContain(String(count));
+      expect(findLink().attributes('href')).toBe(href);
+    });
+
+    it('renders item count string in badge', () => {
+      const { count } = mergeRequestMenuGroup[0].items[0];
+      expect(findGlBadge(0).text()).toBe(String(count));
+    });
+
+    it('renders 0 string when count is empty', () => {
+      expect(findGlBadge(1).text()).toBe(String(0));
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/super_sidebar_spec.js b/spec/frontend/super_sidebar/components/super_sidebar_spec.js
index d7d2f67dc8a..45fc30c08f0 100644
--- a/spec/frontend/super_sidebar/components/super_sidebar_spec.js
+++ b/spec/frontend/super_sidebar/components/super_sidebar_spec.js
@@ -1,5 +1,6 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import SuperSidebar from '~/super_sidebar/components/super_sidebar.vue';
+import HelpCenter from '~/super_sidebar/components/help_center.vue';
 import UserBar from '~/super_sidebar/components/user_bar.vue';
 import { sidebarData } from '../mock_data';
 
@@ -7,10 +8,7 @@ describe('SuperSidebar component', () => {
   let wrapper;
 
   const findUserBar = () => wrapper.findComponent(UserBar);
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
+  const findHelpCenter = () => wrapper.findComponent(HelpCenter);
 
   const createWrapper = (props = {}) => {
     wrapper = shallowMountExtended(SuperSidebar, {
@@ -29,5 +27,9 @@ describe('SuperSidebar component', () => {
     it('renders UserBar with sidebarData', () => {
       expect(findUserBar().props('sidebarData')).toBe(sidebarData);
     });
+
+    it('renders HelpCenter with sidebarData', () => {
+      expect(findHelpCenter().props('sidebarData')).toBe(sidebarData);
+    });
   });
 });
diff --git a/spec/frontend/super_sidebar/components/user_bar_spec.js b/spec/frontend/super_sidebar/components/user_bar_spec.js
index 6d0186a2749..eceb792c3db 100644
--- a/spec/frontend/super_sidebar/components/user_bar_spec.js
+++ b/spec/frontend/super_sidebar/components/user_bar_spec.js
@@ -1,5 +1,7 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { __ } from '~/locale';
+import CreateMenu from '~/super_sidebar/components/create_menu.vue';
+import MergeRequestMenu from '~/super_sidebar/components/merge_request_menu.vue';
 import Counter from '~/super_sidebar/components/counter.vue';
 import UserBar from '~/super_sidebar/components/user_bar.vue';
 import { sidebarData } from '../mock_data';
@@ -7,11 +9,9 @@ import { sidebarData } from '../mock_data';
 describe('UserBar component', () => {
   let wrapper;
 
+  const findCreateMenu = () => wrapper.findComponent(CreateMenu);
   const findCounter = (at) => wrapper.findAllComponents(Counter).at(at);
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
+  const findMergeRequestMenu = () => wrapper.findComponent(MergeRequestMenu);
 
   const createWrapper = (props = {}) => {
     wrapper = shallowMountExtended(UserBar, {
@@ -31,12 +31,25 @@ describe('UserBar component', () => {
       createWrapper();
     });
 
+    it('passes the "Create new..." menu groups to the create-menu component', () => {
+      expect(findCreateMenu().props('groups')).toBe(sidebarData.create_new_menu_groups);
+    });
+
+    it('passes the "Merge request" menu groups to the merge_request_menu component', () => {
+      expect(findMergeRequestMenu().props('items')).toBe(sidebarData.merge_request_menu);
+    });
+
     it('renders issues counter', () => {
       expect(findCounter(0).props('count')).toBe(sidebarData.assigned_open_issues_count);
       expect(findCounter(0).props('href')).toBe(sidebarData.issues_dashboard_path);
       expect(findCounter(0).props('label')).toBe(__('Issues'));
     });
 
+    it('renders merge requests counter', () => {
+      expect(findCounter(1).props('count')).toBe(sidebarData.total_merge_requests_count);
+      expect(findCounter(1).props('label')).toBe(__('Merge requests'));
+    });
+
     it('renders todos counter', () => {
       expect(findCounter(2).props('count')).toBe(sidebarData.todos_pending_count);
       expect(findCounter(2).props('href')).toBe('/dashboard/todos');
diff --git a/spec/frontend/super_sidebar/mock_data.js b/spec/frontend/super_sidebar/mock_data.js
index 7db0d0ea5cc..91a2dc93a47 100644
--- a/spec/frontend/super_sidebar/mock_data.js
+++ b/spec/frontend/super_sidebar/mock_data.js
@@ -1,9 +1,77 @@
+export const createNewMenuGroups = [
+  {
+    name: 'This group',
+    items: [
+      {
+        text: 'New project/repository',
+        href: '/projects/new?namespace_id=22',
+      },
+      {
+        text: 'New subgroup',
+        href: '/groups/new?parent_id=22#create-group-pane',
+      },
+      {
+        text: 'New epic',
+        href: '/groups/gitlab-org/-/epics/new',
+      },
+      {
+        text: 'Invite members',
+        href: '/groups/gitlab-org/-/group_members',
+      },
+    ],
+  },
+  {
+    name: 'GitLab',
+    items: [
+      {
+        text: 'New project/repository',
+        href: '/projects/new',
+      },
+      {
+        text: 'New group',
+        href: '/groups/new',
+      },
+      {
+        text: 'New snippet',
+        href: '/-/snippets/new',
+      },
+    ],
+  },
+];
+
+export const mergeRequestMenuGroup = [
+  {
+    name: 'Merge requests',
+    items: [
+      {
+        text: 'Assigned',
+        href: '/dashboard/merge_requests?assignee_username=root',
+        count: 4,
+      },
+      {
+        text: 'Review requests',
+        href: '/dashboard/merge_requests?reviewer_username=root',
+        count: 0,
+      },
+    ],
+  },
+];
+
 export const sidebarData = {
   name: 'Administrator',
   username: 'root',
   avatar_url: 'path/to/img_administrator',
   assigned_open_issues_count: 1,
-  assigned_open_merge_requests_count: 2,
   todos_pending_count: 3,
   issues_dashboard_path: 'path/to/issues',
+  total_merge_requests_count: 4,
+  create_new_menu_groups: createNewMenuGroups,
+  merge_request_menu: mergeRequestMenuGroup,
+  support_path: '/support',
+  display_whats_new: true,
+  whats_new_most_recent_release_items_count: 5,
+  whats_new_version_digest: 1,
+  show_version_check: false,
+  gitlab_version: { major: 16, minor: 0 },
+  gitlab_version_check: { severity: 'success' },
 };