Multiple types of error messages

elastic · May 16, 2020 · 22ba94d · 22ba94d
1 parent c522ded
commit 22ba94d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 12 deletions.
diff --git a/x-pack/plugins/siem/public/cases/components/callout/index.tsx b/x-pack/plugins/siem/public/cases/components/callout/index.tsx
@@ -12,28 +12,49 @@ import * as i18n from './translations';
 
 export * from './helpers';
 
+interface ErrorMessage {
+  title: string;
+  description: JSX.Element;
+  errorType?: 'primary' | 'success' | 'warning' | 'danger';
+}
+
 interface CaseCallOutProps {
   title: string;
   message?: string;
-  messages?: Array<{ title: string; description: JSX.Element }>;
+  messages?: ErrorMessage[];
 }
 
 const CaseCallOutComponent = ({ title, message, messages }: CaseCallOutProps) => {
   const [showCallOut, setShowCallOut] = useState(true);
   const handleCallOut = useCallback(() => setShowCallOut(false), [setShowCallOut]);
 
+  const groupedErrorMessages = (messages ?? []).reduce((acc, currentMessage: ErrorMessage) => {
+    const key = currentMessage.errorType == null ? 'primary' : currentMessage.errorType;
+    return {
+      ...acc,
+      [key]: [...(acc[key] || []), currentMessage],
+    };
+  }, {} as { [key in NonNullable<ErrorMessage['errorType']>]: ErrorMessage[] });
+
   return showCallOut ? (
     <>
-      <EuiCallOut title={title} color="primary" iconType="gear" data-test-subj="case-call-out">
-        {!isEmpty(messages) && (
-          <EuiDescriptionList data-test-subj="callout-messages" listItems={messages} />
-        )}
-        {!isEmpty(message) && <p data-test-subj="callout-message">{message}</p>}
-        <EuiButton data-test-subj="callout-dismiss" color="primary" onClick={handleCallOut}>
-          {i18n.DISMISS_CALLOUT}
-        </EuiButton>
-      </EuiCallOut>
-      <EuiSpacer />
+      {(Object.keys(groupedErrorMessages) as Array<keyof ErrorMessage['errorType']>).map(key => (
+        <React.Fragment key={key}>
+          <EuiCallOut title={title} color={key} iconType="gear" data-test-subj="case-call-out">
+            {!isEmpty(messages) && (
+              <EuiDescriptionList
+                data-test-subj="callout-messages"
+                listItems={groupedErrorMessages[key]}
+              />
+            )}
+            {!isEmpty(message) && <p data-test-subj="callout-message">{message}</p>}
+            <EuiButton data-test-subj="callout-dismiss" color="primary" onClick={handleCallOut}>
+              {i18n.DISMISS_CALLOUT}
+            </EuiButton>
+          </EuiCallOut>
+          <EuiSpacer />
+        </React.Fragment>
+      ))}
     </>
   ) : null;
 };

diff --git a/x-pack/plugins/siem/public/cases/components/use_push_to_service/index.tsx b/x-pack/plugins/siem/public/cases/components/use_push_to_service/index.tsx
@@ -67,7 +67,11 @@ export const usePushToService = ({
   }, [caseId, caseServices, caseConnectorId, caseConnectorName, postPushToService, updateCase]);
 
   const errorsMsg = useMemo(() => {
-    let errors: Array<{ title: string; description: JSX.Element }> = [];
+    let errors: Array<{
+      title: string;
+      description: JSX.Element;
+      errorType?: 'primary' | 'success' | 'warning' | 'danger';
+    }> = [];
     if (actionLicense != null && !actionLicense.enabledInLicense) {
       errors = [...errors, getLicenseError()];
     }
@@ -115,6 +119,7 @@ export const usePushToService = ({
               id="xpack.siem.case.caseView.pushToServiceDisableByInvalidConnector"
             />
           ),
+          errorType: 'danger',
         },
       ];
     }