[8.6] [Cases] Break long titles in toaster (#150257) (#150433)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[Cases] Break long titles in toaster
(#150257)](https://github.com/elastic/kibana/pull/150257)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Christos
Nasikas","email":"christos.nasikas@elastic.co"},"sourceCommit":{"committedDate":"2023-02-07T12:26:56Z","message":"[Cases]
Break long titles in toaster (#150257)\n\n## Summary\r\n\r\nIn some
toasters, the title of the toaster is set from user input. It
is\r\npossible for long titles to overflow the toaster. This PR fixes
this\r\nissue by forcing long titles to break. Uses the EUI CSS utility
class\r\n`eui-textBreakWord`.\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/149485\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n\r\n### For
maintainers\r\n\r\n- [x] This was checked for breaking API changes and
was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"ce6bde172b605133a01055f8498a09e34ad70ce1","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","Feature:Cases","backport:prev-minor","v8.7.0"],"number":150257,"url":"https://github.com/elastic/kibana/pull/150257","mergeCommit":{"message":"[Cases]
Break long titles in toaster (#150257)\n\n## Summary\r\n\r\nIn some
toasters, the title of the toaster is set from user input. It
is\r\npossible for long titles to overflow the toaster. This PR fixes
this\r\nissue by forcing long titles to break. Uses the EUI CSS utility
class\r\n`eui-textBreakWord`.\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/149485\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n\r\n### For
maintainers\r\n\r\n- [x] This was checked for breaking API changes and
was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"ce6bde172b605133a01055f8498a09e34ad70ce1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/150257","number":150257,"mergeCommit":{"message":"[Cases]
Break long titles in toaster (#150257)\n\n## Summary\r\n\r\nIn some
toasters, the title of the toaster is set from user input. It
is\r\npossible for long titles to overflow the toaster. This PR fixes
this\r\nissue by forcing long titles to break. Uses the EUI CSS utility
class\r\n`eui-textBreakWord`.\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/149485\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n\r\n### For
maintainers\r\n\r\n- [x] This was checked for breaking API changes and
was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"ce6bde172b605133a01055f8498a09e34ad70ce1"}}]}]
BACKPORT-->

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',
+      });
     });
   });
 });

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' });
     },
   };
 };

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',
+      });
     });
   });
 });

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',
+        });
       });
     }
   );

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',
+        });
       });
     }
   );

x-pack/plugins/cases/public/components/actions/tags/use_tags_action.test.tsx

@@ -163,9 +163,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',
+      });
     });
   });
 
@@ -188,9 +189,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',
+      });
     });
   });
 

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 () => {

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 () => {

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;

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',
       });
     });
   });

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) {