Simplify state propagation

elastic · Sep 8, 2023 · 31bf214 · 31bf214
1 parent 9d4cdf5
commit 31bf214
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 29 deletions.
diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_detail.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_detail.tsx
@@ -11,13 +11,12 @@ import rison from '@kbn/rison';
 import { replaceStateKeyInQueryString } from '../../../common/url_state_storage_service';
 import { replaceMetricTimeInQueryString } from '../metrics/metric_detail/hooks/use_metrics_time';
 import { InventoryItemType } from '../../../common/inventory_models/types';
-import { AssetDetailsUrlState, RouteState } from '../../components/asset_details/types';
+import { AssetDetailsUrlState } from '../../components/asset_details/types';
 import { ASSET_DETAILS_URL_STATE_KEY } from '../../components/asset_details/constants';
 
 export const REDIRECT_NODE_DETAILS_FROM_KEY = 'from';
 export const REDIRECT_NODE_DETAILS_TO_KEY = 'to';
 export const REDIRECT_ASSET_DETAILS_KEY = 'assetDetails';
-export const REDIRECT_NODE_DETAILS_STATE_KEY = 'state';
 
 const getHostDetailSearch = (queryParams: URLSearchParams) => {
   const from = queryParams.get(REDIRECT_NODE_DETAILS_FROM_KEY);
@@ -54,22 +53,12 @@ export const RedirectToNodeDetail = () => {
   const search =
     nodeType === 'host' ? getHostDetailSearch(queryParams) : getNodeDetailSearch(queryParams);
 
-  let state: RouteState | undefined;
-  try {
-    const stateFromLocation = queryParams.get(REDIRECT_NODE_DETAILS_STATE_KEY);
-    state = stateFromLocation
-      ? (rison.decode(stateFromLocation) as unknown as RouteState)
-      : undefined;
-  } catch (err) {
-    state = undefined;
-  }
-
   return (
     <Redirect
       to={{
         pathname: `/detail/${nodeType}/${nodeId}`,
         search,
-        state,
+        state: location.state,
       }}
     />
   );

diff --git a/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.test.tsx b/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.test.tsx
@@ -26,7 +26,29 @@ const wrapper = ({ children }: { children: React.ReactNode }): JSX.Element => (
 );
 
 describe('useNodeDetailsRedirect', () => {
-  it('should return the LinkProperties', () => {
+  it('should return the LinkProperties for assetType pod', () => {
+    const { result } = renderHook(() => useNodeDetailsRedirect(), { wrapper });
+
+    const fromDateStrig = '2019-01-01T11:00:00Z';
+    const toDateStrig = '2019-01-01T12:00:00Z';
+
+    expect(
+      result.current.getNodeDetailUrl({
+        assetType: 'pod',
+        assetId: 'example-01',
+        search: {
+          from: new Date(fromDateStrig).getTime(),
+          to: new Date(toDateStrig).getTime(),
+        },
+      })
+    ).toStrictEqual({
+      app: 'metrics',
+      pathname: 'link-to/pod-detail/example-01',
+      search: { from: '1546340400000', to: '1546344000000' },
+    });
+  });
+
+  it('should return the LinkProperties for assetType host', () => {
     const { result } = renderHook(() => useNodeDetailsRedirect(), { wrapper });
 
     const fromDateStrig = '2019-01-01T11:00:00Z';
@@ -39,12 +61,17 @@ describe('useNodeDetailsRedirect', () => {
         search: {
           from: new Date(fromDateStrig).getTime(),
           to: new Date(toDateStrig).getTime(),
+          name: 'example-01',
         },
       })
     ).toStrictEqual({
       app: 'metrics',
       pathname: 'link-to/host-detail/example-01',
-      search: { from: '1546340400000', to: '1546344000000' },
+      search: {
+        from: '1546340400000',
+        to: '1546344000000',
+        assetDetails: '(name:example-01)',
+      },
     });
   });
 });
diff --git a/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.ts b/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.ts
@@ -17,7 +17,6 @@ import {
   REDIRECT_NODE_DETAILS_FROM_KEY,
   REDIRECT_NODE_DETAILS_TO_KEY,
   REDIRECT_ASSET_DETAILS_KEY,
-  REDIRECT_NODE_DETAILS_STATE_KEY,
 } from './redirect_to_node_detail';
 
 export interface MetricDetailsQueryParams {
@@ -59,22 +58,22 @@ export const useNodeDetailsRedirect = () => {
         app: 'metrics',
         pathname: `link-to/${assetType}-detail/${assetId}`,
         search: {
-          ...(assetType === 'host'
+          ...(Object.keys(additionalParams).length > 0
             ? { [REDIRECT_ASSET_DETAILS_KEY]: rison.encodeUnknown(additionalParams) }
             : undefined),
-          ...(location.pathname
-            ? {
-                [REDIRECT_NODE_DETAILS_STATE_KEY]: rison.encodeUnknown({
-                  originAppId: appId,
-                  originSearch: location.search,
-                  originPathname: location.pathname,
-                } as RouteState),
-              }
-            : undefined),
           // retrocompatibility
           ...(from ? { [REDIRECT_NODE_DETAILS_FROM_KEY]: `${from}` } : undefined),
           ...(to ? { [REDIRECT_NODE_DETAILS_TO_KEY]: `${to}` } : undefined),
         },
+        state: {
+          ...(location.pathname
+            ? ({
+                originAppId: appId,
+                originSearch: location.search,
+                originPathname: location.pathname,
+              } as RouteState)
+            : undefined),
+        },
       };
     },
     [location.pathname, appId, location.search]

diff --git a/x-pack/plugins/observability_shared/public/hooks/use_link_props.ts b/x-pack/plugins/observability_shared/public/hooks/use_link_props.ts
@@ -19,6 +19,7 @@ export interface LinkDescriptor {
   pathname?: string;
   hash?: string;
   search?: Search;
+  state?: unknown;
 }
 
 export interface LinkProps {
@@ -31,7 +32,7 @@ export interface Options {
 }
 
 export const useLinkProps = (
-  { app, pathname, hash, search }: LinkDescriptor,
+  { app, pathname, hash, search, state }: LinkDescriptor,
   options: Options = {}
 ): LinkProps => {
   validateParams({ app, pathname, hash, search });
@@ -77,7 +78,7 @@ export const useLinkProps = (
       const navigate = () => {
         if (navigateToApp) {
           const navigationPath = mergedHash ? `#${mergedHash}` : mergedPathname;
-          navigateToApp(app, { path: navigationPath ? navigationPath : undefined });
+          navigateToApp(app, { path: navigationPath ? navigationPath : undefined, state });
         }
       };
 
@@ -94,7 +95,7 @@ export const useLinkProps = (
         navigate();
       }
     };
-  }, [navigateToApp, mergedHash, mergedPathname, app, prompt]);
+  }, [prompt, navigateToApp, mergedHash, mergedPathname, app, state]);
 
   return {
     href,