@dxos/plugin-space 0.6.14-staging.54a8bab → 0.6.14-staging.7b35391

package/src/SpacePlugin.tsx

@@ -16,6 +16,7 @@ import {
   type Plugin,
   type PluginDefinition,
   Surface,
+  findPlugin,
   firstIdInPart,
   openIds,
   parseGraphPlugin,
@@ -28,6 +29,7 @@ import {
 import { EventSubscriptions, type Trigger, type UnsubscribeCallback } from '@dxos/async';
 import { type HasId, isReactiveObject } from '@dxos/echo-schema';
 import { scheduledEffect } from '@dxos/echo-signals/core';
+import { invariant } from '@dxos/invariant';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { log } from '@dxos/log';
 import { Migrations } from '@dxos/migrations';
@@ -53,8 +55,7 @@ import {
   parseId,
   FQ_ID_LENGTH,
 } from '@dxos/react-client/echo';
-import { Dialog } from '@dxos/react-ui';
-import { ClipboardProvider, InvitationManager, type InvitationManagerProps, osTranslations } from '@dxos/shell/react';
+import { type JoinPanelProps, osTranslations } from '@dxos/shell/react';
 import { ComplexMap, nonNullable, reduceGroupBy } from '@dxos/util';
 
 import {
@@ -62,6 +63,7 @@ import {
   CollectionMain,
   CollectionSection,
   DefaultObjectSettings,
+  JoinDialog,
   MenuFooter,
   PopoverRenameObject,
   PopoverRenameSpace,
@@ -69,9 +71,11 @@ import {
   SmallPresence,
   SmallPresenceLive,
   SpacePresence,
-  SpaceSettings,
+  SpacePluginSettings,
   SpaceSettingsPanel,
   SyncStatus,
+  SpaceSettingsDialog,
+  type SpaceSettingsDialogProps,
 } from './components';
 import meta, { SPACE_PLUGIN, SpaceAction } from './meta';
 import translations from './translations';
@@ -93,6 +97,7 @@ import {
 } from './util';
 
 const ACTIVE_NODE_BROADCAST_INTERVAL = 30_000;
+const WAIT_FOR_OBJECT_TIMEOUT = 1000;
 const SPACE_MAX_OBJECTS = 500;
 // https://stackoverflow.com/a/19016910
 const DIRECTORY_TYPE = 'text/directory';
@@ -101,6 +106,16 @@ export const parseSpacePlugin = (plugin?: Plugin) =>
   Array.isArray((plugin?.provides as any).space?.enabled) ? (plugin as Plugin<SpacePluginProvides>) : undefined;
 
 export type SpacePluginOptions = {
+  /**
+   * Base URL for the invitation link.
+   */
+  invitationUrl?: string;
+
+  /**
+   * Query parameter for the invitation code.
+   */
+  invitationParam?: string;
+
   /**
    * Fired when first run logic should be executed.
    *
@@ -120,6 +135,8 @@ export type SpacePluginOptions = {
 };
 
 export const SpacePlugin = ({
+  invitationUrl = window.location.origin,
+  invitationParam = 'spaceInvitationCode',
   firstRun,
   onFirstRun,
 }: SpacePluginOptions = {}): PluginDefinition<SpacePluginProvides> => {
@@ -133,6 +150,7 @@ export const SpacePlugin = ({
     // TODO(wittjosiah): Stop using (Complex)Map inside reactive object.
     viewersByIdentity: new ComplexMap(PublicKey.hash),
     sdkMigrationRunning: {},
+    navigableCollections: false,
   });
   const subscriptions = new EventSubscriptions();
   const spaceSubscriptions = new EventSubscriptions();
@@ -145,6 +163,12 @@ export const SpacePlugin = ({
   let navigationPlugin: Plugin<LocationProvides> | undefined;
   let attentionPlugin: Plugin<AttentionPluginProvides> | undefined;
 
+  const createSpaceInvitationUrl = (invitationCode: string) => {
+    const baseUrl = new URL(invitationUrl);
+    baseUrl.searchParams.set(invitationParam, invitationCode);
+    return baseUrl.toString();
+  };
+
   const onSpaceReady = async () => {
     if (!clientPlugin || !intentPlugin || !graphPlugin || !navigationPlugin || !layoutPlugin || !attentionPlugin) {
       return;
@@ -186,7 +210,18 @@ export const SpacePlugin = ({
 
           const node = graph.findNode(soloPart.id);
           if (!node && soloPart.id.length === FQ_ID_LENGTH) {
-            void dispatch({ plugin: SPACE_PLUGIN, action: SpaceAction.WAIT_FOR_OBJECT, data: { id: soloPart.id } });
+            const timeout = setTimeout(async () => {
+              const node = graph.findNode(soloPart.id);
+              if (!node) {
+                await dispatch({
+                  plugin: SPACE_PLUGIN,
+                  action: SpaceAction.WAIT_FOR_OBJECT,
+                  data: { id: soloPart.id },
+                });
+              }
+            }, WAIT_FOR_OBJECT_TIMEOUT);
+
+            return () => clearTimeout(timeout);
           }
         },
       ),
@@ -315,6 +350,12 @@ export const SpacePlugin = ({
       settings.prop({ key: 'showHidden', type: LocalStorageStore.bool({ allowUndefined: true }) });
       state.prop({ key: 'spaceNames', type: LocalStorageStore.json<Record<string, string>>() });
 
+      // TODO(wittjosiah): Hardcoded due to circular dependency.
+      //   Should be based on a provides interface.
+      if (findPlugin(plugins, 'dxos.org/plugin/stack')) {
+        state.values.navigableCollections = true;
+      }
+
       graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
       layoutPlugin = resolvePlugin(plugins, parseLayoutPlugin);
       navigationPlugin = resolvePlugin(plugins, parseNavigationPlugin);
@@ -412,14 +453,15 @@ export const SpacePlugin = ({
                 { node: <DefaultObjectSettings object={data.subject} />, disposition: 'fallback' }
               ) : null;
             case 'dialog':
-              if (data.component === 'dxos.org/plugin/space/InvitationManagerDialog') {
+              if (data.component === 'dxos.org/plugin/space/SpaceSettingsDialog') {
                 return (
-                  <Dialog.Content>
-                    <ClipboardProvider>
-                      <InvitationManager active {...(data.subject as InvitationManagerProps)} />
-                    </ClipboardProvider>
-                  </Dialog.Content>
+                  <SpaceSettingsDialog
+                    {...(data.subject as SpaceSettingsDialogProps)}
+                    createInvitationUrl={createSpaceInvitationUrl}
+                  />
                 );
+              } else if (data.component === 'dxos.org/plugin/space/JoinDialog') {
+                return <JoinDialog {...(data.subject as JoinPanelProps)} />;
               }
               return null;
             case 'popover': {
@@ -462,7 +504,7 @@ export const SpacePlugin = ({
                     node: (
                       <>
                         <SpacePresence object={object} />
-                        {space.properties[COMPOSER_SPACE_LOCK] ? null : <ShareSpaceButton spaceId={space.id} />}
+                        {space.properties[COMPOSER_SPACE_LOCK] ? null : <ShareSpaceButton space={space} />}
                       </>
                     ),
                     disposition: 'hoist',
@@ -472,7 +514,7 @@ export const SpacePlugin = ({
             case 'section':
               return data.object instanceof CollectionType ? <CollectionSection collection={data.object} /> : null;
             case 'settings':
-              return data.plugin === meta.id ? <SpaceSettings settings={settings.values} /> : null;
+              return data.plugin === meta.id ? <SpacePluginSettings settings={settings.values} /> : null;
             case 'menu-footer':
               if (isEchoObject(data.object)) {
                 return <MenuFooter object={data.object} />;
@@ -533,6 +575,7 @@ export const SpacePlugin = ({
                       label: ['spaces label', { ns: SPACE_PLUGIN }],
                       testId: 'spacePlugin.spaces',
                       role: 'branch',
+                      disabled: true,
                       childrenPersistenceClass: 'echo',
                       onRearrangeChildren: async (nextOrder: Space[]) => {
                         // NOTE: This is needed to ensure order is updated by next animation frame.
@@ -567,43 +610,32 @@ export const SpacePlugin = ({
                 {
                   id: SpaceAction.CREATE,
                   data: async () => {
-                    await dispatch([
-                      {
-                        plugin: SPACE_PLUGIN,
-                        action: SpaceAction.CREATE,
-                      },
-                      {
-                        action: NavigationAction.OPEN,
-                      },
-                    ]);
+                    await dispatch({
+                      plugin: SPACE_PLUGIN,
+                      action: SpaceAction.CREATE,
+                    });
                   },
                   properties: {
                     label: ['create space label', { ns: SPACE_PLUGIN }],
                     icon: 'ph--plus--regular',
                     disposition: 'item',
                     testId: 'spacePlugin.createSpace',
-                    className: 'pbs-4',
+                    className: 'border-t border-separator',
                   },
                 },
                 {
                   id: SpaceAction.JOIN,
                   data: async () => {
-                    await dispatch([
-                      {
-                        plugin: SPACE_PLUGIN,
-                        action: SpaceAction.JOIN,
-                      },
-                      {
-                        action: NavigationAction.OPEN,
-                      },
-                    ]);
+                    await dispatch({
+                      plugin: SPACE_PLUGIN,
+                      action: SpaceAction.JOIN,
+                    });
                   },
                   properties: {
                     label: ['join space label', { ns: SPACE_PLUGIN }],
                     icon: 'ph--sign-in--regular',
                     disposition: 'item',
                     testId: 'spacePlugin.joinSpace',
-                    className: 'pbe-4',
                   },
                 },
               ],
@@ -622,26 +654,30 @@ export const SpacePlugin = ({
                   return;
                 }
 
-                const [spacesOrder] = memoizeQuery(client.spaces.default, Filter.schema(Expando, { key: SHARED }));
-                const order: string[] = spacesOrder?.order ?? [];
-                const orderMap = new Map(order.map((id, index) => [id, index]));
-                return [
-                  ...spaces
-                    .filter((space) => orderMap.has(space.id))
-                    .sort((a, b) => orderMap.get(a.id)! - orderMap.get(b.id)!),
-                  ...spaces.filter((space) => !orderMap.has(space.id)),
-                ]
-                  .filter((space) =>
-                    settings.values.showHidden ? true : space.state.get() !== SpaceState.SPACE_INACTIVE,
-                  )
-                  .map((space) =>
-                    constructSpaceNode({
-                      space,
-                      personal: space === client.spaces.default,
-                      namesCache: state.values.spaceNames,
-                      resolve,
-                    }),
-                  );
+                // TODO(wittjosiah): During client reset, accessing default space throws.
+                try {
+                  const [spacesOrder] = memoizeQuery(client.spaces.default, Filter.schema(Expando, { key: SHARED }));
+                  const order: string[] = spacesOrder?.order ?? [];
+                  const orderMap = new Map(order.map((id, index) => [id, index]));
+                  return [
+                    ...spaces
+                      .filter((space) => orderMap.has(space.id))
+                      .sort((a, b) => orderMap.get(a.id)! - orderMap.get(b.id)!),
+                    ...spaces.filter((space) => !orderMap.has(space.id)),
+                  ]
+                    .filter((space) =>
+                      settings.values.showHidden ? true : space.state.get() !== SpaceState.SPACE_INACTIVE,
+                    )
+                    .map((space) =>
+                      constructSpaceNode({
+                        space,
+                        navigable: state.values.navigableCollections,
+                        personal: space === client.spaces.default,
+                        namesCache: state.values.spaceNames,
+                        resolve,
+                      }),
+                    );
+                } catch {}
               },
             }),
 
@@ -655,12 +691,12 @@ export const SpacePlugin = ({
                   return;
                 }
 
-                const state = toSignal(
+                const spaceState = toSignal(
                   (onChange) => space.state.subscribe(() => onChange()).unsubscribe,
                   () => space.state.get(),
                   space.id,
                 );
-                if (state !== SpaceState.SPACE_READY) {
+                if (spaceState !== SpaceState.SPACE_READY) {
                   return;
                 }
 
@@ -675,7 +711,7 @@ export const SpacePlugin = ({
                   return;
                 }
 
-                return createObjectNode({ object, space, resolve });
+                return createObjectNode({ object, space, resolve, navigable: state.values.navigableCollections });
               },
             }),
 
@@ -683,7 +719,12 @@ export const SpacePlugin = ({
             createExtension({
               id: `${SPACE_PLUGIN}/actions`,
               filter: (node): node is Node<Space> => isSpace(node.data),
-              actionGroups: ({ node }) => constructSpaceActionGroups({ space: node.data, dispatch }),
+              actionGroups: ({ node }) =>
+                constructSpaceActionGroups({
+                  space: node.data,
+                  dispatch,
+                  navigable: state.values.navigableCollections,
+                }),
               actions: ({ node }) => {
                 const space = node.data;
                 return constructSpaceActions({
@@ -701,12 +742,12 @@ export const SpacePlugin = ({
               filter: (node): node is Node<Space> => isSpace(node.data),
               connector: ({ node }) => {
                 const space = node.data;
-                const state = toSignal(
+                const spaceState = toSignal(
                   (onChange) => space.state.subscribe(() => onChange()).unsubscribe,
                   () => space.state.get(),
                   space.id,
                 );
-                if (state !== SpaceState.SPACE_READY) {
+                if (spaceState !== SpaceState.SPACE_READY) {
                   return;
                 }
 
@@ -717,7 +758,9 @@ export const SpacePlugin = ({
 
                 return collection.objects
                   .filter(nonNullable)
-                  .map((object) => createObjectNode({ object, space, resolve }))
+                  .map((object) =>
+                    createObjectNode({ object, space, resolve, navigable: state.values.navigableCollections }),
+                  )
                   .filter(nonNullable);
               },
             }),
@@ -726,7 +769,12 @@ export const SpacePlugin = ({
             createExtension({
               id: `${SPACE_PLUGIN}/object-actions`,
               filter: (node): node is Node<EchoReactiveObject<any>> => isEchoObject(node.data),
-              actionGroups: ({ node }) => constructObjectActionGroups({ object: node.data, dispatch }),
+              actionGroups: ({ node }) =>
+                constructObjectActionGroups({
+                  object: node.data,
+                  dispatch,
+                  navigable: state.values.navigableCollections,
+                }),
               actions: ({ node }) => constructObjectActions({ node, dispatch }),
             }),
 
@@ -743,7 +791,9 @@ export const SpacePlugin = ({
 
                 return collection.objects
                   .filter(nonNullable)
-                  .map((object) => createObjectNode({ object, space, resolve }))
+                  .map((object) =>
+                    createObjectNode({ object, space, resolve, navigable: state.values.navigableCollections }),
+                  )
                   .filter(nonNullable);
               },
             }),
@@ -923,6 +973,7 @@ export const SpacePlugin = ({
                         [
                           { action: settings.values.onSpaceCreate, data: { space } },
                           { action: SpaceAction.ADD_OBJECT, data: { target: space } },
+                          { action: NavigationAction.OPEN },
                           { action: NavigationAction.EXPOSE },
                         ],
                       ]
@@ -943,69 +994,60 @@ export const SpacePlugin = ({
             }
 
             case SpaceAction.JOIN: {
-              if (client) {
-                const { space } = await client.shell.joinSpace({ invitationCode: intent.data?.invitationCode });
-                if (space) {
-                  return {
-                    data: {
-                      space,
-                      id: space.id,
-                      activeParts: { main: [space.id] },
+              return {
+                data: true,
+                intents: [
+                  [
+                    {
+                      action: LayoutAction.SET_LAYOUT,
+                      data: {
+                        element: 'dialog',
+                        component: 'dxos.org/plugin/space/JoinDialog',
+                        dialogBlockAlign: 'start',
+                        subject: {
+                          initialInvitationCode: intent.data?.invitationCode,
+                        } satisfies Partial<JoinPanelProps>,
+                      },
                     },
-                    intents: [
-                      [
-                        {
-                          action: LayoutAction.SET_LAYOUT,
-                          data: {
-                            element: 'toast',
-                            subject: {
-                              id: `${SPACE_PLUGIN}/join-success`,
-                              duration: 10_000,
-                              title: translations[0]['en-US'][SPACE_PLUGIN]['join success label'],
-                              closeLabel: translations[0]['en-US'][SPACE_PLUGIN]['dismiss label'],
-                            },
-                          },
-                        },
-                      ],
-                      [
-                        {
-                          action: ObservabilityAction.SEND_EVENT,
-                          data: {
-                            name: 'space.join',
-                            properties: {
-                              spaceId: space.id,
-                            },
-                          },
-                        },
-                      ],
-                    ],
-                  };
-                }
-              }
+                  ],
+                ],
+              };
               break;
             }
 
             case SpaceAction.SHARE: {
-              const spaceId = intent.data?.spaceId;
-              if (clientPlugin && typeof spaceId === 'string') {
-                if (!navigationPlugin?.provides.location.active) {
-                  return;
-                }
-                const target = firstIdInPart(navigationPlugin?.provides.location.active, 'main');
-                const result = await clientPlugin.provides.client.shell.shareSpace({ spaceId, target });
+              const space = intent.data?.space;
+              if (isSpace(space) && !space.properties[COMPOSER_SPACE_LOCK]) {
+                const active = navigationPlugin?.provides.location.active;
+                const mode = layoutPlugin?.provides.layout.layoutMode;
+                const target = active ? firstIdInPart(active, mode === 'solo' ? 'solo' : 'main') : undefined;
+
                 return {
-                  data: result,
+                  data: true,
                   intents: [
+                    [
+                      {
+                        action: LayoutAction.SET_LAYOUT,
+                        data: {
+                          element: 'dialog',
+                          component: 'dxos.org/plugin/space/SpaceSettingsDialog',
+                          dialogBlockAlign: 'start',
+                          subject: {
+                            space,
+                            target,
+                            initialTab: 'members',
+                            createInvitationUrl: createSpaceInvitationUrl,
+                          } satisfies Partial<SpaceSettingsDialogProps>,
+                        },
+                      },
+                    ],
                     [
                       {
                         action: ObservabilityAction.SEND_EVENT,
                         data: {
                           name: 'space.share',
                           properties: {
-                            spaceId,
-                            members: result.members?.length,
-                            error: result.error?.message,
-                            cancelled: result.cancelled,
+                            space: space.id,
                           },
                         },
                       },
@@ -1086,6 +1128,33 @@ export const SpacePlugin = ({
               break;
             }
 
+            case SpaceAction.OPEN_SETTINGS: {
+              const space = intent.data?.space;
+              if (isSpace(space)) {
+                return {
+                  data: true,
+                  intents: [
+                    [
+                      {
+                        action: LayoutAction.SET_LAYOUT,
+                        data: {
+                          element: 'dialog',
+                          component: 'dxos.org/plugin/space/SpaceSettingsDialog',
+                          dialogBlockAlign: 'start',
+                          subject: {
+                            space,
+                            initialTab: 'settings',
+                            createInvitationUrl: createSpaceInvitationUrl,
+                          } satisfies Partial<SpaceSettingsDialogProps>,
+                        },
+                      },
+                    ],
+                  ],
+                };
+              }
+              break;
+            }
+
             case SpaceAction.OPEN: {
               const space = intent.data?.space;
               if (isSpace(space)) {
@@ -1217,10 +1286,13 @@ export const SpacePlugin = ({
               };
             }
 
-            case SpaceAction.REMOVE_OBJECT: {
-              const object = intent.data?.object ?? intent.data?.result;
-              const space = getSpace(object);
-              if (!(isEchoObject(object) && space)) {
+            case SpaceAction.REMOVE_OBJECTS: {
+              const objects = intent.data?.objects ?? intent.data?.result;
+              invariant(Array.isArray(objects));
+
+              // All objects must be a member of the same space.
+              const space = getSpace(objects[0]);
+              if (!space || !objects.every((obj) => isEchoObject(obj) && getSpace(obj) === space)) {
                 return;
               }
 
@@ -1229,23 +1301,22 @@ export const SpacePlugin = ({
               const openObjectIds = new Set<string>(openIds(activeParts ?? {}));
 
               if (!intent.undo && resolve) {
-                // Capture the current state for undo.
                 const parentCollection = intent.data?.collection ?? space.properties[CollectionType.typename];
-                const nestedObjects = await getNestedObjects(object, resolve);
+                const nestedObjectsList = await Promise.all(objects.map((obj) => getNestedObjects(obj, resolve)));
+
                 const deletionData = {
-                  object,
+                  objects,
                   parentCollection,
-                  index:
-                    parentCollection instanceof CollectionType
-                      ? parentCollection.objects.indexOf(object as Expando)
-                      : -1,
-                  nestedObjects,
-                  wasActive: [object, ...nestedObjects]
+                  indices: objects.map((obj) =>
+                    parentCollection instanceof CollectionType ? parentCollection.objects.indexOf(obj as Expando) : -1,
+                  ),
+                  nestedObjectsList,
+                  wasActive: objects
+                    .flatMap((obj, i) => [obj, ...nestedObjectsList[i]])
                     .map((obj) => fullyQualifiedId(obj))
                     .filter((id) => openObjectIds.has(id)),
                 };
 
-                // If the item is active, navigate to "nowhere" to avoid navigating to a removed item.
                 if (deletionData.wasActive.length > 0) {
                   await intentPlugin?.provides.intent.dispatch({
                     action: NavigationAction.CLOSE,
@@ -1258,48 +1329,56 @@ export const SpacePlugin = ({
                   });
                 }
 
-                if (parentCollection instanceof CollectionType) {
-                  // TODO(Zan): Is there a nicer way to do this without casting to Expando?
-                  const index = parentCollection.objects.indexOf(object as Expando);
-                  if (index !== -1) {
-                    parentCollection.objects.splice(index, 1);
-                  }
+                if (deletionData.parentCollection instanceof CollectionType) {
+                  [...deletionData.indices]
+                    .sort((a, b) => b - a)
+                    .forEach((index: number) => {
+                      if (index !== -1) {
+                        deletionData.parentCollection.objects.splice(index, 1);
+                      }
+                    });
                 }
 
-                // If the object is a collection, also delete its nested objects.
-                deletionData.nestedObjects.forEach((obj) => {
+                deletionData.nestedObjectsList.flat().forEach((obj) => {
                   space.db.remove(obj);
                 });
-                space.db.remove(object);
+                objects.forEach((obj) => space.db.remove(obj));
 
-                const undoMessageKey =
-                  object instanceof CollectionType ? 'collection deleted label' : 'object deleted label';
+                const undoMessageKey = objects.some((obj) => obj instanceof CollectionType)
+                  ? 'collection deleted label'
+                  : objects.length > 1
+                    ? 'objects deleted label'
+                    : 'object deleted label';
 
                 return {
                   data: true,
                   undoable: {
-                    // Consider using a translation key here.
+                    // TODO(ZaymonFC): Pluralize if more than one object.
                     message: translations[0]['en-US'][SPACE_PLUGIN][undoMessageKey],
                     data: deletionData,
                   },
                 };
               } else {
                 const undoData = intent.data;
-                if (undoData && isEchoObject(undoData.object) && undoData.parentCollection instanceof CollectionType) {
+                if (
+                  undoData?.objects?.length &&
+                  undoData.objects.every(isEchoObject) &&
+                  undoData.parentCollection instanceof CollectionType
+                ) {
                   // Restore the object to the space.
-                  const restoredObject = space.db.add(undoData.object);
+                  const restoredObjects = undoData.objects.map((obj: Expando) => space.db.add(obj));
 
-                  // Restore nested objects if the object was a collection.
-                  undoData.nestedObjects.forEach((obj: Expando) => {
+                  // Restore nested objects to the space.
+                  undoData.nestedObjectsList.flat().forEach((obj: Expando) => {
                     space.db.add(obj);
                   });
 
-                  // Restore the object to its original position in the collection.
-                  if (undoData.index !== -1) {
-                    undoData.parentCollection.objects.splice(undoData.index, 0, restoredObject as Expando);
-                  }
+                  undoData.indices.forEach((index: number, i: number) => {
+                    if (index !== -1) {
+                      undoData.parentCollection.objects.splice(index, 0, restoredObjects[i] as Expando);
+                    }
+                  });
 
-                  // Restore active state if it was active before removal.
                   if (undoData.wasActive.length > 0) {
                     await intentPlugin?.provides.intent.dispatch({
                       action: NavigationAction.OPEN,

package/src/components/AwaitingObject.tsx

@@ -43,7 +43,7 @@ export const AwaitingObject = ({ id }: { id: string }) => {
     if (objects.findIndex((object) => fullyQualifiedId(object) === id) > -1) {
       setFound(true);
 
-      if (navigationPlugin?.provides.location.active === id) {
+      if (navigationPlugin?.provides.location.active.solo?.[0].id === id) {
         setOpen(false);
       }
     }