[Cases] Set breadcrumbs on update case title (#113266)

* set title on breadcrumbs on update case title * test case added
elastic · Sep 29, 2021 · fd9dd2c · fd9dd2c
1 parent 2ce47f8
commit fd9dd2c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/x-pack/plugins/cases/public/components/case_view/index.test.tsx b/x-pack/plugins/cases/public/components/case_view/index.test.tsx
@@ -47,6 +47,7 @@ const useGetCaseUserActionsMock = useGetCaseUserActions as jest.Mock;
 const useConnectorsMock = useConnectors as jest.Mock;
 const usePostPushToServiceMock = usePostPushToService as jest.Mock;
 const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
+const onCaseDataSuccessMock = jest.fn();
 
 const spacesUiApiMock = {
   redirectLegacyUrl: jest.fn().mockResolvedValue(undefined),
@@ -127,6 +128,7 @@ export const caseProps: CaseComponentProps = {
   },
   fetchCase: jest.fn(),
   updateCase: jest.fn(),
+  onCaseDataSuccess: onCaseDataSuccessMock,
 };
 
 export const caseClosedProps: CaseComponentProps = {
@@ -371,6 +373,15 @@ describe('CaseView ', () => {
     await waitFor(() => {
       expect(updateObject.updateKey).toEqual('title');
       expect(updateObject.updateValue).toEqual(newTitle);
+      expect(updateObject.onSuccess).toBeDefined();
+    });
+
+    updateObject.onSuccess(); // simulate the request has succeed
+    await waitFor(() => {
+      expect(onCaseDataSuccessMock).toHaveBeenCalledWith({
+        ...caseProps.caseData,
+        title: newTitle,
+      });
     });
   });
 

diff --git a/x-pack/plugins/cases/public/components/case_view/index.tsx b/x-pack/plugins/cases/public/components/case_view/index.tsx
@@ -83,6 +83,7 @@ export interface CaseComponentProps extends CaseViewComponentProps {
   fetchCase: UseGetCase['fetchCase'];
   caseData: Case;
   updateCase: (newCase: Case) => void;
+  onCaseDataSuccess?: (newCase: Case) => void;
 }
 
 export const CaseComponent = React.memo<CaseComponentProps>(
@@ -94,6 +95,7 @@ export const CaseComponent = React.memo<CaseComponentProps>(
     configureCasesNavigation,
     getCaseDetailHrefWithCommentId,
     fetchCase,
+    onCaseDataSuccess,
     onComponentInitialized,
     actionsNavigation,
     ruleDetailsNavigation,
@@ -315,8 +317,17 @@ export const CaseComponent = React.memo<CaseComponentProps>(
     );
 
     const onSubmitTitle = useCallback(
-      (newTitle) => onUpdateField({ key: 'title', value: newTitle }),
-      [onUpdateField]
+      (newTitle) =>
+        onUpdateField({
+          key: 'title',
+          value: newTitle,
+          onSuccess: () => {
+            if (onCaseDataSuccess) {
+              onCaseDataSuccess({ ...caseData, title: newTitle });
+            }
+          },
+        }),
+      [caseData, onUpdateField, onCaseDataSuccess]
     );
 
     const changeStatus = useCallback(
@@ -588,6 +599,7 @@ export const CaseView = React.memo(
               configureCasesNavigation={configureCasesNavigation}
               getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId}
               fetchCase={fetchCase}
+              onCaseDataSuccess={onCaseDataSuccess}
               onComponentInitialized={onComponentInitialized}
               actionsNavigation={actionsNavigation}
               ruleDetailsNavigation={ruleDetailsNavigation}

diff --git a/x-pack/plugins/observability/public/components/app/cases/case_view/index.tsx b/x-pack/plugins/observability/public/components/app/cases/case_view/index.tsx
@@ -67,7 +67,7 @@ export const CaseView = React.memo(({ caseId, subCaseId, userCanCrud }: Props) =
 
   const onCaseDataSuccess = useCallback(
     (data: Case) => {
-      if (caseTitle === null) {
+      if (caseTitle === null || caseTitle !== data.title) {
         setCaseTitle(data.title);
       }
     },

diff --git a/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx b/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx
@@ -85,7 +85,7 @@ export const CaseView = React.memo(({ caseId, subCaseId, userCanCrud }: Props) =
 
   const onCaseDataSuccess = useCallback(
     (data: Case) => {
-      if (spyState.caseTitle === undefined) {
+      if (spyState.caseTitle === undefined || spyState.caseTitle !== data.title) {
         setSpyState({ caseTitle: data.title });
       }
     },