@wix/patterns 1.423.0 → 1.424.0

package/src/components/SchemaSource/SchemaState.ts

@@ -0,0 +1,220 @@
+import {
+  action,
+  computed,
+  makeObservable,
+  observable,
+  runInAction,
+} from 'mobx';
+import {
+  Field,
+  FieldManagement,
+  FieldsSource,
+  LoadedSchema,
+  Schema,
+  SchemaSource,
+  TaskState,
+  WixPatternsContainer,
+} from '@wix/bex-core';
+import type { RemoveToast, ToastConfig } from '@wix/bex-core';
+import type { ToolbarCollectionState } from '../../state';
+import { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
+import { isFilterableFieldType } from '../../state/buildFieldFilters';
+import { schemaFieldsSource } from './schemaFieldsSource';
+import { schemaFieldManagement } from './schemaFieldManagement';
+import { schemaRendering } from './schemaRendering';
+
+export interface SchemaStateParams<T> {
+  container: WixPatternsContainer;
+  source: SchemaSource<T>;
+}
+
+/**
+ * Holds a collection's loaded schema and turns it into a source-neutral
+ * FieldsSource for the table. It owns the field-management object and the
+ * add/edit field modal, loads the schema once, and builds the table columns
+ * from its fields.
+ */
+export class SchemaState<T = Record<string, unknown>> {
+  readonly container: WixPatternsContainer;
+  readonly source: SchemaSource<T>;
+  readonly fieldManagement: FieldManagement;
+  readonly fieldsSource: FieldsSource;
+  readonly makePrimaryTask = new TaskState();
+  readonly duplicateTask = new TaskState();
+  readonly duplicateWithContentTask = new TaskState();
+
+  loadedSchema?: LoadedSchema<T> = undefined;
+  toolbar?: ToolbarCollectionState<any, any> = undefined;
+
+  constructor(params: SchemaStateParams<T>) {
+    this.container = params.container;
+    this.source = params.source;
+    this.fieldManagement = schemaFieldManagement(this);
+    this.fieldsSource = schemaFieldsSource(this);
+
+    makeObservable(this, {
+      loadedSchema: observable.ref,
+      schema: computed,
+      fields: computed,
+      filterableFields: computed,
+      mergeFields: action,
+    });
+  }
+
+  get schema(): Schema | undefined {
+    return this.loadedSchema?.schema;
+  }
+
+  get fieldActions() {
+    return this.loadedSchema?.fieldActions;
+  }
+
+  get fields(): Field[] {
+    const fields = this.schema?.fields ?? {};
+    return Object.values(fields).filter((f): f is Field => Boolean(f));
+  }
+
+  /** Fields whose type maps to an auto filter in the toolbar. */
+  get filterableFields(): Field[] {
+    return this.fields.filter((f) => isFilterableFieldType(f.type));
+  }
+
+  /** Loads the schema. CollectionFieldsSourceState runs this, tracks its status,
+   *  and shows a retry toast on failure. */
+  load = async (): Promise<void> => {
+    const loaded = await this.source.loadSchema();
+    runInAction(() => {
+      this.loadedSchema = loaded;
+    });
+  };
+
+  /** Attaches this source to a table's toolbar via the shared wrapper. */
+  setOnTable(toolbar: ToolbarCollectionState<any, any>) {
+    this.toolbar = toolbar;
+    CollectionFieldsSourceState.setOnTable(toolbar, {
+      fieldsSource: this.fieldsSource,
+      ...schemaRendering(this),
+    });
+  }
+
+  /** Replaces the loaded schema's fields with the map returned by a mutation. */
+  mergeFields(fields: Schema['fields']) {
+    const current = this.loadedSchema;
+    if (!current) {
+      return;
+    }
+    this.loadedSchema = {
+      ...current,
+      schema: { ...current.schema, fields },
+    };
+  }
+
+  makePrimary = (fieldId: string): void => {
+    const run = this.fieldActions?.makePrimary;
+    if (!run) {
+      return;
+    }
+    void this.runFieldMutation(
+      this.makePrimaryTask,
+      () => run(fieldId),
+      {
+        successMessage: 'Primary field updated',
+        successBi: 'cairo-field-action-make-primary-success',
+        errorMessage: "Couldn't update primary field",
+        errorBi: 'cairo-field-action-make-primary-error',
+      },
+      () => this.makePrimary(fieldId),
+    );
+  };
+
+  duplicateField = (fieldId: string): void => {
+    const run = this.fieldActions?.duplicateField;
+    if (!run) {
+      return;
+    }
+    void this.runFieldMutation(
+      this.duplicateTask,
+      () => run(fieldId),
+      {
+        successMessage: 'Field duplicated',
+        successBi: 'cairo-field-action-duplicate-success',
+        errorMessage: "Couldn't duplicate field",
+        errorBi: 'cairo-field-action-duplicate-error',
+      },
+      () => this.duplicateField(fieldId),
+    );
+  };
+
+  duplicateFieldWithContent = (fieldId: string): void => {
+    const run = this.fieldActions?.duplicateFieldWithContent;
+    if (!run) {
+      return;
+    }
+    void this.runFieldMutation(
+      this.duplicateWithContentTask,
+      () => run(fieldId),
+      {
+        successMessage: 'Field duplicated with content',
+        successBi: 'cairo-field-action-duplicate-with-content-success',
+        errorMessage: "Couldn't duplicate field with content",
+        errorBi: 'cairo-field-action-duplicate-with-content-error',
+      },
+      () => this.duplicateFieldWithContent(fieldId),
+    );
+  };
+
+  // makePrimary/duplicate return the updated fields map (like add/edit/delete),
+  // so merge it locally — same path as the modal actions, no full re-fetch.
+  // Toasts + loading mirror the field-management actions, so the header and the
+  // side panel report the same outcome.
+  private runFieldMutation = async (
+    task: TaskState<unknown>,
+    run: () => Promise<Schema['fields']>,
+    toasts: {
+      successMessage: string;
+      successBi: string;
+      errorMessage: string;
+      errorBi: string;
+    },
+    retry: () => void,
+  ) => {
+    if (task.status.isLoading) {
+      return;
+    }
+    await task.run(async () => {
+      const fields = await run();
+      runInAction(() => this.mergeFields(fields));
+    });
+    if (task.status.isSuccess) {
+      this.notify({
+        type: 'SUCCESS',
+        message: toasts.successMessage,
+        biName: toasts.successBi,
+      });
+    } else if (task.status.isError) {
+      this.notify({
+        type: 'ERROR',
+        message: toasts.errorMessage,
+        biName: toasts.errorBi,
+        action: {
+          text: 'Try again',
+          onClick: retry,
+          removeToastOnClick: true,
+        },
+      });
+    }
+  };
+
+  private currentToastRemove: RemoveToast | undefined;
+
+  // Shared by the source's field mutations (make-primary / duplicate / delete) to
+  // surface a toast; deduped against the previous one.
+  notify = (config: ToastConfig) => {
+    const show = this.container.showToast;
+    if (!show) {
+      return;
+    }
+    this.currentToastRemove?.();
+    this.currentToastRemove = show(config).remove;
+  };
+}

package/src/components/SchemaSource/index.ts

@@ -0,0 +1,4 @@
+export { SchemaState } from './SchemaState';
+export type { SchemaStateParams } from './SchemaState';
+export { tableSchemaSource } from './tableSchemaSource';
+export type { TableSchemaSource } from './tableSchemaSource';

package/src/components/SchemaSource/schemaFieldActions.ts

@@ -0,0 +1,101 @@
+import type { CustomFieldOrigin } from '@wix/bex-core';
+import {
+  buildFieldActionsMenu,
+  type FieldActionHandlers,
+  type FieldActionHandlersConfig,
+  type FieldActionKey,
+} from '../FieldActions';
+import type {
+  CustomFieldsPanelState,
+  FieldActionsMenuBuilder,
+} from '../../state/CustomFields/CustomFieldsPanelState';
+import type { SchemaState } from './SchemaState';
+import { schemaFieldDisabledTooltips } from './schemaFieldDisable';
+
+// Schema field-menu layout: edit + manage actions, then delete (divider before).
+const SCHEMA_MENU_GROUPS: FieldActionKey[][] = [
+  ['editField', 'makePrimary', 'duplicateField', 'duplicateFieldWithContent'],
+  ['delete'],
+];
+
+export const schemaFieldActionHandlers =
+  (s: SchemaState<any>, panel: CustomFieldsPanelState) =>
+  ({
+    fieldId,
+    origin,
+  }: {
+    fieldId: string;
+    origin: CustomFieldOrigin;
+    location: string;
+  }): FieldActionHandlersConfig | null => {
+    const field = s.schema?.fields[fieldId];
+    if (!field) {
+      return null;
+    }
+    const fa = s.fieldActions;
+    const canEdit = s.fieldManagement.canEditField(field);
+    const canDelete = s.schema
+      ? s.source.canDeleteField(field, s.schema)
+      : false;
+
+    const handlers: FieldActionHandlers = {};
+    if (canEdit) {
+      handlers.editField = () =>
+        panel.openCustomFieldModal({ fieldId, origin });
+    }
+    if (fa?.makePrimary) {
+      handlers.makePrimary = () => s.makePrimary(fieldId);
+    }
+    if (fa?.duplicateField) {
+      handlers.duplicateField = () => s.duplicateField(fieldId);
+    }
+    if (fa?.duplicateFieldWithContent) {
+      handlers.duplicateFieldWithContent = () =>
+        s.duplicateFieldWithContent(fieldId);
+    }
+    if (canDelete && fa?.deleteField) {
+      handlers.delete = () =>
+        panel.deleteFieldModal.modal.open({
+          id: fieldId,
+          origin,
+          fieldName: field.displayName,
+        });
+    }
+
+    if (Object.keys(handlers).length === 0) {
+      return null;
+    }
+
+    return {
+      handlers,
+      disabledTooltips: schemaFieldDisabledTooltips(field, {
+        canEdit,
+        canAddFields: s.fieldManagement.canAddFields,
+      }),
+      loading: {
+        makePrimary: s.makePrimaryTask.status.isLoading,
+        duplicateField: s.duplicateTask.status.isLoading,
+        duplicateFieldWithContent: s.duplicateWithContentTask.status.isLoading,
+      },
+    };
+  };
+
+export const createSchemaFieldActionsMenu =
+  (s: SchemaState<any>) =>
+  (panel: CustomFieldsPanelState): FieldActionsMenuBuilder => {
+    const handlers = schemaFieldActionHandlers(s, panel);
+    const t = s.container.translate;
+    return (args) =>
+      buildFieldActionsMenu({
+        fieldId: args.fieldId,
+        config: handlers(args),
+        groups: SCHEMA_MENU_GROUPS,
+        translate: t,
+        tooltipContent: t('cairo.custom-columns.more-actions.tooltip'),
+        bi: {
+          reportBi: s.container.reportBi,
+          location: args.location,
+          listSize: s.fields.length,
+        },
+      });
+  };

package/src/components/SchemaSource/schemaFieldDisable.ts

@@ -0,0 +1,44 @@
+import type { Field } from '@wix/bex-core';
+import type { FieldActionKey } from '../FieldActions';
+
+const TEXT_TYPES = new Set<Field['type']>(['SHORT_TEXT', 'LONG_TEXT']);
+
+/**
+ * Per-action disabled tooltips for a schema-source field. Encodes the schema's
+ * data-model rules — only a text field can be the primary/display field, system
+ * fields are locked, the primary field can't be deleted — which used to live in
+ * the shared
+ * FieldActions registry. A key present ⇒ that action renders disabled with the
+ * tooltip; an action with no handler ignores its entry. Tooltips match the
+ * previous (untranslated) registry strings.
+ */
+export const schemaFieldDisabledTooltips = (
+  field: Field,
+  perms: { canEdit: boolean; canAddFields: boolean },
+): Partial<Record<FieldActionKey, string>> => {
+  const tooltips: Partial<Record<FieldActionKey, string>> = {};
+
+  if (!perms.canEdit) {
+    tooltips.makePrimary = 'Editing fields is disabled.';
+  } else if (field.isPrimary) {
+    tooltips.makePrimary = 'This is the primary field.';
+  } else if (field.isSystem) {
+    tooltips.makePrimary = "System fields can't be modified.";
+  } else if (!TEXT_TYPES.has(field.type)) {
+    tooltips.makePrimary = 'Only text fields can be made primary.';
+  }
+
+  if (!perms.canAddFields) {
+    tooltips.duplicateField = 'Adding fields is disabled.';
+    tooltips.duplicateFieldWithContent = 'Adding fields is disabled.';
+  } else if (field.isSystem) {
+    tooltips.duplicateField = "System fields can't be modified.";
+    tooltips.duplicateFieldWithContent = "System fields can't be modified.";
+  }
+
+  if (field.isPrimary) {
+    tooltips.delete = 'This is the primary field.';
+  }
+
+  return tooltips;
+};

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -0,0 +1,99 @@
+import { FieldDraft, FieldManagement, NonReferenceField } from '@wix/bex-core';
+import { runInAction } from 'mobx';
+import type { SchemaState } from './SchemaState';
+
+/**
+ * Builds the source-neutral FieldManagement over SchemaState. add/edit/delete
+ * call the schema's FieldActions, then merge the returned fields into the loaded
+ * schema so the columns update from the response (no reload). The creatable
+ * types, permissions, and can-edit/add rules come from the source.
+ */
+export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
+  const draftToField = (draft: FieldDraft): NonReferenceField => ({
+    id: draft.key,
+    displayName: draft.name,
+    type: (draft.type ?? 'SHORT_TEXT') as NonReferenceField['type'],
+    isPii: draft.containsPii,
+    validation: { required: false },
+  });
+
+  return {
+    get canAddFields() {
+      return s.schema ? s.source.canAddFields(s.schema) : false;
+    },
+    addFieldDisabled: false,
+    canEditField: (field) =>
+      s.schema ? s.source.canEditField(field, s.schema) : false,
+    supportsPii: s.source.supportsPii,
+    permissions: s.source.fieldPermissions,
+    // Self-contained: does the delete and reports its own toast (matching the
+    // DataExtension source). Rethrows on failure so the shared delete modal stays
+    // open for a retry.
+    deleteField: async (fieldId) => {
+      try {
+        const fields = await s.fieldActions?.deleteField?.(fieldId);
+        if (fields) {
+          runInAction(() => s.mergeFields(fields));
+        }
+        s.notify({
+          type: 'SUCCESS',
+          message: 'Field deleted',
+          biName: 'cairo-field-action-delete-success',
+        });
+      } catch (e) {
+        s.notify({
+          type: 'ERROR',
+          message: "Couldn't delete field",
+          biName: 'cairo-field-action-delete-error',
+        });
+        throw e;
+      }
+    },
+
+    get creatableFieldTypes() {
+      const t = s.container.translate;
+      return s.source.creatableFieldTypes.map((ft) => ({
+        id: ft.patternsType,
+        label: t(ft.labelKey),
+        namePlaceholder: ft.namePlaceholderKey
+          ? t(ft.namePlaceholderKey)
+          : undefined,
+        patternsType: ft.patternsType,
+      }));
+    },
+    get existingFieldKeys() {
+      return s.fields.map((f) => f.id);
+    },
+
+    addField: async (draft) => {
+      const fields = await s.fieldActions?.addField?.(draftToField(draft));
+      if (fields) {
+        runInAction(() => s.mergeFields(fields));
+      }
+    },
+    editField: async (fieldId, draft) => {
+      const fields = await s.fieldActions?.editField?.(fieldId, {
+        displayName: draft.name,
+      });
+      if (fields) {
+        runInAction(() => s.mergeFields(fields));
+      }
+    },
+    getFieldDraft: (fieldId) => {
+      const field = s.schema?.fields[fieldId];
+      if (!field) {
+        return undefined;
+      }
+      return {
+        key: field.id,
+        name: field.displayName,
+        type: field.type,
+        readApps: false,
+        readUsers: false,
+        writeApps: false,
+        writeUsers: false,
+        containsPii: field.isPii ?? false,
+      };
+    },
+  };
+};

package/src/components/SchemaSource/schemaFieldsSource.ts

@@ -0,0 +1,37 @@
+import type { FieldsSource } from '@wix/bex-core';
+import type { SchemaState } from './SchemaState';
+
+/**
+ * Exposes SchemaState as a source-neutral FieldsSource. Reads through to the
+ * loaded schema so MobX reactivity flows. A flat schema has no groups or
+ * archiving, so those members are omitted.
+ */
+export const schemaFieldsSource = (s: SchemaState<any>): FieldsSource => {
+  const source: FieldsSource = {
+    load: () => s.load(),
+
+    get fields() {
+      return s.fields;
+    },
+    get filterableFields() {
+      return s.filterableFields;
+    },
+    get manageableFields() {
+      return s.fields.filter((f) => !f.isSystem);
+    },
+    columnIdForField: (field) => field.id,
+    queryFieldId: (field) => field.id,
+    getCellValue: (row, field) => (row as Record<string, unknown>)[field.id],
+    setCellValue: (row, field, value) => ({
+      ...(row as Record<string, unknown>),
+      [field.id]: value,
+    }),
+
+    fieldManagement: s.fieldManagement,
+    get fieldActions() {
+      return s.fieldActions;
+    },
+  };
+
+  return source;
+};

package/src/components/SchemaSource/schemaRendering.tsx

@@ -0,0 +1,40 @@
+import { FilterOperator } from '@wix/bex-core';
+import type { FieldsSourceRendering } from '../../state/CollectionFieldsSourceState';
+import type { SchemaState } from './SchemaState';
+import {
+  createSchemaFieldActionsMenu,
+  schemaFieldActionHandlers,
+} from './schemaFieldActions';
+import { FieldManagementModals } from '../CustomFieldsPanel/FieldManagementModals';
+import { CustomColumnsFull } from '../CustomColumns/CustomColumnsFull';
+import { CollectionToolbarFilters } from '../CollectionToolbarFilters';
+
+// Text operators a schema source's backend can execute.
+const SCHEMA_TEXT_OPERATORS = [
+  FilterOperator.CONTAINS,
+  FilterOperator.NOT_CONTAINS,
+  FilterOperator.IS_EMPTY,
+  FilterOperator.EXISTS,
+];
+
+/**
+ * Builds the schema source's config, shaped as a FieldsSourceRendering. The spine
+ * builds the field-management panel from this; the per-field actions come from
+ * schemaFieldActions.
+ */
+export const schemaRendering = (
+  s: SchemaState<any>,
+): FieldsSourceRendering => ({
+  filterConfig: {
+    textOperators: SCHEMA_TEXT_OPERATORS,
+    numberIsDecimal: () => true,
+  },
+  createFieldActionsMenu: createSchemaFieldActionsMenu(s),
+  createFieldActionHandlers: (panel) => schemaFieldActionHandlers(s, panel),
+  featuredPageActions: [],
+  components: {
+    FieldManagementModals,
+    CustomColumns: CustomColumnsFull,
+    CollectionToolbarFilters,
+  },
+});

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -0,0 +1,27 @@
+import type { SchemaSource } from '@wix/bex-core';
+import type { FieldsSourceProvider } from '../fieldsSourceProvider';
+import { SchemaState } from './SchemaState';
+
+/**
+ * A schema source ready to attach to a table: the full config plus a
+ * `setOnTable` that builds the SchemaState. Keeping `new SchemaState` here — not
+ * in the table hook — keeps it out of the core table bundle; only consumers that
+ * call `tableSchemaSource` pull it in.
+ *
+ * It stays the full config, so you can still spread and override it. `setOnTable`
+ * reads `this`, so any overrides on the (possibly spread) object take effect.
+ */
+export type TableSchemaSource<T = Record<string, unknown>> = SchemaSource<T> &
+  FieldsSourceProvider;
+
+export const tableSchemaSource = <T>(
+  source: SchemaSource<T>,
+): TableSchemaSource<T> => ({
+  ...source,
+  setOnTable(toolbar) {
+    new SchemaState({
+      container: toolbar.container,
+      source: this,
+    }).setOnTable(toolbar);
+  },
+});

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent3853991789";
+var _namespace_ = "ScrollableContent1540889949";
 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":"ScrollableContent3853991789__root"};
+export var classes = {"root":"ScrollableContent1540889949__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};