@dxos/plugin-space 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

package/src/containers/CreateObjectDialog/CreateObjectDialog.tsx

@@ -0,0 +1,152 @@
+//
+// 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, getPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
+import { Collection, Database, Obj, Type } 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';
+
+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;
+  targetNodeId?: string;
+};
+
+export const CreateObjectDialog = ({
+  target: initialTarget,
+  typename: initialTypename,
+  views,
+  initialFormValues,
+  onCreateObject,
+  shouldNavigate: _shouldNavigate,
+  targetNodeId,
+}: CreateObjectDialogProps) => {
+  const { t } = useTranslation(meta.id);
+  const manager = usePluginManager();
+  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 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 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 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) : true))
+        .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 result = yield* metadata.createObject(data, {
+          db,
+          target,
+          targetNodeId,
+        });
+        const shouldNavigate = _shouldNavigate ?? (() => true);
+        if (result.subject.length > 0 && shouldNavigate(result.object)) {
+          yield* operationInvoker.invoke(LayoutOperation.Open, {
+            subject: [...result.subject],
+            navigation: 'immediate',
+          });
+        }
+
+        onCreateObject?.(result.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={getPersonalSpace(client)?.id ?? client.spaces.get()[0]?.id}
+          resolve={resolve}
+          onCreateObject={handleCreateObject}
+          onTargetChange={setTarget}
+          onTypenameChange={setTypename}
+        />
+      </Dialog.Body>
+    </Dialog.Content>
+  );
+};

package/src/containers/CreateObjectDialog/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
+export { CreateObjectDialog as default } from './CreateObjectDialog';

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { Dialog } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+import { CreateSpaceDialog } from './CreateSpaceDialog';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <CreateSpaceDialog />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-space/containers/CreateSpaceDialog',
+  component: CreateSpaceDialog,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [RuntimePlugin(), OperationPlugin(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof CreateSpaceDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.tsx

@@ -0,0 +1,75 @@
+//
+// 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, getSpacePath } 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 } from '#types';
+import { SpaceOperation } from '#operations';
+
+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: getSpacePath(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>
+      <Dialog.Body>
+        <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.Body>
+    </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/containers/InlineSyncStatus/InlineSyncStatus.tsx

@@ -0,0 +1,51 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { getSpacePath } from '@dxos/app-toolkit';
+import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
+import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+import { useClient } from '@dxos/react-client';
+import { type Space, useSpaceSyncState } from '@dxos/react-client/echo';
+import { Tooltip, useTranslation } from '@dxos/react-ui';
+import { AttentionGlyph, useAttention } from '@dxos/react-ui-attention';
+
+import { meta } from '#meta';
+
+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.state);
+    });
+  }, [client]);
+
+  return status;
+};
+
+export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean }) => {
+  const { t } = useTranslation(meta.id);
+  const qualifiedId = getSpacePath(space.id);
+  const { hasAttention, isAncestor, isRelated } = useAttention(qualifiedId);
+  const attended = hasAttention || isRelated;
+  const containsAttended = isAncestor && !open;
+  const connectedToEdge = useEdgeStatus() === EdgeStatus.ConnectionState.CONNECTED;
+  // TODO(wittjosiah): This is not reactive.
+  const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
+  const syncState = useSpaceSyncState(space);
+  const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;
+
+  return (
+    <Tooltip.Trigger asChild content={t('syncing.label')} side='bottom'>
+      <AttentionGlyph
+        syncing={syncing}
+        attended={attended}
+        containsAttended={containsAttended}
+        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/containers/JoinDialog/JoinDialog.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Dialog } from '@dxos/react-ui';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { corePlugins } from '@dxos/plugin-testing';
+
+import { translations } from '../../translations';
+
+import { JoinDialog } from './JoinDialog';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <JoinDialog />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-space/containers/JoinDialog',
+  component: JoinDialog,
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [...corePlugins(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof JoinDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -4,28 +4,32 @@
 
 import React, { useCallback } from 'react';
 
-import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getSpacePath } 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/operations';
 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 { SPACE_PLUGIN } from '../meta';
+import { meta } from '#meta';
 
-export const JOIN_DIALOG = `${SPACE_PLUGIN}/JoinDialog`;
+export const JOIN_DIALOG = `${meta.id}.JoinDialog`;
 
 export type JoinDialogProps = JoinPanelProps & {
   navigableCollections?: boolean;
 };
 
 export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
   const { graph } = useAppGraph();
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const handleDone = useCallback(
     async (result: InvitationResult | null) => {
@@ -35,25 +39,13 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
       }
 
       await Promise.all([
-        dispatch(
-          createIntent(LayoutAction.AddToast, {
-            part: 'toast',
-            subject: {
-              id: `${SPACE_PLUGIN}/join-success`,
-              duration: 5_000,
-              title: ['join success label', { ns: SPACE_PLUGIN }],
-              closeLabel: ['dismiss label', { ns: SPACE_PLUGIN }],
-            },
-          }),
-        ),
-        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: getSpacePath(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,38 +70,39 @@ 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);
+      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],
   );
 
+  // TODO(burdon): Move JoinHeading into Dialog.Heading.
   return (
     <Dialog.Content>
-      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: 'os' })}</Dialog.Title>
-      <JoinPanel
-        {...props}
-        exitActionParent={<Dialog.Close asChild />}
-        doneActionParent={<Dialog.Close asChild />}
-        onDone={handleDone}
-      />
+      <Dialog.Title classNames='sr-only'>{t('join-space.label', { ns: osTranslations })}</Dialog.Title>
+      <Dialog.Body>
+        <JoinPanel
+          {...props}
+          exitActionParent={<Dialog.Close asChild />}
+          doneActionParent={<Dialog.Close asChild />}
+          onDone={handleDone}
+        />
+      </Dialog.Body>
     </Dialog.Content>
   );
 };

package/src/containers/JoinDialog/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { JoinDialog, type JoinDialogProps } from './JoinDialog';
+export { JoinDialog as default } from './JoinDialog';