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

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

@@ -6,14 +6,30 @@ 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();
-  });
+  await waitFor(
+    () => {
+      expect(screen.getByTestId('debug')).toBeInTheDocument();
+    },
+    { timeout: 15000 },
+  );
 };
 
 describe('ViewEditor', () => {
@@ -41,26 +57,30 @@ describe('ViewEditor', () => {
 
     fireEvent.click(screen.getByTestId('save-button'));
 
-    // Assert.
-    expect(screen.getByText('new_property')).toBeInTheDocument();
+    // Wait for the changes to propagate to both UI and schema
+    await waitFor(() => {
+      expect(screen.getByText('new_property')).toBeInTheDocument();
+    });
 
-    const debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getViewEditorDebugObjects();
 
-    // Check schema contains new_property.
-    const schemaProperties = debugInfo.schema._storedSchema.jsonSchema.properties;
-    expect(schemaProperties.new_property).toBeDefined();
+    // 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 = debugInfo.view.fields.find((field: any) => field.path === 'new_property');
+    // 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');
+    expect(newPropertyField!.path).toBe('new_property');
 
-    // Check projection contains new_property.
-    const newPropertyProjection = debugInfo.projection._fieldProjections.find(
-      (proj: any) => proj.field.path === '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');
+    expect(newPropertyProjection!.props.property).toBe('new_property');
   });
 
   test('add new property', async () => {
@@ -85,26 +105,29 @@ describe('ViewEditor', () => {
     // Save the changes
     fireEvent.click(screen.getByTestId('save-button'));
 
-    // Assert the new property exists
-    expect(screen.getByText('added_property')).toBeInTheDocument();
+    // Wait for the changes to propagate
+    await waitFor(() => {
+      expect(screen.getByText('added_property')).toBeInTheDocument();
+    });
 
-    const debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getViewEditorDebugObjects();
 
     // Check schema contains added_property
-    const schemaProperties = debugInfo.schema._storedSchema.jsonSchema.properties;
-    expect(schemaProperties.added_property).toBeDefined();
+    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    expect(schemaProperties).toBeDefined();
+    expect(schemaProperties!.added_property).toBeDefined();
 
     // Check view contains added_property field
-    const addedPropertyField = debugInfo.view.fields.find((field: any) => field.path === 'added_property');
+    const addedPropertyField = debugObjects.view.fields.find((field: any) => field.path === 'added_property');
     expect(addedPropertyField).toBeDefined();
-    expect(addedPropertyField.path).toBe('added_property');
+    expect(addedPropertyField!.path).toBe('added_property');
 
     // Check projection contains added_property
-    const addedPropertyProjection = debugInfo.projection._fieldProjections.find(
-      (proj: any) => proj.field.path === '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');
+    expect(addedPropertyProjection!.props.property).toBe('added_property');
   });
 
   test('delete property', async () => {
@@ -123,21 +146,26 @@ describe('ViewEditor', () => {
     // Click the delete button
     fireEvent.click(deleteButton);
 
-    // Assert the property is no longer visible
-    expect(screen.queryByText('name')).not.toBeInTheDocument();
+    // Wait for the changes to propagate
+    await waitFor(() => {
+      expect(screen.queryByText('name')).not.toBeInTheDocument();
+    });
 
-    const debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getViewEditorDebugObjects();
 
     // Check schema no longer contains the name property
-    const schemaProperties = debugInfo.schema._storedSchema.jsonSchema.properties;
-    expect(schemaProperties.name).toBeUndefined();
+    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    expect(schemaProperties).toBeDefined();
+    expect(schemaProperties!.name).toBeUndefined();
 
     // Check view no longer contains the name field
-    const nameField = debugInfo.view.fields.find((field: any) => field.path === 'name');
+    const nameField = debugObjects.view.fields.find((field: any) => field.path === 'name');
     expect(nameField).toBeUndefined();
 
     // Check projection no longer contains the name property
-    const nameProjection = debugInfo.projection._fieldProjections.find((proj: any) => proj.field.path === 'name');
+    const fieldProjections = debugObjects.projection.getFieldProjections();
+    const nameProjection = fieldProjections.find((proj: any) => proj.field.path === 'name');
     expect(nameProjection).toBeUndefined();
   });
 
@@ -150,17 +178,26 @@ describe('ViewEditor', () => {
     fireEvent.click(hideButtons[0]);
 
     // Check that hiddenFields is non-empty
-    let debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
-    expect(debugInfo.view.hiddenFields.length).toBeGreaterThan(0);
-
-    // Wait for the show button to appear and click it
     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'));
 
-    // Check that hiddenFields is empty again
-    debugInfo = JSON.parse(screen.getByTestId('debug').textContent!);
-    expect(debugInfo.view.hiddenFields.length).toBe(0);
+    // 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

@@ -153,7 +153,7 @@ export const ViewEditor = ({
   return (
     <div role='none' className={mx('overflow-y-auto', classNames)}>
       {immutable && (
-        <div role='none' className='mbe-2'>
+        <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')}
@@ -172,7 +172,7 @@ export const ViewEditor = ({
 
       <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>
 
@@ -224,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>
 
@@ -269,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')}