@dxos/shell 0.6.13 → 0.6.14-main.1366248

package/src/playwright/invitations.spec.ts

@@ -2,15 +2,19 @@
 // Copyright 2021 DXOS.org
 //
 
-import { test } from '@playwright/test';
-import { expect } from 'chai';
+import { expect, test } from '@playwright/test';
 
 import { sleep } from '@dxos/async';
-import { Invitation } from '@dxos/react-client/invitations';
-import { ConnectionState } from '@dxos/react-client/mesh';
 
 import { InvitationsManager } from './invitations-manager';
 
+// TODO(wittjosiah): Can't import these because of ESM/CJS issues.
+// import { Invitation } from '@dxos/react-client/invitations';
+// import { ConnectionState } from '@dxos/react-client/mesh';
+const InvitationAuthMethodNone = 0;
+const ConnectionStateOffline = 0;
+const ConnectionStateOnline = 1;
+
 test.describe('Invitations', () => {
   let manager: InvitationsManager;
 
@@ -45,21 +49,19 @@ test.describe('Invitations', () => {
       await manager.acceptInvitation(1, 'device', invitation);
       await manager.readyToAuthenticate('device', manager.peer(1));
       await manager.authenticateInvitation('device', authCode, manager.peer(1));
-      await manager.doneInvitation('device', manager.peer(1));
 
-      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+      expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
 
     test('no auth method', async () => {
       await manager.createIdentity(0);
       await manager.openPanel(0, 'devices');
-      const invitation = await manager.createInvitation(0, 'device', { authMethod: Invitation.AuthMethod.NONE });
+      const invitation = await manager.createInvitation(0, 'device', { authMethod: InvitationAuthMethodNone });
 
       await manager.openPanel(1, 'identity');
       await manager.acceptInvitation(1, 'device', invitation);
-      await manager.doneInvitation('device', manager.peer(1));
 
-      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+      expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
 
     test('invalid & retry auth code', async () => {
@@ -73,9 +75,8 @@ test.describe('Invitations', () => {
       await manager.authenticateInvitation('device', '000000', manager.peer(1));
       await manager.clearAuthCode('device', manager.peer(1));
       await manager.authenticateInvitation('device', authCode, manager.peer(1));
-      await manager.doneInvitation('device', manager.peer(1));
 
-      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+      expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
 
     // TODO(wittjosiah): Remove? This seems to invalidate the invitation now.
@@ -94,15 +95,14 @@ test.describe('Invitations', () => {
       await manager.clearAuthCode('device', manager.peer(1));
       await manager.authenticateInvitation('device', '000003', manager.peer(1));
 
-      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
+      expect(await manager.invitationFailed(manager.peer(1))).toBe(true);
 
       await manager.resetInvitation(manager.peer(1));
       await manager.invitationInputContinue('device', manager.peer(1));
       await manager.clearAuthCode('device', manager.peer(1));
       await manager.authenticateInvitation('device', authCode, manager.peer(1));
-      await manager.doneInvitation('device', manager.peer(1));
 
-      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+      expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
 
     test('invitation timeout', async () => {
@@ -113,7 +113,7 @@ test.describe('Invitations', () => {
       await manager.openPanel(1, 'identity');
       await manager.acceptInvitation(1, 'device', invitation);
 
-      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
+      expect(await manager.invitationFailed(manager.peer(1))).toBe(true);
     });
 
     // TODO(thure): This is skipped because the UI no longer affords cancelling device invitations, consider removing.
@@ -125,10 +125,10 @@ test.describe('Invitations', () => {
 
       await manager.openPanel(1, 'identity');
       await manager.acceptInvitation(1, 'device', invitation);
-      expect(await manager.readyToAuthenticate('device', manager.peer(1))).to.be.true;
+      expect(await manager.readyToAuthenticate('device', manager.peer(1))).toBe(true);
       await manager.cancelInvitation('device', 'host', manager.peer(0));
 
-      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
+      expect(await manager.invitationFailed(manager.peer(1))).toBe(true);
     });
 
     // TODO(wittjosiah): Remove? This seems to invalidate the invitation now.
@@ -145,9 +145,8 @@ test.describe('Invitations', () => {
       await manager.invitationInputContinue('device', manager.peer(1));
       await manager.clearAuthCode('device', manager.peer(1));
       await manager.authenticateInvitation('device', authCode, manager.peer(1));
-      await manager.doneInvitation('device', manager.peer(1));
 
-      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+      expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
 
     // TODO(thure): The design no longer affords signalling an identity’s network status. Remove or adjust test, or adjust design.
@@ -159,18 +158,17 @@ test.describe('Invitations', () => {
 
       await manager.openPanel(1, 'identity');
       await manager.acceptInvitation(1, 'device', invitation);
-      expect(await manager.readyToAuthenticate('device', manager.peer(1))).to.be.true;
+      expect(await manager.readyToAuthenticate('device', manager.peer(1))).toBe(true);
       await manager.toggleNetworkStatus(0);
-      expect(await manager.getNetworkStatus(0)).to.equal(ConnectionState.OFFLINE);
+      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionStateOffline);
       await manager.toggleNetworkStatus(0);
-      expect(await manager.getNetworkStatus(0)).to.equal(ConnectionState.ONLINE);
+      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionStateOnline);
       await manager.resetInvitation(manager.peer(1));
       await manager.invitationInputContinue('device', manager.peer(1));
       await manager.clearAuthCode('device', manager.peer(1));
       await manager.authenticateInvitation('device', authCode, manager.peer(1));
-      await manager.doneInvitation('device', manager.peer(1));
 
-      expect(await manager.getDisplayName(0)).to.equal(await manager.getDisplayName(1));
+      expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
   });
 
@@ -187,44 +185,40 @@ test.describe('Invitations', () => {
       await manager.acceptInvitation(1, 'space', invitation);
       await manager.readyToAuthenticate('space', manager.peer(1));
       await manager.authenticateInvitation('space', authCode, manager.peer(1));
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
-      expect(await manager.getSpaceName(0, 1)).to.equal(await manager.getSpaceName(1, 1));
+      expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
     });
 
     test('already joined', async () => {
       await manager.createIdentity(0);
       await manager.createSpace(0);
       await manager.openPanel(0, 1);
-      const invitation1 = await manager.createInvitation(0, 'space', { authMethod: Invitation.AuthMethod.NONE });
+      const invitation1 = await manager.createInvitation(0, 'space', { authMethod: InvitationAuthMethodNone });
       const invitation2 = await manager.createInvitation(0, 'space');
 
       await manager.createIdentity(1);
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation1);
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation2);
-      await manager.doneInvitation('space', manager.peer(1));
 
-      expect(await manager.getSpaceMembersCount(0)).to.equal(2);
+      expect(await manager.getSpaceMembersCount(0)).toEqual(2);
     });
 
     test('no auth method', async () => {
       await manager.createIdentity(0);
       await manager.createSpace(0);
       await manager.openPanel(0, 1);
-      const invitation = await manager.createInvitation(0, 'space', { authMethod: Invitation.AuthMethod.NONE });
+      const invitation = await manager.createInvitation(0, 'space', { authMethod: InvitationAuthMethodNone });
 
       await manager.createIdentity(1);
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation);
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
-      expect(await manager.getSpaceName(0, 1)).to.equal(await manager.getSpaceName(1, 1));
+      expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
     });
 
     test('invalid & retry auth code', async () => {
@@ -239,14 +233,13 @@ test.describe('Invitations', () => {
       await manager.acceptInvitation(1, 'space', invitation);
       await manager.authenticateInvitation('space', '000000', manager.peer(1));
 
-      expect(await manager.authenticatorIsVisible('space', manager.peer(1))).to.be.true;
+      expect(await manager.authenticatorIsVisible('space', manager.peer(1))).toBe(true);
 
       await manager.clearAuthCode('space', manager.peer(1));
       await manager.authenticateInvitation('space', authCode, manager.peer(1));
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
-      expect(await manager.getSpaceName(0, 1)).to.equal(await manager.getSpaceName(1, 1));
+      expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
     });
 
     // TODO(wittjosiah): Remove? This seems to invalidate the invitation now.
@@ -267,16 +260,15 @@ test.describe('Invitations', () => {
       await manager.clearAuthCode('space', manager.peer(1));
       await manager.authenticateInvitation('space', '000003', manager.peer(1));
 
-      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
+      expect(await manager.invitationFailed(manager.peer(1))).toBe(true);
 
       await manager.resetInvitation(manager.peer(1));
       await manager.invitationInputContinue('space', manager.peer(1));
       await manager.clearAuthCode('space', manager.peer(1));
       await manager.authenticateInvitation('space', authCode, manager.peer(1));
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
-      expect(await manager.getSpaceName(0, 1)).to.equal(await manager.getSpaceName(1, 1));
+      expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
     });
 
     test('invitation timeout', async () => {
@@ -289,7 +281,7 @@ test.describe('Invitations', () => {
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation);
 
-      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
+      expect(await manager.invitationFailed(manager.peer(1))).toBe(true);
     });
 
     // TODO(wittjosiah): Cancel not propagating.
@@ -302,10 +294,10 @@ test.describe('Invitations', () => {
       await manager.createIdentity(1);
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation);
-      expect(await manager.readyToAuthenticate('space', manager.peer(1))).to.be.true;
+      expect(await manager.readyToAuthenticate('space', manager.peer(1))).toBe(true);
       await manager.cancelInvitation('space', 'host', manager.peer(0));
 
-      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
+      expect(await manager.invitationFailed(manager.peer(1))).toBe(true);
     });
 
     // TODO(wittjosiah): Remove? This seems to invalidate the invitation now.
@@ -324,10 +316,9 @@ test.describe('Invitations', () => {
       await manager.invitationInputContinue('space', manager.peer(1));
       await manager.clearAuthCode('space', manager.peer(1));
       await manager.authenticateInvitation('space', authCode, manager.peer(1));
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
-      expect(await manager.getSpaceName(0, 1)).to.equal(await manager.getSpaceName(1, 1));
+      expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
     });
 
     // TODO(thure): The design no longer affords signalling an identity’s network status. Remove or adjust test, or adjust design.
@@ -341,19 +332,18 @@ test.describe('Invitations', () => {
       await manager.createIdentity(1);
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation);
-      expect(await manager.readyToAuthenticate('space', manager.peer(1))).to.be.true;
+      expect(await manager.readyToAuthenticate('space', manager.peer(1))).toBe(true);
       await manager.toggleNetworkStatus(0);
-      expect(await manager.getNetworkStatus(0)).to.equal(ConnectionState.OFFLINE);
+      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionStateOffline);
       await manager.toggleNetworkStatus(0);
-      expect(await manager.getNetworkStatus(0)).to.equal(ConnectionState.ONLINE);
+      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionStateOnline);
       await manager.resetInvitation(manager.peer(1));
       await manager.invitationInputContinue('space', manager.peer(1));
       await manager.clearAuthCode('space', manager.peer(1));
       await manager.authenticateInvitation('space', authCode, manager.peer(1));
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
-      expect(await manager.getSpaceName(0, 1)).to.equal(await manager.getSpaceName(1, 1));
+      expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
     });
 
     test('multiple concurrent invitations', async () => {
@@ -381,13 +371,11 @@ test.describe('Invitations', () => {
       // 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));
 
       await manager.openPanel(0, 'spaces');
-      expect(await manager.getSpaceName(0, 1)).to.equal(await manager.getSpaceName(1, 1));
-      expect(await manager.getSpaceName(0, 1)).to.equal(await manager.getSpaceName(2, 1));
-      expect(await manager.getSpaceName(1, 1)).to.equal(await manager.getSpaceName(2, 1));
+      expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
+      expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(2, 1));
+      expect(await manager.getSpaceName(1, 1)).toEqual(await manager.getSpaceName(2, 1));
     });
   });
 });

package/src/playwright/playwright.config.ts

@@ -2,6 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import { defaultPlaywrightConfig } from '@dxos/test/playwright';
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { defineConfig } from '@playwright/test';
 
-export default defaultPlaywrightConfig;
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: __dirname }),
+  ...e2ePreset(__dirname),
+  webServer: {
+    command: 'pnpm -w nx storybook-e2e stories',
+    port: 9009,
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/src/steps/ConfirmReset.tsx

@@ -15,7 +15,7 @@ import { Action, Actions, StepHeading, Input } from '../components';
 type ConfirmResetOptions = Partial<{
   onCancel: () => void;
   onConfirm: () => Promise<void>;
-  mode: 'join new identity' | 'reset storage';
+  mode: 'join new identity' | 'recover' | 'reset storage';
 }>;
 
 export type ConfirmResetProps = StepProps & ConfirmResetOptions;
@@ -64,7 +64,8 @@ export const ConfirmResetImpl = ({
   const { t } = useTranslation('os');
   const confirmationValue = t('confirmation value');
   const [inputValue, setInputValue] = useState('');
-  const testIdAffix = mode === 'join new identity' ? 'join-new-identity' : 'reset-storage';
+  const testIdAffix =
+    mode === 'join new identity' ? 'join-new-identity' : mode === 'recover' ? 'recover' : 'reset-storage';
   return (
     <>
       <div role='none' className='grow flex flex-col gap-2 justify-center'>
@@ -79,9 +80,16 @@ export const ConfirmResetImpl = ({
           {...{ validationMessage }}
           label={
             <StepHeading className='text-start mlb-2'>
-              {t(mode === 'join new identity' ? 'join new identity input label' : 'reset storage input label', {
-                confirmationValue,
-              })}
+              {t(
+                mode === 'join new identity'
+                  ? 'join new identity input label'
+                  : mode === 'recover'
+                    ? 'recover reset input label'
+                    : 'reset storage input label',
+                {
+                  confirmationValue,
+                },
+              )}
             </StepHeading>
           }
           disabled={disabled}

package/src/stories/Invitations.e2e-stories.tsx

@@ -14,7 +14,7 @@ import { type Space, type SpaceMember, useSpaces } from '@dxos/react-client/echo
 import { useIdentity } from '@dxos/react-client/halo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { ConnectionState, useNetworkStatus } from '@dxos/react-client/mesh';
-import { ClientRepeater } from '@dxos/react-client/testing';
+import { useMultiClient, withMultiClientProvider } from '@dxos/react-client/testing';
 import { Button, ButtonGroup, List } from '@dxos/react-ui';
 import { getSize, groupSurface } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -24,7 +24,7 @@ import { IdentityPanel, JoinPanel, SpacePanel } from '../panels';
 import { osTranslations } from '../translations';
 
 export default {
-  title: 'Invitations',
+  title: 'sdk/shell/Invitations',
 };
 
 export type PanelType = Space | 'identity' | 'devices' | 'join';
@@ -113,8 +113,8 @@ const Panel = ({ id, panel, setPanel }: { id: number; panel?: PanelType; setPane
   }
 };
 
-const Invitations = (args: { id: number; count: number }) => {
-  const { id }: { id: number } = args;
+const Invitations = () => {
+  const { id } = useMultiClient();
   const client = useClient();
   const networkStatus = useNetworkStatus().swarm;
   const identity = useIdentity();
@@ -220,12 +220,19 @@ const Invitations = (args: { id: number; count: number }) => {
 //   The issue appears to be related to dynamic imports during client initialization.
 //   This does not seem to be a problem in other browsers nor in Safari in the app.
 export const Default = {
-  render: (args: { id: number }) => (
-    <ClipboardProvider>
-      <ClientRepeater component={Invitations} count={3} />
-    </ClipboardProvider>
-  ),
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  render: () => {
+    return (
+      // TODO(wittjosiah): Factor out ClipboardProvider to react-ui and include in layout decorator.
+      <ClipboardProvider>
+        <Invitations />
+      </ClipboardProvider>
+    );
+  },
+  decorators: [
+    withMultiClientProvider({ numClients: 3 }),
+    withLayout({ tooltips: true, classNames: 'grid grid-cols-3' }),
+    withTheme,
+  ],
   parameters: {
     chromatic: { disableSnapshot: true },
     translations: [osTranslations],

package/src/testing/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './fixtures';
+// NOTE: Not exporting fixtures as they depend on esm-only packages.
+
 export * from './scoped-shell-manager';
 export * from './shell-manager';

package/src/testing/shell-manager.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import type { ConsoleMessage, Dialog, Page } from '@playwright/test';
+import type { ConsoleMessage, Page } from '@playwright/test';
 
 import { sleep, Trigger } from '@dxos/async';
 
@@ -60,13 +60,6 @@ export class ShellManager extends ScopedShellManager {
   }
 
   async resetDevice() {
-    const handleDialog = async (dialog: Dialog) => {
-      if (dialog.type() === 'confirm') {
-        await dialog.accept();
-      }
-    };
-    this.page.on('dialog', handleDialog);
-
     await this.shell.getByTestId('device-list-item-current.options').click();
     await this.shell.getByTestId('device-list-item-current.reset').click();
     await this.shell.getByTestId('reset-storage.reset-identity-input').fill(CONFIRM_INPUT);
@@ -78,6 +71,9 @@ export class ShellManager extends ScopedShellManager {
     await this.shell.getByTestId('device-list-item-current.join-existing').click();
     await this.shell.getByTestId('join-new-identity.reset-identity-input').fill(CONFIRM_INPUT);
     await this.shell.getByTestId('join-new-identity.reset-identity-confirm').click();
+  }
+
+  async acceptDeviceInvitation(invitationCode: string) {
     await this.inputInvitation('device', invitationCode, this.shell);
   }
 
@@ -114,7 +110,6 @@ export class ShellManager extends ScopedShellManager {
     // Wait for focus to shift before typing.
     await sleep(1500);
     await this.authenticateInvitation('space', authCode, this.shell);
-    await this.doneInvitation('space', this.shell);
   }
 
   private async _onConsoleMessage(message: ConsoleMessage) {

package/src/translations/locales/en-US.ts

@@ -34,7 +34,7 @@ export const os = {
   'recover identity input label': 'Type or paste your seed phrase',
   'failed to create identity message': 'Failed to create an identity.',
   'failed to recover identity message': 'Failed to recover an identity from the provided seed phrase.',
-  'failed to authenticate message': 'Incorrect PIN.',
+  'failed to authenticate message': 'Incorrect code.',
   'identity added label': 'Created identity & added to this device:',
   'join space as identity heading': '<part>as </part><part><icon/><label>{{labelValue}}</label></part>',
   'error status label': 'Failed',
@@ -42,8 +42,8 @@ export const os = {
   'cancelled status label': 'Cancelled',
   'init status label': 'Ready to connect',
   'connecting status label': 'Connecting…',
-  'connected status label': 'Enter confirmation PIN',
-  'authenticating status label': 'Enter confirmation PIN',
+  'connected status label': 'Enter authentication code',
+  'authenticating status label': 'Enter authentication code',
   'success status label': 'Success',
   'cancel label': 'Cancel',
   'done label': 'Done',
@@ -152,4 +152,7 @@ export const os = {
   'agent requested label': 'Agent requested',
   'agent requested description':
     'The agent service is creating an agent for you. Once the agent connects, it will display in the devices list.',
+  'authenticating label': 'Authenticating…',
+  'create recovery code label': 'Create recovery code',
+  'choose recover identity label': 'Recover identity',
 };