From 639d5b61010afcadfba39a4e5a6f9f8889f7aabe Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 27 May 2024 16:32:08 +0200
Subject: [PATCH 1/6] wip

---
 .../src/components/user_filter_panel.tsx      |  2 +-
 .../src/user_profiles_selectable.tsx          | 41 +++++++++----------
 .../kbn-user-profile-components/tsconfig.json |  3 +-
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/content-management/table_list_view_table/src/components/user_filter_panel.tsx b/packages/content-management/table_list_view_table/src/components/user_filter_panel.tsx
index 62d6690954fe12..2307f449b9c2d2 100644
--- a/packages/content-management/table_list_view_table/src/components/user_filter_panel.tsx
+++ b/packages/content-management/table_list_view_table/src/components/user_filter_panel.tsx
@@ -164,7 +164,7 @@ export const UserFilterPanel: FC<{}> = () => {
           },
           onSearchChange: setSearchTerm,
         }}
-        panelProps={{ css: { minWidth: euiTheme.base * 18 } }}
+        panelProps={{ css: { minWidth: euiTheme.base * 22 } }}
       />
     </>
   );
diff --git a/packages/kbn-user-profile-components/src/user_profiles_selectable.tsx b/packages/kbn-user-profile-components/src/user_profiles_selectable.tsx
index d0e836a77d473a..a7885a1185847c 100644
--- a/packages/kbn-user-profile-components/src/user_profiles_selectable.tsx
+++ b/packages/kbn-user-profile-components/src/user_profiles_selectable.tsx
@@ -326,40 +326,31 @@ export const UserProfilesSelectable = <Option extends UserProfileWithAvatar | nu
         id: searchInputId,
       }}
       isPreFiltered
-      listProps={{ onFocusBadge: false }}
+      listProps={{ onFocusBadge: false, rowHeight: 46 }}
       loadingMessage={loadingMessage}
       noMatchesMessage={noMatchesMessage}
       emptyMessage={emptyMessage}
       errorMessage={errorMessage}
       renderOption={(option, searchValue) => {
         if (option.user) {
+          const displayName = getUserDisplayName(option.user);
           return (
-            <EuiFlexGroup
-              alignItems="center"
-              justifyContent="spaceBetween"
-              gutterSize="s"
-              responsive={false}
-            >
-              <EuiFlexItem css={{ maxWidth: '100%' }}>
-                <EuiHighlight className="eui-textTruncate" search={searchValue}>
-                  {option.label}
-                </EuiHighlight>
-              </EuiFlexItem>
-              {option.user.email && option.user.email !== option.label ? (
-                <EuiFlexItem grow={false} css={{ minWidth: 0 }}>
-                  <EuiTextColor
-                    color={option.disabled ? 'disabled' : 'subdued'}
-                    className="eui-textTruncate"
-                  >
+            <>
+              <div className="eui-textTruncate">
+                <EuiHighlight search={searchValue}>{displayName}</EuiHighlight>
+              </div>
+              {option.user.email && option.user.email !== displayName ? (
+                <div className="eui-textTruncate" css={{ fontSize: '0.8em', lineHeight: 1.2 }}>
+                  <EuiTextColor color={option.disabled ? 'disabled' : 'subdued'}>
                     {searchValue ? (
                       <EuiHighlight search={searchValue}>{option.user.email}</EuiHighlight>
                     ) : (
                       option.user.email
                     )}
                   </EuiTextColor>
-                </EuiFlexItem>
+                </div>
               ) : undefined}
-            </EuiFlexGroup>
+            </>
           );
         }
         return <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>;
@@ -451,7 +442,7 @@ function toSelectableOption(
   if (userProfile) {
     return {
       key: userProfile.uid,
-      label: getUserDisplayName(userProfile.user),
+      label: getUserDisplayLabel(userProfile.user),
       data: userProfile,
       'data-test-subj': `userProfileSelectableOption-${userProfile.user.username}`,
     };
@@ -474,3 +465,11 @@ function isMatchingOption<Option extends UserProfileWithAvatar | null>(
 ) {
   return option.key === (profile ? profile.uid : NULL_OPTION_KEY);
 }
+
+function getUserDisplayLabel(user: UserProfileWithAvatar['user']): string {
+  const displayName = getUserDisplayName(user);
+  if (user.email && user.email !== displayName) {
+    return `${displayName} (${user.email})`;
+  }
+  return displayName;
+}
diff --git a/packages/kbn-user-profile-components/tsconfig.json b/packages/kbn-user-profile-components/tsconfig.json
index a10ea2923ff4fb..575e37903d1ad6 100644
--- a/packages/kbn-user-profile-components/tsconfig.json
+++ b/packages/kbn-user-profile-components/tsconfig.json
@@ -4,7 +4,8 @@
     "outDir": "target/types",
     "types": [
       "jest",
-      "node"
+      "node",
+      "@emotion/react/types/css-prop",
     ]
   },
   "include": [

From 80341d8b3bfed52dc795e4460fcf00fecc2aff4b Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 28 May 2024 14:27:58 +0200
Subject: [PATCH 2/6] more fixes

---
 .../src/user_avatar.test.tsx                  |  6 ++--
 .../src/user_avatar.tsx                       |  8 ++---
 .../src/user_profile.ts                       | 13 ++++++++
 .../src/user_profiles_selectable.tsx          | 33 ++++++++-----------
 .../src/user_tooltip.test.tsx                 | 28 +++++++++-------
 .../src/user_tooltip.tsx                      | 16 ++++-----
 6 files changed, 56 insertions(+), 48 deletions(-)

diff --git a/packages/kbn-user-profile-components/src/user_avatar.test.tsx b/packages/kbn-user-profile-components/src/user_avatar.test.tsx
index 9c654d25f70fe5..f46f16cdd4cdda 100644
--- a/packages/kbn-user-profile-components/src/user_avatar.test.tsx
+++ b/packages/kbn-user-profile-components/src/user_avatar.test.tsx
@@ -31,7 +31,7 @@ describe('UserAvatar', () => {
       <EuiAvatar
         color="plain"
         imageUrl="https://source.unsplash.com/64x64/?cat"
-        name="Delighted Nightingale"
+        name="Delighted Nightingale (delighted_nightingale@elastic.co)"
       />
     `);
   });
@@ -56,7 +56,7 @@ describe('UserAvatar', () => {
         color="#09e8ca"
         initials="DN"
         initialsLength={2}
-        name="Delighted Nightingale"
+        name="Delighted Nightingale (delighted_nightingale@elastic.co)"
       />
     `);
   });
@@ -76,7 +76,7 @@ describe('UserAvatar', () => {
         color="#AA6556"
         initials="DN"
         initialsLength={2}
-        name="Delighted Nightingale"
+        name="Delighted Nightingale (delighted_nightingale@elastic.co)"
       />
     `);
   });
diff --git a/packages/kbn-user-profile-components/src/user_avatar.tsx b/packages/kbn-user-profile-components/src/user_avatar.tsx
index 1b2a2152f27fc6..fe9609b8e822f8 100644
--- a/packages/kbn-user-profile-components/src/user_avatar.tsx
+++ b/packages/kbn-user-profile-components/src/user_avatar.tsx
@@ -16,7 +16,7 @@ import type { UserProfile, UserProfileUserInfo } from './user_profile';
 import {
   getUserAvatarColor,
   getUserAvatarInitials,
-  getUserDisplayName,
+  getUserDisplayLabel,
   USER_AVATAR_MAX_INITIALS,
 } from './user_profile';
 
@@ -62,15 +62,15 @@ export const UserAvatar: FunctionComponent<UserAvatarProps> = ({ user, avatar, .
     return <EuiAvatar name="" color={euiTheme.colors.lightestShade} initials="?" {...rest} />;
   }
 
-  const displayName = getUserDisplayName(user);
+  const displayLabel = getUserDisplayLabel(user);
 
   if (avatar?.imageUrl) {
-    return <EuiAvatar name={displayName} imageUrl={avatar.imageUrl} color="plain" {...rest} />;
+    return <EuiAvatar name={displayLabel} imageUrl={avatar.imageUrl} color="plain" {...rest} />;
   }
 
   return (
     <EuiAvatar
-      name={displayName}
+      name={displayLabel}
       initials={getUserAvatarInitials(user, avatar)}
       initialsLength={USER_AVATAR_MAX_INITIALS}
       color={getUserAvatarColor(user, avatar)}
diff --git a/packages/kbn-user-profile-components/src/user_profile.ts b/packages/kbn-user-profile-components/src/user_profile.ts
index 965f5e9706e8e2..80d9e3d755b9c3 100644
--- a/packages/kbn-user-profile-components/src/user_profile.ts
+++ b/packages/kbn-user-profile-components/src/user_profile.ts
@@ -136,3 +136,16 @@ export interface GetUserDisplayNameParams {
 export function getUserDisplayName(params: GetUserDisplayNameParams) {
   return params.full_name || params.email || params.username;
 }
+
+/**
+ * Determines the display label for the provided user information.
+ * Includes the email if it is different from the display name.
+ * @param params Set of available user's name-related fields.
+ */
+export function getUserDisplayLabel(user: GetUserDisplayNameParams): string {
+  const displayName = getUserDisplayName(user);
+  if (user.email && user.email !== displayName) {
+    return `${displayName} (${user.email})`;
+  }
+  return displayName;
+}
diff --git a/packages/kbn-user-profile-components/src/user_profiles_selectable.tsx b/packages/kbn-user-profile-components/src/user_profiles_selectable.tsx
index a7885a1185847c..08ef78fddd25c1 100644
--- a/packages/kbn-user-profile-components/src/user_profiles_selectable.tsx
+++ b/packages/kbn-user-profile-components/src/user_profiles_selectable.tsx
@@ -18,7 +18,6 @@ import {
   EuiText,
   EuiCallOut,
   EuiHighlight,
-  EuiTextColor,
 } from '@elastic/eui';
 import type { ReactNode } from 'react';
 import React, { useEffect, useState } from 'react';
@@ -26,7 +25,7 @@ import React, { useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { getUserDisplayName } from './user_profile';
+import { getUserDisplayLabel, getUserDisplayName } from './user_profile';
 import type { UserProfileWithAvatar } from './user_avatar';
 import { UserAvatar } from './user_avatar';
 
@@ -326,7 +325,7 @@ export const UserProfilesSelectable = <Option extends UserProfileWithAvatar | nu
         id: searchInputId,
       }}
       isPreFiltered
-      listProps={{ onFocusBadge: false, rowHeight: 46 }}
+      listProps={{ onFocusBadge: false, rowHeight: 48 }}
       loadingMessage={loadingMessage}
       noMatchesMessage={noMatchesMessage}
       emptyMessage={emptyMessage}
@@ -340,15 +339,17 @@ export const UserProfilesSelectable = <Option extends UserProfileWithAvatar | nu
                 <EuiHighlight search={searchValue}>{displayName}</EuiHighlight>
               </div>
               {option.user.email && option.user.email !== displayName ? (
-                <div className="eui-textTruncate" css={{ fontSize: '0.8em', lineHeight: 1.2 }}>
-                  <EuiTextColor color={option.disabled ? 'disabled' : 'subdued'}>
-                    {searchValue ? (
-                      <EuiHighlight search={searchValue}>{option.user.email}</EuiHighlight>
-                    ) : (
-                      option.user.email
-                    )}
-                  </EuiTextColor>
-                </div>
+                <EuiText
+                  size={'xs'}
+                  color={option.disabled ? 'disabled' : 'subdued'}
+                  className="eui-textTruncate"
+                >
+                  {searchValue ? (
+                    <EuiHighlight search={searchValue}>{option.user.email}</EuiHighlight>
+                  ) : (
+                    option.user.email
+                  )}
+                </EuiText>
               ) : undefined}
             </>
           );
@@ -465,11 +466,3 @@ function isMatchingOption<Option extends UserProfileWithAvatar | null>(
 ) {
   return option.key === (profile ? profile.uid : NULL_OPTION_KEY);
 }
-
-function getUserDisplayLabel(user: UserProfileWithAvatar['user']): string {
-  const displayName = getUserDisplayName(user);
-  if (user.email && user.email !== displayName) {
-    return `${displayName} (${user.email})`;
-  }
-  return displayName;
-}
diff --git a/packages/kbn-user-profile-components/src/user_tooltip.test.tsx b/packages/kbn-user-profile-components/src/user_tooltip.test.tsx
index ed18651b223cf3..7779dc1c52ccdd 100644
--- a/packages/kbn-user-profile-components/src/user_tooltip.test.tsx
+++ b/packages/kbn-user-profile-components/src/user_tooltip.test.tsx
@@ -61,20 +61,24 @@ describe('UserToolTip', () => {
             </EuiFlexItem>
             <EuiFlexItem
               grow={true}
+              style={
+                Object {
+                  "minWidth": 0,
+                }
+              }
             >
-              <EuiFlexGroup
-                direction="column"
-                gutterSize="none"
+              <div
+                className="eui-textTruncate"
+              >
+                <strong>
+                  Delighted Nightingale
+                </strong>
+              </div>
+              <div
+                className="eui-textTruncate"
               >
-                <EuiFlexItem>
-                  <strong>
-                    Delighted Nightingale
-                  </strong>
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  delighted_nightingale@elastic.co
-                </EuiFlexItem>
-              </EuiFlexGroup>
+                delighted_nightingale@elastic.co
+              </div>
             </EuiFlexItem>
           </EuiFlexGroup>
         }
diff --git a/packages/kbn-user-profile-components/src/user_tooltip.tsx b/packages/kbn-user-profile-components/src/user_tooltip.tsx
index 76b7ca1414274d..8c07da8417b07d 100644
--- a/packages/kbn-user-profile-components/src/user_tooltip.tsx
+++ b/packages/kbn-user-profile-components/src/user_tooltip.tsx
@@ -43,15 +43,13 @@ export const UserToolTip: FunctionComponent<UserToolTipProps> = ({ user, avatar,
           <EuiFlexItem grow={false}>
             <UserAvatar user={user} avatar={avatar} size="l" />
           </EuiFlexItem>
-          <EuiFlexItem grow>
-            <EuiFlexGroup direction="column" gutterSize="none">
-              <EuiFlexItem>
-                <strong>{displayName}</strong>
-              </EuiFlexItem>
-              {user.email && user.email !== displayName ? (
-                <EuiFlexItem>{user.email}</EuiFlexItem>
-              ) : undefined}
-            </EuiFlexGroup>
+          <EuiFlexItem grow style={{ minWidth: 0 }}>
+            <div className="eui-textTruncate">
+              <strong>{displayName}</strong>
+            </div>
+            {user.email && user.email !== displayName ? (
+              <div className="eui-textTruncate">{user.email}</div>
+            ) : undefined}
           </EuiFlexItem>
         </EuiFlexGroup>
       }

From 008ed6c095dcfb28d99797e8902cc808602548ac Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 28 May 2024 15:58:50 +0200
Subject: [PATCH 3/6] wrap instead of truncate

---
 packages/kbn-user-profile-components/src/user_tooltip.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/kbn-user-profile-components/src/user_tooltip.tsx b/packages/kbn-user-profile-components/src/user_tooltip.tsx
index 8c07da8417b07d..0d7e5ce314871c 100644
--- a/packages/kbn-user-profile-components/src/user_tooltip.tsx
+++ b/packages/kbn-user-profile-components/src/user_tooltip.tsx
@@ -44,12 +44,10 @@ export const UserToolTip: FunctionComponent<UserToolTipProps> = ({ user, avatar,
             <UserAvatar user={user} avatar={avatar} size="l" />
           </EuiFlexItem>
           <EuiFlexItem grow style={{ minWidth: 0 }}>
-            <div className="eui-textTruncate">
+            <div>
               <strong>{displayName}</strong>
             </div>
-            {user.email && user.email !== displayName ? (
-              <div className="eui-textTruncate">{user.email}</div>
-            ) : undefined}
+            {user.email && user.email !== displayName ? <div>{user.email}</div> : undefined}
           </EuiFlexItem>
         </EuiFlexGroup>
       }

From c4544d4be13fc699700ca3fda5156639f0df8f26 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 28 May 2024 16:02:45 +0200
Subject: [PATCH 4/6] fix test

---
 .../kbn-user-profile-components/src/user_tooltip.test.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/kbn-user-profile-components/src/user_tooltip.test.tsx b/packages/kbn-user-profile-components/src/user_tooltip.test.tsx
index 7779dc1c52ccdd..a02fba8f635da8 100644
--- a/packages/kbn-user-profile-components/src/user_tooltip.test.tsx
+++ b/packages/kbn-user-profile-components/src/user_tooltip.test.tsx
@@ -67,16 +67,12 @@ describe('UserToolTip', () => {
                 }
               }
             >
-              <div
-                className="eui-textTruncate"
-              >
+              <div>
                 <strong>
                   Delighted Nightingale
                 </strong>
               </div>
-              <div
-                className="eui-textTruncate"
-              >
+              <div>
                 delighted_nightingale@elastic.co
               </div>
             </EuiFlexItem>

From 83c1dd12dfc9709dfd23206506da2d667d43233b Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 4 Jun 2024 17:08:27 +0200
Subject: [PATCH 5/6] reduce cases assignees width 520 -> 400

---
 .../cases/public/components/all_cases/assignees_filter.tsx      | 2 +-
 .../components/case_view/components/suggest_users_popover.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/all_cases/assignees_filter.tsx b/x-pack/plugins/cases/public/components/all_cases/assignees_filter.tsx
index 3a2e03e8276655..6d82d02c448e9e 100644
--- a/x-pack/plugins/cases/public/components/all_cases/assignees_filter.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/assignees_filter.tsx
@@ -112,7 +112,7 @@ const AssigneesFilterPopoverComponent: React.FC<AssigneesFilterPopoverProps> = (
         isOpen={isPopoverOpen}
         closePopover={togglePopover}
         panelStyle={{
-          minWidth: 520,
+          width: 400,
         }}
         button={
           <EuiFilterButton
diff --git a/x-pack/plugins/cases/public/components/case_view/components/suggest_users_popover.tsx b/x-pack/plugins/cases/public/components/case_view/components/suggest_users_popover.tsx
index 2843c7299302e1..f0a13786ff3f71 100644
--- a/x-pack/plugins/cases/public/components/case_view/components/suggest_users_popover.tsx
+++ b/x-pack/plugins/cases/public/components/case_view/components/suggest_users_popover.tsx
@@ -113,7 +113,7 @@ const SuggestUsersPopoverComponent: React.FC<SuggestUsersPopoverProps> = ({
       isOpen={isPopoverOpen}
       closePopover={onClosePopover}
       panelStyle={{
-        minWidth: 520,
+        width: 400,
       }}
       selectableProps={{
         onChange,

From 3bace9beed38d3b06723393958dd9a032d103314 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 5 Jun 2024 12:51:37 +0200
Subject: [PATCH 6/6] review improvements

---
 .../src/user_tooltip.test.tsx                          | 10 +++++-----
 .../kbn-user-profile-components/src/user_tooltip.tsx   | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/kbn-user-profile-components/src/user_tooltip.test.tsx b/packages/kbn-user-profile-components/src/user_tooltip.test.tsx
index a02fba8f635da8..14697293cba3c1 100644
--- a/packages/kbn-user-profile-components/src/user_tooltip.test.tsx
+++ b/packages/kbn-user-profile-components/src/user_tooltip.test.tsx
@@ -68,13 +68,13 @@ describe('UserToolTip', () => {
               }
             >
               <div>
-                <strong>
-                  Delighted Nightingale
-                </strong>
+                Delighted Nightingale
               </div>
-              <div>
+              <EuiText
+                size="xs"
+              >
                 delighted_nightingale@elastic.co
-              </div>
+              </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>
         }
diff --git a/packages/kbn-user-profile-components/src/user_tooltip.tsx b/packages/kbn-user-profile-components/src/user_tooltip.tsx
index 0d7e5ce314871c..3122d90b2f06b2 100644
--- a/packages/kbn-user-profile-components/src/user_tooltip.tsx
+++ b/packages/kbn-user-profile-components/src/user_tooltip.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import type { EuiToolTipProps } from '@elastic/eui';
+import { EuiText, EuiToolTipProps } from '@elastic/eui';
 import { EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import type { FunctionComponent } from 'react';
 import React from 'react';
@@ -44,10 +44,10 @@ export const UserToolTip: FunctionComponent<UserToolTipProps> = ({ user, avatar,
             <UserAvatar user={user} avatar={avatar} size="l" />
           </EuiFlexItem>
           <EuiFlexItem grow style={{ minWidth: 0 }}>
-            <div>
-              <strong>{displayName}</strong>
-            </div>
-            {user.email && user.email !== displayName ? <div>{user.email}</div> : undefined}
+            <div>{displayName}</div>
+            {user.email && user.email !== displayName ? (
+              <EuiText size={'xs'}>{user.email}</EuiText>
+            ) : undefined}
           </EuiFlexItem>
         </EuiFlexGroup>
       }