@dxos/react-ui-form 0.8.4-main.a4bbb77 → 0.8.4-main.abd8ff62ef

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

@@ -3,38 +3,49 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { DXN, Filter, Obj, Query, Type } from '@dxos/echo';
-import { QueryBuilder } from '@dxos/echo-query';
-import { type EchoSchema, Format, toJsonSchema } from '@dxos/echo-schema';
-import { useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
+import { DXN, Filter, JsonSchema, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
+import { type View } from '@dxos/echo';
+import { type EchoSchema, Format, type Mutable } from '@dxos/echo/internal';
+import { useQuery } from '@dxos/react-client/echo';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { type DataType, type ProjectionModel, createView, typenameFromQuery } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { type ProjectionModel, ViewModel, getTypenameFromQuery } 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: Pipeline.Pipeline.typename, label: 'Project' },
+  { value: Employer.Employer.typename, label: 'Employer' },
+];
+
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
   schema: EchoSchema;
-  view: DataType.View;
+  view: View.View;
   projection: ProjectionModel;
 };
 
-type StoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
+type DefaultStoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
-const DefaultStory = (props: StoryProps) => {
-  const space = useSpace();
+const DefaultStory = (props: DefaultStoryProps) => {
+  const { space } = useClientStory();
   const [schema, setSchema] = useState<EchoSchema>();
-  const [view, setView] = useState<DataType.View>();
+  const [view, setView] = useState<View.View>();
   const projectionRef = useRef<ProjectionModel>(null);
 
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
+
   useAsyncEffect(async () => {
     if (space) {
       const TestSchema = Schema.Struct({
@@ -42,8 +53,8 @@ const DefaultStory = (props: StoryProps) => {
         email: Format.Email,
         salary: Format.Currency(),
       }).pipe(
-        Type.Obj({
-          typename: 'example.com/type/Test',
+        Type.object({
+          typename: 'com.example.type.test',
           version: '0.1.0',
         }),
       );
@@ -53,19 +64,17 @@ const DefaultStory = (props: StoryProps) => {
         description: Schema.String,
         completed: Schema.Boolean,
       }).pipe(
-        Type.Obj({
-          typename: 'example.com/type/Alternate',
+        Type.object({
+          typename: 'com.example.type.alternate',
           version: '0.1.0',
         }),
       );
 
       const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
-      const view = createView({
+      const view = ViewModel.make({
         name: 'Test',
         query: Query.select(Filter.type(TestSchema)),
-        queryString: 'Query.select(Filter.type(TestSchema))',
-        jsonSchema: toJsonSchema(TestSchema),
-        presentation: Obj.make(Type.Expando, {}),
+        jsonSchema: JsonSchema.toJsonSchema(TestSchema),
       });
 
       setSchema(testSchema);
@@ -74,38 +83,37 @@ const DefaultStory = (props: StoryProps) => {
   }, [space]);
 
   const updateViewQuery = useCallback(
-    async (queryString: string, target?: string) => {
+    async (newQuery: QueryAST.Query, target?: string) => {
       if (!schema || !view || !space) {
         return;
       }
 
-      if (props.mode === 'query') {
-        view.query.string = queryString;
-
-        const builder = new QueryBuilder();
-        const filter = builder.build(queryString) ?? Filter.nothing();
+      if (props.mode === 'tag') {
         const queue = target && DXN.tryParse(target) ? target : undefined;
-        const newQuery = queue ? Query.select(filter).options({ queues: [queue] }) : Query.select(filter);
-        view.query.ast = newQuery.ast;
+        const query = queue ? Query.fromAst(newQuery).from({ queues: [queue] }) : Query.fromAst(newQuery);
+        Obj.update(view, (view) => {
+          view.query.ast = query.ast as Mutable<typeof query.ast>;
+        });
 
-        const typename = typenameFromQuery(newQuery.ast);
+        const typename = getTypenameFromQuery(query.ast);
         const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
         if (!newSchema) {
           return;
         }
 
-        const newView = createView({
-          query: newQuery,
+        const newView = ViewModel.make({
+          query,
           jsonSchema: newSchema.jsonSchema,
-          presentation: Obj.make(Type.Expando, {}),
         });
-        view.projection = Obj.getSnapshot(newView).projection;
+        Obj.update(view, (view) => {
+          view.projection = Obj.getSnapshot(newView).projection as Mutable<typeof view.projection>;
+        });
         setSchema(() => newSchema);
       } else {
-        const typename = queryString;
-        const newQuery = Query.select(Filter.typename(typename));
-        view.query.ast = newQuery.ast;
-        schema.updateTypename(typename);
+        Obj.update(view, (view) => {
+          view.query.ast = newQuery as Mutable<typeof newQuery>;
+        });
+        schema.updateTypename(getTypenameFromQuery(newQuery));
       }
     },
     [view, schema],
@@ -139,18 +147,18 @@ const DefaultStory = (props: StoryProps) => {
 
   return (
     <TestLayout json={json}>
-      <TestPanel>
-        <ViewEditor
-          ref={projectionRef}
-          schema={schema}
-          view={view}
-          registry={space?.db.schemaRegistry}
-          mode={props.mode}
-          readonly={props.readonly}
-          onQueryChanged={updateViewQuery}
-          onDelete={handleDelete}
-        />
-      </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}
+      />
     </TestLayout>
   );
 };
@@ -158,7 +166,19 @@ const DefaultStory = (props: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-form/ViewEditor',
   render: DefaultStory,
-  decorators: [withClientProvider({ createSpace: true }), withTheme],
+  decorators: [
+    withClientProvider({
+      createSpace: true,
+      types: [Tag.Tag],
+      onCreateSpace: ({ space }) => {
+        space.db.add(Tag.make({ label: 'Important' }));
+        space.db.add(Tag.make({ label: 'Investor' }));
+        space.db.add(Tag.make({ label: 'New' }));
+      },
+    }),
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+  ],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -177,8 +197,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

@@ -6,11 +6,11 @@ import { composeStories } from '@storybook/react';
 import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
-import { EchoSchema, isInstanceOf } from '@dxos/echo-schema';
-import { DataType, ProjectionModel } from '@dxos/schema';
+import { View } from '@dxos/echo';
+import { EchoSchema, isInstanceOf } from '@dxos/echo/internal';
+import { ProjectionModel } from '@dxos/schema';
 
 import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
-
 import * as stories from './ViewEditor.stories';
 import { type ViewEditorDebugObjects } from './ViewEditor.stories';
 
@@ -20,7 +20,7 @@ const getViewEditorDebugObjects = (): ViewEditorDebugObjects => {
   const debugObjects = (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] as ViewEditorDebugObjects;
   expect(debugObjects).toBeDefined();
   expect(debugObjects.schema).toBeInstanceOf(EchoSchema);
-  expect(isInstanceOf(DataType.View, debugObjects.view)).toBeTruthy();
+  expect(isInstanceOf(View.View, debugObjects.view)).toBeTruthy();
   expect(debugObjects.projection).toBeInstanceOf(ProjectionModel);
   return debugObjects;
 };
@@ -54,7 +54,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'));
@@ -89,12 +89,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.
@@ -134,7 +134,8 @@ describe('ViewEditor', () => {
     expect(addedPropertyProjection!.props.property).toBe('added_property');
   });
 
-  test('delete property', async () => {
+  // TODO(mykola): Fix flaky test.
+  test('delete property', { retry: 2 }, async () => {
     await Default.run();
     await waitForViewEditor();