@wix/patterns 1.447.0 → 1.449.0

package/src/hooks/useSyncCollectionOnEntityReturn.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useWixPatternsRouter } from '../providers/WixPatternsRouterProvider';
 import { ICollectionComponentState } from '../state/ICollectionComponentState';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -24,12 +24,12 @@ export function useSyncCollectionOnEntityReturn<
   getEntityFromRouterState: (state: {
     _updatedEntity?: T;
     _createdEntity?: T;
+    _deletedEntity?: T;
   }) => T | undefined;
   getCollectionsToUpdate?: (state: S, entity: T) => CollectionState<T>[] | null;
 }) {
   const container = useWixPatternsContainer();
   const router = useWixPatternsRouter();
-  const timeoutRef = useRef<number>();
 
   const routeState = useSelector(() => router?.currentState);
 
@@ -56,7 +56,7 @@ export function useSyncCollectionOnEntityReturn<
     remove: RemoveToast;
   } | null>(null);
 
-  const showViewUpdatedToast = () => {
+  const showViewUpdatedToast = useCallback(() => {
     const toast = container.showToast?.({
       type: 'STANDARD',
       timeout: 'NONE',
@@ -81,7 +81,7 @@ export function useSyncCollectionOnEntityReturn<
     if (toast) {
       setCurrentToast(toast);
     }
-  };
+  }, [collections, container]);
 
   useEffect(() => {
     if (entity && collections && router) {
@@ -94,21 +94,32 @@ export function useSyncCollectionOnEntityReturn<
           collections.map((collection) =>
             checkIfViewSynced(collection, entity),
           ),
-        ).then((results) => {
-          const isViewSynced =
-            results.some(Boolean) && !router.isCollectionStale;
-          if (!isViewSynced) {
+        )
+          .then((results) => results.every(Boolean))
+          .catch(() => false)
+          .then((isViewSynced) => {
+            if (isViewSynced && !router.isCollectionStale) {
+              return;
+            }
+
             router.isCollectionStale = true;
             showViewUpdatedToast();
-          }
-        });
+          });
       }, 3000);
 
-      timeoutRef.current = timeoutId;
+      return () => window.clearTimeout(timeoutId);
     } else if (router?.isCollectionStale) {
       showViewUpdatedToast();
     }
-  }, [collections, entity]);
+    return () => {};
+  }, [
+    checkIfViewSynced,
+    collections,
+    entity,
+    router,
+    showViewUpdatedToast,
+    updateCollection,
+  ]);
 
   useEffect(() => {
     if (!currentToast || !cachedState) {
@@ -129,25 +140,17 @@ export function useSyncCollectionOnEntityReturn<
     };
 
     collections?.forEach((collection) => {
-      collection?.emitter.on('fetch', () => {
-        onFetch();
-      });
+      collection?.emitter.on('fetch', onFetch);
     });
     return () => {
       collections?.forEach((collection) => {
-        collection?.emitter.off('fetch', () => {
-          onFetch();
-        });
+        collection?.emitter.off('fetch', onFetch);
       });
     };
-  }, [currentToast, collections]);
+  }, [cachedState, collections, currentToast, router]);
 
   useEffect(() => {
     return () => {
-      if (timeoutRef.current) {
-        window.clearTimeout(timeoutRef.current);
-      }
-
       currentToast?.remove();
     };
   }, [currentToast]);

package/src/schema/sourceMutations.ts

@@ -57,9 +57,12 @@ export function sourceMutations<T>(
           required(backend().create, 'creating')(withoutLocalId(item)),
         ),
       ),
-    submitUpdate: (items) =>
+    submitUpdate: (items, contexts) =>
       Promise.all(
-        items.map((item) => required(backend().update, 'updating')(item)),
+        items.map((item, index) => {
+          const update = required(backend().update, 'updating');
+          return update(item, contexts?.[index]);
+        }),
       ),
     submitDelete: async (items) => {
       await required(

package/src/schema/useEntityPage.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { FieldValues } from 'react-hook-form';
 import type { SchemaSource } from '@wix/bex-core';
-import type { EntityPageState } from '../state';
+import type { EntityPageDeleteAction, EntityPageState } from '../state';
 import {
   useEntityPage as useOpenEntityPage,
   type UseEntityPageParams,
@@ -13,7 +13,10 @@ import {
 export type SchemaEntityPageOptions<
   T,
   V extends FieldValues = FieldValues,
-> = Omit<UseEntityPageParams<T, V>, 'fetch' | 'onSave' | 'schemaSource'> & {
+> = Omit<
+  UseEntityPageParams<T, V>,
+  'fetch' | 'onSave' | 'schemaSource' | 'isNewEntity'
+> & {
   /** Creates the initial values for a new entity. */
   createLocalItem?: () => Partial<T>;
   /** The entity to load. Omitted ⇒ the create route: the page starts empty and
@@ -32,7 +35,8 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
   source: SchemaSource<T>,
   options: SchemaEntityPageOptions<T, V>,
 ): EntityPageState<T, V> {
-  const { entityId, fetch, onSave, createLocalItem, ...rest } = options;
+  const { entityId, fetch, onSave, createLocalItem, deleteAction, ...rest } =
+    options;
 
   // The derived read and write need values that change or don't exist yet when
   // the state is created: the state itself (the save merges into the loaded
@@ -43,9 +47,11 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
   const state = useOpenEntityPage<T, V>({
     ...rest,
     schemaSource: source,
+    isNewEntity: () => !page.entityId,
     fetch:
       fetch ?? (() => fetchFromSource(source, page.entityId, createLocalItem)),
     onSave: onSave ?? (() => saveToSource(source, page)),
+    deleteAction: resolveDeleteAction(page, deleteAction),
   } as UseEntityPageParams<T, V>);
 
   page.state = state;
@@ -53,6 +59,17 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
   return state;
 }
 
+function resolveDeleteAction<T, V extends FieldValues>(
+  page: PageRef<T, V>,
+  deleteAction: EntityPageDeleteAction<T> | undefined,
+): EntityPageDeleteAction<T> | undefined {
+  if (!deleteAction || !page.entityId) {
+    return undefined;
+  }
+
+  return deleteAction;
+}
+
 interface PageRef<T, V extends FieldValues> {
   entityId?: string;
   state?: EntityPageState<T, V>;
@@ -99,11 +116,13 @@ async function saveToSource<T, V extends FieldValues>(
     throw new Error(`The source has no entity "${entityId}" to update`);
   }
 
+  const updatedEntity = { ...entity, ...values } as T;
+
   return {
-    updatedEntity: await required(
-      backend.update,
-      'updating',
-    )({ ...entity, ...values } as T),
+    updatedEntity: await required(backend.update, 'updating')(updatedEntity, {
+      previousItem: entity,
+      changedFieldIds: changedFieldIds(entity, updatedEntity, state!.form),
+    }),
   };
 }
 
@@ -113,3 +132,24 @@ function required<F>(fn: F | undefined, action: string): F {
   }
   return fn;
 }
+
+function changedFieldIds<T, V extends FieldValues>(
+  previousItem: T,
+  updatedItem: T,
+  form: EntityPageState<T, V>['form'],
+): string[] {
+  const dirtyFields = form.formState.dirtyFields as Record<string, unknown>;
+  const dirtyFieldIds = Object.entries(dirtyFields)
+    .filter(([, value]) => Boolean(value))
+    .map(([fieldId]) => fieldId);
+
+  const previousRecord = previousItem as Record<string, unknown>;
+  const updatedRecord = updatedItem as Record<string, unknown>;
+  const changedByValue = Array.from(
+    new Set([...Object.keys(previousRecord), ...Object.keys(updatedRecord)]),
+  ).filter(
+    (fieldId) => !Object.is(previousRecord[fieldId], updatedRecord[fieldId]),
+  );
+
+  return Array.from(new Set([...dirtyFieldIds, ...changedByValue]));
+}

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader4273170589";
+var _namespace_ = "CollectionPageHeader572984085";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPageHeader4273170589__root"};
+export var classes = {"root":"CollectionPageHeader572984085__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EditableTable/CellValueState.ts

@@ -300,7 +300,10 @@ export class CellValueState<T, F extends FiltersMap> {
    * read-only cells protected regardless of entry point.
    */
   applyBulkValues(changes: { rowKey: string; columnId: string; value: any }[]) {
-    const rowItems = new Map<string, T>();
+    const rowUpdates = new Map<
+      string,
+      { item: T; changedFieldIds: Set<string> }
+    >();
 
     for (const { rowKey, columnId, value } of changes) {
       const column = this._parent._columnMap.get(columnId);
@@ -339,10 +342,17 @@ export class CellValueState<T, F extends FiltersMap> {
           }
           continue;
         }
-        const currentItem =
-          rowItems.get(rowKey) ??
-          this._consumeRowDrafts(rowKey, keyedItem.item);
-        rowItems.set(rowKey, column.setValue(currentItem, value));
+        let rowUpdate = rowUpdates.get(rowKey);
+        if (!rowUpdate) {
+          const consumed = this._consumeRowDrafts(rowKey, keyedItem.item);
+          rowUpdate = {
+            item: consumed.item,
+            changedFieldIds: new Set(consumed.changedFieldIds),
+          };
+          rowUpdates.set(rowKey, rowUpdate);
+        }
+        rowUpdate.item = column.setValue(rowUpdate.item, value);
+        rowUpdate.changedFieldIds.add(column.id);
       } else if (pendingKey) {
         this._pendingCells.set(pendingKey, {
           value,
@@ -351,7 +361,11 @@ export class CellValueState<T, F extends FiltersMap> {
       }
     }
 
-    this._parent.mutation.updateItems(Array.from(rowItems.values()));
+    const updates = Array.from(rowUpdates.values());
+    this._parent.mutation.updateItems(
+      updates.map(({ item }) => item),
+      updates.map(({ changedFieldIds }) => Array.from(changedFieldIds)),
+    );
   }
 
   private _applyValue(rowKey: string, columnId: string, value: any) {
@@ -393,26 +407,32 @@ export class CellValueState<T, F extends FiltersMap> {
       }
     }
 
-    const items: T[] = [];
+    const updates: { item: T; changedFieldIds: string[] }[] = [];
     for (const rowKey of rowKeys) {
       const keyedItem = this._parent._getKeyedItem(rowKey);
       if (!keyedItem) {
         this._dropRowDrafts(rowKey);
       } else if (this._parent.mutation.isLocalNewRow(rowKey)) {
-        this._parent.mutation.commitNewRow(
-          rowKey,
-          this._consumeRowDrafts(rowKey, keyedItem.item),
-        );
+        const consumed = this._consumeRowDrafts(rowKey, keyedItem.item);
+        this._parent.mutation.commitNewRow(rowKey, consumed.item);
       } else {
-        items.push(this._consumeRowDrafts(rowKey, keyedItem.item));
+        const consumed = this._consumeRowDrafts(rowKey, keyedItem.item);
+        updates.push(consumed);
       }
     }
-    if (items.length > 0) {
-      this._parent.mutation.updateItems(items);
+    if (updates.length > 0) {
+      this._parent.mutation.updateItems(
+        updates.map(({ item }) => item),
+        updates.map(({ changedFieldIds }) => changedFieldIds),
+      );
     }
   }
 
-  private _consumeRowDrafts(rowKey: string, item: T): T {
+  private _consumeRowDrafts(
+    rowKey: string,
+    item: T,
+  ): { item: T; changedFieldIds: string[] } {
+    const changedFieldIds = new Set<string>();
     for (const [key, entry] of this._draftCells) {
       if (entry.rowKey !== rowKey) {
         continue;
@@ -420,10 +440,11 @@ export class CellValueState<T, F extends FiltersMap> {
       const column = this._parent._columnMap.get(entry.columnId);
       if (column?.setValue) {
         item = column.setValue(item, entry.value);
+        changedFieldIds.add(column.id);
       }
       this._draftCells.delete(key);
     }
-    return item;
+    return { item, changedFieldIds: Array.from(changedFieldIds) };
   }
 
   /** Drop a row's draft entries without saving (the row no longer exists). */

package/src/state/EditableTable/MutationState.ts

@@ -1,6 +1,7 @@
 import { action, makeObservable, observable, runInAction } from 'mobx';
 import type {
   CollectionOptimisticActions,
+  CollectionUpdateContext,
   CollectionState,
   FiltersMap,
   KeyedItem,
@@ -11,7 +12,10 @@ export interface EditableTableMutationHandlers<T> {
   /** Factory to create a new empty item with a fresh ID */
   createItem: () => T;
   /** Submit updated items to the server */
-  submitUpdate: (items: T[]) => Promise<T[] | void>;
+  submitUpdate: (
+    items: T[],
+    contexts?: CollectionUpdateContext<T>[],
+  ) => Promise<T[] | void>;
   /** Submit newly created items to the server */
   submitCreate: (items: T[]) => Promise<T[] | void>;
   /** Submit item deletions to the server */
@@ -239,14 +243,18 @@ export class MutationState<T, F extends FiltersMap> {
     });
   }
 
-  updateItems(updatedItems: T[]) {
+  updateItems(
+    updatedItems: T[],
+    changedFieldIdsByItem?: string[][],
+  ) {
     const t = this._parent.collection.translate;
     if (updatedItems.length === 0) {
       return;
     }
+    const contexts = this._updateContexts(updatedItems, changedFieldIdsByItem);
     this._optimisticActions.updateMany(updatedItems, {
       keepPosition: true,
-      submit: this._handlers.submitUpdate,
+      submit: (items) => this._submitUpdate(items, updatedItems, contexts),
       successToast: t('cairo.editableTable.updateItem.success.toast', {
         count: updatedItems.length,
       }),
@@ -260,6 +268,35 @@ export class MutationState<T, F extends FiltersMap> {
     });
   }
 
+  private _submitUpdate(
+    items: T[],
+    updatedItems: T[],
+    contexts: CollectionUpdateContext<T>[],
+  ) {
+    const sameItems =
+      items.length === updatedItems.length &&
+      items.every((item, index) => item === updatedItems[index]);
+
+    return this._handlers.submitUpdate(items, sameItems ? contexts : undefined);
+  }
+
+  private _updateContexts(
+    updatedItems: T[],
+    changedFieldIdsByItem?: string[][],
+  ): CollectionUpdateContext<T>[] {
+    return updatedItems.map((item, index) => {
+      const key = this._parent.collection.itemKey(item);
+      const previousItem =
+        this._parent.collection.result.get(key)?.item ?? item;
+      return {
+        previousItem,
+        changedFieldIds:
+          changedFieldIdsByItem?.[index] ??
+          changedFieldIdsFromItems(previousItem, item),
+      };
+    });
+  }
+
   /**
    * Nearest row above `rowKey` that a create can anchor on: a server row
    * that is not a draft and not itself a created row still living as an
@@ -336,3 +373,21 @@ export class MutationState<T, F extends FiltersMap> {
     return createdItems;
   };
 }
+
+const changedFieldIdsFromItems = <T>(
+  previousItem: T,
+  updatedItem: T,
+): string[] => {
+  if (!isRecord(previousItem) || !isRecord(updatedItem)) {
+    return [];
+  }
+
+  return Array.from(
+    new Set([...Object.keys(previousItem), ...Object.keys(updatedItem)]),
+  ).filter(
+    (fieldId) => !Object.is(previousItem[fieldId], updatedItem[fieldId]),
+  );
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null;

package/src/state/EntityPage/EntityPageDeleteActionState.ts

@@ -0,0 +1,228 @@
+import { TaskState } from '@wix/bex-core';
+import type {
+  LoadedSchema,
+  SchemaSource,
+  ToastConfig,
+  WixPatternsContainer,
+} from '@wix/bex-core';
+import { computed, makeObservable } from 'mobx';
+
+type DeleteErrorToast = (
+  err: unknown,
+  params: { retry: () => void },
+) =>
+  | {
+      message?: string;
+      tryAgain?: boolean;
+      action?: { text: string; onClick: () => void };
+    }
+  | string;
+
+export interface EntityPageDeleteActionConfig<T> {
+  enabled?: boolean;
+  onDelete?: (entity: T) => Promise<void>;
+  successToast?: Pick<ToastConfig, 'message'> | string;
+  errorToast?: DeleteErrorToast;
+  itemName?: (entity: T) => string;
+}
+
+export type EntityPageDeleteAction<T> =
+  | boolean
+  | EntityPageDeleteActionConfig<T>;
+
+export interface EntityPageDeleteActionStateParams<T> {
+  container: WixPatternsContainer;
+  deleteAction?: EntityPageDeleteAction<T>;
+  schemaSource?: SchemaSource<T>;
+  getEntity: () => T | null;
+  getLoadedSchema: () => LoadedSchema<T> | null;
+  transformEntityToCollectionItem: (entity: T) => any;
+  onDeleted: (deletedCollectionItem: any) => void;
+  emitDelete: () => void;
+  emitDeleteError: (err: unknown) => void;
+}
+
+export class EntityPageDeleteActionState<T> {
+  readonly container: WixPatternsContainer;
+  readonly deleteAction?: EntityPageDeleteAction<T>;
+  readonly schemaSource?: SchemaSource<T>;
+  readonly getEntity: () => T | null;
+  readonly getLoadedSchema: () => LoadedSchema<T> | null;
+  readonly transformEntityToCollectionItem: (entity: T) => any;
+  readonly onDeleted: (deletedCollectionItem: any) => void;
+  readonly emitDelete: () => void;
+  readonly emitDeleteError: (err: unknown) => void;
+
+  readonly task = new TaskState<void>();
+
+  constructor(params: EntityPageDeleteActionStateParams<T>) {
+    this.container = params.container;
+    this.deleteAction = params.deleteAction;
+    this.schemaSource = params.schemaSource;
+    this.getEntity = params.getEntity;
+    this.getLoadedSchema = params.getLoadedSchema;
+    this.transformEntityToCollectionItem =
+      params.transformEntityToCollectionItem;
+    this.onDeleted = params.onDeleted;
+    this.emitDelete = params.emitDelete;
+    this.emitDeleteError = params.emitDeleteError;
+
+    makeObservable(this, {
+      canShow: computed,
+      disabledReason: computed,
+    });
+  }
+
+  private get config(): EntityPageDeleteActionConfig<T> | null {
+    if (!this.deleteAction) {
+      return null;
+    }
+
+    return typeof this.deleteAction === 'boolean' ? {} : this.deleteAction;
+  }
+
+  private get isEnabled() {
+    return this.config?.enabled !== false;
+  }
+
+  private getDeleteHandler(): ((entity: T) => Promise<void>) | undefined {
+    const config = this.config;
+    if (!config || !this.isEnabled) {
+      return undefined;
+    }
+
+    if (config.onDelete) {
+      return config.onDelete;
+    }
+
+    const backendDelete = this.getLoadedSchema()?.backend.delete;
+    if (this.schemaSource && backendDelete) {
+      return (entity) => backendDelete(this.schemaSource!.itemKey(entity));
+    }
+
+    return undefined;
+  }
+
+  get canShow() {
+    const itemPermissions = this.getLoadedSchema()?.schema.itemPermissions;
+    return (
+      !!this.getEntity() &&
+      !!this.config &&
+      this.isEnabled &&
+      !!this.getDeleteHandler() &&
+      (itemPermissions?.deleteItem ?? true)
+    );
+  }
+
+  get disabledReason() {
+    const entity = this.getEntity();
+    const itemPermissions = this.getLoadedSchema()?.schema.itemPermissions;
+    const disabledResult =
+      entity && itemPermissions?.isRemoveItemDisabled
+        ? itemPermissions.isRemoveItemDisabled(entity)
+        : undefined;
+
+    if (!disabledResult?.disabled) {
+      return undefined;
+    }
+
+    return disabledResult.reason ?? this.container.translate('cairo.disabled');
+  }
+
+  getItemName(entity: T) {
+    const itemName =
+      this.config?.itemName?.(entity) ?? this.schemaSource?.itemName(entity);
+
+    return (
+      itemName ||
+      this.container.translate('cairo.entity.item', {
+        num: 1,
+      })
+    );
+  }
+
+  private showSuccessToast(deletedEntity: T) {
+    const successToast = this.config?.successToast;
+    const message =
+      typeof successToast === 'string' ? successToast : successToast?.message;
+
+    this.container.showToast?.({
+      type: 'SUCCESS',
+      biName: 'cairo-entity-page-delete-success-toast',
+      message:
+        message ??
+        this.container.translate('cairo.deleteSuccess', {
+          itemName: this.getItemName(deletedEntity),
+        }),
+    });
+  }
+
+  private showErrorToast(err: unknown) {
+    const errorToast = this.config?.errorToast?.(err, {
+      retry: () => this.deleteEntity(),
+    });
+    const message =
+      typeof errorToast === 'string' ? errorToast : errorToast?.message;
+    const showTryAgain =
+      typeof errorToast === 'string' ? true : errorToast?.tryAgain !== false;
+    const action =
+      typeof errorToast === 'string' ? undefined : errorToast?.action;
+
+    this.container.showToast?.({
+      type: 'ERROR',
+      biName: 'cairo-entity-page-delete-error-toast',
+      message:
+        message ?? this.container.translate('cairo.technical.error.text'),
+      action:
+        action || showTryAgain
+          ? {
+              uiType: 'LINK',
+              text:
+                action?.text ?? this.container.translate('cairo.toast.retry'),
+              onClick: () => {
+                if (action?.onClick) {
+                  action.onClick();
+                } else {
+                  this.deleteEntity();
+                }
+              },
+              removeToastOnClick: true,
+            }
+          : undefined,
+    });
+  }
+
+  async deleteEntity() {
+    if (this.task.status.isLoading || !this.canShow || this.disabledReason) {
+      return;
+    }
+
+    const entity = this.getEntity();
+    const deleteHandler = this.getDeleteHandler();
+    if (!entity || !deleteHandler) {
+      return;
+    }
+
+    this.emitDelete();
+
+    let caughtError: unknown;
+    await this.task.run(
+      async () => {
+        await deleteHandler(entity);
+      },
+      (err) => {
+        caughtError = err;
+      },
+    );
+
+    if (caughtError) {
+      this.showErrorToast(caughtError);
+      this.container.errorMonitor.captureException(caughtError);
+      this.emitDeleteError(caughtError);
+      throw caughtError;
+    }
+
+    this.showSuccessToast(entity);
+    this.onDeleted(this.transformEntityToCollectionItem(entity));
+  }
+}