@dxos/plugin-space 0.6.14-staging.54a8bab → 0.6.14-staging.7b35391

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}

@@ -11,7 +11,7 @@ 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);

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}

@@ -10,8 +10,9 @@ 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;
@@ -43,26 +44,20 @@ 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>
+    <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 && (
-        <Input.Root>
-          <div role='none' className='flex justify-between'>
-            <Input.Label>{t('edge replication label')}</Input.Label>
-            <Input.Switch checked={edgeReplication} onCheckedChange={toggleEdgeReplication} />
-          </div>
-        </Input.Root>
+        <DeprecatedFormInput label={t('edge replication label')}>
+          <Input.Switch checked={edgeReplication} onCheckedChange={toggleEdgeReplication} />
+        </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/index.ts

@@ -6,13 +6,13 @@ export * from './AwaitingObject';
 export * from './CollectionMain';
 export * from './CollectionSection';
 export * from './DefaultObjectSettings';
+export * from './JoinDialog';
 export * from './MenuFooter';
 export * from './PersistenceStatus';
 export * from './PopoverRenameObject';
 export * from './PopoverRenameSpace';
 export * from './ShareSpaceButton';
-export * from './SpaceMain';
 export * from './SpacePresence';
+export * from './SpacePluginSettings';
 export * from './SpaceSettings';
-export * from './SpaceSettingsPanel';
 export * from './SyncStatus';

package/src/meta.ts

@@ -25,9 +25,10 @@ export enum SpaceAction {
   CLOSE = `${SPACE_ACTION}/close`,
   MIGRATE = `${SPACE_ACTION}/migrate`,
   ADD_OBJECT = `${SPACE_ACTION}/add-object`,
-  REMOVE_OBJECT = `${SPACE_ACTION}/remove-object`,
+  REMOVE_OBJECTS = `${SPACE_ACTION}/remove-objects`,
   RENAME_OBJECT = `${SPACE_ACTION}/rename-object`,
   DUPLICATE_OBJECT = `${SPACE_ACTION}/duplicate-object`,
   WAIT_FOR_OBJECT = `${SPACE_ACTION}/wait-for-object`,
   TOGGLE_HIDDEN = `${SPACE_ACTION}/toggle-hidden`,
+  OPEN_SETTINGS = `${SPACE_ACTION}/open-settings`,
 }

package/src/translations.ts

@@ -47,6 +47,7 @@ export default [
         'delete object label': 'Delete item',
         'collection deleted label': 'Collection deleted',
         'object deleted label': 'Item deleted',
+        'objects deleted label': 'Items deleted',
         'go to object label': 'Open item',
         'found object label': 'Ready.',
         'found object description': 'The requested object is now available.',
@@ -100,6 +101,9 @@ export default [
         'offline persisted label': 'Saved to disk (offline)',
         'remote synced label': 'Synced with peers',
         'open settings panel label': 'Show Settings',
+        'open space settings label': 'Space Settings',
+        'members tab label': 'Members',
+        'settings tab label': 'Settings',
       },
     },
   },

package/src/types/types.ts

@@ -55,6 +55,12 @@ export type PluginState = {
    */
   // TODO(wittjosiah): Factor out to sdk. Migration running should probably be a space state.
   sdkMigrationRunning: Record<string, boolean>;
+
+  /**
+   * Whether or not the user can navigate to collections in the graph.
+   * Determined by whether or not there is an available plugin that can render a collection.
+   */
+  navigableCollections: boolean;
 };
 
 export type SpaceSettingsProps = {

package/src/util.tsx

@@ -92,15 +92,18 @@ export const getSpaceDisplayName = (
 };
 
 const getCollectionGraphNodePartials = ({
+  navigable,
   collection,
   space,
   resolve,
 }: {
+  navigable: boolean;
   collection: CollectionType;
   space: Space;
   resolve: MetadataResolver;
 }) => {
   return {
+    disabled: !navigable,
     acceptPersistenceClass: new Set(['echo']),
     acceptPersistenceKey: new Set([space.id]),
     role: 'branch',
@@ -176,11 +179,13 @@ const checkPendingMigration = (space: Space) => {
 
 export const constructSpaceNode = ({
   space,
+  navigable = false,
   personal,
   namesCache,
   resolve,
 }: {
   space: Space;
+  navigable?: boolean;
   personal?: boolean;
   namesCache?: Record<string, string>;
   resolve: MetadataResolver;
@@ -189,7 +194,7 @@ export const constructSpaceNode = ({
   const collection = space.state.get() === SpaceState.SPACE_READY && space.properties[CollectionType.typename];
   const partials =
     space.state.get() === SpaceState.SPACE_READY && collection instanceof CollectionType
-      ? getCollectionGraphNodePartials({ collection, space, resolve })
+      ? getCollectionGraphNodePartials({ collection, space, resolve, navigable })
       : {};
 
   return {
@@ -201,13 +206,21 @@ export const constructSpaceNode = ({
       label: getSpaceDisplayName(space, { personal, namesCache }),
       description: space.state.get() === SpaceState.SPACE_READY && space.properties.description,
       icon: 'ph--planet--regular',
-      disabled: space.state.get() !== SpaceState.SPACE_READY || hasPendingMigration,
+      disabled: !navigable || space.state.get() !== SpaceState.SPACE_READY || hasPendingMigration,
       testId: 'spacePlugin.space',
     },
   };
 };
 
-export const constructSpaceActionGroups = ({ space, dispatch }: { space: Space; dispatch: IntentDispatcher }) => {
+export const constructSpaceActionGroups = ({
+  space,
+  navigable,
+  dispatch,
+}: {
+  space: Space;
+  navigable: boolean;
+  dispatch: IntentDispatcher;
+}) => {
   const state = space.state.get();
   const hasPendingMigration = checkPendingMigration(space);
   const getId = (id: string) => `${id}/${space.id}`;
@@ -226,8 +239,6 @@ export const constructSpaceActionGroups = ({ space, dispatch }: { space: Space;
         label: ['create object in space label', { ns: SPACE_PLUGIN }],
         icon: 'ph--plus--regular',
         disposition: 'toolbar',
-        // TODO(wittjosiah): This is currently a navtree feature. Address this with cmd+k integration.
-        // mainAreaDisposition: 'in-flow',
         menuType: 'searchList',
         testId: 'spacePlugin.createObject',
       },
@@ -242,9 +253,13 @@ export const constructSpaceActionGroups = ({ space, dispatch }: { space: Space;
                 action: SpaceAction.ADD_OBJECT,
                 data: { target: collection, object: create(CollectionType, { objects: [], views: {} }) },
               },
-              {
-                action: NavigationAction.OPEN,
-              },
+              ...(navigable
+                ? [
+                    {
+                      action: NavigationAction.OPEN,
+                    },
+                  ]
+                : []),
             ]),
           properties: {
             label: ['create collection label', { ns: SPACE_PLUGIN }],
@@ -286,7 +301,6 @@ export const constructSpaceActions = ({
         label: ['migrate space label', { ns: SPACE_PLUGIN }],
         icon: 'ph--database--regular',
         disposition: 'toolbar',
-        mainAreaDisposition: 'in-flow',
         disabled: migrating || Migrations.running(space),
       },
     });
@@ -302,7 +316,7 @@ export const constructSpaceActions = ({
           if (locked) {
             return;
           }
-          await dispatch({ plugin: SPACE_PLUGIN, action: SpaceAction.SHARE, data: { spaceId: space.id } });
+          await dispatch({ plugin: SPACE_PLUGIN, action: SpaceAction.SHARE, data: { space } });
         },
         properties: {
           label: ['share space label', { ns: SPACE_PLUGIN }],
@@ -312,7 +326,6 @@ export const constructSpaceActions = ({
             macos: 'meta+.',
             windows: 'alt+.',
           },
-          mainAreaDisposition: 'absent',
         },
       },
       {
@@ -343,12 +356,23 @@ export const constructSpaceActions = ({
             macos: 'shift+F6',
             windows: 'shift+F6',
           },
-          mainAreaDisposition: 'absent',
+        },
+      },
+      {
+        id: getId(SpaceAction.OPEN_SETTINGS),
+        type: ACTION_TYPE,
+        data: async () => {
+          await dispatch({ plugin: SPACE_PLUGIN, action: SpaceAction.OPEN_SETTINGS, data: { space } });
+        },
+        properties: {
+          label: ['open space settings label', { ns: SPACE_PLUGIN }],
+          icon: 'ph--gear--regular',
         },
       },
     );
   }
 
+  // TODO(wittjosiah): Consider moving close space into the space settings dialog.
   if (state !== SpaceState.SPACE_INACTIVE && !hasPendingMigration) {
     actions.push({
       id: getId(SpaceAction.CLOSE),
@@ -359,7 +383,6 @@ export const constructSpaceActions = ({
       properties: {
         label: ['close space label', { ns: SPACE_PLUGIN }],
         icon: 'ph--x--regular',
-        mainAreaDisposition: 'menu',
         disabled: personal,
       },
     });
@@ -376,7 +399,6 @@ export const constructSpaceActions = ({
         label: ['open space label', { ns: SPACE_PLUGIN }],
         icon: 'ph--clock-counter-clockwise--regular',
         disposition: 'toolbar',
-        mainAreaDisposition: 'in-flow',
       },
     });
   }
@@ -387,10 +409,12 @@ export const constructSpaceActions = ({
 export const createObjectNode = ({
   object,
   space,
+  navigable = false,
   resolve,
 }: {
   object: EchoReactiveObject<any>;
   space: Space;
+  navigable?: boolean;
   resolve: MetadataResolver;
 }) => {
   const type = getTypename(object);
@@ -405,7 +429,7 @@ export const createObjectNode = ({
 
   const partials =
     object instanceof CollectionType
-      ? getCollectionGraphNodePartials({ collection: object, space, resolve })
+      ? getCollectionGraphNodePartials({ collection: object, space, resolve, navigable })
       : metadata.graphProps;
 
   return {
@@ -427,9 +451,11 @@ export const createObjectNode = ({
 
 export const constructObjectActionGroups = ({
   object,
+  navigable,
   dispatch,
 }: {
   object: EchoReactiveObject<any>;
+  navigable: boolean;
   dispatch: IntentDispatcher;
 }) => {
   if (!(object instanceof CollectionType)) {
@@ -447,8 +473,6 @@ export const constructObjectActionGroups = ({
         label: ['create object in collection label', { ns: SPACE_PLUGIN }],
         icon: 'ph--plus--regular',
         disposition: 'toolbar',
-        // TODO(wittjosiah): This is currently a navtree feature. Address this with cmd+k integration.
-        // mainAreaDisposition: 'in-flow',
         menuType: 'searchList',
         testId: 'spacePlugin.createObject',
       },
@@ -463,9 +487,13 @@ export const constructObjectActionGroups = ({
                 action: SpaceAction.ADD_OBJECT,
                 data: { target: collection, object: create(CollectionType, { objects: [], views: {} }) },
               },
-              {
-                action: NavigationAction.OPEN,
-              },
+              ...(navigable
+                ? [
+                    {
+                      action: NavigationAction.OPEN,
+                    },
+                  ]
+                : []),
             ]),
           properties: {
             label: ['create collection label', { ns: SPACE_PLUGIN }],
@@ -511,7 +539,7 @@ export const constructObjectActions = ({
       },
     },
     {
-      id: getId(SpaceAction.REMOVE_OBJECT),
+      id: getId(SpaceAction.REMOVE_OBJECTS),
       type: ACTION_TYPE,
       data: async () => {
         const graph = getGraph(node);
@@ -520,8 +548,8 @@ export const constructObjectActions = ({
           .find(({ data }) => data instanceof CollectionType)?.data;
         await dispatch([
           {
-            action: SpaceAction.REMOVE_OBJECT,
-            data: { object, collection },
+            action: SpaceAction.REMOVE_OBJECTS,
+            data: { objects: [object], collection },
           },
         ]);
       },