From 0c4c8aa1634164234e6ba286b5e9cedd274065d6 Mon Sep 17 00:00:00 2001
From: Luke Gmys <11671118+lgestc@users.noreply.github.com>
Date: Wed, 15 Jan 2025 13:39:36 +0100
Subject: [PATCH] [Cases][Case Observables] move route key down in the
 component tree (#206449)

Fixes https://github.com/elastic/kibana/issues/206275

There was an issue with Case Page header not updating correctly when
navigating directly from one case to another (through similar cases
feature).

The solution for that was to add a key to the Route component for the
case view, but it is suboptimal - all the components on that page would
end up being re-rendered.

Thats why this PR moves the key to the header itself, with the same
result effectively but without re-rendering the entire page.
---
 .../shared/cases/public/components/app/routes.tsx        | 9 ++-------
 .../cases/public/components/case_view/case_view_page.tsx | 1 +
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/x-pack/platform/plugins/shared/cases/public/components/app/routes.tsx b/x-pack/platform/plugins/shared/cases/public/components/app/routes.tsx
index aee24f946eade..9f9114a729264 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/app/routes.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/app/routes.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { lazy, Suspense, useCallback } from 'react';
-import { Redirect, useLocation } from 'react-router-dom';
+import { Redirect } from 'react-router-dom';
 import { Routes, Route } from '@kbn/shared-ux-router';
 
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -45,7 +45,6 @@ const CasesRoutesComponent: React.FC<CasesRoutesProps> = ({
   const { navigateToAllCases } = useAllCasesNavigation();
   const { navigateToCaseView } = useCaseViewNavigation();
   useReadonlyHeader();
-  const location = useLocation();
 
   const onCreateCaseSuccess: CreateCaseFormProps['onSuccess'] = useCallback(
     async ({ id }) => navigateToCaseView({ detailName: id }),
@@ -81,11 +80,7 @@ const CasesRoutesComponent: React.FC<CasesRoutesProps> = ({
         </Route>
 
         {/* NOTE: current case view implementation retains some local state between renders, eg. when going from one case directly to another one. as a short term fix, we are forcing the component remount. */}
-        <Route
-          key={location.key}
-          exact
-          path={[getCaseViewWithCommentPath(basePath), getCaseViewPath(basePath)]}
-        >
+        <Route exact path={[getCaseViewWithCommentPath(basePath), getCaseViewPath(basePath)]}>
           <Suspense fallback={<EuiLoadingSpinner />}>
             <CaseViewLazy
               actionsNavigation={actionsNavigation}
diff --git a/x-pack/platform/plugins/shared/cases/public/components/case_view/case_view_page.tsx b/x-pack/platform/plugins/shared/cases/public/components/case_view/case_view_page.tsx
index 51bc2a8eb29fb..8d1a2c6c8cd08 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/case_view/case_view_page.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/case_view/case_view_page.tsx
@@ -91,6 +91,7 @@ export const CaseViewPage = React.memo<CaseViewPageProps>(
           data-test-subj="case-view-title"
           titleNode={
             <EditableTitle
+              key={caseData.id}
               isLoading={isLoading && loadingKey === 'title'}
               title={caseData.title}
               onSubmit={onSubmitTitle}