From af5cfff51db48c4a96c5393a25c76675839e864d Mon Sep 17 00:00:00 2001
From: Panagiotis <27917356+panoschal@users.noreply.github.com>
Date: Thu, 4 Mar 2021 23:17:29 +0200
Subject: [PATCH] feat: edit button on View Source dialog

reuse component SendCustomEvent
swap it in place in the View Source dialog
the Back button takes you to the View Source dialog, not the DevTools dialog
do not display the flip toggle box for changing between State Event and Normal Event
---
 src/components/structures/ViewSource.js       | 180 ++++++++++++++----
 .../views/context_menus/MessageContextMenu.js |  14 +-
 .../views/dialogs/DevtoolsDialog.js           |   7 +-
 3 files changed, 152 insertions(+), 49 deletions(-)

diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js
index ca6c0d4226..7fe862cff5 100644
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -16,12 +16,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import SyntaxHighlight from '../views/elements/SyntaxHighlight';
-import {_t} from "../../languageHandler";
+import React from "react";
+import PropTypes from "prop-types";
+import SyntaxHighlight from "../views/elements/SyntaxHighlight";
+import { _t } from "../../languageHandler";
 import * as sdk from "../../index";
-
+import MatrixClientContext from "../../contexts/MatrixClientContext";
+import { SendCustomEvent } from "../views/dialogs/DevtoolsDialog";
 
 export default class ViewSource extends React.Component {
     static propTypes = {
@@ -31,48 +32,157 @@ export default class ViewSource extends React.Component {
         eventId: PropTypes.string.isRequired,
         isEncrypted: PropTypes.bool.isRequired,
         decryptedContent: PropTypes.object,
+        event: PropTypes.object.isRequired, // the MatrixEvent associated with the context menu
     };
 
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            editComponent: null,
+        };
+    }
+
+    onBack() {
+        this.setState({ editComponent: null });
+    }
+
+    editEvent() {
+        const isStateEvent = this.props.event.isState();
+        console.log("isStateEvent", isStateEvent);
+        if (isStateEvent) {
+            this.setState({
+                editComponent: (
+                    <MatrixClientContext.Consumer>
+                        {(cli) => (
+                            <SendCustomEvent
+                                room={cli.getRoom(this.props.roomId)}
+                                forceStateEvent={true}
+                                onBack={() => this.onBack()}
+                                inputs={{
+                                    eventType: this.props.event.getType(),
+                                    evContent: JSON.stringify(
+                                        this.props.event.getContent(),
+                                        null,
+                                        "\t"
+                                    ),
+                                    stateKey: this.props.event.getStateKey(),
+                                }}
+                            />
+                        )}
+                    </MatrixClientContext.Consumer>
+                ),
+            });
+        } else {
+            // send an edit-message event
+            // prefill the "m.new_content" field
+            const originalContent = this.props.event.getContent();
+            const originalEventId = this.props.eventId;
+            const content = {
+                ...originalContent,
+                "m.new_content": originalContent,
+                "m.relates_to": {
+                    rel_type: "m.replace",
+                    event_id: originalEventId,
+                },
+            };
+            this.setState({
+                editComponent: (
+                    <MatrixClientContext.Consumer>
+                        {(cli) => (
+                            <SendCustomEvent
+                                room={cli.getRoom(this.props.roomId)}
+                                forceStateEvent={false}
+                                forceGeneralEvent={true}
+                                onBack={() => this.onBack()}
+                                inputs={{
+                                    eventType: this.props.event.getType(),
+                                    evContent: JSON.stringify(
+                                        content,
+                                        null,
+                                        "\t"
+                                    ),
+                                }}
+                            />
+                        )}
+                    </MatrixClientContext.Consumer>
+                ),
+            });
+        }
+    }
+
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
 
         let content;
         if (this.props.isEncrypted) {
-            content = <>
-                <details open className="mx_ViewSource_details">
-                    <summary>
-                        <span className="mx_ViewSource_heading">{_t("Decrypted event source")}</span>
-                    </summary>
-                    <SyntaxHighlight className="json">
-                        { JSON.stringify(this.props.decryptedContent, null, 2) }
-                    </SyntaxHighlight>
-                </details>
-                <details className="mx_ViewSource_details">
-                    <summary>
-                        <span className="mx_ViewSource_heading">{_t("Original event source")}</span>
-                    </summary>
-                    <SyntaxHighlight className="json">
-                        { JSON.stringify(this.props.content, null, 2) }
-                    </SyntaxHighlight>
-                </details>
-            </>;
+            content = (
+                <>
+                    <details open className="mx_ViewSource_details">
+                        <summary>
+                            <span className="mx_ViewSource_heading">
+                                {_t("Decrypted event source")}
+                            </span>
+                        </summary>
+                        <SyntaxHighlight className="json">
+                            {JSON.stringify(
+                                this.props.decryptedContent,
+                                null,
+                                2
+                            )}
+                        </SyntaxHighlight>
+                    </details>
+                    <details className="mx_ViewSource_details">
+                        <summary>
+                            <span className="mx_ViewSource_heading">
+                                {_t("Original event source")}
+                            </span>
+                        </summary>
+                        <SyntaxHighlight className="json">
+                            {JSON.stringify(this.props.content, null, 2)}
+                        </SyntaxHighlight>
+                    </details>
+                </>
+            );
         } else {
-            content = <>
-                <div className="mx_ViewSource_heading">{_t("Original event source")}</div>
-                <SyntaxHighlight className="json">
-                    { JSON.stringify(this.props.content, null, 2) }
-                </SyntaxHighlight>
-            </>;
+            content = (
+                <>
+                    <div className="mx_ViewSource_heading">
+                        {_t("Original event source")}
+                    </div>
+                    <SyntaxHighlight className="json">
+                        {JSON.stringify(this.props.content, null, 2)}
+                    </SyntaxHighlight>
+                </>
+            );
         }
 
+        const isEditing = this.state.editComponent !== null;
+        console.log(isEditing);
+
         return (
-            <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t('View Source')}>
-                <div className="mx_Dialog_content">
-                    <div className="mx_ViewSource_label_left">Room ID: { this.props.roomId }</div>
-                    <div className="mx_ViewSource_label_left">Event ID: { this.props.eventId }</div>
+            <BaseDialog
+                className="mx_ViewSource"
+                onFinished={this.props.onFinished}
+                title={_t("View Source")}
+            >
+                <div>
+                    <div className="mx_ViewSource_label_left">
+                        Room ID: {this.props.roomId}
+                    </div>
+                    <div className="mx_ViewSource_label_left">
+                        Event ID: {this.props.eventId}
+                    </div>
                     <div className="mx_ViewSource_separator" />
-                    { content }
+                    {isEditing ? this.state.editComponent : content}
                 </div>
+                {!isEditing && (
+                    <div className="mx_Dialog_buttons">
+                        <button onClick={() => this.editEvent()}>
+                            {_t("Edit")}
+                        </button>
+                    </div>
+                )}
             </BaseDialog>
         );
     }
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index b002d1ec62..a1c111b19c 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -130,20 +130,10 @@ export default class MessageContextMenu extends React.Component {
             roomId: ev.getRoomId(),
             eventId: ev.getId(),
             content: ev.event,
+            event: ev,
             isEncrypted: this.props.mxEvent.getType() !== this.props.mxEvent.getWireType(),
-            decryptedContent: ev._clearEvent,
-        }, 'mx_Dialog_viewsource');
-        this.closeMenu();
-    };
-
-    onViewClearSourceClick = () => {
-        const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
-        const ViewSource = sdk.getComponent('structures.ViewSource');
-        Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
-            roomId: ev.getRoomId(),
-            eventId: ev.getId(),
             // FIXME: _clearEvent is private
-            content: ev._clearEvent,
+            decryptedContent: ev._clearEvent,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     };
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 814378bb51..5d571461fc 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -73,13 +73,14 @@ class GenericEditor extends React.PureComponent {
     }
 }
 
-class SendCustomEvent extends GenericEditor {
+export class SendCustomEvent extends GenericEditor {
     static getLabel() { return _t('Send Custom Event'); }
 
     static propTypes = {
         onBack: PropTypes.func.isRequired,
         room: PropTypes.instanceOf(Room).isRequired,
         forceStateEvent: PropTypes.bool,
+        forceGeneralEvent: PropTypes.bool,
         inputs: PropTypes.object,
     };
 
@@ -140,6 +141,8 @@ class SendCustomEvent extends GenericEditor {
             </div>;
         }
 
+        const showTglFlip = !this.state.message && !this.props.forceStateEvent && !this.props.forceGeneralEvent;
+        
         return <div>
             <div className="mx_DevTools_content">
                 <div className="mx_DevTools_eventTypeStateKeyGroup">
@@ -155,7 +158,7 @@ class SendCustomEvent extends GenericEditor {
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
                 { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
-                { !this.state.message && !this.props.forceStateEvent && <div style={{float: "right"}}>
+                { showTglFlip && <div style={{float: "right"}}>
                     <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isStateEvent} />
                     <label className="mx_DevTools_tgl-btn" data-tg-off="Event" data-tg-on="State Event" htmlFor="isStateEvent" />
                 </div> }