@dxos/react-ui-table 0.8.4-main.ead640a → 0.8.4-main.effb148878

package/src/components/Table/Relations.stories.tsx

@@ -2,43 +2,43 @@
 // Copyright 2025 DXOS.org
 //
 
+import { RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import type * as Schema from 'effect/Schema';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { expect, userEvent, within } from 'storybook/test';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
-import { Obj, Type } from '@dxos/echo';
-import { type JsonSchemaType } from '@dxos/echo/internal';
+import { Obj, Type, View } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
 import { type DxGrid } from '@dxos/lit-grid';
-import '@dxos/lit-ui/dx-tag-picker.pcss';
-import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { random } from '@dxos/random';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { translations as formTranslations } from '@dxos/react-ui-form';
-import { DataType } from '@dxos/schema';
+import { translations as formTranslations } from '@dxos/react-ui-form/translations';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { ViewModel } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
+import { withRegistry } from '@dxos/storybook-utils';
+import { Organization, Person } from '@dxos/types';
+import '@dxos/lit-ui/dx-tag-picker.pcss';
 
-import { useTableModel } from '../../hooks';
+import { translations } from '#translations';
+
+import { useProjectionModel, useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
-import { translations } from '../../translations';
 import { Table } from '../../types';
-
 import { Table as TableComponent } from './Table';
 
-faker.seed(1);
-const generator: ValueGenerator = faker as any;
+random.seed(1);
+const generator: ValueGenerator = random as any;
 
 // TODO(burdon): Many-to-many relations.
 // TODO(burdon): Mutable and immutable views.
 // TODO(burdon): Reconcile schemas types and utils (see API PR).
 // TODO(burdon): Base type for T (with id); see ECHO API PR?
-const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
-  const client = useClient();
-  const { space } = useClientProvider();
-  const [view, setView] = useState<DataType.View>();
-  const [jsonSchema, setJsonSchema] = useState<JsonSchemaType>();
+const useTestModel = <S extends Type.AnyObj>(schema: S, count: number) => {
+  const registry = useContext(RegistryContext);
+  const { space } = useClientStory();
+  const [object, setObject] = useState<Table.Table>();
 
   const features = useMemo<TableFeatures>(
     () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
@@ -50,18 +50,14 @@ const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
       return;
     }
 
-    const {
-      jsonSchema,
-      schema: effectSchema,
-      view,
-    } = await Table.makeView({ client, space, typename: Type.getTypename(schema) });
-    setJsonSchema(jsonSchema);
-    setView(view);
-    space.db.add(view);
-    await space.db.schemaRegistry.register([effectSchema]);
-  }, [client, space, schema]);
+    const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename: Type.getTypename(schema) });
+    const object = Table.make({ view, jsonSchema });
+    setObject(object);
+    space.db.add(object);
+  }, [space, schema]);
 
-  const model = useTableModel<TableRow>({ view, schema: jsonSchema, rows: [], features });
+  const projection = useProjectionModel(schema, object, registry);
+  const model = useTableModel<TableRow>({ object, projection, db: space?.db, features });
 
   useEffect(() => {
     if (!model || !space) {
@@ -70,7 +66,9 @@ const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
 
     const objectGenerator = createAsyncGenerator(generator, schema, { db: space?.db, force: true });
     void objectGenerator.createObjects(count).then((objects) => {
-      model.setRows(objects);
+      // TODO(wittjosiah): Remove cast. Type.InstanceType is now strict (no index signature),
+      //  so it isn't assignable to TableRow (Record<JsonProp, any>); reconcile the row model type.
+      model.setRows(objects as unknown as TableRow[]);
     });
   }, [model, space]);
 
@@ -79,45 +77,44 @@ const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
       return;
     }
 
-    return new TablePresentation(model);
-  }, [model]);
+    return new TablePresentation(registry, model);
+  }, [registry, model]);
 
   return { model, presentation };
 };
 
 const DefaultStory = () => {
-  const client = useClient();
-  const { model: orgModel, presentation: orgPresentation } = useTestModel(DataType.Organization, 50);
-  const { model: contactModel, presentation: contactPresentation } = useTestModel(DataType.Person, 50);
-  const { space } = useClientProvider();
+  const { model: orgModel, presentation: orgPresentation } = useTestModel(Organization.Organization, 50);
+  const { model: contactModel, presentation: contactPresentation } = useTestModel(Person.Person, 50);
+  const { space } = useClientStory();
 
   const handleCreate = useCallback(
-    (schema: Schema.Schema.AnyNoContext, values: any) => {
-      return client.spaces.default.db.add(Obj.make(schema, values));
+    (schema: Type.AnyEntity, values: any) => {
+      invariant(Type.isObject(schema));
+      invariant(space);
+      return space.db.add(Obj.make(schema, values));
     },
     [space],
   );
 
   return (
-    <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
+    <div className='dx-expander grid grid-cols-2 divide-x divide-separator'>
       <TableComponent.Root>
-        <TableComponent.Main
+        <TableComponent.Content
           model={orgModel}
-          schema={DataType.Organization}
+          schema={Organization.Organization}
           presentation={orgPresentation}
           onCreate={handleCreate}
-          client={client}
           ignoreAttention
           testId='relations-0'
         />
       </TableComponent.Root>
       <TableComponent.Root>
-        <TableComponent.Main
+        <TableComponent.Content
           model={contactModel}
-          schema={DataType.Person}
+          schema={Person.Person}
           presentation={contactPresentation}
           onCreate={handleCreate}
-          client={client}
           ignoreAttention
           testId='relations-1'
         />
@@ -130,9 +127,12 @@ const meta = {
   title: 'ui/react-ui-table/Relations',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
+    withRegistry,
+    // TODO(thure): Shouldn't `layout: 'fullscreen'` below make this unnecessary?
+    withLayout({ classNames: 'fixed inset-0' }),
     withClientProvider({
-      types: [DataType.View, DataType.Organization, DataType.Person, Table.Table],
+      types: [View.View, Organization.Organization, Person.Person, Table.Table],
       createIdentity: true,
       createSpace: true,
     }),
@@ -149,9 +149,19 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  // TODO(wittjosiah): This test is flaky, especially in CI.
-  //   Most typical failure is `targetCell` returns `null`.
-  _play: async ({ canvasElement }: any) => {
+  // The play function exercises a deep timing race in dx-grid + React render
+  // pipeline (cell focus → keydown → `dispatchEditRequest` → `setEditing` →
+  // `FormCellEditor` `useEffect` → `Popover` mount). On chromium browser
+  // tests the combobox sometimes fails to render in time; local pass rate
+  // ~25%, which makes pure CI re-run lottery a poor fit. Excluding from
+  // automated test runs (the story still renders in Storybook for visual
+  // review and the production code path is covered by
+  // `playwright/smoke.spec.ts`). Re-enable once the underlying race is
+  // fixed — likely needs `dispatchEditRequest` to be synchronous from
+  // keydown and `FormCellEditor` to render the popover off `contextEditing`
+  // directly instead of mirroring it through local state.
+  tags: ['!test'],
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const body = within(document.body);
 
@@ -162,22 +172,42 @@ export const Default: Story = {
     // Focus on the second table (Person/contacts table)
     await expect(secondGrid).toBeVisible();
 
+    // Wait for both grids' data generators to finish populating before
+    // interacting. `findByTestId` returns as soon as the cell DOM exists,
+    // but dx-grid's internal cell registry (used by `cellReadonly` and the
+    // edit-request dispatcher) is filled in lazily. If `keydown` lands
+    // before the registry has the row, `dispatchEditRequest` short-circuits
+    // and the combobox never opens — that's the "Unable to find combobox"
+    // flake. Wait for the first row of each grid to render non-empty
+    // content (a reliable proxy for "registry populated") BEFORE scrolling
+    // — once we scroll the second grid to column 4, dx-grid virtualizes
+    // columns 0-3 out of the DOM, so `grid.0.0` becomes unreachable.
+    await waitFor(
+      async () => {
+        const firstOrgCell = within(firstGrid).getByTestId('grid.0.0');
+        const orgText = (firstOrgCell.querySelector('.dx-grid__cell__content') as HTMLElement | null)?.textContent;
+        await expect(orgText).toBeTruthy();
+        const firstContactCell = within(secondGrid).getByTestId('grid.0.0');
+        const contactText = (firstContactCell.querySelector('.dx-grid__cell__content') as HTMLElement | null)
+          ?.textContent;
+        await expect(contactText).toBeTruthy();
+      },
+      { timeout: 10_000 },
+    );
+
     // Scroll to the relations column (column 4) - this mimics the scrollToColumn call
     (secondGrid.closest('dx-grid') as DxGrid).scrollToColumn(4);
 
-    // Wait for scroll to complete
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
-    // Find and click the target cell (first row, relations column)
-    const targetCell = secondGrid.querySelector('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="4"]');
+    // Find the target cell (first row, relations column).
+    const targetCell = await within(secondGrid).findByTestId('grid.4.0', undefined, { timeout: 10_000 });
     await expect(targetCell).toBeVisible();
 
-    // Click to focus the cell
+    // Click to focus the cell.
     await userEvent.click(targetCell as HTMLElement);
     await expect(targetCell).toHaveFocus();
     await userEvent.keyboard('{Enter}');
 
-    // Look for the combobox that should appear in edit mode
+    // Look for the combobox that should appear in edit mode.
     const combobox = await body.findByRole('combobox', undefined, { timeout: 5000 });
     await userEvent.click(combobox);
 
@@ -185,11 +215,9 @@ export const Default: Story = {
     await userEvent.click(searchField);
 
     // Get the first organization name from the first table to search for
-    const orgCell = firstGrid.querySelector(
-      '[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="0"] .dx-grid__cell__content',
-    ) as HTMLElement;
+    const orgCell = await within(firstGrid).findByTestId('grid.0.0', undefined, { timeout: 10_000 });
 
-    const orgName = orgCell.textContent;
+    const orgName = (orgCell.querySelector('.dx-grid__cell__content') as HTMLElement).textContent;
     // Type the first 4 characters to search
     await userEvent.type(searchField, orgName.substring(0, 4));
 
@@ -204,14 +232,19 @@ export const Default: Story = {
     const saveButton = await body.findByTestId('save-button');
     await userEvent.click(saveButton);
 
-    // Verify the relation was set (cell should now contain the org name)
-    await expect(targetCell).toHaveTextContent(orgName.substring(0, 4));
+    // Verify the relation was set (cell should now contain the org name).
+    // Wait for the grid (Lit web component) to repaint after the reactive data update.
+    await waitFor(
+      async () => {
+        const updatedCell = within(secondGrid).getByTestId('grid.4.0');
+        await expect(updatedCell).toHaveTextContent(orgName.substring(0, 4));
+      },
+      { timeout: 5000 },
+    );
 
     // Test object creation (new relations) - equivalent to "new relations work as expected" test
     // Find a different cell to test object creation (second row, relations column)
-    const newTargetCell = secondGrid.querySelector(
-      '[data-dx-grid-plane="grid"] [aria-rowindex="1"][aria-colindex="4"]',
-    );
+    const newTargetCell = await within(secondGrid).findByTestId('grid.4.1', undefined, { timeout: 10_000 });
     await expect(newTargetCell).toBeTruthy();
 
     // Click to focus the cell
@@ -226,23 +259,24 @@ export const Default: Story = {
     const newSearchField = await body.findByPlaceholderText('Search…');
     await userEvent.click(newSearchField);
 
-    // Type a new object name (this will create a new object)
+    // Type a new object name (this will create a new object).
     const newOrgName = 'Salieri LLC';
     await userEvent.type(newSearchField, newOrgName);
 
-    // Look for an option to select (should be the create new option)
-    const newOption = await body.findAllByRole('option');
-    await expect(newOption[0]).toBeVisible();
-
-    // Press Enter to select/create
-    await userEvent.keyboard('{Enter}');
+    // Click the create option directly to open the create form.
+    const createOptionLabel = await body.findByText(/Create new object/, undefined, { timeout: 2000 });
+    await userEvent.click(createOptionLabel.closest('[role="option"]') as HTMLElement);
 
-    // Look for and click save button
-    const createReferencedObjectForm = await body.findByTestId('create-referenced-object-form');
+    // Look for and click save button.
+    const createReferencedObjectForm = await body.findByTestId('create-referenced-object-form', undefined, {
+      timeout: 2000,
+    });
     const saveObjectButton = await within(createReferencedObjectForm).findByTestId('save-button');
+    await expect(saveObjectButton).not.toBeDisabled();
     await userEvent.click(saveObjectButton);
 
-    // Verify the new object was created and relation was set
-    await expect(newTargetCell).toHaveTextContent(newOrgName);
+    // Verify the relation was set by checking for the accessory link anchor in the cell.
+    const updatedNewCell = await within(secondGrid).findByTestId('grid.4.1', undefined, { timeout: 5000 });
+    await expect(updatedNewCell.querySelector('dx-anchor')).toBeTruthy();
   },
-} as any;
+};

package/src/components/Table/RowActionsMenu.tsx

@@ -2,19 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
 import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
+import { translationKey } from '#translations';
+
 import { type ModalController, type TableModel } from '../../model';
-import { translationKey } from '../../translations';
 
 type RowActionsMenuProps = { model: TableModel; modals: ModalController };
 
 export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
   const { t } = useTranslation(translationKey);
-  const hasSelection = model.selection.hasSelection.value;
-  const state = modals.state.value;
+  const hasSelection = model.selection.hasSelection;
+  const state = useAtomValue(modals.state);
   if (state?.type !== 'row') {
     return null;
   }
@@ -23,24 +25,32 @@ export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
       <DropdownMenu.VirtualTrigger virtualRef={modals.trigger} />
       <DropdownMenu.Content>
         <DropdownMenu.Viewport>
+          {/* Custom actions */}
+          {model.rowActions?.length > 0 && (
+            <>
+              <DropdownMenu.Group>
+                {model.rowActions?.map((action) => (
+                  <DropdownMenu.Item
+                    key={action.id}
+                    data-testid={`row-action-${action.id}`}
+                    onClick={() => {
+                      modals.close();
+                      model.handleRowAction(action.id, state.rowIndex);
+                    }}
+                  >
+                    {toLocalizedString(action.label, t)}
+                  </DropdownMenu.Item>
+                ))}
+              </DropdownMenu.Group>
+              <DropdownMenu.Separator />
+            </>
+          )}
+          {/* Default actions */}
           {model.features.dataEditable !== false && (
             <DropdownMenu.Item data-testid='row-menu-delete' onClick={() => model.deleteRow(state.rowIndex)}>
-              {t(hasSelection ? 'bulk delete row label' : 'delete row label')}
+              {t(hasSelection ? 'bulk-delete-row.label' : 'delete-row.label')}
             </DropdownMenu.Item>
           )}
-          {/* Custom actions */}
-          {model.rowActions?.map((action) => (
-            <DropdownMenu.Item
-              key={action.id}
-              data-testid={`row-action-${action.id}`}
-              onClick={() => {
-                modals.close();
-                model.handleRowAction(action.id, state.rowIndex);
-              }}
-            >
-              {toLocalizedString(action.label, t)}
-            </DropdownMenu.Item>
-          ))}
         </DropdownMenu.Viewport>
         <DropdownMenu.Arrow />
       </DropdownMenu.Content>