@dxos/react-ui 0.1.39-next.90cb9b6 → 0.1.40

package/src/components/IdentityList/IdentityListItem.tsx

@@ -31,7 +31,10 @@ export const IdentityListItem = ({
           ...(presence === SpaceMember.PresenceState.OFFLINE && {
             status: 'inactive',
             description: (
-              <p className='font-system-normal text-xs text-neutral-700 dark:text-neutral-300'>
+              <p
+                className='font-system-normal text-xs text-neutral-700 dark:text-neutral-300'
+                data-testid='identity-list-item.description'
+              >
                 {t('identity offline description')}
               </p>
             )

package/src/components/InvitationList/InvitationListContainer.tsx

@@ -19,8 +19,7 @@ export const InvitationListContainer = ({ spaceKey, createInvitationUrl }: Invit
   const invitations = useSpaceInvitations(spaceKey);
   const onClickRemove = useCallback(
     (invitation: CancellableInvitationObservable) => {
-      const invitationId = invitation.get().invitationId;
-      invitationId && space?.removeInvitation(invitationId);
+      void invitation.cancel();
     },
     [space]
   );

package/src/panels/DevicesPanel/DevicesPanel.tsx

@@ -64,9 +64,7 @@ const DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent
       <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
         <InvitationList
           invitations={invitations}
-          onClickRemove={(invitation) =>
-            invitation.get() && client.halo.removeInvitation(invitation.get().invitationId)
-          }
+          onClickRemove={(invitation) => invitation.cancel()}
           createInvitationUrl={createInvitationUrl}
         />
         <Button

package/src/panels/JoinPanel/joinMachine.ts

@@ -322,24 +322,38 @@ const joinMachine = createMachine<JoinMachineContext, JoinEvent>(
         identity: () => null
       }),
       resetInvitation: assign<JoinMachineContext, EmptyInvitationEvent>({
-        halo: (context, event) =>
-          event.type === 'resetHaloInvitation'
-            ? {
-                ...context.halo,
-                invitation: undefined,
-                invitationObservable: undefined,
-                invitationSubscribable: undefined
-              }
-            : context.halo,
-        space: (context, event) =>
-          event.type === 'resetSpaceInvitation'
-            ? {
-                ...context.space,
-                invitation: undefined,
-                invitationObservable: undefined,
-                invitationSubscribable: undefined
-              }
-            : context.space
+        halo: (context, event) => {
+          if (event.type !== 'resetHaloInvitation') {
+            return context.halo;
+          }
+
+          if (context.halo.invitationObservable) {
+            void context.halo.invitationObservable.cancel();
+          }
+
+          return {
+            ...context.halo,
+            invitation: undefined,
+            invitationObservable: undefined,
+            invitationSubscribable: undefined
+          };
+        },
+        space: (context, event) => {
+          if (event.type !== 'resetSpaceInvitation') {
+            return context.space;
+          }
+
+          if (context.space.invitationObservable) {
+            void context.space.invitationObservable.cancel();
+          }
+
+          return {
+            ...context.space,
+            invitation: undefined,
+            invitationObservable: undefined,
+            invitationSubscribable: undefined
+          };
+        }
       }),
       setInvitation: assign<JoinMachineContext, SetInvitationEvent>({
         halo: (context, event) =>
@@ -397,6 +411,7 @@ const useJoinMachine = (client: Client, options?: Parameters<typeof useMachine<J
     },
     [client]
   );
+
   const redeemSpaceInvitationCode = useCallback(
     ({ space }: JoinMachineContext) => {
       if (space.unredeemedCode) {
@@ -414,6 +429,7 @@ const useJoinMachine = (client: Client, options?: Parameters<typeof useMachine<J
     },
     [client]
   );
+
   return useMachine(joinMachine, {
     ...options,
     actions: {

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -52,7 +52,7 @@ const CurrentSpaceView = observer(({ space, createInvitationUrl, titleId }: Spac
       <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
         <InvitationList
           invitations={invitations}
-          onClickRemove={(invitation) => invitation.get() && space?.removeInvitation(invitation.get().invitationId)}
+          onClickRemove={(invitation) => invitation.cancel()}
           createInvitationUrl={createInvitationUrl}
         />
         <Button

package/src/playwright/invitations-manager.ts

@@ -34,7 +34,7 @@ export class InvitationsManager extends ShellManager {
 
     const { page } = await setupPage(this._browser, {
       url: storybookUrl('invitations--default'),
-      waitFor: (page) => page.getByTestId('invitations.identity-header').nth(0).isVisible()
+      waitFor: (page) => page.getByTestId('invitations.identity-header').first().isVisible()
     });
 
     this.page = page;
@@ -44,9 +44,24 @@ export class InvitationsManager extends ShellManager {
 
   // Getters
 
+  peer(id: number) {
+    return this.page.getByTestId(`peer-${id}`);
+  }
+
+  async getNetworkStatus(id: number) {
+    const selector = this.peer(id).getByTestId('identity-list-item.description').first();
+
+    try {
+      await selector.waitFor({ timeout: 500 });
+      return ConnectionState.OFFLINE;
+    } catch {
+      return ConnectionState.ONLINE;
+    }
+  }
+
   async getDisplayName(id: number) {
     // TODO(wittjosiah): Update id.
-    return this.peer(id).getByTestId('identity-list-item').nth(0).textContent();
+    return this.peer(id).getByTestId('identity-list-item').first().textContent();
   }
 
   async getSpaceName(id: number, nth: number) {
@@ -54,15 +69,15 @@ export class InvitationsManager extends ShellManager {
     return this.peer(id).getByTestId('space-list-item').nth(nth).textContent();
   }
 
+  async getAuthCode(): Promise<string> {
+    this._authCode = new Trigger<string>();
+    return await this._authCode.wait();
+  }
+
   // Actions
 
-  async setConnectionState(id: number, state: ConnectionState) {
-    await this.page.evaluate(
-      ({ id, state }) => {
-        (window as any)[`peer${id}client`].mesh.setConnectionState(state);
-      },
-      { id, state }
-    );
+  async toggleNetworkStatus(id: number) {
+    await this.peer(id).getByTestId('invitations.toggle-network').click();
   }
 
   async openPanel(id: number, panel: PanelType) {
@@ -137,15 +152,6 @@ export class InvitationsManager extends ShellManager {
     await this.page.keyboard.press('Enter');
   }
 
-  async getAuthCode(): Promise<string> {
-    this._authCode = new Trigger<string>();
-    return await this._authCode.wait();
-  }
-
-  peer(id: number) {
-    return this.page.getByTestId(`peer-${id}`);
-  }
-
   private async _onConsoleMessage(message: ConsoleMessage) {
     try {
       const json = JSON.parse(message.text());

package/src/playwright/invitations.spec.ts

@@ -4,7 +4,6 @@
 
 import { test } from '@playwright/test';
 import { expect } from 'chai';
-import waitForExpect from 'wait-for-expect';
 
 import { sleep } from '@dxos/async';
 import { ConnectionState, Invitation } from '@dxos/protocols/proto/dxos/client/services';
@@ -14,6 +13,13 @@ import { InvitationsManager } from './invitations-manager';
 test.describe('Invitations', () => {
   let manager: InvitationsManager;
 
+  // TODO(wittjosiah): Storybook takes a bit to be ready for testing against.
+  test.beforeAll(async ({ browser }) => {
+    test.setTimeout(60_000);
+    manager = new InvitationsManager(browser);
+    await manager.init();
+  });
+
   test.beforeEach(async ({ browser }) => {
     manager = new InvitationsManager(browser);
     await manager.init();
@@ -46,6 +52,8 @@ test.describe('Invitations', () => {
     });
 
     test('invalid & retry auth code', async () => {
+      test.slow();
+
       await manager.createIdentity(0);
       await manager.openPanel(0, 'devices');
       const invitation = await manager.createInvitation(0, 'device');
@@ -61,6 +69,8 @@ test.describe('Invitations', () => {
     });
 
     test('invalid & max auth code retries reached, retry invitation', async () => {
+      test.slow();
+
       await manager.createIdentity(0);
       await manager.openPanel(0, 'devices');
       const invitation = await manager.createInvitation(0, 'device');
@@ -95,10 +105,7 @@ test.describe('Invitations', () => {
       await manager.openPanel(1, 'identity');
       await manager.acceptInvitation(1, 'device', invitation);
 
-      // Wait for timeout to fire.
-      await waitForExpect(async () => {
-        expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
-      }, 100);
+      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
     });
 
     test('invitation cancelled by host', async () => {
@@ -108,14 +115,10 @@ test.describe('Invitations', () => {
 
       await manager.openPanel(1, 'identity');
       await manager.acceptInvitation(1, 'device', invitation);
-      // Wait for invitation to connect before cancelling it.
-      await sleep(100);
+      expect(await manager.readyToAuthenticate('device', manager.peer(1))).to.be.true;
       await manager.cancelInvitation('device', 'host', manager.peer(0));
 
-      // Wait for cancellation to propagate.
-      await waitForExpect(async () => {
-        expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
-      }, 100);
+      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
     });
 
     test('invitation cancelled by guest & retry', async () => {
@@ -136,18 +139,19 @@ test.describe('Invitations', () => {
     });
 
     test('recover from network failure during invitation', async () => {
+      test.slow();
+
       await manager.createIdentity(0);
       await manager.openPanel(0, 'devices');
       const invitation = await manager.createInvitation(0, 'device');
 
       await manager.openPanel(1, 'identity');
       await manager.acceptInvitation(1, 'device', invitation);
-      await sleep(100);
-      await manager.setConnectionState(0, ConnectionState.OFFLINE);
-      await sleep(100);
-      await manager.setConnectionState(0, ConnectionState.ONLINE);
-      // TODO(wittjosiah): Requires attempting an action to discover the network failure.
-      await manager.authenticateInvitation('device', '00000', manager.peer(1));
+      expect(await manager.readyToAuthenticate('device', manager.peer(1))).to.be.true;
+      await manager.toggleNetworkStatus(0);
+      expect(await manager.getNetworkStatus(0)).to.equal(ConnectionState.OFFLINE);
+      await manager.toggleNetworkStatus(0);
+      expect(await manager.getNetworkStatus(0)).to.equal(ConnectionState.ONLINE);
       await manager.resetInvitation(manager.peer(1));
       await manager.invitationInputContinue('device', manager.peer(1));
       const [authCode] = await Promise.all([manager.getAuthCode(), manager.clearAuthCode('device', manager.peer(1))]);
@@ -158,24 +162,30 @@ test.describe('Invitations', () => {
     });
 
     test('multiple concurrent invitations', async () => {
+      test.slow();
+
       await manager.createIdentity(0);
       await manager.openPanel(0, 'devices');
-      const invitation1 = await manager.createInvitation(0, 'device');
-      const invitation2 = await manager.createInvitation(0, 'device');
-
       await manager.openPanel(1, 'identity');
       await manager.openPanel(2, 'identity');
+
+      // TODO(wittjosiah): Improve auth code fetching to make it easier to disambiguate them.
+      const invitation1 = await manager.createInvitation(0, 'device');
       const [authCode1] = await Promise.all([
         manager.getAuthCode(),
         manager.acceptInvitation(1, 'device', invitation1)
       ]);
-      // Prevent auth code from being reused.
-      await sleep(100);
+
+      const invitation2 = await manager.createInvitation(0, 'device');
       const [authCode2] = await Promise.all([
         manager.getAuthCode(),
         manager.acceptInvitation(2, 'device', invitation2)
       ]);
+
       await manager.authenticateInvitation('device', authCode1, manager.peer(1));
+      // TODO(wittjosiah): Managing focus in tests is flaky.
+      // Helps to ensure both auth codes are fully input (especially in webkit).
+      await sleep(100);
       await manager.authenticateInvitation('device', authCode2, manager.peer(2));
       await manager.doneInvitation('device', manager.peer(1));
       await manager.doneInvitation('device', manager.peer(2));
@@ -219,6 +229,8 @@ test.describe('Invitations', () => {
     });
 
     test('invalid & retry auth code', async () => {
+      test.slow();
+
       await manager.createIdentity(0);
       await manager.createSpace(0);
       await manager.openPanel(0, 0);
@@ -240,6 +252,8 @@ test.describe('Invitations', () => {
     });
 
     test('invalid & max auth code retries reached, retry invitation', async () => {
+      test.slow();
+
       await manager.createIdentity(0);
       await manager.createSpace(0);
       await manager.openPanel(0, 0);
@@ -279,10 +293,7 @@ test.describe('Invitations', () => {
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation);
 
-      // Wait for timeout to fire.
-      await waitForExpect(async () => {
-        expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
-      }, 100);
+      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
     });
 
     test('invitation cancelled by host', async () => {
@@ -294,14 +305,10 @@ test.describe('Invitations', () => {
       await manager.createIdentity(1);
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation);
-      // Wait for invitation to connect before cancelling it.
-      await sleep(100);
+      expect(await manager.readyToAuthenticate('space', manager.peer(1))).to.be.true;
       await manager.cancelInvitation('space', 'host', manager.peer(0));
 
-      // Wait for cancellation to propagate.
-      await waitForExpect(async () => {
-        expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
-      }, 100);
+      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
     });
 
     test('invitation cancelled by guest & retry', async () => {
@@ -327,6 +334,8 @@ test.describe('Invitations', () => {
     });
 
     test('recover from network failure during invitation', async () => {
+      test.slow();
+
       await manager.createIdentity(0);
       await manager.createSpace(0);
       await manager.openPanel(0, 0);
@@ -335,12 +344,11 @@ test.describe('Invitations', () => {
       await manager.createIdentity(1);
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation);
-      await sleep(100);
-      await manager.setConnectionState(0, ConnectionState.OFFLINE);
-      await sleep(100);
-      await manager.setConnectionState(0, ConnectionState.ONLINE);
-      // TODO(wittjosiah): Requires attempting an action to discover the network failure.
-      await manager.authenticateInvitation('space', '00000', manager.peer(1));
+      expect(await manager.readyToAuthenticate('space', manager.peer(1))).to.be.true;
+      await manager.toggleNetworkStatus(0);
+      expect(await manager.getNetworkStatus(0)).to.equal(ConnectionState.OFFLINE);
+      await manager.toggleNetworkStatus(0);
+      expect(await manager.getNetworkStatus(0)).to.equal(ConnectionState.ONLINE);
       await manager.resetInvitation(manager.peer(1));
       await manager.invitationInputContinue('space', manager.peer(1));
       const [authCode] = await Promise.all([manager.getAuthCode(), manager.clearAuthCode('space', manager.peer(1))]);
@@ -352,21 +360,26 @@ test.describe('Invitations', () => {
     });
 
     test('multiple concurrent invitations', async () => {
-      await manager.createIdentity(0);
-      await manager.createSpace(0);
-      await manager.openPanel(0, 0);
-      const invitation1 = await manager.createInvitation(0, 'space');
-      const invitation2 = await manager.createInvitation(0, 'space');
+      test.slow();
 
+      await manager.createIdentity(0);
       await manager.createIdentity(1);
       await manager.createIdentity(2);
+
+      await manager.createSpace(0);
+      await manager.openPanel(0, 0);
       await manager.openPanel(1, 'join');
       await manager.openPanel(2, 'join');
+
+      const invitation1 = await manager.createInvitation(0, 'space');
       const [authCode1] = await Promise.all([manager.getAuthCode(), manager.acceptInvitation(1, 'space', invitation1)]);
-      // Prevent auth code from being reused.
-      await sleep(100);
+
+      const invitation2 = await manager.createInvitation(0, 'space');
       const [authCode2] = await Promise.all([manager.getAuthCode(), manager.acceptInvitation(2, 'space', invitation2)]);
+
       await manager.authenticateInvitation('space', authCode1, manager.peer(1));
+      // Helps to ensure both auth codes are fully input (especially in webkit).
+      await sleep(100);
       await manager.authenticateInvitation('space', authCode2, manager.peer(2));
       await manager.doneInvitation('space', manager.peer(1));
       await manager.doneInvitation('space', manager.peer(2));

package/src/stories/Invitations.stories.tsx

@@ -4,10 +4,11 @@
 
 import '@dxosTheme';
 import { faker } from '@faker-js/faker';
-import { Intersect, Laptop, Planet, Plus, PlusCircle, QrCode } from '@phosphor-icons/react';
+import { Intersect, Laptop, Planet, Plus, PlusCircle, QrCode, WifiHigh, WifiSlash } from '@phosphor-icons/react';
 import React, { useMemo, useState } from 'react';
 
-import { Space, SpaceProxy, useClient, useIdentity, useSpaces } from '@dxos/react-client';
+import { ConnectionState, SpaceMember } from '@dxos/protocols/proto/dxos/client/services';
+import { Space, SpaceProxy, useClient, useIdentity, useNetworkStatus, useSpaces } from '@dxos/react-client';
 import { ClientDecorator } from '@dxos/react-client/testing';
 import { Button, ButtonGroup, getSize, Group } from '@dxos/react-components';
 
@@ -96,6 +97,7 @@ const Panel = ({ id, panel, setPanel }: { id: number; panel?: PanelType; setPane
 
 const render = ({ id }: { id: number }) => {
   const client = useClient();
+  const networkStatus = useNetworkStatus().state;
   const identity = useIdentity();
   const [panel, setPanel] = useState<PanelType>();
 
@@ -138,6 +140,22 @@ const render = ({ id }: { id: number }) => {
         <Planet weight='fill' className={getSize(6)} />
       </Button>
       {/* </Tooltip> */}
+      {/* <ToolTip content='Toggle Network'> */}
+      <Button
+        onClick={() =>
+          client.mesh.setConnectionState(
+            networkStatus === ConnectionState.ONLINE ? ConnectionState.OFFLINE : ConnectionState.ONLINE
+          )
+        }
+        data-testid='invitations.toggle-network'
+      >
+        {networkStatus === ConnectionState.ONLINE ? (
+          <WifiHigh weight='fill' className={getSize(6)} />
+        ) : (
+          <WifiSlash weight='fill' className={getSize(6)} />
+        )}
+      </Button>
+      {/* </ToolTip> */}
     </ButtonGroup>
   );
 
@@ -152,7 +170,11 @@ const render = ({ id }: { id: number }) => {
   return (
     <div className='flex flex-col p-4 flex-1 min-w-0' data-testid={`peer-${id}`}>
       <Group label={{ children: header }} className='mbe-2'>
-        {identity ? <IdentityListItem identity={identity} /> : <div className='text-center'>No identity</div>}
+        {identity ? (
+          <IdentityListItem identity={identity} presence={networkStatus as unknown as SpaceMember.PresenceState} />
+        ) : (
+          <div className='text-center'>No identity</div>
+        )}
       </Group>
       {identity || panel ? <Panel id={id} panel={panel} setPanel={setPanel} /> : null}
     </div>

package/src/testing/shell-manager.ts

@@ -13,8 +13,14 @@ export class ShellManager {
     return (scope || this.page).getByTestId(`${type === 'device' ? 'halo' : 'space'}-auth-code-input`).isVisible();
   }
 
-  invitationFailed(scope?: Scope) {
-    return (scope || this.page).getByTestId('invitation-rescuer-reset').isVisible();
+  async invitationFailed(scope?: Scope, timeout = 3000) {
+    const peer = scope || this.page;
+    try {
+      await peer.locator('[data-testid=invitation-rescuer-reset]:not([disabled])').waitFor({ timeout });
+      return true;
+    } catch {
+      return false;
+    }
   }
 
   async inputInvitation(type: 'device' | 'space', invitation: string, scope?: Scope) {
@@ -36,6 +42,18 @@ export class ShellManager {
     }
   }
 
+  async readyToAuthenticate(type: 'device' | 'space', scope?: Scope, timeout = 3000) {
+    const peer = scope || this.page;
+    try {
+      await peer
+        .locator(`[data-testid=${type === 'device' ? 'halo' : 'space'}-auth-code-input]:not([disabled])`)
+        .waitFor({ timeout });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
   async authenticateInvitation(type: 'device' | 'space', authCode: string, scope?: Scope) {
     const peer = scope || this.page;
     // TODO(wittjosiah): Update ids.