@wix/patterns 1.423.0 → 1.424.0

package/src/components/{ArchivedItemsPanel → CustomFieldsPanel}/DeleteFieldModal.tsx

@@ -13,7 +13,7 @@ export const _DeleteFieldModal = ({
 }) => {
   const container = useWixPatternsContainer();
   const { translate: t } = container;
-  const { dataExtension, modal } = state;
+  const { modal } = state;
 
   return (
     <MessageActionModal
@@ -21,19 +21,14 @@ export const _DeleteFieldModal = ({
       state={modal}
       skin="destructive"
       title={t('cairo.customFields.delete.modal.title', {
-        selectedField:
-          dataExtension.extractFieldValuesFromSchema(modal.value?.id || '')
-            ?.name || '',
+        selectedField: modal.value?.fieldName || '',
       })}
       content={
         <Text>
           <Trans
             i18nKey="cairo.customFields.delete.modal.description"
             values={{
-              selectedField:
-                dataExtension.extractFieldValuesFromSchema(
-                  modal.value?.id || '',
-                )?.name || '',
+              selectedField: modal.value?.fieldName || '',
             }}
             components={{
               bold: <Text weight="bold" />,

package/src/components/CustomFieldsPanel/FieldManagementModals.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
+import { CustomFieldModal } from '../CustomFieldModal';
+import { ArchiveFieldModal } from './ArchiveFieldModal';
+import { DeleteFieldModal } from './DeleteFieldModal';
+
+/**
+ * Renders the field-management modals (add/edit, archive, delete) for any source.
+ * The source supplies the modal states on CollectionFieldsSourceState; the modals
+ * themselves are the same platform components regardless of which source is behind
+ * them.
+ */
+function _FieldManagementModals({
+  source,
+}: {
+  source: CollectionFieldsSourceState;
+}) {
+  const { customFieldModal, archiveFieldModal, deleteFieldModal } =
+    source.customFieldsPanel;
+  return (
+    <>
+      <CustomFieldModal state={customFieldModal} />
+      {archiveFieldModal && <ArchiveFieldModal state={archiveFieldModal} />}
+      <DeleteFieldModal state={deleteFieldModal} />
+    </>
+  );
+}
+
+export const FieldManagementModals = observer(_FieldManagementModals);

package/src/components/CustomFieldsPanel/FieldsSourceAddFieldCTA.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { AddItem, Box, Divider } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import type { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
+import { CustomFieldsDisabledHint } from '../CustomFields';
+
+function _FieldsSourceAddFieldCTA({
+  source,
+}: {
+  source: CollectionFieldsSourceState;
+}) {
+  const { translate: t } = useWixPatternsContainer();
+  const fm = source.fieldsSource.fieldManagement;
+
+  if (!fm?.canAddFields) {
+    return null;
+  }
+
+  return (
+    <Box direction="vertical" width="100%">
+      <Divider direction="horizontal" />
+      <Box
+        padding="SP4"
+        width="100%"
+        boxSizing="border-box"
+        direction="vertical"
+      >
+        <CustomFieldsDisabledHint
+          disabled={fm.addFieldDisabled}
+          content={fm.addFieldDisabledHint ?? ''}
+        >
+          <AddItem
+            dataHook="custom-columns-add-field"
+            onClick={() =>
+              source.openFieldModal({ origin: 'Custom columns panel' })
+            }
+          >
+            {t('cairo.customFields.addCustomField.CTA')}
+          </AddItem>
+        </CustomFieldsDisabledHint>
+      </Box>
+    </Box>
+  );
+}
+
+export const FieldsSourceAddFieldCTA = observer(_FieldsSourceAddFieldCTA);

package/src/components/CustomFieldsTransforms/transformCustomFiltersToWQL.tsx

@@ -1,15 +1,14 @@
 import {
-  CustomField,
-  CustomFieldType,
   ExtractFilterValue,
+  Field,
   FiltersMap,
+  PatternsFieldType,
   RawFilters,
 } from '@wix/bex-core';
 import { ToolbarCollectionState } from '../../state';
 import { transformCustomDateFilterToWQL } from './transformCustomDateFilterToWQL';
 import { transformCustomCheckboxToWQL } from './transformCustomCheckboxToWQL';
 import { transformCustomNumberRangeFilterToWQL } from './transformCustomNumberRangeFilterToWQL';
-import { prefixFieldWithNamespace } from '../../state/simplifyExtendedColumns';
 import { transformOperatorFilterToWQL } from './transformOperatorFilterToWQL';
 
 export const transformCustomFiltersToWQL = <F extends FiltersMap>(
@@ -17,43 +16,43 @@ export const transformCustomFiltersToWQL = <F extends FiltersMap>(
   filters: RawFilters<F>,
 ) => {
   const transformToWqlMapper: {
-    [key in CustomFieldType]?: (
+    [key in PatternsFieldType]?: (
       filterName: string,
       filterValue: { [P in keyof F]: ExtractFilterValue<F[P]> }[string],
     ) => any[];
   } = {
-    date: transformCustomDateFilterToWQL,
-    dateTime: transformCustomDateFilterToWQL,
-    checkbox: transformCustomCheckboxToWQL,
-    decimal: transformCustomNumberRangeFilterToWQL,
-    integer: transformCustomNumberRangeFilterToWQL,
-    shortText: transformOperatorFilterToWQL,
-    longText: transformOperatorFilterToWQL,
-    url: transformOperatorFilterToWQL,
+    DATE: transformCustomDateFilterToWQL,
+    DATETIME: transformCustomDateFilterToWQL,
+    BOOLEAN: transformCustomCheckboxToWQL,
+    NUMBER: transformCustomNumberRangeFilterToWQL,
+    SHORT_TEXT: transformOperatorFilterToWQL,
+    LONG_TEXT: transformOperatorFilterToWQL,
+    URL: transformOperatorFilterToWQL,
   };
 
+  const fieldsSource = state.toolbar.collectionFieldsSource?.fieldsSource;
+
+  if (!fieldsSource) {
+    return { $and: [] };
+  }
+
   const platformizedFilters = Object.keys(filters).reduce(
     (acc: any[], filterId) => {
       const filterValue = filters[filterId];
-      const currCustomField =
-        state.toolbar.collectionDataExtension?.dataExtension.filterableCustomFields.find(
-          (field: CustomField) => field.id === filterId,
-        );
+      const field = fieldsSource.filterableFields.find(
+        (f: Field) => f.id === filterId,
+      );
 
-      if (!currCustomField || filterValue == null) {
+      if (!field || filterValue == null) {
         return acc;
       }
 
-      const filterName = prefixFieldWithNamespace(
-        currCustomField.id,
-        currCustomField.namespace,
-      );
-
-      const transformToWql = transformToWqlMapper[currCustomField.type];
+      const transformToWql = transformToWqlMapper[field.type];
       if (!transformToWql) {
         return acc;
       }
 
+      const filterName = fieldsSource.queryFieldId(field);
       acc.push(...transformToWql(filterName, filterValue));
 
       return acc;

package/src/components/CustomFieldsWidget/CustomFieldsWidgetCommonComponents.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePageContext, useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldsWidgetState } from '../../state';
-import { DeleteFieldModal } from '../ArchivedItemsPanel/DeleteFieldModal';
+import { DeleteFieldModal } from '../CustomFieldsPanel/DeleteFieldModal';
 
 interface CustomFieldsWidgetCommonComponentsProps {
   state: CustomFieldsWidgetState;
@@ -37,12 +37,10 @@ const _CustomFieldsWidgetCommonComponents = ({
       {CustomFieldModal && (
         <CustomFieldModal state={state.customFieldsPanel.customFieldModal} />
       )}
-      {ArchiveFieldModal && (
+      {ArchiveFieldModal && state.customFieldsPanel.archiveFieldModal && (
         <ArchiveFieldModal state={state.customFieldsPanel.archiveFieldModal} />
       )}
-      {state.dataExtension.deleteFieldModal && (
-        <DeleteFieldModal state={state.dataExtension.deleteFieldModal} />
-      )}
+      <DeleteFieldModal state={state.customFieldsPanel.deleteFieldModal} />
     </>
   );
 };

package/src/components/DataExtension/DataExtension.ts

@@ -1,20 +1,16 @@
 import {
   CollectionPageState,
   DataExtensionOverrides,
+  DataExtensionState,
   FiltersMap,
   WixPatternsContainer,
 } from '@wix/bex-core';
 import { ToolbarCollectionState } from '../../state';
-import { CustomFieldModal } from '../CustomFieldModal';
-import { CustomColumnsFull } from '../CustomColumns';
-import { ArchiveFieldModal } from '../CustomFieldsPanel/ArchiveFieldModal';
-import { CustomColumnsAddCustomFieldCTAButton } from '../CustomFieldsPanel/CustomColumnsAddCustomFieldCTAButton';
-import { CustomColumnsEditCustomFieldCTAButton } from '../CustomFieldsPanel/CustomColumnsEditCustomFieldCTAButton';
-import { ArchivedItemsCTAButton } from '../ArchivedItemsPanel/ArchivedItemsCTAButton';
-import { CollectionDataExtensionState } from './CollectionDataExtensionState';
-import { ReactElement } from 'react';
-import { FileCardList } from '../FileCard/FileCardList';
 import { CustomFieldsCollectionPanelEntry } from '../CustomFieldsPanel/CustomFieldsCollectionPanelEntry';
+import { dataExtensionFieldsSourceFrom } from './dataExtensionFieldsSource';
+import { dataExtensionRendering } from './dataExtensionRendering';
+import { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
+import { ReactElement } from 'react';
 import { MoreActionsItem } from '../MoreActions';
 import { manageCustomFieldsPageAction } from './manageCustomFieldsPageAction';
 
@@ -23,13 +19,6 @@ export type DataExtensionObjectType = {
     toolbar: ToolbarCollectionState<T, F>,
     overrides?: DataExtensionProps,
   ) => void;
-  CustomFieldModal: typeof CustomFieldModal;
-  ArchiveFieldModal: typeof ArchiveFieldModal;
-  FileCardList: typeof FileCardList;
-  CustomColumns: typeof CustomColumnsFull;
-  CustomColumnsAddCustomFieldCTAButton: typeof CustomColumnsAddCustomFieldCTAButton;
-  CustomColumnsEditCustomFieldCTAButton: typeof CustomColumnsEditCustomFieldCTAButton;
-  CustomColumnsArchivedItemsCTAButton: typeof ArchivedItemsCTAButton;
   syncTableCollectionProps: (state: ToolbarCollectionState<any, any>) => void;
   manageCustomFieldsPageAction: (params: {
     pageState: CollectionPageState;
@@ -52,23 +41,39 @@ export type DataExtensionElement = ReactElement<
 export type DataExtensionType = typeof DataExtension;
 
 DataExtension.setDataExtensionOnTable = function (toolbar, overrides) {
-  toolbar.collectionDataExtension ??= new CollectionDataExtensionState({
-    toolbar,
+  if (toolbar.collectionFieldsSource) {
+    return;
+  }
+
+  const dataExtension = new DataExtensionState({
     container: toolbar.container,
-    DataExtension,
-    props: overrides,
-    ...overrides,
+    fqdn: toolbar.collection.fqdn ?? {
+      product: toolbar.collection.queryName,
+    },
+    closeSidePanel: toolbar.closeSidePanel,
+    disableUserDefinedWriting: overrides?.disableUserDefinedWriting,
+    filterable: overrides?.filterable,
+    containsPii: overrides?.containsPii,
+    defaultPermissions: overrides?.defaultPermissions,
+    enableArchive: overrides?.enableArchive,
+  });
+
+  const fieldsSource = dataExtensionFieldsSourceFrom({
+    dataExtension,
+    reportBi: toolbar.reportBi,
+    toExtendedFields: toolbar.collection.toExtendedFields,
+  });
+
+  CollectionFieldsSourceState.setOnTable(toolbar, {
+    fieldsSource,
+    ...dataExtensionRendering({
+      dataExtension,
+      toolbar,
+      DataExtension,
+      props: overrides,
+    }),
   });
 };
-DataExtension.FileCardList = FileCardList;
-DataExtension.CustomFieldModal = CustomFieldModal;
-DataExtension.ArchiveFieldModal = ArchiveFieldModal;
-DataExtension.CustomColumns = CustomColumnsFull;
-DataExtension.CustomColumnsAddCustomFieldCTAButton =
-  CustomColumnsAddCustomFieldCTAButton;
-DataExtension.CustomColumnsEditCustomFieldCTAButton =
-  CustomColumnsEditCustomFieldCTAButton;
-DataExtension.CustomColumnsArchivedItemsCTAButton = ArchivedItemsCTAButton;
 DataExtension.syncTableCollectionProps = (
   state: ToolbarCollectionState<any>,
 ) => {

package/src/components/DataExtension/dataExtensionArchive.ts

@@ -0,0 +1,39 @@
+import type { DataExtensionState, FieldArchive, ReportBI } from '@wix/bex-core';
+
+export interface DataExtensionArchiveParams {
+  dataExtension: DataExtensionState;
+  reportBi: ReportBI;
+}
+
+/**
+ * Adapts DataExtensionState to the source-neutral FieldArchive contract. Used by
+ * the FieldsSource adapter and the archive-field modal.
+ */
+export const dataExtensionArchive = ({
+  dataExtension,
+  reportBi,
+}: DataExtensionArchiveParams): FieldArchive => ({
+  get items() {
+    return dataExtension.archivedItems.map((a) => ({
+      id: a.id,
+      label: a.label,
+      isPii: a.isPii,
+    }));
+  },
+  get shouldDisplay() {
+    return dataExtension.shouldDisplayArchive ?? false;
+  },
+  get isOpen() {
+    return dataExtension.isArchivedPanelOpen;
+  },
+  openPanel: () => dataExtension.openArchivedPanel(),
+  closePanel: () => dataExtension.closeArchivedPanel(),
+  archiveField: async (fieldId, origin) => {
+    await dataExtension.archiveField({ id: fieldId, origin, reportBi });
+  },
+  restoreField: async (fieldId, origin) => {
+    await dataExtension.restoreField({ id: fieldId, origin, reportBi });
+  },
+  fieldName: (fieldId) =>
+    dataExtension.extractFieldValuesFromSchema(fieldId)?.name ?? '',
+});

package/src/components/DataExtension/dataExtensionFieldActions.ts

@@ -0,0 +1,80 @@
+import type { DataExtensionState, CustomFieldOrigin } from '@wix/bex-core';
+import type {
+  CustomFieldsPanelState,
+  FieldActionsMenuBuilder,
+} from '../../state/CustomFields/CustomFieldsPanelState';
+import {
+  buildFieldActionsMenu,
+  type FieldActionsBIContext,
+  type FieldActionHandlers,
+  type FieldActionHandlersConfig,
+  type FieldActionKey,
+} from '../FieldActions';
+
+// DataExtension field menu: edit + archive (one group, no divider).
+const DE_MENU_GROUPS: FieldActionKey[][] = [['editField', 'archive']];
+
+/**
+ * DataExtension's per-field management (edit + archive) as neutral callbacks. A
+ * non-editable field returns null (no menu); an editable field with no write
+ * permission returns a handler-less config with a `disabledTooltip` so the menu
+ * shows a disabled trigger. The shared builder sees only the neutral config.
+ */
+export const dataExtensionFieldActionHandlers =
+  (dataExtension: DataExtensionState, panel: CustomFieldsPanelState) =>
+  ({
+    fieldId,
+    origin,
+  }: {
+    fieldId: string;
+    origin: CustomFieldOrigin;
+    location: string;
+  }): FieldActionHandlersConfig | null => {
+    const cf = dataExtension.availableCustomFields.find(
+      (f) => f.id === fieldId,
+    );
+    if (!cf || !cf.editable || dataExtension.disableUserDefinedWriting) {
+      return null;
+    }
+    if (!dataExtension.hasWritePermissions) {
+      return {
+        handlers: {},
+        disabledTooltip: dataExtension.container.translate(
+          'cairo.customFields.writePermission.tooltip',
+        ),
+      };
+    }
+    const handlers: FieldActionHandlers = {
+      editField: () => panel.openCustomFieldModal({ fieldId, origin }),
+      archive: () =>
+        panel.archiveFieldModal?.modal.open({
+          id: fieldId,
+          origin,
+          fieldName: panel.fieldManagement?.getFieldDraft(fieldId)?.name ?? '',
+          archiveEnabled: dataExtension.enableArchive,
+        }),
+    };
+    return { handlers };
+  };
+
+export const createDataExtensionFieldActionsMenu =
+  (dataExtension: DataExtensionState) =>
+  (panel: CustomFieldsPanelState): FieldActionsMenuBuilder => {
+    const handlers = dataExtensionFieldActionHandlers(dataExtension, panel);
+    return (args) => {
+      const t = panel.container.translate;
+      const bi: FieldActionsBIContext = {
+        reportBi: panel.reportBi,
+        location: args.location,
+        listSize: panel.manageableFields.length,
+      };
+      return buildFieldActionsMenu({
+        fieldId: args.fieldId,
+        config: handlers(args),
+        groups: DE_MENU_GROUPS,
+        translate: t,
+        tooltipContent: t('cairo.custom-columns.more-actions.tooltip'),
+        bi,
+      });
+    };
+  };

package/src/components/DataExtension/dataExtensionFieldManagement.ts

@@ -0,0 +1,176 @@
+import type {
+  CustomField,
+  CustomFieldForm,
+  CustomFieldType,
+  DataExtensionState,
+  FieldDraft,
+  FieldManagement,
+  FieldTypeOption,
+  NonReferenceField,
+  ReportBI,
+  TranslationsKeys,
+} from '@wix/bex-core';
+import { runInAction } from 'mobx';
+
+export const CUSTOM_FIELD_TYPE_TO_PATTERNS: Record<
+  CustomFieldType,
+  NonReferenceField['type']
+> = {
+  shortText: 'SHORT_TEXT',
+  longText: 'LONG_TEXT',
+  url: 'URL',
+  date: 'DATE',
+  dateTime: 'DATETIME',
+  integer: 'NUMBER',
+  decimal: 'NUMBER',
+  checkbox: 'BOOLEAN',
+  dropdown: 'SHORT_TEXT',
+  multiSelect: 'ARRAY',
+  files: 'DOCUMENT',
+};
+
+export const toPatternsFieldType = (
+  type: CustomFieldType,
+): NonReferenceField['type'] =>
+  CUSTOM_FIELD_TYPE_TO_PATTERNS[type] ?? 'UNKNOWN';
+
+const isCustomFieldType = (type: string): type is CustomFieldType =>
+  type in CUSTOM_FIELD_TYPE_TO_PATTERNS;
+
+const CREATABLE_TYPES: readonly {
+  id: CustomFieldType;
+  labelKey: TranslationsKeys;
+  namePlaceholderKey: TranslationsKeys;
+}[] = [
+  {
+    id: 'shortText',
+    labelKey: 'cairo.customFields.fieldType.shortText',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.shortText.Name.placeholder',
+  },
+  {
+    id: 'longText',
+    labelKey: 'cairo.customFields.fieldType.longText',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.longText.Name.placeholder',
+  },
+  {
+    id: 'date',
+    labelKey: 'cairo.customFields.fieldType.date',
+    namePlaceholderKey: 'cairo.customFields.fieldType.date.Name.placeholder',
+  },
+  {
+    id: 'dateTime',
+    labelKey: 'cairo.customFields.fieldType.dateAndTime',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.dateAndTime.Name.placeholder',
+  },
+  {
+    id: 'integer',
+    labelKey: 'cairo.customFields.fieldType.numberInteger',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.numberInteger.Name.placeholder',
+  },
+  {
+    id: 'decimal',
+    labelKey: 'cairo.customFields.fieldType.numberDecimal',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.numberDecimal.Name.placeholder',
+  },
+  {
+    id: 'checkbox',
+    labelKey: 'cairo.customFields.fieldType.checkbox',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.checkbox.Name.placeholder',
+  },
+  {
+    id: 'url',
+    labelKey: 'cairo.customFields.fieldType.url',
+    namePlaceholderKey: 'cairo.customFields.placeholder.url',
+  },
+];
+
+export interface DataExtensionFieldManagementParams {
+  dataExtension: DataExtensionState;
+  reportBi: ReportBI;
+}
+
+export const dataExtensionFieldManagement = ({
+  dataExtension,
+  reportBi,
+}: DataExtensionFieldManagementParams): FieldManagement => {
+  const customFieldFor = (id: string): CustomField | undefined =>
+    dataExtension.availableCustomFields.find((f) => f.id === id);
+
+  const toCustomFieldForm = (draft: FieldDraft): CustomFieldForm => ({
+    ...draft,
+    type: draft.type && isCustomFieldType(draft.type) ? draft.type : undefined,
+  });
+
+  const upsertField = async (draft: FieldDraft) => {
+    const { dataExtensionSchema } =
+      await dataExtension.dataExtensionService.addCustomField({
+        form: toCustomFieldForm(draft),
+        schema: dataExtension.userSchema,
+        fqdn: dataExtension.fqdnString,
+        filterable: dataExtension.filterable,
+      });
+
+    runInAction(() => {
+      if (dataExtensionSchema) {
+        dataExtension._upsertSchema(dataExtensionSchema);
+      }
+    });
+  };
+
+  return {
+    get canAddFields() {
+      return !dataExtension.disableUserDefinedWriting;
+    },
+    get addFieldDisabled() {
+      return dataExtension.disableAddCustomField;
+    },
+    get addFieldDisabledHint() {
+      return dataExtension.disableAddCustomFieldContent || undefined;
+    },
+    canEditField: (field) => customFieldFor(field.id)?.editable ?? false,
+    deleteField: async (fieldId, origin) => {
+      await dataExtension.deleteField({
+        id: fieldId,
+        origin,
+        reportBi,
+      });
+    },
+
+    // Lazy: translate on access (after the container's i18n has loaded), not at
+    // construction — the source is built before `load()` runs initTask, so an
+    // eager map would freeze the raw translation keys.
+    get creatableFieldTypes(): FieldTypeOption[] {
+      const t = dataExtension.container.translate;
+      return CREATABLE_TYPES.map((ft) => ({
+        id: ft.id,
+        label: t(ft.labelKey),
+        namePlaceholder: t(ft.namePlaceholderKey),
+        patternsType: toPatternsFieldType(ft.id),
+      }));
+    },
+    get existingFieldKeys() {
+      // All user fields, not just the available ones: duplicate-key detection
+      // must also catch keys of fields that exist but aren't currently shown.
+      return dataExtension.allUserCustomFields.map((f) => f.id);
+    },
+    get maxReached() {
+      return dataExtension.isReachedMaxCustomFields;
+    },
+    get permissions() {
+      return dataExtension.defaultPermissions;
+    },
+    get supportsPii() {
+      return dataExtension.containsPii;
+    },
+    addField: upsertField,
+    editField: (_fieldId, draft) => upsertField(draft),
+    getFieldDraft: (fieldId) =>
+      dataExtension.extractFieldValuesFromSchema(fieldId),
+  };
+};