Feature/add search panel in state tab

extension/babel.config.js

@@ -0,0 +1,10 @@
+const test = process.env.NODE_ENV === 'test';
+
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: 'defaults' }],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [...(test ? ['babel-plugin-transform-import-meta'] : [])],
+};

extension/package.json

@@ -58,6 +58,7 @@
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "@types/styled-components": "^5.1.29",
+    "babel-plugin-transform-import-meta": "^2.2.1",
     "chromedriver": "^118.0.1",
     "cross-env": "^7.0.3",
     "electron": "^27.0.2",

packages/react-json-tree/src/ItemRange.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import JSONArrow from './JSONArrow';
-import type { CircularCache, CommonInternalProps } from './types';
+import type { CircularCache, CommonInternalProps, KeyPath } from './types';
 
 interface Props extends CommonInternalProps {
   data: unknown;
@@ -13,12 +13,25 @@ interface Props extends CommonInternalProps {
 }
 
 export default function ItemRange(props: Props) {
-  const { styling, from, to, renderChildNodes, nodeType } = props;
+  const {
+    styling,
+    from,
+    to,
+    renderChildNodes,
+    nodeType,
+    keyPath,
+    searchResultPath,
+    level,
+  } = props;
 
-  const [expanded, setExpanded] = useState<boolean>(false);
+  const [userExpanded, setUserExpanded] = useState<boolean>(false);
   const handleClick = useCallback(() => {
-    setExpanded(!expanded);
-  }, [expanded]);
+    setUserExpanded(!userExpanded);
+  }, [userExpanded]);
+
+  const expanded =
+    userExpanded ||
+    containsSearchResult(keyPath, from, to, searchResultPath, level);
 
   return expanded ? (
     <div {...styling('itemRange', expanded)}>
@@ -37,3 +50,15 @@ export default function ItemRange(props: Props) {
     </div>
   );
 }
+
+const containsSearchResult = (
+  ownKeyPath: KeyPath,
+  from: number,
+  to: number,
+  resultKeyPath: KeyPath,
+  level: number,
+): boolean => {
+  const searchLevel = level > 1 ? level - 1 : level;
+  const nextKey = Number(resultKeyPath[searchLevel]);
+  return !isNaN(nextKey) && nextKey >= from && nextKey <= to;
+};

packages/react-json-tree/src/JSONNestedNode.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useState } from 'react';
+import ItemRange from './ItemRange';
 import JSONArrow from './JSONArrow';
-import getCollectionEntries from './getCollectionEntries';
 import JSONNode from './JSONNode';
-import ItemRange from './ItemRange';
-import type { CircularCache, CommonInternalProps } from './types';
+import getCollectionEntries from './getCollectionEntries';
+import type { CircularCache, CommonInternalProps, KeyPath } from './types';
 
 /**
  * Renders nested values (eg. objects, arrays, lists, etc.)
@@ -110,17 +110,21 @@ export default function JSONNestedNode(props: Props) {
     nodeType,
     nodeTypeIndicator,
     shouldExpandNodeInitially,
+    searchResultPath,
     styling,
   } = props;
 
-  const [expanded, setExpanded] = useState<boolean>(
+  const [userExpanded, setUserExpanded] = useState<boolean>(
     // calculate individual node expansion if necessary
     isCircular ? false : shouldExpandNodeInitially(keyPath, data, level),
   );
 
   const handleClick = useCallback(() => {
-    if (expandable) setExpanded(!expanded);
-  }, [expandable, expanded]);
+    if (expandable) setUserExpanded(!userExpanded);
+  }, [expandable, userExpanded]);
+
+  const expanded =
+    userExpanded || containsSearchResult(keyPath, searchResultPath, level);
 
   const renderedChildren =
     expanded || (hideRoot && level === 0)
@@ -175,3 +179,15 @@ export default function JSONNestedNode(props: Props) {
     </li>
   );
 }
+
+const containsSearchResult = (
+  ownKeyPath: KeyPath,
+  resultKeyPath: KeyPath,
+  level: number,
+): boolean => {
+  const searchLevel = level > 0 ? level - 1 : level;
+  const currKey = [...ownKeyPath].reverse()[searchLevel];
+  return resultKeyPath && currKey !== undefined
+    ? resultKeyPath[searchLevel] === currKey.toString()
+    : false;
+};

packages/react-json-tree/src/index.tsx

@@ -4,10 +4,10 @@
 // port by Daniele Zannotti http://www.github.com/dzannotti <[email protected]>
 
 import React, { useMemo } from 'react';
+import type { StylingValue, Theme } from 'react-base16-styling';
+import { invertTheme } from 'react-base16-styling';
 import JSONNode from './JSONNode';
 import createStylingFromTheme from './createStylingFromTheme';
-import { invertTheme } from 'react-base16-styling';
-import type { StylingValue, Theme } from 'react-base16-styling';
 import type {
   CommonExternalProps,
   GetItemString,
@@ -41,6 +41,8 @@ export function JSONTree({
   labelRenderer = defaultLabelRenderer,
   valueRenderer = identity,
   shouldExpandNodeInitially = expandRootNode,
+  isSearchInProgress = false,
+  searchResultPath = [],
   hideRoot = false,
   getItemString = defaultItemString,
   postprocessValue = identity,
@@ -64,6 +66,8 @@ export function JSONTree({
         labelRenderer={labelRenderer}
         valueRenderer={valueRenderer}
         shouldExpandNodeInitially={shouldExpandNodeInitially}
+        searchResultPath={searchResultPath}
+        isSearchInProgress={isSearchInProgress}
         hideRoot={hideRoot}
         getItemString={getItemString}
         postprocessValue={postprocessValue}
@@ -75,16 +79,16 @@ export function JSONTree({
 }
 
 export type {
+  CommonExternalProps,
+  GetItemString,
+  IsCustomNode,
   Key,
   KeyPath,
-  GetItemString,
   LabelRenderer,
-  ValueRenderer,
-  ShouldExpandNodeInitially,
   PostprocessValue,
-  IsCustomNode,
+  ShouldExpandNodeInitially,
   SortObjectKeys,
   Styling,
-  CommonExternalProps,
+  ValueRenderer,
 } from './types';
 export type { StylingValue };

packages/react-json-tree/src/types.ts

@@ -47,6 +47,8 @@ export interface CommonExternalProps {
   labelRenderer: LabelRenderer;
   valueRenderer: ValueRenderer;
   shouldExpandNodeInitially: ShouldExpandNodeInitially;
+  searchResultPath: KeyPath;
+  isSearchInProgress: boolean;
   hideRoot: boolean;
   getItemString: GetItemString;
   postprocessValue: PostprocessValue;

packages/redux-devtools-app/babel.config.esm.js

@@ -0,0 +1,13 @@
+const test = process.env.NODE_ENV === 'test';
+
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: 'defaults', modules: false }],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    '@babel/plugin-transform-runtime',
+    ...(test ? ['babel-plugin-transform-import-meta'] : []),
+  ],
+};

packages/redux-devtools-app/babel.config.js

@@ -0,0 +1,13 @@
+const test = process.env.NODE_ENV === 'test';
+
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: 'defaults' }],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    '@babel/plugin-transform-runtime',
+    ...(test ? ['babel-plugin-transform-import-meta'] : []),
+  ],
+};

packages/redux-devtools-app/package.json

@@ -90,6 +90,7 @@
     "@types/webpack-env": "^1.18.3",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
+    "babel-plugin-transform-import-meta": "^2.2.1",
     "babel-loader": "^9.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",

packages/redux-devtools-app/src/actions/index.ts

@@ -1,31 +1,33 @@
+import { LiftedAction, LiftedState } from '@redux-devtools/core';
 import { SchemeName, ThemeName } from '@redux-devtools/ui';
-import { AuthStates, States } from 'socketcluster-client/lib/clientsocket';
+import { Action } from 'redux';
 import { REHYDRATE } from 'redux-persist';
+import { AuthStates, States } from 'socketcluster-client/lib/clientsocket';
 import {
   CHANGE_SECTION,
+  CHANGE_STATE_TREE_SETTINGS,
   CHANGE_THEME,
-  SELECT_INSTANCE,
-  SELECT_MONITOR,
-  UPDATE_MONITOR_STATE,
+  CLEAR_NOTIFICATION,
+  ERROR,
+  EXPORT,
+  GET_REPORT_ERROR,
+  GET_REPORT_REQUEST,
+  GET_REPORT_SUCCESS,
   LIFTED_ACTION,
   MONITOR_ACTION,
-  EXPORT,
-  TOGGLE_SYNC,
-  TOGGLE_SLIDER,
+  REMOVE_INSTANCE,
+  SELECT_INSTANCE,
+  SELECT_MONITOR,
+  SET_PERSIST,
+  SET_STATE,
+  SHOW_NOTIFICATION,
   TOGGLE_DISPATCHER,
   TOGGLE_PERSIST,
-  GET_REPORT_REQUEST,
-  SHOW_NOTIFICATION,
-  CLEAR_NOTIFICATION,
-  UPDATE_STATE,
+  TOGGLE_SLIDER,
+  TOGGLE_SYNC,
+  UPDATE_MONITOR_STATE,
   UPDATE_REPORTS,
-  REMOVE_INSTANCE,
-  SET_STATE,
-  GET_REPORT_ERROR,
-  GET_REPORT_SUCCESS,
-  ERROR,
-  SET_PERSIST,
-  CHANGE_STATE_TREE_SETTINGS,
+  UPDATE_STATE,
 } from '../constants/actionTypes';
 import {
   AUTH_ERROR,
@@ -43,12 +45,9 @@ import {
   SUBSCRIBE_SUCCESS,
   UNSUBSCRIBE,
 } from '../constants/socketActionTypes';
-import { Action } from 'redux';
 import { Features, State } from '../reducers/instances';
 import { MonitorStateMonitorState } from '../reducers/monitor';
-import { LiftedAction } from '@redux-devtools/core';
 import { Data } from '../reducers/reports';
-import { LiftedState } from '@redux-devtools/core';
 
 let monitorReducer: (
   monitorProps: unknown,
@@ -86,6 +85,7 @@ export function changeTheme(data: ChangeThemeData): ChangeThemeAction {
 interface ChangeStateTreeSettingsFormData {
   readonly sortAlphabetically: boolean;
   readonly disableCollection: boolean;
+  readonly enableSearchPanel: boolean;
 }
 
 interface ChangeStateTreeSettingsData {
@@ -96,6 +96,7 @@ export interface ChangeStateTreeSettingsAction {
   readonly type: typeof CHANGE_STATE_TREE_SETTINGS;
   readonly sortAlphabetically: boolean;
   readonly disableCollection: boolean;
+  readonly enableSearchPanel: boolean;
 }
 
 export function changeStateTreeSettings(

packages/redux-devtools-app/src/components/Settings/StateTree.tsx

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
-import { connect, ResolveThunks } from 'react-redux';
 import { Container, Form } from '@redux-devtools/ui';
+import React, { Component } from 'react';
+import { ResolveThunks, connect } from 'react-redux';
 import { changeStateTreeSettings } from '../../actions';
 import { StoreState } from '../../reducers';
 
@@ -14,6 +14,7 @@ export class StateTree extends Component<Props> {
     const formData = {
       sortAlphabetically: stateTree.sortAlphabetically,
       disableCollection: stateTree.disableCollection,
+      enableSearchPanel: stateTree.enableSearchPanel,
     };
 
     return (
@@ -30,6 +31,10 @@ export class StateTree extends Component<Props> {
                 title: 'Disable collapsing of nodes',
                 type: 'boolean',
               },
+              enableSearchPanel: {
+                title: 'Show search panel in State tab',
+                type: 'boolean',
+              },
             },
           }}
           formData={formData}

packages/redux-devtools-app/src/containers/DevTools.tsx

@@ -1,13 +1,13 @@
-import React, { Component } from 'react';
-import { withTheme } from 'styled-components';
 import { LiftedAction, LiftedState } from '@redux-devtools/core';
+import { ThemeFromProvider } from '@redux-devtools/ui';
+import React, { Component } from 'react';
 import { Action } from 'redux';
-import getMonitor from '../utils/getMonitor';
+import { withTheme } from 'styled-components';
 import { InitMonitorAction } from '../actions';
 import { Features, State } from '../reducers/instances';
 import { MonitorStateMonitorState } from '../reducers/monitor';
-import { ThemeFromProvider } from '@redux-devtools/ui';
 import { StateTreeSettings } from '../reducers/stateTreeSettings';
+import getMonitor from '../utils/getMonitor';
 
 interface Props {
   monitor: string;
@@ -118,6 +118,7 @@ class DevTools extends Component<Props> {
           disableStateTreeCollection={
             this.props.stateTreeSettings.disableCollection
           }
+          enableSearchPanel={this.props.stateTreeSettings.enableSearchPanel}
         />
       </div>
     );