diff --git a/desktop/app/src/ui/components/Highlight.tsx b/desktop/app/src/ui/components/Highlight.tsx
index 77ae003c0..378229f5b 100644
--- a/desktop/app/src/ui/components/Highlight.tsx
+++ b/desktop/app/src/ui/components/Highlight.tsx
@@ -59,14 +59,19 @@ function createHighlightManager(initialText: string = ''): HighlightManager {
}, [text]);
const index = text.toLowerCase().indexOf(currentFilter);
- if (index === -1) {
- return {text};
- }
return (
- {text.substr(0, index)}
- {text.substr(index, currentFilter.length)}
- {text.substr(index + currentFilter.length)}
+ {index === -1 ? (
+ text
+ ) : (
+ <>
+ {text.substr(0, index)}
+
+ {text.substr(index, currentFilter.length)}
+
+ {text.substr(index + currentFilter.length)}
+ >
+ )}
);
});
diff --git a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
index 5af227db2..e082f1340 100644
--- a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
+++ b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
@@ -133,7 +133,7 @@ type DataInspectorProps = {
/**
* Callback whenever the current expanded paths is changed.
*/
- onExpanded?: ((expanded: DataInspectorExpanded) => void) | undefined | null;
+ onExpanded?: ((path: string, expanded: boolean) => void) | undefined | null;
/**
* Callback whenever delete action is invoked on current path.
*/
@@ -497,10 +497,7 @@ export default class DataInspector extends Component<
const path = pathParts.join('.');
- onExpanded({
- ...expanded,
- [path]: isExpanded,
- });
+ onExpanded(path, isExpanded);
}
handleClick = () => {
diff --git a/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx b/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
index 5a1531849..e7c1c6260 100644
--- a/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
+++ b/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
@@ -57,6 +57,8 @@ type ManagedDataInspectorProps = {
type ManagedDataInspectorState = {
expanded: DataInspectorExpanded;
+ filterExpanded: DataInspectorExpanded;
+ userExpanded: DataInspectorExpanded;
filter: string;
};
@@ -76,6 +78,8 @@ export default class ManagedDataInspector extends PureComponent<
super(props, context);
this.state = {
expanded: {},
+ userExpanded: {},
+ filterExpanded: {},
filter: '',
};
}
@@ -90,8 +94,9 @@ export default class ManagedDataInspector extends PureComponent<
if (!nextProps.filter) {
return {
filter: '',
+ filterExpanded: {},
// reset expanded when removing filter
- expanded: currentState.filter ? {} : currentState.expanded,
+ expanded: currentState.userExpanded,
};
}
@@ -130,20 +135,30 @@ export default class ManagedDataInspector extends PureComponent<
if (filter.length >= 2) {
walk(nextProps.data, []);
}
- const expanded: Record = {};
+ const filterExpanded: Record = {};
paths.forEach((path) => {
for (let i = 1; i < path.length; i++)
- expanded[path.slice(0, i).join('.')] = true;
+ filterExpanded[path.slice(0, i).join('.')] = true;
});
return {
- expanded,
+ filterExpanded,
+ expanded: {...currentState.userExpanded, ...filterExpanded},
filter,
};
}
- onExpanded = (expanded: DataInspectorExpanded) => {
- this.setState({expanded});
+ onExpanded = (path: string, isExpanded: boolean) => {
+ this.setState({
+ userExpanded: {
+ ...this.state.userExpanded,
+ [path]: isExpanded,
+ },
+ expanded: {
+ ...this.state.expanded,
+ [path]: isExpanded,
+ },
+ });
};
render() {