Add tooltip for usernames on API Key management page (#122488)

elastic · Jan 10, 2022 · b158055 · b158055
1 parent 2f02858
commit b158055
Showing 1 changed file with 16 additions and 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
@@ -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>
                   ),
                 };
               }),