Merge pull request #5718 from panoschal/edit-view-source

Edit button on View Source dialog that takes you to devtools -> SendCustomEvent

src/components/structures/ViewSource.js

@@ -16,65 +16,176 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import SyntaxHighlight from '../views/elements/SyntaxHighlight';
+import SyntaxHighlight from "../views/elements/SyntaxHighlight";
-import {_t} from "../../languageHandler";
+import { _t } from "../../languageHandler";
 import * as sdk from "../../index";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import MatrixClientContext from "../../contexts/MatrixClientContext";
-
+import { SendCustomEvent } from "../views/dialogs/DevtoolsDialog";
+import { canEditContent } from "../../utils/EventUtils";
+import { MatrixClientPeg } from '../../MatrixClientPeg';
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 @replaceableComponent("structures.ViewSource")
 export default class ViewSource extends React.Component {
     static propTypes = {
-        content: PropTypes.object.isRequired,
         onFinished: PropTypes.func.isRequired,
-        roomId: PropTypes.string.isRequired,
+        mxEvent: PropTypes.object.isRequired, // the MatrixEvent associated with the context menu
-        eventId: PropTypes.string.isRequired,
-        isEncrypted: PropTypes.bool.isRequired,
-        decryptedContent: PropTypes.object,
     };
 
-    render() {
+    constructor(props) {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        super(props);
 
-        let content;
+        this.state = {
-        if (this.props.isEncrypted) {
+            isEditing: false,
-            content = <>
+        };
+    }
+
+    onBack() {
+        // TODO: refresh the "Event ID:" modal header
+        this.setState({ isEditing: false });
+    }
+
+    onEdit() {
+        this.setState({ isEditing: true });
+    }
+
+    // returns the dialog body for viewing the event source
+    viewSourceContent() {
+        const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
+        const isEncrypted = mxEvent.isEncrypted();
+        const decryptedEventSource = mxEvent._clearEvent; // FIXME: _clearEvent is private
+        const originalEventSource = mxEvent.event;
+
+        if (isEncrypted) {
+            return (
+                <>
                     <details open className="mx_ViewSource_details">
                         <summary>
                             <span className="mx_ViewSource_heading">{_t("Decrypted event source")}</span>
                         </summary>
-                    <SyntaxHighlight className="json">
+                        <SyntaxHighlight className="json">{JSON.stringify(decryptedEventSource, null, 2)}</SyntaxHighlight>
-                        { 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">
+                        <SyntaxHighlight className="json">{JSON.stringify(originalEventSource, null, 2)}</SyntaxHighlight>
-                        { JSON.stringify(this.props.content, null, 2) }
-                    </SyntaxHighlight>
                     </details>
-            </>;
+                </>
+            );
         } else {
-            content = <>
+            return (
+                <>
                     <div className="mx_ViewSource_heading">{_t("Original event source")}</div>
-                <SyntaxHighlight className="json">
+                    <SyntaxHighlight className="json">{JSON.stringify(originalEventSource, null, 2)}</SyntaxHighlight>
-                    { JSON.stringify(this.props.content, null, 2) }
+                </>
-                </SyntaxHighlight>
+            );
-            </>;
+        }
     }
 
+    // returns the id of the initial message, not the id of the previous edit
+    getBaseEventId() {
+        const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
+        const isEncrypted = mxEvent.isEncrypted();
+        const baseMxEvent = this.props.mxEvent;
+
+        if (isEncrypted) {
+            // `relates_to` field is inside the encrypted event
+            return mxEvent.event.content["m.relates_to"]?.event_id ?? baseMxEvent.getId();
+        } else {
+            return mxEvent.getContent()["m.relates_to"]?.event_id ?? baseMxEvent.getId();
+        }
+    }
+
+    // returns the SendCustomEvent component prefilled with the correct details
+    editSourceContent() {
+        const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
+
+        const isStateEvent = mxEvent.isState();
+        const roomId = mxEvent.getRoomId();
+        const originalContent = mxEvent.getContent();
+
+        if (isStateEvent) {
             return (
-            <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t('View Source')}>
+                <MatrixClientContext.Consumer>
-                <div className="mx_Dialog_content">
+                    {(cli) => (
-                    <div className="mx_ViewSource_label_left">Room ID: { this.props.roomId }</div>
+                        <SendCustomEvent
-                    <div className="mx_ViewSource_label_left">Event ID: { this.props.eventId }</div>
+                            room={cli.getRoom(roomId)}
+                            forceStateEvent={true}
+                            onBack={() => this.onBack()}
+                            inputs={{
+                                eventType: mxEvent.getType(),
+                                evContent: JSON.stringify(originalContent, null, "\t"),
+                                stateKey: mxEvent.getStateKey(),
+                            }}
+                        />
+                    )}
+                </MatrixClientContext.Consumer>
+            );
+        } else {
+            // prefill an edit-message event
+            // keep only the `body` and `msgtype` fields of originalContent
+            const bodyToStartFrom = originalContent["m.new_content"]?.body ?? originalContent.body; // prefill the last edit body, to start editing from there
+            const newContent = {
+                "body": ` * ${bodyToStartFrom}`,
+                "msgtype": originalContent.msgtype,
+                "m.new_content": {
+                    body: bodyToStartFrom,
+                    msgtype: originalContent.msgtype,
+                },
+                "m.relates_to": {
+                    rel_type: "m.replace",
+                    event_id: this.getBaseEventId(),
+                },
+            };
+            return (
+                <MatrixClientContext.Consumer>
+                    {(cli) => (
+                        <SendCustomEvent
+                            room={cli.getRoom(roomId)}
+                            forceStateEvent={false}
+                            forceGeneralEvent={true}
+                            onBack={() => this.onBack()}
+                            inputs={{
+                                eventType: mxEvent.getType(),
+                                evContent: JSON.stringify(newContent, null, "\t"),
+                            }}
+                        />
+                    )}
+                </MatrixClientContext.Consumer>
+            );
+        }
+    }
+
+    canSendStateEvent(mxEvent) {
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(mxEvent.getRoomId());
+        return room.currentState.mayClientSendStateEvent(mxEvent.getType(), cli);
+    }
+
+    render() {
+        const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
+        const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
+
+        const isEditing = this.state.isEditing;
+        const roomId = mxEvent.getRoomId();
+        const eventId = mxEvent.getId();
+        const canEdit = mxEvent.isState() ? this.canSendStateEvent(mxEvent) : canEditContent(this.props.mxEvent);
+        return (
+            <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
+                <div>
+                    <div className="mx_ViewSource_label_left">Room ID: {roomId}</div>
+                    <div className="mx_ViewSource_label_left">Event ID: {eventId}</div>
                     <div className="mx_ViewSource_separator" />
-                    { content }
+                    {isEditing ? this.editSourceContent() : this.viewSourceContent()}
                 </div>
+                {!isEditing && canEdit && (
+                    <div className="mx_Dialog_buttons">
+                        <button onClick={() => this.onEdit()}>{_t("Edit")}</button>
+                    </div>
+                )}
             </BaseDialog>
         );
     }

src/components/views/context_menus/MessageContextMenu.js

@@ -126,15 +126,9 @@ export default class MessageContextMenu extends React.Component {
     };
 
     onViewSourceClick = () => {
-        const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Event Source', '', ViewSource, {
-            roomId: ev.getRoomId(),
+            mxEvent: this.props.mxEvent,
-            eventId: ev.getId(),
-            content: ev.event,
-            isEncrypted: ev.isEncrypted(),
-            // FIXME: _clearEvent is private
-            decryptedContent: ev._clearEvent,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     };

src/components/views/dialogs/DevtoolsDialog.js

@@ -74,13 +74,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,
     };
 
@@ -141,6 +142,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">
@@ -156,7 +159,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> }

src/components/views/messages/EditHistoryMessage.js

@@ -76,12 +76,7 @@ export default class EditHistoryMessage extends React.PureComponent {
     _onViewSourceClick = () => {
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Event Source', 'Edit history', ViewSource, {
-            roomId: this.props.mxEvent.getRoomId(),
+            mxEvent: this.props.mxEvent,
-            eventId: this.props.mxEvent.getId(),
-            content: this.props.mxEvent.event,
-            isEncrypted: this.props.mxEvent.isEncrypted(),
-            // FIXME: _clearEvent is private
-            decryptedContent: this.props.mxEvent._clearEvent,
         }, 'mx_Dialog_viewsource');
     };