[Security Solutions] Follow up of critical bug fixes for error toaste…

…rs and error messages (#98220) (#98435)

## Summary

Follow up from feedback and testing of:
#97945

This fixes a bug found with the older toaster notifications that can cause a screen stack trace:
<img width="1520" alt="Screen Shot 2021-04-22 at 5 32 57 PM" src="https://user-images.githubusercontent.com/1151048/115929514-2d9e9b80-a445-11eb-8017-eb21d800c472.png">

Adds more information and robust error handling when the messages are Kibana/NodeJS error messages.

Before:
<img width="808" alt="Screen Shot 2021-04-22 at 5 37 37 PM" src="https://user-images.githubusercontent.com/1151048/115929643-5de63a00-a445-11eb-93bc-5a826f371ef3.png">
After:
<img width="789" alt="Screen Shot 2021-04-22 at 6 23 52 PM" src="https://user-images.githubusercontent.com/1151048/115929651-62aaee00-a445-11eb-9c03-d56b488d238b.png">

### Checklist
- [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

x-pack/plugins/security_solution/public/common/components/toasters/index.tsx

@@ -20,6 +20,7 @@ export * from './errors';
  * @deprecated Use x-pack/plugins/security_solution/public/common/hooks/use_app_toasts.ts instead
  */
 export interface AppToast extends Toast {
+  // FunFact: In a very rare case of errors this can be something other than array. We have a unit test case for it and am leaving it like this type for now.
   errors?: string[];
 }
 

x-pack/plugins/security_solution/public/common/components/toasters/modal_all_errors.test.tsx

@@ -54,6 +54,18 @@ describe('Modal all errors', () => {
         mockToastWithTwoError.errors.length
       );
     });
+
+    // This test exists to ensure that errors will work if it is a non-array which can happen in rare corner cases.
+    test('it doesnt cause errors when errors is not an array which can be the rare case in corner cases', () => {
+      const mockToastWithTwoError = cloneDeep(mockToast);
+      mockToastWithTwoError.errors = ('' as unknown) as string[];
+      const wrapper = shallow(
+        <ModalAllErrors isShowing={true} toast={mockToastWithTwoError} toggle={toggle} />
+      );
+      expect(wrapper.find('[data-test-subj="modal-all-errors-accordion"]').length).toBe(
+        mockToastWithTwoError.errors.length
+      );
+    });
   });
 
   describe('events', () => {

x-pack/plugins/security_solution/public/common/components/toasters/modal_all_errors.tsx

@@ -23,12 +23,18 @@ import styled from 'styled-components';
 import { AppToast } from '.';
 import * as i18n from './translations';
 
+/**
+ * @deprecated Use x-pack/plugins/security_solution/public/common/hooks/use_app_toasts.ts instead
+ */
 interface FullErrorProps {
   isShowing: boolean;
   toast: AppToast;
   toggle: (toast: AppToast) => void;
 }
 
+/**
+ * @deprecated Use x-pack/plugins/security_solution/public/common/hooks/use_app_toasts.ts instead
+ */
 const ModalAllErrorsComponent: React.FC<FullErrorProps> = ({ isShowing, toast, toggle }) => {
   const handleClose = useCallback(() => toggle(toast), [toggle, toast]);
 
@@ -43,7 +49,7 @@ const ModalAllErrorsComponent: React.FC<FullErrorProps> = ({ isShowing, toast, t
       <EuiModalBody>
         <EuiCallOut title={toast.title} color="danger" size="s" iconType="alert" />
         <EuiSpacer size="s" />
-        {toast.errors != null &&
+        {Array.isArray(toast.errors) && // FunFact: This can be a non-array in some rare cases
           toast.errors.map((error, index) => (
             <EuiAccordion
               key={`${toast.id}-${index}`}
@@ -66,10 +72,19 @@ const ModalAllErrorsComponent: React.FC<FullErrorProps> = ({ isShowing, toast, t
   );
 };
 
+/**
+ * @deprecated Use x-pack/plugins/security_solution/public/common/hooks/use_app_toasts.ts instead
+ */
 export const ModalAllErrors = React.memo(ModalAllErrorsComponent);
 
+/**
+ * @deprecated Use x-pack/plugins/security_solution/public/common/hooks/use_app_toasts.ts instead
+ */
 const MyEuiCodeBlock = styled(EuiCodeBlock)`
   margin-top: 4px;
 `;
 
+/**
+ * @deprecated Use x-pack/plugins/security_solution/public/common/hooks/use_app_toasts.ts instead
+ */
 MyEuiCodeBlock.displayName = 'MyEuiCodeBlock';