Add latest changes from gitlab-org/gitlab@master

3 files changed, 47 insertions, 7 deletions

diff --git a/app/assets/javascripts/incidents/components/incidents_list.vue b/app/assets/javascripts/incidents/components/incidents_list.vue
index 68466a5cc91..f10c2901adb 100644
--- a/app/assets/javascripts/incidents/components/incidents_list.vue
+++ b/app/assets/javascripts/incidents/components/incidents_list.vue
@@ -1,5 +1,13 @@
 <script>
-import { GlLoadingIcon, GlTable, GlAlert } from '@gitlab/ui';
+import {
+  GlLoadingIcon,
+  GlTable,
+  GlAlert,
+  GlAvatarsInline,
+  GlAvatarLink,
+  GlAvatar,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { s__ } from '~/locale';
 import getIncidents from '../graphql/queries/get_incidents.query.graphql';
@@ -37,8 +45,14 @@ export default {
     GlLoadingIcon,
     GlTable,
     GlAlert,
+    GlAvatarsInline,
+    GlAvatarLink,
+    GlAvatar,
     TimeAgoTooltip,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: ['projectPath'],
   apollo: {
     incidents: {
@@ -78,10 +92,8 @@ export default {
     },
   },
   methods: {
-    getAssignees(assignees) {
-      return assignees.nodes?.length > 0
-        ? assignees.nodes[0]?.username
-        : s__('IncidentManagement|Unassigned');
+    hasAssignees(assignees) {
+      return Boolean(assignees.nodes?.length);
     },
   },
 };
@@ -114,8 +126,32 @@ export default {
       </template>
 
       <template #cell(assignees)="{ item }">
-        <div class="gl-max-w-full text-truncate" data-testid="assigneesField">
-          {{ getAssignees(item.assignees) }}
+        <div data-testid="incident-assignees">
+          <template v-if="hasAssignees(item.assignees)">
+            <gl-avatars-inline
+              :avatars="item.assignees.nodes"
+              :collapsed="true"
+              :max-visible="4"
+              :avatar-size="24"
+              badge-tooltip-prop="name"
+              :badge-tooltip-max-chars="100"
+            >
+              <template #avatar="{ avatar }">
+                <gl-avatar-link
+                  :key="avatar.username"
+                  v-gl-tooltip
+                  target="_blank"
+                  :href="avatar.webUrl"
+                  :title="avatar.name"
+                >
+                  <gl-avatar :src="avatar.avatarUrl" :label="avatar.name" :size="24" />
+                </gl-avatar-link>
+              </template>
+            </gl-avatars-inline>
+          </template>
+          <template v-else>
+            {{ $options.i18n.unassigned }}
+          </template>
         </div>
       </template>
 
diff --git a/app/assets/javascripts/incidents/constants.js b/app/assets/javascripts/incidents/constants.js
index 572a8d851cb..7eac77f7a7f 100644
--- a/app/assets/javascripts/incidents/constants.js
+++ b/app/assets/javascripts/incidents/constants.js
@@ -4,4 +4,5 @@ import { s__ } from '~/locale';
 export const I18N = {
   errorMsg: s__('IncidentManagement|There was an error displaying the incidents.'),
   noIncidents: s__('IncidentManagement|No incidents to display.'),
+  unassigned: s__('IncidentManagement|Unassigned'),
 };
diff --git a/app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql b/app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql
index 4478aa56ee7..9ec7f039764 100644
--- a/app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql
+++ b/app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql
@@ -13,7 +13,10 @@ query getIncidents($projectPath: ID!, $labelNames: [String], $state: IssuableSta
         }
         assignees {
           nodes {
+            name
             username
+            avatarUrl
+            webUrl
           }
         }
       }