Migrate epic sidebar participants to widget

Changelog: changed
EE: true

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

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