diff --git a/.changeset/plenty-gifts-watch.md b/.changeset/plenty-gifts-watch.md new file mode 100644 index 0000000000..51f97d207b --- /dev/null +++ b/.changeset/plenty-gifts-watch.md @@ -0,0 +1,7 @@ +--- +'remotedev-redux-devtools-extension': minor +'@redux-devtools/inspector-monitor': minor +--- + +Option to sort State Tree keys alphabetically +Option to disable collapsing of object keys diff --git a/extension/src/options/Options.tsx b/extension/src/options/Options.tsx index 579dd3ac41..6d84da5982 100644 --- a/extension/src/options/Options.tsx +++ b/extension/src/options/Options.tsx @@ -5,6 +5,7 @@ import AllowToRunGroup from './AllowToRunGroup'; import MiscellaneousGroup from './MiscellaneousGroup'; import ContextMenuGroup from './ContextMenuGroup'; import { Options } from './syncOptions'; +import JsonTree from './StateTree'; export interface OptionsProps { readonly options: Options; @@ -18,6 +19,7 @@ export default (props: OptionsProps) => (
+ diff --git a/extension/src/options/StateTree.tsx b/extension/src/options/StateTree.tsx new file mode 100644 index 0000000000..222d0bce3b --- /dev/null +++ b/extension/src/options/StateTree.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { OptionsProps } from './Options'; + +export default ({ options, saveOption }: OptionsProps) => { + return ( +
+ State Tree + +
+ + saveOption('sortStateTreeAlphabetically', e.target.checked) + } + /> + +
+ Property keys are sorted alphabetically +
+
+ +
+ + saveOption('disableStateTreeCollection', e.target.checked) + } + /> + +
Prevents collapsing of object keys
+
+
+ ); +}; diff --git a/extension/src/options/syncOptions.ts b/extension/src/options/syncOptions.ts index e523c598a1..ca803821c5 100644 --- a/extension/src/options/syncOptions.ts +++ b/extension/src/options/syncOptions.ts @@ -12,6 +12,8 @@ export interface Options { readonly inject: boolean; readonly urls: string; readonly showContextMenus: boolean; + readonly sortStateTreeAlphabetically: boolean; + readonly disableStateTreeCollection: boolean; } interface OldOrNewOptions { @@ -32,6 +34,8 @@ interface OldOrNewOptions { readonly inject: boolean; readonly urls: string; readonly showContextMenus: boolean; + readonly sortStateTreeAlphabetically: boolean; + readonly disableStateTreeCollection: boolean; } let options: Options | undefined; diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json index f036194908..f43bb84b1c 100644 --- a/packages/redux-devtools-inspector-monitor/package.json +++ b/packages/redux-devtools-inspector-monitor/package.json @@ -39,6 +39,7 @@ "@types/dragula": "^3.7.1", "@types/lodash": "^4.14.186", "@types/prop-types": "^15.7.5", + "@types/chrome": "^0.0.198", "dateformat": "^4.6.3", "hex-rgba": "^1.0.2", "immutable": "^4.1.0", diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx index dbc37f0695..c107c20b8d 100644 --- a/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx +++ b/packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { JSONTree } from 'react-json-tree'; import { Action } from 'redux'; @@ -6,6 +6,8 @@ import getItemString from './getItemString'; import getJsonTreeTheme from './getJsonTreeTheme'; import { TabComponentProps } from '../ActionPreview'; +const isFF = navigator.userAgent.indexOf('Firefox') !== -1; + const StateTab: React.FunctionComponent< TabComponentProps> > = ({ @@ -16,18 +18,39 @@ const StateTab: React.FunctionComponent< labelRenderer, dataTypeKey, isWideLayout, -}) => ( - - getItemString(styling, type, data, dataTypeKey, isWideLayout) - } - invertTheme={invertTheme} - hideRoot - /> -); +}) => { + const [sortObjectKeys, setSortObjectKeys] = useState(false); + const [disableCollection, setDisableCollection] = useState(false); + + useEffect(() => { + if (!chrome || !chrome.storage) return; + const storage = isFF + ? chrome.storage.local + : chrome.storage.sync || chrome.storage.local; + storage.get( + ['sortStateTreeAlphabetically', 'disableStateTreeCollection'], + function (result) { + setSortObjectKeys(!!result.sortStateTreeAlphabetically); + setDisableCollection(!!result.disableStateTreeCollection); + } + ); + }, []); + + return ( + + getItemString(styling, type, data, dataTypeKey, isWideLayout) + } + invertTheme={invertTheme} + hideRoot + sortObjectKeys={sortObjectKeys} + {...(disableCollection ? { collectionLimit: 0 } : {})} + /> + ); +}; StateTab.propTypes = { nextState: PropTypes.any.isRequired, diff --git a/packages/redux-devtools-inspector-monitor/tsconfig.json b/packages/redux-devtools-inspector-monitor/tsconfig.json index 67c88df506..545767ddf7 100644 --- a/packages/redux-devtools-inspector-monitor/tsconfig.json +++ b/packages/redux-devtools-inspector-monitor/tsconfig.json @@ -2,7 +2,8 @@ "extends": "../../tsconfig.react.base.json", "compilerOptions": { "outDir": "lib/types", - "resolveJsonModule": true + "resolveJsonModule": true, + "types": ["chrome"] }, "include": ["src"] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 26811798d3..1ff3190901 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1198,6 +1198,7 @@ importers: '@babel/preset-typescript': ^7.18.6 '@babel/runtime': ^7.19.4 '@redux-devtools/core': ^3.13.1 + '@types/chrome': ^0.0.198 '@types/dateformat': ^3.0.1 '@types/dragula': ^3.7.1 '@types/hex-rgba': ^1.0.1 @@ -1233,6 +1234,7 @@ importers: typescript: ~4.8.4 dependencies: '@babel/runtime': 7.19.4 + '@types/chrome': 0.0.198 '@types/dragula': 3.7.1 '@types/lodash': 4.14.186 '@types/prop-types': 15.7.5 @@ -22736,18 +22738,6 @@ packages: signal-exit: 3.0.7 dev: true - /ws/7.5.9: - resolution: {integrity: sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==} - engines: {node: '>=8.3.0'} - peerDependencies: - bufferutil: ^4.0.1 - utf-8-validate: ^5.0.2 - peerDependenciesMeta: - bufferutil: - optional: true - utf-8-validate: - optional: true - /ws/8.9.0: resolution: {integrity: sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==} engines: {node: '>=10.0.0'}