@wix/patterns 1.434.0 → 1.437.0

package/dist/cjs/components/CustomFieldModal/CustomFieldForm.js

@@ -6,15 +6,18 @@ var _react = _interopRequireWildcard(require("react"));
 var _mobxReactLite = require("mobx-react-lite");
 var _designSystem = require("@wix/design-system");
 var _react2 = require("@wix/bex-core/react");
-var _CustomFieldTypeDropdown = require("./CustomFieldTypeDropdown");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
 var _lazy = require("@wix/wix-ui-icons-common/lazy");
-var _Trans = require("../Trans");
 var _mobx = require("mobx");
+var _CustomFieldTypeDropdown = require("./CustomFieldTypeDropdown");
 var _CustomFieldFormPiiFields = require("./CustomFieldFormPiiFields");
+var _CustomFieldFormPermissions = require("./CustomFieldFormPermissions");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CustomFieldModal/CustomFieldForm.tsx";
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** Cancels the modal's content padding so the section below spans the full width. */
+const fullBleed = 'calc(-1 * var(--wds-custom-modal-content-padding-horizontal, 24px))';
 const _CustomFieldForm = props => {
-  var _defaultPermissions$i, _defaultPermissions$s, _defaultPermissions$i2, _defaultPermissions$s2;
+  var _state$settingsSectio;
   const {
     state
   } = props;
@@ -24,28 +27,20 @@ const _CustomFieldForm = props => {
         key,
         type,
         name,
-        readApps,
-        readUsers,
-        writeApps,
-        writeUsers,
         containsPii
       }
     },
     errorToastConfig,
-    disabledFields: {
-      permissions
-    },
     mode,
     settings,
     customFieldModalBiReporter,
     generateUniqueKey,
     setKeyFieldIfNotDirty
   } = state;
-  const defaultPermissions = state.fieldManagement.fieldModal.permissions;
   const {
-    reportAdvancedSettingsClick,
-    reportKeyFormFieldChange
-  } = customFieldModalBiReporter;
+    fieldModal
+  } = state.fieldManagement;
+  const SettingsSection = (_state$settingsSectio = state.settingsSection) == null ? void 0 : _state$settingsSectio.Component;
   const {
     translate: t,
     environment: {
@@ -59,7 +54,7 @@ const _CustomFieldForm = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 68,
+      lineNumber: 55,
       columnNumber: 5
     }
   }, errorToastConfig && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -70,17 +65,17 @@ const _CustomFieldForm = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 70,
+      lineNumber: 57,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.FloatingNotification, {
     dataHook: "custom-field-modal-error-state",
     type: "destructive",
-    prefixIcon: /*#__PURE__*/_react.default.createElement(_lazy.InfoCircle, {
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircle, {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 79,
+        lineNumber: 66,
         columnNumber: 25
       }
     }),
@@ -100,32 +95,30 @@ const _CustomFieldForm = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 76,
+      lineNumber: 63,
       columnNumber: 11
     }
   })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    paddingLeft: "SP1",
-    paddingRight: "SP1",
     direction: "vertical",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 95,
+      lineNumber: 82,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 96,
+      lineNumber: 83,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
-    span: 6,
+    span: 12,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 97,
+      lineNumber: 84,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
@@ -137,7 +130,7 @@ const _CustomFieldForm = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 98,
+      lineNumber: 85,
       columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement(_CustomFieldTypeDropdown.CustomFieldTypeDropdown, {
@@ -145,7 +138,7 @@ const _CustomFieldForm = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 105,
+      lineNumber: 92,
       columnNumber: 15
     }
   }), mode === 'edit' && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -153,7 +146,7 @@ const _CustomFieldForm = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 107,
+      lineNumber: 94,
       columnNumber: 17
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -162,7 +155,7 @@ const _CustomFieldForm = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 108,
+      lineNumber: 95,
       columnNumber: 19
     }
   }, t('cairo.customFields.editCustomField.fieldType.tooltip'))))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
@@ -170,7 +163,7 @@ const _CustomFieldForm = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 115,
+      lineNumber: 102,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
@@ -182,7 +175,7 @@ const _CustomFieldForm = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 116,
+      lineNumber: 103,
       columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
@@ -197,444 +190,151 @@ const _CustomFieldForm = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 123,
+      lineNumber: 110,
       columnNumber: 15
     }
-  }))), state.fieldManagement.fieldModal.supportsPii && /*#__PURE__*/_react.default.createElement(_CustomFieldFormPiiFields.PiiFormFields, {
-    containsPii: {
-      value: containsPii.value,
-      onChange: containsPii.onChange
-    },
-    mode: mode,
-    language: language,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 136,
-      columnNumber: 13
-    }
-  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    marginTop: "SP4",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 146,
-      columnNumber: 9
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
-    dataHook: "custom-field-modal-settings-button",
-    size: "small",
-    suffixIcon: settings.isOn ? /*#__PURE__*/_react.default.createElement(_lazy.ChevronUp, {
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 150,
-        columnNumber: 41
-      }
-    }) : /*#__PURE__*/_react.default.createElement(_lazy.ChevronDown, {
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 150,
-        columnNumber: 57
-      }
-    }),
-    onClick: () => settings.toggle(),
+  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
+    span: 6,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 147,
+      lineNumber: 122,
       columnNumber: 11
     }
-  }, t('cairo.customFields.addCustomField.modal.advancedSettings'))), /*#__PURE__*/_react.default.createElement(_designSystem.Collapse, {
-    open: settings.isOn,
-    onExpandAnimationEnd: () => {
-      reportAdvancedSettingsClick('Open');
-    },
-    onCollapseAnimationEnd: () => {
-      reportAdvancedSettingsClick('Close');
-    },
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 156,
-      columnNumber: 9
-    }
-  }, (!(defaultPermissions != null && (_defaultPermissions$i = defaultPermissions.installedApps) != null && _defaultPermissions$i.hide) || !(defaultPermissions != null && (_defaultPermissions$s = defaultPermissions.siteVisitors) != null && _defaultPermissions$s.hide)) && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    marginTop: "SP4",
-    direction: "vertical",
-    width: "320px",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 167,
-      columnNumber: 13
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
-    size: "small",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 168,
-      columnNumber: 15
-    }
-  }, t('cairo.customFields.addCustomField.modal.advancedSettings.readPermissions')), /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
-    size: "tiny",
-    light: true,
-    secondary: true,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 173,
-      columnNumber: 15
-    }
-  }, t('cairo.customFields.addCustomField.modal.advancedSettings.readPermissions.tooltip'))), !(defaultPermissions != null && (_defaultPermissions$i2 = defaultPermissions.installedApps) != null && _defaultPermissions$i2.hide) && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    marginTop: "SP3",
-    dataHook: "custom-field-modal-apps-section",
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
+    dataHook: "custom-field-modal-field-key",
+    required: true,
+    label: t('cairo.customFields.addCustomField.modal.advancedSettings.key.title'),
+    infoContent: mode === 'new' ? t('cairo.customFields.addCustomField.modal.advancedSettings.key.tooltip') : t('cairo.customFields.editCustomField.fieldKey.tooltip'),
+    status: key.hasError ? 'error' : undefined,
+    statusMessage: key.error,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 181,
+      lineNumber: 123,
       columnNumber: 13
     }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 182,
-      columnNumber: 15
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
-    span: 4,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 183,
-      columnNumber: 17
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    verticalAlign: "middle",
-    gap: "SP1",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 184,
-      columnNumber: 19
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
-    size: "small",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 185,
-      columnNumber: 21
-    }
-  }, t('cairo.customFields.addCustomField.modal.advancedSettings.externalApps')), /*#__PURE__*/_react.default.createElement(_designSystem.InfoIcon, {
-    size: "small",
-    content: /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
-      i18nKey: "cairo.customFields.addCustomField.modal.advancedSettings.externalApps.tooltip",
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 193,
-        columnNumber: 25
-      }
-    }),
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 190,
-      columnNumber: 21
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
-    span: 2,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 198,
-      columnNumber: 17
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
-    dataHook: "custom-field-modal-read-apps",
-    disabled: mode === 'edit' && permissions.read.apps,
-    size: "small",
-    onChange: () => {
-      readApps.onChange(!readApps.value);
-    },
-    checked: readApps.value,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 199,
-      columnNumber: 19
-    }
-  }, t('cairo.customFields.addCustomField.modal.advancedSettings.read'))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
-    span: 2,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 213,
-      columnNumber: 17
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
-    dataHook: "custom-field-modal-write-apps",
-    disabled: mode === 'edit' && permissions.write.apps,
-    size: "small",
-    onChange: () => {
-      writeApps.onChange(!writeApps.value);
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
+    dataHook: "custom-field-modal-key",
+    disabled: mode === 'edit',
+    value: key.value,
+    onChange: e => {
+      key.onChange(e.target.value.toLowerCase());
+      customFieldModalBiReporter.reportKeyFormFieldChange();
     },
-    checked: writeApps.value,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 214,
-      columnNumber: 19
-    }
-  }, t('cairo.customFields.addCustomField.modal.advancedSettings.write'))))), !(defaultPermissions != null && (_defaultPermissions$s2 = defaultPermissions.siteVisitors) != null && _defaultPermissions$s2.hide) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    marginTop: "SP2",
-    dataHook: "custom-field-modal-users-section",
+    placeholder: t('cairo.customFields.addCustomField.modal.advancedSettings.key.placeholder'),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 233,
+      lineNumber: 139,
       columnNumber: 15
     }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 234,
-      columnNumber: 17
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
-    span: 4,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 235,
-      columnNumber: 19
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    verticalAlign: "middle",
-    gap: "SP1",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 236,
-      columnNumber: 21
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
-    size: "small",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 237,
-      columnNumber: 23
-    }
-  }, t('cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors')), /*#__PURE__*/_react.default.createElement(_designSystem.InfoIcon, {
-    size: "small",
-    content: /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
-      i18nKey: "cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.tooltip",
-      components: {
-        learnMore: /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
-          underline: "always",
-          skin: "light",
-          size: "small",
-          as: "a",
-          rel: "noopener",
-          target: "_blank",
-          href: `https://support.wix.com/${language}/article/cms-about-datasets`,
-          __self: void 0,
-          __source: {
-            fileName: _jsxFileName,
-            lineNumber: 249,
-            columnNumber: 33
-          }
-        })
-      },
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 245,
-        columnNumber: 27
-      }
-    }),
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 242,
-      columnNumber: 23
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
-    span: 2,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 265,
-      columnNumber: 19
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
-    dataHook: "custom-field-modal-read-users",
-    disabled: mode === 'edit' && permissions.read.users,
-    size: "small",
-    onChange: () => {
-      readUsers.onChange(!readUsers.value);
+  }))), state.typeSupportsPii && /*#__PURE__*/_react.default.createElement(_CustomFieldFormPiiFields.PiiFormFields, {
+    containsPii: {
+      value: containsPii.value,
+      onChange: containsPii.onChange
     },
-    checked: readUsers.value,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 266,
-      columnNumber: 21
-    }
-  }, t('cairo.customFields.addCustomField.modal.advancedSettings.read'))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
-    span: 2,
+    mode: mode,
+    language: language,
+    piiWarning: state.piiWarning,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 280,
-      columnNumber: 19
+      lineNumber: 154,
+      columnNumber: 13
     }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
-    dataHook: "custom-field-modal-write-users",
-    disabled: mode === 'edit' && permissions.write.users,
-    size: "small",
-    onChange: () => {
-      writeUsers.onChange(!writeUsers.value);
-    },
-    checked: writeUsers.value,
+  }))), state.showSettings && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: "SP4",
+    marginLeft: fullBleed,
+    marginRight: fullBleed,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 281,
-      columnNumber: 21
+      lineNumber: 168,
+      columnNumber: 11
     }
-  }, t('cairo.customFields.addCustomField.modal.advancedSettings.write'))))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 297,
-      columnNumber: 15
+      lineNumber: 169,
+      columnNumber: 13
     }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
-    size: "tiny",
-    light: true,
-    secondary: true,
-    dataHook: "permissions-note",
+  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    marginLeft: fullBleed,
+    marginRight: fullBleed,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 298,
-      columnNumber: 17
+      lineNumber: 171,
+      columnNumber: 11
     }
-  }, /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
-    i18nKey: "cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.note",
-    components: {
-      learnMore: /*#__PURE__*/_react.default.createElement(_designSystem.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`,
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Accordion, {
+    dataHook: "custom-field-modal-settings-accordion",
+    skin: "standard",
+    hideShadow: true,
+    horizontalPadding: "large",
+    items: [{
+      title: fieldModal.text.settingsLabel ?? t('cairo.customFields.addCustomField.modal.advancedSettings'),
+      toggleIconPlacement: 'start',
+      suffix: state.settingsHasError ? /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+        verticalAlign: "middle",
+        color: "R10",
+        dataHook: "custom-field-modal-settings-error",
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 190,
+          columnNumber: 21
+        }
+      }, /*#__PURE__*/_react.default.createElement(_lazy.StatusAlertFilledSmall, {
         __self: void 0,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 303,
+          lineNumber: 195,
+          columnNumber: 23
+        }
+      })) : undefined,
+      open: settings.isOn,
+      onToggle: () => {
+        settings.toggle();
+        customFieldModalBiReporter.reportAdvancedSettingsClick(settings.isOn ? 'Open' : 'Close');
+      },
+      children: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+        direction: "vertical",
+        gap: "SP4",
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 206,
+          columnNumber: 21
+        }
+      }, fieldModal.permissions && /*#__PURE__*/_react.default.createElement(_CustomFieldFormPermissions.CustomFieldFormPermissions, {
+        state: state,
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 208,
           columnNumber: 25
         }
-      })
-    },
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 299,
-      columnNumber: 19
-    }
-  })))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    direction: "vertical",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 317,
-      columnNumber: 11
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    marginTop: "SP3",
-    marginBottom: "SP3",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 318,
-      columnNumber: 13
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 319,
-      columnNumber: 15
-    }
-  })), /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
-    dataHook: "custom-field-modal-field-key",
-    required: true,
-    label: t('cairo.customFields.addCustomField.modal.advancedSettings.key.title'),
-    status: key.hasError ? 'error' : undefined,
-    statusMessage: key.error,
+      }), SettingsSection && /*#__PURE__*/_react.default.createElement(SettingsSection, {
+        fieldType: type.value,
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 211,
+          columnNumber: 25
+        }
+      }))
+    }],
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 322,
+      lineNumber: 176,
       columnNumber: 13
     }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 331,
-      columnNumber: 15
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
-    span: 6,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 332,
-      columnNumber: 17
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
-    dataHook: "custom-field-modal-key",
-    disabled: mode === 'edit',
-    value: key.value,
-    onChange: e => {
-      key.onChange(e.target.value.toLowerCase());
-      reportKeyFormFieldChange();
-    },
-    placeholder: t('cairo.customFields.addCustomField.modal.advancedSettings.key.placeholder'),
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 333,
-      columnNumber: 19
-    }
-  })))), !key.hasError && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    marginTop: "SP1",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 350,
-      columnNumber: 15
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
-    size: "tiny",
-    secondary: true,
-    dataHook: "custom-field-modal-fieldKey-tooltip",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 351,
-      columnNumber: 17
-    }
-  }, mode === 'new' ? t('cairo.customFields.addCustomField.modal.advancedSettings.key.tooltip') : t('cairo.customFields.editCustomField.fieldKey.tooltip')))))));
+  }))));
 };
 exports._CustomFieldForm = _CustomFieldForm;
 const CustomFieldForm = exports.CustomFieldForm = (0, _mobxReactLite.observer)(_CustomFieldForm);