Merge branch '332305-reuse-participants-widget-in-epic-sidebar' into 'master'

Migrate epic sidebar participants to widget

See merge request gitlab-org/gitlab!68438

app/assets/javascripts/sidebar/components/participants/sidebar_participants_widget.vue

@@ -56,6 +56,11 @@ export default {
       return this.$apollo.queries.participants.loading;
     },
   },
+  methods: {
+    toggleSidebar() {
+      this.$emit('toggleSidebar');
+    },
+  },
 };
 </script>
 
@@ -66,5 +71,6 @@ export default {
     :number-of-less-participants="7"
     :lazy="false"
     class="block participants"
+    @toggleSidebar="toggleSidebar"
   />
 </template>

ee/app/assets/javascripts/epic/components/epic_sidebar.vue

@@ -8,7 +8,7 @@ import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issue_show/constants';
 import notesEventHub from '~/notes/event_hub';
 import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
-import SidebarParticipants from '~/sidebar/components/participants/participants.vue';
+import SidebarParticipantsWidget from '~/sidebar/components/participants/sidebar_participants_widget.vue';
 import SidebarReferenceWidget from '~/sidebar/components/reference/sidebar_reference_widget.vue';
 import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
 import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
@@ -29,7 +29,7 @@ export default {
     SidebarDatePickerCollapsed,
     SidebarLabels,
     SidebarAncestorsWidget,
-    SidebarParticipants,
+    SidebarParticipantsWidget,
     SidebarConfidentialityWidget,
     SidebarSubscriptionsWidget,
     SidebarReferenceWidget,
@@ -46,7 +46,6 @@ export default {
       'canUpdate',
       'allowSubEpics',
       'sidebarCollapsed',
-      'participants',
       'startDateSourcingMilestoneTitle',
       'startDateSourcingMilestoneDates',
       'startDateIsFixed',
@@ -251,12 +250,12 @@ export default {
         :full-path="fullPath"
         :issuable-type="issuableType"
       />
-      <div class="block participants">
-        <sidebar-participants
-          :participants="participants"
-          @toggleSidebar="toggleSidebar({ sidebarCollapsed })"
-        />
-      </div>
+      <sidebar-participants-widget
+        :iid="String(iid)"
+        :full-path="fullPath"
+        :issuable-type="issuableType"
+        @toggleSidebar="handleSidebarToggle"
+      />
       <sidebar-subscriptions-widget
         :iid="String(iid)"
         :full-path="fullPath"

ee/spec/frontend/epic/components/epic_sidebar_spec.js

@@ -12,6 +12,7 @@ import SidebarAncestorsWidget from 'ee_component/sidebar/components/ancestors_tr
 
 import { parsePikadayDate } from '~/lib/utils/datetime_utility';
 
+import SidebarParticipantsWidget from '~/sidebar/components/participants/sidebar_participants_widget.vue';
 import SidebarReferenceWidget from '~/sidebar/components/reference/sidebar_reference_widget.vue';
 import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
 import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
@@ -242,8 +243,8 @@ describe('EpicSidebarComponent', () => {
       });
     });
 
-    it('renders participants list element', () => {
-      expect(wrapper.find('.block.participants').exists()).toBe(true);
+    it('renders participants widget', () => {
+      expect(wrapper.findComponent(SidebarParticipantsWidget).exists()).toBe(true);
     });
 
     it('renders subscription toggle element', () => {

spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js

 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -45,6 +45,14 @@ describe('Sidebar Participants Widget', () => {
     expect(findParticipants().props('loading')).toBe(true);
   });
 
+  it('emits toggleSidebar event when participants child component emits toggleSidebar', async () => {
+    createComponent();
+    findParticipants().vm.$emit('toggleSidebar');
+
+    await nextTick();
+    expect(wrapper.emitted('toggleSidebar')).toEqual([[]]);
+  });
+
   describe('when participants are loaded', () => {
     beforeEach(() => {
       createComponent({