@dxos/plugin-space 0.6.14-staging.e15392e → 0.7.0

package/src/components/AwaitingObject.tsx

@@ -43,7 +43,7 @@ export const AwaitingObject = ({ id }: { id: string }) => {
     if (objects.findIndex((object) => fullyQualifiedId(object) === id) > -1) {
       setFound(true);
 
-      if (navigationPlugin?.provides.location.active === id) {
+      if (navigationPlugin?.provides.location.active.solo?.[0].id === id) {
         setOpen(false);
       }
     }

package/src/components/JoinDialog.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { LayoutAction, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { useGraph } from '@dxos/plugin-graph';
+import { ObservabilityAction } from '@dxos/plugin-observability/meta';
+import { useSpaces } 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 { SPACE_PLUGIN } from '../meta';
+
+export type JoinDialogProps = JoinPanelProps & {
+  navigableCollections?: boolean;
+};
+
+export const JoinDialog = ({ navigableCollections, ...props }: JoinDialogProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const dispatch = useIntentDispatcher();
+  const spaces = useSpaces();
+  const { graph } = useGraph();
+
+  const handleDone = useCallback(
+    async (result: InvitationResult | null) => {
+      if (result?.spaceKey) {
+        await Promise.all([
+          dispatch({
+            action: LayoutAction.SET_LAYOUT,
+            data: {
+              element: 'toast',
+              subject: {
+                id: `${SPACE_PLUGIN}/join-success`,
+                duration: 5_000,
+                title: t('join success label'),
+                closeLabel: t('dismiss label'),
+              },
+            },
+          }),
+          dispatch({
+            action: LayoutAction.SET_LAYOUT,
+            data: {
+              element: 'dialog',
+              state: false,
+            },
+          }),
+        ]);
+      }
+
+      const space = spaces.find(({ key }) => result?.spaceKey?.equals(key));
+      const target = result?.target || (navigableCollections ? space?.id : undefined);
+      if (target) {
+        // Wait for up to 1 second 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 Promise.all([
+          dispatch({
+            action: NavigationAction.OPEN,
+            data: {
+              activeParts: { main: [target] },
+            },
+          }),
+          dispatch({
+            action: NavigationAction.EXPOSE,
+            data: {
+              id: target,
+            },
+          }),
+        ]);
+      }
+
+      if (space) {
+        await dispatch({
+          action: ObservabilityAction.SEND_EVENT,
+          data: {
+            name: 'space.join',
+            properties: {
+              spaceId: space.id,
+            },
+          },
+        });
+      }
+    },
+    [dispatch, spaces],
+  );
+
+  return (
+    <Dialog.Content>
+      <JoinPanel
+        {...props}
+        exitActionParent={<Dialog.Close asChild />}
+        doneActionParent={<Dialog.Close asChild />}
+        onDone={handleDone}
+      />
+    </Dialog.Content>
+  );
+};

package/src/components/ShareSpaceButton.tsx

@@ -5,14 +5,15 @@
 import React from 'react';
 
 import { useIntentDispatcher } from '@dxos/app-framework';
-import { Button, useTranslation } from '@dxos/react-ui';
+import { type Space } from '@dxos/react-client/echo';
+import { IconButton, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN, SpaceAction } from '../meta';
 
-export const ShareSpaceButton = ({ spaceId }: { spaceId: string }) => {
+export const ShareSpaceButton = ({ space }: { space: Space }) => {
   const dispatch = useIntentDispatcher();
 
-  return <ShareSpaceButtonImpl onClick={() => dispatch({ action: SpaceAction.SHARE, data: { spaceId } })} />;
+  return <ShareSpaceButtonImpl onClick={() => dispatch({ action: SpaceAction.SHARE, data: { space } })} />;
 };
 
 // TODO(wittjosiah): Better way to name pure/impure components?
@@ -20,8 +21,11 @@ export const ShareSpaceButtonImpl = ({ onClick }: { onClick: () => void }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
 
   return (
-    <Button data-testid='spacePlugin.shareSpaceButton' onClick={onClick} classNames='mli-1'>
-      {t('share space label')}
-    </Button>
+    <IconButton
+      data-testid='spacePlugin.shareSpaceButton'
+      icon='ph--users--regular'
+      label={t('share space label')}
+      onClick={onClick}
+    />
   );
 };

package/src/components/{SpaceSettings.tsx → SpacePluginSettings.tsx}

@@ -6,19 +6,19 @@ import React from 'react';
 
 import { useIntentDispatcher, useResolvePlugins } from '@dxos/app-framework';
 import { Input, Select, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { FormInput } from '@dxos/react-ui-data';
+import { DeprecatedFormInput } from '@dxos/react-ui-data';
 
 import { SpaceAction, SPACE_PLUGIN } from '../meta';
 import { parseSpaceInitPlugin, type SpaceSettingsProps } from '../types';
 
-export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
+export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const dispatch = useIntentDispatcher();
   const plugins = useResolvePlugins(parseSpaceInitPlugin);
 
   return (
     <>
-      <FormInput label={t('show hidden spaces label')}>
+      <DeprecatedFormInput label={t('show hidden spaces label')}>
         <Input.Switch
           checked={settings.showHidden}
           onCheckedChange={(checked) =>
@@ -29,9 +29,9 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
             })
           }
         />
-      </FormInput>
+      </DeprecatedFormInput>
 
-      <FormInput label={t('default on space create label')}>
+      <DeprecatedFormInput label={t('default on space create label')}>
         <Select.Root
           value={settings.onSpaceCreate}
           onValueChange={(value) => {
@@ -57,7 +57,7 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </FormInput>
+      </DeprecatedFormInput>
     </>
   );
 };

package/src/components/SpaceSettings/SpaceSettingsDialog.stories.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { useStoryClientData, withClientProvider } from '@dxos/react-client/testing';
+import { Dialog } from '@dxos/react-ui';
+import { osTranslations } from '@dxos/shell/react';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { SpaceSettingsDialog, type SpaceSettingsDialogProps } from './SpaceSettingsDialog';
+import translations from '../../translations';
+
+const Story = (args: Partial<SpaceSettingsDialogProps>) => {
+  const { space } = useStoryClientData();
+
+  return (
+    <Dialog.Root open>
+      <Dialog.Overlay blockAlign='start'>
+        <SpaceSettingsDialog {...args} space={space!} />
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-space/SpaceSettingsDialog',
+  component: SpaceSettingsDialog,
+  render: Story,
+  decorators: [
+    withClientProvider({ createIdentity: true, createSpace: true }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+  parameters: { translations: [...translations, osTranslations] },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof SpaceSettingsDialog> = {};

package/src/components/SpaceSettings/SpaceSettingsDialog.tsx

@@ -0,0 +1,103 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { useClient } from '@dxos/react-client';
+import { Button, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Tabs, type TabsRootProps, type TabsActivePart } from '@dxos/react-ui-tabs';
+import { ClipboardProvider, SpacePanel, type SpacePanelProps } from '@dxos/shell/react';
+
+import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSettingsPanel';
+import { SPACE_PLUGIN } from '../../meta';
+import { COMPOSER_SPACE_LOCK, getSpaceDisplayName } from '../../util';
+
+export type SpaceSettingsTab = 'members' | 'settings';
+
+export type SpaceSettingsDialogProps = {
+  initialTab?: SpaceSettingsTab;
+  namesCache?: Record<string, string>;
+} & SpaceSettingsPanelProps &
+  Pick<SpacePanelProps, 'createInvitationUrl' | 'target'>;
+
+export const SpaceSettingsDialog = ({
+  space,
+  target,
+  createInvitationUrl,
+  initialTab = 'members',
+  namesCache,
+}: SpaceSettingsDialogProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const [tabsActivePart, setTabsActivePart] = useState<TabsActivePart>('list');
+  const [selected, setSelected] = useState<SpaceSettingsTab>(initialTab);
+  const locked = space.properties[COMPOSER_SPACE_LOCK];
+  const name = getSpaceDisplayName(space, { personal: client.spaces.default === space, namesCache });
+
+  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
+          onClick={() => setTabsActivePart('list')}
+          aria-description={t('click to return to tablist description')}
+          classNames='flex cursor-pointer items-center group/title'
+        >
+          <Icon
+            icon='ph--caret-left--regular'
+            size={4}
+            classNames={['@md:hidden', tabsActivePart === 'list' && 'invisible']}
+          />
+          <span
+            className={
+              tabsActivePart !== 'list'
+                ? 'group-hover/title:underline @md:group-hover/title:no-underline underline-offset-4 decoration-1'
+                : ''
+            }
+          >
+            {toLocalizedString(name, t)}
+          </span>
+        </Dialog.Title>
+        <Dialog.Close asChild>
+          <Button density='fine' variant='ghost' autoFocus>
+            <Icon icon='ph--x--regular' size={3} />
+          </Button>
+        </Dialog.Close>
+      </div>
+      <Tabs.Root
+        orientation='vertical'
+        value={selected}
+        onValueChange={setSelected as TabsRootProps['onValueChange']}
+        activePart={tabsActivePart}
+        onActivePartChange={setTabsActivePart}
+        classNames='flex flex-col flex-1 mbs-2'
+      >
+        <Tabs.Viewport classNames='flex-1 min-bs-0'>
+          <div role='none' className='overflow-y-auto pli-3 @md:pis-2 @md:pie-0 mbe-4 border-r border-separator'>
+            <Tabs.Tablist classNames='flex flex-col max-bs-none min-is-[200px] gap-4 overflow-y-auto'>
+              <div role='none' className='flex flex-col ml-1'>
+                <Tabs.Tab value='settings'>{t('settings tab label')}</Tabs.Tab>
+                <Tabs.Tab value='members' disabled={locked}>
+                  {t('members tab label')}
+                </Tabs.Tab>
+              </div>
+            </Tabs.Tablist>
+          </div>
+
+          <Tabs.Tabpanel value='settings' classNames='pli-3 @md:pli-5 max-bs-dvh overflow-y-auto'>
+            <SpaceSettingsPanel space={space} />
+          </Tabs.Tabpanel>
+
+          {/* TODO(wittjosiah): Weird focus ring when tabpanel is focused. */}
+          <Tabs.Tabpanel value='members' classNames='pli-3 @md:pli-5 max-bs-dvh overflow-y-auto'>
+            <ClipboardProvider>
+              <SpacePanel space={space} hideHeading target={target} createInvitationUrl={createInvitationUrl} />
+            </ClipboardProvider>
+          </Tabs.Tabpanel>
+        </Tabs.Viewport>
+      </Tabs.Root>
+    </Dialog.Content>
+  );
+};

package/src/components/SpaceSettings/SpaceSettingsPanel.stories.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { useStoryClientData, withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSettingsPanel';
+import translations from '../../translations';
+
+const Story = (args: Partial<SpaceSettingsPanelProps>) => {
+  const { space } = useStoryClientData();
+
+  return <SpaceSettingsPanel {...args} space={space!} />;
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-space/SpaceSettingsPanel',
+  component: SpaceSettingsPanel,
+  render: Story,
+  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
+  parameters: { translations },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof SpaceSettingsPanel> = {};

package/src/components/{SpaceSettingsPanel.tsx → SpaceSettings/SpaceSettingsPanel.tsx}

@@ -6,10 +6,13 @@ import React, { useCallback, useState } from 'react';
 
 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-data';
 
-import { SPACE_PLUGIN } from '../meta';
+import { SPACE_PLUGIN } from '../../meta';
 
 export type SpaceSettingsPanelProps = {
   space: Space;
@@ -17,10 +20,16 @@ export type SpaceSettingsPanelProps = {
 
 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 [edgeReplication, setEdgeReplication] = useState(
     space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
   );
-
   const toggleEdgeReplication = useCallback(
     async (next: boolean) => {
       setEdgeReplication(next);
@@ -35,25 +44,21 @@ export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
   );
 
   return (
-    <div role='form' className='flex flex-col w-full p-2 gap-4'>
-      <Input.Root>
-        <div role='none' className='flex flex-col gap-1'>
-          <Input.Label>{t('name label')}</Input.Label>
-          <Input.TextInput
-            placeholder={t('name placeholder')}
-            value={space.properties.name}
-            onChange={(event) => {
-              space.properties.name = event.target.value;
-            }}
-          />
-        </div>
-      </Input.Root>
-      <Input.Root>
-        <div role='none' className='flex justify-between'>
-          <Input.Label>{t('edge replication label')}</Input.Label>
+    <div role='form' className='flex flex-col'>
+      <DeprecatedFormInput label={t('name label')}>
+        <Input.TextInput
+          placeholder={t('unnamed space label')}
+          value={space.properties.name ?? ''}
+          onChange={(event) => {
+            space.properties.name = event.target.value;
+          }}
+        />
+      </DeprecatedFormInput>
+      {edgeReplicationAvailable && (
+        <DeprecatedFormInput label={t('edge replication label')}>
           <Input.Switch checked={edgeReplication} onCheckedChange={toggleEdgeReplication} />
-        </div>
-      </Input.Root>
+        </DeprecatedFormInput>
+      )}
     </div>
   );
 };

package/src/components/SpaceSettings/index.ts

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

package/src/components/SyncStatus/Space.tsx

@@ -0,0 +1,109 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type HTMLAttributes, useEffect, useState } from 'react';
+
+import { Icon } 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';
+
+export const SYNC_STALLED_TIMEOUT = 5_000;
+
+// TODO(wittjosiah): Define sematic color tokens.
+const styles = {
+  barBg: 'bg-neutral-50 dark:bg-green-900 text-black',
+  barFg: 'bg-neutral-100 bg-green-500',
+  barHover: 'dark:hover:bg-green-500',
+};
+
+const useActive = (count: number) => {
+  const [current, setCurrent] = useState(count);
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    let t: NodeJS.Timeout | undefined;
+    if (count !== current) {
+      setActive(true);
+      setCurrent(count);
+      t && clearTimeout(t);
+      t = setTimeout(() => {
+        setActive(false);
+      }, SYNC_STALLED_TIMEOUT);
+    }
+
+    return () => {
+      setActive(false);
+      clearTimeout(t);
+    };
+  }, [count, current]);
+  return active;
+};
+
+export const SpaceRow = ({
+  spaceId,
+  state: { localDocumentCount, remoteDocumentCount, missingOnLocal, missingOnRemote },
+}: {
+  spaceId: string;
+  state: PeerSyncState;
+}) => {
+  const downActive = useActive(localDocumentCount);
+  const upActive = useActive(remoteDocumentCount);
+
+  return (
+    <div
+      className={mx('flex items-center mx-[2px] gap-[2px] cursor-pointer', styles.barHover)}
+      title={spaceId}
+      onClick={() => {
+        void navigator.clipboard.writeText(spaceId);
+      }}
+    >
+      <Icon
+        icon='ph--arrow-fat-line-left--regular'
+        size={3}
+        classNames={mx(downActive && 'animate-[pulse_1s_infinite]')}
+      />
+      <Candle
+        up={{ count: remoteDocumentCount, total: remoteDocumentCount + missingOnRemote }}
+        down={{ count: localDocumentCount, total: localDocumentCount + missingOnLocal }}
+        title={spaceId}
+      />
+      <Icon
+        icon='ph--arrow-fat-line-right--regular'
+        size={3}
+        classNames={mx(upActive && 'animate-[pulse_1s_step-start_infinite]')}
+      />
+    </div>
+  );
+};
+
+type CandleProps = ThemedClassName<Pick<HTMLAttributes<HTMLDivElement>, 'title'>> & { up: Progress; down: Progress };
+
+const Candle = ({ classNames, up, down }: CandleProps) => {
+  return (
+    <div className={mx('grid grid-cols-[1fr_2rem_1fr] w-full h-3', classNames)}>
+      <Bar classNames='justify-end' {...up} />
+      <div className='relative'>
+        <div className={mx('absolute inset-0 flex items-center justify-center text-xs', styles.barBg)}>{up.total}</div>
+      </div>
+      <Bar {...down} />
+    </div>
+  );
+};
+
+const Bar = ({ classNames, count, total }: ThemedClassName<Progress>) => {
+  let p = (count / total) * 100;
+  if (count < total) {
+    p = Math.min(p, 95);
+  }
+
+  return (
+    <div className={mx('relative flex w-full', styles.barBg, classNames)}>
+      <div className={mx('shrink-0', styles.barFg)} style={{ width: `${p}%` }}></div>
+      {count !== total && (
+        <div className='absolute top-0 bottom-0 flex items-center mx-0.5 text-black text-xs'>{count}</div>
+      )}
+    </div>
+  );
+};

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

@@ -4,14 +4,14 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+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 './types';
+import { getSyncSummary, type SpaceSyncStateMap } from './sync-state';
 import translations from '../../translations';
 
 const DefaultStory = (props: any) => {
@@ -39,13 +39,22 @@ const state: SpaceSyncStateMap = Array.from({ length: 5 }).reduce<SpaceSyncState
   return map;
 }, {});
 
-export const Default = {
+export const Default: StoryObj<typeof SyncStatusIndicator> = {
   args: {
     state,
+    saved: true,
   },
 };
 
-export const Detail = {
+export const Saving: StoryObj<typeof SyncStatusIndicator> = {
+  args: {
+    state,
+    saved: false,
+  },
+};
+
+// TODO(wittjosiah): Separate story path for separate component.
+export const Detail: StoryObj<typeof SyncStatusDetail> = {
   render: SyncStatusDetail,
   args: {
     state,