Skip to content

Commit ca97062

Browse files
weronikaolejniczakalexwizptcalopes
authored
feat(security-entity-analytics): replace title props and wrap EuiButtonIcon with EuiToolTip (elastic#271508)
Relates to elastic/eui#9566 > [!IMPORTANT] > These changes **should be carefully tested visually by each code owner.** Wrapping with `EuiToolTip` instead of passing `title` leads to another DOM node and can potentially break the layout. In such cases, I would appreciate committing appropriate fixes to this PR directly, I cannot possibly setup and run all Kibana functionalities to fix every regression. This PR: - wraps ALL `EuiButtonIcon` with `EuiToolTip`, the content is the same as `aria-label`, any `title` passed to `EuiButtonIcon` is removed, - changes several `title` cases (not truncation related) to use `EuiToolTip` instead (if applicable). --------- Co-authored-by: Alexey Antonov <alexwizp@gmail.com> Co-authored-by: tcalopes <tatiana.lopes@elastic.co>
1 parent 5d701c6 commit ca97062

17 files changed

Lines changed: 320 additions & 176 deletions

File tree

‎x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_selector.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const AssetCriticalitySelectorComponent: React.FC<{
8686
<EuiFlexGroup
8787
direction="row"
8888
alignItems="center"
89-
justifyContent="spaceBetween"
89+
justifyContent={compressed ? 'flexStart' : 'spaceBetween'}
9090
data-test-subj="asset-criticality-selector"
9191
wrap={false}
9292
gutterSize={'xs'}
@@ -102,19 +102,29 @@ const AssetCriticalitySelectorComponent: React.FC<{
102102
/>
103103
</EuiFlexItem>
104104
{compressed && criticality.privileges.data?.has_write_permissions && (
105-
<EuiFlexItem>
106-
<EuiButtonIcon
107-
data-test-subj="asset-criticality-change-btn"
108-
iconSize="s"
109-
iconType={'pencil'}
110-
aria-label={i18n.translate(
105+
<EuiFlexItem grow={false}>
106+
<EuiToolTip
107+
content={i18n.translate(
111108
'xpack.securitySolution.entityAnalytics.assetCriticality.compressedButtonArialLabel',
112109
{
113110
defaultMessage: 'Change asset criticality',
114111
}
115112
)}
116-
onClick={() => toggleModal(true)}
117-
/>
113+
disableScreenReaderOutput
114+
>
115+
<EuiButtonIcon
116+
data-test-subj="asset-criticality-change-btn"
117+
iconSize="s"
118+
iconType={'pencil'}
119+
aria-label={i18n.translate(
120+
'xpack.securitySolution.entityAnalytics.assetCriticality.compressedButtonArialLabel',
121+
{
122+
defaultMessage: 'Change asset criticality',
123+
}
124+
)}
125+
onClick={() => toggleModal(true)}
126+
/>
127+
</EuiToolTip>
118128
</EuiFlexItem>
119129
)}
120130

‎x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/entity_analytics_risk_score/columns.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import type { SyntheticEvent } from 'react';
99
import React from 'react';
1010
import type { EuiBasicTableColumn } from '@elastic/eui';
11-
import { EuiLink } from '@elastic/eui';
11+
import { EuiLink, EuiToolTip } from '@elastic/eui';
1212
import styled from '@emotion/styled';
1313
import { get } from 'lodash/fp';
1414

@@ -130,9 +130,9 @@ export const getRiskScoreColumns = <E extends EntityType>(
130130
render: (riskScore: number) => {
131131
if (riskScore != null) {
132132
return (
133-
<span data-test-subj="risk-score-truncate" title={`${riskScore}`}>
134-
{formatRiskScore(riskScore)}
135-
</span>
133+
<EuiToolTip content={`${riskScore}`}>
134+
<span data-test-subj="risk-score-truncate">{formatRiskScore(riskScore)}</span>
135+
</EuiToolTip>
136136
);
137137
}
138138
return getEmptyTagValue();

‎x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/host_risk_score_table/columns.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
import React, { type SyntheticEvent } from 'react';
9-
import { EuiLink, EuiText } from '@elastic/eui';
9+
import { EuiLink, EuiText, EuiToolTip } from '@elastic/eui';
1010
import { SECURITY_CELL_ACTIONS_DEFAULT } from '@kbn/ui-actions-plugin/common/trigger_ids';
1111
import { SecurityCellActions, CellActionsMode } from '../../../common/components/cell_actions';
1212
import { getEmptyTagValue } from '../../../common/components/empty_value';
@@ -88,9 +88,9 @@ export const getHostRiskScoreColumns = ({
8888
render: (riskScore) => {
8989
if (riskScore != null) {
9090
return (
91-
<span data-test-subj="risk-score-truncate" title={`${riskScore}`}>
92-
{formatRiskScore(riskScore)}
93-
</span>
91+
<EuiToolTip content={`${riskScore}`}>
92+
<span data-test-subj="risk-score-truncate">{formatRiskScore(riskScore)}</span>
93+
</EuiToolTip>
9494
);
9595
}
9696
return getEmptyTagValue();

‎x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/privileged_access_detection/info_popover.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@ import {
1313
EuiPopoverTitle,
1414
EuiText,
1515
EuiTitle,
16+
EuiToolTip,
1617
} from '@elastic/eui';
1718
import { useBoolean } from '@kbn/react-hooks';
1819
import React, { useCallback } from 'react';
1920

2021
import { FormattedMessage } from '@kbn/i18n-react';
22+
import { i18n } from '@kbn/i18n';
2123
import { css } from '@emotion/css';
2224
import { useIntegrationLinkState } from '../../../../../common/hooks/integrations/use_integration_link_state';
2325
import { ENTITY_ANALYTICS_PRIVILEGED_USER_MONITORING_PATH } from '../../../../../../common/constants';
@@ -45,7 +47,24 @@ export const PrivilegedAccessInfoPopover = () => {
4547
});
4648
}, [navigateTo, padPackage, state]);
4749

48-
const button = <EuiButtonIcon iconType="info" onClick={togglePopover} aria-label={'oi'} />;
50+
const button = (
51+
<EuiToolTip
52+
content={i18n.translate(
53+
'xpack.securitySolution.entityAnalytics.privilegedAccessDetection.infoPopover.buttonTooltip',
54+
{ defaultMessage: 'More information' }
55+
)}
56+
disableScreenReaderOutput
57+
>
58+
<EuiButtonIcon
59+
iconType="info"
60+
onClick={togglePopover}
61+
aria-label={i18n.translate(
62+
'xpack.securitySolution.entityAnalytics.privilegedAccessDetection.infoPopover.buttonAriaLabel',
63+
{ defaultMessage: 'More information' }
64+
)}
65+
/>
66+
</EuiToolTip>
67+
);
4968

5069
return (
5170
<EuiPopover button={button} isOpen={isPopoverOpen} closePopover={closePopover}>

‎x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/privileged_user_activity/columns.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import React from 'react';
99
import { FormattedMessage } from '@kbn/i18n-react';
1010
import { capitalize, isArray } from 'lodash/fp';
11-
import { EuiBadge, EuiButtonIcon, type EuiBasicTableColumn } from '@elastic/eui';
11+
import { EuiBadge, EuiButtonIcon, EuiToolTip, type EuiBasicTableColumn } from '@elastic/eui';
1212
import type { FlyoutPanelProps } from '@kbn/expandable-flyout';
1313
import { i18n } from '@kbn/i18n';
1414
import { getEmptyTagValue } from '../../../../../common/components/empty_value';
@@ -111,17 +111,28 @@ const getActionsColumn = (openRightPanel: (props: FlyoutPanelProps) => void) =>
111111
};
112112

113113
return (
114-
<EuiButtonIcon
115-
iconType="maximize"
116-
onClick={onClick}
117-
aria-label={i18n.translate(
114+
<EuiToolTip
115+
content={i18n.translate(
118116
'xpack.securitySolution.entityAnalytics.privilegedUserMonitoring.userActivity.columns.preview.ariaLabel',
119117
{
120118
defaultMessage: 'Preview event with id {id}',
121119
values: { id: record._id },
122120
}
123121
)}
124-
/>
122+
disableScreenReaderOutput
123+
>
124+
<EuiButtonIcon
125+
iconType="maximize"
126+
onClick={onClick}
127+
aria-label={i18n.translate(
128+
'xpack.securitySolution.entityAnalytics.privilegedUserMonitoring.userActivity.columns.preview.ariaLabel',
129+
{
130+
defaultMessage: 'Preview event with id {id}',
131+
values: { id: record._id },
132+
}
133+
)}
134+
/>
135+
</EuiToolTip>
125136
);
126137
},
127138
width: COLUMN_WIDTHS.actions,

‎x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/privileged_users_table/columns.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@ import React, { useEffect } from 'react';
1111
import { i18n } from '@kbn/i18n';
1212
import type { EuiBasicTableColumn } from '@elastic/eui';
1313
import {
14-
EuiLink,
15-
EuiFlexItem,
16-
useEuiTheme,
1714
EuiBadge,
18-
EuiText,
19-
EuiLoadingSpinner,
2015
EuiButtonIcon,
2116
EuiFlexGroup,
17+
EuiFlexItem,
18+
EuiLink,
19+
EuiLoadingSpinner,
20+
EuiText,
21+
EuiToolTip,
22+
useEuiTheme,
2223
} from '@elastic/eui';
2324
import { SecurityPageName, useNavigation } from '@kbn/security-solution-navigation';
2425
import { encode } from '@kbn/rison';
@@ -81,18 +82,28 @@ const getActionsColumn = (openUserFlyout: (userName: string) => void) => ({
8182
),
8283
render: (record: { 'user.name': string }) => {
8384
return (
84-
<EuiButtonIcon
85-
iconType="maximize"
86-
onClick={() => {
87-
openUserFlyout(record['user.name']);
88-
}}
89-
aria-label={i18n.translate(
85+
<EuiToolTip
86+
content={i18n.translate(
9087
'xpack.securitySolution.entityAnalytics.privilegedUserMonitoring.privilegedUsersTable.columns.expand.ariaLabel',
9188
{
9289
defaultMessage: 'Open user flyout',
9390
}
9491
)}
95-
/>
92+
disableScreenReaderOutput
93+
>
94+
<EuiButtonIcon
95+
iconType="maximize"
96+
onClick={() => {
97+
openUserFlyout(record['user.name']);
98+
}}
99+
aria-label={i18n.translate(
100+
'xpack.securitySolution.entityAnalytics.privilegedUserMonitoring.privilegedUsersTable.columns.expand.ariaLabel',
101+
{
102+
defaultMessage: 'Open user flyout',
103+
}
104+
)}
105+
/>
106+
</EuiToolTip>
96107
);
97108
},
98109
width: COLUMN_WIDTHS.actions,

‎x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_management/alert_filters_kql_bar.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
EuiSpacer,
2020
EuiText,
2121
EuiTextColor,
22+
EuiToolTip,
2223
} from '@elastic/eui';
2324
import type { Query } from '@kbn/es-query';
2425
import { fromKueryExpression } from '@kbn/es-query';
@@ -164,13 +165,15 @@ const CustomFilterChip: React.FC<CustomFilterChipProps> = ({
164165
</EuiFlexItem>
165166
)}
166167
<EuiFlexItem grow={false}>
167-
<EuiButtonIcon
168-
iconType="cross"
169-
color="text"
170-
onClick={onRemove}
171-
aria-label={i18n.REMOVE_FILTER}
172-
size="xs"
173-
/>
168+
<EuiToolTip content={i18n.REMOVE_FILTER} disableScreenReaderOutput>
169+
<EuiButtonIcon
170+
iconType="cross"
171+
color="text"
172+
onClick={onRemove}
173+
aria-label={i18n.REMOVE_FILTER}
174+
size="xs"
175+
/>
176+
</EuiToolTip>
174177
</EuiFlexItem>
175178
</EuiFlexGroup>
176179
</EuiPanel>

‎x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/threat_hunting/top_threat_hunting_leads/index.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,15 @@ export const TopThreatHuntingLeads: React.FC<TopThreatHuntingLeadsProps> = ({
116116
<EuiPanel hasBorder data-test-subj="topThreatHuntingLeads" color="subdued">
117117
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
118118
<EuiFlexItem grow={false}>
119-
<EuiButtonIcon
120-
iconType={isOpen ? 'arrowDown' : 'arrowRight'}
121-
onClick={toggleOpen}
122-
aria-label={isOpen ? 'Collapse' : 'Expand'}
123-
color="text"
124-
size="xs"
125-
/>
119+
<EuiToolTip content={isOpen ? i18n.COLLAPSE : i18n.EXPAND} disableScreenReaderOutput>
120+
<EuiButtonIcon
121+
iconType={isOpen ? 'arrowDown' : 'arrowRight'}
122+
onClick={toggleOpen}
123+
aria-label={isOpen ? i18n.COLLAPSE : i18n.EXPAND}
124+
color="text"
125+
size="xs"
126+
/>
127+
</EuiToolTip>
126128
</EuiFlexItem>
127129
<EuiFlexItem grow={false}>
128130
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
@@ -240,12 +242,14 @@ export const TopThreatHuntingLeads: React.FC<TopThreatHuntingLeadsProps> = ({
240242
panelPaddingSize="m"
241243
aria-label={i18n.OPTIONS}
242244
button={
243-
<EuiButtonIcon
244-
iconType="boxesVertical"
245-
aria-label={i18n.OPTIONS}
246-
onClick={toggleOptions}
247-
data-test-subj="leadsOptionsButton"
248-
/>
245+
<EuiToolTip content={i18n.OPTIONS} disableScreenReaderOutput>
246+
<EuiButtonIcon
247+
iconType="boxesVertical"
248+
aria-label={i18n.OPTIONS}
249+
onClick={toggleOptions}
250+
data-test-subj="leadsOptionsButton"
251+
/>
252+
</EuiToolTip>
249253
}
250254
>
251255
<div style={{ width: 320 }}>

‎x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/threat_hunting/top_threat_hunting_leads/translations.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,16 @@ export const OPTIONS = i18n.translate(
3232
{ defaultMessage: 'Options' }
3333
);
3434

35+
export const COLLAPSE = i18n.translate(
36+
'xpack.securitySolution.entityAnalytics.threatHunting.leads.collapse',
37+
{ defaultMessage: 'Collapse' }
38+
);
39+
40+
export const EXPAND = i18n.translate(
41+
'xpack.securitySolution.entityAnalytics.threatHunting.leads.expand',
42+
{ defaultMessage: 'Expand' }
43+
);
44+
3545
export const AUTO_GENERATE_LABEL = i18n.translate(
3646
'xpack.securitySolution.entityAnalytics.threatHunting.leads.autoGenerate',
3747
{ defaultMessage: 'Auto-generate every 24 hours' }

‎x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/user_risk_score_table/columns.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
import React, { type SyntheticEvent } from 'react';
9-
import { EuiLink, EuiText } from '@elastic/eui';
9+
import { EuiLink, EuiText, EuiToolTip } from '@elastic/eui';
1010
import { SECURITY_CELL_ACTIONS_DEFAULT } from '@kbn/ui-actions-plugin/common/trigger_ids';
1111
import { SecurityCellActions, CellActionsMode } from '../../../common/components/cell_actions';
1212
import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
@@ -91,9 +91,9 @@ export const getUserRiskScoreColumns = ({
9191
render: (riskScore) => {
9292
if (riskScore != null) {
9393
return (
94-
<span data-test-subj="risk-score-truncate" title={`${riskScore}`}>
95-
{formatRiskScore(riskScore)}
96-
</span>
94+
<EuiToolTip content={`${riskScore}`}>
95+
<span data-test-subj="risk-score-truncate">{formatRiskScore(riskScore)}</span>
96+
</EuiToolTip>
9797
);
9898
}
9999
return getEmptyTagValue();

0 commit comments

Comments
 (0)