@commercetools-frontend-extensions/export-resources-modal 3.5.1 → 3.7.0

package/dist/commercetools-frontend-extensions-export-resources-modal.cjs.prod.js

@@ -36,16 +36,20 @@ var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-arr
 var _flatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/flat');
 var _flatMapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/flat-map');
 var _Set = require('@babel/runtime-corejs3/core-js-stable/set');
+var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
 var sdk = require('@commercetools-frontend/sdk');
 var actionsGlobal = require('@commercetools-frontend/actions-global');
 var constants = require('@commercetools-frontend/constants');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _styled = require('@emotion/styled/base');
 var _everyInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/every');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
+var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+var throttle = require('lodash/throttle');
+var react = require('@emotion/react');
 var PropTypes = require('prop-types');
-var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var formik = require('formik');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -70,11 +74,14 @@ var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
 var _flatInstanceProperty__default = /*#__PURE__*/_interopDefault(_flatInstanceProperty);
 var _flatMapInstanceProperty__default = /*#__PURE__*/_interopDefault(_flatMapInstanceProperty);
 var _Set__default = /*#__PURE__*/_interopDefault(_Set);
+var _sortInstanceProperty__default = /*#__PURE__*/_interopDefault(_sortInstanceProperty);
 var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var _everyInstanceProperty__default = /*#__PURE__*/_interopDefault(_everyInstanceProperty);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
+var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
+var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
 function getBold(msg) {
@@ -228,6 +235,31 @@ var messages = reactIntl.defineMessages({
     id: 'ExportResourcesModal.unexpectedError',
     description: 'Generic notification message when starting export process fails',
     defaultMessage: 'An error occurred while starting the export process. Please try again or contact support if the problem persists.'
+  },
+  searchForFields: {
+    id: 'ExportResourcesModal.searchForFields',
+    description: 'Placeholder for "Search for fields" search input',
+    defaultMessage: 'Search for fields'
+  },
+  thereAreNoResults: {
+    id: 'ExportResourcesModal.thereAreNoResults',
+    description: 'No search results message',
+    defaultMessage: 'There are no results that match your search.'
+  },
+  suggestions: {
+    id: 'ExportResourcesModal.suggestions',
+    description: 'In Export fields selection - Suggestions message',
+    defaultMessage: 'Suggestions:'
+  },
+  checkTheSpelling: {
+    id: 'ExportResourcesModal.checkTheSpelling',
+    description: 'In Export fields selection - Check the spelling message',
+    defaultMessage: 'Check the spelling.'
+  },
+  searchByEnteringTheExactFieldName: {
+    id: 'ExportResourcesModal.searchByEnteringTheExactFieldName',
+    description: 'In Export fields selection - Search by entering the exact field name message',
+    defaultMessage: 'Try searching by entering the exact field name.'
   }
 });
 
@@ -405,7 +437,7 @@ function validate(_ref) {
 }
 
 function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context7, _context8; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context7 = ownKeys$4(Object(t), !0)).call(_context7, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context8 = ownKeys$4(Object(t))).call(_context8, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context8, _context9; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context8 = ownKeys$4(Object(t), !0)).call(_context8, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context9 = ownKeys$4(Object(t))).call(_context9, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function resourceTypeToDisplayName(_ref) {
   let resourceType = _ref.resourceType,
     _ref$isUpperCase = _ref.isUpperCase,
@@ -496,10 +528,32 @@ function extractGeneralFieldNames(generalFields) {
 function extractCustomFieldNamesWithPrefix(customFields) {
   const fields = _flatMapInstanceProperty__default["default"](customFields).call(customFields, customType => {
     var _context6;
-    return _mapInstanceProperty__default["default"](_context6 = customType.fields).call(_context6, field => "custom.fields.".concat(field.name));
+    return _flatMapInstanceProperty__default["default"](_context6 = customType.fields).call(_context6, field => {
+      return getCustomFieldNameWithPrefix(field, customType.type.resourceTypeIds);
+    });
   });
   return [...new _Set__default["default"](fields)];
 }
+function getCustomFieldNameWithPrefix(field, resourceTypeIds) {
+  const prefixes = _mapInstanceProperty__default["default"](resourceTypeIds).call(resourceTypeIds, type => {
+    switch (type) {
+      case 'asset':
+        return 'assets.custom.fields.';
+      default:
+        return 'custom.fields.';
+    }
+  });
+  return _mapInstanceProperty__default["default"](prefixes).call(prefixes, prefix => {
+    var _context7;
+    return _concatInstanceProperty__default["default"](_context7 = "".concat(prefix)).call(_context7, field.name);
+  });
+}
+
+// Sorts an array of custom field names placing those starting with 'assets.custom.fields.' first
+// This function doesn't affect the order of other custom fields
+function sortCustomFields(fields) {
+  return _sortInstanceProperty__default["default"](fields).call(fields, (a, b) => _startsWithInstanceProperty__default["default"](b).call(b, 'assets.custom.fields.') - _startsWithInstanceProperty__default["default"](a).call(a, 'assets.custom.fields.'));
+}
 
 // TODO: remove this function when filters are passed directly from parent views
 // This function is temporary and will be removed in the future
@@ -511,16 +565,23 @@ function tmpBuildFilters(selectedResourceIds) {
   return ["id in (".concat(formattedIds, ")")];
 }
 
+const parentKeyExtension = ['parent.key', 'parent.typeId'];
+const customFieldsExtension = ['custom.type.key', 'custom.type.typeId'];
+const assetsCustomFieldsExtension = ['assets.custom.type.key', 'assets.custom.type.typeId'];
+const assetsExtension = ['assets.key', 'assets.name', 'assets.sources.key', 'assets.sources.uri', 'assets.sources.contentType', 'assets.sources.dimensions.w', 'assets.sources.dimensions.h', 'assets.description', 'assets.tags'];
 const categoryFieldExtension = fields => {
   return _reduceInstanceProperty__default["default"](fields).call(fields, (acc, field) => {
     if (field === 'parent.key') {
-      return [...acc, field, 'parent.typeId'];
+      return [...acc, ...parentKeyExtension];
     }
     if (_startsWithInstanceProperty__default["default"](field).call(field, 'custom.fields.') && !_includesInstanceProperty__default["default"](acc).call(acc, 'custom.type.key')) {
-      return [...acc, 'custom.type.key', 'custom.type.typeId', field];
+      return [...acc, ...customFieldsExtension, field];
     }
     if (field === 'assets') {
-      return [...acc, 'assets.key', 'assets.name', 'assets.sources.key', 'assets.sources.uri', 'assets.sources.contentType', 'assets.sources.dimensions.w', 'assets.sources.dimensions.h', 'assets.description', 'assets.tags'];
+      return [...acc, ...assetsExtension];
+    }
+    if (_startsWithInstanceProperty__default["default"](field).call(field, 'assets.custom.fields.') && !_includesInstanceProperty__default["default"](acc).call(acc, 'assets.custom.type.key')) {
+      return [...acc, ...assetsCustomFieldsExtension, field];
     }
     return [...acc, field];
   }, []);
@@ -618,7 +679,7 @@ const useStartExportOperation = props => {
       const selectedGeneralFields = getSelectedGeneralFields(values.fields);
       const selectedCustomFields = getSelectedCustomFields(values.customFields);
       const generalFields = extractGeneralFieldNames(selectedGeneralFields);
-      const customFields = extractCustomFieldNamesWithPrefix(selectedCustomFields);
+      const customFields = sortCustomFields(extractCustomFieldNamesWithPrefix(selectedCustomFields));
       const filters = tmpBuildFilters(props.selectedResourceIds);
       const response = await createExportOperation({
         projectKey,
@@ -796,29 +857,50 @@ const ExportFileSettingsStep = () => {
   });
 };
 
+var _ref = {
+  name: "ti75j2",
+  styles: "margin:0"
+} ;
+const NoSearchResults = () => {
+  return jsxRuntime.jsxs(uiKit.Card, {
+    insetScale: "xl",
+    children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+      scale: "s",
+      children: [jsxRuntime.jsx(uiKit.Text.Body, {
+        fontWeight: "medium",
+        intlMessage: messages.thereAreNoResults
+      }), jsxRuntime.jsx(uiKit.Text.Body, {
+        intlMessage: messages.suggestions
+      })]
+    }), jsxRuntime.jsxs("ul", {
+      css: _ref,
+      children: [jsxRuntime.jsx("li", {
+        children: jsxRuntime.jsx(uiKit.Text.Body, {
+          intlMessage: messages.checkTheSpelling
+        })
+      }), jsxRuntime.jsx("li", {
+        children: jsxRuntime.jsx(uiKit.Text.Body, {
+          intlMessage: messages.searchByEnteringTheExactFieldName
+        })
+      })]
+    })]
+  });
+};
+
 function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context12, _context13; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context12 = ownKeys$1(Object(t), !0)).call(_context12, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context13 = ownKeys$1(Object(t))).call(_context13, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const StyledCardLeft = /*#__PURE__*/_styled__default["default"](uiKit.Card, {
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context22, _context23; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context22 = ownKeys$1(Object(t), !0)).call(_context22, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context23 = ownKeys$1(Object(t))).call(_context23, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const StyledGroupCard = /*#__PURE__*/_styled__default["default"](uiKit.Card, {
   target: "e1ocu3bb1"
-} )("height:100%;background-color:#f9f9fb;border-top:", _ref => {
-  let isTopRow = _ref.isTopRow;
-  return isTopRow ? uiKit.designTokens.borderForCardWhenRaised : 'none';
-}, ";border-radius:", _ref2 => {
-  let isTopRow = _ref2.isTopRow;
-  return isTopRow ? '4px 0px 0px 0px' : '0px 0px 0px 4px';
-}, ";" + ("" ));
-const StyledCardRight = /*#__PURE__*/_styled__default["default"](uiKit.Card, {
+} )("border-right:", uiKit.designTokens.borderWidth1, " solid ", uiKit.designTokens.colorNeutral90, ";background-color:", uiKit.designTokens.colorNeutral98, ";height:100%;border-radius:0;", props => props.showTopBorder && /*#__PURE__*/react.css("border-top:", uiKit.designTokens.borderWidth1, " solid ", uiKit.designTokens.colorNeutral90, ";" + ("" ), "" ), ";" + ("" ));
+const StyledFieldsCard = /*#__PURE__*/_styled__default["default"](uiKit.Card, {
   target: "e1ocu3bb0"
-} )("height:100%;border-left:0;border-top:", _ref3 => {
-  let isTopRow = _ref3.isTopRow;
-  return isTopRow ? uiKit.designTokens.borderForCardWhenRaised : 'none';
-}, ";border-radius:", _ref4 => {
-  let isTopRow = _ref4.isTopRow;
-  return isTopRow ? '0px 4px 0px 0px' : '0px 0px 4px 0px';
-}, ";" + ("" ));
+} )("border-radius:0;", props => props.showTopBorder && /*#__PURE__*/react.css("border-top:", uiKit.designTokens.borderWidth1, " solid ", uiKit.designTokens.colorNeutral90, ";" + ("" ), "" ), ";" + ("" ));
 const ExportFieldsSelectionStep = () => {
-  var _formik$values$custom;
   const intl = reactIntl.useIntl();
+  const _React$useState = React__default["default"].useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    fieldSearchTerm = _React$useState2[0],
+    setFieldSearchTerm = _React$useState2[1];
   const _useExportResourcesCo = useExportResourcesContext(),
     formik = _useExportResourcesCo.formik,
     setCurrentStep = _useExportResourcesCo.setCurrentStep,
@@ -846,6 +928,33 @@ const ExportFieldsSelectionStep = () => {
   const isAtLeastOneCustomFieldChecked = React__default["default"].useMemo(() => {
     return _someInstanceProperty__default["default"](allCustomFields).call(allCustomFields, field => field.isChecked);
   }, [allCustomFields]);
+  const filteredGeneralFields = React__default["default"].useMemo(() => {
+    var _context4;
+    return _filterInstanceProperty__default["default"](_context4 = _valuesInstanceProperty__default["default"](formik).fields).call(_context4, field => {
+      var _context5;
+      return _includesInstanceProperty__default["default"](_context5 = field.label.toLowerCase()).call(_context5, _trimInstanceProperty__default["default"](fieldSearchTerm).call(fieldSearchTerm).toLowerCase());
+    });
+  }, [_valuesInstanceProperty__default["default"](formik).fields, fieldSearchTerm]);
+  const filteredCustomFields = React__default["default"].useMemo(() => {
+    var _context6, _context7;
+    return _filterInstanceProperty__default["default"](_context6 = _mapInstanceProperty__default["default"](_context7 = _valuesInstanceProperty__default["default"](formik).customFields).call(_context7, customType => {
+      var _context8, _context9;
+      return _objectSpread$1(_objectSpread$1({}, customType), {}, {
+        fields: _includesInstanceProperty__default["default"](_context8 = customType.type.label.toLowerCase()).call(_context8, _trimInstanceProperty__default["default"](fieldSearchTerm).call(fieldSearchTerm).toLowerCase()) ? customType.fields : _filterInstanceProperty__default["default"](_context9 = customType.fields).call(_context9, field => {
+          var _context10;
+          return _includesInstanceProperty__default["default"](_context10 = field.label.toLowerCase()).call(_context10, _trimInstanceProperty__default["default"](fieldSearchTerm).call(fieldSearchTerm).toLowerCase());
+        })
+      });
+    })).call(_context6, customType => customType.fields.length > 0);
+  }, [_valuesInstanceProperty__default["default"](formik).customFields, fieldSearchTerm]);
+  const onSearchChange = React__default["default"].useCallback(event => {
+    setFieldSearchTerm(event.target.value);
+  }, [setFieldSearchTerm]);
+  const hasResults = filteredGeneralFields.length > 0 || filteredCustomFields.length > 0;
+  const onSearchChangeThrottled = React__default["default"].useMemo(() => throttle__default["default"](onSearchChange, 300), [onSearchChange]);
+  const onSearchReset = () => {
+    setFieldSearchTerm('');
+  };
   return jsxRuntime.jsx(applicationComponents.FormDialog, {
     isOpen: true,
     title: intl.formatMessage(messages.modalTitle, {
@@ -872,112 +981,128 @@ const ExportFieldsSelectionStep = () => {
             intlMessage: messages.fieldDefinitions,
             to: FIELD_DEFINITIONS_URLS[resourceType]
           })]
-        }), jsxRuntime.jsxs(uiKit.Grid, {
-          gridAutoFlow: "row",
-          gridTemplateColumns: "".concat(uiKit.designTokens.constraint5, " auto"),
-          children: [jsxRuntime.jsx(uiKit.Grid.Item, {
-            children: jsxRuntime.jsx(StyledCardLeft, {
-              isTopRow: true,
-              insetScale: "l",
-              children: jsxRuntime.jsx(uiKit.CheckboxInput, {
-                isIndeterminate: !areAllGeneralFieldsChecked && isAtLeastOneGeneralFieldChecked,
-                isChecked: areAllGeneralFieldsChecked,
-                onChange: e => {
-                  var _context4;
-                  formik.setFieldValue('fields', _mapInstanceProperty__default["default"](_context4 = _valuesInstanceProperty__default["default"](formik).fields).call(_context4, field => _objectSpread$1(_objectSpread$1({}, field), {}, {
-                    isChecked: field.isRequired ? true : e.target.checked
-                  })));
-                },
-                children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages.allGeneralFields))
-              })
-            })
-          }), jsxRuntime.jsx(uiKit.Grid.Item, {
-            children: jsxRuntime.jsx(StyledCardRight, {
-              isTopRow: true,
-              insetScale: "l",
-              children: jsxRuntime.jsx(uiKit.Spacings.Stack, {
-                scale: "s",
-                children: jsxRuntime.jsx(GeneralFieldsSelection, {
-                  fields: _valuesInstanceProperty__default["default"](formik).fields,
-                  setFieldValue: formik.setFieldValue
+        }), jsxRuntime.jsx(uiKit.SearchTextInput, {
+          placeholder: intl.formatMessage(messages.searchForFields),
+          value: fieldSearchTerm,
+          onChange: onSearchChangeThrottled,
+          onReset: onSearchReset
+        }), !hasResults && jsxRuntime.jsx(NoSearchResults, {}), hasResults && jsxRuntime.jsx(uiKit.Card, {
+          insetScale: "none",
+          children: jsxRuntime.jsxs(uiKit.Grid, {
+            gridAutoFlow: "row",
+            gridTemplateColumns: "".concat(uiKit.designTokens.constraint5, " auto"),
+            children: [filteredGeneralFields.length > 0 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [jsxRuntime.jsx(uiKit.Grid.Item, {
+                children: jsxRuntime.jsx(StyledGroupCard, {
+                  type: "flat",
+                  insetScale: "l",
+                  children: jsxRuntime.jsx(uiKit.CheckboxInput, {
+                    isIndeterminate: !areAllGeneralFieldsChecked && isAtLeastOneGeneralFieldChecked,
+                    isChecked: areAllGeneralFieldsChecked,
+                    onChange: e => {
+                      var _context11;
+                      formik.setFieldValue('fields', _mapInstanceProperty__default["default"](_context11 = _valuesInstanceProperty__default["default"](formik).fields).call(_context11, field => _objectSpread$1(_objectSpread$1({}, field), {}, {
+                        isChecked: field.isRequired ? true : e.target.checked
+                      })));
+                    },
+                    children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages.allGeneralFields))
+                  })
                 })
-              })
-            })
-          }), ((_formik$values$custom = _valuesInstanceProperty__default["default"](formik).customFields) === null || _formik$values$custom === void 0 ? void 0 : _formik$values$custom.length) > 0 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [jsxRuntime.jsx(uiKit.Grid.Item, {
-              children: jsxRuntime.jsx(StyledCardLeft, {
-                insetScale: "l",
-                children: jsxRuntime.jsx(uiKit.CheckboxInput, {
-                  isIndeterminate: !areAllCustomFieldsChecked && isAtLeastOneCustomFieldChecked,
-                  isChecked: areAllCustomFieldsChecked,
-                  onChange: e => {
-                    var _context5;
-                    formik.setFieldValue('customFields', _mapInstanceProperty__default["default"](_context5 = _valuesInstanceProperty__default["default"](formik).customFields).call(_context5, customType => {
-                      var _context6;
-                      return _objectSpread$1(_objectSpread$1({}, customType), {}, {
-                        fields: _mapInstanceProperty__default["default"](_context6 = customType.fields).call(_context6, field => _objectSpread$1(_objectSpread$1({}, field), {}, {
-                          isChecked: e.target.checked
-                        }))
-                      });
-                    }));
-                  },
-                  children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages.allCustomFields))
+              }), jsxRuntime.jsx(uiKit.Grid.Item, {
+                children: jsxRuntime.jsx(StyledFieldsCard, {
+                  type: "flat",
+                  insetScale: "l",
+                  children: jsxRuntime.jsx(uiKit.Spacings.Stack, {
+                    scale: "s",
+                    children: jsxRuntime.jsx(GeneralFieldsSelection, {
+                      fields: filteredGeneralFields,
+                      formik: formik
+                    })
+                  })
                 })
-              })
-            }), jsxRuntime.jsx(uiKit.Grid.Item, {
-              children: jsxRuntime.jsx(StyledCardRight, {
-                insetScale: "l",
-                children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-                  scale: "s",
-                  children: [jsxRuntime.jsxs(uiKit.CheckboxInput, {
-                    isReadOnly: true,
-                    onChange: () => {},
-                    isChecked: isAtLeastOneCustomFieldChecked,
-                    children: [jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages.customTypeKeyAndTypeId)), ' ', "*"]
-                  }), jsxRuntime.jsx(CustomFieldsSelection, {
-                    customFields: _valuesInstanceProperty__default["default"](formik).customFields,
-                    setFieldValue: formik.setFieldValue
-                  })]
+              })]
+            }), filteredCustomFields.length > 0 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [jsxRuntime.jsx(uiKit.Grid.Item, {
+                children: jsxRuntime.jsx(StyledGroupCard, {
+                  type: "flat",
+                  insetScale: "l",
+                  showTopBorder: filteredGeneralFields.length > 0,
+                  children: jsxRuntime.jsx(uiKit.CheckboxInput, {
+                    isIndeterminate: !areAllCustomFieldsChecked && isAtLeastOneCustomFieldChecked,
+                    isChecked: areAllCustomFieldsChecked,
+                    onChange: e => {
+                      var _context12;
+                      formik.setFieldValue('customFields', _mapInstanceProperty__default["default"](_context12 = _valuesInstanceProperty__default["default"](formik).customFields).call(_context12, customType => {
+                        var _context13;
+                        return _objectSpread$1(_objectSpread$1({}, customType), {}, {
+                          fields: _mapInstanceProperty__default["default"](_context13 = customType.fields).call(_context13, field => _objectSpread$1(_objectSpread$1({}, field), {}, {
+                            isChecked: e.target.checked
+                          }))
+                        });
+                      }));
+                    },
+                    children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages.allCustomFields))
+                  })
                 })
-              })
+              }), jsxRuntime.jsx(uiKit.Grid.Item, {
+                children: jsxRuntime.jsx(StyledFieldsCard, {
+                  type: "flat",
+                  insetScale: "l",
+                  showTopBorder: filteredGeneralFields.length > 0,
+                  children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+                    scale: "s",
+                    children: [jsxRuntime.jsxs(uiKit.CheckboxInput, {
+                      isReadOnly: true,
+                      onChange: () => {},
+                      isChecked: isAtLeastOneCustomFieldChecked,
+                      children: [jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages.customTypeKeyAndTypeId)), ' ', "*"]
+                    }), jsxRuntime.jsx(CustomFieldsSelection, {
+                      customFields: filteredCustomFields,
+                      formik: formik
+                    })]
+                  })
+                })
+              })]
             })]
-          })]
+          })
         })]
       })
     })
   });
 };
-const GeneralFieldsSelection = _ref5 => {
-  let fields = _ref5.fields,
-    setFieldValue = _ref5.setFieldValue;
+const GeneralFieldsSelection = _ref => {
+  let fields = _ref.fields,
+    formik = _ref.formik;
   return _mapInstanceProperty__default["default"](fields).call(fields, field => jsxRuntime.jsxs(uiKit.CheckboxInput, {
     isChecked: field.isChecked,
     isReadOnly: field.isRequired,
     onChange: e => {
-      setFieldValue('fields', _mapInstanceProperty__default["default"](fields).call(fields, _field => field.name === _field.name ? _objectSpread$1(_objectSpread$1({}, _field), {}, {
+      var _context14;
+      formik.setFieldValue('fields', _mapInstanceProperty__default["default"](_context14 = _valuesInstanceProperty__default["default"](formik).fields).call(_context14, _field => field.name === _field.name ? _objectSpread$1(_objectSpread$1({}, _field), {}, {
         isChecked: e.target.checked
       }) : _field));
     },
     children: [field.label, " ", field.isRequired && '*']
   }, field.name));
 };
-const CustomFieldsSelection = _ref6 => {
-  let customFields = _ref6.customFields,
-    setFieldValue = _ref6.setFieldValue;
+const CustomFieldsSelection = _ref2 => {
+  let customFields = _ref2.customFields,
+    formik = _ref2.formik;
   return _mapInstanceProperty__default["default"](customFields).call(customFields, customType => {
-    var _context7, _context8, _context10;
-    const areAllFieldsChecked = _everyInstanceProperty__default["default"](_context7 = customType.fields).call(_context7, field => field.isChecked);
-    const isAtLeastOneFieldChecked = _someInstanceProperty__default["default"](_context8 = customType.fields).call(_context8, field => field.isChecked);
+    var _context15, _context16, _context19;
+    const areAllFieldsChecked = _everyInstanceProperty__default["default"](_context15 = customType.fields).call(_context15, field => field.isChecked);
+    const isAtLeastOneFieldChecked = _someInstanceProperty__default["default"](_context16 = customType.fields).call(_context16, field => field.isChecked);
     return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
       scale: "s",
       children: [jsxRuntime.jsx(uiKit.CheckboxInput, {
         isIndeterminate: !areAllFieldsChecked && isAtLeastOneFieldChecked,
         isChecked: areAllFieldsChecked,
         onChange: e => {
-          setFieldValue('customFields', _mapInstanceProperty__default["default"](customFields).call(customFields, _customType => {
-            var _context9;
+          var _context17;
+          formik.setFieldValue('customFields', _mapInstanceProperty__default["default"](_context17 = _valuesInstanceProperty__default["default"](formik).customFields).call(_context17, _customType => {
+            var _context18;
             return _customType.type.key === customType.type.key ? _objectSpread$1(_objectSpread$1({}, _customType), {}, {
-              fields: _mapInstanceProperty__default["default"](_context9 = _customType.fields).call(_context9, field => _objectSpread$1(_objectSpread$1({}, field), {}, {
+              fields: _mapInstanceProperty__default["default"](_context18 = _customType.fields).call(_context18, field => _objectSpread$1(_objectSpread$1({}, field), {}, {
                 isChecked: e.target.checked
               }))
             }) : _customType;
@@ -990,13 +1115,14 @@ const CustomFieldsSelection = _ref6 => {
         scale: "l",
         children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx(uiKit.Spacings.Stack, {
           scale: "s",
-          children: _mapInstanceProperty__default["default"](_context10 = customType.fields).call(_context10, field => jsxRuntime.jsx(uiKit.CheckboxInput, {
+          children: _mapInstanceProperty__default["default"](_context19 = customType.fields).call(_context19, field => jsxRuntime.jsx(uiKit.CheckboxInput, {
             isChecked: field.isChecked,
             onChange: e => {
-              setFieldValue('customFields', _mapInstanceProperty__default["default"](customFields).call(customFields, _customType => {
-                var _context11;
+              var _context20;
+              formik.setFieldValue('customFields', _mapInstanceProperty__default["default"](_context20 = _valuesInstanceProperty__default["default"](formik).customFields).call(_context20, _customType => {
+                var _context21;
                 return _customType.type.key === customType.type.key ? _objectSpread$1(_objectSpread$1({}, _customType), {}, {
-                  fields: _mapInstanceProperty__default["default"](_context11 = _customType.fields).call(_context11, _field => _field.name === field.name ? _objectSpread$1(_objectSpread$1({}, _field), {}, {
+                  fields: _mapInstanceProperty__default["default"](_context21 = _customType.fields).call(_context21, _field => _field.name === field.name ? _objectSpread$1(_objectSpread$1({}, _field), {}, {
                     isChecked: e.target.checked
                   }) : _field)
                 }) : _customType;
@@ -1036,7 +1162,8 @@ PropTypes__default["default"].shape({
   customFields: PropTypes__default["default"].shape({
     type: PropTypes__default["default"].shape({
       key: PropTypes__default["default"].string.isRequired,
-      label: PropTypes__default["default"].string.isRequired
+      label: PropTypes__default["default"].string.isRequired,
+      resourceTypeIds: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
     }).isRequired,
     fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
       name: PropTypes__default["default"].string.isRequired,