From ce6bde172b605133a01055f8498a09e34ad70ce1 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Tue, 7 Feb 2023 14:26:56 +0200 Subject: [PATCH] [Cases] Break long titles in toaster (#150257) ## Summary In some toasters, the title of the toaster is set from user input. It is possible for long titles to overflow the toaster. This PR fixes this issue by forcing long titles to break. Uses the EUI CSS utility class `eui-textBreakWord`. Fixes: https://github.com/elastic/kibana/issues/149485 ### Checklist Delete any items that are not applicable to this PR. - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios ### For maintainers - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../cases/public/common/use_cases_toast.test.tsx | 5 ++++- .../cases/public/common/use_cases_toast.tsx | 2 +- .../assignees/use_assignees_action.test.tsx | 14 ++++++++------ .../actions/copy_id/use_copy_id_action.test.tsx | 7 ++++--- .../actions/delete/use_delete_action.test.tsx | 14 ++++++++------ .../actions/severity/use_severity_action.test.tsx | 14 ++++++++------ .../actions/status/use_status_action.test.tsx | 14 ++++++++------ .../actions/tags/use_tags_action.test.tsx | 14 ++++++++------ .../components/actions/use_items_action.test.tsx | 7 ++++--- .../containers/use_bulk_update_case.test.tsx | 5 ++++- .../public/containers/use_delete_cases.test.tsx | 5 ++++- .../public/containers/use_post_push_to_service.tsx | 5 ++++- .../plugins/cases/public/containers/utils.test.ts | 7 +++++++ x-pack/plugins/cases/public/containers/utils.ts | 1 + 14 files changed, 73 insertions(+), 41 deletions(-) diff --git a/x-pack/plugins/cases/public/common/use_cases_toast.test.tsx b/x-pack/plugins/cases/public/common/use_cases_toast.test.tsx index cabca3ea69f7a..6c33c86d29d51 100644 --- a/x-pack/plugins/cases/public/common/use_cases_toast.test.tsx +++ b/x-pack/plugins/cases/public/common/use_cases_toast.test.tsx @@ -346,7 +346,10 @@ describe('Use cases toast hook', () => { result.current.showSuccessToast('my title'); - expect(successMock).toHaveBeenCalledWith('my title'); + expect(successMock).toHaveBeenCalledWith({ + className: 'eui-textBreakWord', + title: 'my title', + }); }); }); }); diff --git a/x-pack/plugins/cases/public/common/use_cases_toast.tsx b/x-pack/plugins/cases/public/common/use_cases_toast.tsx index d866f9791fc2d..3d90005546464 100644 --- a/x-pack/plugins/cases/public/common/use_cases_toast.tsx +++ b/x-pack/plugins/cases/public/common/use_cases_toast.tsx @@ -167,7 +167,7 @@ export const useCasesToast = () => { } }, showSuccessToast: (title: string) => { - toasts.addSuccess(title); + toasts.addSuccess({ title, className: 'eui-textBreakWord' }); }, }; }; diff --git a/x-pack/plugins/cases/public/components/actions/assignees/use_assignees_action.test.tsx b/x-pack/plugins/cases/public/components/actions/assignees/use_assignees_action.test.tsx index 91c47edc276c7..11b91c483d151 100644 --- a/x-pack/plugins/cases/public/components/actions/assignees/use_assignees_action.test.tsx +++ b/x-pack/plugins/cases/public/components/actions/assignees/use_assignees_action.test.tsx @@ -111,9 +111,10 @@ describe('useAssigneesAction', () => { }); await waitFor(() => { - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - 'Edited case' - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: 'Edited case', + className: 'eui-textBreakWord', + }); }); }); @@ -136,9 +137,10 @@ describe('useAssigneesAction', () => { }); await waitFor(() => { - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - 'Edited 2 cases' - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: 'Edited 2 cases', + className: 'eui-textBreakWord', + }); }); }); }); diff --git a/x-pack/plugins/cases/public/components/actions/copy_id/use_copy_id_action.test.tsx b/x-pack/plugins/cases/public/components/actions/copy_id/use_copy_id_action.test.tsx index 7cc4f7677286b..0c33980b3ab63 100644 --- a/x-pack/plugins/cases/public/components/actions/copy_id/use_copy_id_action.test.tsx +++ b/x-pack/plugins/cases/public/components/actions/copy_id/use_copy_id_action.test.tsx @@ -83,9 +83,10 @@ describe('useCopyIDAction', () => { await waitFor(() => { expect(onActionSuccess).toHaveBeenCalled(); - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - 'Copied Case ID to clipboard' - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: 'Copied Case ID to clipboard', + className: 'eui-textBreakWord', + }); }); }); }); diff --git a/x-pack/plugins/cases/public/components/actions/delete/use_delete_action.test.tsx b/x-pack/plugins/cases/public/components/actions/delete/use_delete_action.test.tsx index 3e89fc83ca92b..8859267208817 100644 --- a/x-pack/plugins/cases/public/components/actions/delete/use_delete_action.test.tsx +++ b/x-pack/plugins/cases/public/components/actions/delete/use_delete_action.test.tsx @@ -155,9 +155,10 @@ describe('useDeleteAction', () => { }); await waitFor(() => { - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - 'Deleted case' - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: 'Deleted case', + className: 'eui-textBreakWord', + }); }); }); @@ -180,9 +181,10 @@ describe('useDeleteAction', () => { }); await waitFor(() => { - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - 'Deleted 2 cases' - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: 'Deleted 2 cases', + className: 'eui-textBreakWord', + }); }); }); }); diff --git a/x-pack/plugins/cases/public/components/actions/severity/use_severity_action.test.tsx b/x-pack/plugins/cases/public/components/actions/severity/use_severity_action.test.tsx index 42fea8e679608..695b90624fdd6 100644 --- a/x-pack/plugins/cases/public/components/actions/severity/use_severity_action.test.tsx +++ b/x-pack/plugins/cases/public/components/actions/severity/use_severity_action.test.tsx @@ -136,9 +136,10 @@ describe('useSeverityAction', () => { }); await waitFor(() => { - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - expectedMessage - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: expectedMessage, + className: 'eui-textBreakWord', + }); }); } ); @@ -168,9 +169,10 @@ describe('useSeverityAction', () => { }); await waitFor(() => { - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - expectedMessage - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: expectedMessage, + className: 'eui-textBreakWord', + }); }); } ); diff --git a/x-pack/plugins/cases/public/components/actions/status/use_status_action.test.tsx b/x-pack/plugins/cases/public/components/actions/status/use_status_action.test.tsx index 03d3da5101d38..201783db6bd95 100644 --- a/x-pack/plugins/cases/public/components/actions/status/use_status_action.test.tsx +++ b/x-pack/plugins/cases/public/components/actions/status/use_status_action.test.tsx @@ -126,9 +126,10 @@ describe('useStatusAction', () => { }); await waitFor(() => { - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - expectedMessage - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: expectedMessage, + className: 'eui-textBreakWord', + }); }); } ); @@ -157,9 +158,10 @@ describe('useStatusAction', () => { }); await waitFor(() => { - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - expectedMessage - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: expectedMessage, + className: 'eui-textBreakWord', + }); }); } ); diff --git a/x-pack/plugins/cases/public/components/actions/tags/use_tags_action.test.tsx b/x-pack/plugins/cases/public/components/actions/tags/use_tags_action.test.tsx index 1c4af4705bf38..c4aa68a578f2d 100644 --- a/x-pack/plugins/cases/public/components/actions/tags/use_tags_action.test.tsx +++ b/x-pack/plugins/cases/public/components/actions/tags/use_tags_action.test.tsx @@ -105,9 +105,10 @@ describe('useTagsAction', () => { }); await waitFor(() => { - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - 'Edited case' - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: 'Edited case', + className: 'eui-textBreakWord', + }); }); }); @@ -130,9 +131,10 @@ describe('useTagsAction', () => { }); await waitFor(() => { - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - 'Edited 2 cases' - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: 'Edited 2 cases', + className: 'eui-textBreakWord', + }); }); }); }); diff --git a/x-pack/plugins/cases/public/components/actions/use_items_action.test.tsx b/x-pack/plugins/cases/public/components/actions/use_items_action.test.tsx index a53eca39562e8..1ce613b9ded83 100644 --- a/x-pack/plugins/cases/public/components/actions/use_items_action.test.tsx +++ b/x-pack/plugins/cases/public/components/actions/use_items_action.test.tsx @@ -221,9 +221,10 @@ describe('useItemsAction', () => { }); await waitFor(() => { - expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( - 'My toaster title' - ); + expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith({ + title: 'My toaster title', + className: 'eui-textBreakWord', + }); }); }); diff --git a/x-pack/plugins/cases/public/containers/use_bulk_update_case.test.tsx b/x-pack/plugins/cases/public/containers/use_bulk_update_case.test.tsx index be89dc92f9d06..06d641e753dce 100644 --- a/x-pack/plugins/cases/public/containers/use_bulk_update_case.test.tsx +++ b/x-pack/plugins/cases/public/containers/use_bulk_update_case.test.tsx @@ -74,7 +74,10 @@ describe('useUpdateCases', () => { await waitForNextUpdate(); - expect(addSuccess).toHaveBeenCalledWith('Success title'); + expect(addSuccess).toHaveBeenCalledWith({ + title: 'Success title', + className: 'eui-textBreakWord', + }); }); it('shows a toast error when the api return an error', async () => { diff --git a/x-pack/plugins/cases/public/containers/use_delete_cases.test.tsx b/x-pack/plugins/cases/public/containers/use_delete_cases.test.tsx index 2059b7331e298..6df1c886f146e 100644 --- a/x-pack/plugins/cases/public/containers/use_delete_cases.test.tsx +++ b/x-pack/plugins/cases/public/containers/use_delete_cases.test.tsx @@ -74,7 +74,10 @@ describe('useDeleteCases', () => { await waitForNextUpdate(); - expect(addSuccess).toHaveBeenCalledWith('Success title'); + expect(addSuccess).toHaveBeenCalledWith({ + title: 'Success title', + className: 'eui-textBreakWord', + }); }); it('shows a toast error when the api return an error', async () => { diff --git a/x-pack/plugins/cases/public/containers/use_post_push_to_service.tsx b/x-pack/plugins/cases/public/containers/use_post_push_to_service.tsx index 3a5e8bddcea63..d13500dcbc5fa 100644 --- a/x-pack/plugins/cases/public/containers/use_post_push_to_service.tsx +++ b/x-pack/plugins/cases/public/containers/use_post_push_to_service.tsx @@ -77,7 +77,10 @@ export const usePostPushToService = (): UsePostPushToService => { if (!cancel.current) { dispatch({ type: 'FETCH_SUCCESS' }); - toasts.addSuccess(i18n.SUCCESS_SEND_TO_EXTERNAL_SERVICE(connector.name)); + toasts.addSuccess({ + title: i18n.SUCCESS_SEND_TO_EXTERNAL_SERVICE(connector.name), + className: 'eui-textBreakWord', + }); } return response; diff --git a/x-pack/plugins/cases/public/containers/utils.test.ts b/x-pack/plugins/cases/public/containers/utils.test.ts index fbb9f7a72d1d0..c87c81a02f818 100644 --- a/x-pack/plugins/cases/public/containers/utils.test.ts +++ b/x-pack/plugins/cases/public/containers/utils.test.ts @@ -58,6 +58,7 @@ describe('utils', () => { expect(toast).toEqual({ title: 'Alerts in "My case" have been synced', + className: 'eui-textBreakWord', }); }); @@ -74,6 +75,7 @@ describe('utils', () => { expect(toast).toEqual({ title: 'Updated "My case"', + className: 'eui-textBreakWord', }); }); @@ -85,6 +87,7 @@ describe('utils', () => { expect(toast).toEqual({ title: 'Updated "My case"', + className: 'eui-textBreakWord', }); }); @@ -100,6 +103,7 @@ describe('utils', () => { expect(toast).toEqual({ title: 'Updated "My case"', text: 'Updated the statuses of attached alerts.', + className: 'eui-textBreakWord', }); }); @@ -114,6 +118,7 @@ describe('utils', () => { expect(toast).toEqual({ title: 'Updated "My case"', + className: 'eui-textBreakWord', }); }); @@ -128,6 +133,7 @@ describe('utils', () => { expect(toast).toEqual({ title: 'Updated "My case"', + className: 'eui-textBreakWord', }); }); @@ -142,6 +148,7 @@ describe('utils', () => { expect(toast).toEqual({ title: 'Updated "My case"', + className: 'eui-textBreakWord', }); }); }); diff --git a/x-pack/plugins/cases/public/containers/utils.ts b/x-pack/plugins/cases/public/containers/utils.ts index f0c37ddb9e424..a2d5c91417ec1 100644 --- a/x-pack/plugins/cases/public/containers/utils.ts +++ b/x-pack/plugins/cases/public/containers/utils.ts @@ -115,6 +115,7 @@ export const createUpdateSuccessToaster = ( const toast: ToastInputFields = { title: i18n.UPDATED_CASE(caseAfterUpdate.title), + className: 'eui-textBreakWord', }; if (valueToUpdateIsSettings(key, value) && value?.syncAlerts && caseHasAlerts) {