Skip to content

Commit a62c25d

Browse files
author
Kent Kwee
committed
feature(redux-devtools-inspector-monitor): add option to sort state tree alphabetically and/or disable collections
1 parent cc5d7b7 commit a62c25d

File tree

15 files changed

+150
-0
lines changed

15 files changed

+150
-0
lines changed

.changeset/plenty-gifts-watch.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'remotedev-redux-devtools-extension': minor
3+
'@redux-devtools/inspector-monitor': minor
4+
---
5+
6+
Option to sort State Tree keys alphabetically
7+
Option to disable collapsing of object keys

extension/src/app/Actions.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ class Actions extends Component<Props> {
6060
liftedState,
6161
liftedDispatch,
6262
position,
63+
stateTreeSettings,
6364
} = this.props;
6465
const { features } = options;
6566
return (
@@ -75,6 +76,7 @@ class Actions extends Component<Props> {
7576
monitorState={this.props.monitorState}
7677
dispatch={liftedDispatch}
7778
features={options.features}
79+
stateTreeSettings={stateTreeSettings}
7880
/>
7981
{sliderIsOpen && options.connectionId && options.features.jump && (
8082
<SliderMonitor liftedState={liftedState} dispatch={liftedDispatch} />
@@ -149,6 +151,7 @@ const mapStateToProps = (state: StoreState) => {
149151
dispatcherIsOpen: state.monitor.dispatcherIsOpen,
150152
sliderIsOpen: state.monitor.sliderIsOpen,
151153
reports: state.reports.data,
154+
stateTreeSettings: state.stateTreeSettings,
152155
};
153156
};
154157

extension/src/window/store/windowReducer.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
section,
88
socket,
99
theme,
10+
stateTreeSettings,
1011
StoreState,
1112
} from '@redux-devtools/app';
1213
import instances from './instancesReducer';
@@ -22,6 +23,7 @@ const rootReducer: Reducer<StoreState, WindowStoreAction> =
2223
section,
2324
theme,
2425
connection,
26+
stateTreeSettings,
2527
});
2628

2729
export default rootReducer;

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
GET_REPORT_SUCCESS,
2626
ERROR,
2727
SET_PERSIST,
28+
CHANGE_STATE_TREE_SETTINGS,
2829
} from '../constants/actionTypes';
2930
import {
3031
AUTH_ERROR,
@@ -82,6 +83,27 @@ export function changeTheme(data: ChangeThemeData): ChangeThemeAction {
8283
return { type: CHANGE_THEME, ...data.formData };
8384
}
8485

86+
interface ChangeStateTreeSettingsFormData {
87+
readonly sortAlphabetically: boolean;
88+
readonly disableCollection: boolean;
89+
}
90+
91+
interface ChangeStateTreeSettingsData {
92+
readonly formData: ChangeStateTreeSettingsFormData;
93+
}
94+
95+
export interface ChangeStateTreeSettingsAction {
96+
readonly type: typeof CHANGE_STATE_TREE_SETTINGS;
97+
readonly sortAlphabetically: boolean;
98+
readonly disableCollection: boolean;
99+
}
100+
101+
export function changeStateTreeSettings(
102+
data: ChangeStateTreeSettingsData
103+
): ChangeStateTreeSettingsAction {
104+
return { type: CHANGE_STATE_TREE_SETTINGS, ...data.formData };
105+
}
106+
85107
export interface InitMonitorAction {
86108
type: '@@INIT_MONITOR';
87109
newMonitorState: unknown;
@@ -568,6 +590,7 @@ interface ReduxPersistRehydrateAction {
568590
export type StoreActionWithoutUpdateStateOrLiftedAction =
569591
| ChangeSectionAction
570592
| ChangeThemeAction
593+
| ChangeStateTreeSettingsAction
571594
| MonitorActionAction
572595
| SelectInstanceAction
573596
| SelectMonitorAction
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React, { Component } from 'react';
2+
import { connect, ResolveThunks } from 'react-redux';
3+
import { Container, Form } from '@redux-devtools/ui';
4+
import { changeStateTreeSettings } from '../../actions';
5+
import { StoreState } from '../../reducers';
6+
7+
type StateProps = ReturnType<typeof mapStateToProps>;
8+
type DispatchProps = ResolveThunks<typeof actionCreators>;
9+
type Props = StateProps & DispatchProps;
10+
11+
export class StateTree extends Component<Props> {
12+
render() {
13+
const stateTree = this.props.theme;
14+
const formData = {
15+
sortAlphabetically: stateTree.sortAlphabetically,
16+
disableCollection: stateTree.disableCollection,
17+
};
18+
19+
return (
20+
<Container>
21+
<Form
22+
schema={{
23+
type: 'object',
24+
properties: {
25+
sortAlphabetically: {
26+
title: 'Sort Alphabetically',
27+
type: 'boolean',
28+
},
29+
disableCollection: {
30+
title: 'Disable collapsing of nodes',
31+
type: 'boolean',
32+
},
33+
},
34+
}}
35+
formData={formData}
36+
noSubmit
37+
onChange={this.props.changeStateTreeSettings}
38+
/>
39+
</Container>
40+
);
41+
}
42+
}
43+
44+
const mapStateToProps = (state: StoreState) => ({
45+
theme: state.stateTreeSettings,
46+
});
47+
48+
const actionCreators = {
49+
changeStateTreeSettings,
50+
};
51+
52+
export default connect(mapStateToProps, actionCreators)(StateTree);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22
import { Tabs } from '@redux-devtools/ui';
33
import Connection from './Connection';
44
import Themes from './Themes';
5+
import StateTree from './StateTree';
56

67
interface State {
78
selected: string;
@@ -12,6 +13,7 @@ export default class Settings extends Component<{}, State> {
1213
tabs = [
1314
{ name: 'Connection', component: Connection },
1415
{ name: 'Themes', component: Themes },
16+
{ name: 'State Tree', component: StateTree },
1517
];
1618
state: State = { selected: 'Connection' };
1719

packages/redux-devtools-app/src/constants/actionTypes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export const CHANGE_SECTION = 'main/CHANGE_SECTION';
22
export const CHANGE_THEME = 'main/CHANGE_THEME';
3+
export const CHANGE_STATE_TREE_SETTINGS = 'main/CHANGE_STATE_TREE_SETTINGS';
34

45
export const UPDATE_STATE = 'devTools/UPDATE_STATE';
56
export const SET_STATE = 'devTools/SET_STATE';

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ class Actions extends Component<Props> {
2323
options,
2424
liftedState,
2525
liftedDispatch,
26+
stateTreeSettings,
2627
} = this.props;
2728
return (
2829
<Container>
@@ -37,6 +38,7 @@ class Actions extends Component<Props> {
3738
monitorState={this.props.monitorState}
3839
dispatch={liftedDispatch}
3940
features={options.features}
41+
stateTreeSettings={stateTreeSettings}
4042
/>
4143
{sliderIsOpen && options.connectionId && options.features.jump && (
4244
<SliderMonitor liftedState={liftedState} dispatch={liftedDispatch} />
@@ -65,6 +67,7 @@ const mapStateToProps = (state: StoreState) => {
6567
dispatcherIsOpen: state.monitor.dispatcherIsOpen,
6668
sliderIsOpen: state.monitor.sliderIsOpen,
6769
reports: state.reports.data,
70+
stateTreeSettings: state.stateTreeSettings,
6871
};
6972
};
7073

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { InitMonitorAction } from '../actions';
77
import { Features, State } from '../reducers/instances';
88
import { MonitorStateMonitorState } from '../reducers/monitor';
99
import { ThemeFromProvider } from '@redux-devtools/ui';
10+
import { StateTreeSettings } from '../reducers/stateTreeSettings';
1011

1112
interface Props {
1213
monitor: string;
@@ -17,6 +18,7 @@ interface Props {
1718
) => void;
1819
features: Features | undefined;
1920
theme: ThemeFromProvider;
21+
stateTreeSettings: StateTreeSettings;
2022
}
2123

2224
class DevTools extends Component<Props> {
@@ -110,6 +112,12 @@ class DevTools extends Component<Props> {
110112
features={this.props.features}
111113
dispatch={this.dispatch}
112114
theme={this.props.theme}
115+
sortStateTreeAlphabetically={
116+
this.props.stateTreeSettings.sortAlphabetically
117+
}
118+
disableStateTreeCollection={
119+
this.props.stateTreeSettings.disableCollection
120+
}
113121
/>
114122
</div>
115123
);

packages/redux-devtools-app/src/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,6 @@ export * from './reducers/reports';
6565
export * from './reducers/section';
6666
export * from './reducers/socket';
6767
export * from './reducers/theme';
68+
export * from './reducers/stateTreeSettings';
6869
export * from './utils/monitorActions';
6970
export * from './utils/stringifyJSON';

0 commit comments

Comments
 (0)