@dxos/plugin-space 0.7.2 → 0.7.3-main.2dd075e

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -0,0 +1,97 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useRef } from 'react';
+
+import { type MetadataResolver, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { useClient } from '@dxos/react-client';
+import { type AbstractTypedObject, isReactiveObject, isSpace, useSpaces } from '@dxos/react-client/echo';
+import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+
+import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
+import { SPACE_PLUGIN, SpaceAction } from '../../meta';
+import { CollectionType } from '../../types';
+
+export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'schemas' | 'target' | 'typename' | 'name'> & {
+  resolve?: MetadataResolver;
+  navigableCollections?: boolean;
+};
+
+export const CreateObjectDialog = ({
+  schemas,
+  target,
+  typename,
+  name,
+  navigableCollections,
+  resolve,
+}: CreateObjectDialogProps) => {
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const spaces = useSpaces();
+  const dispatch = useIntentDispatcher();
+
+  const handleCreateObject = useCallback(
+    async ({
+      schema,
+      target: _target,
+      name,
+    }: {
+      schema: AbstractTypedObject;
+      target: CreateObjectPanelProps['target'];
+      name?: string;
+    }) => {
+      const target = isSpace(_target) ? (_target.properties[CollectionType.typename] as CollectionType) : _target;
+      const createObjectAction = resolve?.(schema.typename)?.createObject;
+      if (!createObjectAction || !target) {
+        // TODO(wittjosiah): UI feedback.
+        return;
+      }
+
+      // NOTE: Must close before navigating or attention won't follow object.
+      closeRef.current?.click();
+
+      const result = await dispatch({ action: createObjectAction, data: { name } });
+      const object = result?.data;
+      if (isReactiveObject(object)) {
+        await dispatch([
+          {
+            plugin: SPACE_PLUGIN,
+            action: SpaceAction.ADD_OBJECT,
+            data: { target, object },
+          },
+          ...(!(object instanceof CollectionType) || navigableCollections ? [{ action: NavigationAction.OPEN }] : []),
+        ]);
+      }
+    },
+    [dispatch, resolve],
+  );
+
+  return (
+    // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
+    //  Consider factoring it out to the tabs package.
+    <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
+      <div role='none' className='flex justify-between pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
+        <Dialog.Title>{t('create object dialog title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
+            <Icon icon='ph--x--regular' size={4} />
+          </Button>
+        </Dialog.Close>
+      </div>
+      <div className='p-4'>
+        <CreateObjectPanel
+          schemas={schemas}
+          spaces={spaces}
+          target={target}
+          typename={typename}
+          name={name}
+          defaultSpaceId={client.spaces.default.id}
+          resolve={resolve}
+          onCreateObject={handleCreateObject}
+        />
+      </div>
+    </Dialog.Content>
+  );
+};

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -0,0 +1,169 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { type MetadataResolver } from '@dxos/app-framework';
+import { type AbstractTypedObject, getObjectAnnotation, S } from '@dxos/echo-schema';
+import { type SpaceId, type Space, isSpace } from '@dxos/react-client/echo';
+import { Icon, IconButton, Input, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Form, InputHeader } from '@dxos/react-ui-form';
+import { SearchList } from '@dxos/react-ui-searchlist';
+import { nonNullable, type MaybePromise } from '@dxos/util';
+
+import { SPACE_PLUGIN } from '../../meta';
+import { type CollectionType } from '../../types';
+import { getSpaceDisplayName } from '../../util';
+
+export type CreateObjectPanelProps = {
+  schemas: AbstractTypedObject[];
+  spaces: Space[];
+  typename?: string;
+  target?: Space | CollectionType;
+  name?: string;
+  defaultSpaceId?: SpaceId;
+  resolve?: MetadataResolver;
+  onCreateObject?: (params: {
+    schema: AbstractTypedObject;
+    target: Space | CollectionType;
+    name?: string;
+  }) => MaybePromise<void>;
+};
+
+export const CreateObjectPanel = ({
+  schemas,
+  spaces,
+  typename: initialTypename,
+  target: initialTarget,
+  name: initialName,
+  defaultSpaceId,
+  resolve,
+  onCreateObject,
+}: CreateObjectPanelProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const [typename, setTypename] = useState<string | undefined>(initialTypename);
+  const [target, setTarget] = useState<Space | CollectionType | undefined>(initialTarget);
+  const schema = schemas.find((schema) => getObjectAnnotation(schema)?.typename === typename);
+  const options = schemas.map(getObjectAnnotation).filter(nonNullable);
+
+  const handleClearSchema = useCallback(() => setTypename(undefined), []);
+  const handleClearTarget = useCallback(() => setTarget(undefined), []);
+
+  const handleCreateObject = useCallback(
+    async ({ name }: { name?: string }) => {
+      if (!schema || !target) {
+        return;
+      }
+
+      await onCreateObject?.({ schema, target, name });
+    },
+    [onCreateObject, schema, target],
+  );
+
+  // TODO(wittjosiah): All of these inputs should be rolled into a `Form` once it supports the necessary variants.
+  const schemaInput = (
+    <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden my-2 px-2'>
+      <SearchList.Input
+        autoFocus
+        data-testid='create-object-form.schema-input'
+        placeholder={t('schema input placeholder')}
+        classNames='px-1 my-2'
+      />
+      <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
+        {options.map((option) => (
+          <SearchList.Item
+            key={option.typename}
+            value={t('typename label', { ns: option.typename, defaultValue: option.typename })}
+            onSelect={() => setTypename(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.Content>
+    </SearchList.Root>
+  );
+
+  const spaceInput = (
+    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden my-2 px-2'>
+      <SearchList.Input
+        autoFocus
+        data-testid='create-object-form.space-input'
+        placeholder={t('space input placeholder')}
+        classNames='px-1 my-2'
+      />
+      <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
+        {spaces.map((space) => (
+          <SearchList.Item
+            key={space.id}
+            value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+            onSelect={() => setTarget(space)}
+            classNames='flex items-center gap-2'
+          >
+            <span className='grow truncate'>
+              {toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+            </span>
+          </SearchList.Item>
+        ))}
+      </SearchList.Content>
+    </SearchList.Root>
+  );
+
+  const form = (
+    <Form
+      autoFocus
+      values={{ name: initialName }}
+      schema={S.Struct({ name: S.optional(S.String) })}
+      testId='create-object-form'
+      onSave={handleCreateObject}
+    />
+  );
+
+  return (
+    <div role='form' className='flex flex-col gap-2'>
+      {target && (
+        <div role='none' className='px-2'>
+          <Input.Root>
+            <InputHeader>
+              <Input.Label>
+                {t(isSpace(target) ? 'creating in space label' : 'creating in collection label')}
+              </Input.Label>
+            </InputHeader>
+            <div role='none' className='flex gap-2'>
+              <Input.TextInput
+                disabled
+                value={
+                  isSpace(target)
+                    ? toLocalizedString(getSpaceDisplayName(target, { personal: target.id === defaultSpaceId }), t)
+                    : target.name || t('unnamed collection label')
+                }
+              />
+              <IconButton iconOnly icon='ph--x--regular' label={t('clear input label')} onClick={handleClearTarget} />
+            </div>
+          </Input.Root>
+        </div>
+      )}
+      {schema && (
+        <div role='none' className='px-2'>
+          <Input.Root>
+            <InputHeader>
+              <Input.Label>{t('creating object type label')}</Input.Label>
+            </InputHeader>
+            <div role='none' className='flex gap-2'>
+              <Input.TextInput
+                disabled
+                value={t('typename label', { ns: schema.typename, defaultValue: schema.typename })}
+              />
+              <IconButton iconOnly icon='ph--x--regular' label={t('clear input label')} onClick={handleClearSchema} />
+            </div>
+          </Input.Root>
+        </div>
+      )}
+      {!schema ? schemaInput : !target ? spaceInput : form}
+    </div>
+  );
+};

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useRef } from 'react';
+
+import { useIntentDispatcher } from '@dxos/app-framework';
+import { type S } from '@dxos/echo-schema';
+import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+
+import { SPACE_PLUGIN, SpaceAction } from '../../meta';
+import { SpaceForm } from '../../types';
+
+type FormValues = S.Schema.Type<typeof SpaceForm>;
+const initialValues: FormValues = { edgeReplication: true };
+
+export const CreateSpaceDialog = () => {
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const dispatch = useIntentDispatcher();
+
+  const handleCreateSpace = useCallback(
+    async (data: FormValues) => {
+      const result = await dispatch({
+        action: SpaceAction.CREATE,
+        data,
+      });
+      const target = result?.data.space;
+      if (target) {
+        await dispatch({
+          action: SpaceAction.OPEN_CREATE_OBJECT,
+          data: { target },
+        });
+      }
+    },
+    [dispatch],
+  );
+
+  return (
+    // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
+    //  Consider factoring it out to the tabs package.
+    <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
+      <div role='none' className='flex justify-between pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
+        <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
+            <Icon icon='ph--x--regular' size={4} />
+          </Button>
+        </Dialog.Close>
+      </div>
+      <div className='p-4'>
+        <Form testId='create-space-form' values={initialValues} schema={SpaceForm} onSave={handleCreateSpace} />
+      </div>
+    </Dialog.Content>
+  );
+};

package/src/components/CreateDialog/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './CreateObjectDialog';
+export * from './CreateSpaceDialog';

package/src/components/PopoverRenameObject.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { type ReactiveObject } from '@dxos/echo-schema';
+import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 

package/src/components/SpacePluginSettings.tsx

@@ -4,17 +4,16 @@
 
 import React from 'react';
 
-import { useIntentDispatcher, useResolvePlugins } from '@dxos/app-framework';
-import { Input, Select, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { useIntentDispatcher } from '@dxos/app-framework';
+import { Input, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { SpaceAction, SPACE_PLUGIN } from '../meta';
-import { parseSpaceInitPlugin, type SpaceSettingsProps } from '../types';
+import { type SpaceSettingsProps } from '../types';
 
 export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const dispatch = useIntentDispatcher();
-  const plugins = useResolvePlugins(parseSpaceInitPlugin);
 
   return (
     <>
@@ -30,34 +29,6 @@ export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps
           }
         />
       </DeprecatedFormInput>
-
-      <DeprecatedFormInput label={t('default on space create label')}>
-        <Select.Root
-          value={settings.onSpaceCreate}
-          onValueChange={(value) => {
-            settings.onSpaceCreate = value;
-          }}
-        >
-          <Select.TriggerButton />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {plugins.map(
-                  ({
-                    provides: {
-                      space: { onSpaceCreate },
-                    },
-                  }) => (
-                    <Select.Option key={onSpaceCreate.action} value={onSpaceCreate.action}>
-                      {toLocalizedString(onSpaceCreate.label, t)}
-                    </Select.Option>
-                  ),
-                )}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
     </>
   );
 };

package/src/components/SpaceSettings/SpaceSettingsDialog.tsx

@@ -62,7 +62,7 @@ export const SpaceSettingsDialog = ({
         </Dialog.Title>
         <Dialog.Close asChild>
           <Button density='fine' variant='ghost' autoFocus>
-            <Icon icon='ph--x--regular' size={3} />
+            <Icon icon='ph--x--regular' size={4} />
           </Button>
         </Dialog.Close>
       </div>

package/src/components/SpaceSettings/SpaceSettingsPanel.tsx

@@ -8,7 +8,6 @@ import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { DeviceType, useDevices } from '@dxos/react-client/halo';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormInput } from '@dxos/react-ui-form';
 
@@ -22,10 +21,7 @@ export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
 
   const client = useClient();
-  const devices = useDevices();
-  const managedDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType.AGENT_MANAGED);
-  const edgeAgents = Boolean(client.config.values.runtime?.client?.edgeFeatures?.agents);
-  const edgeReplicationAvailable = edgeAgents && managedDeviceAvailable;
+  const edgeEnabled = Boolean(client.config.values.runtime?.client?.edgeFeatures?.echoReplicator);
 
   const [edgeReplication, setEdgeReplication] = useState(
     space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
@@ -54,7 +50,7 @@ export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
           }}
         />
       </DeprecatedFormInput>
-      {edgeReplicationAvailable && (
+      {edgeEnabled && (
         <DeprecatedFormInput label={t('edge replication label')}>
           <Input.Switch checked={edgeReplication} onCheckedChange={toggleEdgeReplication} />
         </DeprecatedFormInput>

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { QueryEdgeStatusResponse } 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 } from '@dxos/react-client/echo';
+import { Icon, useTranslation } from '@dxos/react-ui';
+
+import { useSpaceSyncState } from './sync-state';
+import { SPACE_PLUGIN } from '../../meta';
+
+const useEdgeStatus = (): QueryEdgeStatusResponse.EdgeStatus => {
+  const [status, setStatus] = useState(QueryEdgeStatusResponse.EdgeStatus.NOT_CONNECTED);
+  const client = useClient();
+
+  useEffect(() => {
+    client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status }) => {
+      setStatus(status);
+    });
+  }, [client]);
+
+  return status;
+};
+
+export const InlineSyncStatus = ({ space }: { space: Space }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  const connectedToEdge = useEdgeStatus() === QueryEdgeStatusResponse.EdgeStatus.CONNECTED;
+  // TODO(wittjosiah): This is not reactive.
+  const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
+  const syncState = useSpaceSyncState(space);
+  if (!connectedToEdge || !edgeSyncEnabled || !syncState || syncState.missingOnLocal === 0) {
+    return null;
+  }
+
+  return (
+    <div role='status' aria-label={t('syncing message')} className='flex items-center'>
+      <Icon icon='ph--arrows-clockwise--regular' size={3} classNames='animate-spin' />
+    </div>
+  );
+};

package/src/components/SyncStatus/Space.tsx

@@ -4,11 +4,15 @@
 
 import React, { type HTMLAttributes, useEffect, useState } from 'react';
 
-import { Icon } from '@dxos/react-ui';
+import { useClient } from '@dxos/react-client';
+import { type SpaceId, useSpace } from '@dxos/react-client/echo';
+import { Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { type Progress, type PeerSyncState } from './sync-state';
+import { SPACE_PLUGIN } from '../../meta';
+import { getSpaceDisplayName } from '../../util';
 
 export const SYNC_STALLED_TIMEOUT = 5_000;
 
@@ -41,24 +45,44 @@ const useActive = (count: number) => {
   return active;
 };
 
+export type SpaceRowContainerProps = Omit<SpaceRowProps, 'spaceName'>;
+
+export const SpaceRowContainer = ({ spaceId, state }: SpaceRowContainerProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const space = useSpace(spaceId);
+  if (!space) {
+    return null;
+  }
+
+  const spaceName = toLocalizedString(getSpaceDisplayName(space, { personal: space === client.spaces.default }), t);
+
+  return <SpaceRow spaceId={spaceId} spaceName={spaceName} state={state} />;
+};
+
+export type SpaceRowProps = {
+  spaceId: SpaceId;
+  spaceName: string;
+  state: PeerSyncState;
+};
+
 export const SpaceRow = ({
   spaceId,
+  spaceName,
   state: { localDocumentCount, remoteDocumentCount, missingOnLocal, missingOnRemote },
-}: {
-  spaceId: string;
-  state: PeerSyncState;
-}) => {
+}: SpaceRowProps) => {
   const downActive = useActive(localDocumentCount);
   const upActive = useActive(remoteDocumentCount);
 
   return (
     <div
-      className={mx('flex items-center mx-[2px] gap-[2px] cursor-pointer', styles.barHover)}
+      className='flex items-center mx-0.5 gap-0.5 cursor-pointer'
       title={spaceId}
       onClick={() => {
         void navigator.clipboard.writeText(spaceId);
       }}
     >
+      <span className='is-1/2 truncate'>{spaceName}</span>
       <Icon
         icon='ph--arrow-fat-line-left--regular'
         size={3}

package/src/components/SyncStatus/SyncStatus.stories.tsx

@@ -7,11 +7,9 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { SpaceId } from '@dxos/keys';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { SyncStatusDetail, SyncStatusIndicator } from './SyncStatus';
-import { getSyncSummary, type SpaceSyncStateMap } from './sync-state';
+import { SyncStatusIndicator } from './SyncStatus';
 import translations from '../../translations';
 
 const DefaultStory = (props: any) => {
@@ -22,47 +20,20 @@ const DefaultStory = (props: any) => {
   );
 };
 
-const random = ({ min, max }: { min: number; max: number }) => min + Math.floor(Math.random() * (max - min));
-
-const state: SpaceSyncStateMap = Array.from({ length: 5 }).reduce<SpaceSyncStateMap>((map) => {
-  const total = random({ min: 10, max: 500 });
-  const haveLocal = random({ min: 0, max: total });
-  const haveRemote = random({ min: 0, max: total });
-  map[SpaceId.random()] = {
-    localDocumentCount: haveLocal,
-    remoteDocumentCount: haveRemote,
-    missingOnLocal: total - haveLocal,
-    missingOnRemote: total - haveRemote,
-    differentDocuments: 0,
-  };
-
-  return map;
-}, {});
-
 export const Default: StoryObj<typeof SyncStatusIndicator> = {
   args: {
-    state,
+    state: {},
     saved: true,
   },
 };
 
 export const Saving: StoryObj<typeof SyncStatusIndicator> = {
   args: {
-    state,
+    state: {},
     saved: false,
   },
 };
 
-// TODO(wittjosiah): Separate story path for separate component.
-export const Detail: StoryObj<typeof SyncStatusDetail> = {
-  render: SyncStatusDetail,
-  args: {
-    state,
-    summary: getSyncSummary(state),
-    classNames: 'm-2 w-[200px] border border-separator rounded-md',
-  },
-};
-
 const meta: Meta = {
   title: 'plugins/plugin-space/SyncStatusIndicator',
   component: SyncStatusIndicator,