Add username with avatar to events

elastic · Jul 27, 2020 · 4078277 · 4078277
1 parent fa8c1e3
commit 4078277
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 12 deletions.
diff --git a/x-pack/plugins/security_solution/public/cases/components/user_action_tree/helpers.tsx b/x-pack/plugins/security_solution/public/cases/components/user_action_tree/helpers.tsx
@@ -49,19 +49,21 @@ const getTagsLabelTitle = (action: CaseUserActions) => {
 
   return (
     <EuiFlexGroup alignItems="baseline" gutterSize="xs" component="span">
-      <EuiFlexItem data-test-subj="ua-tags-label">
+      <EuiFlexItem data-test-subj="ua-tags-label" grow={false}>
         {action.action === 'add' && i18n.ADDED_FIELD}
         {action.action === 'delete' && i18n.REMOVED_FIELD} {i18n.TAGS.toLowerCase()}
       </EuiFlexItem>
-      {tags.length > 0 && (
-        <EuiBadgeGroup>
-          {tags.map((tag, index) => (
-            <EuiBadge data-test-subj={`ua-tag`} color="default" key={index}>
-              {tag}
-            </EuiBadge>
-          ))}
-        </EuiBadgeGroup>
-      )}
+      <EuiFlexItem grow={false}>
+        {tags.length > 0 && (
+          <EuiBadgeGroup gutterSize="xs">
+            {tags.map((tag, index) => (
+              <EuiBadge data-test-subj={`ua-tag`} color="default" key={index}>
+                {tag}
+              </EuiBadge>
+            ))}
+          </EuiBadgeGroup>
+        )}
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };

diff --git a/x-pack/plugins/security_solution/public/cases/components/user_action_tree/index.tsx b/x-pack/plugins/security_solution/public/cases/components/user_action_tree/index.tsx
@@ -30,6 +30,7 @@ import { UserActionCopyLink } from './user_action_copy_link';
 import { UserActionPropertyActions } from './user_action_property_actions';
 import { UserActionMoveToReference } from './user_action_move_to_reference';
 import { UserActionUsername } from './user_action_username';
+import { UserActionUsernameWithAvatar } from './user_action_username_with_avatar';
 import { Connector } from '../../../../../case/common/api/cases';
 import { CaseServices } from '../../containers/use_get_case_user_actions';
 import { parseString } from '../../containers/utils';
@@ -358,7 +359,7 @@ export const UserActionTree = React.memo(
             ...comments,
             {
               username: (
-                <UserActionUsername
+                <UserActionUsernameWithAvatar
                   username={action.actionBy.username ?? ''}
                   fullName={action.actionBy.fullName ?? action.actionBy.username ?? ''}
                 />

diff --git a/...ugins/security_solution/public/cases/components/user_action_tree/user_action_username.tsx b/...ugins/security_solution/public/cases/components/user_action_tree/user_action_username.tsx
@@ -6,6 +6,7 @@
 
 import React, { memo } from 'react';
 import { EuiToolTip } from '@elastic/eui';
+import { isEmpty } from 'lodash/fp';
 
 interface UserActionUsernameProps {
   username: string;
@@ -14,7 +15,7 @@ interface UserActionUsernameProps {
 
 const UserActionUsernameComponent = ({ username, fullName }: UserActionUsernameProps) => {
   return (
-    <EuiToolTip position="top" content={<p>{fullName ?? username}</p>}>
+    <EuiToolTip position="top" content={<p>{isEmpty(fullName) ? username : fullName}</p>}>
       <strong>{username}</strong>
     </EuiToolTip>
   );

diff --git a/...ty_solution/public/cases/components/user_action_tree/user_action_username_with_avatar.tsx b/...ty_solution/public/cases/components/user_action_tree/user_action_username_with_avatar.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { memo } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiAvatar } from '@elastic/eui';
+import { isEmpty } from 'lodash/fp';
+
+import { UserActionUsername } from './user_action_username';
+
+interface UserActionUsernameWithAvatarProps {
+  username: string;
+  fullName?: string;
+}
+
+const UserActionUsernameWithAvatarComponent = ({
+  username,
+  fullName,
+}: UserActionUsernameWithAvatarProps) => {
+  return (
+    <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <EuiAvatar size="s" name={isEmpty(fullName) ? username : fullName} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <UserActionUsername username={username} fullName={fullName} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export const UserActionUsernameWithAvatar = memo(UserActionUsernameWithAvatarComponent);