@dxos/plugin-space 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/containers/CreateObjectDialog/CreateObjectDialog.tsx

@@ -0,0 +1,164 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+
+import { Capability } from '@dxos/app-framework';
+import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { Database, Obj, Type } from '@dxos/echo';
+import { type Collection } from '@dxos/echo';
+import { runAndForwardErrors } from '@dxos/effect';
+import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
+import { useClient } from '@dxos/react-client';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Dialog, useTranslation } from '@dxos/react-ui';
+import { ViewAnnotation } from '@dxos/schema';
+
+import {
+  type CreateObjectOption,
+  CreateObjectPanel,
+  type CreateObjectPanelProps,
+  type Metadata,
+} from '../../components';
+import { meta } from '../../meta';
+import { SpaceOperation } from '../../types';
+
+export const CREATE_OBJECT_DIALOG = `${meta.id}/CreateObjectDialog`;
+
+export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'target' | 'typename' | 'initialFormValues'> & {
+  views?: boolean;
+  onCreateObject?: (object: Obj.Unknown) => void;
+  shouldNavigate?: (object: Obj.Unknown) => boolean;
+};
+
+export const CreateObjectDialog = ({
+  target: initialTarget,
+  typename: initialTypename,
+  views,
+  initialFormValues,
+  onCreateObject,
+  shouldNavigate: _shouldNavigate,
+}: CreateObjectDialogProps) => {
+  const manager = usePluginManager();
+  const { t } = useTranslation(meta.id);
+  const operationInvoker = useOperationInvoker();
+  const [target, setTarget] = useState<Database.Database | Collection.Collection | undefined>(initialTarget);
+  const [typename, setTypename] = useState<string | undefined>(initialTypename);
+  const client = useClient();
+  const spaces = useSpaces();
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+
+  const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
+    (id) => {
+      const metadata = manager.capabilities
+        .getAll(AppCapabilities.Metadata)
+        .find(({ id: entryId }) => entryId === id)?.metadata;
+      return metadata?.createObject ? (metadata as Metadata) : undefined;
+    },
+    [manager],
+  );
+
+  const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+  // TODO(wittjosiah): Support database schemas.
+  const schemas = db?.schemaRegistry.query({ location: ['runtime'], includeSystem: false }).runSync();
+
+  const viewTypenames = useMemo(() => {
+    const set = new Set<string>();
+    for (const schema of schemas ?? []) {
+      if (ViewAnnotation.get(schema).pipe(Option.getOrElse(() => false))) {
+        set.add(Type.getTypename(schema));
+      }
+    }
+    return set;
+  }, [schemas]);
+
+  const options = useMemo<CreateObjectOption[]>(
+    () =>
+      manager.capabilities
+        .getAll(AppCapabilities.Metadata)
+        .filter((entry) => entry.metadata?.createObject)
+        .filter((entry) => (views === true ? viewTypenames.has(entry.id) : !viewTypenames.has(entry.id)))
+        .map((entry) => ({
+          id: entry.id,
+          label: t('typename label', { ns: entry.id, defaultValue: entry.id }),
+          icon: entry.metadata?.icon,
+        })),
+    [manager, views, viewTypenames, t],
+  );
+
+  const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
+    ({ metadata, data = {} }) =>
+      Effect.gen(function* () {
+        if (!target) {
+          // TODO(wittjosiah): UI feedback.
+          return;
+        }
+
+        // NOTE: Must close before navigating or attention won't follow object.
+        closeRef.current?.click();
+
+        const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+        invariant(db, 'Missing database');
+        const object = yield* metadata.createObject(data, { db });
+        if (Obj.isObject(object) && !Obj.instanceOf(Type.PersistentType, object)) {
+          // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
+          const hidden = !metadata.addToCollectionOnCreate;
+          yield* operationInvoker.invoke(SpaceOperation.AddObject, {
+            target,
+            object,
+            hidden,
+          });
+          const shouldNavigate = _shouldNavigate ?? (() => true);
+          if (shouldNavigate(object)) {
+            yield* operationInvoker.invoke(LayoutOperation.Open, {
+              subject: [Obj.getDXN(object).toString()],
+            });
+          }
+
+          onCreateObject?.(object);
+        }
+      }).pipe(
+        Effect.provideService(Capability.Service, manager.capabilities),
+        Effect.provideService(Operation.Service, operationInvoker),
+        runAndForwardErrors,
+      ),
+    [target, _shouldNavigate, onCreateObject, manager.capabilities, operationInvoker],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>
+          {t('create object dialog title', {
+            object: t('typename label', {
+              ns: typename,
+              defaultValue: views ? 'View' : 'Object',
+            }),
+          })}
+        </Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.CloseIconButton ref={closeRef} />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <CreateObjectPanel
+          options={options}
+          spaces={spaces}
+          target={target}
+          typename={typename}
+          initialFormValues={initialFormValues}
+          defaultSpaceId={client.spaces.default.id}
+          resolve={resolve}
+          onTargetChange={setTarget}
+          onTypenameChange={setTypename}
+          onCreateObject={handleCreateObject}
+        />
+      </Dialog.Body>
+    </Dialog.Content>
+  );
+};

package/src/containers/CreateObjectDialog/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CreateObjectDialog } from './CreateObjectDialog';
+
+export default CreateObjectDialog;

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.tsx

@@ -0,0 +1,70 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import type * as Schema from 'effect/Schema';
+import React, { useCallback, useRef } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { runAndForwardErrors } from '@dxos/effect';
+import { Dialog, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+
+import { useInputSurfaceLookup } from '../../hooks';
+import { meta } from '../../meta';
+import { SpaceForm, SpaceOperation } from '../../types';
+
+export const CREATE_SPACE_DIALOG = `${meta.id}/CreateSpaceDialog`;
+
+type FormValues = Schema.Schema.Type<typeof SpaceForm>;
+const initialValues: FormValues = { edgeReplication: true };
+
+export const CreateSpaceDialog = () => {
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+
+  const inputSurfaceLookup = useInputSurfaceLookup();
+
+  const handleCreateSpace = useCallback(
+    async (data: FormValues) => {
+      const program = Effect.gen(function* () {
+        const { data: result } = yield* Effect.promise(() => invokePromise(SpaceOperation.Create, data));
+        if (result?.space) {
+          yield* Effect.promise(() => invokePromise(LayoutOperation.SwitchWorkspace, { subject: result.space.id }));
+          yield* Effect.promise(() => invokePromise(LayoutOperation.UpdateDialog, { state: false }));
+        }
+      });
+      await runAndForwardErrors(program);
+    },
+    [invokePromise],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.CloseIconButton ref={closeRef} />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Form.Root
+        testId='create-space-form'
+        autoFocus
+        schema={SpaceForm}
+        defaultValues={initialValues}
+        fieldProvider={inputSurfaceLookup}
+        onSave={handleCreateSpace}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+            <Form.Submit />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </Dialog.Content>
+  );
+};

package/src/containers/CreateSpaceDialog/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CreateSpaceDialog } from './CreateSpaceDialog';
+
+export default CreateSpaceDialog;

package/src/{components/SyncStatus → containers/InlineSyncStatus}/InlineSyncStatus.tsx

@@ -5,7 +5,7 @@
 import * as Option from 'effect/Option';
 import React, { useEffect, useState } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
@@ -16,12 +16,12 @@ import { AttentionGlyph, useAttended, useAttention } from '@dxos/react-ui-attent
 import { usePath } from '../../hooks';
 import { meta } from '../../meta';
 
-const useEdgeStatus = (): EdgeStatus => {
-  const [status, setStatus] = useState(EdgeStatus.NOT_CONNECTED);
+const useEdgeStatus = (): EdgeStatus.ConnectionState => {
+  const [status, setStatus] = useState(EdgeStatus.ConnectionState.NOT_CONNECTED);
   const client = useClient();
   useEffect(() => {
     client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status }) => {
-      setStatus(status);
+      setStatus(status.state);
     });
   }, [client]);
 
@@ -43,7 +43,7 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   const path = usePath(graph, startOfAttention);
   const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
 
-  const connectedToEdge = useEdgeStatus() === EdgeStatus.CONNECTED;
+  const connectedToEdge = useEdgeStatus() === EdgeStatus.ConnectionState.CONNECTED;
   // TODO(wittjosiah): This is not reactive.
   const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
   const syncState = useSpaceSyncState(space);
@@ -55,7 +55,7 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
         syncing={syncing}
         attended={isAttended}
         containsAttended={containsAttended}
-        classNames='self-center mie-1'
+        classNames='self-center mx-1'
       />
     </Tooltip.Trigger>
   );

package/src/containers/InlineSyncStatus/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { InlineSyncStatus } from './InlineSyncStatus';
+
+export default InlineSyncStatus;

package/src/{components → containers/JoinDialog}/JoinDialog.tsx

@@ -4,16 +4,20 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Trigger } from '@dxos/async';
-import { ObservabilityAction } from '@dxos/plugin-observability/types';
+import { Graph } from '@dxos/plugin-graph';
+import { ObservabilityOperation } from '@dxos/plugin-observability/types';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
+import { osTranslations } from '@dxos/ui-theme';
 
-import { meta } from '../meta';
+import { meta } from '../../meta';
 
 export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
 
@@ -22,7 +26,7 @@ export type JoinDialogProps = JoinPanelProps & {
 };
 
 export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
   const { graph } = useAppGraph();
   const { t } = useTranslation(meta.id);
@@ -35,25 +39,13 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
       }
 
       await Promise.all([
-        dispatch(
-          createIntent(LayoutAction.AddToast, {
-            part: 'toast',
-            subject: {
-              id: `${meta.id}/join-success`,
-              duration: 5_000,
-              title: ['join success label', { ns: meta.id }],
-              closeLabel: ['dismiss label', { ns: meta.id }],
-            },
-          }),
-        ),
-        dispatch(
-          createIntent(LayoutAction.UpdateDialog, {
-            part: 'dialog',
-            options: {
-              state: false,
-            },
-          }),
-        ),
+        invokePromise(LayoutOperation.AddToast, {
+          id: `${meta.id}/join-success`,
+          duration: 5_000,
+          title: ['join success label', { ns: meta.id }],
+          closeLabel: ['dismiss label', { ns: meta.id }],
+        }),
+        invokePromise(LayoutOperation.UpdateDialog, { state: false }),
       ]);
 
       let space = client.spaces.get(spaceKey);
@@ -69,7 +61,7 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         space = await trigger.wait();
       }
 
-      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
+      await invokePromise(LayoutOperation.SwitchWorkspace, { subject: space.id });
 
       // TODO(wittjosiah): If navigableCollections is false and there's no target,
       //   should try to navigate to the first object of the space replicates.
@@ -78,32 +70,30 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
       if (target) {
         // Wait before navigating to the target node.
         // If the target has not yet replicated, this will trigger a loading toast.
-        await graph.waitForPath({ target }).catch(() => {});
+        await Graph.waitForPath(graph, { target }).catch(() => {});
         await Promise.all([
-          dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [target] })),
-          dispatch(createIntent(LayoutAction.Expose, { part: 'navigation', subject: target })),
+          invokePromise(LayoutOperation.Open, { subject: [target] }),
+          invokePromise(LayoutOperation.Expose, { subject: target }),
         ]);
       }
 
       await onDone?.(result);
 
       if (space) {
-        await dispatch(
-          createIntent(ObservabilityAction.SendEvent, {
-            name: 'space.join',
-            properties: {
-              spaceId: space.id,
-            },
-          }),
-        );
+        await invokePromise(ObservabilityOperation.SendEvent, {
+          name: 'space.join',
+          properties: {
+            spaceId: space.id,
+          },
+        });
       }
     },
-    [dispatch, client, graph],
+    [invokePromise, client, graph, navigableCollections, onDone],
   );
 
   return (
     <Dialog.Content>
-      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: 'os' })}</Dialog.Title>
+      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: osTranslations })}</Dialog.Title>
       <JoinPanel
         {...props}
         exitActionParent={<Dialog.Close asChild />}

package/src/containers/JoinDialog/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { JoinDialog } from './JoinDialog';
+
+export default JoinDialog;