[Infrastructure UI] Hosts view remove flyout state from the url after…

… the flyout is closed (#155317)

Closes #154564

## Summary

This PR removes the flyout state from the URL if the flyout is closed
and set the default state if the flyout is open again

## Testing

- Open a single host flyout and change the tab/add filter or search (do
not close the flyout yet)
- Copy the URL and verify that you see the same flyout data in a new
browser tab/window
- Close the flyout
   - Check the URL (the flyout state should not be there)
- Copy the URL and verify that you see the flyout data is not there
(flyout is still closed and when it's open it has default state
(metadata page open)
- if there are any metadata filters applied they should still be part of
the unified search bar


https://user-images.githubusercontent.com/14139027/233397203-d99fc04a-a118-43f8-a43b-6b01d34ab3b8.mov

x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_host_flyout_open_url_state.ts

@@ -25,19 +25,29 @@ export const GET_DEFAULT_TABLE_PROPERTIES = {
 const HOST_TABLE_PROPERTIES_URL_STATE_KEY = 'hostFlyoutOpen';
 
 type Action = rt.TypeOf<typeof ActionRT>;
-type SetNewHostFlyoutOpen = (newProps: Action) => void;
-
-export const useHostFlyoutOpen = (): [HostFlyoutOpen, SetNewHostFlyoutOpen] => {
-  const [urlState, setUrlState] = useUrlState<HostFlyoutOpen>({
-    defaultState: GET_DEFAULT_TABLE_PROPERTIES,
+type SetNewHostFlyoutOpen = (newProp: Action) => void;
+type SetNewHostFlyoutClose = () => void;
+
+export const useHostFlyoutOpen = (): [
+  HostFlyoutOpen,
+  SetNewHostFlyoutOpen,
+  SetNewHostFlyoutClose
+] => {
+  const [urlState, setUrlState] = useUrlState<HostFlyoutUrl>({
+    defaultState: '',
     decodeUrlState,
     encodeUrlState,
     urlStateKey: HOST_TABLE_PROPERTIES_URL_STATE_KEY,
   });
 
-  const setHostFlyoutOpen = (newProps: Action) => setUrlState({ ...urlState, ...newProps });
+  const setHostFlyoutOpen = (newProps: Action) =>
+    typeof urlState !== 'string'
+      ? setUrlState({ ...urlState, ...newProps })
+      : setUrlState({ ...GET_DEFAULT_TABLE_PROPERTIES, ...newProps });
+
+  const setFlyoutClosed = () => setUrlState('');
 
-  return [urlState, setHostFlyoutOpen];
+  return [urlState as HostFlyoutOpen, setHostFlyoutOpen, setFlyoutClosed];
 };
 
 const FlyoutTabIdRT = rt.union([rt.literal('metadata'), rt.literal('processes')]);
@@ -74,9 +84,12 @@ const HostFlyoutOpenRT = rt.type({
   metadataSearch: SearchFilterRT,
 });
 
+const HostFlyoutUrlRT = rt.union([HostFlyoutOpenRT, rt.string]);
+
+type HostFlyoutUrl = rt.TypeOf<typeof HostFlyoutUrlRT>;
 type HostFlyoutOpen = rt.TypeOf<typeof HostFlyoutOpenRT>;
 
-const encodeUrlState = HostFlyoutOpenRT.encode;
+const encodeUrlState = HostFlyoutUrlRT.encode;
 const decodeUrlState = (value: unknown) => {
-  return pipe(HostFlyoutOpenRT.decode(value), fold(constant(undefined), identity));
+  return pipe(HostFlyoutUrlRT.decode(value), fold(constant('undefined'), identity));
 };

x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx

@@ -125,9 +125,9 @@ export const useHostsTable = (nodes: SnapshotNode[], { time }: HostTableParams)
     services: { telemetry },
   } = useKibanaContextForPlugin();
 
-  const [hostFlyoutOpen, setHostFlyoutOpen] = useHostFlyoutOpen();
+  const [hostFlyoutOpen, setHostFlyoutOpen, setFlyoutClosed] = useHostFlyoutOpen();
 
-  const closeFlyout = () => setHostFlyoutOpen({ clickedItemId: '' });
+  const closeFlyout = () => setFlyoutClosed();
 
   const reportHostEntryClick = useCallback(
     ({ name, cloudProvider }: HostNodeRow['title']) => {
@@ -166,7 +166,7 @@ export const useHostsTable = (nodes: SnapshotNode[], { time }: HostTableParams)
                 clickedItemId: id,
               });
               if (id === hostFlyoutOpen.clickedItemId) {
-                setHostFlyoutOpen({ clickedItemId: '' });
+                setFlyoutClosed();
               } else {
                 setHostFlyoutOpen({ clickedItemId: id });
               }
@@ -244,7 +244,7 @@ export const useHostsTable = (nodes: SnapshotNode[], { time }: HostTableParams)
         align: 'right',
       },
     ],
-    [hostFlyoutOpen.clickedItemId, reportHostEntryClick, setHostFlyoutOpen, time]
+    [hostFlyoutOpen.clickedItemId, reportHostEntryClick, setFlyoutClosed, setHostFlyoutOpen, time]
   );
 
   return {