feat(search): add search logic and refactor monitor state shape

packages/redux-devtools-rtk-query-inspector-monitor/demo/package.json

@@ -18,7 +18,8 @@
     "react-scripts": "4.0.2",
     "redux": "^4.0.5",
     "redux-devtools-themes": "^1.0.0",
-    "react-json-tree": "^0.15.0"
+    "react-json-tree": "^0.15.0",
+    "lodash.debounce": "^4.0.8"
   },
   "devDependencies": {
     "@types/react": "17.0.0",

packages/redux-devtools-rtk-query-inspector-monitor/package.json

@@ -46,7 +46,8 @@
     "prop-types": "^15.7.2",
     "redux-devtools-themes": "^1.0.0",
     "devui": "^1.0.0-8",
-    "react-json-tree": "^0.15.0"
+    "react-json-tree": "^0.15.0",
+    "lodash.debounce": "^4.0.8"
   },
   "devDependencies": {
     "@redux-devtools/core": "^3.9.0",

packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspector.tsx

@@ -3,16 +3,20 @@ import { AnyAction, Dispatch, Action } from 'redux';
 import { LiftedAction, LiftedState } from '@redux-devtools/core';
 import * as themes from 'redux-devtools-themes';
 import { Base16Theme } from 'react-base16-styling';
-import { QueryInfo, RtkQueryInspectorMonitorState } from './types';
+import {
+  QueryFormValues,
+  QueryInfo,
+  RtkQueryInspectorMonitorState,
+} from './types';
 import { createInspectorSelectors, computeSelectorSource } from './selectors';
-import { selectQueryKey } from './reducers';
+import { changeQueryFormValues, selectQueryKey } from './reducers';
 import { QueryList } from './components/QueryList';
 import { StyleUtils } from './styles/createStylingFromTheme';
 import { QueryForm } from './components/QueryForm';
 import { QueryPreview } from './components/QueryPreview';
 
 type SelectorsSource<S> = {
-  currentState: S | null;
+  userState: S | null;
   monitorState: RtkQueryInspectorMonitorState;
 };
 
@@ -47,7 +51,7 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends Component<
     };
   }
 
-  static wideLayout = 500;
+  static wideLayout = 650;
 
   static getDerivedStateFromProps(
     props: RtkQueryInspectorProps<unknown, Action<unknown>>,
@@ -80,18 +84,22 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends Component<
     }
   };
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.updateSizeMode();
 
     this.isWideIntervalRef = setInterval(this.updateSizeMode, 200);
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     if (this.isWideIntervalRef) {
       clearTimeout(this.isWideIntervalRef as any);
     }
   }
 
+  handleQueryFormValuesChange = (values: Partial<QueryFormValues>): void => {
+    this.props.dispatch(changeQueryFormValues(values) as AnyAction);
+  };
+
   handleSelectQuery = (queryInfo: QueryInfo): void => {
     this.props.dispatch(selectQueryKey(queryInfo) as AnyAction);
   };
@@ -102,7 +110,7 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends Component<
       styleUtils: { styling },
     } = this.props;
     const apiStates = this.selectors.selectApiStates(selectorsSource);
-    const allSortedQueries = this.selectors.selectAllSortedQueries(
+    const allVisibleQueries = this.selectors.selectAllVisbileQueries(
       selectorsSource
     );
 
@@ -112,7 +120,7 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends Component<
 
     console.log('inspector', {
       apiStates,
-      allSortedQueries,
+      allVisibleQueries,
       selectorsSource,
       currentQueryInfo,
     });
@@ -129,14 +137,12 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends Component<
         >
           <QueryForm
             dispatch={this.props.dispatch}
-            queryComparator={selectorsSource.monitorState.queryComparator}
-            isAscendingQueryComparatorOrder={
-              selectorsSource.monitorState.isAscendingQueryComparatorOrder
-            }
+            values={selectorsSource.monitorState.queryForm.values}
+            onFormValuesChange={this.handleQueryFormValuesChange}
           />
           <QueryList
             onSelectQuery={this.handleSelectQuery}
-            queryInfos={allSortedQueries}
+            queryInfos={allVisibleQueries}
             selectedQueryKey={selectorsSource.monitorState.selectedQueryKey}
           />
         </div>

packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryForm.tsx

@@ -1,19 +1,20 @@
-import React, { ReactNode, FormEvent, MouseEvent } from 'react';
-import { RtkQueryInspectorMonitorState } from '../types';
+import React, { ReactNode, FormEvent, MouseEvent, ChangeEvent } from 'react';
+import { QueryFormValues } from '../types';
 import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { Select } from 'devui';
+import { SelectOption } from '../types';
 import { AnyAction } from 'redux';
+import debounce from 'lodash.debounce';
 import { sortQueryOptions, QueryComparators } from '../utils/comparators';
-import {
-  changeIsAscendingQueryComparatorOrder,
-  changeQueryComparator,
-} from '../reducers';
-export interface QueryFormProps
-  extends Pick<
-    RtkQueryInspectorMonitorState,
-    'isAscendingQueryComparatorOrder' | 'queryComparator'
-  > {
+
+export interface QueryFormProps {
   dispatch: (action: AnyAction) => void;
+  values: QueryFormValues;
+  onFormValuesChange: (values: Partial<QueryFormValues>) => void;
+}
+
+interface QueryFormState {
+  searchValue: string;
 }
 
 const ascId = 'rtk-query-rb-asc';
@@ -23,37 +24,71 @@ const searchId = 'rtk-query-search-query';
 
 const searchPlaceholder = 'filter query...';
 
-export class QueryForm extends React.PureComponent<QueryFormProps> {
+export class QueryForm extends React.PureComponent<
+  QueryFormProps,
+  QueryFormState
+> {
+  constructor(props: QueryFormProps) {
+    super(props);
+
+    this.state = {
+      searchValue: props.values.searchValue,
+    };
+  }
+
+  inputSearchRef = React.createRef<HTMLInputElement>();
+
   handleSubmit = (evt: FormEvent<HTMLFormElement>): void => {
     evt.preventDefault();
   };
 
   handleButtonGroupClick = ({ target }: MouseEvent<HTMLElement>): void => {
-    const { isAscendingQueryComparatorOrder: isAsc, dispatch } = this.props;
+    const {
+      values: { isAscendingQueryComparatorOrder: isAsc },
+      onFormValuesChange,
+    } = this.props;
 
     const targetId = (target as HTMLElement)?.id ?? null;
 
     if (targetId === ascId && !isAsc) {
-      dispatch(changeIsAscendingQueryComparatorOrder(true));
+      onFormValuesChange({ isAscendingQueryComparatorOrder: true });
     } else if (targetId === descId && isAsc) {
-      this.props.dispatch(changeIsAscendingQueryComparatorOrder(false));
+      onFormValuesChange({ isAscendingQueryComparatorOrder: false });
     }
   };
 
-  handleSelectComparator = (option: { value: string }): void => {
-    const { dispatch } = this.props;
-
+  handleSelectComparator = (
+    option: SelectOption<QueryComparators> | undefined | null
+  ): void => {
     if (typeof option?.value === 'string') {
-      dispatch(changeQueryComparator(option.value as QueryComparators));
+      this.props.onFormValuesChange({ queryComparator: option.value });
     }
   };
 
-  getSelectedOption = (option: { value: string }): string => option?.value;
+  restoreCaretPosition = (start: number | null, end: number | null): void => {
+    window.requestAnimationFrame(() => {
+      if (this.inputSearchRef.current) {
+        this.inputSearchRef.current.selectionStart = start;
+        this.inputSearchRef.current.selectionEnd = end;
+      }
+    });
+  };
+
+  invalidateSearchValueFromProps = debounce(() => {
+    this.props.onFormValuesChange({
+      searchValue: this.state.searchValue,
+    });
+  }, 150);
+
+  handleSearchChange = (evt: ChangeEvent<HTMLInputElement>): void => {
+    const searchValue = evt.target.value.trim();
+    this.setState({ searchValue });
+    this.invalidateSearchValueFromProps();
+  };
 
   render(): ReactNode {
     const {
-      isAscendingQueryComparatorOrder: isAsc,
-      queryComparator,
+      values: { isAscendingQueryComparatorOrder: isAsc, queryComparator },
     } = this.props;
 
     const isDesc = !isAsc;
@@ -72,24 +107,25 @@ export class QueryForm extends React.PureComponent<QueryFormProps> {
                   filter query
                 </label>
                 <input
+                  ref={this.inputSearchRef}
                   type="search"
+                  value={this.state.searchValue}
+                  onChange={this.handleSearchChange}
                   placeholder={searchPlaceholder}
                   {...styling('querySearch')}
                 />
               </div>
               <div {...styling('sortBySection')}>
                 <label htmlFor={selectId}>Sort by</label>
-                <Select
+                <Select<SelectOption<QueryComparators>>
                   id={selectId}
                   isSearchable={false}
-                  openOuterUp
-                  theme={base16Theme}
+                  theme={base16Theme as any}
                   value={sortQueryOptions.find(
                     (opt) => opt?.value === queryComparator
                   )}
                   options={sortQueryOptions}
                   onChange={this.handleSelectComparator}
-                  selectOption={this.getSelectedOption}
                 />
                 <div
                   tabIndex={0}

packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreview.tsx

@@ -68,7 +68,7 @@ export class QueryPreview extends React.PureComponent<QueryPreviewProps> {
                   <li>{`loaded at: ${latestFetch}`}</li>
                   <li>{`requested at: ${startedAt}`}</li>
                 </ul>
-                <div style={{ padding: '1em' }}>
+                <div {...styling('treeWrapper')}>
                   <JSONTree
                     data={data}
                     labelRenderer={this.labelRenderer}

packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts

@@ -1,12 +1,21 @@
 import { Action, AnyAction } from 'redux';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { RtkQueryInspectorProps } from './RtkQueryInspector';
-import { QueryInfo, RtkQueryInspectorMonitorState } from './types';
+import {
+  QueryInfo,
+  RtkQueryInspectorMonitorState,
+  QueryFormValues,
+} from './types';
 import { QueryComparators } from './utils/comparators';
 
 const initialState: RtkQueryInspectorMonitorState = {
-  queryComparator: QueryComparators.fulfilledTimeStamp,
-  isAscendingQueryComparatorOrder: false,
+  queryForm: {
+    values: {
+      queryComparator: QueryComparators.fulfilledTimeStamp,
+      isAscendingQueryComparatorOrder: false,
+      searchValue: '',
+    },
+  },
   selectedQueryKey: null,
 };
 
@@ -14,14 +23,11 @@ const monitorSlice = createSlice({
   name: 'rtk-query-monitor',
   initialState,
   reducers: {
-    changeQueryComparator(state, action: PayloadAction<QueryComparators>) {
-      state.queryComparator = action.payload;
-    },
-    changeIsAscendingQueryComparatorOrder(
+    changeQueryFormValues(
       state,
-      action: PayloadAction<boolean>
+      action: PayloadAction<Partial<QueryFormValues>>
     ) {
-      state.isAscendingQueryComparatorOrder = !!action.payload;
+      state.queryForm.values = { ...state.queryForm.values, ...action.payload };
     },
     selectQueryKey(
       state,
@@ -45,8 +51,4 @@ export default function reducer<S, A extends Action<unknown>>(
   return output;
 }
 
-export const {
-  changeIsAscendingQueryComparatorOrder,
-  changeQueryComparator,
-  selectQueryKey,
-} = monitorSlice.actions;
+export const { selectQueryKey, changeQueryFormValues } = monitorSlice.actions;

packages/redux-devtools-rtk-query-inspector-monitor/src/selectors.ts

@@ -1,18 +1,14 @@
 import { Action, createSelector, Selector } from '@reduxjs/toolkit';
 import { RtkQueryInspectorProps } from './RtkQueryInspector';
-import { QueryInfo, RtkQueryInspectorMonitorState } from './types';
+import { QueryInfo, SelectorsSource } from './types';
 import { Comparator, queryComparators } from './utils/comparators';
+import { escapeRegExpSpecialCharacter } from './utils/regexp';
 import {
   getApiStatesOf,
   extractAllApiQueries,
   flipComparator,
 } from './utils/rtk-query';
 
-type SelectorsSource<S> = {
-  currentState: S | null;
-  monitorState: RtkQueryInspectorMonitorState;
-};
-
 type InspectorSelector<S, Output> = Selector<SelectorsSource<S>, Output>;
 
 export function computeSelectorSource<S, A extends Action<unknown>>(
@@ -21,16 +17,16 @@ export function computeSelectorSource<S, A extends Action<unknown>>(
 ): SelectorsSource<S> {
   const { computedStates, currentStateIndex, monitorState } = props;
 
-  const currentState =
+  const userState =
     computedStates.length > 0 ? computedStates[currentStateIndex].state : null;
 
   if (
     !previous ||
-    previous.currentState !== currentState ||
+    previous.userState !== userState ||
     previous.monitorState !== monitorState
   ) {
     return {
-      currentState,
+      userState,
       monitorState,
     };
   }
@@ -48,19 +44,20 @@ export interface InspectorSelectors<S> {
     S,
     ReturnType<typeof extractAllApiQueries>
   >;
-  readonly selectAllSortedQueries: InspectorSelector<S, QueryInfo[]>;
+  readonly selectAllVisbileQueries: InspectorSelector<S, QueryInfo[]>;
   readonly selectorCurrentQueryInfo: InspectorSelector<S, QueryInfo | null>;
+  readonly selectSearchQueryRegex: InspectorSelector<S, RegExp | null>;
 }
 
 export function createInspectorSelectors<S>(): InspectorSelectors<S> {
   const selectQueryComparator = ({
     monitorState,
   }: SelectorsSource<S>): Comparator<QueryInfo> => {
-    return queryComparators[monitorState.queryComparator];
+    return queryComparators[monitorState.queryForm.values.queryComparator];
   };
 
   const selectApiStates = createSelector(
-    ({ currentState }: SelectorsSource<S>) => currentState,
+    ({ userState }: SelectorsSource<S>) => userState,
     getApiStatesOf
   );
   const selectAllQueries = createSelector(
@@ -68,21 +65,35 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
     extractAllApiQueries
   );
 
-  const selectAllSortedQueries = createSelector(
+  const selectSearchQueryRegex = createSelector(
+    ({ monitorState }: SelectorsSource<S>) =>
+      monitorState.queryForm.values.searchValue,
+    (searchValue) => {
+      if (searchValue.length >= 3) {
+        return new RegExp(escapeRegExpSpecialCharacter(searchValue), 'i');
+      }
+      return null;
+    }
+  );
+
+  const selectAllVisbileQueries = createSelector(
     [
       selectQueryComparator,
       selectAllQueries,
       ({ monitorState }: SelectorsSource<S>) =>
-        monitorState.isAscendingQueryComparatorOrder,
+        monitorState.queryForm.values.isAscendingQueryComparatorOrder,
+      selectSearchQueryRegex,
     ],
-    (comparator, queryList, isAscending) => {
-      console.log({ comparator, queryList, isAscending });
+    (comparator, queryList, isAscending, searchRegex) => {
+      const filteredList = searchRegex
+        ? queryList.filter((queryInfo) => searchRegex.test(queryInfo.queryKey))
+        : queryList.slice();
 
       const computedComparator = isAscending
         ? comparator
         : flipComparator(comparator);
 
-      return queryList.slice().sort(computedComparator);
+      return filteredList.sort(computedComparator);
     }
   );
 
@@ -109,7 +120,8 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
     selectQueryComparator,
     selectApiStates,
     selectAllQueries,
-    selectAllSortedQueries,
+    selectAllVisbileQueries,
+    selectSearchQueryRegex,
     selectorCurrentQueryInfo,
   };
 }

packages/redux-devtools-rtk-query-inspector-monitor/src/styles/createStylingFromTheme.ts

@@ -52,6 +52,7 @@ const getSheetFromColorMap = (map: ColorMap) => ({
   inspector: {
     display: 'flex',
     flexFlow: 'column nowrap',
+    overflow: 'hidden',
     width: '100%',
     height: '100%',
     'font-family': 'monaco, Consolas, "Lucida Console", monospace',
@@ -253,6 +254,8 @@ const getSheetFromColorMap = (map: ColorMap) => ({
 
   queryPreview: {
     flex: '1 1 50%',
+    overflowX: 'hidden',
+    oveflowY: 'auto',
     display: 'flex',
     'flex-direction': 'column',
     'overflow-y': 'hidden',
@@ -291,6 +294,12 @@ const getSheetFromColorMap = (map: ColorMap) => ({
   treeItemKey: {
     color: map.TEXT_PLACEHOLDER_COLOR,
   },
+
+  treeWrapper: {
+    overflowX: 'auto',
+    overflowY: 'auto',
+    padding: '1em',
+  },
 });
 
 let themeSheet: StyleSheet;

packages/redux-devtools-rtk-query-inspector-monitor/src/types.ts

@@ -6,10 +6,16 @@ import { Action } from 'redux';
 import * as themes from 'redux-devtools-themes';
 import { QueryComparators } from './utils/comparators';
 
-export interface RtkQueryInspectorMonitorState {
+export interface QueryFormValues {
   queryComparator: QueryComparators;
   isAscendingQueryComparatorOrder: boolean;
-  selectedQueryKey: Pick<QueryInfo, 'reducerPath' | 'queryKey'> | null;
+  searchValue: string;
+}
+export interface RtkQueryInspectorMonitorState {
+  readonly queryForm: {
+    values: QueryFormValues;
+  };
+  readonly selectedQueryKey: Pick<QueryInfo, 'reducerPath' | 'queryKey'> | null;
 }
 
 export interface RtkQueryInspectorMonitorProps<S, A extends Action<unknown>>
@@ -63,3 +69,13 @@ export interface ApiInfo {
   reducerPath: string;
   apiState: RtkQueryApiState;
 }
+
+export interface SelectOption<T = string> {
+  label: string;
+  value: T;
+}
+
+export interface SelectorsSource<S> {
+  userState: S | null;
+  monitorState: RtkQueryInspectorMonitorState;
+}

packages/redux-devtools-rtk-query-inspector-monitor/src/utils/comparators.ts

@@ -1,5 +1,5 @@
 import { QueryStatus } from '@reduxjs/toolkit/dist/query';
-import { QueryInfo } from '../types';
+import { QueryInfo, SelectOption } from '../types';
 
 export interface Comparator<T> {
   (a: T, b: T): number;
@@ -12,7 +12,7 @@ export enum QueryComparators {
   endpointName = 'endpointName',
 }
 
-export const sortQueryOptions: { label: string; value: string }[] = [
+export const sortQueryOptions: SelectOption<QueryComparators>[] = [
   { label: 'fulfilledTimeStamp', value: QueryComparators.fulfilledTimeStamp },
   { label: 'query key', value: QueryComparators.queryKey },
   { label: 'status ', value: QueryComparators.status },

packages/redux-devtools-rtk-query-inspector-monitor/src/utils/regexp.ts

@@ -0,0 +1,4 @@
+// https://stackoverflow.com/a/9310752
+export function escapeRegExpSpecialCharacter(text: string): string {
+  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+}