Merge pull request #27 from nordeck/nic/feat/add-lifecycle-logic

Add the widget lifecycle module

.github/dependabot.yml

@@ -14,6 +14,10 @@ updates:
  development-dependencies:
  dependency-type: 'development'
  ignore:
+ # The version of the module api describes the compatibility with the Element version. Every
+ # package can use a different version and we only want to update it if we need new
+ # features.
+ - dependency-name: '@matrix-org/react-sdk-module-api'
  # For TypeScript, ignore all updates. Stick to the version of @microsoft/api-extractor.
  - dependency-name: 'typescript'
  # Stick to the react version of Element

.github/workflows/ci.yml

@@ -168,7 +168,7 @@ jobs:
  run: yarn install --frozen-lockfile
 
  - name: build
- run: yarn build
+ run: yarn e2e:build
 
  - name: Install Playwright Browsers
  run: npx playwright install --with-deps chromium

README.md

@@ -14,6 +14,12 @@ This module also requires the installation of a Synapse module:
 - See the [Readme of the `element-web-guest-module`](./packages/element-web-guest-module/README.md) for instructions on how to install it in Element.
 - See the [Readme of the `synapse-guest-module`](./packages/synapse-guest-module/README.md) for instructions on how to install it in your Synapse homeserver.
 
+### Element Web Widget Lifecycle Module
+
+A module to approve widget capabilities so the user is asked:
+
+- See the [Readme of the `element-web-widget-lifecycle-module`](./packages/element-web-widget-lifecycle-module/README.md) for instructions on how to install it in Element.
+
 ## Getting Started
 
 Development on the module happens at [GitHub](https://github.com/nordeck/element-web-modules).

e2e/README.md

@@ -11,7 +11,7 @@ Running the e2e tests requires Docker to be installed.
 ### Running Tests
 
 The e2e tests are testing the guest module for Element and for Synapse.
-Make sure to always run `yarn build` in the root folder before initially running the tests or after changing a component.
+Make sure to always run `yarn e2e:build` in the root folder before initially running the tests or after changing a component.
 
 1. **Synapse Module**: By default, it uses the image that was built by running `yarn docker:build` in the root folder of this repository.
  Building the container at least once is required to run the tests.

e2e/package.json

@@ -12,18 +12,19 @@
  "cross-fetch": "^4.0.0",
  "eslint": "^8.49.0",
  "eslint-plugin-playwright": "^0.16.0",
- "shx": "^0.3.4",
  "testcontainers": "^10.2.1",
  "typescript": "~5.0.4"
  },
  "scripts": {
  "clean": "echo \"Nothing to clean\"",
- "build": "yarn workspace @nordeck/element-web-guest-module build && yarn workspace @nordeck/element-web-guest-module package && shx rm -rf src/deploy/elementWeb/*.tgz && shx cp ../packages/element-web-guest-module/*.tgz src/deploy/elementWeb/element-web-guest-module.tgz && yarn workspace @nordeck/synapse-guest-module docker:build",
+ "build": "echo \"Nothing to build\"",
  "docker:build": "echo \"Nothing to build\"",
  "tsc": "tsc",
  "lint": "eslint . --max-warnings=0",
  "depcheck": "depcheck --ignores=typescript",
  "e2e": "playwright test --headed --project=chromium --workers=1 --reporter=dot",
- "e2e:all": "yarn playwright test --reporter=dot"
+ "e2e:all": "yarn playwright test --reporter=dot",
+ "e2e:build": "yarn workspaces run package && shx rm -rf src/deploy/elementWeb/*.tgz && shx cp ../packages/**/*.tgz src/deploy/elementWeb/",
+ "package": "echo \"Nothing to clean\""
  }
 }

e2e/src/deploy/elementWeb/Dockerfile

@@ -10,7 +10,7 @@ RUN git clone --depth 1 --branch $ELEMENT_VERSION https://github.com/vector-im/e
 RUN yarn --network-timeout=200000 install
 
 # Add all configurations
-COPY /*.tgz /src
+COPY /*.tgz /src/
 COPY /build_config.yaml /src
 COPY /customisations.json /src
 

e2e/src/deploy/elementWeb/build_config.yaml

@@ -1,3 +1,4 @@
 # Register the module that was created by `yarn build`
 modules:
- - 'file:element-web-guest-module.tgz'
+ - 'file:nordeck-element-web-guest-module.tgz'
+ - 'file:nordeck-element-web-widget-lifecycle-module.tgz'

e2e/src/deploy/elementWeb/config.json

@@ -48,5 +48,16 @@
  "guest_user_homeserver_url": "{{HOMESERVER_URL}}",
  "skip_single_sign_on": true
  }
+ },
+ "net.nordeck.element_web.module.widget_lifecycle": {
+ "widget_permissions": {
+ "{{WIDGET_SERVER_URL}}/widget.html": {
+ "preload_approved": true,
+ "identity_approved": true,
+ "capabilities_approved": [
+ "org.matrix.msc2762.receive.state_event:m.room.topic"
+ ]
+ }
+ }
  }
 }

e2e/src/deploy/elementWeb/index.ts

@@ -21,9 +21,11 @@ let container: StartedTestContainer | undefined;
 
 export async function startElementWeb({
  homeserverUrl,
+ widgetServerUrl,
  version = 'v1.11.40',
 }: {
  homeserverUrl: string;
+ widgetServerUrl: string;
  version?: string;
 }): Promise<{ elementWebUrl: string }> {
  console.log(`Starting element web… (version ${version})`);
@@ -32,10 +34,9 @@ export async function startElementWeb({
  require.resolve('./config.json'),
  'utf-8',
  );
- const elementWebConfig = elementWebConfigTemplate.replace(
- /{{HOMESERVER_URL}}/g,
- homeserverUrl,
- );
+ const elementWebConfig = elementWebConfigTemplate
+ .replace(/{{HOMESERVER_URL}}/g, homeserverUrl)
+ .replace(/{{WIDGET_SERVER_URL}}/g, widgetServerUrl);
 
  const elementContainer = await GenericContainer.fromDockerfile(__dirname)
  .withBuildArgs({ ELEMENT_VERSION: version })

e2e/src/deploy/setup.ts

@@ -17,6 +17,7 @@
 import { FullConfig } from '@playwright/test';
 import { startElementWeb } from './elementWeb';
 import { startSynapse } from './synapse';
+import { startWidgetServer } from './widgets';
 
 export default async function globalSetup(_config: FullConfig) {
  const { synapseUrl, registrationSecret } = await startSynapse({
@@ -25,8 +26,14 @@ export default async function globalSetup(_config: FullConfig) {
  process.env.SYNAPSE_URL = synapseUrl;
  process.env.SYNAPSE_REGISTRATION_SECRET = registrationSecret;
 
+ const { widgetServerUrl } = await startWidgetServer({
+ homeserverUrl: synapseUrl,
+ });
+ process.env.WIDGET_SERVER_URL = widgetServerUrl;
+
  const { elementWebUrl } = await startElementWeb({
  homeserverUrl: synapseUrl,
+ widgetServerUrl,
  });
  process.env.ELEMENT_WEB_URL = elementWebUrl;
 }

e2e/src/deploy/teardown.ts

@@ -17,7 +17,8 @@
 import { FullConfig } from '@playwright/test';
 import { stopElementWeb } from './elementWeb';
 import { stopSynapse } from './synapse';
+import { stopWidgetServer } from './widgets';
 
 export default async function globalTeardown(_config: FullConfig) {
- await Promise.all([stopSynapse(), stopElementWeb()]);
+ await Promise.all([stopSynapse(), stopWidgetServer(), stopElementWeb()]);
 }

e2e/src/deploy/widgets/index.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2023 Nordeck IT + Consulting GmbH
+ *
+ * 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.
+ */
+
+import { readFile } from 'fs/promises';
+import * as http from 'http';
+import { AddressInfo } from 'net';
+
+let server: http.Server;
+
+export async function startWidgetServer({
+ homeserverUrl,
+}: {
+ homeserverUrl: string;
+}): Promise<{
+ widgetServerUrl: string;
+}> {
+ console.log(`Starting widget server…`);
+
+ const widgetHtmlTemplate = await readFile(
+ require.resolve('./widget.html'),
+ 'utf-8',
+ );
+
+ const widgetHtml = widgetHtmlTemplate.replace(
+ /{{HOMESERVER_URL}}/g,
+ homeserverUrl,
+ );
+
+ server = http.createServer((_, res) => {
+ res.writeHead(200, { 'Content-Type': 'text/html' });
+ res.end(widgetHtml);
+ });
+ server.listen();
+
+ const widgetServerUrl = `http://localhost:${
+ (server.address() as AddressInfo).port
+ }`;
+ console.log('Widget server running at', widgetServerUrl);
+
+ return { widgetServerUrl };
+}
+
+export async function stopWidgetServer() {
+ if (server) {
+ server.close();
+ console.log('Stopped widget server');
+ }
+}

e2e/src/deploy/widgets/widget.html

@@ -0,0 +1,55 @@
+<html lang="en">
+ <head>
+ <title>Demo Widget</title>
+ <script>
+ let sendEventCount = 0;
+ window.onmessage = async (ev) => {
+ if (ev.data.action === 'capabilities') {
+ // Return the capabilities for this widget
+ window.parent.postMessage(
+ Object.assign(
+ {
+ response: {
+ capabilities: [
+ 'org.matrix.msc2762.receive.state_event:m.room.topic',
+ ],
+ },
+ },
+ ev.data,
+ ),
+ '*',
+ );
+ } else if (ev.data.action === 'notify_capabilities') {
+ // Ask for an openid token
+ window.parent.postMessage(
+ {
+ api: 'fromWidget',
+ widgetId: ev.data.widgetId,
+ requestId: 'widget-' + sendEventCount,
+ action: 'get_openid',
+ data: {},
+ },
+ '*',
+ );
+ } else if (
+ ev.data.action === 'get_openid' &&
+ ev.data.response?.state === 'allowed'
+ ) {
+ // Add the userid to the heading
+ const { matrix_server_name, access_token } = ev.data.response;
+
+ const response = await fetch(
+ `{{HOMESERVER_URL}}/_matrix/federation/v1/openid/userinfo?access_token=${access_token}`,
+ );
+ const { sub } = await response.json();
+
+ const titleElement = document.getElementById('title');
+ titleElement.innerText = `Hello ${sub}!`;
+ }
+ };
+ </script>
+ </head>
+ <body>
+ <h1 id="title">Hello unknown!</h1>
+ </body>
+</html>

e2e/src/fixtures.ts

@@ -24,6 +24,8 @@ type Fixtures = {
  alicePage: Page;
  aliceElementWebPage: ElementWebPage;
  bob: User;
+ bobPage: Page;
+ bobElementWebPage: ElementWebPage;
  guestPage: Page;
  guestElementWebPage: ElementWebPage;
  runAxeAnalysis: (page: Page) => Promise<string>;
@@ -65,6 +67,48 @@ export const test = base.extend<Fixtures>({
  await use(user);
  },
 
+ bobPage: async ({ browser, contextOptions, video }, use, testInfo) => {
+ // TODO: For some reason we are missing the video in case we are using a
+ // second context https://github.com/microsoft/playwright/issues/9002
+ // We configure it manually instead.
+ const videoMode = typeof video === 'string' ? video : video.mode;
+ const videoOptions = shouldCaptureVideo(videoMode, testInfo)
+ ? {
+ recordVideo: {
+ dir: testInfo.outputDir,
+ size: typeof video !== 'string' ? video.size : undefined,
+ },
+ }
+ : {};
+
+ const context = await browser.newContext({
+ ...contextOptions,
+ ...videoOptions,
+ });
+ const page = await context.newPage();
+
+ try {
+ await use(page);
+ } finally {
+ await context.close();
+
+ const video = page.video();
+
+ if (video) {
+ const path = testInfo.outputPath('video-bob.webm');
+ await video.saveAs(path);
+ testInfo.attach('video', { path, contentType: 'video/webm' });
+ }
+ }
+ },
+
+ bobElementWebPage: async ({ bobPage, bob }, use) => {
+ const elementWebPage = new ElementWebPage(bobPage);
+ await elementWebPage.login(bob.username, bob.password);
+
+ await use(elementWebPage);
+ },
+
  guestPage: async ({ browser, contextOptions, video }, use, testInfo) => {
  // TODO: For some reason we are missing the video in case we are using a
  // second context https://github.com/microsoft/playwright/issues/9002