@dxos/react-ui-form 0.8.3 → 0.8.4-main.03d5cd7b56

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

@@ -2,119 +2,203 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react';
-import { Schema } from 'effect';
-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';
-import { withClientProvider } from '@dxos/react-client/testing';
+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, 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 { ViewProjection, ViewType, createView } from '@dxos/schema';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+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, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
-import translations from '../../translations';
-import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+
+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: ViewType;
-  projection: ViewProjection;
+  view: View.View;
+  projection: ProjectionModel;
 };
 
-type StoryProps = Pick<ViewEditorProps, 'readonly'>;
+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<ViewType>();
-  const [projection, setProjection] = useState<ViewProjection>();
+  const [view, setView] = useState<View.View>();
+  const projectionRef = useRef<ProjectionModel>(null);
+
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
+
   useAsyncEffect(async () => {
     if (space) {
-      class TestSchema extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
+      const TestSchema = Schema.Struct({
         name: Schema.String,
         email: Format.Email,
         salary: Format.Currency(),
-      }) {}
-
-      const [schema] = await space.db.schemaRegistry.register([TestSchema]);
-      const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: toJsonSchema(TestSchema) });
-      const projection = new ViewProjection(schema.jsonSchema, view);
-
-      setSchema(schema);
+      }).pipe(
+        Type.object({
+          typename: 'com.example.type.test',
+          version: '0.1.0',
+        }),
+      );
+
+      const AlternateSchema = Schema.Struct({
+        title: Schema.String,
+        description: Schema.String,
+        completed: Schema.Boolean,
+      }).pipe(
+        Type.object({
+          typename: 'com.example.type.alternate',
+          version: '0.1.0',
+        }),
+      );
+
+      const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
+      const view = ViewModel.make({
+        name: 'Test',
+        query: Query.select(Filter.type(TestSchema)),
+        jsonSchema: JsonSchema.toJsonSchema(TestSchema),
+      });
+
+      setSchema(testSchema);
       setView(view);
-      setProjection(projection);
     }
   }, [space]);
 
-  const views = useQuery(space, Filter.type(ViewType));
-  const currentTypename = useMemo(() => view?.query?.typename, [view]);
-  const updateViewTypename = useCallback(
-    (newTypename: string) => {
-      if (!schema) {
+  const updateViewQuery = useCallback(
+    async (newQuery: QueryAST.Query, target?: string) => {
+      if (!schema || !view || !space) {
         return;
       }
-      const matchingViews = views.filter((view) => view.query.typename === currentTypename);
-      for (const view of matchingViews) {
-        view.query.typename = newTypename;
+
+      if (props.mode === 'tag') {
+        const queue = target && DXN.tryParse(target) ? target : undefined;
+        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 = getTypenameFromQuery(query.ast);
+        const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
+        if (!newSchema) {
+          return;
+        }
+
+        const newView = ViewModel.make({
+          query,
+          jsonSchema: newSchema.jsonSchema,
+        });
+        Obj.update(view, (view) => {
+          view.projection = Obj.getSnapshot(newView).projection as Mutable<typeof view.projection>;
+        });
+        setSchema(() => newSchema);
+      } else {
+        Obj.update(view, (view) => {
+          view.query.ast = newQuery as Mutable<typeof newQuery>;
+        });
+        schema.updateTypename(getTypenameFromQuery(newQuery));
       }
-      schema.updateTypename(newTypename);
     },
-    [views, schema],
+    [view, schema],
   );
 
-  const handleDelete = useCallback((property: string) => projection?.deleteFieldProjection(property), [projection]);
+  const handleDelete = useCallback(
+    (property: string) => projectionRef.current?.deleteFieldProjection(property),
+    [projectionRef],
+  );
 
   // 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;
+    if (typeof window !== 'undefined' && schema && view && projectionRef.current) {
+      (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] = {
+        schema,
+        view,
+        projection: projectionRef.current,
+      } satisfies ViewEditorDebugObjects;
     }
-  }, [schema, view, projection]);
+  }, [schema, 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 })),
-    [JSON.stringify(schema), JSON.stringify(view), JSON.stringify(projection)],
+    () => JSON.parse(JSON.stringify({ schema, view, projection: projectionRef.current })),
+    [JSON.stringify(schema), JSON.stringify(view)],
   );
 
-  if (!schema || !view || !projection) {
+  if (!schema || !view) {
     return <div />;
   }
 
   return (
     <TestLayout json={json}>
-      <TestPanel>
-        <ViewEditor
-          schema={schema}
-          view={view}
-          registry={space?.db.schemaRegistry}
-          readonly={props.readonly}
-          onTypenameChanged={updateViewTypename}
-          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>
   );
 };
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-form/ViewEditor',
   render: DefaultStory,
-  decorators: [withClientProvider({ createSpace: true }), withLayout({ fullscreen: true }), withTheme],
-  parameters: { translations },
-};
+  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,
+  },
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
 export const Readonly: Story = {
-  args: { readonly: true },
+  args: {
+    readonly: true,
+  },
+};
+
+export const TagQueryMode: Story = {
+  args: {
+    mode: 'tag',
+  },
 };

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

@@ -3,15 +3,16 @@
 //
 
 import { composeStories } from '@storybook/react';
-import { screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import { cleanup, fireEvent, screen, 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 { 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';
-import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 const { Default } = composeStories(stories);
 
@@ -19,8 +20,8 @@ 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);
+  expect(isInstanceOf(View.View, debugObjects.view)).toBeTruthy();
+  expect(debugObjects.projection).toBeInstanceOf(ProjectionModel);
   return debugObjects;
 };
 
@@ -41,7 +42,7 @@ describe('ViewEditor', () => {
   test('renders view editor', async () => {
     await Default.run();
     await waitForViewEditor();
-    expect(screen.getByText('View')).toBeInTheDocument();
+    expect(screen.getByText('Record type')).toBeInTheDocument();
   });
 
   test('change property name', async () => {
@@ -53,12 +54,12 @@ 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'));
 
-    // Wait for the changes to propagate to both UI and schema
+    // Wait for the changes to propagate to both UI and schema.
     await waitFor(() => {
       expect(screen.getByText('new_property')).toBeInTheDocument();
     });
@@ -66,18 +67,18 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check schema contains new_property
+    // 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');
+    // Check view contains new_property field.
+    const newPropertyField = debugObjects.view.projection.fields.find((field: any) => field.path === 'new_property');
     expect(newPropertyField).toBeDefined();
     expect(newPropertyField!.path).toBe('new_property');
 
-    // Check projection contains 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();
@@ -88,25 +89,25 @@ 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.');
+    // Fill out the property field.
+    const fieldInput = screen.getByPlaceholderText('Property name');
     fireEvent.change(fieldInput, { target: { value: 'added_property' } });
 
-    // Click the format combo box and select the first option
+    // 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
+    // Save the changes.
     fireEvent.click(screen.getByTestId('save-button'));
 
-    // Wait for the changes to propagate
+    // Wait for the changes to propagate.
     await waitFor(() => {
       expect(screen.getByText('added_property')).toBeInTheDocument();
     });
@@ -114,40 +115,43 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check schema contains added_property
+    // 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');
+    // Check view contains added_property field.
+    const addedPropertyField = debugObjects.view.projection.fields.find(
+      (field: any) => field.path === 'added_property',
+    );
     expect(addedPropertyField).toBeDefined();
     expect(addedPropertyField!.path).toBe('added_property');
 
-    // Check projection contains 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 () => {
+  // TODO(mykola): Fix flaky test.
+  test('delete property', { retry: 2 }, async () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Find the delete button for the 'name' property
+    // 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');
+    const deleteButton = propertyRow?.querySelector('[data-testid="field.delete"]');
 
     if (!deleteButton) {
       throw new Error('Delete button not found');
     }
 
-    // Click the delete button
+    // Click the delete button.
     fireEvent.click(deleteButton);
 
-    // Wait for the changes to propagate
+    // Wait for the changes to propagate.
     await waitFor(() => {
       expect(screen.queryByText('name')).not.toBeInTheDocument();
     });
@@ -155,16 +159,16 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check schema no longer contains the name property
+    // 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');
+    // Check view no longer contains the name field.
+    const nameField = debugObjects.view.projection.fields.find((field: any) => field.path === 'name');
     expect(nameField).toBeUndefined();
 
-    // Check projection no longer contains the name property
+    // 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();
@@ -174,11 +178,11 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Click the first hide button
+    // Click the first hide button.
     const hideButtons = screen.getAllByTestId('hide-field-button');
     fireEvent.click(hideButtons[0]);
 
-    // Check that hiddenFields is non-empty
+    // Check that hiddenFields is non-empty.
     await waitFor(() => {
       expect(screen.getByTestId('show-field-button')).toBeInTheDocument();
     });
@@ -186,19 +190,15 @@ describe('ViewEditor', () => {
     // 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
+    // Wait for the data to update and check that hiddenFields is empty.
     await waitFor(() => {
-      expect(debugObjects.view.hiddenFields!.length).toBe(0);
+      expect(debugObjects.view.projection.fields.filter(({ visible }) => visible === false)!.length).toBe(0);
     });
 
-    // Also verify that the field is back in the visible fields list
-    expect(debugObjects.view.fields.length).toBeGreaterThan(0);
+    // Also verify that the field is back in the visible fields list.
+    expect(debugObjects.view.projection.fields.filter(({ visible }) => visible !== false).length).toBeGreaterThan(0);
   });
-});
+}, 30_000);