use observables to handle filter updates

elastic · Mar 12, 2020 · 7a8ab62 · 7a8ab62
1 parent fb55a92
commit 7a8ab62
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/mocks.ts b/x-pack/plugins/endpoint/public/applications/endpoint/mocks.ts
@@ -13,9 +13,13 @@ type DataMock = Omit<DataPublicStartMock, 'indexPatterns' | 'query'> & {
   indexPatterns: Omit<DataPublicStartMock['indexPatterns'], 'getFieldsForWildcard'> & {
     getFieldsForWildcard: jest.Mock;
   };
+  // We can't Omit (override) 'query' here because FilterManager is a class not an interface.
+  // Because of this, wherever FilterManager is used tsc expects some FilterManager private fields
+  // like filters, updated$, fetch$ to be part of the type. Omit removes these private fields when used.
   query: DataPublicStartMock['query'] & {
     filterManager: {
       setFilters: jest.Mock;
+      getUpdates$: jest.Mock;
     };
   };
   ui: DataPublicStartMock['ui'] & {
@@ -31,6 +35,15 @@ export const depsStartMock: () => DepsStartMock = () => {
   const dataMock: DataMock = (dataPluginMock.createStartContract() as unknown) as DataMock;
   dataMock.indexPatterns.getFieldsForWildcard = jest.fn();
   dataMock.query.filterManager.setFilters = jest.fn();
+  dataMock.query.filterManager.getUpdates$ = jest.fn(() => {
+    return {
+      subscribe: jest.fn(() => {
+        return {
+          unsubscribe: jest.fn(),
+        };
+      }),
+    };
+  }) as DataMock['query']['filterManager']['getUpdates$'];
   dataMock.ui.SearchBar = jest.fn();
 
   return {

diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index_search_bar.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index_search_bar.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { memo, useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import { encode, RisonValue } from 'rison-node';
-import { Query, TimeRange, Filter } from 'src/plugins/data/public';
+import { Query, TimeRange } from 'src/plugins/data/public';
 import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 import { urlFromQueryParams } from './url_from_query_params';
 import { useAlertListSelector } from './hooks/use_alerts_selector';
@@ -29,22 +29,24 @@ export const AlertIndexSearchBar = memo(() => {
     query: { filterManager },
   } = kibanaContext.services.data;
 
-  // Update the the filters in filterManager when the filters url value (searchBarFilters) changes
   useEffect(() => {
+    // Update the the filters in filterManager when the filters url value (searchBarFilters) changes
     filterManager.setFilters(searchBarFilters);
-  }, [filterManager, searchBarFilters]);
 
-  const onFiltersUpdated = useCallback(
-    (filters: Filter[]) => {
-      history.push(
-        urlFromQueryParams({
-          ...queryParams,
-          filters: encode((filters as unknown) as RisonValue),
-        })
-      );
-    },
-    [queryParams, history]
-  );
+    const filterSubscription = filterManager.getUpdates$().subscribe({
+      next: () => {
+        history.push(
+          urlFromQueryParams({
+            ...queryParams,
+            filters: encode((filterManager.getFilters() as unknown) as RisonValue),
+          })
+        );
+      },
+    });
+    return () => {
+      filterSubscription.unsubscribe();
+    };
+  }, [filterManager, history, queryParams, searchBarFilters]);
 
   const onQuerySubmit = useCallback(
     (params: { dateRange: TimeRange; query?: Query }) => {
@@ -71,7 +73,6 @@ export const AlertIndexSearchBar = memo(() => {
           dateRangeFrom={searchBarDateRange.from}
           dateRangeTo={searchBarDateRange.to}
           onQuerySubmit={onQuerySubmit}
-          onFiltersUpdated={onFiltersUpdated}
           showFilterBar={true}
           showDatePicker={true}
           showQueryBar={true}