From 6d593b5e9e5d13082c9ac878c442fe92ee215937 Mon Sep 17 00:00:00 2001
From: Christos Nasikas <christos.nasikas@elastic.co>
Date: Fri, 26 Jun 2020 18:22:06 +0300
Subject: [PATCH] Review implementation

---
 .../cases/components/callout/callout.test.tsx | 41 +++++++++++------
 .../cases/components/callout/index.test.tsx   |  6 +--
 .../public/cases/components/callout/index.tsx | 46 +++++++++++--------
 3 files changed, 59 insertions(+), 34 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/cases/components/callout/callout.test.tsx b/x-pack/plugins/security_solution/public/cases/components/callout/callout.test.tsx
index bc42c588136c69..7a344d9360b7d6 100644
--- a/x-pack/plugins/security_solution/public/cases/components/callout/callout.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/callout/callout.test.tsx
@@ -46,21 +46,36 @@ describe('Callout', () => {
     expect(wrapper.find(`[data-test-subj="callout-messages-md5-hex"]`).exists()).toBeFalsy();
   });
 
-  it('transform the button color correctly', () => {
-    let wrapper = mount(<CallOut {...defaultProps} />);
-    expect(wrapper.find(`[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('color')).toBe(
-      'primary'
-    );
+  it('transform the button color correctly - primary', () => {
+    const wrapper = mount(<CallOut {...defaultProps} />);
+    const className =
+      wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('className') ??
+      '';
+    expect(className.includes('euiButton--primary')).toBeTruthy();
+  });
 
-    wrapper = mount(<CallOut {...defaultProps} type={'success'} />);
-    expect(wrapper.find(`[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('color')).toBe(
-      'secondary'
-    );
+  it('transform the button color correctly - success', () => {
+    const wrapper = mount(<CallOut {...defaultProps} type={'success'} />);
+    const className =
+      wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('className') ??
+      '';
+    expect(className.includes('euiButton--secondary')).toBeTruthy();
+  });
+
+  it('transform the button color correctly - warning', () => {
+    const wrapper = mount(<CallOut {...defaultProps} type={'warning'} />);
+    const className =
+      wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('className') ??
+      '';
+    expect(className.includes('euiButton--warning')).toBeTruthy();
+  });
 
-    wrapper = mount(<CallOut {...defaultProps} type={'danger'} />);
-    expect(wrapper.find(`[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('color')).toBe(
-      'danger'
-    );
+  it('transform the button color correctly - danger', () => {
+    const wrapper = mount(<CallOut {...defaultProps} type={'danger'} />);
+    const className =
+      wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('className') ??
+      '';
+    expect(className.includes('euiButton--danger')).toBeTruthy();
   });
 
   it('dismiss the callout correctly', () => {
diff --git a/x-pack/plugins/security_solution/public/cases/components/callout/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/callout/index.test.tsx
index 5469fae4fe56a8..6d8917218c7c59 100644
--- a/x-pack/plugins/security_solution/public/cases/components/callout/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/callout/index.test.tsx
@@ -147,7 +147,7 @@ describe('CaseCallOut ', () => {
           id: 'message-one',
           title: 'title one',
           description: <p>{'we have two messages'}</p>,
-          errorType: 'danger' as 'primary' | 'success' | 'warning' | 'danger',
+          errorType: 'danger',
         },
       ],
     };
@@ -172,7 +172,7 @@ describe('CaseCallOut ', () => {
           id: 'message-one',
           title: 'title one',
           description: <p>{'we have two messages'}</p>,
-          errorType: 'warning' as 'primary' | 'success' | 'warning' | 'danger',
+          errorType: 'warning',
         },
       ],
     };
@@ -197,7 +197,7 @@ describe('CaseCallOut ', () => {
           id: 'message-one',
           title: 'title one',
           description: <p>{'we have two messages'}</p>,
-          errorType: 'success' as 'primary' | 'success' | 'warning' | 'danger',
+          errorType: 'success',
         },
       ],
     };
diff --git a/x-pack/plugins/security_solution/public/cases/components/callout/index.tsx b/x-pack/plugins/security_solution/public/cases/components/callout/index.tsx
index 1ad859389304ae..cefaec6ad0b06e 100644
--- a/x-pack/plugins/security_solution/public/cases/components/callout/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/callout/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiSpacer } from '@elastic/eui';
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback, useState, useMemo } from 'react';
 
 import { useMessagesStorage } from '../../../common/containers/local_storage/use_messages_storage';
 import { CallOut } from './callout';
@@ -32,12 +32,18 @@ interface CalloutVisibility {
 
 const CaseCallOutComponent = ({ title, messages = [] }: CaseCallOutProps) => {
   const { getMessages, addMessage } = useMessagesStorage();
-  const dismissedCallouts = getMessages('case').reduce<CalloutVisibility>(
-    (acc, id) => ({
-      ...acc,
-      [id]: false,
-    }),
-    {}
+
+  const caseMessages = useMemo(() => getMessages('case'), [getMessages]);
+  const dismissedCallouts = useMemo(
+    () =>
+      caseMessages.reduce<CalloutVisibility>(
+        (acc, id) => ({
+          ...acc,
+          [id]: false,
+        }),
+        {}
+      ),
+    [caseMessages]
   );
 
   const [calloutVisibility, setCalloutVisibility] = useState(dismissedCallouts);
@@ -51,18 +57,22 @@ const CaseCallOutComponent = ({ title, messages = [] }: CaseCallOutProps) => {
     [setCalloutVisibility, addMessage]
   );
 
-  const groupedByTypeErrorMessages = messages.reduce<GroupByTypeMessages>(
-    (acc: GroupByTypeMessages, currentMessage: ErrorMessage) => {
-      const type = currentMessage.errorType == null ? 'primary' : currentMessage.errorType;
-      return {
-        ...acc,
-        [type]: {
-          messagesId: [...(acc[type]?.messagesId ?? []), currentMessage.id],
-          messages: [...(acc[type]?.messages ?? []), currentMessage],
+  const groupedByTypeErrorMessages = useMemo(
+    () =>
+      messages.reduce<GroupByTypeMessages>(
+        (acc: GroupByTypeMessages, currentMessage: ErrorMessage) => {
+          const type = currentMessage.errorType == null ? 'primary' : currentMessage.errorType;
+          return {
+            ...acc,
+            [type]: {
+              messagesId: [...(acc[type]?.messagesId ?? []), currentMessage.id],
+              messages: [...(acc[type]?.messages ?? []), currentMessage],
+            },
+          };
         },
-      };
-    },
-    {} as GroupByTypeMessages
+        {} as GroupByTypeMessages
+      ),
+    [messages]
   );
 
   return (