@dxos/react-ui-form 0.8.4-main.fffef41 → 0.9.0

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

@@ -6,44 +6,45 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { DXN, Filter, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
-import { type EchoSchema, Format } from '@dxos/echo/internal';
+import { DXN, EID, Filter, JsonSchema, Obj, Query, type QueryAST, Scope, Tag, Type, type View } from '@dxos/echo';
+import { Format } from '@dxos/echo/Format';
+import { type Mutable } from '@dxos/echo/Obj';
 import { useQuery } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { type ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
-import { Employer, Organization, Person, Project } from '@dxos/types';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { type ProjectionModel, ViewModel, getTypeURIFromQuery } from '@dxos/schema';
+import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
-import { translations } from '../../translations';
-import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+import { translations } from '#translations';
 
+import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
 const types = [
   // TODO(burdon): Get label from annotation.
-  { value: Organization.Organization.typename, label: 'Organization' },
-  { value: Person.Person.typename, label: 'Person' },
-  { value: Type.getTypename(Project.Project), label: 'Project' },
-  { value: Employer.Employer.typename, label: 'Employer' },
+  { value: Type.getURI(Organization.Organization), label: 'Organization' },
+  { value: Type.getURI(Person.Person), label: 'Person' },
+  { value: Type.getURI(Pipeline.Pipeline), label: 'Project' },
+  { value: Type.getURI(Employer.Employer), label: 'Employer' },
 ];
 
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
-  schema: EchoSchema;
+  type: Type.AnyEntity;
   view: View.View;
   projection: ProjectionModel;
 };
 
-type StoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
+type DefaultStoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
-const DefaultStory = (props: StoryProps) => {
-  const { space } = useClientProvider();
-  const [schema, setSchema] = useState<EchoSchema>();
+const DefaultStory = (props: DefaultStoryProps) => {
+  const { space } = useClientStory();
+  const [type, setType] = useState<Type.AnyEntity>();
   const [view, setView] = useState<View.View>();
   const projectionRef = useRef<ProjectionModel>(null);
 
-  const tags = useQuery(space, Filter.type(Tag.Tag));
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
 
   useAsyncEffect(async () => {
     if (space) {
@@ -51,68 +52,62 @@ const DefaultStory = (props: StoryProps) => {
         name: Schema.String,
         email: Format.Email,
         salary: Format.Currency(),
-      }).pipe(
-        Type.Obj({
-          typename: 'example.com/type/Test',
-          version: '0.1.0',
-        }),
-      );
+      }).pipe(Type.makeObject(DXN.make('com.example.type.test', '0.1.0')));
 
       const AlternateSchema = Schema.Struct({
         title: Schema.String,
         description: Schema.String,
         completed: Schema.Boolean,
-      }).pipe(
-        Type.Obj({
-          typename: 'example.com/type/Alternate',
-          version: '0.1.0',
-        }),
-      );
-
-      const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
-      const view = View.make({
+      }).pipe(Type.makeObject(DXN.make('com.example.type.alternate', '0.1.0')));
+
+      const testType = await space.db.addType(TestSchema);
+      await space.db.addType(AlternateSchema);
+      const view = ViewModel.make({
         name: 'Test',
         query: Query.select(Filter.type(TestSchema)),
-        jsonSchema: Type.toJsonSchema(TestSchema),
-        presentation: Obj.make(Type.Expando, {}),
+        jsonSchema: JsonSchema.toJsonSchema(TestSchema),
       });
 
-      setSchema(testSchema);
+      setType(testType);
       setView(view);
     }
   }, [space]);
 
   const updateViewQuery = useCallback(
-    async (newQuery: QueryAST.Query, target?: string) => {
-      if (!schema || !view || !space) {
+    async (newQuery: QueryAST.Query, target?: EID.EID) => {
+      if (!type || !view || !space) {
         return;
       }
 
-      if (props.mode === 'query') {
-        const queue = target && DXN.tryParse(target) ? target : undefined;
-        const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
-        view.query.ast = query.ast;
+      if (props.mode === 'tag') {
+        const queue = target;
+        const query = queue ? Query.fromAst(newQuery).from([Scope.feed(queue)]) : Query.fromAst(newQuery);
+        Obj.update(view, (view) => {
+          view.query.ast = query.ast as Mutable<typeof query.ast>;
+        });
 
-        const typename = getTypenameFromQuery(query.ast);
-        const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
+        const typeUri = getTypeURIFromQuery(query.ast);
+        const allTypes = space.db.graph.registry.list().filter(Type.isType);
+        const newSchema = allTypes.find((t) => Type.getURI(t) === typeUri);
         if (!newSchema) {
           return;
         }
 
-        const newView = View.make({
+        const newView = ViewModel.make({
           query,
-          jsonSchema: newSchema.jsonSchema,
-          presentation: Obj.make(Type.Expando, {}),
+          jsonSchema: JsonSchema.toJsonSchema(newSchema),
         });
-        view.projection = Obj.getSnapshot(newView).projection;
-        setSchema(() => newSchema);
+        Obj.update(view, (view) => {
+          view.projection = Obj.getSnapshot(newView).projection as Mutable<typeof view.projection>;
+        });
+        setType(() => newSchema);
       } else {
-        console.log('updateViewQuery', { newQuery });
-        view.query.ast = newQuery;
-        schema.updateTypename(getTypenameFromQuery(newQuery));
+        Obj.update(view, (view) => {
+          view.query.ast = newQuery as Mutable<typeof newQuery>;
+        });
       }
     },
-    [view, schema],
+    [view, type],
   );
 
   const handleDelete = useCallback(
@@ -122,41 +117,39 @@ const DefaultStory = (props: StoryProps) => {
 
   // Expose objects on window for test access.
   useEffect(() => {
-    if (typeof window !== 'undefined' && schema && view && projectionRef.current) {
+    if (typeof window !== 'undefined' && type && view && projectionRef.current) {
       (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] = {
-        schema,
+        type,
         view,
         projection: projectionRef.current,
       } satisfies ViewEditorDebugObjects;
     }
-  }, [schema, view]);
+  }, [type, view]);
 
   // NOTE(ZaymonFC): This looks awkward but it resolves an infinite parsing issue with sb.
   const json = useMemo(
-    () => JSON.parse(JSON.stringify({ schema, view, projection: projectionRef.current })),
-    [JSON.stringify(schema), JSON.stringify(view)],
+    () => JSON.parse(JSON.stringify({ schema: type, view, projection: projectionRef.current })),
+    [JSON.stringify(type), JSON.stringify(view)],
   );
 
-  if (!schema || !view) {
+  if (!type || !view) {
     return <div />;
   }
 
   return (
     <TestLayout json={json}>
-      <TestPanel>
-        <ViewEditor
-          ref={projectionRef}
-          schema={schema}
-          view={view}
-          registry={space?.db.schemaRegistry}
-          mode={props.mode}
-          readonly={props.readonly}
-          types={types}
-          tags={tags}
-          onQueryChanged={updateViewQuery}
-          onDelete={handleDelete}
-        />
-      </TestPanel>
+      <ViewEditor
+        ref={projectionRef}
+        type={type}
+        view={view}
+        registry={space?.db.graph.registry}
+        mode={props.mode}
+        readonly={props.readonly}
+        types={types}
+        tags={tags}
+        onQueryChanged={updateViewQuery}
+        onDelete={handleDelete}
+      />
     </TestLayout>
   );
 };
@@ -174,7 +167,8 @@ const meta = {
         space.db.add(Tag.make({ label: 'New' }));
       },
     }),
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
   ],
   parameters: {
     layout: 'fullscreen',
@@ -194,8 +188,8 @@ export const Readonly: Story = {
   },
 };
 
-export const QueryMode: Story = {
+export const TagQueryMode: Story = {
   args: {
-    mode: 'query',
+    mode: 'tag',
   },
 };

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

@@ -3,14 +3,14 @@
 //
 
 import { composeStories } from '@storybook/react';
-import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
+import { act, cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
-import { EchoSchema, isInstanceOf } from '@dxos/echo/internal';
-import { ProjectionModel, View } from '@dxos/schema';
+import { Type, View } from '@dxos/echo';
+import { instanceOf as isInstanceOf } from '@dxos/echo/Obj';
+import { ProjectionModel } from '@dxos/schema';
 
 import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
-
 import * as stories from './ViewEditor.stories';
 import { type ViewEditorDebugObjects } from './ViewEditor.stories';
 
@@ -19,7 +19,7 @@ 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(Type.isType(debugObjects.type)).toBe(true);
   expect(isInstanceOf(View.View, debugObjects.view)).toBeTruthy();
   expect(debugObjects.projection).toBeInstanceOf(ProjectionModel);
   return debugObjects;
@@ -35,8 +35,12 @@ const waitForViewEditor = async () => {
 };
 
 describe('ViewEditor', () => {
-  afterEach(() => {
-    cleanup();
+  afterEach(async () => {
+    // Wrap cleanup in async act() so React fully drains the scheduler
+    // (including setImmediate callbacks) before happy-dom tears down window.
+    await act(async () => {
+      cleanup();
+    });
   });
 
   test('renders view editor', async () => {
@@ -54,7 +58,7 @@ describe('ViewEditor', () => {
     const nameField = screen.getByText('name');
     fireEvent.click(nameField);
 
-    const fieldInput = screen.getByPlaceholderText('Field name.');
+    const fieldInput = screen.getByPlaceholderText('Property name');
     fireEvent.change(fieldInput, { target: { value: 'new_property' } });
 
     fireEvent.click(screen.getByTestId('save-button'));
@@ -68,7 +72,7 @@ describe('ViewEditor', () => {
     const debugObjects = getViewEditorDebugObjects();
 
     // Check schema contains new_property.
-    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    const schemaProperties = debugObjects.type.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.new_property).toBeDefined();
     expect(schemaProperties!.name).toBeUndefined();
@@ -89,12 +93,12 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Click the add property button.
+    // Click the add property button. The new field is auto-expanded by handleAdd.
     const addButton = screen.getByText('Add property');
     fireEvent.click(addButton);
 
     // Fill out the property field.
-    const fieldInput = screen.getByPlaceholderText('Field name.');
+    const fieldInput = screen.getByPlaceholderText('Property name');
     fireEvent.change(fieldInput, { target: { value: 'added_property' } });
 
     // Click the format combo box and select the first option.
@@ -116,7 +120,7 @@ describe('ViewEditor', () => {
     const debugObjects = getViewEditorDebugObjects();
 
     // Check schema contains added_property.
-    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    const schemaProperties = debugObjects.type.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.added_property).toBeDefined();
 
@@ -160,7 +164,7 @@ describe('ViewEditor', () => {
     const debugObjects = getViewEditorDebugObjects();
 
     // Check schema no longer contains the name property.
-    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    const schemaProperties = debugObjects.type.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.name).toBeUndefined();