From 42728c21148d6f18428b09d5c34119c6d249dd15 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 6 Sep 2021 20:07:44 +0000 Subject: [PATCH] feat(extension): replace whitelist/blacklist with allowlist/denylist (#851) --- extension/README.md | 6 ++-- extension/docs/API/Arguments.md | 12 +++---- extension/docs/Recipes.md | 8 ++--- extension/src/app/api/filters.ts | 30 ++++++++-------- .../browser/extension/inject/pageScript.ts | 18 +++++++++- .../browser/extension/options/FilterGroup.tsx | 20 +++++------ .../browser/extension/options/syncOptions.ts | 34 +++++++++++++------ extension/test/app/inject/enhancer.spec.js | 2 +- packages/redux-devtools-extension/README.md | 2 +- packages/redux-devtools-extension/index.d.ts | 14 +++++++- packages/redux-devtools-utils/src/filters.ts | 32 ++++++++--------- 11 files changed, 108 insertions(+), 70 deletions(-) diff --git a/extension/README.md b/extension/README.md index 74167cce..ba9fe3b8 100644 --- a/extension/README.md +++ b/extension/README.md @@ -100,7 +100,7 @@ To specify [extension’s options](https://github.com/zalmoxisus/redux-devtools- const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ - // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize... + // Specify extension’s options like name, actionsDenylist, actionsCreators, serialize... }) : compose; @@ -143,7 +143,7 @@ import { createStore, applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; const composeEnhancers = composeWithDevTools({ - // Specify name here, actionsBlacklist, actionsCreators and other options if needed + // Specify name here, actionsDenylist, actionsCreators and other options if needed }); const store = createStore( reducer, @@ -165,7 +165,7 @@ import { devToolsEnhancer } from 'redux-devtools-extension'; const store = createStore( reducer, /* preloadedState, */ devToolsEnhancer() - // Specify name here, actionsBlacklist, actionsCreators and other options if needed + // Specify name here, actionsDenylist, actionsCreators and other options if needed ); ``` diff --git a/extension/docs/API/Arguments.md b/extension/docs/API/Arguments.md index fe632424..2284b110 100644 --- a/extension/docs/API/Arguments.md +++ b/extension/docs/API/Arguments.md @@ -240,9 +240,9 @@ const store = createStore( ); ``` -### `actionsBlacklist` / `actionsWhitelist` +### `actionsDenylist` / `actionsAllowlist` -_string or array of strings as regex_ - actions types to be hidden / shown in the monitors (while passed to the reducers). If `actionsWhitelist` specified, `actionsBlacklist` is ignored. +_string or array of strings as regex_ - actions types to be hidden / shown in the monitors (while passed to the reducers). If `actionsAllowlist` specified, `actionsDenylist` is ignored. Example: @@ -251,16 +251,16 @@ createStore( reducer, remotedev({ sendTo: 'http://localhost:8000', - actionsBlacklist: 'SOME_ACTION', - // or actionsBlacklist: ['SOME_ACTION', 'SOME_OTHER_ACTION'] - // or just actionsBlacklist: 'SOME_' to omit both + actionsDenylist: 'SOME_ACTION', + // or actionsDenylist: ['SOME_ACTION', 'SOME_OTHER_ACTION'] + // or just actionsDenylist: 'SOME_' to omit both }) ); ``` ### `predicate` -_function_ - called for every action before sending, takes `state` and `action` object, and returns `true` in case it allows sending the current data to the monitor. Use it as a more advanced version of `actionsBlacklist`/`actionsWhitelist` parameters. +_function_ - called for every action before sending, takes `state` and `action` object, and returns `true` in case it allows sending the current data to the monitor. Use it as a more advanced version of `actionsDenylist`/`actionsAllowlist` parameters. Example of usage: ```js diff --git a/extension/docs/Recipes.md b/extension/docs/Recipes.md index 5bc8e751..ecae09e1 100644 --- a/extension/docs/Recipes.md +++ b/extension/docs/Recipes.md @@ -65,13 +65,13 @@ const store = createStore( /* preloadedState, */ compose( devToolsEnhancer({ instaceID: 1, - name: 'Blacklisted', - actionsBlacklist: '...', + name: 'Denylisted', + actionsDenylist: '...', }), devToolsEnhancer({ instaceID: 2, - name: 'Whitelisted', - actionsWhitelist: '...', + name: 'Allowlisted', + actionsAllowlist: '...', }) ) ); diff --git a/extension/src/app/api/filters.ts b/extension/src/app/api/filters.ts index 37fa4ae9..9f15b9e7 100644 --- a/extension/src/app/api/filters.ts +++ b/extension/src/app/api/filters.ts @@ -5,13 +5,13 @@ import { LiftedState, PerformAction } from '@redux-devtools/instrument'; export type FilterStateValue = | 'DO_NOT_FILTER' - | 'BLACKLIST_SPECIFIC' - | 'WHITELIST_SPECIFIC'; + | 'DENYLIST_SPECIFIC' + | 'ALLOWLIST_SPECIFIC'; export const FilterState: { [K in FilterStateValue]: FilterStateValue } = { DO_NOT_FILTER: 'DO_NOT_FILTER', - BLACKLIST_SPECIFIC: 'BLACKLIST_SPECIFIC', - WHITELIST_SPECIFIC: 'WHITELIST_SPECIFIC', + DENYLIST_SPECIFIC: 'DENYLIST_SPECIFIC', + ALLOWLIST_SPECIFIC: 'ALLOWLIST_SPECIFIC', }; function isArray(arg: unknown): arg is readonly unknown[] { @@ -19,19 +19,17 @@ function isArray(arg: unknown): arg is readonly unknown[] { } interface LocalFilter { - readonly whitelist: string | undefined; - readonly blacklist: string | undefined; + readonly allowlist: string | undefined; + readonly denylist: string | undefined; } export function getLocalFilter(config: Config): LocalFilter | undefined { - if (config.actionsBlacklist || config.actionsWhitelist) { + const denylist = config.actionsDenylist ?? config.actionsBlacklist; + const allowlist = config.actionsAllowlist ?? config.actionsWhitelist; + if (denylist || allowlist) { return { - whitelist: isArray(config.actionsWhitelist) - ? config.actionsWhitelist.join('|') - : config.actionsWhitelist, - blacklist: isArray(config.actionsBlacklist) - ? config.actionsBlacklist.join('|') - : config.actionsBlacklist, + allowlist: isArray(allowlist) ? allowlist.join('|') : allowlist, + denylist: isArray(denylist) ? denylist.join('|') : denylist, }; } return undefined; @@ -56,11 +54,11 @@ export function isFiltered>( return false; } - const { whitelist, blacklist } = localFilter || window.devToolsOptions || {}; + const { allowlist, denylist } = localFilter || window.devToolsOptions || {}; const actionType = ((action as A).type || action) as string; return ( - (whitelist && !actionType.match(whitelist)) || - (blacklist && actionType.match(blacklist)) + (allowlist && !actionType.match(allowlist)) || + (denylist && actionType.match(denylist)) ); } diff --git a/extension/src/browser/extension/inject/pageScript.ts b/extension/src/browser/extension/inject/pageScript.ts index 31c413f9..eec0472e 100644 --- a/extension/src/browser/extension/inject/pageScript.ts +++ b/extension/src/browser/extension/inject/pageScript.ts @@ -72,7 +72,7 @@ let reportId: string | null | undefined; function deprecateParam(oldParam: string, newParam: string) { /* eslint-disable no-console */ console.warn( - `${oldParam} parameter is deprecated, use ${newParam} instead: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md` + `${oldParam} parameter is deprecated, use ${newParam} instead: https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md` ); /* eslint-enable no-console */ } @@ -84,8 +84,16 @@ export interface SerializeWithImmutable extends Serialize { export interface ConfigWithExpandedMaxAge { instanceId?: number; + /** + * @deprecated Use actionsDenylist instead. + */ readonly actionsBlacklist?: string | readonly string[]; + /** + * @deprecated Use actionsAllowlist instead. + */ readonly actionsWhitelist?: string | readonly string[]; + readonly actionsDenylist?: string | readonly string[]; + readonly actionsAllowlist?: string | readonly string[]; serialize?: boolean | SerializeWithImmutable; readonly serializeState?: | boolean @@ -213,6 +221,14 @@ function __REDUX_DEVTOOLS_EXTENSION__>( latency = 500, } = config; + // Deprecate actionsWhitelist and actionsBlacklist + if (config.actionsWhitelist) { + deprecateParam('actionsWhiteList', 'actionsAllowlist'); + } + if (config.actionsBlacklist) { + deprecateParam('actionsBlacklist', 'actionsDenylist'); + } + // Deprecate statesFilter and actionsFilter if (statesFilter) { deprecateParam('statesFilter', 'stateSanitizer'); diff --git a/extension/src/browser/extension/options/FilterGroup.tsx b/extension/src/browser/extension/options/FilterGroup.tsx index 4bc24536..56c050f1 100644 --- a/extension/src/browser/extension/options/FilterGroup.tsx +++ b/extension/src/browser/extension/options/FilterGroup.tsx @@ -29,8 +29,8 @@ export default ({ options, saveOption }: OptionsProps) => { id="filter-hide" name="filter" type="radio" - checked={options.filter === FilterState.BLACKLIST_SPECIFIC} - onChange={() => saveOption('filter', FilterState.BLACKLIST_SPECIFIC)} + checked={options.filter === FilterState.DENYLIST_SPECIFIC} + onChange={() => saveOption('filter', FilterState.DENYLIST_SPECIFIC)} />