[Cloud Posture] remove tooltip and reduce clickable area for view all button (#162341)

## Summary

Summarize your PR. If it involves visual changes include a screenshot or
gif.
[Quick Wins](https://github.com/elastic/security-team/issues/7167)
Remove tooltip, reduce click area of tooltip, and make View All button
at the bottom fixed position.

<img width="652" alt="image"
src="db058936-b47a-4a76-8101-ff5ad61b2da3">
This commit is contained in:
Lola 2023-07-21 00:05:58 -04:00 committed by GitHub
parent f2914fca9c
commit 8d5355bd0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 25 deletions

View file

@ -10,9 +10,10 @@ import {
EuiButtonEmpty,
EuiBasicTable,
EuiSpacer,
EuiToolTip,
EuiBasicTableColumn,
useEuiTheme,
EuiFlexGroup,
EuiFlexItem,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { css } from '@emotion/react';
@ -37,30 +38,38 @@ export const VulnerabilityTablePanel = <T extends {}>({
}: VulnerabilityDashboardTableProps<T>) => {
const { euiTheme } = useEuiTheme();
const { title } = vulnerabilityDashboardTableContent[tableType];
const tooltipText = i18n.translate('xpack.csp.vulnerabilityTable.panel.tooltipText', {
defaultMessage: 'Explore in Findings',
});
return (
<ChartPanel title={title}>
<EuiBasicTable
className="vulnerabilityTable"
css={css`
& .euiTableHeaderCell {
border-bottom: ${euiTheme.border.width.thick} solid ${euiTheme.colors.darkestShade};
}
`}
items={items}
columns={columns}
/>
<EuiSpacer size="s" />
<EuiToolTip position="top" content={tooltipText}>
<EuiButtonEmpty iconType="search" onClick={onViewVulnerabilitiesClick} size="s">
{i18n.translate('xpack.csp.vulnerabilityTable.panel.buttonText', {
defaultMessage: 'View all vulnerabilities',
})}
</EuiButtonEmpty>
</EuiToolTip>
<EuiFlexGroup direction="column" justify-content="space-between">
<EuiFlexItem>
<EuiBasicTable
className="vulnerabilityTable"
css={css`
& .euiTableHeaderCell {
border-bottom: ${euiTheme.border.width.thick} solid ${euiTheme.colors.darkestShade};
}
`}
items={items}
columns={columns}
/>
<EuiSpacer size="s" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
css={css`
width: fit-content;
`}
iconType="search"
onClick={onViewVulnerabilitiesClick}
size="s"
>
{i18n.translate('xpack.csp.vulnerabilityTable.panel.buttonText', {
defaultMessage: 'View all vulnerabilities',
})}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</ChartPanel>
);
};

View file

@ -11645,7 +11645,6 @@
"xpack.csp.vulnerabilityTable.column.version": "Version",
"xpack.csp.vulnerabilityTable.column.vulnerability": "Vulnérabilité",
"xpack.csp.vulnerabilityTable.panel.buttonText": "Afficher toutes les vulnérabilités",
"xpack.csp.vulnerabilityTable.panel.tooltipText": "Explorer dans les résultats",
"xpack.csp.vulnMgmtIntegration.awsOption.nameTitle": "Amazon Web Services",
"xpack.csp.vulnMgmtIntegration.azureOption.nameTitle": "Azure",
"xpack.csp.vulnMgmtIntegration.azureOption.tooltipContent": "Bientôt disponible",

View file

@ -11659,7 +11659,6 @@
"xpack.csp.vulnerabilityTable.column.version": "バージョン",
"xpack.csp.vulnerabilityTable.column.vulnerability": "脆弱性",
"xpack.csp.vulnerabilityTable.panel.buttonText": "すべての脆弱性を表示",
"xpack.csp.vulnerabilityTable.panel.tooltipText": "調査結果を探索",
"xpack.csp.vulnMgmtIntegration.awsOption.nameTitle": "Amazon Web Services",
"xpack.csp.vulnMgmtIntegration.azureOption.nameTitle": "Azure",
"xpack.csp.vulnMgmtIntegration.azureOption.tooltipContent": "まもなくリリース",

View file

@ -11659,7 +11659,6 @@
"xpack.csp.vulnerabilityTable.column.version": "版本",
"xpack.csp.vulnerabilityTable.column.vulnerability": "漏洞",
"xpack.csp.vulnerabilityTable.panel.buttonText": "查看所有漏洞",
"xpack.csp.vulnerabilityTable.panel.tooltipText": "在结果中浏览",
"xpack.csp.vulnMgmtIntegration.awsOption.nameTitle": "Amazon Web Services",
"xpack.csp.vulnMgmtIntegration.azureOption.nameTitle": "Azure",
"xpack.csp.vulnMgmtIntegration.azureOption.tooltipContent": "即将推出",