From 821ab6c13eb69d0af4372395d218b8f0928fa935 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 18 Sep 2017 11:06:46 +0100
Subject: [PATCH 1/4] switch to controlled inputs and require eventType !== ''

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/dialogs/DevtoolsDialog.js           | 41 +++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index a7ac9fb1c2..22fd712dbc 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -29,11 +29,14 @@ class SendCustomEvent extends React.Component {
         super(props, context);
         this._send = this._send.bind(this);
         this.onBack = this.onBack.bind(this);
-    }
+        this._onChange = this._onChange.bind(this);
 
-    state = {
-        message: null,
-    };
+        this.state = {
+            message: null,
+            input_eventType: '',
+            input_evContent: '{\n\n}',
+        };
+    }
 
     onBack() {
         if (this.state.message) {
@@ -51,13 +54,18 @@ class SendCustomEvent extends React.Component {
     }
 
     send(content) {
-        return MatrixClientPeg.get().sendEvent(this.props.roomId, this.refs.eventType.value, content);
+        return MatrixClientPeg.get().sendEvent(this.props.roomId, this.state.input_eventType, content);
     }
 
     async _send() {
+        if (this.state.input_eventType === '') {
+            this.setState({ message: _t('You must specify an event type!') });
+            return;
+        }
+
         let message;
         try {
-            const content = JSON.parse(this.refs.evContent.value);
+            const content = JSON.parse(this.state.input_evContent);
             await this.send(content);
             message = _t('Event sent!');
         } catch (e) {
@@ -67,7 +75,11 @@ class SendCustomEvent extends React.Component {
     }
 
     _additionalFields() {
-        return <div></div>;
+        return <div/>;
+    }
+
+    _onChange(e) {
+        this.setState({[`input_${e.target.id}`]: e.target.value});
     }
 
     render() {
@@ -87,14 +99,14 @@ class SendCustomEvent extends React.Component {
                     <label htmlFor="eventType"> { _t('Event Type') } </label>
                 </div>
                 <div>
-                    <input id="eventType" ref="eventType" className="mx_TextInputDialog_input" size="64" />
+                    <input id="eventType" onChange={this._onChange} value={this.state.input_eventType} className="mx_TextInputDialog_input" size="64" />
                 </div>
 
                 <div className="mx_TextInputDialog_label">
                     <label htmlFor="evContent"> { _t('Event Content') } </label>
                 </div>
                 <div>
-                    <textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="63" rows="5" />
+                    <textarea id="evContent" onChange={this._onChange} value={this.state.input_evContent} className="mx_TextInputDialog_input" cols="63" rows="5" />
                 </div>
             </div>
             {this._buttons()}
@@ -103,9 +115,14 @@ class SendCustomEvent extends React.Component {
 }
 
 class SendCustomStateEvent extends SendCustomEvent {
+    constructor(props, context) {
+        super(props, context);
+        this.state['input_stateKey'] = '';
+    }
+
     send(content) {
-        return MatrixClientPeg.get().sendStateEvent(this.props.roomId, this.refs.eventType.value, content,
-            this.refs.stateKey.value);
+        const cli = MatrixClientPeg.get();
+        return cli.sendStateEvent(this.props.roomId, this.state.input_eventType, content, this.state.input_stateKey);
     }
 
     _additionalFields() {
@@ -114,7 +131,7 @@ class SendCustomStateEvent extends SendCustomEvent {
                 <label htmlFor="stateKey"> { _t('State Key') } </label>
             </div>
             <div>
-                <input id="stateKey" ref="stateKey" className="mx_TextInputDialog_input" size="64" />
+                <input id="stateKey" onChange={this._onChange} value={this.state.input_stateKey} className="mx_TextInputDialog_input" size="64" />
             </div>
         </div>;
     }

From af450df513887eb83405c04413d5cc00dca853b9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 18 Sep 2017 11:27:31 +0100
Subject: [PATCH 2/4] add ability to jump from RSE to Send Custom State Event
 prefilled

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/dialogs/DevtoolsDialog.js           | 66 +++++++++++++++----
 1 file changed, 55 insertions(+), 11 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 22fd712dbc..6f9d6316ca 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -23,6 +23,14 @@ class SendCustomEvent extends React.Component {
     static propTypes = {
         roomId: React.PropTypes.string.isRequired,
         onBack: React.PropTypes.func.isRequired,
+
+        eventType: React.PropTypes.string.isRequired,
+        evContent: React.PropTypes.string.isRequired,
+    };
+
+    static defaultProps = {
+        eventType: '',
+        evContent: '{\n\n}',
     };
 
     constructor(props, context) {
@@ -33,8 +41,8 @@ class SendCustomEvent extends React.Component {
 
         this.state = {
             message: null,
-            input_eventType: '',
-            input_evContent: '{\n\n}',
+            input_eventType: this.props.eventType,
+            input_evContent: this.props.evContent,
         };
     }
 
@@ -115,9 +123,24 @@ class SendCustomEvent extends React.Component {
 }
 
 class SendCustomStateEvent extends SendCustomEvent {
+    static propTypes = {
+        roomId: React.PropTypes.string.isRequired,
+        onBack: React.PropTypes.func.isRequired,
+
+        eventType: React.PropTypes.string.isRequired,
+        evContent: React.PropTypes.string.isRequired,
+        stateKey: React.PropTypes.string.isRequired,
+    };
+
+    static defaultProps = {
+        eventType: '',
+        evContent: '{\n\n}',
+        stateKey: '',
+    };
+
     constructor(props, context) {
         super(props, context);
-        this.state['input_stateKey'] = '';
+        this.state['input_stateKey'] = this.props.stateKey;
     }
 
     send(content) {
@@ -139,6 +162,7 @@ class SendCustomStateEvent extends SendCustomEvent {
 
 class RoomStateExplorer extends React.Component {
     static propTypes = {
+        setMode: React.PropTypes.func.isRequired,
         roomId: React.PropTypes.string.isRequired,
         onBack: React.PropTypes.func.isRequired,
     };
@@ -150,6 +174,7 @@ class RoomStateExplorer extends React.Component {
         this.roomStateEvents = room.currentState.events;
 
         this.onBack = this.onBack.bind(this);
+        this.editEv = this.editEv.bind(this);
     }
 
     state = {
@@ -165,7 +190,7 @@ class RoomStateExplorer extends React.Component {
 
     onViewSourceClick(event) {
         return () => {
-            this.setState({ event: event.event });
+            this.setState({ event });
         };
     }
 
@@ -179,14 +204,24 @@ class RoomStateExplorer extends React.Component {
         }
     }
 
+    editEv() {
+        const ev = this.state.event;
+        this.props.setMode(SendCustomStateEvent, {
+            eventType: ev.getType(),
+            evContent: JSON.stringify(ev.getContent(), null, '\t'),
+            stateKey: ev.getStateKey(),
+        });
+    }
+
     render() {
         if (this.state.event) {
             return <div className="mx_ViewSource">
                 <div className="mx_Dialog_content">
-                    <pre>{JSON.stringify(this.state.event, null, 2)}</pre>
+                    <pre>{JSON.stringify(this.state.event.event, null, 2)}</pre>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.onBack}>{ _t('Back') }</button>
+                    <button onClick={this.editEv}>{ _t('Edit') }</button>
                 </div>
             </div>;
         }
@@ -240,11 +275,13 @@ export default class DevtoolsDialog extends React.Component {
 
     state = {
         mode: null,
+        modeArgs: {},
     };
 
     constructor(props, context) {
         super(props, context);
         this.onBack = this.onBack.bind(this);
+        this.setMode = this.setMode.bind(this);
         this.onCancel = this.onCancel.bind(this);
     }
 
@@ -254,10 +291,14 @@ export default class DevtoolsDialog extends React.Component {
 
     _setMode(mode) {
         return () => {
-            this.setState({ mode });
+            this.setMode(mode);
         };
     }
 
+    setMode(mode, modeArgs={}) {
+        this.setState({ mode, modeArgs });
+    }
+
     onBack() {
         this.setState({ mode: null });
     }
@@ -270,7 +311,8 @@ export default class DevtoolsDialog extends React.Component {
         let body;
 
         if (this.state.mode) {
-            body = <this.state.mode {...this.props} onBack={this.onBack} />;
+            body =
+                <this.state.mode {...this.props} {...this.state.modeArgs} onBack={this.onBack} setMode={this.setMode} />;
         } else {
             body = <div>
                 <div className="mx_Dialog_content">
@@ -285,9 +327,11 @@ export default class DevtoolsDialog extends React.Component {
         }
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        return <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished} title={_t('Developer Tools')}>
-            <div>Room ID: {this.props.roomId}</div>
-            { body }
-        </BaseDialog>;
+        return (
+            <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished} title={_t('Developer Tools')}>
+                <div>Room ID: { this.props.roomId }</div>
+                { body }
+            </BaseDialog>
+        );
     }
 }

From dccee6d419222c4996e2daa74fd57cbb63e296a8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 18 Sep 2017 12:03:11 +0100
Subject: [PATCH 3/4] add ability to filter room state types/results

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/DevtoolsDialog.js      | 13 +++++++++++++
 .../vector-web/views/dialogs/_DevtoolsDialog.scss   |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 6f9d6316ca..9c5948b4a0 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -175,9 +175,11 @@ class RoomStateExplorer extends React.Component {
 
         this.onBack = this.onBack.bind(this);
         this.editEv = this.editEv.bind(this);
+        this.onQuery = this.onQuery.bind(this);
     }
 
     state = {
+        query: '',
         eventType: null,
         event: null,
     };
@@ -213,6 +215,10 @@ class RoomStateExplorer extends React.Component {
         });
     }
 
+    onQuery(ev) {
+        this.setState({ query: ev.target.value });
+    }
+
     render() {
         if (this.state.event) {
             return <div className="mx_ViewSource">
@@ -230,6 +236,9 @@ class RoomStateExplorer extends React.Component {
 
         if (this.state.eventType === null) {
             Object.keys(this.roomStateEvents).forEach((evType) => {
+                // Skip this entry if does not contain search query
+                if (this.state.query && !evType.includes(this.state.query)) return;
+
                 const stateGroup = this.roomStateEvents[evType];
                 const stateKeys = Object.keys(stateGroup);
 
@@ -248,6 +257,9 @@ class RoomStateExplorer extends React.Component {
             const evType = this.state.eventType;
             const stateGroup = this.roomStateEvents[evType];
             Object.keys(stateGroup).forEach((stateKey) => {
+                // Skip this entry if does not contain search query
+                if (this.state.query && !stateKey.includes(this.state.query)) return;
+
                 const ev = stateGroup[stateKey];
                 rows.push(<button className="mx_DevTools_RoomStateExplorer_button" key={stateKey}
                                   onClick={this.onViewSourceClick(ev)}>
@@ -258,6 +270,7 @@ class RoomStateExplorer extends React.Component {
 
         return <div>
             <div className="mx_Dialog_content">
+                <input onChange={this.onQuery} placeholder={_t('Filter results')} size="64" className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" value={this.state.query} />
                 {rows}
             </div>
             <div className="mx_Dialog_buttons">
diff --git a/src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss b/src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss
index c22a38341c..975ee8c1a0 100644
--- a/src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss
+++ b/src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss
@@ -14,6 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_DevTools_RoomStateExplorer_button {
+.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
     margin-bottom: 10px;
 }

From 00976d93385552d2deb683b944c522368d6258ac Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 18 Sep 2017 12:04:11 +0100
Subject: [PATCH 4/4] i18n new DevTools strings

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/i18n/strings/en_EN.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 4f4a788b19..f7b02bf75e 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -59,6 +59,7 @@
   "Favourite": "Favourite",
   "Fetching third party location failed": "Fetching third party location failed",
   "Files": "Files",
+  "Filter results": "Filter results",
   "Filter room names": "Filter room names",
   "Forget": "Forget",
   "Forward Message": "Forward Message",
@@ -156,6 +157,7 @@
   "You are not receiving desktop notifications": "You are not receiving desktop notifications",
   "You are Rioting as a guest. <a>Register</a> or <a>sign in</a> to access more rooms and features!": "You are Rioting as a guest. <a>Register</a> or <a>sign in</a> to access more rooms and features!",
   "You might have configured them in a client other than Riot. You cannot tune them in Riot but they still apply": "You might have configured them in a client other than Riot. You cannot tune them in Riot but they still apply",
+  "You must specify an event type!": "You must specify an event type!",
   "Thank you!": "Thank you!",
   "Sunday": "Sunday",
   "Monday": "Monday",