[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: #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 <[email protected]>
elastic · Feb 7, 2023 · ce6bde1 · ce6bde1
1 parent b42bb18
commit ce6bde1
Show file tree

Hide file tree

Showing 14 changed files with 73 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -167,7 +167,7 @@ export const useCasesToast = () => { @@
           }
         },
         showSuccessToast: (title: string) => {
-          toasts.addSuccess(title);
+          toasts.addSuccess({ title, className: 'eui-textBreakWord' });
         },
       };
     };
@@ Expand Down @@