@wix/patterns 1.431.0 → 1.433.0

package/src/components/CustomFieldModal/CustomFieldFormV2Permissions.tsx

@@ -0,0 +1,212 @@
+import React, { type ReactNode } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  Box,
+  Cell,
+  Checkbox,
+  InfoIcon,
+  Layout,
+  Text,
+  TextButton,
+} from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { CustomFieldModalState } from '@wix/bex-core';
+import { Trans } from '../Trans';
+
+export interface CustomFieldFormV2PermissionsProps {
+  state: CustomFieldModalState;
+}
+
+interface PermissionCheckbox {
+  dataHook: string;
+  locked: boolean;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+}
+
+const PermissionCheckboxCell = ({
+  dataHook,
+  locked,
+  checked,
+  onChange,
+  label,
+}: PermissionCheckbox & { label: string }) => (
+  <Cell span={2}>
+    <Checkbox
+      dataHook={dataHook}
+      disabled={locked}
+      size="small"
+      onChange={() => onChange(!checked)}
+      checked={checked}
+    >
+      {label}
+    </Checkbox>
+  </Cell>
+);
+
+interface PermissionRowProps {
+  dataHook: string;
+  label: string;
+  tooltip: ReactNode;
+  read: PermissionCheckbox;
+  write: PermissionCheckbox;
+}
+
+/** One audience: who it is, then its read and write checkboxes. Takes plain
+ *  values, so the observer parent stays the one reading the form fields. */
+const PermissionRow = ({
+  dataHook,
+  label,
+  tooltip,
+  read,
+  write,
+}: PermissionRowProps) => {
+  const { translate: t } = useWixPatternsContainer();
+
+  return (
+    <Box dataHook={dataHook}>
+      <Layout>
+        <Cell span={4}>
+          <Box verticalAlign="middle" gap="SP1">
+            <Text size="small">{label}</Text>
+            <InfoIcon size="small" content={tooltip} />
+          </Box>
+        </Cell>
+        <PermissionCheckboxCell
+          {...read}
+          label={t(
+            'cairo.customFields.addCustomField.modal.advancedSettings.read',
+          )}
+        />
+        <PermissionCheckboxCell
+          {...write}
+          label={t(
+            'cairo.customFields.addCustomField.modal.advancedSettings.write',
+          )}
+        />
+      </Layout>
+    </Box>
+  );
+};
+
+export const _CustomFieldFormV2Permissions = (
+  props: CustomFieldFormV2PermissionsProps,
+) => {
+  const { state } = props;
+  const {
+    form: {
+      $: { readApps, readUsers, writeApps, writeUsers },
+    },
+    disabledFields: { permissions },
+    mode,
+  } = state;
+  const defaultPermissions = state.fieldManagement.permissions;
+
+  const {
+    translate: t,
+    environment: { language },
+  } = useWixPatternsContainer();
+
+  const isEdit = mode === 'edit';
+  const showApps = !defaultPermissions?.installedApps?.hide;
+  const showUsers = !defaultPermissions?.siteVisitors?.hide;
+
+  return (
+    <Box direction="vertical" gap="SP2">
+      {(showApps || showUsers) && (
+        <Box>
+          <Text size="tiny" light secondary>
+            {t(
+              'cairo.customFields.addCustomField.modal.advancedSettings.readPermissions.tooltip',
+            )}
+          </Text>
+        </Box>
+      )}
+      {showApps && (
+        <PermissionRow
+          dataHook="custom-field-modal-apps-section"
+          label={t(
+            'cairo.customFields.addCustomField.modal.advancedSettings.externalApps',
+          )}
+          tooltip={
+            <Trans i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.externalApps.tooltip" />
+          }
+          read={{
+            dataHook: 'custom-field-modal-read-apps',
+            locked: isEdit && permissions.read.apps,
+            checked: readApps.value,
+            onChange: readApps.onChange,
+          }}
+          write={{
+            dataHook: 'custom-field-modal-write-apps',
+            locked: isEdit && permissions.write.apps,
+            checked: writeApps.value,
+            onChange: writeApps.onChange,
+          }}
+        />
+      )}
+      {showUsers && (
+        <>
+          <PermissionRow
+            dataHook="custom-field-modal-users-section"
+            label={t(
+              'cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors',
+            )}
+            tooltip={
+              <Trans
+                i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.tooltip"
+                components={{
+                  learnMore: (
+                    <TextButton
+                      underline="always"
+                      skin="light"
+                      size="small"
+                      as="a"
+                      rel="noopener"
+                      target="_blank"
+                      href={`https://support.wix.com/${language}/article/cms-about-datasets`}
+                    />
+                  ),
+                }}
+              />
+            }
+            read={{
+              dataHook: 'custom-field-modal-read-users',
+              locked: isEdit && permissions.read.users,
+              checked: readUsers.value,
+              onChange: readUsers.onChange,
+            }}
+            write={{
+              dataHook: 'custom-field-modal-write-users',
+              locked: isEdit && permissions.write.users,
+              checked: writeUsers.value,
+              onChange: writeUsers.onChange,
+            }}
+          />
+          <Box>
+            <Text size="tiny" light secondary dataHook="permissions-note">
+              <Trans
+                i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.note"
+                components={{
+                  learnMore: (
+                    <TextButton
+                      size="tiny"
+                      as="a"
+                      rel="noopener"
+                      target="_blank"
+                      href={`https://support.wix.com/${language}/article/content-manager-connecting-elements-to-a-collection-using-a-dataset`}
+                    />
+                  ),
+                }}
+              />
+            </Text>
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export const CustomFieldFormV2Permissions = observer(
+  _CustomFieldFormV2Permissions,
+);

package/src/components/CustomFieldModal/CustomFieldModal.tsx

@@ -97,8 +97,10 @@ export const _CustomFieldModal = ({
       secondaryButtonOnClick={() =>
         reportModalEndProcess({ endType: 'Cancel' })
       }
+      showFooterDivider={useV2Form}
+      // V2 has no footnote: whether the toggle row shows is the whole signal.
       footnote={
-        state.fieldManagement.supportsPii ? null : (
+        useV2Form || state.fieldManagement.supportsPii ? null : (
           <Footnote
             language={language}
             reportLearnMoreClick={reportLearnMoreClick}

package/src/components/CustomFieldModal/CustomFieldModal.uni.driver.ts

@@ -1,5 +1,6 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
+  AccordionUniDriver,
   MessageModalLayoutUniDriver,
   DropdownUniDriver,
   FormFieldUniDriver,
@@ -31,6 +32,11 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       body.$('[data-hook="custom-field-modal-settings-button"]'),
       body,
     );
+  const getSettingsAccordion = () =>
+    AccordionUniDriver(
+      body.$('[data-hook="custom-field-modal-settings-accordion"]'),
+      body,
+    );
   const getErrorStateNotification = () =>
     FloatingNotificationUniDriver(
       body.$('[data-hook="custom-field-modal-error-state"]'),
@@ -59,6 +65,10 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       .getSecondaryButtonDriver()
       .then((driver: any) => driver.click());
   const clickAdvancedSettings = () => getSettingsButton().click();
+  const isSettingsVisible = () => getSettingsAccordion().exists();
+  const getSettingsLabel = () => getSettingsAccordion().getItemTitleAt(0);
+  const isSettingsExpanded = () => getSettingsAccordion().isItemExpandedAt(0);
+  const clickSettings = () => getSettingsAccordion().clickItemAt(0);
   const isSubmitting = () => getLoader().exists();
 
   const getFormTypeDriver = () =>
@@ -239,6 +249,10 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     clickClose,
     clickCancel,
     clickAdvancedSettings,
+    isSettingsVisible,
+    getSettingsLabel,
+    isSettingsExpanded,
+    clickSettings,
     searchFieldType,
     getFieldTypeOptions,
     isInstalledAppsSectionVisible: () => getInstalledAppsSection().exists(),

package/src/components/CustomFieldModal/CustomFieldTypeDropdownV2.tsx

@@ -21,7 +21,7 @@ export const _CustomFieldTypeDropdownV2 = (
   const {
     state: {
       form: {
-        $: { type, name },
+        $: { type, name, containsPii },
       },
       mode,
       fieldManagement: { creatableFieldTypes },
@@ -57,8 +57,6 @@ export const _CustomFieldTypeDropdownV2 = (
         label: option.label,
       });
 
-    // While searching the list is flat — group headers would name groups whose
-    // other options have been filtered out.
     if (query) {
       return creatableFieldTypes
         .filter((option) => option.label.toLowerCase().includes(query))
@@ -80,7 +78,7 @@ export const _CustomFieldTypeDropdownV2 = (
     const grouped = groups.flatMap((label) => [
       listItemSectionBuilder({
         id: `custom-field-modal-type-group-${label}`,
-        type: 'title',
+        type: 'subheader',
         title: label,
       }),
       ...creatableFieldTypes
@@ -102,10 +100,13 @@ export const _CustomFieldTypeDropdownV2 = (
       prefix={
         search === null && selectedType ? (
           <Input.IconAffix>
-            {getFieldTypeIcon({
-              fieldType: selectedType.patternsType,
-              size: 'medium',
-            })}
+            {/* WDS paints input affix icons blue; the type icons stay dark. */}
+            <Box color="D10">
+              {getFieldTypeIcon({
+                fieldType: selectedType.patternsType,
+                size: 'medium',
+              })}
+            </Box>
           </Input.IconAffix>
         ) : undefined
       }
@@ -113,10 +114,12 @@ export const _CustomFieldTypeDropdownV2 = (
       onSelect={({ id }) => {
         setSearch(null);
         type.onChange(String(id));
+        // Read off `props.state` — a destructured computed holds the pre-change value.
+        if (!props.state.typeSupportsPii) {
+          containsPii.onChange(false);
+        }
         setKeyFieldIfNotDirty(generateUniqueKey(name.value));
       }}
-      // Closing without picking anything drops the search text so the input goes
-      // back to showing the selected type.
       onClose={() => setSearch(null)}
       popoverProps={{ appendTo: 'window', zIndex: 5001 }}
       placeholder={t(

package/src/components/CustomFieldsPanel/FieldManagementModals.tsx

@@ -1,21 +1,16 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import type { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
+import type { ManageFieldsSource } from '../../state/ManageFieldsSource';
 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.
+ * The source supplies the modal states; the modals themselves are the same
+ * platform components regardless of which source is behind them.
  */
-function _FieldManagementModals({
-  source,
-}: {
-  source: CollectionFieldsSourceState;
-}) {
+function _FieldManagementModals({ source }: { source: ManageFieldsSource }) {
   const { customFieldModal, archiveFieldModal, deleteFieldModal } =
     source.customFieldsPanel;
   return (

package/src/components/CustomFieldsPanel/FieldsSourceAddFieldCTA.tsx

@@ -2,15 +2,11 @@ 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 type { ManageFieldsSource } from '../../state/ManageFieldsSource';
 import { CustomFieldsDisabledHint } from '../CustomFields';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
-function _FieldsSourceAddFieldCTA({
-  source,
-}: {
-  source: CollectionFieldsSourceState;
-}) {
+function _FieldsSourceAddFieldCTA({ source }: { source: ManageFieldsSource }) {
   const { translate: t } = useWixPatternsContainer();
   const isHarmonyTheme = useBmHarmonyTheme();
   const fm = source.fieldsSource.fieldManagement;

package/src/components/DataExtension/dataExtensionFieldManagement.ts

@@ -165,6 +165,7 @@ export const dataExtensionFieldManagement = ({
     get permissions() {
       return dataExtension.defaultPermissions;
     },
+    supportsPermissions: true,
     get supportsPii() {
       return dataExtension.containsPii;
     },
@@ -173,6 +174,9 @@ export const dataExtensionFieldManagement = ({
       return {
         addTitle: t('cairo.customFields.addCustomField.modal.title'),
         editTitle: t('cairo.customFields.editCustomField.modal.title'),
+        settingsLabel: t(
+          'cairo.customFields.addCustomField.modal.advancedSettings.readPermissions',
+        ),
         addSubtitle: {
           text: t('cairo.customFields.addCustomField.modal.subtitle'),
           note: t('cairo.customFields.addCustomField.modal.subtitle.note'),

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

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

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1018921301";
+var _namespace_ = "EditableCell2760915353";
 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":"EditableCell1018921301__root","validationIndicator":"EditableCell1018921301__validationIndicator"};
+export var classes = {"root":"EditableCell2760915353__root","validationIndicator":"EditableCell2760915353__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableTable.tsx

@@ -23,6 +23,7 @@ import { AddItemRow } from './AddItemRow';
 import { useAddRow } from './useAddRow';
 import type { TableColumn } from '../../model';
 import { useHeaderActions } from './useHeaderActions';
+import { version as cairoVersion } from '../../version';
 
 export interface EditableTableProps<
   T,
@@ -115,6 +116,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
       <div
         ref={containerRef}
         data-hook={dataHook}
+        data-wix-patterns={cairoVersion}
         tabIndex={0}
         onKeyDown={keyboard.onKeyDown}
         onFocus={onFocus}