imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor all of Devtools and tidy it up (#8097)

Browse source
This commit is contained in:
Michael Telatynski 2022-03-23 20:17:57 +00:00 • committed by GitHub
parent 64871c057b
commit 306ddd51e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 1516 additions and 1562 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/components/structures/ViewSource.tsx
View file

@ -22,12 +22,14 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import SyntaxHighlight from "../views/elements/SyntaxHighlight";
import { _t } from "../../languageHandler";
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";
import { IDialogProps } from "../views/dialogs/IDialogProps";
import BaseDialog from "../views/dialogs/BaseDialog";
import { DevtoolsContext } from "../views/dialogs/devtools/BaseTool";
import { StateEventEditor } from "../views/dialogs/devtools/RoomState";
import { stringify, TimelineEventEditor } from "../views/dialogs/devtools/Event";
interface IProps extends IDialogProps {
mxEvent: MatrixEvent; // the MatrixEvent associated with the context menu
@ -47,10 +49,10 @@ export default class ViewSource extends React.Component<IProps, IState> {
};
}
private onBack(): void {
private onBack = (): void => {
// TODO: refresh the "Event ID:" modal header
this.setState({ isEditing: false });
}
};
private onEdit(): void {
this.setState({ isEditing: true });
@ -71,13 +73,13 @@ export default class ViewSource extends React.Component<IProps, IState> {
<summary>
<span className="mx_ViewSource_heading">{ _t("Decrypted event source") }</span>
</summary>
<SyntaxHighlight language="json">{ JSON.stringify(decryptedEventSource, null, 2) }</SyntaxHighlight>
<SyntaxHighlight language="json">{ stringify(decryptedEventSource) }</SyntaxHighlight>
</details>
<details className="mx_ViewSource_details">
<summary>
<span className="mx_ViewSource_heading">{ _t("Original event source") }</span>
</summary>
<SyntaxHighlight language="json">{ JSON.stringify(originalEventSource, null, 2) }</SyntaxHighlight>
<SyntaxHighlight language="json">{ stringify(originalEventSource) }</SyntaxHighlight>
</details>
</>
);
@ -85,84 +87,40 @@ export default class ViewSource extends React.Component<IProps, IState> {
return (
<>
<div className="mx_ViewSource_heading">{ _t("Original event source") }</div>
<SyntaxHighlight language="json">{ JSON.stringify(originalEventSource, null, 2) }</SyntaxHighlight>
<SyntaxHighlight language="json">{ stringify(originalEventSource) }</SyntaxHighlight>
</>
);
}
}
// returns the id of the initial message, not the id of the previous edit
private getBaseEventId(): string {
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
private editSourceContent(): JSX.Element {
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 (
<MatrixClientContext.Consumer>
{ (cli) => (
<SendCustomEvent
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"),
}}
/>
<DevtoolsContext.Provider value={{ room: cli.getRoom(roomId) }}>
<StateEventEditor onBack={this.onBack} mxEvent={mxEvent} />
</DevtoolsContext.Provider>
) }
</MatrixClientContext.Consumer>
);
}
return (
<MatrixClientContext.Consumer>
{ (cli) => (
<DevtoolsContext.Provider value={{ room: cli.getRoom(roomId) }}>
<TimelineEventEditor onBack={this.onBack} mxEvent={mxEvent} />
</DevtoolsContext.Provider>
) }
</MatrixClientContext.Consumer>
);
}
private canSendStateEvent(mxEvent: MatrixEvent): boolean {
@ -181,8 +139,8 @@ export default class ViewSource extends React.Component<IProps, IState> {
return (
<BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
<div>
<div>Room ID: { roomId }</div>
<div>Event ID: { eventId }</div>
<div>{ _t("Room ID: %(roomId)s", { roomId }) }</div>
<div>{ _t("Event ID: %(eventId)s", { eventId }) }</div>
<div className="mx_ViewSource_separator" />
{ isEditing ? this.editSourceContent() : this.viewSourceContent() }
</div>