fix(query-bar): listen to query-history events in query-bar and open saved items COMPASS-6680 COMPASS-6681 COMPASS-6685 (#4221)

fix(query-bar): listen to query-history events in query-bar and open saved items

Author: gribnoysup

packages/compass-query-bar/src/stores/query-bar-reducer.spec.ts

@@ -4,6 +4,7 @@ import thunk from 'redux-thunk';
 import { DEFAULT_QUERY_VALUES } from '../constants/query-bar-store';
 import type { QueryProperty } from '../constants/query-properties';
 import {
+  applyFromHistory,
   applyQuery,
   changeField,
   changeSchemaFields,
@@ -174,4 +175,32 @@ describe('queryBarReducer', function () {
       expect(store.getState()).to.have.property('schemaFields').deep.eq(fields);
     });
   });
+
+  describe('applyFromHistory', function () {
+    it('should reset query to whatever was passed in the action', function () {
+      const store = createStore();
+      const newQuery = {
+        filter: { _id: 2 },
+        sort: { _id: -1 },
+      };
+
+      store.dispatch(applyFromHistory(newQuery));
+
+      expect(store.getState())
+        .to.have.nested.property('fields.filter.value')
+        .deep.eq(newQuery.filter);
+      expect(store.getState()).to.have.nested.property(
+        'fields.filter.string',
+        '{_id: 2}'
+      );
+
+      expect(store.getState())
+        .to.have.nested.property('fields.sort.value')
+        .deep.eq(newQuery.sort);
+      expect(store.getState()).to.have.nested.property(
+        'fields.sort.string',
+        '{_id: -1}'
+      );
+    });
+  });
 });

packages/compass-query-bar/src/stores/query-bar-reducer.ts

@@ -160,6 +160,7 @@ enum QueryBarActions {
   SetQuery = 'compass-query-bar/SetQuery',
   ApplyQuery = 'compass-query-bar/ApplyQuery',
   ResetQuery = 'compass-query-bar/ResetQuery',
+  ApplyFromHistory = 'compass-query-bar/ApplyFromHistory',
 }
 
 type ToggleQueryOptionsAction = {
@@ -291,6 +292,15 @@ export const openExportToLanguage = (): QueryBarThunkAction<void> => {
   };
 };
 
+type ApplyFromHistoryAction = {
+  type: QueryBarActions.ApplyFromHistory;
+  query: unknown;
+};
+
+export const applyFromHistory = (query: unknown): ApplyFromHistoryAction => {
+  return { type: QueryBarActions.ApplyFromHistory, query };
+};
+
 export const queryBarReducer: Reducer<QueryBarState> = (
   state = INITIAL_STATE,
   action
@@ -360,6 +370,18 @@ export const queryBarReducer: Reducer<QueryBarState> = (
     };
   }
 
+  if (
+    isAction<ApplyFromHistoryAction>(action, QueryBarActions.ApplyFromHistory)
+  ) {
+    return {
+      ...state,
+      fields: mapQueryToValidQueryFields({
+        ...DEFAULT_FIELD_VALUES,
+        ...(action.query ?? {}),
+      }),
+    };
+  }
+
   return state;
 };
 

packages/compass-query-bar/src/stores/query-bar-store.spec.ts

@@ -1,7 +1,9 @@
 import { expect } from 'chai';
+import { EventEmitter } from 'events';
 import { DEFAULT_QUERY_VALUES } from '../constants/query-bar-store';
 import { setQuery } from './query-bar-reducer';
 import configureStore from './query-bar-store';
+import type AppRegistry from 'hadron-app-registry';
 
 describe('QueryBarStore [Store]', function () {
   describe('getCurrentQuery', function () {
@@ -20,4 +22,25 @@ describe('QueryBarStore [Store]', function () {
       });
     });
   });
+
+  describe('when localAppRegistry emits query-history-run-query', function () {
+    it('should reset query to whatever was passed in the event', function () {
+      const localAppRegistry = new EventEmitter() as unknown as AppRegistry;
+      const initialQuery = { filter: { _id: 1 } };
+      const store = configureStore({ query: initialQuery, localAppRegistry });
+      expect(store.getCurrentQuery()).to.deep.eq({
+        ...DEFAULT_QUERY_VALUES,
+        ...initialQuery,
+      });
+      const newQuery = {
+        filter: { _id: 2 },
+        sort: { _id: -1 },
+      };
+      localAppRegistry.emit('query-history-run-query', newQuery);
+      expect(store.getCurrentQuery()).to.deep.eq({
+        ...DEFAULT_QUERY_VALUES,
+        ...newQuery,
+      });
+    });
+  });
 });

packages/compass-query-bar/src/stores/query-bar-store.ts

@@ -11,13 +11,14 @@ import {
   changeSchemaFields,
   pickValuesFromFields,
   applyFilterChange,
+  applyFromHistory,
 } from './query-bar-reducer';
 
 type QueryBarStoreOptions = {
   serverVersion: string;
   globalAppRegistry: AppRegistry;
   localAppRegistry: AppRegistry;
-  query: Record<QueryProperty, unknown>;
+  query: Partial<Record<QueryProperty, unknown>>;
 };
 
 function createStore(options: Partial<QueryBarStoreOptions> = {}) {
@@ -45,7 +46,11 @@ export function configureStore(options: Partial<QueryBarStoreOptions> = {}) {
   });
 
   localAppRegistry?.on('query-bar-change-filter', (evt: ChangeFilterEvent) => {
-    store.dispatch(applyFilterChange(evt) as any);
+    store.dispatch(applyFilterChange(evt));
+  });
+
+  localAppRegistry?.on('query-history-run-query', (query) => {
+    store.dispatch(applyFromHistory(query));
   });
 
   (store as any).getCurrentQuery = () => {

packages/compass-query-history/src/stores/favorite-list-store.js

@@ -56,6 +56,8 @@ const configureStore = (options = {}) => {
       });
     },
 
+    // TODO(COMPASS-6691): This (and probably all the other actions in this
+    // store) actually executes two times when clicking on an item in the list
     runQuery(query) {
       const existingQuery = this.state.items.find((item) => {
         return _.isEqual(comparableQuery(item), query);
@@ -67,7 +69,7 @@ const configureStore = (options = {}) => {
           screen: 'documents',
         });
       }
-      this.localAppRegistry.emit('compass:query-history:run-query', query);
+      this.localAppRegistry.emit('query-history-run-query', query);
     },
 
     getInitialState() {

packages/compass-query-history/src/stores/recent-list-store.js

@@ -108,6 +108,8 @@ const configureStore = (options = {}) => {
       });
     },
 
+    // TODO(COMPASS-6691): This (and probably all the other actions in this
+    // store) actually executes two times when clicking on an item in the list
     runQuery(query) {
       if (
         this.state.items
@@ -118,7 +120,7 @@ const configureStore = (options = {}) => {
       ) {
         track('Query History Recent Used');
       }
-      this.localAppRegistry.emit('compass:query-history:run-query', query);
+      this.localAppRegistry.emit('query-history-run-query', query);
     },
 
     copyQuery(query) {