diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js index a0c5375843..a754a62b50 100644 --- a/src/components/views/dialogs/DevtoolsDialog.js +++ b/src/components/views/dialogs/DevtoolsDialog.js @@ -32,6 +32,8 @@ import { PHASE_STARTED, PHASE_CANCELLED, } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; +import WidgetStore from "../../../stores/WidgetStore"; +import {UPDATE_EVENT} from "../../../stores/AsyncStore"; class GenericEditor extends React.PureComponent { // static propTypes = {onBack: PropTypes.func.isRequired}; @@ -701,6 +703,97 @@ class VerificationExplorer extends React.Component { } } +class WidgetExplorer extends React.Component { + static getLabel() { + return _t("Active Widgets"); + } + + constructor(props) { + super(props); + + this.state = { + query: '', + editWidget: null, // set to an IApp when editing + }; + } + + onWidgetStoreUpdate = () => { + this.forceUpdate(); + }; + + onQueryChange = (query) => { + this.setState({query}); + }; + + onEditWidget = (widget) => { + this.setState({editWidget: widget}); + }; + + onBack = () => { + const widgets = WidgetStore.instance.getApps(this.props.room.roomId); + if (this.state.editWidget && widgets.includes(this.state.editWidget)) { + this.setState({editWidget: null}); + } else { + this.props.onBack(); + } + }; + + componentDidMount() { + WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate); + } + + componentWillUnmount() { + WidgetStore.instance.off(UPDATE_EVENT, this.onWidgetStoreUpdate); + } + + render() { + const room = this.props.room; + + const editWidget = this.state.editWidget; + const widgets = WidgetStore.instance.getApps(room.roomId); + if (editWidget && widgets.includes(editWidget)) { + const allState = Array.from(Array.from(room.currentState.events.values()).map(e => e.values())) + .reduce((p, c) => {p.push(...c); return p;}, []); + const stateEv = allState.find(ev => ev.getId() === editWidget.eventId); + if (!stateEv) { // "should never happen" + return
+ {_t("There was an error finding this widget.")} +
+ +
+
; + } + return ; + } + + return (
+
+ + {widgets.map(w => + + )} + +
+
+ +
+
); + } +} + const Entries = [ SendCustomEvent, RoomStateExplorer, @@ -708,6 +801,7 @@ const Entries = [ AccountDataExplorer, ServersInRoomList, VerificationExplorer, + WidgetExplorer, ]; export default class DevtoolsDialog extends React.PureComponent { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c0939871e2..155dc34c8c 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2042,6 +2042,8 @@ "Explore Account Data": "Explore Account Data", "View Servers in Room": "View Servers in Room", "Verification Requests": "Verification Requests", + "Active Widgets": "Active Widgets", + "There was an error finding this widget.": "There was an error finding this widget.", "Toolbox": "Toolbox", "Developer Tools": "Developer Tools", "There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",