feature(redux-devtools-inspector-monitor): add option to sort state tree alphabetically and/or disable collections

Author: Kent Kwee

.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

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) => (
   <div>
     <EditorGroup {...props} />
     <FilterGroup {...props} />
+    <JsonTree {...props} />
     <AllowToRunGroup {...props} />
     <MiscellaneousGroup {...props} />
     <ContextMenuGroup {...props} />

extension/src/options/StateTree.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { OptionsProps } from './Options';
+
+export default ({ options, saveOption }: OptionsProps) => {
+  return (
+    <fieldset className="option-group">
+      <legend className="option-group__title">State Tree</legend>
+
+      <div className="option option_type_checkbox">
+        <input
+          className="option__element"
+          id="sortStateTreeAlphabetically"
+          type="checkbox"
+          checked={options.sortStateTreeAlphabetically}
+          onChange={(e) =>
+            saveOption('sortStateTreeAlphabetically', e.target.checked)
+          }
+        />
+        <label className="option__label" htmlFor="sortStateTreeAlphabetically">
+          Sort State Tree alphabetically
+        </label>
+        <div className="option__hint">
+          Property keys are sorted alphabetically
+        </div>
+      </div>
+
+      <div className="option option_type_checkbox">
+        <input
+          className="option__element"
+          id="disableStateTreeCollection"
+          type="checkbox"
+          checked={options.disableStateTreeCollection}
+          onChange={(e) =>
+            saveOption('disableStateTreeCollection', e.target.checked)
+          }
+        />
+        <label className="option__label" htmlFor="disableStateTreeCollection">
+          Disable State Tree Collection
+        </label>
+        <div className="option__hint">Prevents collapsing of object keys</div>
+      </div>
+    </fieldset>
+  );
+};

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;

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",

packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx

@@ -1,11 +1,13 @@
-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';
 import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
 import { TabComponentProps } from '../ActionPreview';
 
+const isFF = navigator.userAgent.indexOf('Firefox') !== -1;
+
 const StateTab: React.FunctionComponent<
   TabComponentProps<any, Action<unknown>>
 > = ({
@@ -16,18 +18,39 @@ const StateTab: React.FunctionComponent<
   labelRenderer,
   dataTypeKey,
   isWideLayout,
-}) => (
-  <JSONTree
-    labelRenderer={labelRenderer}
-    theme={getJsonTreeTheme(base16Theme)}
-    data={nextState}
-    getItemString={(type, data) =>
-      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 (
+    <JSONTree
+      labelRenderer={labelRenderer}
+      theme={getJsonTreeTheme(base16Theme)}
+      data={nextState}
+      getItemString={(type, data) =>
+        getItemString(styling, type, data, dataTypeKey, isWideLayout)
+      }
+      invertTheme={invertTheme}
+      hideRoot
+      sortObjectKeys={sortObjectKeys}
+      {...(disableCollection ? { collectionLimit: 0 } : {})}
+    />
+  );
+};
 
 StateTab.propTypes = {
   nextState: PropTypes.any.isRequired,

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"]
 }