@dxos/plugin-space 0.7.4 → 0.7.5-labs.071a3e2

package/src/components/AwaitingObject.tsx

@@ -3,15 +3,16 @@
 //
 
 import { CheckCircle, CircleDashed, CircleNotch } from '@phosphor-icons/react';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
-import { parseIntentPlugin, useResolvePlugin, parseNavigationPlugin, NavigationAction } from '@dxos/app-framework';
+import { createIntent, LayoutAction, useIntentDispatcher, useLayout } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { Filter, fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
 import { Button, Toast, useTranslation } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
-import { SpaceAction, SPACE_PLUGIN } from '../meta';
+import { SPACE_PLUGIN } from '../meta';
+import { SpaceAction } from '../types';
 
 const WAIT_FOR_OBJECT_TIMEOUT = 180e3; // 3 minutes
 const TOAST_TIMEOUT = 240e3; // 4 minutes
@@ -21,8 +22,8 @@ export const AwaitingObject = ({ id }: { id: string }) => {
   const [waiting, setWaiting] = useState(true);
   const [found, setFound] = useState(false);
   const { t } = useTranslation(SPACE_PLUGIN);
-  const intentPlugin = useResolvePlugin(parseIntentPlugin);
-  const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const layout = useLayout();
 
   const client = useClient();
   const objects = useQuery(client.spaces, Filter.all());
@@ -43,26 +44,21 @@ export const AwaitingObject = ({ id }: { id: string }) => {
     if (objects.findIndex((object) => fullyQualifiedId(object) === id) > -1) {
       setFound(true);
 
-      if (navigationPlugin?.provides.location.active.solo?.[0].id === id) {
+      if (layout.active.includes(id)) {
         setOpen(false);
       }
     }
-  }, [id, objects, intentPlugin]);
+  }, [id, objects, layout]);
 
-  const handleClose = async () =>
-    intentPlugin?.provides.intent.dispatch({
-      plugin: SPACE_PLUGIN,
-      action: SpaceAction.WAIT_FOR_OBJECT,
-      data: { id: undefined },
-    });
+  const handleClose = useCallback(
+    async () => dispatch(createIntent(SpaceAction.WaitForObject, { id: undefined })),
+    [dispatch],
+  );
 
-  const handleNavigate = () => {
-    void intentPlugin?.provides.intent.dispatch({
-      action: NavigationAction.OPEN,
-      data: { activeParts: { main: [id] } },
-    });
+  const handleNavigate = useCallback(() => {
+    void dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [id] }));
     void handleClose();
-  };
+  }, [id, handleClose, dispatch]);
 
   return (
     <Toast.Root open={open} duration={TOAST_TIMEOUT} onOpenChange={setOpen}>

package/src/components/{DefaultObjectSettings.tsx → BaseObjectSettings.tsx}

@@ -9,11 +9,11 @@ import { Input, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 
-export type DefaultObjectSettingsProps = {
+export type BaseObjectSettingsProps = {
   object: ReactiveEchoObject<any>;
 };
 
-export const DefaultObjectSettings = ({ object }: DefaultObjectSettingsProps) => {
+export const BaseObjectSettings = ({ object }: BaseObjectSettingsProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   // TODO(burdon): Standardize forms.
   return (

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -2,20 +2,30 @@
 // Copyright 2024 DXOS.org
 //
 
+import { pipe } from 'effect';
 import React, { useCallback, useRef } from 'react';
 
-import { type MetadataResolver, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
-import { type AbstractTypedObject, getSpace, isReactiveObject, isSpace, useSpaces } from '@dxos/react-client/echo';
+import {
+  getSpace,
+  isReactiveObject,
+  isSpace,
+  type ReactiveObject,
+  type TypedObject,
+  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';
+import { SPACE_PLUGIN } from '../../meta';
+import { CollectionType, SpaceAction } from '../../types';
+
+export const CREATE_OBJECT_DIALOG = `${SPACE_PLUGIN}/CreateObjectDialog`;
 
 export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'schemas' | 'target' | 'typename' | 'name'> & {
-  resolve?: MetadataResolver;
-  navigableCollections?: boolean;
+  resolve?: (typename: string) => Record<string, any>;
+  shouldNavigate?: (object: ReactiveObject<any>) => boolean;
 };
 
 export const CreateObjectDialog = ({
@@ -23,28 +33,30 @@ export const CreateObjectDialog = ({
   target,
   typename,
   name,
-  navigableCollections,
+  shouldNavigate: _shouldNavigate,
   resolve,
 }: CreateObjectDialogProps) => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
   const { t } = useTranslation(SPACE_PLUGIN);
   const client = useClient();
   const spaces = useSpaces();
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleCreateObject = useCallback(
     async ({
       schema,
       target: _target,
-      name,
+      data,
     }: {
-      schema: AbstractTypedObject;
+      schema: TypedObject;
       target: CreateObjectPanelProps['target'];
-      name?: string;
+      data?: Record<string, any>;
     }) => {
-      const target = isSpace(_target) ? (_target.properties[CollectionType.typename] as CollectionType) : _target;
-      const createObjectAction = resolve?.(schema.typename)?.createObject;
-      if (!createObjectAction || !target) {
+      const target = isSpace(_target)
+        ? (_target.properties[CollectionType.typename]?.target as CollectionType | undefined)
+        : _target;
+      const createObjectIntent = resolve?.(schema.typename)?.createObject;
+      if (!createObjectIntent || !target) {
         // TODO(wittjosiah): UI feedback.
         return;
       }
@@ -53,17 +65,16 @@ export const CreateObjectDialog = ({
       closeRef.current?.click();
 
       const space = isSpace(target) ? target : getSpace(target);
-      const result = await dispatch({ action: createObjectAction, data: { name, space } });
-      const object = result?.data;
+      const result = await dispatch(createObjectIntent(data, { space }));
+      const object = result.data?.object;
       if (isReactiveObject(object)) {
-        await dispatch([
-          {
-            plugin: SPACE_PLUGIN,
-            action: SpaceAction.ADD_OBJECT,
-            data: { target, object },
-          },
-          ...(!(object instanceof CollectionType) || navigableCollections ? [{ action: NavigationAction.OPEN }] : []),
-        ]);
+        const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object });
+        const shouldNavigate = _shouldNavigate ?? (() => true);
+        if (shouldNavigate(object)) {
+          await dispatch(pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
+        } else {
+          await dispatch(addObjectIntent);
+        }
       }
     },
     [dispatch, resolve],
@@ -72,8 +83,8 @@ export const CreateObjectDialog = ({
   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.Content classNames='p-0 bs-content max-bs-full md:max-is-[40rem] overflow-hidden'>
+      <div role='none' className='flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4'>
         <Dialog.Title>{t('create object dialog title')}</Dialog.Title>
         <Dialog.Close asChild>
           <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
@@ -81,18 +92,18 @@ export const CreateObjectDialog = ({
           </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>
+
+      <CreateObjectPanel
+        classNames='p-4'
+        schemas={schemas}
+        spaces={spaces}
+        target={target}
+        typename={typename}
+        name={name}
+        defaultSpaceId={client.spaces.default.id}
+        resolve={resolve}
+        onCreateObject={handleCreateObject}
+      />
     </Dialog.Content>
   );
 };

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,36 +2,60 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, 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 { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';
+import { type TypedObject, getObjectAnnotation, type ObjectAnnotation, S } from '@dxos/echo-schema';
+import { type SpaceId, type Space } from '@dxos/react-client/echo';
+import { Icon, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Form, type InputProps } from '@dxos/react-ui-form';
 import { SearchList } from '@dxos/react-ui-searchlist';
+import { mx } from '@dxos/react-ui-theme';
 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[];
+// TODO(ZaymonFC): Move this if you find yourself needing it elsewhere.
+/**
+ * Creates a surface input component based on plugin context.
+ * @param baseData Additional data that will be merged with form data and passed to the surface.
+ * This allows providing more context to the surface than what's available from the form itself.
+ */
+const useInputSurfaceLookup = (baseData?: Record<string, any>) => {
+  const pluginManager = usePluginManager();
+
+  return useCallback(
+    ({ prop, schema, inputProps }: { prop: string; schema: S.Schema<any>; inputProps: InputProps }) => {
+      const composedData = { prop, schema, ...baseData };
+      if (!isSurfaceAvailable(pluginManager.context, { role: 'form-input', data: composedData })) {
+        return undefined;
+      }
+
+      return <Surface role='form-input' data={composedData} {...inputProps} />;
+    },
+    [pluginManager, baseData],
+  );
+};
+
+export type CreateObjectPanelProps = ThemedClassName<{
+  schemas: TypedObject[];
   spaces: Space[];
   typename?: string;
   target?: Space | CollectionType;
   name?: string;
   defaultSpaceId?: SpaceId;
-  resolve?: MetadataResolver;
+  resolve?: (typename: string) => Record<string, any>;
   onCreateObject?: (params: {
-    schema: AbstractTypedObject;
+    schema: TypedObject;
     target: Space | CollectionType;
-    name?: string;
+    data: Record<string, any>;
   }) => MaybePromise<void>;
-};
+}>;
 
 export const CreateObjectPanel = ({
+  classNames,
   schemas,
   spaces,
   typename: initialTypename,
@@ -45,125 +69,137 @@ export const CreateObjectPanel = ({
   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 options: ObjectAnnotation[] = schemas
+    .map(getObjectAnnotation)
+    .filter(nonNullable)
+    .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 handleCreateObject = useCallback(
-    async ({ name }: { name?: string }) => {
+    async (props: Record<string, any>) => {
       if (!schema || !target) {
         return;
       }
-
-      await onCreateObject?.({ schema, target, name });
+      await onCreateObject?.({ schema, target, data: props });
     },
     [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'>
+  const metadata = useMemo(() => {
+    if (!typename) {
+      return;
+    }
+    return resolve?.(typename);
+  }, [resolve, typename]);
+
+  const inputSurfaceLookup = useInputSurfaceLookup({ target });
+
+  const form = useMemo(() => {
+    // TODO(ZaymonFC): Move this default object creation schema somewhere?
+    const schema = (metadata?.creationSchema ?? S.Struct({ name: S.optional(S.String) })) as S.Schema<any>;
+
+    return (
+      <Form
+        classNames='!p-0'
+        autoFocus
+        values={{ name: initialName }}
+        schema={schema}
+        testId='create-object-form'
+        onSave={handleCreateObject}
+        lookupComponent={inputSurfaceLookup}
+      />
+    );
+  }, [initialName, handleCreateObject, metadata]);
+
+  // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
+  return (
+    <div role='form' className={mx('flex flex-col gap-2', classNames)}>
+      {!schema ? (
+        <SelectSchema options={options} resolve={resolve} onChange={setTypename} />
+      ) : !target ? (
+        <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={setTarget} />
+      ) : (
+        form
+      )}
+    </div>
+  );
+};
+
+const SelectSpace = ({
+  spaces,
+  defaultSpaceId,
+  onChange,
+}: { onChange: (space: Space) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  return (
+    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden'>
       <SearchList.Input
         autoFocus
-        data-testid='create-object-form.schema-input'
-        placeholder={t('schema input placeholder')}
+        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'>
-        {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>
-        ))}
+        {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.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>
+          ))}
       </SearchList.Content>
     </SearchList.Root>
   );
+};
+
+const SelectSchema = ({
+  options,
+  resolve,
+  onChange,
+}: {
+  options: ObjectAnnotation[];
+  onChange: (type: string) => void;
+} & Pick<CreateObjectPanelProps, 'resolve'>) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
 
-  const spaceInput = (
-    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden my-2 px-2'>
+  return (
+    <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden'>
       <SearchList.Input
         autoFocus
-        data-testid='create-object-form.space-input'
-        placeholder={t('space input placeholder')}
+        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'>
-        {spaces.map((space) => (
+        {options.map((option) => (
           <SearchList.Item
-            key={space.id}
-            value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-            onSelect={() => setTarget(space)}
+            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='grow truncate'>
-              {toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+            <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 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

@@ -2,15 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Effect } from 'effect';
 import React, { useCallback, useRef } from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, LayoutAction, 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';
+import { SPACE_PLUGIN } from '../../meta';
+import { SpaceAction, SpaceForm } from '../../types';
+
+export const CREATE_SPACE_DIALOG = `${SPACE_PLUGIN}/CreateSpaceDialog`;
 
 type FormValues = S.Schema.Type<typeof SpaceForm>;
 const initialValues: FormValues = { edgeReplication: true };
@@ -18,21 +21,16 @@ const initialValues: FormValues = { edgeReplication: true };
 export const CreateSpaceDialog = () => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
   const { t } = useTranslation(SPACE_PLUGIN);
-  const dispatch = useIntentDispatcher();
+  const { dispatch } = useIntentDispatcher();
 
   const handleCreateSpace = useCallback(
     async (data: FormValues) => {
-      const result = await dispatch({
-        action: SpaceAction.CREATE,
-        data,
+      const program = Effect.gen(function* () {
+        const { space } = yield* dispatch(createIntent(SpaceAction.Create, data));
+        yield* dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
+        yield* dispatch(createIntent(SpaceAction.OpenCreateObject, { target: space }));
       });
-      const target = result?.data.space;
-      if (target) {
-        await dispatch({
-          action: SpaceAction.OPEN_CREATE_OBJECT,
-          data: { target },
-        });
-      }
+      await Effect.runPromise(program);
     },
     [dispatch],
   );
@@ -40,8 +38,8 @@ export const CreateSpaceDialog = () => {
   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.Content classNames='p-0 bs-content min-bs-[16rem] max-bs-full md:max-is-[32rem] overflow-hidden'>
+      <div role='none' className='flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4'>
         <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
         <Dialog.Close asChild>
           <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
@@ -50,7 +48,14 @@ export const CreateSpaceDialog = () => {
         </Dialog.Close>
       </div>
       <div className='p-4'>
-        <Form testId='create-space-form' values={initialValues} schema={SpaceForm} onSave={handleCreateSpace} />
+        <Form
+          testId='create-space-form'
+          classNames='!p-0'
+          autoFocus
+          values={initialValues}
+          schema={SpaceForm}
+          onSave={handleCreateSpace}
+        />
       </div>
     </Dialog.Content>
   );