Skip to content

Commit c2af254

Browse files
thompsonglthompsongl
committed
cases status useCallback
1 parent aef2787 commit c2af254

2 files changed

Lines changed: 61 additions & 51 deletions

File tree

  • x-pack/plugins/security_solution/public/cases/components

‎x-pack/plugins/security_solution/public/cases/components/case_status/index.tsx‎

Lines changed: 54 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7-
import React from 'react';
7+
import React, { useCallback } from 'react';
88
import styled, { css } from 'styled-components';
99
import {
1010
EuiBadge,
@@ -62,57 +62,62 @@ const CaseStatusComp: React.FC<CaseStatusProps> = ({
6262
title,
6363
toggleStatusCase,
6464
value,
65-
}) => (
66-
<EuiFlexGroup gutterSize="l" justifyContent="flexEnd">
67-
<EuiFlexItem grow={false}>
68-
<MyDescriptionList compressed>
69-
<EuiFlexGroup>
70-
<EuiFlexItem grow={false}>
71-
<EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
72-
<EuiDescriptionListDescription>
73-
<EuiBadge color={badgeColor} data-test-subj="case-view-status">
74-
{status}
75-
</EuiBadge>
76-
</EuiDescriptionListDescription>
65+
}) => {
66+
const handleToggleStatusCase = useCallback(() => {
67+
toggleStatusCase(!isSelected);
68+
}, [toggleStatusCase, isSelected]);
69+
return (
70+
<EuiFlexGroup gutterSize="l" justifyContent="flexEnd">
71+
<EuiFlexItem grow={false}>
72+
<MyDescriptionList compressed>
73+
<EuiFlexGroup>
74+
<EuiFlexItem grow={false}>
75+
<EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
76+
<EuiDescriptionListDescription>
77+
<EuiBadge color={badgeColor} data-test-subj="case-view-status">
78+
{status}
79+
</EuiBadge>
80+
</EuiDescriptionListDescription>
81+
</EuiFlexItem>
82+
<EuiFlexItem>
83+
<EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
84+
<EuiDescriptionListDescription>
85+
<FormattedRelativePreferenceDate data-test-subj={dataTestSubj} value={value} />
86+
</EuiDescriptionListDescription>
87+
</EuiFlexItem>
88+
</EuiFlexGroup>
89+
</MyDescriptionList>
90+
</EuiFlexItem>
91+
<EuiFlexItem grow={false}>
92+
<EuiFlexGroup gutterSize="l" alignItems="center">
93+
<EuiFlexItem>
94+
<EuiButtonEmpty data-test-subj="case-refresh" iconType="refresh" onClick={onRefresh}>
95+
{i18n.CASE_REFRESH}
96+
</EuiButtonEmpty>
7797
</EuiFlexItem>
7898
<EuiFlexItem>
79-
<EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
80-
<EuiDescriptionListDescription>
81-
<FormattedRelativePreferenceDate data-test-subj={dataTestSubj} value={value} />
82-
</EuiDescriptionListDescription>
99+
<EuiButton
100+
data-test-subj="toggle-case-status"
101+
isDisabled={disabled}
102+
iconType={icon}
103+
isLoading={isLoading}
104+
fill={isSelected}
105+
onClick={handleToggleStatusCase}
106+
>
107+
{buttonLabel}
108+
</EuiButton>
109+
</EuiFlexItem>
110+
<EuiFlexItem grow={false}>
111+
<CaseViewActions
112+
caseData={caseData}
113+
currentExternalIncident={currentExternalIncident}
114+
disabled={disabled}
115+
/>
83116
</EuiFlexItem>
84117
</EuiFlexGroup>
85-
</MyDescriptionList>
86-
</EuiFlexItem>
87-
<EuiFlexItem grow={false}>
88-
<EuiFlexGroup gutterSize="l" alignItems="center">
89-
<EuiFlexItem>
90-
<EuiButtonEmpty data-test-subj="case-refresh" iconType="refresh" onClick={onRefresh}>
91-
{i18n.CASE_REFRESH}
92-
</EuiButtonEmpty>
93-
</EuiFlexItem>
94-
<EuiFlexItem>
95-
<EuiButton
96-
data-test-subj="toggle-case-status"
97-
isDisabled={disabled}
98-
iconType={icon}
99-
isLoading={isLoading}
100-
fill={isSelected}
101-
onClick={() => toggleStatusCase(!isSelected)}
102-
>
103-
{buttonLabel}
104-
</EuiButton>
105-
</EuiFlexItem>
106-
<EuiFlexItem grow={false}>
107-
<CaseViewActions
108-
caseData={caseData}
109-
currentExternalIncident={currentExternalIncident}
110-
disabled={disabled}
111-
/>
112-
</EuiFlexItem>
113-
</EuiFlexGroup>
114-
</EuiFlexItem>
115-
</EuiFlexGroup>
116-
);
118+
</EuiFlexItem>
119+
</EuiFlexGroup>
120+
);
121+
};
117122

118123
export const CaseStatus = React.memo(CaseStatusComp);

‎x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,11 @@ export const CaseComponent = React.memo<CaseProps>(
307307
[allCasesLink]
308308
);
309309

310+
const isSelected = useMemo(() => caseStatusData.isSelected, [caseStatusData]);
311+
const handleToggleStatusCase = useCallback(() => {
312+
toggleStatusCase(!isSelected);
313+
}, [toggleStatusCase, isSelected]);
314+
310315
return (
311316
<>
312317
<HeaderWrapper>
@@ -330,7 +335,7 @@ export const CaseComponent = React.memo<CaseProps>(
330335
disabled={!userCanCrud}
331336
isLoading={isLoading && updateKey === 'status'}
332337
onRefresh={handleRefresh}
333-
toggleStatusCase={() => toggleStatusCase(!caseStatusData.isSelected)}
338+
toggleStatusCase={handleToggleStatusCase}
334339
{...caseStatusData}
335340
/>
336341
</HeaderPage>
@@ -364,7 +369,7 @@ export const CaseComponent = React.memo<CaseProps>(
364369
isDisabled={!userCanCrud}
365370
isLoading={isLoading && updateKey === 'status'}
366371
fill={caseStatusData.isSelected}
367-
onClick={() => toggleStatusCase(!caseStatusData.isSelected)}
372+
onClick={handleToggleStatusCase}
368373
>
369374
{caseStatusData.buttonLabel}
370375
</EuiButton>

0 commit comments

Comments
 (0)