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();
- 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();
+ const className =
+ wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('className') ??
+ '';
+ expect(className.includes('euiButton--primary')).toBeTruthy();
+ });
- wrapper = mount();
- 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();
+ 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();
+ const className =
+ wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('className') ??
+ '';
+ expect(className.includes('euiButton--warning')).toBeTruthy();
+ });
- wrapper = mount();
- 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();
+ 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:
{'we have two messages'}
,
- errorType: 'danger' as 'primary' | 'success' | 'warning' | 'danger',
+ errorType: 'danger',
},
],
};
@@ -172,7 +172,7 @@ describe('CaseCallOut ', () => {
id: 'message-one',
title: 'title one',
description: {'we have two messages'}
,
- errorType: 'warning' as 'primary' | 'success' | 'warning' | 'danger',
+ errorType: 'warning',
},
],
};
@@ -197,7 +197,7 @@ describe('CaseCallOut ', () => {
id: 'message-one',
title: 'title one',
description: {'we have two messages'}
,
- 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(
- (acc, id) => ({
- ...acc,
- [id]: false,
- }),
- {}
+
+ const caseMessages = useMemo(() => getMessages('case'), [getMessages]);
+ const dismissedCallouts = useMemo(
+ () =>
+ caseMessages.reduce(
+ (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(
- (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(
+ (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 (