feat(inspector-monitor): add inverse search button

See also #476
This commit is contained in:
FaberVitale 2021-07-25 12:22:19 +02:00
parent 0af1d2b301
commit 4c8a6c928a
3 changed files with 64 additions and 10 deletions

View File

@ -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"
aria-label="Toggle visibility of noop actions"
aria-pressed={!isNoopFilterActive}
title={toggleButton.label.noop(isNoopFilterActive)}
aria-label={toggleButton.label.noop(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"
aria-label="Toggle visibility of rtk-query actions"
aria-pressed={!isRtkQueryFilterActive}
title={toggleButton.label.rtkq(isRtkQueryFilterActive)}
aria-label={toggleButton.label.rtkq(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,
};

View File

@ -8,9 +8,10 @@ const ACTION_FORM_VALUE_CHANGE =
'@@redux-devtools-inspector-monitor/ACTION_FORM_VALUE_CHANGE';
export interface ActionForm {
searchValue: string;
isNoopFilterActive: boolean;
isRtkQueryFilterActive: boolean;
readonly searchValue: string;
readonly isNoopFilterActive: 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,
},
};

View File

@ -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;
}