@dxos/shell 0.3.11-main.008b7c6

package/src/playwright/invitations.spec.ts

@@ -0,0 +1,364 @@
+//
+// Copyright 2021 DXOS.org
+//
+
+import { test } from '@playwright/test';
+import { expect } from 'chai';
+
+import { sleep } from '@dxos/async';
+import { Invitation } from '@dxos/react-client/invitations';
+import { ConnectionState } from '@dxos/react-client/mesh';
+
+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 }) => {
+    test.slow();
+
+    manager = new InvitationsManager(browser);
+    await manager.init();
+  });
+
+  test.describe('device', () => {
+    test('happy path', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device');
+      const authCode = await manager.getAuthCode();
+
+      await manager.openPanel(1, 'identity');
+      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));
+    });
+
+    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 });
+
+      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));
+    });
+
+    test('invalid & retry auth code', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device');
+      const authCode = await manager.getAuthCode();
+
+      await manager.openPanel(1, 'identity');
+      await manager.acceptInvitation(1, 'device', invitation);
+      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));
+    });
+
+    test('invalid & max auth code retries reached, retry invitation', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device');
+      const authCode = await manager.getAuthCode();
+
+      await manager.openPanel(1, 'identity');
+      await manager.acceptInvitation(1, 'device', invitation);
+
+      await manager.authenticateInvitation('device', '000001', manager.peer(1));
+      await manager.clearAuthCode('device', manager.peer(1));
+      await manager.authenticateInvitation('device', '000002', manager.peer(1));
+      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;
+
+      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));
+    });
+
+    test('invitation timeout', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device', { timeout: 10 });
+
+      await manager.openPanel(1, 'identity');
+      await manager.acceptInvitation(1, 'device', invitation);
+
+      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
+    });
+
+    // TODO(thure): This is skipped because the UI no longer affords cancelling device invitations, consider removing.
+    // TODO(wittjosiah): Device invitations are cancelled when leaving the invitation pane, this test should be fixed.
+    test.skip('invitation cancelled by host', async () => {
+      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);
+      expect(await manager.readyToAuthenticate('device', manager.peer(1))).to.be.true;
+      await manager.cancelInvitation('device', 'host', manager.peer(0));
+
+      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
+    });
+
+    test('invitation cancelled by guest & retry', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device');
+      const authCode = await manager.getAuthCode();
+
+      await manager.openPanel(1, 'identity');
+      await manager.acceptInvitation(1, 'device', invitation);
+      await manager.cancelInvitation('device', 'guest', manager.peer(1));
+      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));
+    });
+
+    // TODO(thure): The design no longer affords signalling an identity’s network status. Remove or adjust test, or adjust design.
+    test.skip('recover from network failure during invitation', async () => {
+      await manager.createIdentity(0);
+      await manager.openPanel(0, 'devices');
+      const invitation = await manager.createInvitation(0, 'device');
+      const authCode = await manager.getAuthCode();
+
+      await manager.openPanel(1, 'identity');
+      await manager.acceptInvitation(1, 'device', invitation);
+      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));
+      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));
+    });
+  });
+
+  test.describe('space', () => {
+    test('happy path', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 1);
+      const invitation = await manager.createInvitation(0, 'space');
+      const authCode = await manager.getAuthCode();
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      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));
+    });
+
+    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 });
+
+      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));
+    });
+
+    test('invalid & retry auth code', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 1);
+      const invitation = await manager.createInvitation(0, 'space');
+      const authCode = await manager.getAuthCode();
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      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;
+
+      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));
+    });
+
+    test('invalid & max auth code retries reached, retry invitation', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 1);
+      const invitation = await manager.createInvitation(0, 'space');
+      const authCode = await manager.getAuthCode();
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      await manager.acceptInvitation(1, 'space', invitation);
+
+      await manager.authenticateInvitation('space', '000001', manager.peer(1));
+      await manager.clearAuthCode('space', manager.peer(1));
+      await manager.authenticateInvitation('space', '000002', manager.peer(1));
+      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;
+
+      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));
+    });
+
+    test('invitation timeout', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 1);
+      const invitation = await manager.createInvitation(0, 'space', { timeout: 10 });
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      await manager.acceptInvitation(1, 'space', invitation);
+
+      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
+    });
+
+    // TODO(wittjosiah): Cancel not propagating.
+    test.skip('invitation cancelled by host', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 1);
+      const invitation = await manager.createInvitation(0, 'space');
+
+      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;
+      await manager.cancelInvitation('space', 'host', manager.peer(0));
+
+      expect(await manager.invitationFailed(manager.peer(1))).to.be.true;
+    });
+
+    test('invitation cancelled by guest & retry', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 1);
+      const invitation = await manager.createInvitation(0, 'space');
+      const authCode = await manager.getAuthCode();
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      await manager.acceptInvitation(1, 'space', invitation);
+      await manager.cancelInvitation('space', 'guest', manager.peer(1));
+      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));
+    });
+
+    // TODO(thure): The design no longer affords signalling an identity’s network status. Remove or adjust test, or adjust design.
+    test.skip('recover from network failure during invitation', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 1);
+      const invitation = await manager.createInvitation(0, 'space');
+      const authCode = await manager.getAuthCode();
+
+      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;
+      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));
+      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));
+    });
+
+    test('multiple concurrent invitations', async () => {
+      await manager.createIdentity(0);
+      await manager.createIdentity(1);
+      await manager.createIdentity(2);
+
+      await manager.createSpace(0);
+      await manager.openPanel(0, 1);
+      await manager.openPanel(1, 'join');
+      await manager.openPanel(2, 'join');
+
+      const invitation1 = await manager.createInvitation(0, 'space');
+      const authCode1 = await manager.getAuthCode();
+      await manager.acceptInvitation(1, 'space', invitation1);
+      await manager.readyToAuthenticate('space', manager.peer(1));
+
+      const invitation2 = await manager.createInvitation(0, 'space');
+      const authCode2 = await manager.getAuthCode();
+      await manager.acceptInvitation(2, 'space', invitation2);
+      await manager.readyToAuthenticate('space', manager.peer(2));
+
+      await manager.authenticateInvitation('space', 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('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));
+    });
+  });
+});

package/src/playwright/playwright.config.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { defaultPlaywrightConfig } from '@dxos/test/playwright';
+
+export default defaultPlaywrightConfig;

package/src/react.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './components';
+export * from './composites';
+export * from './panels';
+export * from './styles';
+export * from './translations';

package/src/steps/InvitationManager.tsx

@@ -0,0 +1,116 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Check, X } from '@phosphor-icons/react';
+import React, { useMemo } from 'react';
+import { QR } from 'react-qr-rounded';
+
+import { type InvitationStatus, Invitation } from '@dxos/react-client/invitations';
+import { useId, useTranslation } from '@dxos/react-ui';
+import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+
+import { type StepProps } from './StepProps';
+import {
+  Actions,
+  Action,
+  AuthCode,
+  Emoji,
+  Label,
+  Viewport,
+  type ViewportViewProps,
+  CopyButton,
+  Centered,
+} from '../components';
+import { invitationStatusValue, toEmoji } from '../util';
+
+export type InvitationManagerProps = StepProps &
+  Partial<InvitationStatus> & {
+    invitationUrl?: string;
+  };
+
+const InvitationManagerView = ({ children, ...props }: ViewportViewProps & { emoji?: string }) => {
+  return (
+    <Viewport.View {...props} classNames='grow flex flex-col justify-around items-center'>
+      {children}
+    </Viewport.View>
+  );
+};
+
+export const InvitationManager = ({
+  invitationUrl,
+  active,
+  send,
+  status,
+  type,
+  authCode,
+  id,
+}: InvitationManagerProps) => {
+  const { t } = useTranslation('os');
+  const qrLabel = useId('invitation-manager__qr-code');
+  const statusValue = type === Invitation.Type.MULTIUSE ? 0 : invitationStatusValue.get(status!) ?? 0;
+  const showAuthCode = statusValue === 3;
+  const emoji = toEmoji(id ?? '');
+  const activeView = useMemo(() => {
+    switch (true) {
+      case statusValue === 5:
+      case statusValue < 0:
+        return 'showing final';
+      case statusValue === 3:
+        return 'showing auth code';
+      default:
+        return 'showing qr';
+    }
+  }, [statusValue]);
+  return (
+    <>
+      <Viewport.Root activeView={activeView} classNames='grow plb-1'>
+        <Viewport.Views>
+          <InvitationManagerView id='showing qr' emoji={emoji}>
+            <p className='text-sm mlb-1 font-normal text-center'>
+              {t(type === Invitation.Type.MULTIUSE ? 'invite many qr label' : 'invite one qr label')}
+            </p>
+            <div role='none' className={mx(descriptionText, 'is-full max-is-[14rem] relative')}>
+              <QR
+                rounding={100}
+                backgroundColor='transparent'
+                color='currentColor'
+                className={mx('is-full bs-full p-2', showAuthCode && 'invisible')}
+                aria-labelledby={qrLabel}
+                errorCorrectionLevel='Q'
+                cutout={true}
+              >
+                {invitationUrl ?? 'never'}
+              </QR>
+              <Centered>
+                <Emoji text={emoji} />
+              </Centered>
+            </div>
+            <span id={qrLabel} className='sr-only'>
+              {t('qr label')}
+            </span>
+            <CopyButton variant='ghost' value={invitationUrl ?? 'never'} />
+          </InvitationManagerView>
+          <InvitationManagerView id='showing auth code'>
+            <Label>{t('auth code message')}</Label>
+            <AuthCode code={authCode} large classNames='text-black dark:text-white' />
+            <Label>Be sure the other device is showing this symbol:</Label>
+            {emoji && <Emoji text={emoji} />}
+          </InvitationManagerView>
+          <InvitationManagerView id='showing final'>
+            {statusValue > 0 ? (
+              <Check className={mx('m-1.5', getSize(6))} />
+            ) : (
+              <X className={mx('m-1.5', getSize(6))} />
+            )}
+          </InvitationManagerView>
+        </Viewport.Views>
+      </Viewport.Root>
+      <Actions classNames='mbs-4'>
+        <Action disabled={!active} onClick={() => send?.({ type: 'deselectInvitation' })}>
+          {t('back label')}
+        </Action>
+      </Actions>
+    </>
+  );
+};

package/src/steps/StepProps.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type cloneElement } from 'react';
+import { type Event, type SingleOrArray } from 'xstate';
+
+type StepDeselectInvitationEvent = { type: 'deselectInvitation' };
+
+export type StepEvent = StepDeselectInvitationEvent;
+
+export type StepProps = {
+  active?: boolean;
+  send?: (event: SingleOrArray<Event<StepEvent>>) => void;
+  onDone?: () => void;
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+};

package/src/steps/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './InvitationManager';
+export * from './StepProps';