@dxos/react-ui-table 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

package/src/model/table-model.test.ts

@@ -3,15 +3,16 @@
 //
 
 import { computed } from '@preact/signals-core';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-import { TypedObject } from '@dxos/echo-schema';
-import { updateCounter } from '@dxos/echo-schema/testing';
+import { Filter, Query } from '@dxos/echo';
+import { TypedObject } from '@dxos/echo/internal';
+import { updateCounter } from '@dxos/echo/testing';
+import { createEchoSchema } from '@dxos/echo/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
 import { live } from '@dxos/live-object';
-import { createEchoSchema } from '@dxos/live-object/testing';
-import { createView } from '@dxos/schema';
+import { ProjectionModel, View } from '@dxos/schema';
 
 import { Table } from '../types';
 
@@ -24,7 +25,7 @@ registerSignalsRuntime();
 
 describe('TableModel', () => {
   let updateCount = 0;
-  let model: TableModel;
+  let model: any;
 
   beforeEach(async () => {
     updateCount = 0;
@@ -32,6 +33,11 @@ describe('TableModel', () => {
       onCellUpdate: () => updateCount++,
     });
     await model.open();
+    model.setRows([
+      { id: '1', title: 'Test', completed: false },
+      { id: '2', title: 'Test 2', completed: true },
+      { id: '3', title: 'Test 3', completed: false },
+    ]);
   });
 
   afterEach(async () => {
@@ -106,7 +112,11 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const table = Table.make();
-  const view = createView({ typename: schema.typename, jsonSchema: schema.jsonSchema, presentation: table });
-  return new TableModel({ view, schema: schema.jsonSchema, ...props });
+  const view = View.make({
+    query: Query.select(Filter.type(schema)),
+    jsonSchema: schema.jsonSchema,
+  });
+  const object = Table.make({ view });
+  const projection = new ProjectionModel(schema.jsonSchema, view.projection);
+  return new TableModel({ object, projection, ...props });
 };

package/src/model/table-model.ts

@@ -5,21 +5,11 @@
 import { type ReadonlySignal, computed, effect, signal } from '@preact/signals-core';
 
 import { Resource } from '@dxos/context';
-import { Obj, Ref } from '@dxos/echo';
-import {
-  type FieldSortType,
-  FormatEnum,
-  type JsonProp,
-  type JsonSchemaType,
-  getSchema,
-  getValue,
-  setValue,
-  toEffectSchema,
-} from '@dxos/echo-schema';
+import { Format, Obj, Ref } from '@dxos/echo';
+import { type JsonProp, type JsonSchemaType, getValue, setValue, toEffectSchema } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { ObjectId } from '@dxos/keys';
 import { getSnapshot, isLiveObject } from '@dxos/live-object';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { type Label } from '@dxos/react-ui';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
@@ -28,9 +18,16 @@ import {
   type DxGridPlaneRange,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type DataType, ProjectionModel, type PropertyType, type ValidationError, validateSchema } from '@dxos/schema';
-
-import { Table } from '../types';
+import {
+  type FieldSortType,
+  type ProjectionModel,
+  type PropertyType,
+  type ValidationError,
+  type View,
+  validateSchema,
+} from '@dxos/schema';
+
+import { type Table } from '../types';
 import { touch } from '../util';
 import { extractTagIds } from '../util/tag';
 
@@ -72,9 +69,8 @@ const defaultFeatures: TableFeatures = {
 export type InsertRowResult = 'draft' | 'final';
 
 export type TableModelProps<T extends TableRow = TableRow> = {
-  view: DataType.View;
-  schema: JsonSchemaType;
-  projection?: ProjectionModel;
+  object: Table.Table;
+  projection: ProjectionModel;
   features?: Partial<TableFeatures>;
   sorting?: FieldSortType[];
   initialSelection?: string[];
@@ -90,9 +86,8 @@ export type TableModelProps<T extends TableRow = TableRow> = {
 };
 
 export class TableModel<T extends TableRow = TableRow> extends Resource {
-  private readonly _view: DataType.View;
+  private readonly _object: Table.Table;
   private readonly _projection: ProjectionModel;
-  private _table?: Table.Table;
 
   private readonly _visibleRange = signal<DxGridPlaneRange>({
     start: { row: 0, col: 0 },
@@ -117,8 +112,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   private _columnMeta?: ReadonlySignal<DxGridAxisMeta>;
 
   constructor({
-    view,
-    schema,
+    object,
     projection,
     features = {},
     sorting = [],
@@ -133,8 +127,9 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     onRowAction,
   }: TableModelProps<T>) {
     super();
-    this._view = view;
-    this._projection = projection ?? new ProjectionModel(schema, view.projection);
+    this._object = object;
+    this._projection = projection;
+    this._projection.normalizeView();
 
     // TODO(ZaymonFC): Use our more robust config merging module?
     this._features = { ...defaultFeatures, ...features };
@@ -144,7 +139,11 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       'Single selection is not compatible with editable tables.',
     );
 
-    this._sorting = new TableSorting(this._rows, this._view, this._projection);
+    this._sorting = new TableSorting({
+      rows: this._rows,
+      getView: () => this.view,
+      projection: this._projection,
+    });
 
     if (sorting.length > 0) {
       const [sort] = sorting;
@@ -169,16 +168,17 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   }
 
   public get id(): string {
-    return fullyQualifiedId(this._view);
+    return Obj.getDXN(this._object).toString();
   }
 
-  public get view(): DataType.View {
-    return this._view;
+  public get view(): View.View {
+    const view = this._object.view.target;
+    invariant(view, 'Table model not initialized');
+    return view;
   }
 
   public get table(): Table.Table {
-    invariant(this._table, 'Model not initialized');
-    return this._table;
+    return this._object;
   }
 
   public get projection(): ProjectionModel {
@@ -238,10 +238,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   //
 
   protected override async _open(): Promise<void> {
-    const presentation = this._view.presentation.target ?? (await this._view.presentation.load());
-    invariant(Obj.instanceOf(Table.Table, presentation));
-    this._table = presentation;
-
+    await this._object.view.load();
     this.initializeColumnMeta();
     this.initializeEffects();
     await this._selection.open(this._ctx);
@@ -464,7 +461,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
     const { props } = this._projection.getFieldProjection(field.id);
     switch (props.format) {
-      case FormatEnum.Ref: {
+      case Format.TypeFormat.Ref: {
         if (!field.referencePath) {
           return ''; // TODO(burdon): Show error.
         }
@@ -473,7 +470,11 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       }
 
       default: {
-        return formatForEditing({ type: props.type, format: props.format, value });
+        return formatForEditing({
+          type: props.type,
+          format: props.format,
+          value,
+        });
       }
     }
   };
@@ -517,7 +518,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       const snapshot = getSnapshot(currentRow);
       setValue(snapshot, field.path, transformedValue);
 
-      const schema = getSchema(currentRow);
+      const schema = Obj.getSchema(currentRow);
       invariant(schema);
 
       const validationResult = validateSchema(schema, snapshot);
@@ -543,7 +544,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     const transformedValue = editorTextToCellValue(props, value);
 
     // Special handling for Ref format to preserve existing behavior
-    if (props.format === FormatEnum.Ref && !isLiveObject(value)) {
+    if (props.format === Format.TypeFormat.Ref && !isLiveObject(value)) {
       return;
     }
 
@@ -658,7 +659,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
 const editorTextToCellValue = (props: PropertyType, value: any): any => {
   switch (props.format) {
-    case FormatEnum.Ref: {
+    case Format.TypeFormat.Ref: {
       if (isLiveObject(value)) {
         return Ref.make(value);
       } else {
@@ -666,7 +667,7 @@ const editorTextToCellValue = (props: PropertyType, value: any): any => {
       }
     }
 
-    case FormatEnum.SingleSelect: {
+    case Format.TypeFormat.SingleSelect: {
       const ids = extractTagIds(value);
       if (ids && ids.length > 0) {
         return ids[0];
@@ -675,7 +676,7 @@ const editorTextToCellValue = (props: PropertyType, value: any): any => {
       }
     }
 
-    case FormatEnum.MultiSelect: {
+    case Format.TypeFormat.MultiSelect: {
       const ids = extractTagIds(value);
       return ids || value;
     }

package/src/model/table-presentation.test.ts

@@ -2,13 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { TypedObject } from '@dxos/echo-schema';
+import { Filter, Query } from '@dxos/echo';
+import { TypedObject } from '@dxos/echo/internal';
+import { createEchoSchema } from '@dxos/echo/testing';
 import { live } from '@dxos/live-object';
-import { createEchoSchema } from '@dxos/live-object/testing';
-import { createView } from '@dxos/schema';
+import { ProjectionModel, View } from '@dxos/schema';
 
 import { Table } from '../types';
 
@@ -26,8 +27,8 @@ describe('TablePresentation', () => {
       updateCount = 0;
       ({ data } = live({
         data: [
-          { col1: 'A', col2: 1, col3: true },
-          { col1: 'B', col2: 2, col3: false },
+          { title: 'A', count: 1 },
+          { title: 'B', count: 2 },
         ],
       }));
 
@@ -44,8 +45,8 @@ describe('TablePresentation', () => {
       presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
 
       // Trigger a row update.
-      data[0].col1 = 'New Value';
-      expect(updateCount).toBe(1);
+      data[0].title = 'New Value';
+      expect(updateCount).toBe(2);
 
       // Verify the new value through getCells.
       const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 0, col: 0 } }, 'grid');
@@ -56,15 +57,14 @@ describe('TablePresentation', () => {
       // Set up visible range to include our test data.
       presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
 
-      data.push({ col1: 'C', col2: 3, col3: true });
-      expect(updateCount).toBe(1);
+      data.push({ title: 'C', count: 3 });
+      expect(updateCount).toBe(2);
 
       const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
 
       // Verify the new row's data.
       expect(cells['0,2']?.value).toBe('C');
       expect(cells['1,2']?.value).toBe('3');
-      expect(cells['2,2']?.value).toBe('true');
     });
 
     it('should handle combined operations reactively', () => {
@@ -72,32 +72,34 @@ describe('TablePresentation', () => {
       presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
 
       // Multiple operations.
-      data[0].col1 = 'Updated A';
-      data.push({ col1: 'C', col2: 3, col3: true });
+      data[0].title = 'Updated A';
+      data.push({ title: 'C', count: 3, completed: true });
       data.splice(1, 1);
 
       // We expect one update per operation affecting visible rows.
-      expect(updateCount).toBe(3);
+      expect(updateCount).toBe(4);
 
       const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
 
       // Verify final state.
       expect(cells['0,0']?.value).toBe('Updated A');
       expect(cells['0,1']?.value).toBe('C');
-      expect(cells['1,1']?.value).toBe('3');
-      expect(cells['2,1']?.value).toBe('true');
     });
   });
 });
 
 class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
   title: Schema.String,
-  completed: Schema.Boolean,
+  count: Schema.Number,
 }) {}
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const table = Table.make();
-  const view = createView({ typename: schema.typename, jsonSchema: schema.jsonSchema, presentation: table });
-  return new TableModel({ view, schema: schema.jsonSchema, ...props });
+  const view = View.make({
+    query: Query.select(Filter.type(schema)),
+    jsonSchema: schema.jsonSchema,
+  });
+  const object = Table.make({ view });
+  const projection = new ProjectionModel(schema.jsonSchema, view.projection);
+  return new TableModel({ object, projection, ...props });
 };

package/src/model/table-presentation.ts

@@ -3,10 +3,10 @@
 //
 
 import { signal } from '@preact/signals-core';
-import { isNotNullable } from 'effect/Predicate';
+import * as Predicate from 'effect/Predicate';
 
 import { Obj } from '@dxos/echo';
-import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
+import { Format, TypeEnum, getValue } from '@dxos/echo/internal';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridCellValue,
@@ -120,12 +120,12 @@ export class TablePresentation<T extends TableRow = TableRow> {
         }
 
         switch (props.format) {
-          case FormatEnum.Boolean:
-          case FormatEnum.SingleSelect:
-          case FormatEnum.MultiSelect: {
+          case Format.TypeFormat.Boolean:
+          case Format.TypeFormat.SingleSelect:
+          case Format.TypeFormat.MultiSelect: {
             return '';
           }
-          case FormatEnum.Ref: {
+          case Format.TypeFormat.Ref: {
             if (!field.referencePath) {
               return ''; // TODO(burdon): Show error.
             }
@@ -190,7 +190,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
         const tags = targetArray
           .map(getLabel)
-          .filter(isNotNullable)
+          .filter(Predicate.isNotNullable)
           .map((title) => {
             return `<span class="dx-tag" data-hue="neutral">${title}</span>`;
           })
@@ -201,16 +201,16 @@ export class TablePresentation<T extends TableRow = TableRow> {
     }
 
     // References.
-    if (props.format === FormatEnum.Ref && props.referenceSchema) {
+    if (props.format === Format.TypeFormat.Ref && props.referenceSchema) {
       const targetObj = getValue(obj, field.path)?.target;
       if (targetObj) {
         const dxn = Obj.getDXN(targetObj)?.toString();
-        cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+        cell.accessoryHtml = `<div role="none" class="absolute inline-end-0 inset-block-0 p-[--dx-grid-cell-content-padding-block]"><dx-anchor refId=${dxn} class="dx-button is-6 aspect-square min-bs-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
       }
     }
 
     // Booleans.
-    if (props.format === FormatEnum.Boolean) {
+    if (props.format === Format.TypeFormat.Boolean) {
       const value = getValue(obj, field.path);
       cell.accessoryHtml = tableControls.switch.render({
         colIndex,
@@ -221,7 +221,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     }
 
     // Single-Selects.
-    if (props.format === FormatEnum.SingleSelect) {
+    if (props.format === Format.TypeFormat.SingleSelect) {
       const value = getValue(obj, field.path);
       const options = this.model.projection.getFieldProjection(field.id).props.options;
       if (options) {
@@ -233,7 +233,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     }
 
     // Multi-Selects.
-    if (props.format === FormatEnum.MultiSelect) {
+    if (props.format === Format.TypeFormat.MultiSelect) {
       const values = getValue(obj, field.path) as string[] | undefined;
       const options = this.model.projection.getFieldProjection(field.id).props.options;
       if (options && values && values.length > 0) {
@@ -468,7 +468,6 @@ export const cellClassesForRowSelection = (selected: boolean, selectionMode: Sel
 
   switch (selectionMode) {
     case 'single':
-      // TODO(ZaymonFC): @thure, do we need a grid version of 'currentRelated'?
       return ['!bg-currentRelated dx-grid__cell--no-focus-unfurl hover:bg-hoverSurface !cursor-pointer'];
     case 'multiple':
       return ['!bg-gridCellSelected'];

package/src/model/table-sorting.ts

@@ -5,12 +5,21 @@
 import { type ReadonlySignal, type Signal, computed, signal } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 
-import { type FieldSortType, FormatEnum, type SortDirectionType, TypeEnum, getValue } from '@dxos/echo-schema';
+import { Format, TypeEnum, getValue } from '@dxos/echo/internal';
 import { formatForDisplay } from '@dxos/react-ui-form';
-import type { DataType, FieldType, ProjectionModel, PropertyType } from '@dxos/schema';
+import {
+  type FieldSortType,
+  type FieldType,
+  type ProjectionModel,
+  type PropertyType,
+  type SortDirectionType,
+  type View,
+} from '@dxos/schema';
 
 import { type TableRow } from './table-model';
 
+// TODO(wittjosiah): Remove. Use ordering in queries instead.
+
 /**
  * Represents the local sort state.
  * - undefined: No local sort set, fallback to view sort.
@@ -43,19 +52,27 @@ type LocalSort = { type: 'cleared' } | { type: 'active'; sort: FieldSortType } |
 export class TableSorting<T extends TableRow> {
   private readonly _displayToDataIndex = new Map<number, number>();
   private readonly _rows: Signal<T[]>;
+  private readonly _getView: () => View.View;
+  private readonly _projection: ProjectionModel;
   private readonly _localSort = signal<LocalSort>(undefined);
   private readonly _isDirty: ReadonlySignal<boolean>;
   public readonly sortedRows: ReadonlySignal<T[]>;
 
-  constructor(
-    rows: Signal<T[]>,
-    private readonly _view: DataType.View,
-    private readonly _projection: ProjectionModel,
-  ) {
+  constructor({
+    rows,
+    projection,
+    getView,
+  }: {
+    rows: Signal<T[]>;
+    getView: () => View.View;
+    projection: ProjectionModel;
+  }) {
     this._rows = rows;
+    this._getView = getView;
+    this._projection = projection;
     this._isDirty = computed(() => {
       const local = this._localSort.value;
-      const viewSort = this._view.query.sort?.[0];
+      const viewSort = this._getView().sort?.[0];
       if (local?.type === 'cleared') {
         return viewSort !== undefined;
       }
@@ -83,7 +100,7 @@ export class TableSorting<T extends TableRow> {
       return local.sort;
     }
 
-    return this._view.query.sort?.[0];
+    return this._getView().sort?.[0];
   }
 
   /**
@@ -128,10 +145,11 @@ export class TableSorting<T extends TableRow> {
 
   public save(): void {
     if (this._localSort.value !== undefined) {
+      const view = this._getView();
       if (this._localSort.value.type === 'active') {
-        this._view.query.sort = [this._localSort.value.sort];
+        view.sort = [this._localSort.value.sort];
       } else {
-        this._view.query.sort = [];
+        view.sort = [];
       }
       this._localSort.value = undefined;
     }
@@ -193,7 +211,7 @@ export class TableSorting<T extends TableRow> {
      * For single select fields, the sort value is determined by the index of the option in the
      * options array. This ensures sort order matches the configured option order.
      */
-    if (format === FormatEnum.SingleSelect) {
+    if (format === Format.TypeFormat.SingleSelect) {
       const options = props.options;
       if (!options) {
         return undefined;
@@ -206,7 +224,7 @@ export class TableSorting<T extends TableRow> {
     // TODO(ZaymonFC): Should we format this returned value for display based on the referenced prop format?
     //   Right now we're going to be sorting based on the raw values.
     //   Maybe we need to recurse this function with the referenced prop format and field?
-    if (format === FormatEnum.Ref && field.referencePath) {
+    if (format === Format.TypeFormat.Ref && field.referencePath) {
       const refValue = getValue(value.target, field.referencePath);
       return refValue;
     }

package/src/playwright/TableManager.ts

@@ -53,12 +53,12 @@ export class TableManager {
     await this.page.getByTestId(TABLE_SELECTORS.columnSort[direction]).click();
   }
 
-  public async addColumn({ label, format }: { label: string; format: 'number' }): Promise<void> {
+  public async addColumn({ label, format }: { label: string; format: string }): Promise<void> {
     await this.page.getByTestId(TABLE_SELECTORS.newColumnButton).click();
     await this.page.getByRole('combobox').click();
-    await this.page.getByLabel(`format ${format}`).click();
+    await this.page.getByLabel(format).click();
     await this.page.getByPlaceholder('Property label.').click();
     await this.page.getByPlaceholder('Property label.').fill(label);
-    await this.page.getByRole('button', { name: 'button save' }).click();
+    await this.page.getByRole('button', { name: 'Save' }).click();
   }
 }

package/src/playwright/smoke.spec.ts

@@ -130,7 +130,7 @@ test.describe('Table', () => {
     await table.grid.ready();
     const newColumnLabel = 'TEST LABEL';
 
-    await table.addColumn({ label: newColumnLabel, format: 'number' });
+    await table.addColumn({ label: newColumnLabel, format: 'Number' });
 
     await expect(page.getByRole('gridcell', { name: newColumnLabel })).toBeVisible();
     await page.close();
@@ -159,7 +159,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('extant relations work as expected', async ({ browser, browserName }) => {
+  // TODO(wittjosiah): Remove? Conflicts with story play function which is run as a unit test anyways.
+  test.skip('extant relations work as expected', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
     test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: relationsStoryUrl });
@@ -187,7 +188,7 @@ test.describe('Table', () => {
     // Click on the combobox to open options
     await page.getByRole('combobox').click();
     await page.pause();
-    await page.getByPlaceholder('Search...').focus();
+    await page.getByPlaceholder('Search…').focus();
 
     // Type the first few letters of an org name.
     const orgName =
@@ -213,7 +214,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('new relations work as expected', async ({ browser, browserName }) => {
+  // TODO(wittjosiah): Remove? Conflicts with story play function which is run as a unit test anyways.
+  test.skip('new relations work as expected', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
     test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: relationsStoryUrl });
@@ -240,7 +242,7 @@ test.describe('Table', () => {
 
     // Click on the combobox to open options
     await page.getByRole('combobox').click();
-    await page.getByPlaceholder('Search...').focus();
+    await page.getByPlaceholder('Search…').focus();
 
     // Type the first few letters of an org name.
     const orgName = 'Sally';
@@ -254,7 +256,7 @@ test.describe('Table', () => {
     await page.pause();
 
     // Click the save button in the popover
-    await page.getByTestId('save-button').click();
+    await page.getByTestId('create-referenced-object-form').getByTestId('save-button').click();
 
     // Assert that the cell element has the org name
     await expect(targetCell).toHaveText(orgName);