Pass device id to widgets (#10209)

* Pass device id to widget

Implement the [comment in MSC 3819](https://github.com/matrix-org/matrix-spec-proposals/pull/3819#discussion_r1099833846) which requests passing a device id to a widget.

This is based on the previous work in the matrix-widget-api: https://github.com/matrix-org/matrix-widget-api/pull/78

Signed-off-by: Oliver Sand <oliver.sand@nordeck.net>

* Include all data that is shared in the permissions screen

* Update matrix-widget-api to version 1.4.0

Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net>

* Fix type and test

Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net>

---------

Signed-off-by: Oliver Sand <oliver.sand@nordeck.net>
Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net>
Co-authored-by: Dominik Henneke <dominik.henneke@nordeck.net>

package.json

@@ -96,7 +96,7 @@
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
         "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-        "matrix-widget-api": "^1.3.1",
+        "matrix-widget-api": "^1.4.0",
         "memoize-one": "^6.0.0",
         "minimist": "^1.2.5",
         "opus-recorder": "^8.0.3",

src/components/views/elements/AppPermission.tsx

@@ -104,7 +104,9 @@ export default class AppPermission extends React.Component<IProps, IState> {
                     <li>{_t("Your display name")}</li>
                     <li>{_t("Your avatar URL")}</li>
                     <li>{_t("Your user ID")}</li>
+                    <li>{_t("Your device ID")}</li>
                     <li>{_t("Your theme")}</li>
+                    <li>{_t("Your language")}</li>
                     <li>{_t("%(brand)s URL", { brand })}</li>
                     <li>{_t("Room ID")}</li>
                     <li>{_t("Widget ID")}</li>

src/i18n/strings/en_EN.json

@@ -2523,7 +2523,9 @@
     "Your display name": "Your display name",
     "Your avatar URL": "Your avatar URL",
     "Your user ID": "Your user ID",
+    "Your device ID": "Your device ID",
     "Your theme": "Your theme",
+    "Your language": "Your language",
     "%(brand)s URL": "%(brand)s URL",
     "Room ID": "Room ID",
     "Widget ID": "Widget ID",

src/stores/widgets/StopGapWidget.ts

@@ -221,6 +221,7 @@ export class StopGapWidget extends EventEmitter {
             clientId: ELEMENT_CLIENT_ID,
             clientTheme: SettingsStore.getValue("theme"),
             clientLanguage: getUserLanguage(),
+            deviceId: this.client.getDeviceId() ?? undefined,
         };
         const templated = this.mockWidget.getCompleteUrl(Object.assign(defaults, fromCustomisation), opts?.asPopout);
 

test/stores/widgets/StopGapWidget-test.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { mocked, MockedObject } from "jest-mock";
+import { last } from "lodash";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { MatrixClient, ClientEvent } from "matrix-js-sdk/src/client";
 import { ClientWidgetApi } from "matrix-widget-api";
@@ -42,7 +43,7 @@ describe("StopGapWidget", () => {
                 id: "test",
                 creatorUserId: "@alice:example.org",
                 type: "example",
-                url: "https://example.org",
+                url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id",
                 roomId: "!1:example.org",
             },
             room: mkRoom(client, "!1:example.org"),
@@ -53,13 +54,19 @@ describe("StopGapWidget", () => {
         });
         // Start messaging without an iframe, since ClientWidgetApi is mocked
         widget.startMessaging(null as unknown as HTMLIFrameElement);
-        messaging = mocked(mocked(ClientWidgetApi).mock.instances[0]);
+        messaging = mocked(last(mocked(ClientWidgetApi).mock.instances)!);
     });
 
     afterEach(() => {
         widget.stopMessaging();
     });
 
+    it("should replace parameters in widget url template", () => {
+        expect(widget.embedUrl).toBe(
+            "https://example.org/?user-id=%40userId%3Amatrix.org&device-id=ABCDEFGHI&widgetId=test&parentUrl=http%3A%2F%2Flocalhost%2F",
+        );
+    });
+
     it("feeds incoming to-device messages to the widget", async () => {
         const event = mkEvent({
             event: true,

yarn.lock

@@ -6472,7 +6472,7 @@ matrix-web-i18n@^1.4.0:
     "@babel/traverse" "^7.18.5"
     walk "^2.3.15"
 
-matrix-widget-api@^1.3.1:
+matrix-widget-api@^1.3.1, matrix-widget-api@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.4.0.tgz#e426ec16a013897f3a4a9c2bff423f54ab0ba745"
   integrity sha512-dw0dRylGQzDUoiaY/g5xx1tBbS7aoov31PRtFMAvG58/4uerYllV9Gfou7w+I1aglwB6hihTREzKltVjARWV6A==