Add new widget API actions for changing rooms and sending/receiving events

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -61,7 +61,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
     }
 
     public componentDidMount() {
-        const driver = new StopGapWidgetDriver( []);
+        const driver = new StopGapWidgetDriver( [], this.widget.type);
         const messaging = new ClientWidgetApi(this.widget, this.appFrame.current, driver);
         this.setState({messaging});
     }

src/stores/widgets/ElementWidgetActions.ts

@@ -14,8 +14,17 @@
  * limitations under the License.
  */
 
+import { IWidgetApiRequest } from "matrix-widget-api";
+
 export enum ElementWidgetActions {
     ClientReady = "im.vector.ready",
     HangupCall = "im.vector.hangup",
     OpenIntegrationManager = "integration_manager_open",
+    ViewRoom = "io.element.view_room",
+}
+
+export interface IViewRoomApiRequest extends IWidgetApiRequest {
+    data: {
+        room_id: string; // eslint-disable-line camelcase
+    };
 }

src/stores/widgets/ElementWidgetCapabilities.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2020 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export enum ElementWidgetCapabilities {
+    CanChangeViewedRoom = "io.element.view_room",
+}

src/stores/widgets/StopGapWidget.ts

@@ -32,7 +32,7 @@ import {
     Widget,
     WidgetApiToWidgetAction,
     WidgetApiFromWidgetAction,
-    IModalWidgetOpenRequest,
+    IModalWidgetOpenRequest, IWidgetApiErrorResponseData,
 } from "matrix-widget-api";
 import { StopGapWidgetDriver } from "./StopGapWidgetDriver";
 import { EventEmitter } from "events";
@@ -47,13 +47,16 @@ import { WidgetType } from "../../widgets/WidgetType";
 import ActiveWidgetStore from "../ActiveWidgetStore";
 import { objectShallowClone } from "../../utils/objects";
 import defaultDispatcher from "../../dispatcher/dispatcher";
-import { ElementWidgetActions } from "./ElementWidgetActions";
+import { ElementWidgetActions, IViewRoomApiRequest } from "./ElementWidgetActions";
 import Modal from "../../Modal";
 import WidgetOpenIDPermissionsDialog from "../../components/views/dialogs/WidgetOpenIDPermissionsDialog";
 import {ModalWidgetStore} from "../ModalWidgetStore";
 import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
 import {getCustomTheme} from "../../theme";
 import CountlyAnalytics from "../../CountlyAnalytics";
+import { ElementWidgetCapabilities } from "./ElementWidgetCapabilities";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import ActiveRoomObserver from "../../ActiveRoomObserver";
 
 // TODO: Destroy all of this code
 
@@ -286,7 +289,8 @@ export class StopGapWidget extends EventEmitter {
 
     public start(iframe: HTMLIFrameElement) {
         if (this.started) return;
-        const driver = new StopGapWidgetDriver( this.appTileProps.whitelistCapabilities || []);
+        const allowedCapabilities = this.appTileProps.whitelistCapabilities || [];
+        const driver = new StopGapWidgetDriver( allowedCapabilities, this.mockWidget.type);
         this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
         this.messaging.on("preparing", () => this.emit("preparing"));
         this.messaging.on("ready", () => this.emit("ready"));
@@ -298,6 +302,39 @@ export class StopGapWidget extends EventEmitter {
             ActiveWidgetStore.setRoomId(this.mockWidget.id, this.appTileProps.room.roomId);
         }
 
+        // Always attach a handler for ViewRoom, but permission check it internally
+        this.messaging.on(`action:${ElementWidgetActions.ViewRoom}`, (ev: CustomEvent<IViewRoomApiRequest>) => {
+            ev.preventDefault(); // stop the widget API from auto-rejecting this
+
+            // Check up front if this is even a valid request
+            const targetRoomId = (ev.detail.data || {}).room_id;
+            if (!targetRoomId) {
+                return this.messaging.transport.reply(ev.detail, <IWidgetApiErrorResponseData>{
+                    error: {message: "Invalid room ID."},
+                });
+            }
+
+            // Check the widget's permission
+            if (!this.messaging.hasCapability(ElementWidgetCapabilities.CanChangeViewedRoom)) {
+                return this.messaging.transport.reply(ev.detail, <IWidgetApiErrorResponseData>{
+                    error: {message: "This widget does not have permission for this action (denied)."},
+                });
+            }
+
+            // at this point we can change rooms, so do that
+            defaultDispatcher.dispatch({
+                action: 'view_room',
+                room_id: targetRoomId,
+            });
+
+            // acknowledge so the widget doesn't freak out
+            this.messaging.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
+        });
+
+        // Attach listeners for feeding events - the underlying widget classes handle permissions for us
+        MatrixClientPeg.get().on('event', this.onEvent);
+        MatrixClientPeg.get().on('Event.decrypted', this.onEventDecrypted);
+
         if (WidgetType.JITSI.matches(this.mockWidget.type)) {
             this.messaging.on("action:set_always_on_screen",
                 (ev: CustomEvent<IStickyActionRequest>) => {
@@ -391,5 +428,31 @@ export class StopGapWidget extends EventEmitter {
         if (!this.started) return;
         WidgetMessagingStore.instance.stopMessaging(this.mockWidget);
         ActiveWidgetStore.delRoomId(this.mockWidget.id);
+
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().off('event', this.onEvent);
+            MatrixClientPeg.get().off('Event.decrypted', this.onEventDecrypted);
+        }
+    }
+
+    private onEvent = (ev: MatrixEvent) => {
+        if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) return;
+        if (ev.getRoomId() !== ActiveRoomObserver.activeRoomId) return;
+        this.feedEvent(ev);
+    };
+
+    private onEventDecrypted = (ev: MatrixEvent) => {
+        if (ev.isDecryptionFailure()) return;
+        if (ev.getRoomId() !== ActiveRoomObserver.activeRoomId) return;
+        this.feedEvent(ev);
+    };
+
+    private feedEvent(ev: MatrixEvent) {
+        if (!this.messaging) return;
+
+        const raw = ev.event;
+        this.messaging.feedEvent(raw).catch(e => {
+            console.error("Error sending event to widget: ", e);
+        });
     }
 }

src/stores/widgets/StopGapWidgetDriver.ts

@@ -14,17 +14,64 @@
  * limitations under the License.
  */
 
-import { Capability, WidgetDriver } from "matrix-widget-api";
+import { Capability, ISendEventDetails, WidgetDriver, WidgetEventCapability, WidgetType } from "matrix-widget-api";
 import { iterableUnion } from "../../utils/iterables";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { arrayFastClone } from "../../utils/arrays";
+import { ElementWidgetCapabilities } from "./ElementWidgetCapabilities";
+import ActiveRoomObserver from "../../ActiveRoomObserver";
 
 // TODO: Purge this from the universe
 
 export class StopGapWidgetDriver extends WidgetDriver {
-    constructor(private allowedCapabilities: Capability[]) {
+    constructor(private allowedCapabilities: Capability[], private forType: WidgetType) {
         super();
     }
 
     public async validateCapabilities(requested: Set<Capability>): Promise<Set<Capability>> {
-        return new Set(iterableUnion(requested, this.allowedCapabilities));
+        // TODO: All of this should be a capabilities prompt.
+        // See https://github.com/vector-im/element-web/issues/13111
+
+        // Note: None of this well-known widget permissions stuff is documented intentionally. We
+        // do not want to encourage people relying on this, but need to be able to support it at
+        // the moment.
+        //
+        // If you're a widget developer and seeing this message, please ask the Element team if
+        // it is safe for you to use this permissions system before trying to use it - it might
+        // not be here in the future.
+
+        const wkPerms = (MatrixClientPeg.get().getClientWellKnown() || {})['io.element.widget_permissions'];
+        const allowedCaps = arrayFastClone(this.allowedCapabilities);
+        if (wkPerms) {
+            if (Array.isArray(wkPerms["view_room_action"])) {
+                if (wkPerms["view_room_action"].includes(this.forType)) {
+                    allowedCaps.push(ElementWidgetCapabilities.CanChangeViewedRoom);
+                }
+            }
+            if (Array.isArray(wkPerms["event_actions"])) {
+                if (wkPerms["event_actions"].includes(this.forType)) {
+                    allowedCaps.push(...WidgetEventCapability.findEventCapabilities(requested).map(c => c.raw));
+                }
+            }
+        }
+        return new Set(iterableUnion(requested, allowedCaps));
+    }
+
+    public async sendEvent(eventType: string, content: any, stateKey: string = null): Promise<ISendEventDetails> {
+        const client = MatrixClientPeg.get();
+        const roomId = ActiveRoomObserver.activeRoomId;
+
+        if (!client || !roomId) throw new Error("Not in a room or not attached to a client");
+
+        let r: {event_id: string} = null; // eslint-disable-line camelcase
+        if (stateKey !== null) {
+            // state event
+            r = await client.sendStateEvent(roomId, eventType, content, stateKey);
+        } else {
+            // message event
+            r = await client.sendEvent(roomId, eventType, content);
+        }
+
+        return {roomId, eventId: r.event_id};
     }
 }