github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Cases] Wrap the all cases list tags column (#144787)

Browse source 
## Summary

This PR aims to stop the truncating behavior from the Tags column in the
all-cases list.

* An ellipsis shows up if there are too many tags
* The height is limited to three rows
* The tooltip behavior remains
* Fixed the tags column width

### Screenshots

<details><summary>Before:</summary>
<img width="1408" alt="Screenshot 2022-11-08 at 10 48 34"
src="https://user-images.githubusercontent.com/1533137/200531920-03442218-7151-471b-9ff7-66f31acf1f56.png">
</details>

<details><summary>After</summary>
<img width="1425" alt="Screenshot 2022-11-08 at 10 47 51"
src="https://user-images.githubusercontent.com/1533137/200531952-f2c9be6e-0a7d-41e2-bd8c-03c6f36635d0.png">
</details>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Antonio 2022-11-10 10:45:43 +01:00 • committed by GitHub
parent f02cf40fdc
commit f1d5f4488d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

23
x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx
View file

@ -63,13 +63,14 @@ describe('useCasesColumns ', () => {
"field": "tags",
"name": "Tags",
"render": [Function],
"truncateText": true,
"width": "15%",
},
Object {
"align": "right",
"field": "totalAlerts",
"name": "Alerts",
"render": [Function],
"width": "80px",
},
Object {
"align": "right",
@ -142,13 +143,14 @@ describe('useCasesColumns ', () => {
"field": "tags",
"name": "Tags",
"render": [Function],
"truncateText": true,
"width": "15%",
},
Object {
"align": "right",
"field": "totalAlerts",
"name": "Alerts",
"render": [Function],
"width": "80px",
},
Object {
"align": "right",
@ -212,7 +214,7 @@ describe('useCasesColumns ', () => {
"field": "tags",
"name": "Tags",
"render": [Function],
"truncateText": true,
"width": "15%",
},
Object {
"align": "right",
@ -271,13 +273,14 @@ describe('useCasesColumns ', () => {
"field": "tags",
"name": "Tags",
"render": [Function],
"truncateText": true,
"width": "15%",
},
Object {
"align": "right",
"field": "totalAlerts",
"name": "Alerts",
"render": [Function],
"width": "80px",
},
Object {
"align": "right",
@ -341,13 +344,14 @@ describe('useCasesColumns ', () => {
"field": "tags",
"name": "Tags",
"render": [Function],
"truncateText": true,
"width": "15%",
},
Object {
"align": "right",
"field": "totalAlerts",
"name": "Alerts",
"render": [Function],
"width": "80px",
},
Object {
"align": "right",
@ -409,13 +413,14 @@ describe('useCasesColumns ', () => {
"field": "tags",
"name": "Tags",
"render": [Function],
"truncateText": true,
"width": "15%",
},
Object {
"align": "right",
"field": "totalAlerts",
"name": "Alerts",
"render": [Function],
"width": "80px",
},
Object {
"align": "right",
@ -476,13 +481,14 @@ describe('useCasesColumns ', () => {
"field": "tags",
"name": "Tags",
"render": [Function],
"truncateText": true,
"width": "15%",
},
Object {
"align": "right",
"field": "totalAlerts",
"name": "Alerts",
"render": [Function],
"width": "80px",
},
Object {
"align": "right",
@ -542,13 +548,14 @@ describe('useCasesColumns ', () => {
"field": "tags",
"name": "Tags",
"render": [Function],
"truncateText": true,
"width": "15%",
},
Object {
"align": "right",
"field": "totalAlerts",
"name": "Alerts",
"render": [Function],
"width": "80px",
},
Object {
"align": "right",

38
x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx
View file

@ -26,6 +26,7 @@ import { RIGHT_ALIGNMENT } from '@elastic/eui/lib/services';
import styled from 'styled-components';
import { Status } from '@kbn/cases-components';
import type { UserProfileWithAvatar } from '@kbn/user-profile-components';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import type { Case } from '../../../common/ui/types';
import type { ActionConnector } from '../../../common/api';
@ -58,6 +59,20 @@ const MediumShadeText = styled.p`
color: ${({ theme }) => theme.eui.euiColorMediumShade};
`;
const LINE_CLAMP = 3;
const LineClampedEuiBadgeGroup = euiStyled(EuiBadgeGroup)`
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: ${LINE_CLAMP};
-webkit-box-orient: vertical;
overflow: hidden;
word-break: normal;
`;
const StyledEuiBadge = euiStyled(EuiBadge)`
max-width: 100px
`; // to allow for ellipsis
const renderStringField = (field: string, dataTestSubj: string) =>
field != null ? <span data-test-subj={dataTestSubj}>{field}</span> : getEmptyTagValue();
@ -183,7 +198,21 @@ export const useCasesColumns = ({
name: i18n.TAGS,
render: (tags: Case['tags']) => {
if (tags != null && tags.length > 0) {
const badges = (
const clampedBadges = (
<LineClampedEuiBadgeGroup data-test-subj="case-table-column-tags">
{tags.map((tag: string, i: number) => (
<StyledEuiBadge
color="hollow"
key={`${tag}-${i}`}
data-test-subj={`case-table-column-tags-${tag}`}
>
{tag}
</StyledEuiBadge>
))}
</LineClampedEuiBadgeGroup>
);
const unclampedBadges = (
<EuiBadgeGroup data-test-subj="case-table-column-tags">
{tags.map((tag: string, i: number) => (
<EuiBadge
@ -201,15 +230,15 @@ export const useCasesColumns = ({
<EuiToolTip
data-test-subj="case-table-column-tags-tooltip"
position="left"
content={badges}
content={unclampedBadges}
>
{badges}
{clampedBadges}
</EuiToolTip>
);
}
return getEmptyTagValue();
},
truncateText: true,
width: '15%',
});
if (isAlertsEnabled) {
@ -221,6 +250,7 @@ export const useCasesColumns = ({
totalAlerts != null
? renderStringField(`${totalAlerts}`, `case-table-column-alertsCount`)
: getEmptyTagValue(),
width: '80px',
});
}