From b15805593ba5c4056d6e7bf0ca45c5c75018b9de Mon Sep 17 00:00:00 2001
From: Joe Portner <5295965+jportner@users.noreply.github.com>
Date: Mon, 10 Jan 2022 11:19:13 -0500
Subject: [PATCH] Add tooltip for usernames on API Key management page
 (#122488)

---
 .../api_keys_grid/api_keys_grid_page.tsx      | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx
index c3d4fdc41390d..dabcce11d319f 100644
--- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx
+++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx
@@ -22,6 +22,7 @@ import {
   EuiText,
   EuiToolTip,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { History } from 'history';
 import moment from 'moment-timezone';
 import React, { Component } from 'react';
@@ -388,14 +389,21 @@ export class APIKeysGridPage extends Component<Props, State> {
                 return {
                   value: username,
                   view: (
-                    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
-                      <EuiFlexItem grow={false}>
-                        <EuiIcon type="user" />
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={false}>
-                        <EuiText>{username}</EuiText>
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
+                    <EuiToolTip delay="long" position="left" content={username}>
+                      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+                        <EuiFlexItem grow={false}>
+                          <EuiIcon type="user" />
+                        </EuiFlexItem>
+                        <EuiFlexItem
+                          css={css`
+                            overflow: hidden;
+                          `}
+                          grow={false}
+                        >
+                          <EuiText className="eui-textTruncate">{username}</EuiText>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </EuiToolTip>
                   ),
                 };
               }),