@dxos/react-ui-form 0.8.2 → 0.8.3-main.7f5a14c

package/src/components/Form/FormContent.tsx

@@ -169,7 +169,7 @@ export const FormField = ({
     if (typeLiteral) {
       return (
         <>
-          {!inline && <h3 className='text-lg mbs-2 mbe-1 first:mbs-0'>{label}</h3>}
+          {!inline && <h3 className={mx('text-lg mlb-card-spacing-block first:mbs-0')}>{label}</h3>}
           <FormFields
             schema={Schema.make(typeLiteral)}
             path={path}
@@ -219,7 +219,7 @@ export const FormFields = ({
 
   return (
     // TODO(burdon): Consistent padding (with composite forms).
-    <div role='form' className={mx('p-2 is-full', classNames)}>
+    <div role='form' className={mx('is-full', classNames)}>
       {properties
         .map((property) => {
           return (

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -6,7 +6,7 @@ import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Schema } from 'effect';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 
 import { Format, type EchoSchema, toJsonSchema, TypedObject } from '@dxos/echo-schema';
 import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
@@ -19,6 +19,16 @@ import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 import translations from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
+// Symbol for accessing debug objects in tests.
+export const VIEW_EDITOR_DEBUG_SYMBOL = Symbol('viewEditorDebug');
+
+// Type definition for debug objects exposed to tests.
+export type ViewEditorDebugObjects = {
+  schema: EchoSchema;
+  view: ViewType;
+  projection: ViewProjection;
+};
+
 type StoryProps = Pick<ViewEditorProps, 'readonly'>;
 
 const DefaultStory = (props: StoryProps) => {
@@ -62,12 +72,25 @@ const DefaultStory = (props: StoryProps) => {
 
   const handleDelete = useCallback((property: string) => projection?.deleteFieldProjection(property), [projection]);
 
+  // Expose objects on window for test access.
+  useEffect(() => {
+    if (typeof window !== 'undefined' && schema && view && projection) {
+      (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] = { schema, view, projection } satisfies ViewEditorDebugObjects;
+    }
+  }, [schema, view, projection]);
+
+  // NOTE(ZaymonFC): This looks awkward but it resolves an infinite parsing issue with sb.
+  const json = useMemo(
+    () => JSON.parse(JSON.stringify({ schema, view, projection })),
+    [JSON.stringify(schema), JSON.stringify(view), JSON.stringify(projection)],
+  );
+
   if (!schema || !view || !projection) {
     return <div />;
   }
 
   return (
-    <TestLayout json={{ schema, view, projection }}>
+    <TestLayout json={json}>
       <TestPanel>
         <ViewEditor
           schema={schema}
@@ -86,9 +109,7 @@ const meta: Meta<StoryProps> = {
   title: 'ui/react-ui-form/ViewEditor',
   render: DefaultStory,
   decorators: [withClientProvider({ createSpace: true }), withLayout({ fullscreen: true }), withTheme],
-  parameters: {
-    translations,
-  },
+  parameters: { translations },
 };
 
 export default meta;
@@ -98,7 +119,5 @@ type Story = StoryObj<StoryProps>;
 export const Default: Story = {};
 
 export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
+  args: { readonly: true },
 };

package/src/components/ViewEditor/ViewEditor.test.tsx

@@ -0,0 +1,203 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { composeStories } from '@storybook/react';
+import { screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, test } from 'vitest';
+
+import { EchoSchema } from '@dxos/echo-schema';
+import { ViewProjection, ViewType } from '@dxos/schema';
+
+import * as stories from './ViewEditor.stories';
+import { VIEW_EDITOR_DEBUG_SYMBOL, type ViewEditorDebugObjects } from './ViewEditor.stories';
+
+const { Default } = composeStories(stories);
+
+const getViewEditorDebugObjects = (): ViewEditorDebugObjects => {
+  const debugObjects = (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] as ViewEditorDebugObjects;
+  expect(debugObjects).toBeDefined();
+  expect(debugObjects.schema).toBeInstanceOf(EchoSchema);
+  expect(debugObjects.view).toBeInstanceOf(ViewType);
+  expect(debugObjects.projection).toBeInstanceOf(ViewProjection);
+  return debugObjects;
+};
+
+const waitForViewEditor = async () => {
+  await waitFor(
+    () => {
+      expect(screen.getByTestId('debug')).toBeInTheDocument();
+    },
+    { timeout: 15000 },
+  );
+};
+
+describe('ViewEditor', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders view editor', async () => {
+    await Default.run();
+    await waitForViewEditor();
+    expect(screen.getByText('View')).toBeInTheDocument();
+  });
+
+  test('change property name', async () => {
+    // Arrange.
+    await Default.run();
+    await waitForViewEditor();
+
+    // Act.
+    const nameField = screen.getByText('name');
+    fireEvent.click(nameField);
+
+    const fieldInput = screen.getByPlaceholderText('Field name.');
+    fireEvent.change(fieldInput, { target: { value: 'new_property' } });
+
+    fireEvent.click(screen.getByTestId('save-button'));
+
+    // Wait for the changes to propagate to both UI and schema
+    await waitFor(() => {
+      expect(screen.getByText('new_property')).toBeInTheDocument();
+    });
+
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getViewEditorDebugObjects();
+
+    // Check schema contains new_property
+    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    expect(schemaProperties).toBeDefined();
+    expect(schemaProperties!.new_property).toBeDefined();
+    expect(schemaProperties!.name).toBeUndefined();
+
+    // Check view contains new_property field
+    const newPropertyField = debugObjects.view.fields.find((field: any) => field.path === 'new_property');
+    expect(newPropertyField).toBeDefined();
+    expect(newPropertyField!.path).toBe('new_property');
+
+    // Check projection contains new_property
+    const fieldProjections = debugObjects.projection.getFieldProjections();
+    const newPropertyProjection = fieldProjections.find((proj: any) => proj.field.path === 'new_property');
+    expect(newPropertyProjection).toBeDefined();
+    expect(newPropertyProjection!.props.property).toBe('new_property');
+  });
+
+  test('add new property', async () => {
+    await Default.run();
+    await waitForViewEditor();
+
+    // Click the add property button
+    const addButton = screen.getByText('Add property');
+    fireEvent.click(addButton);
+
+    // Fill out the property field
+    const fieldInput = screen.getByPlaceholderText('Field name.');
+    fireEvent.change(fieldInput, { target: { value: 'added_property' } });
+
+    // Click the format combo box and select the first option
+    const formatCombo = screen.getByRole('combobox');
+    fireEvent.click(formatCombo);
+
+    const firstOption = screen.getAllByRole('option')[0];
+    fireEvent.click(firstOption);
+
+    // Save the changes
+    fireEvent.click(screen.getByTestId('save-button'));
+
+    // Wait for the changes to propagate
+    await waitFor(() => {
+      expect(screen.getByText('added_property')).toBeInTheDocument();
+    });
+
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getViewEditorDebugObjects();
+
+    // Check schema contains added_property
+    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    expect(schemaProperties).toBeDefined();
+    expect(schemaProperties!.added_property).toBeDefined();
+
+    // Check view contains added_property field
+    const addedPropertyField = debugObjects.view.fields.find((field: any) => field.path === 'added_property');
+    expect(addedPropertyField).toBeDefined();
+    expect(addedPropertyField!.path).toBe('added_property');
+
+    // Check projection contains added_property
+    const fieldProjections = debugObjects.projection.getFieldProjections();
+    const addedPropertyProjection = fieldProjections.find((proj: any) => proj.field.path === 'added_property');
+    expect(addedPropertyProjection).toBeDefined();
+    expect(addedPropertyProjection!.props.property).toBe('added_property');
+  });
+
+  test('delete property', async () => {
+    await Default.run();
+    await waitForViewEditor();
+
+    // Find the delete button for the 'name' property
+    const nameProperty = screen.getByText('name');
+    const propertyRow = nameProperty.closest('[role="listitem"]');
+    const deleteButton = propertyRow?.querySelector('button:last-child');
+
+    if (!deleteButton) {
+      throw new Error('Delete button not found');
+    }
+
+    // Click the delete button
+    fireEvent.click(deleteButton);
+
+    // Wait for the changes to propagate
+    await waitFor(() => {
+      expect(screen.queryByText('name')).not.toBeInTheDocument();
+    });
+
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getViewEditorDebugObjects();
+
+    // Check schema no longer contains the name property
+    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    expect(schemaProperties).toBeDefined();
+    expect(schemaProperties!.name).toBeUndefined();
+
+    // Check view no longer contains the name field
+    const nameField = debugObjects.view.fields.find((field: any) => field.path === 'name');
+    expect(nameField).toBeUndefined();
+
+    // Check projection no longer contains the name property
+    const fieldProjections = debugObjects.projection.getFieldProjections();
+    const nameProjection = fieldProjections.find((proj: any) => proj.field.path === 'name');
+    expect(nameProjection).toBeUndefined();
+  });
+
+  test('hide and show property', async () => {
+    await Default.run();
+    await waitForViewEditor();
+
+    // Click the first hide button
+    const hideButtons = screen.getAllByTestId('hide-field-button');
+    fireEvent.click(hideButtons[0]);
+
+    // Check that hiddenFields is non-empty
+    await waitFor(() => {
+      expect(screen.getByTestId('show-field-button')).toBeInTheDocument();
+    });
+
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getViewEditorDebugObjects();
+
+    // Check that hiddenFields is non-empty
+    expect(debugObjects.view.hiddenFields).toBeDefined();
+    expect(debugObjects.view.hiddenFields!.length).toBeGreaterThan(0);
+
+    // Click the show button
+    fireEvent.click(screen.getByTestId('show-field-button'));
+
+    // Wait for the data to update and check that hiddenFields is empty
+    await waitFor(() => {
+      expect(debugObjects.view.hiddenFields!.length).toBe(0);
+    });
+
+    // Also verify that the field is back in the visible fields list
+    expect(debugObjects.view.fields.length).toBeGreaterThan(0);
+  });
+});

package/src/components/ViewEditor/ViewEditor.tsx

@@ -152,29 +152,27 @@ export const ViewEditor = ({
 
   return (
     <div role='none' className={mx('overflow-y-auto', classNames)}>
-      <div role='none' className='p-2'>
-        <div role='none' className='mbe-2'>
-          {immutable && (
-            <Message.Root valence='neutral' className='rounded'>
-              <Message.Title>
-                <Icon icon='ph--info--regular' size={5} classNames='inline' /> {t('system schema title')}
-              </Message.Title>
-              <Message.Body>{t('system schema description')}</Message.Body>
-            </Message.Root>
-          )}
+      {immutable && (
+        <div role='none' className='mbe-card-spacing-block'>
+          <Message.Root valence='neutral' className='rounded'>
+            <Message.Title>
+              <Icon icon='ph--info--regular' size={5} classNames='inline' /> {t('system schema title')}
+            </Message.Title>
+            <Message.Body>{t('system schema description')}</Message.Body>
+          </Message.Root>
         </div>
-        <Form<ViewMetaType>
-          autoSave
-          schema={ViewMetaSchema}
-          values={viewValues}
-          onSave={handleUpdate}
-          classNames='min-bs-0 overflow-y-auto'
-        />
-      </div>
+      )}
+      <Form<ViewMetaType>
+        autoSave
+        schema={ViewMetaSchema}
+        values={viewValues}
+        onSave={handleUpdate}
+        classNames='min-bs-0 overflow-y-auto'
+      />
 
       <div role='none' className='min-bs-0 overflow-y-auto'>
         {/* TODO(burdon): Clean up common form ux. */}
-        <div role='none' className='p-2'>
+        <div role='none' className='pli-card-spacing-inline mlb-card-spacing-block'>
           <label className={mx(inputTextLabel)}>{t('fields label')}</label>
         </div>
 
@@ -207,6 +205,7 @@ export const ViewEditor = ({
                         icon='ph--eye-slash--regular'
                         disabled={view.fields.length <= 1}
                         onClick={() => handleHide(field.id)}
+                        data-testid='hide-field-button'
                       />
                       {!immutable && (
                         <List.ItemDeleteButton
@@ -225,7 +224,7 @@ export const ViewEditor = ({
 
         {hiddenProperties.length > 0 && (
           <div>
-            <div role='none' className='p-2'>
+            <div role='none' className='pli-card-spacing-inline mlb-card-spacing-block'>
               <label className={mx(inputTextLabel)}>{t('hidden fields label')}</label>
             </div>
 
@@ -244,7 +243,11 @@ export const ViewEditor = ({
                     >
                       <div />
                       <List.ItemTitle>{property}</List.ItemTitle>
-                      <List.ItemButton icon='ph--eye--regular' onClick={() => handleShow(property)} />
+                      <List.ItemButton
+                        icon='ph--eye--regular'
+                        onClick={() => handleShow(property)}
+                        data-testid='show-field-button'
+                      />
                     </List.Item>
                   ))}
                 </div>
@@ -266,7 +269,7 @@ export const ViewEditor = ({
       )}
 
       {!readonly && !field && (
-        <div role='none' className='p-2'>
+        <div role='none' className='pli-card-spacing-chrome mlb-card-spacing-chrome'>
           <IconButton
             icon='ph--plus--regular'
             label={t('button add property')}

package/src/hooks/useRefQueryLookupHandler.ts

@@ -4,7 +4,7 @@
 
 import { useCallback } from 'react';
 
-import { getDXN, type TypeAnnotation } from '@dxos/echo-schema';
+import { getObjectDXN, type TypeAnnotation } from '@dxos/echo-schema';
 import { Filter, type Space } from '@dxos/react-client/echo';
 import { isNonNullable } from '@dxos/util';
 
@@ -23,7 +23,7 @@ export const useRefQueryLookupHandler = ({ space }: UseRefQueryLookupProps): Que
 
       return objects
         .map((object) => {
-          const dxn = getDXN(object);
+          const dxn = getObjectDXN(object);
           if (!dxn) {
             return undefined;
           }