[Cases][Case Observables] move route key down in the component tree (e…

…lastic#206449)

Fixes elastic#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.

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}

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}