Add support for extra widgets in the session rooms

.changeset/eight-mails-taste.md

@@ -0,0 +1,5 @@
+---
+'matrix-barcamp-widget': minor
+---
+
+Add support for extra widgets in the session rooms.

.changeset/honest-flies-heal.md

@@ -0,0 +1,5 @@
+---
+'matrix-barcamp-widget': patch
+---
+
+Reduce the height of the slots and make the tracks fill the full width.

.changeset/tiny-rules-juggle.md

@@ -0,0 +1,5 @@
+---
+'matrix-barcamp-widget': minor
+---
+
+Add more track icons.

.gitignore

@@ -71,6 +71,7 @@ typings/
 # dotenv environment variables file
 .env
 .env.test
+.env.local
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache

docs/configuration.md

@@ -8,12 +8,17 @@ Runtime configuration can be performed via environment variables.
 ## Environment Variables
 
 ```sh
-#  Configures the base URL of Element, used to register the Jitsi Widget.
+# Configures the base URL of Element, used to register the Jitsi Widget.
 # Setting the variable is not important, as an Element intance chooses to use a
 # local version of the Jitsi Widget anyway. Defaults to `https://app.element.io`.
 REACT_APP_ELEMENT_BASE_URL=https://app.element.io
 
 # The hostname of the Jitsi Instance where video conferences should be hosted.
 # Defaults to `jitsi.riot.im`
 REACT_APP_JITSI_HOST_NAME=jitsi.riot.im
+
+# Additional widgets that should be added to the session rooms.
+# Example: `[{"id":"widget","name":"Widget","type":"net.nordeck.widget-2:pad","url":"http://2.widget.example"}]`
+# Important: The id and type fields must be unique.
+REACT_APP_EXTRA_WIDGETS=[]
 ```

src/components/IconPicker/IconPicker.test.tsx

@@ -42,7 +42,7 @@ describe('<IconPicker>', () => {
 
     const list = screen.getByRole('listbox', { name: /available icons/i });
 
-    expect(within(list).getAllByRole('option')).toHaveLength(25);
+    expect(within(list).getAllByRole('option')).toHaveLength(30);
     expect(
       within(list).getByRole('option', { name: 'Icon "dog"', selected: true })
     ).toBeInTheDocument();
@@ -109,25 +109,28 @@ describe('<IconPicker>', () => {
 
     expect(
       within(list).getByRole('option', {
-        name: 'Icon "compass"',
+        name: 'Icon "server"',
         selected: true,
       })
     ).toBeInTheDocument();
     expect(
-      screen.getByRole('combobox', { name: 'Icon "compass"', expanded: true })
+      screen.getByRole('combobox', { name: 'Icon "server"', expanded: true })
     ).toBeInTheDocument();
 
     // Go to end
     await userEvent.keyboard('{End}');
 
     expect(
       within(list).getByRole('option', {
-        name: 'Icon "fire"',
+        name: 'Icon "face surprise"',
         selected: true,
       })
     ).toBeInTheDocument();
     expect(
-      screen.getByRole('combobox', { name: 'Icon "fire"', expanded: true })
+      screen.getByRole('combobox', {
+        name: 'Icon "face surprise"',
+        expanded: true,
+      })
     ).toBeInTheDocument();
 
     // Wrap over last

src/components/IconPicker/icons.ts

@@ -42,6 +42,11 @@ export const iconSet = [
   'car',
   'compass',
   'fire',
+  'pizza slice',
+  'beer mug',
+  'comment',
+  'server',
+  'face surprise',
 ];
 
 export function randomIcon(): string {

src/components/SessionGrid/SessionGrid.tsx

@@ -68,6 +68,7 @@ const TableContainer = styled.table<{
     canDropSession,
     theme,
   }) => ({
+    width: '100%',
     borderSpacing: 0,
     background: canDropSession
       ? `repeating-linear-gradient(45deg, ${theme.pageBackground}, ${theme.pageBackground} 10px, transparent 10px, transparent 20px)`
@@ -88,8 +89,8 @@ const TableContainer = styled.table<{
     'td.session': {
       minWidth: 200,
       width: `${100 / trackCount}%`,
-      minHeight: 200,
-      height: 200,
+      minHeight: 115,
+      height: 115,
     },
 
     // set the default borders, padding, and alignment for all cells

src/store/api/roomWidgetsApi.test.ts

@@ -15,15 +15,24 @@
  */
 
 import { MockedWidgetApi, mockWidgetApi } from '@matrix-widget-toolkit/testing';
+import { getEnvironment } from '../../lib/environment';
 import { createStore } from '../store';
-import { roomWidgetsApi } from './roomWidgetsApi';
+import { getExtraWidgetsWidgets, roomWidgetsApi } from './roomWidgetsApi';
+
+jest.mock('../../lib/environment');
 
 let widgetApi: MockedWidgetApi;
 
 afterEach(() => widgetApi.stop());
 
 beforeEach(() => (widgetApi = mockWidgetApi()));
 
+beforeEach(() => {
+  jest
+    .mocked(getEnvironment)
+    .mockImplementation((_, defaultValue) => defaultValue);
+});
+
 describe('setupLobbyRoomWidgets', () => {
   it('should setup jitsi widget and widget layout', async () => {
     const store = createStore({ widgetApi });
@@ -218,6 +227,118 @@ describe('setupSessionRoomWidgets', () => {
     );
   });
 
+  it('should setup extra widgets', async () => {
+    jest.mocked(getEnvironment).mockImplementation((name, defaultValue) => {
+      switch (name) {
+        case 'REACT_APP_EXTRA_WIDGETS':
+          return JSON.stringify([
+            {
+              id: 'widget-1',
+              type: 'net.nordeck.widget-1:pad',
+              name: 'Widget 1',
+              url: 'http://1.widget.example',
+            },
+            {
+              id: 'widget-2',
+              type: 'net.nordeck.widget-2:pad',
+              name: 'Widget 2',
+              url: 'http://2.widget.example',
+            },
+          ]);
+        default:
+          return defaultValue;
+      }
+    });
+
+    const store = createStore({ widgetApi });
+
+    await store
+      .dispatch(
+        roomWidgetsApi.endpoints.setupSessionRoomWidgets.initiate({
+          roomId: '!room-id',
+          roomName: 'My Room',
+        })
+      )
+      .unwrap();
+
+    expect(widgetApi.sendStateEvent).toBeCalledTimes(5);
+    expect(widgetApi.sendStateEvent).toBeCalledWith(
+      'im.vector.modular.widgets',
+      {
+        creatorUserId: '@user-id',
+        id: 'barcamp',
+        name: 'BarCamp',
+        type: 'net.nordeck.barcamp:clock',
+        url: 'http://localhost/#/?theme=$org.matrix.msc2873.client_theme&matrix_user_id=$matrix_user_id&matrix_display_name=$matrix_display_name&matrix_avatar_url=$matrix_avatar_url&matrix_room_id=$matrix_room_id&matrix_client_id=$org.matrix.msc2873.client_id&matrix_client_language=$org.matrix.msc2873.client_language',
+      },
+      { roomId: '!room-id', stateKey: 'barcamp' }
+    );
+    expect(widgetApi.sendStateEvent).toBeCalledWith(
+      'im.vector.modular.widgets',
+      {
+        creatorUserId: '@user-id',
+        data: {
+          conferenceId: 'EFZG633NFVUWI',
+          domain: 'jitsi.riot.im',
+          roomName: 'My Room',
+        },
+        id: 'jitsi',
+        name: 'Video Conference',
+        type: 'jitsi',
+        url: 'https://app.element.io/jitsi.html?confId=EFZG633NFVUWI#conferenceId=$conferenceId&domain=$domain&displayName=$matrix_display_name&avatarUrl=$matrix_avatar_url&userId=$matrix_user_id&roomId=$matrix_room_id&roomName=$roomName&theme=$theme',
+      },
+      { roomId: '!room-id', stateKey: 'jitsi' }
+    );
+    expect(widgetApi.sendStateEvent).toBeCalledWith(
+      'im.vector.modular.widgets',
+      {
+        creatorUserId: '@user-id',
+        id: 'widget-1',
+        name: 'Widget 1',
+        type: 'net.nordeck.widget-1:pad',
+        url: 'http://1.widget.example',
+      },
+      { roomId: '!room-id', stateKey: 'widget-1' }
+    );
+    expect(widgetApi.sendStateEvent).toBeCalledWith(
+      'im.vector.modular.widgets',
+      {
+        creatorUserId: '@user-id',
+        id: 'widget-2',
+        name: 'Widget 2',
+        type: 'net.nordeck.widget-2:pad',
+        url: 'http://2.widget.example',
+      },
+      { roomId: '!room-id', stateKey: 'widget-2' }
+    );
+    expect(widgetApi.sendStateEvent).toBeCalledWith(
+      'io.element.widgets.layout',
+      {
+        widgets: {
+          jitsi: {
+            container: 'top',
+            height: 100,
+            index: 0,
+            width: 50,
+          },
+          'widget-1': {
+            container: 'top',
+            height: 100,
+            index: 1,
+            width: 30,
+          },
+          barcamp: {
+            container: 'top',
+            height: 100,
+            index: 2,
+            width: 20,
+          },
+        },
+      },
+      { roomId: '!room-id' }
+    );
+  });
+
   it('should update existing jitsi widget, barcamp widget, and widget layout', async () => {
     widgetApi.mockSendStateEvent({
       content: {
@@ -325,3 +446,97 @@ describe('setupSessionRoomWidgets', () => {
     );
   });
 });
+
+describe('getExtraWidgetsWidgets', () => {
+  it('should accept configuration', () => {
+    jest.mocked(getEnvironment).mockImplementation((name, defaultValue) => {
+      switch (name) {
+        case 'REACT_APP_EXTRA_WIDGETS':
+          return JSON.stringify([
+            {
+              id: 'widget-1',
+              type: 'net.nordeck.widget-1:pad',
+              name: 'Widget 1',
+              url: 'http://1.widget.example',
+            },
+          ]);
+        default:
+          return defaultValue;
+      }
+    });
+
+    expect(getExtraWidgetsWidgets('@user-id')).toEqual([
+      {
+        creatorUserId: '@user-id',
+        id: 'widget-1',
+        type: 'net.nordeck.widget-1:pad',
+        name: 'Widget 1',
+        url: 'http://1.widget.example',
+      },
+    ]);
+  });
+
+  it('should accept additional properties', () => {
+    jest.mocked(getEnvironment).mockImplementation((name, defaultValue) => {
+      switch (name) {
+        case 'REACT_APP_EXTRA_WIDGETS':
+          return JSON.stringify([
+            {
+              id: 'widget-1',
+              type: 'net.nordeck.widget-1:pad',
+              name: 'Widget 1',
+              url: 'http://1.widget.example',
+              additional: 'tmp',
+            },
+          ]);
+        default:
+          return defaultValue;
+      }
+    });
+
+    expect(getExtraWidgetsWidgets('@user-id')).toEqual([
+      {
+        creatorUserId: '@user-id',
+        id: 'widget-1',
+        type: 'net.nordeck.widget-1:pad',
+        name: 'Widget 1',
+        url: 'http://1.widget.example',
+      },
+    ]);
+  });
+
+  it.each<Object>([
+    { id: undefined },
+    { id: null },
+    { id: 111 },
+    { name: undefined },
+    { name: null },
+    { name: 111 },
+    { type: undefined },
+    { type: null },
+    { type: 111 },
+    { url: undefined },
+    { url: null },
+    { url: 111 },
+    { url: 'no-uri' },
+  ])('should reject event with patch %j', (patch: Object) => {
+    jest.mocked(getEnvironment).mockImplementation((name, defaultValue) => {
+      switch (name) {
+        case 'REACT_APP_EXTRA_WIDGETS':
+          return JSON.stringify([
+            {
+              id: 'widget-1',
+              type: 'net.nordeck.widget-1:pad',
+              name: 'Widget 1',
+              url: 'http://1.widget.example',
+              ...patch,
+            },
+          ]);
+        default:
+          return defaultValue;
+      }
+    });
+
+    expect(getExtraWidgetsWidgets('@user-id')).toEqual([]);
+  });
+});