@wix/patterns 1.422.0 → 1.424.0

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, Dropdown, listItemSelectBuilder } from '@wix/design-system';
-import { CustomFieldModalState, CustomFieldType } from '@wix/bex-core';
+import { CustomFieldModalState } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 
@@ -18,6 +18,7 @@ export const _CustomFieldTypeDropdown = (
         $: { type, name },
       },
       mode,
+      fieldManagement: { creatableFieldTypes },
       generateUniqueKey,
       setKeyFieldIfNotDirty,
     },
@@ -25,107 +26,26 @@ export const _CustomFieldTypeDropdown = (
 
   const { translate: t } = useWixPatternsContainer();
 
-  const [fieldTypeOptions] = React.useState(() => [
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-shortText',
-      id: 'shortText',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'SHORT_TEXT', size: 'medium' })}
-        </Box>
+  const fieldTypeOptions = React.useMemo(
+    () =>
+      creatableFieldTypes.map((option) =>
+        listItemSelectBuilder({
+          dataHook: `custom-field-modal-type-${option.id}`,
+          id: option.id,
+          prefix: (
+            <Box>
+              {getFieldTypeIcon({
+                fieldType: option.patternsType,
+                size: 'medium',
+              })}
+            </Box>
+          ),
+          title: option.label,
+          label: option.label,
+        }),
       ),
-      title: t('cairo.customFields.fieldType.shortText'),
-      label: t('cairo.customFields.fieldType.shortText'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-longText',
-      id: 'longText',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'LONG_TEXT', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.longText'),
-      label: t('cairo.customFields.fieldType.longText'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-date',
-      id: 'date',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'DATE', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.date'),
-      label: t('cairo.customFields.fieldType.date'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-dateTime',
-      id: 'dateTime',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'DATE_TIME', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.dateAndTime'),
-      label: t('cairo.customFields.fieldType.dateAndTime'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-integer',
-      id: 'integer',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'INTEGER', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.numberInteger'),
-      label: t('cairo.customFields.fieldType.numberInteger'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-decimal',
-      id: 'decimal',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'DECIMAL', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.numberDecimal'),
-      label: t('cairo.customFields.fieldType.numberDecimal'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-checkbox',
-      id: 'checkbox',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'CHECKBOX', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.checkbox'),
-      label: t('cairo.customFields.fieldType.checkbox'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-url',
-      id: 'url',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'URL', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.url'),
-      label: t('cairo.customFields.fieldType.url'),
-    }),
-    /* listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-dropdown',
-      id: 'dropdown',
-      prefix: (
-        <Box>
-          <DropdownIcon />
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.dropdownList'),
-      label: t('cairo.customFields.fieldType.dropdownList'),
-    }),*/
-  ]);
+    [creatableFieldTypes],
+  );
 
   return (
     <Dropdown
@@ -134,7 +54,7 @@ export const _CustomFieldTypeDropdown = (
       valueParser={(option) => option.label}
       selectedId={type.value}
       onSelect={({ id }) => {
-        type.onChange(id as CustomFieldType);
+        type.onChange(String(id));
         setKeyFieldIfNotDirty(generateUniqueKey(name.value));
       }}
       popoverProps={{ appendTo: 'window', zIndex: 5001 }}

package/src/components/CustomFieldsPanel/AddCustomFieldCTAButton.tsx

@@ -19,14 +19,14 @@ function _AddCustomFieldCTAButton({
   const container = useWixPatternsContainer();
   const { translate: t } = container;
 
-  if (state.dataExtension.disableUserDefinedWriting) {
+  if (!state.fieldManagement?.canAddFields) {
     return null;
   }
 
   return (
     <CustomFieldsDisabledHint
-      disabled={state.dataExtension.disableAddCustomField}
-      content={state.dataExtension.disableAddCustomFieldContent}
+      disabled={state.fieldManagement?.addFieldDisabled}
+      content={state.fieldManagement?.addFieldDisabledHint ?? ''}
     >
       <AddItem dataHook={dataHook} onClick={onClick}>
         {t('cairo.customFields.addCustomField.CTA')}

package/src/components/CustomFieldsPanel/ArchiveFieldModal.tsx

@@ -12,23 +12,20 @@ export const _ArchiveFieldModal = ({
 }) => {
   const container = useWixPatternsContainer();
   const { translate: t } = container;
-  const { dataExtension, modal } = state;
+  const { modal } = state;
 
   const getModalTitle = () => {
-    const fieldId = modal.value?.id;
-    if (dataExtension.enableArchive && fieldId) {
-      const fieldValues = dataExtension.extractFieldValuesFromSchema(fieldId);
-      if (fieldValues?.name) {
-        return t('cairo.customFields.archive.modal.title.enabled', {
-          selectedField: fieldValues.name,
-        });
-      }
+    const fieldName = modal.value?.fieldName;
+    if (modal.value?.archiveEnabled && fieldName) {
+      return t('cairo.customFields.archive.modal.title.enabled', {
+        selectedField: fieldName,
+      });
     }
     return t('cairo.customFields.archive.modal.title');
   };
 
   const getModalDescription = () => {
-    if (dataExtension.enableArchive) {
+    if (modal.value?.archiveEnabled) {
       return t('cairo.customFields.archive.modal.description.enabled');
     }
     return t('cairo.customFields.archive.modal.description');

package/src/components/CustomFieldsPanel/CustomFieldItem.tsx

@@ -1,12 +1,12 @@
 import { Box, TableListItem, Text } from '@wix/design-system';
 import React, { CSSProperties, useMemo } from 'react';
 import { observer } from 'mobx-react-lite';
-import { CustomField } from '@wix/bex-core';
-import { ManageFieldsPopoverMenu } from './ManageFieldsPopoverMenu';
+import { Field } from '@wix/bex-core';
+import { FieldActionsPopover } from '../FieldActions';
 import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';
 
 export interface CustomFieldItemProps {
-  field: CustomField;
+  field: Field;
   showDivider?: boolean;
   state: CustomFieldsPanelState;
 }
@@ -23,6 +23,12 @@ function _CustomFieldItem(props: CustomFieldItemProps) {
     [],
   );
 
+  const menuConfig = state.fieldActionsMenu({
+    fieldId: field.id,
+    origin: 'Custom fields panel',
+    location: 'Manage custom fields action cell',
+  });
+
   return (
     <div style={style} data-hook={`custom-field-${field.id}`}>
       <TableListItem
@@ -38,7 +44,7 @@ function _CustomFieldItem(props: CustomFieldItemProps) {
                     wordBreak: 'break-word',
                   }}
                 >
-                  <Text size="small">{field.label || field.id}</Text>
+                  <Text size="small">{field.displayName || field.id}</Text>
                 </div>
               </Box>
             ),
@@ -46,12 +52,7 @@ function _CustomFieldItem(props: CustomFieldItemProps) {
           {
             value: (
               <Box height="24px">
-                <ManageFieldsPopoverMenu
-                  origin="Custom fields panel"
-                  state={state}
-                  id={field.id}
-                  location="Manage custom fields action cell"
-                />
+                {menuConfig ? <FieldActionsPopover {...menuConfig} /> : null}
               </Box>
             ),
             align: 'right',

package/src/components/CustomFieldsPanel/CustomFieldPopover.uni.driver.ts

@@ -4,26 +4,24 @@ import { DisabledTooltipButtonUniDriver } from '../DisabledTooltip/DisabledToolt
 
 export function CustomFieldPopoverUniDriver(base: UniDriver, body: UniDriver) {
   const customFieldPopoverDriverBase = () =>
-    base.$('[data-hook="custom-field-options"]');
+    base.$('[data-hook="field-actions-menu"]');
 
   const customFieldPopoverDriver = () =>
     PopoverMenuUniDriver(customFieldPopoverDriverBase(), body);
 
   const customFieldOptionsTrigger = () =>
     DisabledTooltipButtonUniDriver(base, body, {
-      dataHook: 'custom-field-options-icon-button',
+      dataHook: 'field-actions-menu-button',
     });
 
   const getCustomFieldOptionsAt = () => {
     return {
       open: () => customFieldOptionsTrigger().click(),
       clickEdit: () =>
-        customFieldPopoverDriver().clickAtChildByDataHook(
-          'custom-field-options-edit',
-        ),
+        customFieldPopoverDriver().clickAtChildByDataHook('field-action-edit'),
       clickArchive: () =>
         customFieldPopoverDriver().clickAtChildByDataHook(
-          'custom-field-options-archive',
+          'field-action-archive',
         ),
     };
   };

package/src/components/CustomFieldsPanel/CustomFieldsCollectionPanelEntry.tsx

@@ -4,10 +4,9 @@ import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 
 export function CustomFieldsCollectionPanelEntry() {
   const toolbar = useToolbarCollectionContext();
-
-  return (
-    <CustomFieldsPanel
-      state={toolbar.collectionDataExtension!.customFieldsPanel}
-    />
-  );
+  const state = toolbar.collectionFieldsSource?.customFieldsPanel;
+  if (!state) {
+    return null;
+  }
+  return <CustomFieldsPanel state={state} />;
 }

package/src/components/CustomFieldsPanel/CustomFieldsList.tsx

@@ -1,4 +1,4 @@
-import { CustomField } from '@wix/bex-core';
+import { Field } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback } from 'react';
 import { CustomFieldItem } from './CustomFieldItem';
@@ -13,7 +13,7 @@ function _CustomFieldsList(props: CustomFieldsListProps) {
   const { state } = props;
 
   const renderItem = useCallback(
-    (field: CustomField, index: number, array: CustomField[]) => {
+    (field: Field, index: number, array: Field[]) => {
       return (
         <CustomFieldItem
           state={state}
@@ -32,7 +32,7 @@ function _CustomFieldsList(props: CustomFieldsListProps) {
       dataHook="custom-fields-list"
       backgroundColor="D60"
     >
-      {state.dataExtension.availableUserCustomFields.map(renderItem)}
+      {state.manageableFields.map(renderItem)}
     </Box>
   );
 }

package/src/components/CustomFieldsPanel/CustomFieldsPanel.tsx

@@ -1,7 +1,7 @@
 import { withoutDefaults } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useRafRender } from '../../hooks/useRafRender';
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { Box, Divider, SidePanel } from '@wix/design-system';
 import { ScrollableContent } from '../ScrollableContent';
 import { observer } from 'mobx-react-lite';
@@ -10,7 +10,14 @@ import { AddCustomFieldCTAButton } from './AddCustomFieldCTAButton';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
-import { DataExtension } from '../DataExtension/DataExtension';
+
+// Lazy: the archive CTA loads only for sources that archive, so sources that
+// don't (e.g. a schema) never pull it into their bundle.
+const ArchivedItemsCTAButton = lazy(() =>
+  import('../ArchivedItemsPanel/ArchivedItemsCTAButton').then((m) => ({
+    default: m.ArchivedItemsCTAButton,
+  })),
+);
 
 export interface CustomFieldsPanelProps {
   state: CustomFieldsPanelState;
@@ -48,12 +55,15 @@ export function _CustomFieldsPanel({ state }: CustomFieldsPanelProps) {
         overflowY
         dataHook="custom-fields-panel-scroll-container"
       >
-        {state.dataExtension?.shouldDisplayArchive && (
-          <DataExtension.CustomColumnsArchivedItemsCTAButton
-            dataExtension={state.dataExtension}
-            onCloseSidePanel={() => state.closeSidePanel?.()}
-            dataHook="custom-fields"
-          />
+        {state.archive?.shouldDisplay && (
+          <Suspense fallback={null}>
+            <ArchivedItemsCTAButton
+              archive={state.archive}
+              deleteFieldModal={state.deleteFieldModal}
+              onCloseSidePanel={() => state.closeSidePanel?.()}
+              dataHook="custom-fields"
+            />
+          </Suspense>
         )}
         <CustomFieldsList state={state} />
       </ScrollableContent>

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} />
     </>
   );
 };