Fix Powerlevels and add Room Version 12 changes

.changeset/fruity-bats-fly.md

@@ -0,0 +1,9 @@
+---
+'@matrix-widget-toolkit/api': major
+'@matrix-widget-toolkit/testing': major
+---
+
+Rework powerlevel calculations to comply with spec in all room versions.
+
+Note this now requires the create room event to be passed to the power level functions.
+Additionally, the mock widget api now has changed user id and room id defaults to comply with matrix spec.

example-widget-mui/src/AllRoomsPage/AllRoomsPage.test.tsx

@@ -28,7 +28,7 @@ import { RoomNameEvent } from '../events';
 import { AllRoomsPage } from './AllRoomsPage';
 
 function mockRoomNameEvent({
-  room_id = '!room-id',
+  room_id = '!room-id:example.com',
   content = {},
 }: {
   room_id?: string;
@@ -118,19 +118,34 @@ describe('<AllRoomsPage />', () => {
 
   it('should render a list of rooms', async () => {
     widgetApi.mockSendStateEvent(
-      mockRoomNameEvent({ room_id: '!room-id-1', content: { name: 'Room 1' } }),
+      mockRoomNameEvent({
+        room_id: '!room-id-1:example.com',
+        content: { name: 'Room 1' },
+      }),
     );
     widgetApi.mockSendStateEvent(
-      mockRoomNameEvent({ room_id: '!room-id-2', content: { name: 'Room 2' } }),
+      mockRoomNameEvent({
+        room_id: '!room-id-2:example.com',
+        content: { name: 'Room 2' },
+      }),
     );
     widgetApi.mockSendStateEvent(
-      mockRoomNameEvent({ room_id: '!room-id-3', content: { name: 'Room 3' } }),
+      mockRoomNameEvent({
+        room_id: '!room-id-3:example.com',
+        content: { name: 'Room 3' },
+      }),
     );
     widgetApi.mockSendStateEvent(
-      mockRoomNameEvent({ room_id: '!room-id-4', content: { name: 'Room 4' } }),
+      mockRoomNameEvent({
+        room_id: '!room-id-4:example.com',
+        content: { name: 'Room 4' },
+      }),
     );
     widgetApi.mockSendStateEvent(
-      mockRoomNameEvent({ room_id: '!room-id-5', content: { name: 'Room 5' } }),
+      mockRoomNameEvent({
+        room_id: '!room-id-5:example.com',
+        content: { name: 'Room 5' },
+      }),
     );
 
     render(<AllRoomsPage />, { wrapper });
@@ -152,7 +167,10 @@ describe('<AllRoomsPage />', () => {
     ).resolves.toBeInTheDocument();
 
     widgetApi.mockSendStateEvent(
-      mockRoomNameEvent({ room_id: '!room-id-1', content: { name: 'Room 1' } }),
+      mockRoomNameEvent({
+        room_id: '!room-id-1:example.com',
+        content: { name: 'Room 1' },
+      }),
     );
 
     await userEvent.click(
@@ -167,7 +185,10 @@ describe('<AllRoomsPage />', () => {
 
   it('should navigate to the room', async () => {
     widgetApi.mockSendStateEvent(
-      mockRoomNameEvent({ room_id: '!room-id-1', content: { name: 'Room 1' } }),
+      mockRoomNameEvent({
+        room_id: '!room-id-1:example.com',
+        content: { name: 'Room 1' },
+      }),
     );
 
     render(<AllRoomsPage />, { wrapper });
@@ -176,7 +197,7 @@ describe('<AllRoomsPage />', () => {
     await userEvent.click(button);
 
     expect(widgetApi.navigateTo).toHaveBeenCalledWith(
-      'https://matrix.to/#/!room-id-1',
+      'https://matrix.to/#/!room-id-1%3Aexample.com',
     );
   });
 });

example-widget-mui/src/DicePage/DicePage.test.tsx

@@ -107,15 +107,15 @@ describe('<DicePage />', () => {
       type: 'net.nordeck.throw_dice',
       event_id: '$0',
       origin_server_ts: 0,
-      room_id: '!room-id',
+      room_id: '!room-id:example.com',
       sender: '@user-id',
       content: { pips: 5 },
     });
     widgetApi.mockSendRoomEvent({
       type: 'net.nordeck.throw_dice',
       event_id: '$1',
       origin_server_ts: 1,
-      room_id: '!room-id',
+      room_id: '!room-id:example.com',
       sender: '@user-id',
       content: { pips: 3 },
     });

example-widget-mui/src/ModalPage/ModalDialog.test.tsx

@@ -53,7 +53,9 @@ describe('<ModalDialog />', () => {
 
     await expect(screen.findByText(/a title/i)).resolves.toBeInTheDocument();
     expect(screen.getByText(/some content…/i)).toBeInTheDocument();
-    expect(screen.getByText(/Room ID: !room-id/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/Room ID: !room-id:example.com/i),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: /i am confident!/i }),
     ).toBeInTheDocument();

example-widget-mui/src/PowerLevelsPage/PowerLevelsPage.test.tsx

@@ -33,35 +33,48 @@ afterEach(() => widgetApi.stop());
 
 beforeEach(() => {
   widgetApi = mockWidgetApi();
+  // @ts-expect-error - This is a test, we can set the userId directly
+  widgetApi.widgetParameters.userId = '@user-id:example.com';
 
+  widgetApi.mockSendStateEvent({
+    type: 'm.room.create',
+    sender: '@user-id:example.com',
+    state_key: '',
+    content: {
+      room_version: '11',
+    },
+    origin_server_ts: 0,
+    event_id: '$create-event-id',
+    room_id: '!room-id:example.com',
+  });
   widgetApi.mockSendStateEvent({
     type: 'm.room.power_levels',
-    sender: '@user-id',
+    sender: '@user-id:example.com',
     state_key: '',
     content: {
-      users: { '@user-id': 100 },
+      users: { '@user-id:example.com': 100 },
     },
     origin_server_ts: 0,
     event_id: '$event-id',
-    room_id: '!room-id',
+    room_id: '!room-id:example.com',
   });
   widgetApi.mockSendStateEvent({
     type: 'm.room.member',
-    sender: '@user-id',
-    state_key: '@another-user',
+    sender: '@user-id:example.com',
+    state_key: '@another-user:example.com',
     content: { membership: 'join' },
     origin_server_ts: 0,
     event_id: '$event-id',
-    room_id: '!room-id',
+    room_id: '!room-id:example.com',
   });
   widgetApi.mockSendStateEvent({
     type: 'm.room.member',
-    sender: '@user-id',
-    state_key: '@user-id',
+    sender: '@user-id:example.com',
+    state_key: '@user-id:example.com',
     content: { membership: 'join' },
     origin_server_ts: 0,
     event_id: '$event-id',
-    room_id: '!room-id',
+    room_id: '!room-id:example.com',
   });
 
   wrapper = ({ children }: PropsWithChildren) => (
@@ -93,7 +106,7 @@ describe('<PowerLevelsPage />', () => {
 
     await userEvent.click(
       await within(listbox).findByRole('option', {
-        name: '@another-user',
+        name: '@another-user:example.com',
         selected: true,
         checked: true,
       }),
@@ -137,7 +150,7 @@ describe('<PowerLevelsPage />', () => {
 
     await userEvent.click(
       within(listbox).getByRole('option', {
-        name: '@user-id You',
+        name: '@user-id:example.com You',
         selected: false,
       }),
     );
@@ -146,7 +159,7 @@ describe('<PowerLevelsPage />', () => {
       screen.getByRole('combobox', {
         name: 'Username',
       }),
-    ).toHaveTextContent('@user-id');
+    ).toHaveTextContent('@user-id:example.com');
   });
 
   it('should request the capabilities', async () => {
@@ -161,6 +174,10 @@ describe('<PowerLevelsPage />', () => {
         EventDirection.Receive,
         'm.room.member',
       ),
+      WidgetEventCapability.forStateEvent(
+        EventDirection.Receive,
+        'm.room.create',
+      ),
     ]);
 
     const button = await screen.findByRole('button', { name: /promote/i });
@@ -191,7 +208,7 @@ describe('<PowerLevelsPage />', () => {
 
     await userEvent.click(
       within(listbox).getByRole('option', {
-        name: '@user-id You',
+        name: '@user-id:example.com You',
         selected: false,
       }),
     );
@@ -208,16 +225,16 @@ describe('<PowerLevelsPage />', () => {
   it('should disable actions if the user has no power to update the power of others', async () => {
     widgetApi.mockSendStateEvent({
       type: 'm.room.power_levels',
-      sender: '@user-id',
+      sender: '@user-id:example.com',
       state_key: '',
       content: {
         users: {
-          '@user-id': 0,
+          '@user-id:example.com': 0,
         },
       },
       origin_server_ts: 0,
       event_id: '$event-id',
-      room_id: '!room-id',
+      room_id: '!room-id:example.com',
     });
 
     render(<PowerLevelsPage />, { wrapper });
@@ -261,8 +278,8 @@ describe('<PowerLevelsPage />', () => {
       'm.room.power_levels',
       {
         users: {
-          '@another-user': 50,
-          '@user-id': 100,
+          '@another-user:example.com': 50,
+          '@user-id:example.com': 100,
         },
       },
     );
@@ -271,17 +288,17 @@ describe('<PowerLevelsPage />', () => {
   it('should demote the user', async () => {
     widgetApi.mockSendStateEvent({
       type: 'm.room.power_levels',
-      sender: '@user-id',
+      sender: '@user-id:example.com',
       state_key: '',
       content: {
         users: {
-          '@another-user': 50,
-          '@user-id': 100,
+          '@another-user:example.com': 50,
+          '@user-id:example.com': 100,
         },
       },
       origin_server_ts: 0,
       event_id: '$event-id',
-      room_id: '!room-id',
+      room_id: '!room-id:example.com',
     });
 
     render(<PowerLevelsPage />, { wrapper });
@@ -306,8 +323,8 @@ describe('<PowerLevelsPage />', () => {
       'm.room.power_levels',
       {
         users: {
-          '@another-user': 0,
-          '@user-id': 100,
+          '@another-user:example.com': 0,
+          '@user-id:example.com': 100,
         },
       },
     );

example-widget-mui/src/PowerLevelsPage/PowerLevelsPage.tsx

@@ -20,6 +20,7 @@ import {
   hasRoomEventPower,
   hasStateEventPower,
   PowerLevelsActions,
+  STATE_EVENT_CREATE,
   STATE_EVENT_POWER_LEVELS,
   STATE_EVENT_ROOM_MEMBER,
 } from '@matrix-widget-toolkit/api';
@@ -48,6 +49,7 @@ import { STATE_EVENT_ROOM_NAME } from '../events';
 import { NavigationBar } from '../NavigationPage';
 import { StoreProvider } from '../store';
 import {
+  useGetCreateEventQuery,
   useGetPowerLevelsQuery,
   useUpdatePowerLevelsMutation,
 } from './powerLevelsApi';
@@ -90,6 +92,10 @@ export const PowerLevelsPage = (): ReactElement => {
             EventDirection.Receive,
             STATE_EVENT_ROOM_MEMBER,
           ),
+          WidgetEventCapability.forStateEvent(
+            EventDirection.Receive,
+            STATE_EVENT_CREATE,
+          ),
         ]}
       >
         {/*
@@ -142,6 +148,7 @@ export const PowerLevelsView = (): ReactElement => {
 
   const { data: powerLevelsEvent } = useGetPowerLevelsQuery();
   const { data: roomMembersData } = useGetRoomMembersQuery();
+  const { data: createEvent } = useGetCreateEventQuery();
 
   const [selectedMember, setSelectedMember] = useState<string | undefined>();
 
@@ -177,17 +184,23 @@ export const PowerLevelsView = (): ReactElement => {
     ? selectAllRoomMembers(roomMembersData)
     : [];
 
+  if (selectedMember === undefined) {
+    return <Box>Loading...</Box>;
+  }
+
   // check if we (=the user of the widget) has the power to promote or
   // demote others
   const canPromoteOrDemote = hasStateEventPower(
     powerLevelsEvent?.content,
+    createEvent?.event,
     widgetApi.widgetParameters.userId,
     STATE_EVENT_POWER_LEVELS,
   );
 
   // we assume that users that can change the name can be promoted or demoted
   const userIsModerator = hasStateEventPower(
     powerLevelsEvent?.content,
+    createEvent?.event,
     selectedMember,
     STATE_EVENT_ROOM_NAME,
   );
@@ -231,6 +244,7 @@ export const PowerLevelsView = (): ReactElement => {
             title={type}
             permitted={hasStateEventPower(
               powerLevelsEvent?.content,
+              createEvent?.event,
               selectedMember,
               type,
             )}
@@ -252,6 +266,7 @@ export const PowerLevelsView = (): ReactElement => {
             title={type}
             permitted={hasRoomEventPower(
               powerLevelsEvent?.content,
+              createEvent?.event,
               selectedMember,
               type,
             )}
@@ -273,6 +288,7 @@ export const PowerLevelsView = (): ReactElement => {
             title={action}
             permitted={hasActionPower(
               powerLevelsEvent?.content,
+              createEvent?.event,
               selectedMember,
               action,
             )}