feat(inspector-monitor): add inverse search button

See also #476

packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx

@@ -9,6 +9,20 @@ const getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] =>
     (a): a is 'Sweep' | 'Commit' => !!a
   );
 
+const toggleButton = {
+  label: {
+    rtkq(val: boolean) {
+      return val ? 'Show rtk-query actions' : 'Hide rtk-query actions';
+    },
+    noop(val: boolean) {
+      return val ? 'Show noop actions' : 'Hide noop actions';
+    },
+    invertSearch(val: boolean) {
+      return val ? 'Disable inverse search' : 'Activate inverse search';
+    },
+  },
+};
+
 interface Props {
   styling: StylingFunction;
   onSearch: (value: string) => void;
@@ -32,7 +46,8 @@ const ActionListHeader: FunctionComponent<Props> = ({
   actionForm,
   onActionFormChange,
 }) => {
-  const { isNoopFilterActive, isRtkQueryFilterActive } = actionForm;
+  const { isNoopFilterActive, isRtkQueryFilterActive, isInvertSearchActive } =
+    actionForm;
 
   return (
     <>
@@ -44,9 +59,9 @@ const ActionListHeader: FunctionComponent<Props> = ({
         />
         <div {...styling('toggleButtonWrapper')}>
           <button
-            title="Toggle visibility of noop actions"
+            title={toggleButton.label.noop(isNoopFilterActive)}
-            aria-label="Toggle visibility of noop actions"
+            aria-label={toggleButton.label.noop(isNoopFilterActive)}
-            aria-pressed={!isNoopFilterActive}
+            aria-pressed={isNoopFilterActive}
             onClick={() =>
               onActionFormChange({ isNoopFilterActive: !isNoopFilterActive })
             }
@@ -56,9 +71,9 @@ const ActionListHeader: FunctionComponent<Props> = ({
             noop
           </button>
           <button
-            title="Toggle visibility of rtk-query actions"
+            title={toggleButton.label.rtkq(isRtkQueryFilterActive)}
-            aria-label="Toggle visibility of rtk-query  actions"
+            aria-label={toggleButton.label.rtkq(isRtkQueryFilterActive)}
-            aria-pressed={!isRtkQueryFilterActive}
+            aria-pressed={isRtkQueryFilterActive}
             onClick={() =>
               onActionFormChange({
                 isRtkQueryFilterActive: !isRtkQueryFilterActive,
@@ -69,6 +84,20 @@ const ActionListHeader: FunctionComponent<Props> = ({
           >
             RTKQ
           </button>
+          <button
+            title={toggleButton.label.invertSearch(isInvertSearchActive)}
+            aria-label={toggleButton.label.invertSearch(isInvertSearchActive)}
+            aria-pressed={isInvertSearchActive}
+            onClick={() =>
+              onActionFormChange({
+                isInvertSearchActive: !isInvertSearchActive,
+              })
+            }
+            type="button"
+            {...styling('toggleButton')}
+          >
+            !
+          </button>
         </div>
       </div>
       {!hideMainButtons && (
@@ -115,6 +144,7 @@ ActionListHeader.propTypes = {
     searchValue: PropTypes.string.isRequired,
     isNoopFilterActive: PropTypes.bool.isRequired,
     isRtkQueryFilterActive: PropTypes.bool.isRequired,
+    isInvertSearchActive: PropTypes.bool.isRequired,
   }).isRequired,
   onActionFormChange: PropTypes.func.isRequired,
 };

packages/redux-devtools-inspector-monitor/src/redux.ts

@@ -8,9 +8,10 @@ const ACTION_FORM_VALUE_CHANGE =
   '@@redux-devtools-inspector-monitor/ACTION_FORM_VALUE_CHANGE';
 
 export interface ActionForm {
-  searchValue: string;
+  readonly searchValue: string;
-  isNoopFilterActive: boolean;
+  readonly isNoopFilterActive: boolean;
-  isRtkQueryFilterActive: boolean;
+  readonly isRtkQueryFilterActive: boolean;
+  readonly isInvertSearchActive: boolean;
 }
 export interface UpdateMonitorStateAction {
   type: typeof UPDATE_MONITOR_STATE;
@@ -57,6 +58,7 @@ export const DEFAULT_STATE: DevtoolsInspectorState = {
     searchValue: '',
     isNoopFilterActive: false,
     isRtkQueryFilterActive: false,
+    isInvertSearchActive: false,
   },
 };
 

packages/redux-devtools-inspector-monitor/src/utils/filters.ts

@@ -65,6 +65,24 @@ function filterOutRtkQueryActions(
     return typeof type !== 'string' || !rtkQueryRegex.test(type);
   });
 }
+
+function invertSearchResults(
+  actionIds: number[],
+  filteredActionIds: number[]
+): number[] {
+  if (
+    actionIds.length === 0 ||
+    actionIds.length === filteredActionIds.length ||
+    filteredActionIds.length === 0
+  ) {
+    return actionIds;
+  }
+
+  const filteredSet = new Set(filteredActionIds);
+
+  return actionIds.filter((actionId) => !filteredSet.has(actionId));
+}
+
 export interface FilterActionsPayload<S, A extends Action<unknown>> {
   readonly actionIds: number[];
   readonly actions: Record<number, PerformAction<A>>;
@@ -94,6 +112,10 @@ function filterActions<S, A extends Action<unknown>>({
     output = filterOutRtkQueryActions(output, actions, rtkQueryRegex);
   }
 
+  if (actionForm.isInvertSearchActive) {
+    output = invertSearchResults(actionIds, output);
+  }
+
   return output;
 }