@wix/patterns 1.498.0 → 1.500.0

package/src/state/CustomColumnsEntityPageState.ts

@@ -1,4 +1,5 @@
-import { TransitionState } from '@wix/bex-core';
+import { TransitionState, withoutDefaults } from '@wix/bex-core';
+import { cairoCustomizeColumnsInSidePanel } from '@wix/bex-core/bi';
 import { reaction } from 'mobx';
 import { resolveFieldPresentation } from '../utils/resolveFieldPresentation';
 import { Column } from '../model';
@@ -70,6 +71,7 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
   readonly _isFieldsEditable: boolean;
   readonly _manageFieldsSource?: ManageFieldsSource;
   readonly _dragAndDrop?: CustomColumnsDragAndDropState<unknown, any>;
+  private _reorderReported = false;
 
   constructor(params: CustomColumnsEntityPageStateParams) {
     super({
@@ -178,10 +180,33 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
     return this._dragAndDrop;
   }
 
-  customizeColumnsInSidePanelBi(_params: {
+  customizeColumnsInSidePanelBi({
+    actionName,
+    key,
+  }: {
     actionName: CustomColumnsActionName;
+    key?: string;
   }) {
-    // BI reporting — to be wired
+    if (actionName !== 'visibility') {
+      if (this._reorderReported) {
+        return;
+      }
+      this._reorderReported = true;
+    }
+    const schema =
+      typeof this._schema === 'function' ? this._schema() : this._schema;
+    const event = withoutDefaults(cairoCustomizeColumnsInSidePanel)({
+      actionName,
+    });
+    this.container.reportBi({
+      ...event,
+      params: {
+        ...event.params,
+        componentType: 'Entity page',
+        ...(schema?.id ? { tableId: schema.id } : {}),
+        ...(key ? { key } : {}),
+      },
+    });
   }
 
   onClose() {

package/src/state/CustomColumnsPanelStateBase.ts

@@ -81,6 +81,7 @@ export abstract class CustomColumnsPanelStateBase<
 
   abstract customizeColumnsInSidePanelBi(params: {
     actionName: CustomColumnsActionName;
+    key?: string;
   }): void;
 
   abstract onClose(): void;

package/src/state/CustomColumnsState.ts

@@ -552,18 +552,27 @@ export class CustomColumnsState<
 
   customizeColumnsInSidePanelBi({
     actionName,
+    key,
   }: {
     actionName: CustomColumnsActionName;
+    key?: string;
   }) {
-    if (this._performedCustomColumnsActions.get(actionName)) {
-      return;
+    if (actionName !== 'visibility') {
+      if (this._performedCustomColumnsActions.get(actionName)) {
+        return;
+      }
+      this._performedCustomColumnsActions.set(actionName, true);
     }
-    this._performedCustomColumnsActions.set(actionName, true);
-    this.table.reportBi(
-      withoutDefaults(cairoCustomizeColumnsInSidePanel)({
-        actionName,
-      }),
-    );
+    const event = withoutDefaults(cairoCustomizeColumnsInSidePanel)({
+      actionName,
+    });
+    this.table.reportBi({
+      ...event,
+      params: {
+        ...event.params,
+        ...(key ? { key } : {}),
+      },
+    });
   }
 
   get showFieldTypeIcons() {

package/src/state/EditableTable/CellValueState.ts

@@ -2,6 +2,7 @@ import { action, computed, makeObservable, observable } from 'mobx';
 import type { CellType, Cell, ValidationResult } from './types';
 import type { EditableCellContextMenuAction, FiltersMap } from '@wix/bex-core';
 import type { EditableTableState } from './EditableTableState';
+import type { UpdateOptions } from './MutationState';
 import {
   builtInCellTypes,
   textCellType,
@@ -27,6 +28,10 @@ export class CellValueState<T, F extends FiltersMap> {
     { rowKey: string; columnId: string; value: any }
   >();
 
+  /** Local new rows not to create yet, with how many open paste toasts hold
+   *  each. See `applyPastedValues`. */
+  private readonly _heldNewRows = new Map<string, number>();
+
   private readonly _parent: EditableTableState<T, F>;
   private readonly _extraCellTypes: Map<string, CellType>;
 
@@ -46,8 +51,10 @@ export class CellValueState<T, F extends FiltersMap> {
       commitHandler: action,
       applyBulkRawValues: action,
       applyBulkValues: action,
+      applyPastedValues: action,
       revalidatePendingCells: action,
       flushDrafts: action,
+      flushDraftsOnUnmount: action,
       flushRow: action,
       dropRowCellState: action,
     });
@@ -359,9 +366,13 @@ export class CellValueState<T, F extends FiltersMap> {
    * Deserialize and apply multiple raw string values in bulk.
    * Handles conversion failures by storing them as pending cells.
    */
-  applyBulkRawValues(
-    rawChanges: { rowKey: string; columnId: string; rawValue: string }[],
-  ) {
+  applyBulkRawValues(rawChanges: RawCellChange[]) {
+    this.applyBulkValues(this._deserializeRawValues(rawChanges));
+  }
+
+  /** Values that fail are stored as pending cells with their error and left
+   *  out of the result. */
+  private _deserializeRawValues(rawChanges: RawCellChange[]) {
     const changes: { rowKey: string; columnId: string; value: any }[] = [];
     for (const { rowKey, columnId, rawValue } of rawChanges) {
       const { value, error } = this.tryDeserialize(columnId, rawValue);
@@ -378,7 +389,7 @@ export class CellValueState<T, F extends FiltersMap> {
         changes.push({ rowKey, columnId, value });
       }
     }
-    this.applyBulkValues(changes);
+    return changes;
   }
 
   /**
@@ -388,7 +399,10 @@ export class CellValueState<T, F extends FiltersMap> {
    * checking isColumnEditable here — not just at the call sites — keeps
    * read-only cells protected regardless of entry point.
    */
-  applyBulkValues(changes: { rowKey: string; columnId: string; value: any }[]) {
+  applyBulkValues(
+    changes: { rowKey: string; columnId: string; value: any }[],
+    options?: UpdateOptions,
+  ) {
     const rowUpdates = new Map<
       string,
       { item: T; changedFieldIds: Set<string> }
@@ -454,6 +468,148 @@ export class CellValueState<T, F extends FiltersMap> {
     this._parent.mutation.updateItems(
       updates.map(({ item }) => item),
       updates.map(({ changedFieldIds }) => Array.from(changedFieldIds)),
+      options,
+    );
+  }
+
+  /**
+   * Applies pasted values and shows `successToast` with Undo. The server call
+   * waits until the toast closes or times out. With `batchWait` the toast has
+   * no Undo (see `MutationState.updatesAreBatched`).
+   *
+   * Undo rolls back the saved rows, and puts back the unsaved state (invalid
+   * values and drafts) of the pasted cells and of the drafts in their rows,
+   * which the paste saves along with it. A cell changed again after the paste
+   * keeps its newer value.
+   *
+   * Local new rows the paste touched are not created while the toast is open.
+   * Otherwise the click on Undo, which takes focus out of the table, would
+   * create them with the pasted values first.
+   */
+  applyPastedValues(
+    changes: { rowKey: string; columnId: string; value: any }[],
+    rawChanges: RawCellChange[],
+    successToast: string,
+  ) {
+    if (this._parent.mutation.updatesAreBatched) {
+      this.applyBulkValues(
+        [...changes, ...this._deserializeRawValues(rawChanges)],
+        { successToast },
+      );
+      return;
+    }
+
+    const pastedCells = [...changes, ...rawChanges];
+    const rowKeys = new Set(pastedCells.map(({ rowKey }) => rowKey));
+    const affectedCellKeys = new Set<string>();
+    for (const { rowKey, columnId } of pastedCells) {
+      const key = this._pendingCellKey(rowKey, columnId);
+      if (key) {
+        affectedCellKeys.add(key);
+      }
+    }
+    for (const [key, draft] of this._draftCells) {
+      if (rowKeys.has(draft.rowKey)) {
+        affectedCellKeys.add(key);
+      }
+    }
+    const beforePaste = this._snapshotUnsavedCells(affectedCellKeys);
+    // Replaced right after the paste below. `onUndo` reads it, and core calls
+    // `onUndo` only on a click on the toast, after that.
+    let afterPaste = beforePaste;
+
+    const newRowKeys = new Set(
+      [...rowKeys].filter((rowKey) =>
+        this._parent.mutation.isLocalNewRow(rowKey),
+      ),
+    );
+    for (const rowKey of newRowKeys) {
+      this._heldNewRows.set(rowKey, (this._heldNewRows.get(rowKey) ?? 0) + 1);
+    }
+    let toastOpen = true;
+    // Retry calls `onKept` again; only the first call counts.
+    const endUndoWindow = () => {
+      if (!toastOpen) {
+        return false;
+      }
+      toastOpen = false;
+      for (const rowKey of newRowKeys) {
+        const holds = (this._heldNewRows.get(rowKey) ?? 1) - 1;
+        if (holds > 0) {
+          this._heldNewRows.set(rowKey, holds);
+        } else {
+          this._heldNewRows.delete(rowKey);
+        }
+      }
+      return true;
+    };
+
+    this.applyBulkValues(
+      // After the snapshot: this writes invalid values into `_pendingCells`.
+      [...changes, ...this._deserializeRawValues(rawChanges)],
+      {
+        successToast,
+        undo: {
+          onUndo: action(() => {
+            const wasOpen = endUndoWindow();
+            if (!wasOpen) {
+              return;
+            }
+            const restoredDraftRows = new Set<string>();
+            for (const key of affectedCellKeys) {
+              const pasted = afterPaste.get(key);
+              if (
+                this._pendingCells.get(key) !== pasted?.pending ||
+                this._draftCells.get(key) !== pasted?.draft
+              ) {
+                continue;
+              }
+              const { pending, draft } = beforePaste.get(key) ?? {};
+              setOrDelete(this._pendingCells, key, pending);
+              setOrDelete(this._draftCells, key, draft);
+              if (draft) {
+                restoredDraftRows.add(draft.rowKey);
+              }
+            }
+            // The click on Undo already flushed the table, before these drafts
+            // were back. No toast: nothing should confirm the Undo.
+            this._flushRowsWithoutFocus(restoredDraftRows, {
+              successToast: null,
+            });
+          }),
+          onKept: action(() => {
+            const wasOpen = endUndoWindow();
+            if (!wasOpen) {
+              return;
+            }
+            this._flushRowsWithoutFocus(newRowKeys);
+          }),
+        },
+      },
+    );
+    afterPaste = this._snapshotUnsavedCells(affectedCellKeys);
+  }
+
+  private _snapshotUnsavedCells(keys: Set<string>): UnsavedCellsSnapshot {
+    return new Map(
+      [...keys].map((key) => [
+        key,
+        {
+          pending: this._pendingCells.get(key),
+          draft: this._draftCells.get(key),
+        },
+      ]),
+    );
+  }
+
+  private _flushRowsWithoutFocus(
+    rowKeys: Set<string>,
+    options?: UpdateOptions,
+  ) {
+    const focusedRowKey = this._parent.cellInteraction.focusedCell?.rowKey;
+    this._flushRows(
+      (rowKey) => rowKeys.has(rowKey) && rowKey !== focusedRowKey,
+      options,
     );
   }
 
@@ -511,22 +667,36 @@ export class CellValueState<T, F extends FiltersMap> {
     this._flushRows((rowKey) => rowKey !== exceptRowKey);
   }
 
+  /** Like `flushDrafts()`, but also saves new rows held by an open paste
+   *  toast: focus can stay on a held row on unmount, and the toast doesn't
+   *  create a focused row. */
+  flushDraftsOnUnmount() {
+    this._heldNewRows.clear();
+    this.flushDrafts();
+  }
+
   /** Save one row's drafts now, leaving other rows' drafts buffered. */
   flushRow(rowKey: string) {
     this._flushRows((key) => key === rowKey);
   }
 
-  private _flushRows(includeRow: (rowKey: string) => boolean) {
+  private _flushRows(
+    includeRow: (rowKey: string) => boolean,
+    options?: UpdateOptions,
+  ) {
+    const include = (rowKey: string) =>
+      includeRow(rowKey) && !this._heldNewRows.has(rowKey);
+
     const invalidNewRows = new Set<string>();
     for (const rowKey of this._parent.mutation._drafts.keys()) {
-      if (includeRow(rowKey) && !this._validateNewRow(rowKey)) {
+      if (include(rowKey) && !this._validateNewRow(rowKey)) {
         invalidNewRows.add(rowKey);
       }
     }
 
     const rowKeys = new Set<string>();
     for (const entry of this._draftCells.values()) {
-      if (includeRow(entry.rowKey)) {
+      if (include(entry.rowKey)) {
         rowKeys.add(entry.rowKey);
       }
     }
@@ -550,6 +720,7 @@ export class CellValueState<T, F extends FiltersMap> {
       this._parent.mutation.updateItems(
         updates.map(({ item }) => item),
         updates.map(({ changedFieldIds }) => changedFieldIds),
+        options,
       );
     }
   }
@@ -621,3 +792,21 @@ export class CellValueState<T, F extends FiltersMap> {
     }
   }
 }
+
+type RawCellChange = { rowKey: string; columnId: string; rawValue: string };
+
+type UnsavedCellsSnapshot = Map<
+  string,
+  {
+    pending?: { value: any; errors: string[] };
+    draft?: { rowKey: string; columnId: string; value: any };
+  }
+>;
+
+const setOrDelete = <V>(map: Map<string, V>, key: string, value?: V) => {
+  if (value === undefined) {
+    map.delete(key);
+  } else {
+    map.set(key, value);
+  }
+};

package/src/state/EditableTable/ClipboardState.ts

@@ -74,18 +74,28 @@ export class ClipboardState<T, F extends FiltersMap> {
       this._copiedDataString !== undefined &&
       this._copiedDataString === rawData;
 
-    const { keptSourceKeys, pasted } = this._pasteGrid(
+    const { richChanges, rawChanges, keptSourceKeys, pasted } = this._pasteGrid(
       rawData,
       targetPos,
       isInternal,
-      cellValue,
     );
 
+    // Clearing the cut sources goes out in the same update as the paste, so
+    // one Undo restores both sides.
     if (this.isCut && isInternal) {
-      this._clearCutSources(keptSourceKeys, cellValue);
+      richChanges.push(...this._cutSourceClears(keptSourceKeys));
     }
 
     if (pasted.length > 0) {
+      cellValue.applyPastedValues(
+        richChanges,
+        rawChanges,
+        this._parent.collection.translate(
+          'cairo.editableTable.paste.success.toast',
+          { count: pasted.length },
+        ),
+      );
+
       this._parent.bi.clipboardAction({
         actionName: 'paste',
         origin,
@@ -101,8 +111,8 @@ export class ClipboardState<T, F extends FiltersMap> {
     rawData: string,
     targetPos: { row: number; col: number },
     useRichValues: boolean,
-    cellValue: EditableTableState<T, F>['cellValue'],
-  ): { keptSourceKeys: Set<string>; pasted: Cell[] } {
+  ) {
+    const { cellValue } = this._parent;
     const keptSourceKeys = new Set<string>();
     const pasted: Cell[] = [];
     const richChanges: { rowKey: string; columnId: string; value: any }[] = [];
@@ -161,14 +171,7 @@ export class ClipboardState<T, F extends FiltersMap> {
       }
     }
 
-    if (richChanges.length > 0) {
-      cellValue.applyBulkValues(richChanges);
-    }
-    if (rawChanges.length > 0) {
-      cellValue.applyBulkRawValues(rawChanges);
-    }
-
-    return { keptSourceKeys, pasted };
+    return { richChanges, rawChanges, keptSourceKeys, pasted };
   }
 
   // A typed value pasted into a column of another cell type would skip that
@@ -189,22 +192,21 @@ export class ClipboardState<T, F extends FiltersMap> {
     );
   }
 
-  private _clearCutSources(
-    keptSourceKeys: Set<string>,
-    cellValue: EditableTableState<T, F>['cellValue'],
-  ) {
-    const cells: Cell[] = [];
+  // The clear rule is checked again here because it can depend on row values
+  // that changed since the cut.
+  private _cutSourceClears(keptSourceKeys: Set<string>) {
+    const { cellValue } = this._parent;
+    const clears: { rowKey: string; columnId: string; value: undefined }[] = [];
     for (const key of this.copiedCells) {
       if (keptSourceKeys.has(key)) {
         continue;
       }
       const pos = parseCellKey(key);
-      if (pos) {
-        cells.push(pos);
+      if (pos && !cellValue.getCellActionDisabledTooltip('clear', pos)) {
+        clears.push({ ...pos, value: undefined });
       }
     }
-
-    cellValue.clearCells(cells);
+    return clears;
   }
 
   clear() {

package/src/state/EditableTable/EditableTableState.ts

@@ -351,7 +351,7 @@ export class EditableTableState<T, F extends FiltersMap>
 
     return () => {
       disposeValidation();
-      this.cellValue.flushDrafts();
+      this.cellValue.flushDraftsOnUnmount();
       disposeMutation();
       onBeforeUnloadSubscription?.remove();
     };

package/src/state/EditableTable/MutationState.ts

@@ -26,6 +26,20 @@ export interface EditableTableMutationHandlers<T> {
   submitDelete: (items: T[]) => Promise<void>;
 }
 
+export interface UpdateOptions {
+  /** Missing: the "Item updated" toast. A string: this text instead. `null`:
+   *  no success toast. */
+  successToast?: string | null;
+  /** Adds Undo to the success toast. The server call waits until the toast
+   *  closes or times out. */
+  undo?: {
+    /** Runs when the user clicks Undo, after the rows are rolled back. */
+    onUndo: () => void;
+    /** Runs when the toast closes or times out without Undo. */
+    onKept: () => void;
+  };
+}
+
 type DraftRow<T> = {
   item: T;
   afterItemKey?: string;
@@ -258,18 +272,37 @@ export class MutationState<T, F extends FiltersMap> {
     });
   }
 
-  updateItems(updatedItems: T[], changedFieldIdsByItem?: string[][]) {
-    const t = this._parent.collection.translate;
-    if (updatedItems.length === 0) {
+  /** With `batchWait`, core runs a batch with the last update's `submit` and
+   *  toast only, so an earlier update's Undo and `onKept` would be lost. */
+  get updatesAreBatched(): boolean {
+    return Boolean(this._optimisticActions.executor.batchWait);
+  }
+
+  updateItems(
+    updatedItems: T[],
+    changedFieldIdsByItem?: string[][],
+    { successToast, undo }: UpdateOptions = {},
+  ) {
+    // With its own toast, an empty update still runs, to show the toast for
+    // values that stayed local (invalid cells, unsaved rows).
+    if (updatedItems.length === 0 && typeof successToast !== 'string') {
       return;
     }
     const contexts = this._updateContexts(updatedItems, changedFieldIdsByItem);
     this._optimisticActions.updateMany(updatedItems, {
       keepPosition: true,
-      submit: (items) => this._submitUpdate(items, updatedItems, contexts),
-      successToast: t('cairo.editableTable.updateItem.success.toast', {
-        count: updatedItems.length,
-      }),
+      // With undo, core calls this when the toast closes or times out without
+      // Undo. Retry calls it again.
+      submit: (items) => {
+        undo?.onKept();
+        // With `batchWait`, `items` also holds the other updates of the batch.
+        return items.length > 0
+          ? this._submitUpdate(items, updatedItems, contexts)
+          : Promise.resolve();
+      },
+      successToast: this._updateSuccessToast(successToast, updatedItems.length),
+      showUndoToast: undo !== undefined,
+      onUndo: undo?.onUndo,
       errorToast: this._retryableToast(
         'cairo.editableTable.updateItem.error.toast',
         'Update',
@@ -277,6 +310,22 @@ export class MutationState<T, F extends FiltersMap> {
     });
   }
 
+  private _updateSuccessToast(
+    successToast: UpdateOptions['successToast'],
+    count: number,
+  ) {
+    if (successToast === null) {
+      return undefined;
+    }
+    return (
+      successToast ??
+      this._parent.collection.translate(
+        'cairo.editableTable.updateItem.success.toast',
+        { count },
+      )
+    );
+  }
+
   /** Wraps the create submit so the outcome is reported once the server answers
    *  — the optimistic action itself has no completion callback. */
   private _reportedCreate(origin: RowCreationOrigin) {

package/src/state/EntityPage/EntityPageState.ts

@@ -339,6 +339,9 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
         this.setSchema(loadedSchema.schema);
       }
       this.bi.appLoaded?.();
+      if (!this._isExistingEntity) {
+        this.bi.reportItemCreationStart();
+      }
     });
 
     return () => {
@@ -412,6 +415,15 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       ctaName: 'Cancel',
       additionalInfo: this.actionsBarConfig?.cancelCta?.biAdditionalInfo,
     });
+    const creating = !this._isExistingEntity;
+    if (creating || this.isFormDirty) {
+      this.bi.reportItemDismissed({
+        editing: !creating,
+        itemId: creating
+          ? undefined
+          : entityItemId(this.entity, this.schema?.idField),
+      });
+    }
     this.navigateToParent();
   }
 
@@ -595,6 +607,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       bi,
     } = this;
 
+    const creating = !this._isExistingEntity;
     submitTask.run(async () => {
       let savedEntity: T | undefined;
       let submitSuccessful = false;
@@ -641,6 +654,10 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       if (!submitSuccessful) {
         return;
       }
+      bi.reportItemSaved({
+        creating,
+        itemId: entityItemId(savedEntity ?? this.entity, this.schema?.idField),
+      });
       const transformedItem =
         savedEntity && this.transformEntityToCollectionItem
           ? this.transformEntityToCollectionItem(savedEntity)
@@ -674,3 +691,11 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     }
   }
 }
+
+function entityItemId(entity: unknown, idField = 'id'): string | undefined {
+  if (entity == null || typeof entity !== 'object' || !(idField in entity)) {
+    return undefined;
+  }
+  const id = (entity as Record<string, unknown>)[idField];
+  return typeof id === 'string' ? id : undefined;
+}

package/src/state/EntityPage/EntityPageStateBIReporter.ts

@@ -7,6 +7,8 @@ import {
   cairoApiRequestDataLoadEnd,
   cairoPageCtaClicked,
   cairoPageDiscardChangesBeforeSave,
+  newItemCreationStart,
+  newItemCreationEnd,
   loadStart,
   loadEnd,
 } from '@wix/bex-core/bi';
@@ -55,6 +57,59 @@ export class EntityPageStateBIReporter<T, V extends FieldValues> {
     };
   }
 
+  reportItemCreationStart() {
+    const event = withoutDefaults(newItemCreationStart)({
+      origin: 'Entity page',
+      ...this.tableParams(),
+    });
+    this.reportBI({
+      ...event,
+      params: { ...event.params, componentType: 'Entity page' },
+    });
+  }
+
+  reportItemSaved({
+    creating,
+    itemId,
+  }: {
+    creating: boolean;
+    itemId?: string;
+  }) {
+    const event = withoutDefaults(newItemCreationEnd)({
+      origin: 'Entity page',
+      resultType: creating ? 'success' : 'edit success',
+      itemId,
+      ...this.tableParams(),
+    });
+    this.reportBI({
+      ...event,
+      params: { ...event.params, componentType: 'Entity page' },
+    });
+  }
+
+  reportItemDismissed({
+    editing,
+    itemId,
+  }: {
+    editing: boolean;
+    itemId?: string;
+  }) {
+    const event = withoutDefaults(newItemCreationEnd)({
+      origin: 'Entity page',
+      resultType: editing ? 'edit dismissed' : 'dismissed',
+      itemId,
+      ...this.tableParams(),
+    });
+    this.reportBI({
+      ...event,
+      params: { ...event.params, componentType: 'Entity page' },
+    });
+  }
+
+  private tableParams() {
+    return this.entityPageState.schemaSource?.schemaParams() ?? {};
+  }
+
   reportButtonClick({
     ctaName,
     isValid,