@wix/patterns 1.422.0 → 1.424.0

package/src/components/DataExtension/CollectionDataExtensionState.ts

@@ -1,229 +0,0 @@
-import {
-  addEventListener,
-  WixPatternsContainer,
-  WixPatternsError,
-  DataExtensionState,
-  FiltersMap,
-  TaskState,
-  withoutDefaults,
-  dateRangeFilter,
-  CustomField,
-  DataExtensionOverrides,
-  FilterStateBaseParams,
-  idNameArrayFilter,
-  Filter,
-  CustomFieldType,
-  numberRangeFilter,
-  stringOperatorFilter,
-  STRING_OPERATORS,
-} from '@wix/bex-core';
-import { ToolbarCollectionState } from '../../state';
-import { DataExtensionProps, DataExtensionType } from './DataExtension';
-import {
-  cairoErrorInLoadingAComponent,
-  cairoTryAgainClicked,
-} from '@wix/bex-core/bi';
-import { buildCustomFieldFilterElement } from '../CustomFieldFilters';
-import {
-  CollectionToolbarFilters,
-  FilterElement,
-} from '../CollectionToolbarFilters';
-import { reaction } from 'mobx';
-import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';
-import { MoreActionItemFactory } from '../MoreActions/MoreActionsBase';
-
-export interface CollectionDataExtensionStateParams<T, F extends FiltersMap>
-  extends DataExtensionOverrides {
-  container: WixPatternsContainer;
-  toolbar: ToolbarCollectionState<T, F>;
-  DataExtension: DataExtensionType;
-  props?: DataExtensionProps;
-}
-
-export class CollectionDataExtensionState<T, F extends FiltersMap> {
-  readonly dataExtension;
-  readonly customFieldsPanel;
-  readonly toolbar;
-  readonly DataExtension;
-  readonly initTask = new TaskState();
-  readonly components;
-  readonly props;
-
-  get featuredPageActions(): MoreActionItemFactory[] {
-    return [this.DataExtension.manageCustomFieldsPageAction];
-  }
-
-  constructor(params: CollectionDataExtensionStateParams<T, F>) {
-    this.toolbar = params.toolbar;
-    this.props = params.props;
-    this.DataExtension = params.DataExtension;
-    this.dataExtension = new DataExtensionState({
-      container: params.container,
-      fqdn: params.toolbar.collection.fqdn ?? {
-        product: params.toolbar.collection.queryName,
-      },
-      closeSidePanel: params.toolbar.closeSidePanel,
-      disableUserDefinedWriting: params.disableUserDefinedWriting,
-      filterable: params.filterable,
-      containsPii: params.containsPii,
-      defaultPermissions: params.defaultPermissions,
-      enableArchive: params.enableArchive,
-    });
-
-    this.customFieldsPanel = new CustomFieldsPanelState({
-      dataExtension: this.dataExtension,
-      reportBi: this.toolbar.reportBi,
-      closeSidePanel: this.toolbar.closeSidePanel,
-    });
-    this.components = {
-      CollectionToolbarFilters,
-    };
-  }
-
-  _getFetchSchemasError(err: unknown) {
-    return new WixPatternsError({
-      errorCode: 'InitCustomFieldsDataExtensionFailed',
-      originalException: err,
-    });
-  }
-
-  _handleFetchSchemasError() {
-    const error = this.dataExtension.initTask.status.error;
-
-    if (!error) {
-      return;
-    }
-
-    const cairoError = this._getFetchSchemasError(error);
-    this.dataExtension.container.showToast?.({
-      message: this.dataExtension.container.translate(
-        'cairo.customFields.fetch.technicalError',
-      ),
-      action: {
-        uiType: 'LINK',
-        text: this.dataExtension.container.translate('cairo.toast.retry'),
-        onClick: () => {
-          this.toolbar.reportBi(
-            withoutDefaults(cairoTryAgainClicked)({
-              actionName: 'Fetch extended fields',
-              loaction: 'toast',
-            }),
-          );
-          this.dataExtension
-            .fetchSchemas()
-            .catch(this._handleFetchSchemasError.bind(this));
-        },
-        removeToastOnClick: true,
-      },
-      type: 'WARNING',
-      biName: 'cairo-fetch-schemas-error-toast',
-    });
-
-    this.dataExtension.container.internalMonitor.reportError({
-      error: cairoError,
-    });
-
-    this.toolbar.reportBi(
-      cairoErrorInLoadingAComponent({
-        errorType: cairoError.name,
-      }),
-    );
-  }
-
-  _addCustomFieldFilters() {
-    const createStringFilter = (params: Partial<FilterStateBaseParams<any>>) =>
-      stringOperatorFilter({
-        ...params,
-        allowedOperators: STRING_OPERATORS,
-      });
-
-    const customFieldFilter: {
-      [key in CustomFieldType]?: (
-        params: Partial<FilterStateBaseParams<any>>,
-      ) => Filter<any>;
-    } = {
-      date: dateRangeFilter,
-      dateTime: dateRangeFilter,
-      checkbox: idNameArrayFilter,
-      decimal: numberRangeFilter,
-      integer: numberRangeFilter,
-      shortText: createStringFilter,
-      url: createStringFilter,
-      longText: createStringFilter,
-    };
-
-    this.dataExtension.filterableCustomFields.forEach(
-      (customField: CustomField) => {
-        const filter = customFieldFilter[customField.type];
-
-        if (!filter) {
-          return;
-        }
-
-        this.toolbar.collection.query.addFilterIfNeeded(
-          customField.id as any,
-          filter({
-            name: customField.id,
-            isCustomField: true,
-          }),
-        );
-      },
-    );
-  }
-
-  init() {
-    const { initTask, dataExtension, toolbar } = this;
-    const { customColumnsState } = toolbar;
-
-    const disposers = [
-      dataExtension.init(),
-      reaction(
-        () => this.dataExtension.filterableCustomFields,
-        () => this._addCustomFieldFilters(),
-      ),
-      ...(customColumnsState?.events
-        ? [
-            addEventListener(
-              customColumnsState.events,
-              'beforeInitialFetch',
-              () => initTask.status.promise,
-            ),
-          ]
-        : []),
-    ];
-
-    initTask.runOnce(async () => {
-      dataExtension.initTask.runOnce();
-      dataExtension.container.initTask.runOnce();
-
-      await Promise.all([
-        dataExtension.initTask.status.promise?.catch(() => {}),
-        dataExtension.container.initTask.status.promise,
-      ]);
-
-      this._handleFetchSchemasError();
-      // Add custom field filters BEFORE initTask completes so collection waits for them
-      this._addCustomFieldFilters();
-      toolbar.setNewExtendedColumns(dataExtension.availableCustomFields, {
-        defaultHidden: true,
-      });
-    });
-
-    return () => {
-      disposers.forEach((d) => d?.());
-    };
-  }
-
-  buildCustomFieldFilterWrapper(customField: CustomField) {
-    return (buildCustomFieldFilterElement(this.toolbar, customField) ||
-      undefined) as FilterElement;
-  }
-
-  buildCustomFieldFilters() {
-    return this.dataExtension.filterableCustomFields
-      .map((customField: CustomField) =>
-        this.buildCustomFieldFilterWrapper(customField),
-      )
-      .filter(Boolean);
-  }
-}

package/src/components/ExtendedColumn/ExtendedColumn.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-import { Box, Text, TextButton } from '@wix/design-system';
-import { Confirm, Minus } from '@wix/wix-ui-icons-common';
-import { CustomFieldType } from '@wix/bex-core';
-import { useWixPatternsContainer } from '@wix/bex-core/react';
-import { observer } from 'mobx-react-lite';
-import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
-import { getDateWithoutTimezone } from '../../utils/datesUtil';
-
-export interface ExtendedColumnProps {
-  value?: any;
-  type: CustomFieldType;
-}
-
-function _ExtendedColumn(props: ExtendedColumnProps) {
-  const { dateFormatters } = useWixPatternsContainer();
-  const { collectionDataExtension } = useToolbarCollectionContext();
-  switch (props.type) {
-    case 'shortText':
-      return (
-        <Text size="small" ellipsis maxLines={1}>
-          {props.value}
-        </Text>
-      );
-    case 'date':
-      return (
-        <Text size="small" ellipsis maxLines={1}>
-          {props.value &&
-            dateFormatters.medium.format(getDateWithoutTimezone(props.value))}
-        </Text>
-      );
-    case 'dateTime':
-      return (
-        <Text size="small" ellipsis maxLines={1}>
-          {props.value &&
-            dateFormatters.mediumTime.format(new Date(props.value))}
-        </Text>
-      );
-    case 'checkbox':
-      return (
-        <Box
-          align="center"
-          verticalAlign="middle"
-          color={props.value ? 'G10' : 'D10'}
-        >
-          {props.value ? <Confirm /> : <Minus />}
-        </Box>
-      );
-    case 'longText':
-      return (
-        <Text size="small" ellipsis maxLines={3}>
-          {props.value}
-        </Text>
-      );
-    case 'url':
-      return (
-        <TextButton
-          as="a"
-          rel="noopener"
-          target="_blank"
-          href={props.value}
-          ellipsis
-        >
-          {props.value}
-        </TextButton>
-      );
-    case 'files': {
-      if (!props.value || !collectionDataExtension) {
-        return null;
-      }
-      const files = Array.isArray(props.value) ? props.value : [props.value];
-      return (
-        <collectionDataExtension.DataExtension.FileCardList files={files} />
-      );
-    }
-    case 'dropdown':
-      return (
-        <Text size="small" ellipsis maxLines={1}>
-          {props.value}
-        </Text>
-      );
-    case 'multiSelect':
-      return (
-        <Text size="small" ellipsis maxLines={1}>
-          {props.value?.join(', ')}
-        </Text>
-      );
-    case 'integer':
-    case 'decimal':
-    default:
-      return (
-        <Text size="small" ellipsis maxLines={1}>
-          {props.value}
-        </Text>
-      );
-  }
-}
-
-export const ExtendedColumn = observer(_ExtendedColumn);

package/src/state/FieldActionsState.ts

@@ -1,227 +0,0 @@
-import { action, computed, makeObservable, observable } from 'mobx';
-import { ConditionalModalState, TaskState } from '@wix/bex-core';
-import type {
-  RemoveToast,
-  ShowToast,
-  ToastConfig,
-  Translate,
-} from '@wix/bex-core';
-import type { MessageModalLayoutProps } from '@wix/design-system';
-import type { FieldActions } from '../types/SchemaConfig';
-import type { FieldActionPermissions } from '../components/FieldActions';
-
-export class FieldActionsState {
-  handlers: FieldActions | undefined;
-  permissions: FieldActionPermissions | undefined;
-  readonly translate: Translate;
-  readonly showToast: ShowToast | undefined;
-  private _refresh: (() => Promise<void>) | undefined;
-
-  private _currentToastRemove: RemoveToast | undefined;
-
-  readonly confirmModal = new ConditionalModalState<
-    Partial<MessageModalLayoutProps>
-  >();
-  readonly deleteTask = new TaskState<unknown>();
-  readonly makePrimaryTask = new TaskState<unknown>();
-  readonly duplicateTask = new TaskState<unknown>();
-  readonly duplicateWithContentTask = new TaskState<unknown>();
-
-  constructor(
-    translate: Translate,
-    handlers?: FieldActions,
-    permissions?: FieldActionPermissions,
-    showToast?: ShowToast,
-    refresh?: () => Promise<void>,
-  ) {
-    this.translate = translate;
-    this.handlers = handlers;
-    this.permissions = permissions;
-    this.showToast = showToast;
-    this._refresh = refresh;
-    makeObservable(this, {
-      handlers: observable.ref,
-      permissions: observable.ref,
-      setHandlers: action,
-      setPermissions: action,
-      setRefresh: action,
-      confirmDelete: action,
-      makePrimary: action,
-      duplicate: action,
-      duplicateWithContent: action,
-      isMakingPrimary: computed,
-      isDuplicating: computed,
-      isDuplicatingWithContent: computed,
-    });
-  }
-
-  setHandlers(handlers: FieldActions | undefined) {
-    this.handlers = handlers;
-  }
-
-  setPermissions(permissions: FieldActionPermissions | undefined) {
-    this.permissions = permissions;
-  }
-
-  setRefresh(refresh: (() => Promise<void>) | undefined) {
-    this._refresh = refresh;
-  }
-
-  get isMakingPrimary() {
-    return this.makePrimaryTask.status.isLoading;
-  }
-
-  get isDuplicating() {
-    return this.duplicateTask.status.isLoading;
-  }
-
-  get isDuplicatingWithContent() {
-    return this.duplicateWithContentTask.status.isLoading;
-  }
-
-  private _showToast = (config: ToastConfig) => {
-    if (!this.showToast) {
-      return;
-    }
-    this._currentToastRemove?.();
-    this._currentToastRemove = this.showToast(config).remove;
-  };
-
-  private _withRefresh = async (operation: () => Promise<unknown>) => {
-    await operation();
-    await this._refresh?.();
-  };
-
-  confirmDelete(fieldId: string) {
-    const deleteField = this.handlers?.deleteField;
-    if (!deleteField) {
-      return;
-    }
-    const t = this.translate;
-    this.confirmModal.open({
-      theme: 'destructive',
-      title: t('cairo.deleteModal.title'),
-      content: t('cairo.deleteModal.body'),
-      primaryButtonText: t('cairo.delete.button'),
-      secondaryButtonText: t('cairo.cancel.button'),
-      primaryButtonOnClick: () => {
-        this._runDelete(fieldId, deleteField);
-      },
-    });
-  }
-
-  async makePrimary(fieldId: string) {
-    const makePrimary = this.handlers?.makePrimary;
-    if (!makePrimary || this.makePrimaryTask.status.isLoading) {
-      return;
-    }
-    await this.makePrimaryTask.run(() =>
-      this._withRefresh(() => makePrimary(fieldId)),
-    );
-    if (this.makePrimaryTask.status.isSuccess) {
-      this._showToast({
-        type: 'SUCCESS',
-        message: 'Primary field updated',
-        biName: 'cairo-field-action-make-primary-success',
-      });
-    } else if (this.makePrimaryTask.status.isError) {
-      this._showToast({
-        type: 'ERROR',
-        message: "Couldn't update primary field",
-        biName: 'cairo-field-action-make-primary-error',
-        action: {
-          text: 'Try again',
-          onClick: () => this.makePrimary(fieldId),
-          removeToastOnClick: true,
-        },
-      });
-    }
-  }
-
-  async duplicate(fieldId: string) {
-    const duplicateField = this.handlers?.duplicateField;
-    if (!duplicateField || this.duplicateTask.status.isLoading) {
-      return;
-    }
-    await this.duplicateTask.run(() =>
-      this._withRefresh(() => duplicateField(fieldId)),
-    );
-    if (this.duplicateTask.status.isSuccess) {
-      this._showToast({
-        type: 'SUCCESS',
-        message: 'Field duplicated',
-        biName: 'cairo-field-action-duplicate-success',
-      });
-    } else if (this.duplicateTask.status.isError) {
-      this._showToast({
-        type: 'ERROR',
-        message: "Couldn't duplicate field",
-        biName: 'cairo-field-action-duplicate-error',
-        action: {
-          text: 'Try again',
-          onClick: () => this.duplicate(fieldId),
-          removeToastOnClick: true,
-        },
-      });
-    }
-  }
-
-  async duplicateWithContent(fieldId: string) {
-    const duplicateFieldWithContent = this.handlers?.duplicateFieldWithContent;
-    if (
-      !duplicateFieldWithContent ||
-      this.duplicateWithContentTask.status.isLoading
-    ) {
-      return;
-    }
-    await this.duplicateWithContentTask.run(() =>
-      this._withRefresh(() => duplicateFieldWithContent(fieldId)),
-    );
-    if (this.duplicateWithContentTask.status.isSuccess) {
-      this._showToast({
-        type: 'SUCCESS',
-        message: 'Field duplicated with content',
-        biName: 'cairo-field-action-duplicate-with-content-success',
-      });
-    } else if (this.duplicateWithContentTask.status.isError) {
-      this._showToast({
-        type: 'ERROR',
-        message: "Couldn't duplicate field with content",
-        biName: 'cairo-field-action-duplicate-with-content-error',
-        action: {
-          text: 'Try again',
-          onClick: () => this.duplicateWithContent(fieldId),
-          removeToastOnClick: true,
-        },
-      });
-    }
-  }
-
-  private _runDelete = async (
-    fieldId: string,
-    deleteField: (id: string) => Promise<unknown>,
-  ) => {
-    await this.deleteTask.run(() =>
-      this._withRefresh(() => deleteField(fieldId)),
-    );
-    if (this.deleteTask.status.isSuccess) {
-      this.confirmModal.close();
-      this._showToast({
-        type: 'SUCCESS',
-        message: 'Field deleted',
-        biName: 'cairo-field-action-delete-success',
-      });
-    } else if (this.deleteTask.status.isError) {
-      this._showToast({
-        type: 'ERROR',
-        message: "Couldn't delete field",
-        biName: 'cairo-field-action-delete-error',
-        action: {
-          text: 'Try again',
-          onClick: () => this._runDelete(fieldId, deleteField),
-          removeToastOnClick: true,
-        },
-      });
-    }
-  };
-}