@dxos/plugin-space 0.7.2 → 0.7.3-staging.0905f03

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,68 +7,41 @@ 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) => {
   return (
-    <div className='flex flex-col-reverse p-4 '>
+    <div className='flex flex-col-reverse p-4'>
       <SyncStatusIndicator {...props} />
     </div>
   );
 };
 
-const random = ({ min, max }: { min: number; max: number }) => min + Math.floor(Math.random() * (max - min));
+const meta: Meta = {
+  title: 'plugins/plugin-space/SyncStatusIndicator',
+  component: SyncStatusIndicator,
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: { translations },
+};
 
-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,
-  };
+export default meta;
 
-  return map;
-}, {});
+type Story = StoryObj<typeof SyncStatusIndicator>;
 
-export const Default: StoryObj<typeof SyncStatusIndicator> = {
+export const Default: Story = {
   args: {
-    state,
+    state: {},
     saved: true,
   },
 };
 
-export const Saving: StoryObj<typeof SyncStatusIndicator> = {
+export const Saving: Story = {
   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,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations },
-};
-
-export default meta;

package/src/components/SyncStatus/SyncStatus.tsx

@@ -2,16 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { StatusBar } from '@dxos/plugin-status-bar';
 import { useClient } from '@dxos/react-client';
-import { Icon, Popover, useTranslation } from '@dxos/react-ui';
+import { type SpaceId } from '@dxos/react-client/echo';
+import { Icon, Input, Popover, useTranslation } from '@dxos/react-ui';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 
-import { SpaceRow, SYNC_STALLED_TIMEOUT } from './Space';
+import { SpaceRowContainer, SYNC_STALLED_TIMEOUT } from './Space';
 import { createClientSaveTracker } from './save-tracker';
 import { getIcon, getStatus } from './status';
 import { type PeerSyncState, type SpaceSyncStateMap, getSyncSummary, useSyncState } from './sync-state';
@@ -74,26 +75,43 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
   }
 };
 
-export const SyncStatusDetail = ({
-  classNames,
-  state,
-  summary,
-  debug,
-}: ThemedClassName<{
+export type SyncStatusDetailProps = ThemedClassName<{
   state: SpaceSyncStateMap;
   summary: PeerSyncState;
   debug?: boolean;
-}>) => {
+}>;
+
+// TODO(wittjosiah): This currently does not show `differentDocuments` at all.
+export const SyncStatusDetail = ({ classNames, state, summary, debug }: SyncStatusDetailProps) => {
+  const [showAll, setShowAll] = useState(false);
   const { t } = useTranslation(SPACE_PLUGIN);
-  const entries = Object.entries(state).sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
+  const entries = Object.entries(state)
+    .filter(([_, value]) => showAll || value.missingOnLocal + value.missingOnRemote > 0)
+    .toSorted(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
+
+  const handleCheckedChange = useCallback((state: boolean) => setShowAll(state), [setShowAll]);
 
   // TODO(burdon): Normalize to max document count?
   return (
-    <div className={mx('flex flex-col gap-3 p-2 text-xs min-w-[16rem]', classNames)}>
-      <h1>{t('sync status title')}</h1>
+    <div className={mx('flex flex-col gap-3 p-2 text-xs min-w-96', classNames)}>
+      <div role='none' className='flex items-center'>
+        <h1 className='flex-1'>{t('sync status title')}</h1>
+        <div className='flex items-center gap-2'>
+          <Input.Root>
+            <Input.Label classNames='text-xs'>{t('show all label')}</Input.Label>
+            <Input.Checkbox checked={showAll} onCheckedChange={handleCheckedChange} />
+          </Input.Root>
+        </div>
+      </div>
       <div className='flex flex-col gap-2'>
+        {entries.length === 0 && (
+          <div role='none' className='flex justify-center'>
+            {/* TODO(wittjosiah): This text should be updated once status includes different documents. */}
+            {t('no sync status label')}
+          </div>
+        )}
         {entries.map(([spaceId, state]) => (
-          <SpaceRow key={spaceId} spaceId={spaceId} state={state} />
+          <SpaceRowContainer key={spaceId} spaceId={spaceId as SpaceId} state={state} />
         ))}
       </div>
       {debug && <SyntaxHighlighter language='json'>{JSON.stringify(summary, null, 2)}</SyntaxHighlighter>}

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

@@ -0,0 +1,85 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+import { useStoryClientData, withClientProvider } from '@dxos/react-client/testing';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { SyncStatusDetail } from './SyncStatus';
+import { getSyncSummary, type SpaceSyncStateMap } from './sync-state';
+import translations from '../../translations';
+
+const random = ({ min, max }: { min: number; max: number }) => min + Math.floor(Math.random() * (max - min));
+
+const meta: Meta = {
+  title: 'plugins/plugin-space/SyncStatusDetail',
+  component: SyncStatusDetail,
+  render: (args) => {
+    const { state } = useStoryClientData<{ state: SpaceSyncStateMap }>();
+
+    return <SyncStatusDetail {...args} state={state} summary={getSyncSummary(state)} />;
+  },
+  decorators: [
+    withTheme,
+    withLayout({ fullscreen: true }),
+    withClientProvider({
+      createIdentity: true,
+      onIdentityCreated: async ({ client }) => {
+        const spaces = await Promise.all(
+          Array.from({ length: 10 }).map(() => client.spaces.create({ name: faker.company.name() })),
+        );
+
+        const state: SpaceSyncStateMap = spaces.reduce<SpaceSyncStateMap>((map, space, i) => {
+          if (i > 4) {
+            const total = random({ min: 10, max: 500 });
+            map[space.id] = {
+              localDocumentCount: total,
+              remoteDocumentCount: total,
+              missingOnLocal: 0,
+              missingOnRemote: 0,
+              differentDocuments: 0,
+            };
+            return map;
+          }
+
+          const total = random({ min: 10, max: 500 });
+          const haveLocal = random({ min: 0, max: total });
+          const haveRemote = random({ min: 0, max: total });
+          map[space.id] = {
+            localDocumentCount: haveLocal,
+            remoteDocumentCount: haveRemote,
+            missingOnLocal: total - haveLocal,
+            missingOnRemote: total - haveRemote,
+            differentDocuments: 0,
+          };
+
+          return map;
+        }, {});
+
+        return { state };
+      },
+    }),
+  ],
+  parameters: { translations },
+  args: {
+    classNames: 'm-2 border border-separator rounded-md',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SyncStatusDetail>;
+
+export const Default: Story = {};
+
+export const Empty: Story = {
+  render: (args) => {
+    return <SyncStatusDetail {...args} state={{}} />;
+  },
+};

package/src/components/SyncStatus/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './InlineSyncStatus';
 export * from './SyncStatus';

package/src/components/SyncStatus/sync-state.ts

@@ -75,3 +75,27 @@ export const useSyncState = (): SpaceSyncStateMap => {
 
   return spaceState;
 };
+
+/**
+ * Hook Subscribes to sync state for a single space.
+ */
+// TODO(wittjosiah): Reconcile w/ useSyncState.
+export const useSpaceSyncState = (space: Space): PeerSyncState | undefined => {
+  const [spaceState, setSpaceState] = useState<PeerSyncState>();
+
+  useEffect(() => {
+    const ctx = new Context();
+    space.crud.subscribeToSyncState(ctx, ({ peers = [] }) => {
+      const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
+      if (syncState) {
+        setSpaceState(syncState);
+      }
+    });
+
+    return () => {
+      void ctx.dispose();
+    };
+  }, [space]);
+
+  return spaceState;
+};

package/src/components/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './AwaitingObject';
+export * from './CreateDialog';
 export * from './CollectionMain';
 export * from './CollectionSection';
 export * from './DefaultObjectSettings';

package/src/meta.ts

@@ -15,6 +15,7 @@ export default {
 
 const SPACE_ACTION = `${SPACE_PLUGIN}/action`;
 export enum SpaceAction {
+  OPEN_CREATE_SPACE = `${SPACE_ACTION}/open-create-space`,
   CREATE = `${SPACE_ACTION}/create`,
   JOIN = `${SPACE_ACTION}/join`,
   SHARE = `${SPACE_ACTION}/share`,
@@ -24,6 +25,7 @@ export enum SpaceAction {
   OPEN = `${SPACE_ACTION}/open`,
   CLOSE = `${SPACE_ACTION}/close`,
   MIGRATE = `${SPACE_ACTION}/migrate`,
+  OPEN_CREATE_OBJECT = `${SPACE_ACTION}/open-create-object`,
   ADD_OBJECT = `${SPACE_ACTION}/add-object`,
   REMOVE_OBJECTS = `${SPACE_ACTION}/remove-objects`,
   RENAME_OBJECT = `${SPACE_ACTION}/rename-object`,
@@ -32,3 +34,7 @@ export enum SpaceAction {
   TOGGLE_HIDDEN = `${SPACE_ACTION}/toggle-hidden`,
   OPEN_SETTINGS = `${SPACE_ACTION}/open-settings`,
 }
+
+export enum CollectionAction {
+  CREATE = 'dxos.org/plugin/collection/action/create',
+}

package/src/translations.ts

@@ -3,10 +3,14 @@
 //
 
 import { SPACE_PLUGIN } from './meta';
+import { CollectionType } from './types';
 
 export default [
   {
     'en-US': {
+      [CollectionType.typename]: {
+        'typename label': 'Collection',
+      },
       [SPACE_PLUGIN]: {
         'plugin name': 'Spaces',
         'first run message': 'Nothing selected.',
@@ -104,6 +108,17 @@ export default [
         'open space settings label': 'Space Settings',
         'members tab label': 'Members',
         'settings tab label': 'Settings',
+        'syncing message': 'Space syncing',
+        'show all label': 'Show all',
+        'no sync status label': 'No space with missing objects.',
+        'create space dialog title': 'Create Space',
+        'create object dialog title': 'Create Object',
+        'space input placeholder': 'Select space',
+        'schema input placeholder': 'Select object type',
+        'creating object type label': 'Type',
+        'creating in space label': 'In Space',
+        'creating in collection label': 'In Collection',
+        'clear input label': 'Clear',
       },
     },
   },

package/src/types/types.ts

@@ -12,12 +12,10 @@ import type {
   TranslationsProvides,
   Plugin,
 } from '@dxos/app-framework';
-import { type Expando } from '@dxos/echo-schema';
-import { type SchemaProvides } from '@dxos/plugin-client';
+import { AST, S, type AbstractTypedObject, type Expando } from '@dxos/echo-schema';
 import { type PanelProvides } from '@dxos/plugin-deck/types';
 import { type PublicKey } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { type Label } from '@dxos/react-ui';
 import { type ComplexMap } from '@dxos/util';
 
 export const SPACE_DIRECTORY_HANDLE = 'dxos.org/plugin/space/directory';
@@ -61,6 +59,12 @@ export type PluginState = {
    * Determined by whether or not there is an available plugin that can render a collection.
    */
   navigableCollections: boolean;
+
+  /**
+   * Tracks whether setting edge replication as default has been run on spaces.
+   */
+  // TODO(wittjosiah): Systematic way to handle migrations of state outside of spaces.
+  enabledEdgeReplication: boolean;
 };
 
 export type SpaceSettingsProps = {
@@ -68,24 +72,19 @@ export type SpaceSettingsProps = {
    * Show closed spaces.
    */
   showHidden?: boolean;
-
-  /**
-   * Action to perform when a space is created.
-   */
-  onSpaceCreate?: string;
 };
 
-export type SpaceInitProvides = {
-  space: {
-    onSpaceCreate: {
-      label: Label;
-      action: string;
-    };
+export type SchemaProvides = {
+  echo: {
+    schema?: AbstractTypedObject[];
+    system?: AbstractTypedObject[];
   };
 };
 
-export const parseSpaceInitPlugin = (plugin: Plugin) =>
-  typeof (plugin.provides as any).space?.onSpaceCreate === 'object' ? (plugin as Plugin<SpaceInitProvides>) : undefined;
+export const parseSchemaPlugin = (plugin?: Plugin) =>
+  Array.isArray((plugin?.provides as any).echo?.schema) || Array.isArray((plugin?.provides as any).echo?.system)
+    ? (plugin as Plugin<SchemaProvides>)
+    : undefined;
 
 export type SpacePluginProvides = SurfaceProvides &
   IntentResolverProvides &
@@ -113,3 +112,8 @@ export interface TypedObjectSerializer<T extends Expando = Expando> {
    */
   deserialize(params: { content: string; space: Space; newId?: boolean }): Promise<T>;
 }
+
+export const SpaceForm = S.Struct({
+  name: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Name' })),
+  edgeReplication: S.Boolean.annotations({ [AST.TitleAnnotationId]: 'Enable EDGE Replication' }),
+});