Merge pull request #5718 from vector-im/t3chguy/devtools-118247

make FilteredList controlled, such that it can externally persist filter

src/components/views/dialogs/DevtoolsDialog.js

@@ -245,24 +245,22 @@ class SendAccountData extends GenericEditor {
 class FilteredList extends React.Component {
     static propTypes = {
         children: PropTypes.any,
+        query: PropTypes.string,
+        onChange: PropTypes.func,
     };
 
     constructor(props, context) {
         super(props, context);
         this.onQuery = this.onQuery.bind(this);
-
-        this.state = {
-            query: '',
-        };
     }
 
     onQuery(ev) {
-        this.setState({ query: ev.target.value });
+        if (this.props.onChange) this.props.onChange(ev.target.value);
     }
 
     filterChildren() {
-        if (this.state.query) {
+        if (this.props.query) {
-            const lowerQuery = this.state.query.toLowerCase();
+            const lowerQuery = this.props.query.toLowerCase();
             return this.props.children.filter((child) => child.key.toLowerCase().includes(lowerQuery));
         }
         return this.props.children;
@@ -272,7 +270,7 @@ class FilteredList extends React.Component {
         return <div>
             <input size="64"
                    onChange={this.onQuery}
-                   value={this.state.query}
+                   value={this.props.query}
                    placeholder={_t('Filter results')}
                    className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" />
             { this.filterChildren() }
@@ -296,11 +294,16 @@ class RoomStateExplorer extends DevtoolsComponent {
 
         this.onBack = this.onBack.bind(this);
         this.editEv = this.editEv.bind(this);
+        this.onQueryEventType = this.onQueryEventType.bind(this);
+        this.onQueryStateKey = this.onQueryStateKey.bind(this);
 
         this.state = {
             eventType: null,
             event: null,
             editing: false,
+
+            queryEventType: '',
+            queryStateKey: '',
         };
     }
 
@@ -332,6 +335,14 @@ class RoomStateExplorer extends DevtoolsComponent {
         this.setState({ editing: true });
     }
 
+    onQueryEventType(filterEventType) {
+        this.setState({ queryEventType: filterEventType });
+    }
+
+    onQueryStateKey(filterStateKey) {
+        this.setState({ queryStateKey: filterStateKey });
+    }
+
     render() {
         if (this.state.event) {
             if (this.state.editing) {
@@ -355,41 +366,47 @@ class RoomStateExplorer extends DevtoolsComponent {
             </div>;
         }
 
-        const rows = [];
+        let list = null;
 
         const classes = 'mx_DevTools_RoomStateExplorer_button';
         if (this.state.eventType === null) {
-            Object.keys(this.roomStateEvents).forEach((evType) => {
+            list = <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
-                const stateGroup = this.roomStateEvents[evType];
+                {
-                const stateKeys = Object.keys(stateGroup);
+                    Object.keys(this.roomStateEvents).map((evType) => {
+                        const stateGroup = this.roomStateEvents[evType];
+                        const stateKeys = Object.keys(stateGroup);
 
-                let onClickFn;
+                        let onClickFn;
-                if (stateKeys.length > 1) {
+                        if (stateKeys.length > 1) {
-                    onClickFn = this.browseEventType(evType);
+                            onClickFn = this.browseEventType(evType);
-                } else if (stateKeys.length === 1) {
+                        } else if (stateKeys.length === 1) {
-                    onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
+                            onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
+                        }
+
+                        return <button className={classes} key={evType} onClick={onClickFn}>
+                            { evType }
+                        </button>;
+                    })
                 }
-
+            </FilteredList>;
-                rows.push(<button className={classes} key={evType} onClick={onClickFn}>
-                    { evType }
-                </button>);
-            });
         } else {
-            const evType = this.state.eventType;
+            const stateGroup = this.roomStateEvents[this.state.eventType];
-            const stateGroup = this.roomStateEvents[evType];
+
-            Object.keys(stateGroup).forEach((stateKey) => {
+            list = <FilteredList query={this.state.queryStateKey} onChange={this.onQueryStateKey}>
-                const ev = stateGroup[stateKey];
+                {
-                rows.push(<button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
+                    Object.keys(stateGroup).map((stateKey) => {
-                    { stateKey }
+                        const ev = stateGroup[stateKey];
-                </button>);
+                        return <button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
-            });
+                            { stateKey }
+                        </button>;
+                    })
+                }
+            </FilteredList>;
         }
 
         return <div>
             <div className="mx_Dialog_content">
-                <FilteredList>
+                { list }
-                    { rows }
-                </FilteredList>
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
@@ -411,11 +428,14 @@ class AccountDataExplorer extends DevtoolsComponent {
         this.onBack = this.onBack.bind(this);
         this.editEv = this.editEv.bind(this);
         this._onChange = this._onChange.bind(this);
+        this.onQueryEventType = this.onQueryEventType.bind(this);
 
         this.state = {
             isRoomAccountData: false,
             event: null,
             editing: false,
+
+            queryEventType: '',
         };
     }
 
@@ -451,6 +471,10 @@ class AccountDataExplorer extends DevtoolsComponent {
         this.setState({ editing: true });
     }
 
+    onQueryEventType(queryEventType) {
+        this.setState({ queryEventType });
+    }
+
     render() {
         if (this.state.event) {
             if (this.state.editing) {
@@ -487,7 +511,7 @@ class AccountDataExplorer extends DevtoolsComponent {
 
         return <div>
             <div className="mx_Dialog_content">
-                <FilteredList>
+                <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
                     { rows }
                 </FilteredList>
             </div>