@dxos/shell 0.3.11-main.1caa3af

package/src/panels/SpacePanel/steps/SpaceManager.tsx

@@ -0,0 +1,157 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Placeholder, UserPlus, UsersThree } from '@phosphor-icons/react';
+import React, { type Dispatch, type SetStateAction, useCallback, useState } from 'react';
+
+import { useConfig } from '@dxos/react-client';
+import { useSpaceInvitations } from '@dxos/react-client/echo';
+import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
+import { ScrollArea, useTranslation } from '@dxos/react-ui';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+
+import {
+  InvitationList,
+  type InvitationListProps,
+  Actions,
+  SpaceMemberList,
+  type SpaceMemberListProps,
+  type ActionMenuItem,
+  BifurcatedAction,
+} from '../../../components';
+import { type SpacePanelStepProps } from '../SpacePanelProps';
+
+export type SpaceManagerImplProps = SpacePanelStepProps & {
+  invitations?: CancellableInvitationObservable[];
+  showInactiveInvitations?: boolean;
+  inviteActions?: Record<string, ActionMenuItem>;
+  SpaceMemberList?: React.FC<SpaceMemberListProps>;
+  InvitationList?: React.FC<InvitationListProps>;
+};
+
+const activeActionKey = 'dxos:react-shell/space-manager/active-action';
+
+export type SpaceManagerProps = SpaceManagerImplProps & {};
+
+export const SpaceManager = (props: SpaceManagerProps) => {
+  const { space } = props;
+  const { t } = useTranslation('os');
+  const config = useConfig();
+
+  const invitations = useSpaceInvitations(space?.key);
+
+  const onInvitationEvent = useCallback((invitation: Invitation) => {
+    const invitationCode = InvitationEncoder.encode(invitation);
+    if (invitation.state === Invitation.State.CONNECTING) {
+      console.log(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+    }
+  }, []);
+
+  const inviteActions = {
+    inviteOne: {
+      label: t('invite one label'),
+      description: t('invite one description'),
+      icon: UserPlus,
+      onClick: useCallback(() => {
+        const invitation = space.share?.({
+          type: Invitation.Type.INTERACTIVE,
+          authMethod: Invitation.AuthMethod.SHARED_SECRET,
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
+          invitation.subscribe(onInvitationEvent);
+        }
+      }, [space]),
+    },
+    inviteMany: {
+      label: t('invite many label'),
+      description: t('invite many description'),
+      icon: UsersThree,
+      onClick: useCallback(() => {
+        const invitation = space.share?.({
+          type: Invitation.Type.MULTIUSE,
+          authMethod: Invitation.AuthMethod.NONE,
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
+          invitation.subscribe(onInvitationEvent);
+        }
+      }, [space]),
+    },
+  };
+
+  return <SpaceManagerImpl {...props} invitations={invitations} inviteActions={inviteActions} />;
+};
+
+const headingFragment = 'pis-3 pie-1 plb-1 mbe-1 font-medium';
+
+export const SpaceManagerImpl = (props: SpaceManagerImplProps) => {
+  const {
+    active,
+    space,
+    createInvitationUrl,
+    send,
+    inviteActions: propsInviteActions,
+    invitations,
+    showInactiveInvitations,
+    SpaceMemberList: SpaceMemberListComponent = SpaceMemberList,
+    InvitationList: InvitationListComponent = InvitationList,
+  } = props;
+  const { t } = useTranslation('os');
+
+  const inviteActions =
+    propsInviteActions ??
+    ({
+      noopInvite: {
+        label: t('create space invitation label'),
+        description: '',
+        icon: Placeholder,
+        onClick: () => {},
+      },
+    } as Record<string, ActionMenuItem>);
+
+  const [activeAction, setInternalActiveAction] = useState(localStorage.getItem(activeActionKey) ?? 'inviteOne');
+
+  const setActiveAction = (nextAction: string) => {
+    setInternalActiveAction(nextAction);
+    localStorage.setItem(activeActionKey, nextAction);
+  };
+
+  const visibleInvitations = showInactiveInvitations
+    ? invitations
+    : invitations?.filter((invitation) => ![Invitation.State.CANCELLED].includes(invitation.get().state));
+
+  return (
+    <>
+      <ScrollArea.Root classNames='grow shrink basis-28 -mli-2'>
+        <ScrollArea.Viewport classNames='is-full pie-2'>
+          {!!visibleInvitations?.length && (
+            <>
+              <h3 className={mx(headingFragment, descriptionText)}>{t('invitation list heading')}</h3>
+              <InvitationListComponent
+                className='mb-2'
+                send={send}
+                invitations={visibleInvitations ?? []}
+                onClickRemove={(invitation) => invitation.cancel()}
+                createInvitationUrl={createInvitationUrl}
+              />
+              <h3 className={mx(headingFragment, descriptionText, 'mbs-2')}>{t('space member list heading')}</h3>
+            </>
+          )}
+          <SpaceMemberListComponent spaceKey={space.key} includeSelf />
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar orientation='vertical'>
+          <ScrollArea.Thumb />
+        </ScrollArea.Scrollbar>
+      </ScrollArea.Root>
+      <Actions>
+        <BifurcatedAction
+          disabled={!active}
+          actions={inviteActions}
+          activeAction={activeAction}
+          onChangeActiveAction={setActiveAction as Dispatch<SetStateAction<string>>}
+          data-testid='spaces-panel.create-invitation'
+        />
+      </Actions>
+    </>
+  );
+};

package/src/panels/SpacePanel/steps/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './SpaceManager';

package/src/panels/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './IdentityPanel';
+export * from './JoinPanel';
+export * from './SpacePanel';

package/src/playwright/invitations-manager.ts

@@ -0,0 +1,168 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type { Browser, ConsoleMessage } from '@playwright/test';
+import { expect } from 'chai';
+import waitForExpect from 'wait-for-expect';
+
+import { Trigger } from '@dxos/async';
+import { type Invitation } from '@dxos/react-client/invitations';
+import { ConnectionState } from '@dxos/react-client/mesh';
+import { setupPage } from '@dxos/test/playwright';
+
+import { ScopedShellManager } from '../testing';
+
+// TODO(wittjosiah): Factor out.
+// TODO(burdon): No hard-coding of ports; reconcile all DXOS tools ports.
+const storybookUrl = (storyId: string) => `http://localhost:9009/iframe.html?id=${storyId}&viewMode=story`;
+
+export type PanelType = number | 'identity' | 'devices' | 'spaces' | 'join';
+
+export class InvitationsManager extends ScopedShellManager {
+  private _initialized = false;
+  private _invitationCode = new Trigger<string>();
+  private _authCode = new Trigger<string>();
+
+  constructor(private readonly _browser: Browser) {
+    super();
+  }
+
+  async init() {
+    if (this._initialized) {
+      return;
+    }
+
+    const { page } = await setupPage(this._browser, {
+      url: storybookUrl('invitations--default'),
+      waitFor: (page) => page.getByTestId('invitations.identity-header').first().isVisible(),
+    });
+
+    this.page = page;
+    this.page.on('console', (message) => this._onConsoleMessage(message));
+    this._initialized = true;
+  }
+
+  // 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').first().textContent();
+  }
+
+  async getSpaceName(id: number, nth: number) {
+    // TODO(wittjosiah): Update id.
+    return this.peer(id).getByTestId('space-list-item').nth(nth).textContent();
+  }
+
+  async getAuthCode(): Promise<string> {
+    return await this._authCode.wait();
+  }
+
+  // Actions
+
+  async toggleNetworkStatus(id: number) {
+    await this.peer(id).getByTestId('invitations.toggle-network').click();
+  }
+
+  async openPanel(id: number, panel: PanelType) {
+    const peer = this.peer(id);
+
+    if (typeof panel === 'number') {
+      // TODO(wittjosiah): Update id.
+      await peer.getByTestId('space-list-item').nth(panel).click();
+    }
+
+    switch (panel) {
+      case 'identity':
+        await peer.getByTestId('invitations.open-join-identity').click();
+        break;
+
+      case 'devices':
+        await peer.getByTestId('invitations.open-devices').click();
+        break;
+
+      case 'spaces':
+        await peer.getByTestId('invitations.list-spaces').click();
+        break;
+
+      case 'join':
+        await peer.getByTestId('invitations.open-join-space').click();
+        break;
+    }
+  }
+
+  async createIdentity(id: number) {
+    const createIdentity = this.peer(id).getByTestId('invitations.create-identity');
+    // TODO(wittjosiah): Clicking on buttons wrapped in tooltips is flaky in webkit playwright.
+    await createIdentity.click();
+    await waitForExpect(async () => {
+      expect(await createIdentity.isDisabled()).to.be.true;
+    });
+  }
+
+  async createSpace(id: number) {
+    await this.peer(id).getByTestId('invitations.create-space').click();
+  }
+
+  async createInvitation(id: number, type: 'device' | 'space', options?: Partial<Invitation>): Promise<string> {
+    this._invitationCode = new Trigger<string>();
+    this._authCode = new Trigger<string>();
+
+    if (!options) {
+      const peer = this.peer(id);
+      await peer.getByTestId(`${type}s-panel.create-invitation`).click();
+      return this._invitationCode.wait();
+    }
+
+    await this.page.evaluate(
+      ({ id, type, options }) => {
+        if (type === 'device') {
+          (window as any)[`peer${id}CreateHaloInvitation`](options);
+        } else {
+          (window as any)[`peer${id}CreateSpaceInvitation`](options);
+        }
+      },
+      { id, type, options },
+    );
+    return this._invitationCode.wait();
+  }
+
+  async acceptInvitation(id: number, type: 'device' | 'space', invitation: string) {
+    const peer = this.peer(id);
+    // TODO(wittjosiah): Update ids.
+    if (type === 'device') {
+      await peer.getByTestId('join-identity').click();
+    }
+    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-input`).waitFor({ timeout: 500 });
+    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-input`).fill(invitation);
+    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-input-continue`).click();
+  }
+
+  private async _onConsoleMessage(message: ConsoleMessage) {
+    try {
+      const json = JSON.parse(message.text());
+      if (json.invitationCode) {
+        this._invitationCode.wake(json.invitationCode);
+      }
+      if (json.authCode) {
+        this._authCode.wake(json.authCode);
+      }
+    } catch {}
+  }
+}