Move URL state to hook

x-pack/legacy/plugins/infra/public/containers/logs/log_filter/index.ts

@@ -5,4 +5,4 @@
  */
 
 export * from './log_filter_state';
-export * from './with_log_filter_url_state';
+export * from './use_log_filter_url_state';

x-pack/legacy/plugins/infra/public/containers/logs/log_filter/use_log_filter_url_state.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useContext, useEffect } from 'react';
+import * as rt from 'io-ts';
+import { LogFilterState } from './log_filter_state';
+import { replaceStateKeyInQueryString } from '../../../utils/url_state';
+import { useUrlState } from '../../../utils/use_url_state';
+import { getEncodeDecodeFromRT } from '../../../utils/validate_url_rt';
+
+const logFilterRT = rt.union([
+  rt.type({
+    kind: rt.literal('kuery'),
+    expression: rt.string,
+  }),
+  rt.undefined,
+]);
+type LogFilterUrlState = rt.TypeOf<typeof logFilterRT>;
+
+const LOG_FILTER_URL_STATE_KEY = 'logFilter';
+
+export const useLogFilterUrlState = () => {
+  const { filterQueryAsKuery, applyLogFilterQuery } = useContext(LogFilterState.Context);
+  const [logFilterUrlState, setLogFilterUrlState] = useUrlState({
+    defaultState: filterQueryAsKuery,
+    urlStateKey: LOG_FILTER_URL_STATE_KEY,
+    writeDefaultState: true,
+    ...getEncodeDecodeFromRT(logFilterRT),
+  });
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => applyLogFilterQuery(logFilterUrlState.expression), [logFilterUrlState]);
+  useEffect(() => setLogFilterUrlState(filterQueryAsKuery), [filterQueryAsKuery]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+};
+
+export const replaceLogFilterInQueryString = (expression: string) =>
+  replaceStateKeyInQueryString<LogFilterUrlState>('logFilter', {
+    kind: 'kuery',
+    expression,
+  });

x-pack/legacy/plugins/infra/public/containers/logs/log_filter/with_log_filter_url_state.tsx

@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React, { useContext } from 'react';
-import { LogFilterState, LogFilterStateParams } from './log_filter_state';
-import { replaceStateKeyInQueryString, UrlStateContainer } from '../../../utils/url_state';
-
-type LogFilterUrlState = LogFilterStateParams['filterQueryAsKuery'];
-
-export const WithLogFilterUrlState: React.FC = () => {
-  const { filterQueryAsKuery, applyLogFilterQuery } = useContext(LogFilterState.Context);
-  return (
-    <UrlStateContainer
-      urlState={filterQueryAsKuery}
-      urlStateKey="logFilter"
-      mapToUrlState={mapToFilterQuery}
-      onChange={urlState => {
-        if (urlState) {
-          applyLogFilterQuery(urlState.expression);
-        }
-      }}
-      onInitialize={urlState => {
-        if (urlState) {
-          applyLogFilterQuery(urlState.expression);
-        }
-      }}
-    />
-  );
-};
-
-const mapToFilterQuery = (value: any): LogFilterUrlState | undefined =>
-  value?.kind === 'kuery' && typeof value.expression === 'string'
-    ? {
-        kind: value.kind,
-        expression: value.expression,
-      }
-    : undefined;
-
-export const replaceLogFilterInQueryString = (expression: string) =>
-  replaceStateKeyInQueryString<LogFilterUrlState>('logFilter', {
-    kind: 'kuery',
-    expression,
-  });

x-pack/legacy/plugins/infra/public/pages/logs/stream/page_logs_content.tsx

@@ -15,7 +15,7 @@ import { PageContent } from '../../../components/page';
 
 import { WithSummary } from '../../../containers/logs/log_summary';
 import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
-import { LogFilterState } from '../../../containers/logs/log_filter';
+import { LogFilterState, useLogFilterUrlState } from '../../../containers/logs/log_filter';
 import {
   LogFlyout as LogFlyoutState,
   WithFlyoutOptionsUrlState,
@@ -42,6 +42,9 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
     flyoutItem,
     isLoading,
   } = useContext(LogFlyoutState.Context);
+
+  useLogFilterUrlState();
+
   const { logSummaryHighlights } = useContext(LogHighlightsState.Context);
   const { applyLogFilterQuery } = useContext(LogFilterState.Context);
   return (

x-pack/legacy/plugins/infra/public/pages/logs/stream/page_providers.tsx

@@ -10,7 +10,7 @@ import { LogFlyout } from '../../../containers/logs/log_flyout';
 import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
 import { LogHighlightsState } from '../../../containers/logs/log_highlights/log_highlights';
 import { LogPositionState } from '../../../containers/logs/log_position';
-import { LogFilterState, WithLogFilterUrlState } from '../../../containers/logs/log_filter';
+import { LogFilterState } from '../../../containers/logs/log_filter';
 import { LogEntriesState } from '../../../containers/logs/log_entries';
 
 import { Source } from '../../../containers/source';
@@ -19,10 +19,7 @@ const LogFilterStateProvider: React.FC = ({ children }) => {
   const { createDerivedIndexPattern } = useContext(Source.Context);
   const derivedIndexPattern = createDerivedIndexPattern('logs');
   return (
-    <LogFilterState.Provider indexPattern={derivedIndexPattern}>
-      <WithLogFilterUrlState />
-      {children}
-    </LogFilterState.Provider>
+    <LogFilterState.Provider indexPattern={derivedIndexPattern}>{children}</LogFilterState.Provider>
   );
 };
 

x-pack/legacy/plugins/infra/public/utils/validate_url_rt.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { fold } from 'fp-ts/lib/Either';
+import { constant, identity } from 'fp-ts/lib/function';
+import { pipe } from 'fp-ts/lib/pipeable';
+import * as rt from 'io-ts';
+
+export const getEncodeDecodeFromRT = (typeRT: rt.Type<any>) => ({
+  encodeUrlState: typeRT.encode,
+  decodeUrlState: (value: unknown) =>
+    pipe(typeRT.decode(value), fold(constant(undefined), identity)),
+});