Merge branch 'ss/add-multiselect-wrapper' into 'master'

Add assignee multiselect for sidebar work

See merge request gitlab-org/gitlab!44087

app/assets/javascripts/vue_shared/components/sidebar/assignees_dropdown.vue

+<script>
+import { GlDropdown, GlDropdownForm } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlDropdownForm,
+    GlDropdown,
+  },
+  props: {
+    headerText: {
+      type: String,
+      required: true,
+    },
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown class="show" :text="text" :header-text="headerText">
+    <gl-dropdown-form>
+      <slot name="items"></slot>
+    </gl-dropdown-form>
+  </gl-dropdown>
+</template>

changelogs/unreleased/ss-add-multiselect-wrapper.yml

+---
+title: Add assignees multiselect wrapper
+merge_request: 44087
+author:
+type: added

spec/frontend/vue_shared/components/assignees_dropdown_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { getByText } from '@testing-library/dom';
+import AssigneesDropdown from '~/vue_shared/components/sidebar/assignees_dropdown.vue';
+
+describe('AssigneesDropdown Component', () => {
+  it('renders items slot', () => {
+    const wrapper = shallowMount(AssigneesDropdown, {
+      propsData: {
+        text: '',
+        headerText: '',
+      },
+      slots: {
+        items: '<p>Test</p>',
+      },
+    });
+    expect(getByText(wrapper.element, 'Test')).toBeDefined();
+  });
+});