@dxos/plugin-space 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/containers/CreateObjectDialog/CreateObjectDialog.tsx

@@ -0,0 +1,156 @@
+//
+// 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],
+          });
+        }
+
+        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/containers/JoinDialog/JoinDialog.tsx

@@ -0,0 +1,108 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+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 { 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 { meta } from '../../meta';
+
+export const JOIN_DIALOG = `${meta.id}.JoinDialog`;
+
+export type JoinDialogProps = JoinPanelProps & {
+  navigableCollections?: boolean;
+};
+
+export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const client = useClient();
+  const { graph } = useAppGraph();
+  const { t } = useTranslation(meta.id);
+
+  const handleDone = useCallback(
+    async (result: InvitationResult | null) => {
+      const spaceKey = result?.spaceKey;
+      if (!spaceKey) {
+        return;
+      }
+
+      await Promise.all([
+        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);
+      if (!space) {
+        // TODO(wittjosiah): Add api to wait for a space.
+        const trigger = new Trigger<Space>();
+        client.spaces.subscribe(() => {
+          const space = client.spaces.get(spaceKey);
+          if (space) {
+            trigger.wake(space);
+          }
+        });
+        space = await trigger.wait();
+      }
+
+      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.
+      //   Potentially this could also be done on the inviters side to ensure there's always a target.
+      const target = result?.target || (navigableCollections ? space?.id : undefined);
+      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(graph, { target }).catch(() => {});
+        await Promise.all([
+          invokePromise(LayoutOperation.Open, { subject: [target] }),
+          invokePromise(LayoutOperation.Expose, { subject: target }),
+        ]);
+      }
+
+      onDone?.(result);
+
+      if (space) {
+        await invokePromise(ObservabilityOperation.SendEvent, {
+          name: 'space.join',
+          properties: {
+            spaceId: space.id,
+          },
+        });
+      }
+    },
+    [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: 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';