@dxos/plugin-client 0.7.4-staging.f7e8224 → 0.7.5-main.499c70c

package/src/ClientPlugin.tsx

@@ -8,66 +8,31 @@ import {
   LayoutAction,
   parseIntentPlugin,
   resolvePlugin,
-  type SurfaceProvides,
-  type GraphBuilderProvides,
-  type IntentResolverProvides,
-  type Plugin,
   type PluginDefinition,
-  type TranslationsProvides,
+  createSurface,
+  createIntent,
+  createResolver,
 } from '@dxos/app-framework';
 import { Config, Defaults, Envs, Local, Storage } from '@dxos/config';
 import { registerSignalsRuntime } from '@dxos/echo-signals/react';
 import { invariant } from '@dxos/invariant';
 import { createExtension, type Node } from '@dxos/plugin-graph';
-import { Client, type ClientOptions, ClientProvider } from '@dxos/react-client';
+import { ObservabilityAction } from '@dxos/plugin-observability/types';
+import { Client, ClientProvider } from '@dxos/react-client';
 import { type IdentityPanelProps, type JoinPanelProps } from '@dxos/shell/react';
 
-import { IdentityDialog, JoinDialog, RecoveryCodeDialog, type RecoveryCodeDialogProps } from './components';
-import meta, { CLIENT_PLUGIN, ClientAction, OBSERVABILITY_ACTION } from './meta';
+import {
+  IDENTITY_DIALOG,
+  IdentityDialog,
+  JOIN_DIALOG,
+  JoinDialog,
+  RECOVER_CODE_DIALOG,
+  RecoveryCodeDialog,
+  type RecoveryCodeDialogProps,
+} from './components';
+import meta, { CLIENT_PLUGIN } from './meta';
 import translations from './translations';
-
-export type ClientPluginOptions = ClientOptions & {
-  /**
-   * Used to track app-specific state in spaces.
-   */
-  appKey: string;
-
-  /**
-   * Base URL for the invitation link.
-   */
-  invitationUrl?: string;
-
-  /**
-   * Query parameter for the invitation code.
-   */
-  invitationParam?: string;
-
-  /**
-   * Run after the client has been initialized.
-   */
-  onClientInitialized?: (client: Client) => Promise<void>;
-
-  /**
-   * Run after the identity has been successfully initialized.
-   * Run with client during plugin ready phase.
-   */
-  onReady?: (client: Client, plugins: Plugin[]) => Promise<void>;
-
-  /**
-   * Called when the client is reset.
-   */
-  onReset?: (params: { target?: string }) => Promise<void>;
-};
-
-export type ClientPluginProvides = IntentResolverProvides &
-  GraphBuilderProvides &
-  SurfaceProvides &
-  TranslationsProvides & {
-    client: Client;
-  };
-
-export const parseClientPlugin = (plugin?: Plugin) =>
-  (plugin?.provides as any).client instanceof Client ? (plugin as Plugin<ClientPluginProvides>) : undefined;
+import { ClientAction, type ClientPluginOptions, type ClientPluginProvides } from './types';
 
 export const ClientPlugin = ({
   appKey,
@@ -119,7 +84,7 @@ export const ClientPlugin = ({
         context: ({ children }) => <ClientProvider client={client}>{children}</ClientProvider>,
       };
     },
-    ready: async (plugins) => {
+    ready: async ({ plugins }) => {
       if (error) {
         throw error;
       }
@@ -132,30 +97,32 @@ export const ClientPlugin = ({
     provides: {
       translations,
       surface: {
-        component: ({ data, role, ...rest }) => {
-          switch (role) {
-            case 'dialog':
-              if (data.component === 'dxos.org/plugin/client/IdentityDialog') {
-                return (
-                  <IdentityDialog
-                    {...(data.subject as IdentityPanelProps)}
-                    createInvitationUrl={createDeviceInvitationUrl}
-                  />
-                );
-              } else if (data.component === 'dxos.org/plugin/client/JoinDialog') {
-                return <JoinDialog {...(data.subject as JoinPanelProps)} />;
-              } else if (data.component === 'dxos.org/plugin/client/RecoveryCodeDialog') {
-                return <RecoveryCodeDialog {...(data.subject as RecoveryCodeDialogProps)} />;
-              }
-              break;
-          }
-
-          return null;
-        },
+        definitions: () => [
+          createSurface({
+            id: IDENTITY_DIALOG,
+            role: 'dialog',
+            filter: (data): data is { subject: IdentityPanelProps } => data.component === IDENTITY_DIALOG,
+            component: ({ data }) => (
+              <IdentityDialog {...data.subject} createInvitationUrl={createDeviceInvitationUrl} />
+            ),
+          }),
+          createSurface({
+            id: JOIN_DIALOG,
+            role: 'dialog',
+            filter: (data): data is { subject: JoinPanelProps } => data.component === JOIN_DIALOG,
+            component: ({ data }) => <JoinDialog {...data.subject} />,
+          }),
+          createSurface({
+            id: RECOVER_CODE_DIALOG,
+            role: 'dialog',
+            filter: (data): data is { subject: RecoveryCodeDialogProps } => data.component === RECOVER_CODE_DIALOG,
+            component: ({ data }) => <RecoveryCodeDialog {...data.subject} />,
+          }),
+        ],
       },
       graph: {
         builder: (plugins) => {
-          const intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
+          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatchPromise;
           const id = `${CLIENT_PLUGIN}/open-shell`;
 
           return createExtension({
@@ -165,9 +132,7 @@ export const ClientPlugin = ({
               {
                 id,
                 data: async () => {
-                  await intentPlugin?.provides.intent.dispatch([
-                    { plugin: CLIENT_PLUGIN, action: ClientAction.SHARE_IDENTITY },
-                  ]);
+                  await dispatch?.(createIntent(ClientAction.ShareIdentity));
                 },
                 properties: {
                   label: ['open shell label', { ns: CLIENT_PLUGIN }],
@@ -186,130 +151,76 @@ export const ClientPlugin = ({
         },
       },
       intent: {
-        resolver: async (intent) => {
-          switch (intent.action) {
-            case ClientAction.CREATE_IDENTITY: {
-              const data = await client.halo.createIdentity();
-              return {
-                data,
-                intents: [
-                  [
-                    {
-                      action: OBSERVABILITY_ACTION,
-                      data: {
-                        name: 'identity.create',
-                      },
-                    },
-                  ],
-                ],
-              };
-            }
-
-            case ClientAction.JOIN_IDENTITY: {
-              return {
-                data: true,
-                intents: [
-                  [
-                    {
-                      action: LayoutAction.SET_LAYOUT,
-                      data: {
-                        element: 'dialog',
-                        component: 'dxos.org/plugin/client/JoinDialog',
-                        dialogBlockAlign: 'start',
-                        subject: {
-                          initialInvitationCode: intent.data?.invitationCode,
-                          initialDisposition: 'accept-halo-invitation',
-                        } satisfies Partial<JoinPanelProps>,
-                      },
-                    },
-                  ],
-                ],
-              };
-            }
-
-            case ClientAction.SHARE_IDENTITY: {
-              return {
-                data: true,
-                intents: [
-                  [
-                    {
-                      action: LayoutAction.SET_LAYOUT,
-                      data: {
-                        element: 'dialog',
-                        component: 'dxos.org/plugin/client/IdentityDialog',
-                        dialogBlockAlign: 'start',
-                      },
-                    },
-                  ],
-                  [
-                    {
-                      action: OBSERVABILITY_ACTION,
-                      data: {
-                        name: 'identity.share',
-                      },
-                    },
-                  ],
-                ],
-              };
-            }
-
-            case ClientAction.RECOVER_IDENTITY: {
-              return {
-                data: true,
-                intents: [
-                  [
-                    {
-                      action: LayoutAction.SET_LAYOUT,
-                      data: {
-                        element: 'dialog',
-                        component: 'dxos.org/plugin/client/JoinDialog',
-                        dialogBlockAlign: 'start',
-                        subject: {
-                          initialDisposition: 'recover-identity',
-                        } satisfies Partial<JoinPanelProps>,
-                      },
-                    },
-                  ],
-                ],
-              };
-            }
-
-            case ClientAction.RESET_STORAGE: {
-              await onReset?.({ target: intent.data?.target });
-              return { data: true };
-            }
-
-            case ClientAction.CREATE_AGENT: {
-              invariant(client.services.services.EdgeAgentService, 'Missing EdgeAgentService');
-              await client.services.services.EdgeAgentService.createAgent(null as any, { timeout: 10_000 });
-              return { data: true };
-            }
-
-            case ClientAction.CREATE_RECOVERY_CODE: {
-              invariant(client.services.services.IdentityService, 'IdentityService not available');
-              // TODO(wittjosiah): This needs a proper api. Rename property.
-              const { seedphrase } = await client.services.services.IdentityService.createRecoveryPhrase();
-              return {
-                data: true,
-                intents: [
-                  [
-                    {
-                      action: LayoutAction.SET_LAYOUT,
-                      data: {
-                        element: 'dialog',
-                        dialogBlockAlign: 'start',
-                        dialogType: 'alert',
-                        state: true,
-                        component: 'dxos.org/plugin/client/RecoveryCodeDialog',
-                        subject: { code: seedphrase },
-                      },
-                    },
-                  ],
-                ],
-              };
-            }
-          }
-        },
+        resolvers: () => [
+          createResolver(ClientAction.CreateIdentity, async () => {
+            const data = await client.halo.createIdentity();
+            return { data, intents: [createIntent(ObservabilityAction.SendEvent, { name: 'identity.create' })] };
+          }),
+          createResolver(ClientAction.JoinIdentity, async (data) => {
+            return {
+              intents: [
+                createIntent(LayoutAction.SetLayout, {
+                  element: 'dialog',
+                  component: JOIN_DIALOG,
+                  dialogBlockAlign: 'start',
+                  subject: {
+                    initialInvitationCode: data.invitationCode,
+                    initialDisposition: 'accept-halo-invitation',
+                  } satisfies Partial<JoinPanelProps>,
+                }),
+              ],
+            };
+          }),
+          createResolver(ClientAction.ShareIdentity, async () => {
+            return {
+              intents: [
+                createIntent(LayoutAction.SetLayout, {
+                  element: 'dialog',
+                  component: IDENTITY_DIALOG,
+                  dialogBlockAlign: 'start',
+                }),
+                createIntent(ObservabilityAction.SendEvent, { name: 'identity.share' }),
+              ],
+            };
+          }),
+          createResolver(ClientAction.RecoverIdentity, async () => {
+            return {
+              intents: [
+                createIntent(LayoutAction.SetLayout, {
+                  element: 'dialog',
+                  component: JOIN_DIALOG,
+                  dialogBlockAlign: 'start',
+                  subject: { initialDisposition: 'recover-identity' } satisfies Partial<JoinPanelProps>,
+                }),
+              ],
+            };
+          }),
+          createResolver(ClientAction.ResetStorage, async (data) => {
+            await onReset?.({ target: data.target });
+            return {};
+          }),
+          createResolver(ClientAction.CreateAgent, async () => {
+            invariant(client.services.services.EdgeAgentService, 'Missing EdgeAgentService');
+            await client.services.services.EdgeAgentService.createAgent(null as any, { timeout: 10_000 });
+          }),
+          createResolver(ClientAction.CreateRecoveryCode, async () => {
+            invariant(client.services.services.IdentityService, 'IdentityService not available');
+            // TODO(wittjosiah): This needs a proper api. Rename property.
+            const { seedphrase } = await client.services.services.IdentityService.createRecoveryPhrase();
+            return {
+              intents: [
+                createIntent(LayoutAction.SetLayout, {
+                  element: 'dialog',
+                  dialogBlockAlign: 'start',
+                  dialogType: 'alert',
+                  state: true,
+                  component: RECOVER_CODE_DIALOG,
+                  subject: { code: seedphrase },
+                }),
+              ],
+            };
+          }),
+        ],
       },
     },
   };

package/src/components/IdentityDialog.tsx

@@ -4,42 +4,44 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { Clipboard, Dialog } from '@dxos/react-ui';
 import { IdentityPanel, type IdentityPanelProps } from '@dxos/shell/react';
 
-import { ClientAction } from '../meta';
+import { CLIENT_PLUGIN } from '../meta';
+import { ClientAction } from '../types';
+
+export const IDENTITY_DIALOG = `${CLIENT_PLUGIN}/IdentityDialog`;
 
 export const IdentityDialog = (props: IdentityPanelProps) => {
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
 
   const handleDone = useCallback(
     () =>
-      dispatch({
-        action: LayoutAction.SET_LAYOUT,
-        data: {
+      dispatch(
+        createIntent(LayoutAction.SetLayout, {
           element: 'dialog',
           state: false,
-        },
-      }),
+        }),
+      ),
     [dispatch],
   );
 
   const handleResetStorage = useCallback(async () => {
     await client.reset();
-    await dispatch({ action: ClientAction.RESET_STORAGE });
+    await dispatch(createIntent(ClientAction.ResetStorage));
   }, [dispatch]);
 
   const handleRecover = useCallback(async () => {
     await client.reset();
-    await dispatch({ action: ClientAction.RESET_STORAGE, data: { target: 'recoverIdentity' } });
+    await dispatch(createIntent(ClientAction.ResetStorage, { target: 'recoverIdentity' }));
   }, [dispatch]);
 
   const handleJoinNewIdentity = useCallback(async () => {
     await client.reset();
-    await dispatch({ action: ClientAction.RESET_STORAGE, data: { target: 'deviceInvitation' } });
+    await dispatch(createIntent(ClientAction.ResetStorage, { target: 'deviceInvitation' }));
   }, [dispatch]);
 
   return (

package/src/components/JoinDialog.tsx

@@ -4,38 +4,32 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
 
-import { CLIENT_PLUGIN, ClientAction, OBSERVABILITY_ACTION } from '../meta';
+import { CLIENT_PLUGIN } from '../meta';
+import { ClientAction } from '../types';
+
+export const JOIN_DIALOG = `${CLIENT_PLUGIN}/JoinDialog`;
 
 export const JoinDialog = (props: JoinPanelProps) => {
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
-  const handleCancelResetStorage = useCallback(
-    () => dispatch({ plugin: CLIENT_PLUGIN, action: ClientAction.SHARE_IDENTITY }),
-    [dispatch],
-  );
+  const handleCancelResetStorage = useCallback(() => dispatch(createIntent(ClientAction.ShareIdentity)), [dispatch]);
 
   const handleDone = useCallback(
     async (result: InvitationResult | null) => {
       if (result?.identityKey) {
         await Promise.all([
-          dispatch({
-            action: LayoutAction.SET_LAYOUT,
-            data: {
-              element: 'dialog',
-              state: false,
-            },
-          }),
-          dispatch({
-            action: OBSERVABILITY_ACTION,
-            data: {
+          dispatch(createIntent(LayoutAction.SetLayout, { element: 'dialog', state: false })),
+          dispatch(
+            createIntent(ObservabilityAction.SendEvent, {
               name: props.initialDisposition === 'recover-identity' ? 'identity.recover' : 'identity.join',
-            },
-          }),
+            }),
+          ),
         ]);
       }
     },

package/src/components/RecoveryCodeDialog.stories.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { useClient } from '@dxos/react-client';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { AlertDialog, useAsyncEffect } from '@dxos/react-ui';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { RecoveryCodeDialog, type RecoveryCodeDialogProps } from './RecoveryCodeDialog';
+import translations from '../translations';
+
+const Render = () => {
+  const client = useClient();
+  const [seedphrase, setSeedphrase] = useState<string>();
+  useAsyncEffect(async () => {
+    const { seedphrase } = (await client.services.services.IdentityService?.createRecoveryPhrase()) ?? {};
+    setSeedphrase(seedphrase);
+  }, [client]);
+
+  return (
+    <AlertDialog.Root open={!!seedphrase}>
+      <AlertDialog.Overlay>
+        <RecoveryCodeDialog code={seedphrase ?? ''} />
+      </AlertDialog.Overlay>
+    </AlertDialog.Root>
+  );
+};
+
+const meta: Meta<RecoveryCodeDialogProps> = {
+  title: 'plugins/plugin-client/RecoveryCodeDialog',
+  component: RecoveryCodeDialog,
+  render: Render,
+  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ tooltips: true })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<RecoveryCodeDialogProps>;
+
+export const Default: Story = {};

package/src/components/RecoveryCodeDialog.tsx

@@ -8,6 +8,8 @@ import { AlertDialog, Button, Clipboard, Input, useTranslation } from '@dxos/rea
 
 import { CLIENT_PLUGIN } from '../meta';
 
+export const RECOVER_CODE_DIALOG = `${CLIENT_PLUGIN}/RecoveryCodeDialog`;
+
 export type RecoveryCodeDialogProps = {
   code: string;
 };
@@ -20,12 +22,15 @@ export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
 
   return (
     <AlertDialog.Content classNames='bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
-      <AlertDialog.Title classNames=''>{t('recovery code dialog title')}</AlertDialog.Title>
+      <AlertDialog.Title>{t('recovery code dialog title')}</AlertDialog.Title>
       <p className='py-4'>{t('recovery code dialog description')}</p>
       <Clipboard.Provider>
-        <Code value={code} />
+        <Code code={code} />
       </Clipboard.Provider>
-      <p className='py-4'>{t('recovery code dialog warning')}</p>
+      <div className='flex flex-col py-4 gap-2'>
+        <p>{t('recovery code dialog warning 1')}</p>
+        <p>{t('recovery code dialog warning 2')}</p>
+      </div>
       <div className='flex items-center gap-2 pbe-4'>
         <Input.Root>
           <Input.Checkbox
@@ -47,12 +52,19 @@ export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
   );
 };
 
-// TODO(wittjosiah): Factor out.
-const Code = ({ value }: { value: string }) => {
+const Code = ({ code }: { code: string }) => {
+  const words = code.split(' ');
   return (
     <div className='relative p-2 border border-separator rounded group'>
-      <Clipboard.IconButton value={value} classNames='absolute top-2 right-2 invisible group-hover:visible' />
-      <code className='whitespace-pre-wrap'>{value}</code>
+      <Clipboard.IconButton value={code} classNames='absolute top-2 right-2 invisible group-hover:visible' />
+      <div className='grid grid-cols-4'>
+        {words.map((word, i) => (
+          <div key={i} className='flex items-center p-2 gap-2 items-center'>
+            <div className='w-4 text-xs text-center text-subdued'>{i + 1}</div>
+            <div className='text-sm'>{word}</div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

package/src/meta.ts

@@ -10,17 +10,3 @@ export default {
   id: CLIENT_PLUGIN,
   name: 'Client',
 } satisfies PluginMeta;
-
-const CLIENT_ACTION = `${CLIENT_PLUGIN}/action`;
-export enum ClientAction {
-  CREATE_IDENTITY = `${CLIENT_ACTION}/CREATE_IDENTITY`,
-  JOIN_IDENTITY = `${CLIENT_ACTION}/JOIN_IDENTITY`,
-  SHARE_IDENTITY = `${CLIENT_ACTION}/SHARE_IDENTITY`,
-  RECOVER_IDENTITY = `${CLIENT_ACTION}/RECOVER_IDENTITY`,
-  RESET_STORAGE = `${CLIENT_ACTION}/RESET_STORAGE`,
-  CREATE_AGENT = `${CLIENT_ACTION}/CREATE_AGENT`,
-  CREATE_RECOVERY_CODE = `${CLIENT_ACTION}/CREATE_RECOVERY_CODE`,
-}
-
-// NOTE: This action is hardcoded to avoid circular dependency with observability plugin.
-export const OBSERVABILITY_ACTION = 'dxos.org/plugin/observability/send-event';

package/src/translations.ts

@@ -9,12 +9,13 @@ export default [
     'en-US': {
       [CLIENT_PLUGIN]: {
         'open shell label': 'Open HALO',
-        'recovery code dialog title': 'Recovery Code',
+        'recovery code dialog title': 'Account Recovery',
         'recovery code dialog description':
           'This is your identity recovery code, store it in a safe place. You can use it to recover your identity if you ever lose access to your devices.',
-        'recovery code dialog warning':
-          'Please note: This code will not be displayed again and cannot be replaced. It is your private key for recovering DXOS data. Anyone with this key will also be able to gain access to your account.',
-        'recovery code confirmation label': 'Confirm the code has been saved',
+        'recovery code dialog warning 1': 'NOTE: This code will not be displayed again.',
+        'recovery code dialog warning 2':
+          'It is your private key for recovering DXOS data. Anyone with this key will be able to gain access to your account.',
+        'recovery code confirmation label': 'Please confirm you have saved the code.',
         'continue label': 'Continue',
       },
     },