@dxos/react-ui-form 0.8.4-main.dedc0f3 → 0.8.4-main.ead640a

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

@@ -2,26 +2,31 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Filter, Obj, Query, Type } from '@dxos/echo';
-import { type EchoSchema, Format, TypedObject, toJsonSchema } from '@dxos/echo-schema';
-import { useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
+import { DXN, Filter, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
+import { type EchoSchema, Format } from '@dxos/echo/internal';
+import { useQuery } from '@dxos/react-client/echo';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { QueryParser, createFilter } from '@dxos/react-ui-components';
-import { type DataType, ProjectionModel, createView, typenameFromQuery } from '@dxos/schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { DataType, type ProjectionModel, createView, getTypenameFromQuery } from '@dxos/schema';
 
 import { translations } from '../../translations';
 import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
+const types = [
+  // TODO(burdon): Get label from annotation.
+  { value: Type.getTypename(DataType.Organization), label: 'Organization' },
+  { value: Type.getTypename(DataType.Person), label: 'Person' },
+  { value: Type.getTypename(DataType.Project), label: 'Project' },
+  { value: Type.getTypename(DataType.Employer), label: 'Employer' },
+];
+
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
   schema: EchoSchema;
@@ -29,80 +34,109 @@ export type ViewEditorDebugObjects = {
   projection: ProjectionModel;
 };
 
-type StoryProps = Pick<ViewEditorProps, 'readonly' | 'kind'>;
+type StoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
 const DefaultStory = (props: StoryProps) => {
-  const space = useSpace();
+  const { space } = useClientProvider();
   const [schema, setSchema] = useState<EchoSchema>();
   const [view, setView] = useState<DataType.View>();
-  const [projection, setProjection] = useState<ProjectionModel>();
+  const projectionRef = useRef<ProjectionModel>(null);
+
+  const tags = useQuery(space, 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]);
+      }).pipe(
+        Type.Obj({
+          typename: 'example.com/type/Test',
+          version: '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 = createView({
         name: 'Test',
-        typename: schema.typename,
-        jsonSchema: toJsonSchema(TestSchema),
+        query: Query.select(Filter.typename(TestSchema.typename)),
+        jsonSchema: Type.toJsonSchema(TestSchema),
         presentation: Obj.make(Type.Expando, {}),
       });
-      const projection = new ProjectionModel(schema.jsonSchema, view.projection);
 
-      setSchema(schema);
+      setSchema(testSchema);
       setView(view);
-      setProjection(projection);
     }
   }, [space]);
 
   const updateViewQuery = useCallback(
-    (newQueryString: string) => {
-      if (!schema || !view) {
+    async (newQuery: QueryAST.Query, target?: string) => {
+      if (!schema || !view || !space) {
         return;
       }
 
-      if (props.kind === 'advanced') {
-        try {
-          const parser = new QueryParser(newQueryString);
-          // TODO(wittjosiah): When this fails it should show validation errors in the UI.
-          const newQuery = Query.select(createFilter(parser.parse()));
-          view.query = newQuery.ast;
-
-          const typename = typenameFromQuery(newQuery.ast);
-          if (typename) {
-            schema.updateTypename(typename);
-          }
-        } catch {}
+      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;
+
+        const typename = getTypenameFromQuery(query.ast);
+        const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
+        if (!newSchema) {
+          return;
+        }
+
+        const newView = createView({
+          query,
+          jsonSchema: newSchema.jsonSchema,
+          presentation: Obj.make(Type.Expando, {}),
+        });
+        view.projection = Obj.getSnapshot(newView).projection;
+        setSchema(() => newSchema);
       } else {
-        const typename = newQueryString;
-        const newQuery = Query.select(Filter.typename(typename));
-        view.query = newQuery.ast;
-        schema.updateTypename(typename);
+        console.log('updateViewQuery', { newQuery });
+        view.query.ast = newQuery;
+        schema.updateTypename(getTypenameFromQuery(newQuery));
       }
     },
     [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 />;
   }
 
@@ -110,11 +144,14 @@ const DefaultStory = (props: StoryProps) => {
     <TestLayout json={json}>
       <TestPanel>
         <ViewEditor
+          ref={projectionRef}
           schema={schema}
           view={view}
           registry={space?.db.schemaRegistry}
-          kind={props.kind}
+          mode={props.mode}
           readonly={props.readonly}
+          types={types}
+          tags={tags}
           onQueryChanged={updateViewQuery}
           onDelete={handleDelete}
         />
@@ -129,13 +166,19 @@ const meta = {
   decorators: [
     withClientProvider({
       createSpace: true,
-    }),
-    withLayout({
-      fullscreen: 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,
   ],
-  parameters: { translations },
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -145,9 +188,13 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {};
 
 export const Readonly: Story = {
-  args: { readonly: true },
+  args: {
+    readonly: true,
+  },
 };
 
-export const Advanced: Story = {
-  args: { kind: 'advanced' },
+export const QueryMode: Story = {
+  args: {
+    mode: 'query',
+  },
 };

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

@@ -6,7 +6,7 @@ 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 { EchoSchema, isInstanceOf } from '@dxos/echo/internal';
 import { DataType, ProjectionModel } from '@dxos/schema';
 
 import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
@@ -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();
 
@@ -200,4 +201,4 @@ describe('ViewEditor', () => {
     // 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);