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

package/src/cli/plugin.ts

@@ -0,0 +1,101 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Tag } from '@dxos/echo';
+import { Collection } from '@dxos/echo';
+import { Operation } from '@dxos/operation';
+import { ClientEvents } from '@dxos/plugin-client/types';
+import { DataTypes } from '@dxos/schema';
+import {
+  AnchoredTo,
+  Employer,
+  Event,
+  HasConnection,
+  HasRelationship,
+  HasSubject,
+  Organization,
+  Person,
+  Pipeline,
+  Task,
+} from '@dxos/types';
+
+import { IdentityCreated } from '../capabilities/identity-created';
+import { OperationHandler } from '../capabilities/operation-handler';
+import { UndoMappings } from '../capabilities/undo-mappings';
+import { meta } from '../meta';
+import { SpaceEvents } from '../types';
+import { type CreateObject, type SpacePluginOptions } from '../types';
+import { SpaceOperation } from '../operations';
+
+import { database, queue, space } from './commands';
+
+export const SpacePlugin = Plugin.define<SpacePluginOptions>(meta).pipe(
+  // TODO(wittjosiah): Could some of these commands make use of operations?
+  AppPlugin.addCommandModule({
+    commands: [database, queue, space],
+  }),
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: Collection.Collection.typename,
+      metadata: {
+        createObject: ((props, options) =>
+          Effect.gen(function* () {
+            const object = Collection.make(props);
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              hidden: true,
+              targetNodeId: options.targetNodeId,
+            });
+          })) satisfies CreateObject,
+      },
+    },
+  }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addSchemaModule({
+    schema: [
+      ...DataTypes,
+      AnchoredTo.AnchoredTo,
+      Employer.Employer,
+      Event.Event,
+      HasConnection.HasConnection,
+      HasRelationship.HasRelationship,
+      HasSubject.HasSubject,
+      Organization.Organization,
+      Person.Person,
+      Pipeline.Pipeline,
+      Tag.Tag,
+      Task.Task,
+    ],
+  }),
+  Plugin.addModule(
+    ({
+      shareableLinkOrigin = 'http://localhost:5173',
+      invitationPath = '/',
+      invitationProp = 'spaceInvitationCode',
+    }) => {
+      const createInvitationUrl = (invitationCode: string) => {
+        const baseUrl = new URL(invitationPath || '/', shareableLinkOrigin);
+        baseUrl.searchParams.set(invitationProp, invitationCode);
+        return baseUrl.toString();
+      };
+
+      return {
+        id: Capability.getModuleTag(UndoMappings),
+        activatesOn: ActivationEvents.SetupOperationHandler,
+        activate: () => UndoMappings({ createInvitationUrl, observability: false }),
+      };
+    },
+  ),
+  Plugin.addModule({
+    activatesOn: ClientEvents.IdentityCreated,
+    activatesAfter: [SpaceEvents.PersonalSpaceReady],
+    activate: IdentityCreated,
+  }),
+  Plugin.make,
+);

package/src/components/AwaitingObject/AwaitingObject.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useLayout } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { useClient } from '@dxos/react-client';
+import { Filter, useQuery } from '@dxos/react-client/echo';
+import { Button, Icon, Toast, useTranslation } from '@dxos/react-ui';
+import { osTranslations } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+import { SpaceOperation } from '../../operations';
+
+const WAIT_FOR_OBJECT_TIMEOUT = 3 * 60 * 1_000;
+const TOAST_TIMEOUT = 4 * 60 * 1_000;
+
+export const AwaitingObject = ({ id }: { id: string }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const [open, setOpen] = useState(true);
+  const [waiting, setWaiting] = useState(true);
+  const [found, setFound] = useState(false);
+  const layout = useLayout();
+
+  const client = useClient();
+  const objects = useQuery(client.spaces, Filter.everything());
+
+  useEffect(() => {
+    if (!id) {
+      return;
+    }
+
+    const timeout = setTimeout(() => setWaiting(false), WAIT_FOR_OBJECT_TIMEOUT);
+    return () => clearTimeout(timeout);
+  }, [id]);
+
+  useEffect(() => {
+    if (objects.findIndex((object) => Obj.getDXN(object).toString() === id) > -1) {
+      setFound(true);
+      if (layout.active.includes(id)) {
+        setOpen(false);
+      }
+    }
+  }, [id, objects, layout]);
+
+  const handleClose = useCallback(
+    async () => invokePromise(SpaceOperation.WaitForObject, { id: undefined }),
+    [invokePromise],
+  );
+
+  const handleNavigate = useCallback(() => {
+    void invokePromise(LayoutOperation.Open, { subject: [id] });
+    void handleClose();
+  }, [id, handleClose, invokePromise]);
+
+  return (
+    <Toast.Root open={open} duration={TOAST_TIMEOUT} onOpenChange={setOpen}>
+      <Toast.Body>
+        <Toast.Title classNames='flex items-center gap-2'>
+          {found ? (
+            <>
+              <Icon icon='ph--check-circle--regular' />
+              <span>{t('found object label')}</span>
+            </>
+          ) : waiting ? (
+            <>
+              <Icon icon='ph--circle-notch--regular' classNames='animate-spin' />
+              <span>{t('waiting for object label')}</span>
+            </>
+          ) : (
+            <>
+              <Icon icon='ph--circle-dashed--regular' />
+              <span>{t('object not found label')}</span>
+            </>
+          )}
+        </Toast.Title>
+        <Toast.Description>
+          {t(
+            found
+              ? 'found object description'
+              : waiting
+                ? 'waiting for object description'
+                : 'object not found description',
+          )}
+        </Toast.Description>
+      </Toast.Body>
+      <Toast.Actions>
+        {found ? (
+          <>
+            <Toast.Action altText={t('go to object alt')} asChild>
+              <Button variant='primary' onClick={handleNavigate}>
+                {t('go to object label')}
+              </Button>
+            </Toast.Action>
+            <Toast.Close asChild>
+              <Button onClick={handleClose}>{t('close label', { ns: osTranslations })}</Button>
+            </Toast.Close>
+          </>
+        ) : (
+          <Toast.Close asChild>
+            <Button onClick={handleClose}>
+              {t(waiting ? 'close label' : 'confirm label', { ns: osTranslations })}
+            </Button>
+          </Toast.Close>
+        )}
+      </Toast.Actions>
+    </Toast.Root>
+  );
+};

package/src/components/AwaitingObject/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './AwaitingObject';

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,183 +2,224 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Option from 'effect/Option';
-import React, { useCallback } from 'react';
+import type * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo } from 'react';
 
-import { Type } from '@dxos/echo';
-import { type BaseObject, type TypeAnnotation, ViewAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
+import { type Database, Obj } from '@dxos/echo';
+import { type Collection } from '@dxos/echo';
+import { type AnyProperties } from '@dxos/echo/internal';
 import { type Space, type SpaceId } from '@dxos/react-client/echo';
-import { Icon, toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-import { SearchList } from '@dxos/react-ui-searchlist';
-import { cardDialogOverflow, cardDialogPaddedOverflow, cardDialogSearchListRoot } from '@dxos/react-ui-stack';
-import { type Collection } from '@dxos/schema';
-import { type MaybePromise, isNonNullable } from '@dxos/util';
+import { toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
+import { Form, omitId } from '@dxos/react-ui-form';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
+import { type MaybePromise } from '@dxos/util';
 
 import { useInputSurfaceLookup } from '../../hooks';
 import { meta } from '../../meta';
-import { type ObjectForm } from '../../types';
+import { type CreateObject } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
+/** Display-ready option for the create object search list. */
+export type CreateObjectOption = {
+  id: string;
+  label: string;
+  icon?: string;
+};
+
+export type Metadata = {
+  createObject: CreateObject;
+  inputSchema?: Schema.Schema.AnyNoContext;
+  icon?: string;
+};
+
 export type CreateObjectPanelProps = {
-  forms: ObjectForm[];
+  options: CreateObjectOption[];
   spaces: Space[];
   typename?: string;
-  target?: Space | Collection.Collection;
-  views?: boolean;
-  initialFormValues?: Partial<BaseObject>;
+  target?: Database.Database | Collection.Collection;
+  initialFormValues?: Partial<AnyProperties>;
   defaultSpaceId?: SpaceId;
-  resolve?: (typename: string) => Record<string, any>;
-  onTargetChange?: (target: Space) => void;
+  resolve?: (typename: string) => Metadata | undefined;
+  onTargetChange?: (target: Database.Database) => void;
   onTypenameChange?: (typename: string) => void;
-  onCreateObject?: (params: { form: ObjectForm; data?: Record<string, any> }) => MaybePromise<void>;
+  onCreateObject?: (params: { metadata: Metadata; data?: Record<string, any> }) => MaybePromise<void>;
 };
 
 export const CreateObjectPanel = ({
-  forms,
+  options,
   spaces,
   typename,
   target,
-  views,
-  initialFormValues: _initialFormValues,
+  initialFormValues: initialFormValuesProp,
   defaultSpaceId,
   resolve,
   onTargetChange,
   onTypenameChange,
   onCreateObject,
 }: CreateObjectPanelProps) => {
-  const { t } = useTranslation(meta.id);
-  const initialFormValues = useDefaultValue(_initialFormValues, () => ({}));
-  const form = forms.find((form) => Type.getTypename(form.objectSchema) === typename);
-  const options: TypeAnnotation[] = forms
-    .filter((form) => {
-      if (views == null) {
-        return true;
-      } else {
-        return views === ViewAnnotation.get(form.objectSchema).pipe(Option.getOrElse(() => false));
-      }
-    })
-    .map((form) => getTypeAnnotation(form.objectSchema))
-    .filter(isNonNullable)
-    .sort((a, b) => {
-      const nameA = t('typename label', { ns: a.typename, defaultValue: a.typename });
-      const nameB = t('typename label', { ns: b.typename, defaultValue: b.typename });
-      return nameA.localeCompare(nameB);
-    });
+  const initialFormValues = useDefaultValue(initialFormValuesProp, () => ({}));
+  const metadata = typename && resolve?.(typename);
+
+  const sortedOptions = useMemo(() => [...options].sort((a, b) => a.label.localeCompare(b.label)), [options]);
 
   const handleCreateObject = useCallback(
     async (props: Record<string, any>) => {
-      if (!form) {
+      if (!metadata) {
         return;
       }
-      await onCreateObject?.({ form, data: props });
+      await onCreateObject?.({ metadata, data: props });
     },
-    [onCreateObject, form],
+    [onCreateObject, metadata],
   );
 
-  const handleSetTypename = useCallback(
-    async (typename: string) => {
-      const form = forms.find((form) => getTypeAnnotation(form.objectSchema)?.typename === typename);
-      if (form && !form.formSchema) {
-        await onCreateObject?.({ form });
+  const handleSelectOption = useCallback(
+    async (id: string) => {
+      const metadata = resolve?.(id);
+      if (metadata && !metadata.inputSchema) {
+        await onCreateObject?.({ metadata });
       } else {
-        onTypenameChange?.(typename);
+        onTypenameChange?.(id);
       }
     },
-    [forms, onCreateObject],
+    [resolve, onCreateObject],
   );
 
+  const inputSchema = useMemo(
+    () => (metadata && typeof metadata === 'object' && metadata.inputSchema ? omitId(metadata.inputSchema) : undefined),
+    [metadata],
+  );
   const inputSurfaceLookup = useInputSurfaceLookup({ target });
 
   // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
-  return !form ? (
-    <SelectSchema options={options} resolve={resolve} onChange={handleSetTypename} />
-  ) : !target ? (
-    <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />
-  ) : form.formSchema ? (
-    <div role='none' className={cardDialogOverflow}>
-      <Form
+  if (!metadata) {
+    return <SelectType options={sortedOptions} onChange={handleSelectOption} />;
+  }
+
+  // TODO(burdon): Remove.
+  if (!target) {
+    return <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />;
+  }
+
+  if (metadata.inputSchema) {
+    return (
+      <Form.Root
         autoFocus
-        values={initialFormValues}
-        schema={form.formSchema}
-        testId='create-object-form'
+        schema={inputSchema}
+        defaultValues={initialFormValues}
+        fieldProvider={inputSurfaceLookup}
+        db={Obj.isObject(target) ? Obj.getDatabase(target) : target}
         onSave={handleCreateObject}
-        lookupComponent={inputSurfaceLookup}
-        outerSpacing='blockStart-0'
-      />
-    </div>
-  ) : null;
+        testId='create-object-form'
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+            <Form.Submit />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    );
+  }
+
+  return null;
 };
 
-const SelectSpace = ({
-  spaces,
-  defaultSpaceId,
-  onChange,
-}: { onChange?: (space: Space) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
+CreateObjectPanel.displayName = 'CreateObjectPanel';
+
+type SelectTypeProps = Pick<CreateObjectPanelProps, 'options'> & {
+  onChange: (id: string) => void;
+};
+
+const SelectType = ({ options, onChange }: SelectTypeProps) => {
   const { t } = useTranslation(meta.id);
 
+  const { results, handleSearch } = useSearchListResults({
+    items: options,
+    extract: (option) => option.label,
+  });
+
   return (
-    <SearchList.Root label={t('space input label')} classNames={cardDialogSearchListRoot}>
-      <SearchList.Input
-        autoFocus
-        data-testid='create-object-form.space-input'
-        placeholder={t('space input placeholder')}
-      />
-      <SearchList.Content classNames={[cardDialogOverflow, 'plb-cardSpacingBlock']}>
-        {spaces
-          .sort((a, b) => {
-            const aName = toLocalizedString(getSpaceDisplayName(a, { personal: a.id === defaultSpaceId }), t);
-            const bName = toLocalizedString(getSpaceDisplayName(b, { personal: b.id === defaultSpaceId }), t);
-            return aName.localeCompare(bName);
-          })
-          .map((space) => (
+    <SearchList.Root onSearch={handleSearch}>
+      <SearchList.Content classNames='gap-form-gap'>
+        <SearchList.Input
+          autoFocus
+          data-testid='create-object-form.schema-input'
+          placeholder={t('schema input placeholder')}
+        />
+        <SearchList.Viewport>
+          {results.map((option) => (
             <SearchList.Item
-              key={space.id}
-              value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              onSelect={() => onChange?.(space)}
-              classNames='flex items-center gap-2'
-            >
-              <span className='grow truncate'>
-                {toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              </span>
-            </SearchList.Item>
+              key={option.id}
+              value={option.id}
+              label={option.label}
+              icon={option.icon ?? 'ph--placeholder--regular'}
+              onSelect={() => onChange(option.id)}
+            />
           ))}
+        </SearchList.Viewport>
       </SearchList.Content>
     </SearchList.Root>
   );
 };
 
-const SelectSchema = ({
-  options,
-  resolve,
-  onChange,
-}: {
-  options: TypeAnnotation[];
-  onChange: (type: string) => void;
-} & Pick<CreateObjectPanelProps, 'resolve'>) => {
+type SelectSpaceProps = Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'> & {
+  onChange?: (db: Database.Database) => void;
+};
+
+const SelectSpace = ({ spaces, defaultSpaceId, onChange }: SelectSpaceProps) => {
   const { t } = useTranslation(meta.id);
 
+  const sortedSpaces = useMemo(
+    () =>
+      [...spaces].sort((a, b) => {
+        const labelA = toLocalizedString(
+          getSpaceDisplayName(a, {
+            personal: a.id === defaultSpaceId,
+          }),
+          t,
+        );
+        const labelB = toLocalizedString(
+          getSpaceDisplayName(b, {
+            personal: b.id === defaultSpaceId,
+          }),
+          t,
+        );
+        return labelA.localeCompare(labelB);
+      }),
+    [spaces, defaultSpaceId, t],
+  );
+
+  const { results, handleSearch } = useSearchListResults({
+    items: sortedSpaces,
+    extract: (space) =>
+      toLocalizedString(
+        getSpaceDisplayName(space, {
+          personal: space.id === defaultSpaceId,
+        }),
+        t,
+      ),
+  });
+
   return (
-    <SearchList.Root label={t('schema input label')} classNames={cardDialogSearchListRoot}>
-      <SearchList.Input
-        autoFocus
-        data-testid='create-object-form.schema-input'
-        placeholder={t('schema input placeholder')}
-      />
-      <SearchList.Content classNames={cardDialogPaddedOverflow}>
-        {options.map((option) => (
-          <SearchList.Item
-            key={option.typename}
-            value={t('typename label', { ns: option.typename, defaultValue: option.typename })}
-            onSelect={() => onChange(option.typename)}
-            classNames='flex items-center gap-2'
-          >
-            <span className='flex gap-2 items-center grow truncate'>
-              <Icon icon={resolve?.(option.typename).icon ?? 'ph--placeholder--regular'} size={5} />
-              {t('typename label', { ns: option.typename, defaultValue: option.typename })}
-            </span>
-          </SearchList.Item>
-        ))}
+    <SearchList.Root onSearch={handleSearch}>
+      <SearchList.Content>
+        <SearchList.Input
+          autoFocus
+          data-testid='create-object-form.space-input'
+          placeholder={t('space input placeholder')}
+        />
+        <SearchList.Viewport>
+          {results.map((space) => {
+            return (
+              <SearchList.Item
+                key={space.id}
+                value={space.id}
+                label={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+                onSelect={() => onChange?.(space.db)}
+              />
+            );
+          })}
+        </SearchList.Viewport>
       </SearchList.Content>
     </SearchList.Root>
   );

package/src/components/CreateDialog/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './CreateObjectDialog';
-export * from './CreateSpaceDialog';
+export * from './CreateObjectPanel';

package/src/components/ObjectDetails/BaseObjectSettings.stories.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useState } from 'react';
+
+import { type Obj, Tag } from '@dxos/echo';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { Loading, withTheme } from '@dxos/react-ui/testing';
+
+import { Pipeline } from '@dxos/types';
+
+import { translations } from '../../translations';
+
+import { BaseObjectSettings } from './BaseObjectSettings';
+
+const DefaultStory = () => {
+  const { space } = useClientStory();
+  const [object, setObject] = useState<Obj.Unknown>();
+
+  useEffect(() => {
+    if (space && !object) {
+      const object = space.db.add(Pipeline.make());
+      setObject(object);
+    }
+  }, [space, object]);
+
+  if (!object) {
+    return <Loading data={{ space: !!space, object: !!object }} />;
+  }
+
+  return <BaseObjectSettings object={object} classNames='w-[20rem]' />;
+};
+
+const meta = {
+  title: 'plugins/plugin-space/components/BaseObjectSettings',
+  component: BaseObjectSettings as any,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Pipeline.Pipeline, Tag.Tag],
+      onCreateSpace: async ({ space }) => {
+        space.db.add(Tag.make({ label: 'Tag 1' }));
+        space.db.add(Tag.make({ label: 'Tag 2' }));
+        space.db.add(Tag.make({ label: 'Tag 3' }));
+      },
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};