2 files changed, 71 insertions, 3 deletions
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index c3a08f760a0..e85e416881c 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -95,7 +95,7 @@ export default {
       <gl-loading-icon v-if="loading" />
       <span v-else data-testid="collapsed-count"> {{ participantCount }} </span>
     </div>
-    <div v-if="showParticipantLabel" class="title hide-collapsed">
+    <div v-if="showParticipantLabel" class="title hide-collapsed gl-mb-2">
       <gl-loading-icon v-if="loading" :inline="true" />
       {{ participantLabel }}
     </div>
@@ -105,10 +105,10 @@ export default {
         :key="participant.id"
         class="participants-author"
       >
-        <a :href="participant.web_url" class="author-link">
+        <a :href="participant.web_url || participant.webUrl" class="author-link">
           <user-avatar-image
             :lazy="true"
-            :img-src="participant.avatar_url"
+            :img-src="participant.avatar_url || participant.avatarUrl"
             :size="24"
             :tooltip-text="participant.name"
             css-classes="avatar-inline"
diff --git a/app/assets/javascripts/sidebar/components/participants/sidebar_participants_widget.vue b/app/assets/javascripts/sidebar/components/participants/sidebar_participants_widget.vue
new file mode 100644
index 00000000000..d3043e6f6aa
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/participants/sidebar_participants_widget.vue
@@ -0,0 +1,68 @@
+<script>
+import { __ } from '~/locale';
+import { participantsQueries } from '~/sidebar/constants';
+import Participants from './participants.vue';
+
+export default {
+  i18n: {
+    fetchingError: __('An error occurred while fetching participants'),
+  },
+  components: {
+    Participants,
+  },
+  props: {
+    iid: {
+      type: String,
+      required: true,
+    },
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    issuableType: {
+      required: true,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      participants: [],
+    };
+  },
+  apollo: {
+    participants: {
+      query() {
+        return participantsQueries[this.issuableType].query;
+      },
+      variables() {
+        return {
+          fullPath: this.fullPath,
+          iid: this.iid,
+        };
+      },
+      update(data) {
+        return data.workspace?.issuable?.participants.nodes || [];
+      },
+      error(error) {
+        this.$emit('fetch-error', {
+          message: this.$options.i18n.fetchingError,
+          error,
+        });
+      },
+    },
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.participants.loading;
+    },
+  },
+};
+</script>
+
+<template>
+  <participants
+    :loading="isLoading"
+    :participants="participants"
+    :number-of-less-participants="7"
+  />
+</template>