@dxos/plugin-client 0.6.14-staging.e15392e → 0.7.0

package/src/ClientPlugin.tsx

@@ -7,8 +7,10 @@ import React from 'react';
 
 import {
   filterPlugins,
+  LayoutAction,
   parseIntentPlugin,
   resolvePlugin,
+  type SurfaceProvides,
   type GraphBuilderProvides,
   type IntentResolverProvides,
   type Plugin,
@@ -20,8 +22,10 @@ import { registerSignalsRuntime } from '@dxos/echo-signals/react';
 import { log } from '@dxos/log';
 import { createExtension, type Node } from '@dxos/plugin-graph';
 import { Client, type ClientOptions, ClientProvider } from '@dxos/react-client';
+import { type IdentityPanelProps, type JoinPanelProps } from '@dxos/shell/react';
 
-import meta, { CLIENT_PLUGIN, ClientAction } from './meta';
+import { IdentityDialog, JoinDialog } from './components';
+import meta, { CLIENT_PLUGIN, ClientAction, OBSERVABILITY_ACTION } from './meta';
 import translations from './translations';
 
 export type ClientPluginOptions = ClientOptions & {
@@ -30,6 +34,16 @@ export type ClientPluginOptions = ClientOptions & {
    */
   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.
    */
@@ -40,10 +54,16 @@ export type ClientPluginOptions = ClientOptions & {
    * 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;
   };
@@ -62,8 +82,11 @@ export const parseSchemaPlugin = (plugin?: Plugin) =>
 
 export const ClientPlugin = ({
   appKey,
+  invitationUrl = window.location.origin,
+  invitationParam = 'deviceInvitationCode',
   onClientInitialized,
   onReady,
+  onReset,
   ...options
 }: ClientPluginOptions): PluginDefinition<
   Omit<ClientPluginProvides, 'client'>,
@@ -74,6 +97,12 @@ export const ClientPlugin = ({
   let client: Client;
   let error: unknown = null;
 
+  const createDeviceInvitationUrl = (invitationCode: string) => {
+    const baseUrl = new URL(invitationUrl);
+    baseUrl.searchParams.set(invitationParam, invitationCode);
+    return baseUrl.toString();
+  };
+
   return {
     meta,
     initialize: async () => {
@@ -118,6 +147,26 @@ 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)} />;
+              }
+              break;
+          }
+
+          return null;
+        },
+      },
       graph: {
         builder: (plugins) => {
           const intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
@@ -131,7 +180,7 @@ export const ClientPlugin = ({
                 id,
                 data: async () => {
                   await intentPlugin?.provides.intent.dispatch([
-                    { plugin: CLIENT_PLUGIN, action: ClientAction.OPEN_SHELL },
+                    { plugin: CLIENT_PLUGIN, action: ClientAction.SHARE_IDENTITY },
                   ]);
                 },
                 properties: {
@@ -153,10 +202,6 @@ export const ClientPlugin = ({
       intent: {
         resolver: async (intent) => {
           switch (intent.action) {
-            case ClientAction.OPEN_SHELL:
-              await client.shell.open(intent.data?.layout);
-              return { data: true };
-
             case ClientAction.CREATE_IDENTITY: {
               const data = await client.halo.createIdentity();
               return {
@@ -164,10 +209,9 @@ export const ClientPlugin = ({
                 intents: [
                   [
                     {
-                      // NOTE: This action is hardcoded to avoid circular dependency with observability plugin.
-                      action: 'dxos.org/plugin/observability/send-event',
+                      action: OBSERVABILITY_ACTION,
                       data: {
-                        name: 'identity.created',
+                        name: 'identity.create',
                       },
                     },
                   ],
@@ -176,16 +220,20 @@ export const ClientPlugin = ({
             }
 
             case ClientAction.JOIN_IDENTITY: {
-              const data = await client.shell.joinIdentity({ invitationCode: intent.data?.invitationCode });
               return {
-                data,
+                data: true,
                 intents: [
                   [
                     {
-                      // NOTE: This action is hardcoded to avoid circular dependency with observability plugin.
-                      action: 'dxos.org/plugin/observability/send-event',
+                      action: LayoutAction.SET_LAYOUT,
                       data: {
-                        name: 'identity.joined',
+                        element: 'dialog',
+                        component: 'dxos.org/plugin/client/JoinDialog',
+                        dialogBlockAlign: 'start',
+                        subject: {
+                          initialInvitationCode: intent.data?.invitationCode,
+                          initialDisposition: 'accept-halo-invitation',
+                        } satisfies Partial<JoinPanelProps>,
                       },
                     },
                   ],
@@ -194,22 +242,24 @@ export const ClientPlugin = ({
             }
 
             case ClientAction.SHARE_IDENTITY: {
-              const data = await client.shell.shareIdentity();
               return {
-                data,
+                data: true,
                 intents: [
                   [
                     {
-                      // NOTE: This action is hardcoded to avoid circular dependency with observability plugin.
-                      action: 'dxos.org/plugin/observability/send-event',
+                      action: LayoutAction.SET_LAYOUT,
+                      data: {
+                        element: 'dialog',
+                        component: 'dxos.org/plugin/client/IdentityDialog',
+                        dialogBlockAlign: 'start',
+                      },
+                    },
+                  ],
+                  [
+                    {
+                      action: OBSERVABILITY_ACTION,
                       data: {
-                        name: 'identity.shared',
-                        properties: {
-                          deviceKey: data.device?.deviceKey.truncate(),
-                          deviceKind: data.device?.kind,
-                          error: data.error?.message,
-                          canceled: data.cancelled,
-                        },
+                        name: 'identity.share',
                       },
                     },
                   ],
@@ -218,22 +268,30 @@ export const ClientPlugin = ({
             }
 
             case ClientAction.RECOVER_IDENTITY: {
-              const data = await client.shell.recoverIdentity();
               return {
-                data,
+                data: true,
                 intents: [
                   [
                     {
-                      // NOTE: This action is hardcoded to avoid circular dependency with observability plugin.
-                      action: 'dxos.org/plugin/observability/send-event',
+                      action: LayoutAction.SET_LAYOUT,
                       data: {
-                        name: 'identity.recovered',
+                        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 };
+            }
           }
         },
       },

package/src/components/IdentityDialog.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { useClient } from '@dxos/react-client';
+import { Dialog } from '@dxos/react-ui';
+import { ClipboardProvider, IdentityPanel, type IdentityPanelProps } from '@dxos/shell/react';
+
+import { ClientAction } from '../meta';
+
+export const IdentityDialog = (props: IdentityPanelProps) => {
+  const dispatch = useIntentDispatcher();
+  const client = useClient();
+
+  const handleDone = useCallback(
+    () =>
+      dispatch({
+        action: LayoutAction.SET_LAYOUT,
+        data: {
+          element: 'dialog',
+          state: false,
+        },
+      }),
+    [dispatch],
+  );
+
+  const handleResetStorage = useCallback(async () => {
+    await client.reset();
+    await dispatch({ action: ClientAction.RESET_STORAGE });
+  }, [dispatch]);
+
+  const handleRecover = useCallback(async () => {
+    await client.reset();
+    await dispatch({ action: ClientAction.RESET_STORAGE, data: { target: 'recoverIdentity' } });
+  }, [dispatch]);
+
+  const handleJoinNewIdentity = useCallback(async () => {
+    await client.reset();
+    await dispatch({ action: ClientAction.RESET_STORAGE, data: { target: 'deviceInvitation' } });
+  }, [dispatch]);
+
+  return (
+    <Dialog.Content>
+      <ClipboardProvider>
+        <IdentityPanel
+          {...props}
+          doneActionParent={<Dialog.Close asChild />}
+          onDone={handleDone}
+          onResetStorage={handleResetStorage}
+          onRecover={handleRecover}
+          onJoinNewIdentity={handleJoinNewIdentity}
+        />
+      </ClipboardProvider>
+    </Dialog.Content>
+  );
+};

package/src/components/JoinDialog.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+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';
+
+export const JoinDialog = (props: JoinPanelProps) => {
+  const dispatch = useIntentDispatcher();
+
+  const handleCancelResetStorage = useCallback(
+    () => dispatch({ plugin: CLIENT_PLUGIN, action: ClientAction.SHARE_IDENTITY }),
+    [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: {
+              name: props.initialDisposition === 'recover-identity' ? 'identity.recover' : 'identity.join',
+            },
+          }),
+        ]);
+      }
+    },
+    [dispatch],
+  );
+
+  return (
+    <Dialog.Content>
+      <JoinPanel
+        mode='halo-only'
+        {...props}
+        exitActionParent={<Dialog.Close asChild />}
+        doneActionParent={<Dialog.Close asChild />}
+        onCancelResetStorage={handleCancelResetStorage}
+        onDone={handleDone}
+      />
+    </Dialog.Content>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './IdentityDialog';
+export * from './JoinDialog';

package/src/meta.ts

@@ -13,9 +13,12 @@ export default {
 
 const CLIENT_ACTION = `${CLIENT_PLUGIN}/action`;
 export enum ClientAction {
-  OPEN_SHELL = `${CLIENT_ACTION}/SHELL`,
   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`,
 }
+
+// NOTE: This action is hardcoded to avoid circular dependency with observability plugin.
+export const OBSERVABILITY_ACTION = 'dxos.org/plugin/observability/send-event';

package/dist/lib/browser/chunk-3ESI7PGR.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const CLIENT_PLUGIN = 'dxos.org/plugin/client';\n\nexport default {\n  id: CLIENT_PLUGIN,\n  name: 'Client',\n} satisfies PluginMeta;\n\nconst CLIENT_ACTION = `${CLIENT_PLUGIN}/action`;\nexport enum ClientAction {\n  OPEN_SHELL = `${CLIENT_ACTION}/SHELL`,\n  CREATE_IDENTITY = `${CLIENT_ACTION}/CREATE_IDENTITY`,\n  JOIN_IDENTITY = `${CLIENT_ACTION}/JOIN_IDENTITY`,\n  SHARE_IDENTITY = `${CLIENT_ACTION}/SHARE_IDENTITY`,\n  RECOVER_IDENTITY = `${CLIENT_ACTION}/RECOVER_IDENTITY`,\n}\n"],
-  "mappings": ";AAMO,IAAMA,gBAAgB;AAE7B,IAAA,eAAe;EACbC,IAAID;EACJE,MAAM;AACR;AAEA,IAAMC,gBAAgB,GAAGH,aAAAA;;UACbI,eAAAA;8CACG,GAAGD,aAAAA,QAAqB,IAAA;mDACnB,GAAGA,aAAAA,kBAA+B,IAAA;iDACpC,GAAGA,aAAAA,gBAA6B,IAAA;kDAC/B,GAAGA,aAAAA,iBAA8B,IAAA;oDAC/B,GAAGA,aAAAA,mBAAgC,IAAA;GAL5CC,iBAAAA,eAAAA,CAAAA,EAAAA;",
-  "names": ["CLIENT_PLUGIN", "id", "name", "CLIENT_ACTION", "ClientAction"]
-}

package/dist/lib/node/chunk-ZWE6N7MY.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const CLIENT_PLUGIN = 'dxos.org/plugin/client';\n\nexport default {\n  id: CLIENT_PLUGIN,\n  name: 'Client',\n} satisfies PluginMeta;\n\nconst CLIENT_ACTION = `${CLIENT_PLUGIN}/action`;\nexport enum ClientAction {\n  OPEN_SHELL = `${CLIENT_ACTION}/SHELL`,\n  CREATE_IDENTITY = `${CLIENT_ACTION}/CREATE_IDENTITY`,\n  JOIN_IDENTITY = `${CLIENT_ACTION}/JOIN_IDENTITY`,\n  SHARE_IDENTITY = `${CLIENT_ACTION}/SHARE_IDENTITY`,\n  RECOVER_IDENTITY = `${CLIENT_ACTION}/RECOVER_IDENTITY`,\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAMO,IAAMA,gBAAgB;AAE7B,IAAA,eAAe;EACbC,IAAID;EACJE,MAAM;AACR;AAEA,IAAMC,gBAAgB,GAAGH,aAAAA;;UACbI,eAAAA;8CACG,GAAGD,aAAAA,QAAqB,IAAA;mDACnB,GAAGA,aAAAA,kBAA+B,IAAA;iDACpC,GAAGA,aAAAA,gBAA6B,IAAA;kDAC/B,GAAGA,aAAAA,iBAA8B,IAAA;oDAC/B,GAAGA,aAAAA,mBAAgC,IAAA;GAL5CC,iBAAAA,eAAAA,CAAAA,EAAAA;",
-  "names": ["CLIENT_PLUGIN", "id", "name", "CLIENT_ACTION", "ClientAction"]
-}

package/dist/lib/node-esm/chunk-SZVMJZ6O.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const CLIENT_PLUGIN = 'dxos.org/plugin/client';\n\nexport default {\n  id: CLIENT_PLUGIN,\n  name: 'Client',\n} satisfies PluginMeta;\n\nconst CLIENT_ACTION = `${CLIENT_PLUGIN}/action`;\nexport enum ClientAction {\n  OPEN_SHELL = `${CLIENT_ACTION}/SHELL`,\n  CREATE_IDENTITY = `${CLIENT_ACTION}/CREATE_IDENTITY`,\n  JOIN_IDENTITY = `${CLIENT_ACTION}/JOIN_IDENTITY`,\n  SHARE_IDENTITY = `${CLIENT_ACTION}/SHARE_IDENTITY`,\n  RECOVER_IDENTITY = `${CLIENT_ACTION}/RECOVER_IDENTITY`,\n}\n"],
-  "mappings": ";;;AAMO,IAAMA,gBAAgB;AAE7B,IAAA,eAAe;EACbC,IAAID;EACJE,MAAM;AACR;AAEA,IAAMC,gBAAgB,GAAGH,aAAAA;;UACbI,eAAAA;8CACG,GAAGD,aAAAA,QAAqB,IAAA;mDACnB,GAAGA,aAAAA,kBAA+B,IAAA;iDACpC,GAAGA,aAAAA,gBAA6B,IAAA;kDAC/B,GAAGA,aAAAA,iBAA8B,IAAA;oDAC/B,GAAGA,aAAAA,mBAAgC,IAAA;GAL5CC,iBAAAA,eAAAA,CAAAA,EAAAA;",
-  "names": ["CLIENT_PLUGIN", "id", "name", "CLIENT_ACTION", "ClientAction"]
-}