@bigbinary/neeto-fields-frontend 1.0.4 → 1.0.5

package/dist/index.cjs.js

@@ -18,6 +18,7 @@ var Header = require('@bigbinary/neeto-molecules/Header');
 var MenuBar = require('@bigbinary/neeto-molecules/MenuBar');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
+var reactRouterDom = require('react-router-dom');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var reactDom = require('react-dom');
 var classnames = require('classnames');
@@ -1790,8 +1791,8 @@ function _toArray(arr) {
   return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
 }
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var consoleLogger = {
   type: 'logger',
   log: function log(args) {
@@ -1869,7 +1870,7 @@ var Logger = function () {
   }, {
     key: "create",
     value: function create(moduleName) {
-      return new Logger(this.logger, _objectSpread$6(_objectSpread$6({}, {
+      return new Logger(this.logger, _objectSpread$6$1(_objectSpread$6$1({}, {
         prefix: "".concat(this.prefix, ":").concat(moduleName, ":")
       }), this.options));
     }
@@ -3747,8 +3748,8 @@ function transformOptions(options) {
   return options;
 }
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function noop$1() {}
@@ -3808,9 +3809,9 @@ var I18n = function (_EventEmitter) {
         }
       }
       var defOpts = get();
-      this.options = _objectSpread$7(_objectSpread$7(_objectSpread$7({}, defOpts), this.options), transformOptions(options));
+      this.options = _objectSpread$8(_objectSpread$8(_objectSpread$8({}, defOpts), this.options), transformOptions(options));
       if (this.options.compatibilityAPI !== 'v1') {
-        this.options.interpolation = _objectSpread$7(_objectSpread$7({}, defOpts.interpolation), this.options.interpolation);
+        this.options.interpolation = _objectSpread$8(_objectSpread$8({}, defOpts.interpolation), this.options.interpolation);
       }
       if (options.keySeparator !== undefined) {
         this.options.userDefinedKeySeparator = options.keySeparator;
@@ -4088,7 +4089,7 @@ var I18n = function (_EventEmitter) {
           }
           options = _this5.options.overloadTranslationOptionHandler([key, opts].concat(rest));
         } else {
-          options = _objectSpread$7({}, opts);
+          options = _objectSpread$8({}, opts);
         }
         options.lng = options.lng || fixedT.lng;
         options.lngs = options.lngs || fixedT.lngs;
@@ -4215,7 +4216,7 @@ var I18n = function (_EventEmitter) {
       var _this8 = this;
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$1;
-      var mergedOptions = _objectSpread$7(_objectSpread$7(_objectSpread$7({}, this.options), options), {
+      var mergedOptions = _objectSpread$8(_objectSpread$8(_objectSpread$8({}, this.options), options), {
         isClone: true
       });
       var clone = new I18n(mergedOptions);
@@ -4226,7 +4227,7 @@ var I18n = function (_EventEmitter) {
       membersToCopy.forEach(function (m) {
         clone[m] = _this8[m];
       });
-      clone.services = _objectSpread$7({}, this.services);
+      clone.services = _objectSpread$8({}, this.services);
       clone.services.utils = {
         hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
       };
@@ -4665,9 +4666,9 @@ function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions$1 = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -4681,7 +4682,7 @@ var i18nInstance;
 var I18nContext = React__default["default"].createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions$1 = _objectSpread$5(_objectSpread$5({}, defaultOptions$1), options);
+  defaultOptions$1 = _objectSpread$7(_objectSpread$7({}, defaultOptions$1), options);
 }
 function getDefaults() {
   return defaultOptions$1;
@@ -4837,9 +4838,9 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function useTranslation(ns) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var i18nFromProps = props.i18n;
@@ -4867,7 +4868,7 @@ function useTranslation(ns) {
 
   if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
 
-  var i18nOptions = _objectSpread$4(_objectSpread$4(_objectSpread$4({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -4966,7 +4967,7 @@ var labels = {
 	regex: "Regex",
 	regexCondition: "Condition",
 	helpMessage: "Help message",
-	isRequired: "Is required",
+	isRequired: "Mark as a required field",
 	submit: "Submit",
 	reorder: "Reorder",
 	saveChanges: "Save changes",
@@ -5241,11 +5242,11 @@ var useReorderFields = function useReorderFields() {
   });
 };
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
   return options.map(function (option, index) {
-    return _objectSpread$3(_objectSpread$3({}, option), {}, {
+    return _objectSpread$5(_objectSpread$5({}, option), {}, {
       displayOrder: index
     });
   });
@@ -5257,7 +5258,7 @@ var buildPayload = function buildPayload(_ref) {
     _ref$ownerId = _ref.ownerId,
     ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
   var kind = formValues.kind.value;
-  return _objectSpread$3(_objectSpread$3({}, ramda.pick(["name", "isRequired"], formValues)), {}, {
+  return _objectSpread$5(_objectSpread$5({}, ramda.omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
     kind: kind,
     resourceType: ramda.isEmpty(resourceType) ? undefined : resourceType,
     ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId,
@@ -5283,7 +5284,7 @@ var getPermittedKinds = function getPermittedKinds(_ref2) {
   return permittedKinds;
 };
 var generateValidationSchema = function generateValidationSchema(additionalValidations) {
-  return yup__namespace.object().shape(_objectSpread$3(_objectSpread$3({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+  return yup__namespace.object().shape(_objectSpread$5(_objectSpread$5({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
 };
 
 var regexValidationSchema = yup__namespace.object().shape({
@@ -5528,7 +5529,9 @@ var FieldForm = function FieldForm(_ref) {
   }, t("labels.isRequired"))), children));
 };
 
-var _excluded$2 = ["resourceType", "allowedKinds", "additionalValidations", "onClose"];
+var _excluded$2 = ["resourceType", "allowedKinds", "additionalValidations", "initialValues", "onClose"];
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @type {React.FC<import("types").AddProps>} */
 
@@ -5536,6 +5539,7 @@ var Add = function Add(_ref) {
   var resourceType = _ref.resourceType,
     allowedKinds = _ref.allowedKinds,
     additionalValidations = _ref.additionalValidations,
+    initialValues = _ref.initialValues,
     onClose = _ref.onClose,
     props = _objectWithoutProperties(_ref, _excluded$2);
   var _useTranslation = useTranslation(),
@@ -5557,7 +5561,7 @@ var Add = function Add(_ref) {
     style: "h2"
   }, t("titles.addField"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formikProps: {
-      initialValues: INITIAL_FIELDS,
+      initialValues: _objectSpread$4(_objectSpread$4({}, initialValues), INITIAL_FIELDS),
       validationSchema: generateValidationSchema(additionalValidations),
       onSubmit: handleSubmit
     }
@@ -5584,7 +5588,9 @@ var Add = function Add(_ref) {
   }));
 };
 
-var _excluded$1 = ["fieldId", "allowedKinds", "additionalValidations", "onClose"];
+var _excluded$1 = ["fieldId", "allowedKinds", "additionalValidations", "initialValues", "onClose"];
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @type {React.FC<import("types").EditProps>} */
 
@@ -5593,6 +5599,8 @@ var Edit = function Edit(_ref) {
     allowedKinds = _ref.allowedKinds,
     _ref$additionalValida = _ref.additionalValidations,
     additionalValidations = _ref$additionalValida === void 0 ? {} : _ref$additionalValida,
+    _ref$initialValues = _ref.initialValues,
+    initialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
     onClose = _ref.onClose,
     props = _objectWithoutProperties(_ref, _excluded$1);
   var _useTranslation = useTranslation(),
@@ -5620,7 +5628,7 @@ var Edit = function Edit(_ref) {
     style: "h2"
   }, t("titles.editField"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formikProps: {
-      initialValues: ramda.assoc("kind", FIELD_KINDS[field.kind], field),
+      initialValues: _objectSpread$3(_objectSpread$3({}, initialValues), ramda.assoc("kind", FIELD_KINDS[field.kind], field)),
       validationSchema: generateValidationSchema(additionalValidations),
       enableReinitialize: true,
       onSubmit: handleSubmit
@@ -5675,6 +5683,7 @@ var AddField = function AddField(_ref) {
     _ref$allowedKinds = _ref.allowedKinds,
     allowedKinds = _ref$allowedKinds === void 0 ? ALL_KINDS : _ref$allowedKinds,
     additionalValidations = _ref.additionalValidations,
+    initialValues = _ref.initialValues,
     children = _ref.children;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -5690,6 +5699,7 @@ var AddField = function AddField(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement(FieldsPane, {
     additionalValidations: additionalValidations,
     allowedKinds: allowedKinds,
+    initialValues: initialValues,
     isOpen: isOpen,
     resourceType: resourceType,
     onClose: function onClose() {
@@ -6514,6 +6524,125 @@ var FieldInputs = function FieldInputs(_ref) {
   });
 };
 
+var Menu = neetoui.Dropdown.Menu,
+  MenuItem = neetoui.Dropdown.MenuItem;
+var buildDefaultColumns = function buildDefaultColumns(_ref) {
+  var onDeleteClick = _ref.onDeleteClick,
+    onEditClick = _ref.onEditClick;
+  return [{
+    key: "name",
+    dataIndex: "name",
+    title: t("titles.name"),
+    render: function render(name, field) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex items-center justify-between gap-x-3"
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+        style: "body2"
+      }, name), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+        buttonProps: {
+          className: "flex-shrink-0"
+        },
+        buttonStyle: "text",
+        icon: neetoIcons.MenuHorizontal,
+        strategy: "fixed"
+      }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+        onClick: function onClick() {
+          return onEditClick(field);
+        }
+      }, t("labels.edit")), !field.isSystem && /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+        onClick: function onClick() {
+          return onDeleteClick(field);
+        }
+      }, t("labels.delete")))));
+    }
+  }, {
+    key: "kind",
+    dataIndex: "kind",
+    title: t("titles.kind"),
+    render: function render(kind) {
+      return DISPLAY_KINDS[kind];
+    }
+  }, {
+    key: "isRequired",
+    dataIndex: "isRequired",
+    title: t("titles.required"),
+    render: function render(boolVal) {
+      return boolVal ? t("common.yes") : t("common.no");
+    }
+  }];
+};
+var renderMenuBarItems = function renderMenuBarItems(_ref2) {
+  var items = _ref2.items,
+    isOwnerBased = _ref2.isOwnerBased,
+    selectedMenu = _ref2.selectedMenu,
+    setSelectedMenu = _ref2.setSelectedMenu;
+  if (isOwnerBased) {
+    return items.map(function (item) {
+      return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Item, {
+        active: selectedMenu === item.id,
+        description: t("messages.manageFieldFor", {
+          resource: item.name
+        }),
+        key: item.id,
+        label: pure.capitalize(item.name),
+        onClick: function onClick() {
+          return setSelectedMenu(item.id);
+        }
+      });
+    });
+  }
+  return items.map(function (item) {
+    return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Item, {
+      active: selectedMenu === item,
+      description: t("messages.manageFieldFor", {
+        resource: item
+      }),
+      key: item,
+      label: pure.capitalize(item),
+      onClick: function onClick() {
+        return setSelectedMenu(item);
+      }
+    });
+  });
+};
+var renderMenuBarFilters = function renderMenuBarFilters(_ref3) {
+  var selectedState = _ref3.selectedState,
+    setSelectedState = _ref3.setSelectedState,
+    fieldStatesTaxonomy = _ref3.fieldStatesTaxonomy,
+    activeFieldsCount = _ref3.activeFieldsCount,
+    inactiveFieldsCount = _ref3.inactiveFieldsCount;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].SubTitle, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h5",
+    textTransform: "uppercase",
+    weight: "bold"
+  }, t("titles.filters"))), /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Block, {
+    active: selectedState === FIELD_STATES.active,
+    count: activeFieldsCount,
+    label: fieldStatesTaxonomy.active,
+    onClick: function onClick() {
+      return setSelectedState(FIELD_STATES.active);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Block, {
+    active: selectedState === FIELD_STATES.inactive,
+    count: inactiveFieldsCount,
+    label: fieldStatesTaxonomy.inactive,
+    onClick: function onClick() {
+      return setSelectedState(FIELD_STATES.inactive);
+    }
+  }));
+};
+var getDashBoardTitle = function getDashBoardTitle(_ref4) {
+  var _findBy;
+  var isOwnerBased = _ref4.isOwnerBased,
+    owners = _ref4.owners,
+    selectedVal = _ref4.selectedVal;
+  return t("messages.manageFieldFor", {
+    resource: isOwnerBased ? (_findBy = pure.findBy({
+      id: selectedVal
+    }, owners)) === null || _findBy === void 0 ? void 0 : _findBy.name : selectedVal
+  });
+};
+
 var fetchConfigs = function fetchConfigs() {
   return axios__default["default"].get(CONFIGS_URL);
 };
@@ -6525,6 +6654,154 @@ var useFetchConfigs = function useFetchConfigs() {
   return reactQuery.useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs);
 };
 
+var useFieldsDashboard = function useFieldsDashboard(_ref) {
+  var buildColumnData = _ref.buildColumnData,
+    showOwnersInMenu = _ref.showOwnersInMenu;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPaneOpen = _useState2[0],
+    setIsPaneOpen = _useState2[1];
+  var _useState3 = React.useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isMenuBarOpen = _useState4[0],
+    setIsMenuBarOpen = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isDeleteAlertOpen = _useState6[0],
+    setIsDeleteAlertOpen = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isReorderPaneOpen = _useState8[0],
+    setIsReorderPaneOpen = _useState8[1];
+  var _getQueryParams = utils.getQueryParams(),
+    resource = _getQueryParams.resource,
+    state = _getQueryParams.state;
+  var _useState9 = React.useState(resource || ""),
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectedMenu = _useState10[0],
+    setSelectedMenu = _useState10[1];
+  var _useState11 = React.useState({}),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedField = _useState12[0],
+    setSelectedField = _useState12[1];
+  var _useState13 = React.useState(state || FIELD_STATES.active),
+    _useState14 = _slicedToArray(_useState13, 2),
+    selectedState = _useState14[0],
+    setSelectedState = _useState14[1];
+  var history = reactRouterDom.useHistory();
+  var _useFetchConfigs = useFetchConfigs(),
+    _useFetchConfigs$data = _useFetchConfigs.data,
+    _useFetchConfigs$data2 = _useFetchConfigs$data === void 0 ? {} : _useFetchConfigs$data,
+    _useFetchConfigs$data3 = _useFetchConfigs$data2.owners,
+    owners = _useFetchConfigs$data3 === void 0 ? [] : _useFetchConfigs$data3,
+    _useFetchConfigs$data4 = _useFetchConfigs$data2.resourceTypes,
+    resourceTypes = _useFetchConfigs$data4 === void 0 ? [] : _useFetchConfigs$data4,
+    isConfigsLoading = _useFetchConfigs.isLoading;
+  var _useFetchFields = useFetchFields({
+      resourceType: !showOwnersInMenu ? selectedMenu : undefined,
+      ownerId: showOwnersInMenu ? selectedMenu : undefined,
+      state: selectedState
+    }, {
+      enabled: !!selectedMenu
+    }),
+    _useFetchFields$data = _useFetchFields.data,
+    _useFetchFields$data2 = _useFetchFields$data === void 0 ? {} : _useFetchFields$data,
+    _useFetchFields$data3 = _useFetchFields$data2.fields,
+    fields = _useFetchFields$data3 === void 0 ? [] : _useFetchFields$data3,
+    count = _useFetchFields$data2.count,
+    activeFieldsCount = _useFetchFields$data2.activeFieldsCount,
+    inactiveFieldsCount = _useFetchFields$data2.inactiveFieldsCount,
+    isFieldsLoading = _useFetchFields.isLoading,
+    isFieldsFetching = _useFetchFields.isFetching;
+  var _useDestroyField = useDestroyField(),
+    deleteField = _useDestroyField.mutate,
+    isDeleting = _useDestroyField.isLoading;
+  var handleDelete = function handleDelete() {
+    deleteField(selectedField.id, {
+      onSuccess: function onSuccess() {
+        setIsDeleteAlertOpen(false);
+        setSelectedField({});
+      }
+    });
+  };
+  var handleClosePane = function handleClosePane() {
+    setIsPaneOpen(false);
+    setSelectedField({});
+  };
+  var handleEditButtonClick = function handleEditButtonClick(field) {
+    setSelectedField(field);
+    setIsPaneOpen(true);
+  };
+  var handleDeleteButtonClick = function handleDeleteButtonClick(field) {
+    setSelectedField(field);
+    setIsDeleteAlertOpen(true);
+  };
+  var handleAlertClose = function handleAlertClose() {
+    setIsDeleteAlertOpen(false);
+    setSelectedField({});
+  };
+  var handleReorderPaneClose = function handleReorderPaneClose() {
+    setIsReorderPaneOpen(false);
+  };
+  var defaultColumns = buildDefaultColumns({
+    onDeleteClick: handleDeleteButtonClick,
+    onEditClick: handleEditButtonClick
+  });
+  var columnData = buildColumnData({
+    onEditClick: handleEditButtonClick,
+    onDeleteClick: handleDeleteButtonClick,
+    defaultColumns: defaultColumns
+  });
+  var menuItems = showOwnersInMenu ? owners : resourceTypes;
+  var isScreenLoading = isFieldsLoading || isConfigsLoading;
+  var showCountSubheader = count > 0;
+  React.useEffect(function () {
+    if (resource) {
+      setSelectedMenu(resource);
+    } else {
+      var _owners$;
+      showOwnersInMenu ? setSelectedMenu((_owners$ = owners[0]) === null || _owners$ === void 0 ? void 0 : _owners$.id) : setSelectedMenu(resourceTypes[0]);
+    }
+  }, [isConfigsLoading, resource]);
+  React.useEffect(function () {
+    history.push(utils.buildUrl("", {
+      resource: selectedMenu,
+      state: selectedState
+    }));
+  }, [selectedMenu, selectedState]);
+  return {
+    isPaneOpen: isPaneOpen,
+    setIsPaneOpen: setIsPaneOpen,
+    isMenuBarOpen: isMenuBarOpen,
+    setIsMenuBarOpen: setIsMenuBarOpen,
+    isDeleteAlertOpen: isDeleteAlertOpen,
+    isReorderPaneOpen: isReorderPaneOpen,
+    setIsReorderPaneOpen: setIsReorderPaneOpen,
+    fields: fields,
+    owners: owners,
+    count: count,
+    activeFieldsCount: activeFieldsCount,
+    inactiveFieldsCount: inactiveFieldsCount,
+    menuItems: menuItems,
+    columnData: columnData,
+    selectedField: selectedField,
+    selectedState: selectedState,
+    setSelectedState: setSelectedState,
+    selectedMenu: selectedMenu,
+    setSelectedMenu: setSelectedMenu,
+    isFieldsFetching: isFieldsFetching,
+    isFieldsLoading: isFieldsLoading,
+    isDeleting: isDeleting,
+    isScreenLoading: isScreenLoading,
+    isConfigsLoading: isConfigsLoading,
+    showCountSubheader: showCountSubheader,
+    handleDelete: handleDelete,
+    handleAlertClose: handleAlertClose,
+    handleClosePane: handleClosePane,
+    handleReorderPaneClose: handleReorderPaneClose
+  };
+};
+
 var FieldsTable = function FieldsTable(_ref) {
   var totalCount = _ref.totalCount,
     isLoading = _ref.isLoading,
@@ -10901,125 +11178,6 @@ var ReorderPane = function ReorderPane(_ref) {
   })));
 };
 
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
-var buildDefaultColumns = function buildDefaultColumns(_ref) {
-  var onDeleteClick = _ref.onDeleteClick,
-    onEditClick = _ref.onEditClick;
-  return [{
-    key: "name",
-    dataIndex: "name",
-    title: t("titles.name"),
-    render: function render(name, field) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex items-center justify-between gap-x-3"
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        style: "body2"
-      }, name), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-        buttonProps: {
-          className: "flex-shrink-0"
-        },
-        buttonStyle: "text",
-        icon: neetoIcons.MenuHorizontal,
-        strategy: "fixed"
-      }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-        onClick: function onClick() {
-          return onEditClick(field);
-        }
-      }, t("labels.edit")), !field.isSystem && /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-        onClick: function onClick() {
-          return onDeleteClick(field);
-        }
-      }, t("labels.delete")))));
-    }
-  }, {
-    key: "kind",
-    dataIndex: "kind",
-    title: t("titles.kind"),
-    render: function render(kind) {
-      return DISPLAY_KINDS[kind];
-    }
-  }, {
-    key: "isRequired",
-    dataIndex: "isRequired",
-    title: t("titles.required"),
-    render: function render(boolVal) {
-      return boolVal ? t("common.yes") : t("common.no");
-    }
-  }];
-};
-var renderMenuBarItems = function renderMenuBarItems(_ref2) {
-  var items = _ref2.items,
-    isOwnerBased = _ref2.isOwnerBased,
-    selectedMenu = _ref2.selectedMenu,
-    setSelectedMenu = _ref2.setSelectedMenu;
-  if (isOwnerBased) {
-    return items.map(function (item) {
-      return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Item, {
-        active: selectedMenu === item.id,
-        description: t("messages.manageFieldFor", {
-          resource: item.name
-        }),
-        key: item.id,
-        label: pure.capitalize(item.name),
-        onClick: function onClick() {
-          return setSelectedMenu(item.id);
-        }
-      });
-    });
-  }
-  return items.map(function (item) {
-    return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Item, {
-      active: selectedMenu === item,
-      description: t("messages.manageFieldFor", {
-        resource: item
-      }),
-      key: item,
-      label: pure.capitalize(item),
-      onClick: function onClick() {
-        return setSelectedMenu(item);
-      }
-    });
-  });
-};
-var renderMenuBarFilters = function renderMenuBarFilters(_ref3) {
-  var selectedState = _ref3.selectedState,
-    setSelectedState = _ref3.setSelectedState,
-    fieldStatesTaxonomy = _ref3.fieldStatesTaxonomy,
-    activeFieldsCount = _ref3.activeFieldsCount,
-    inactiveFieldsCount = _ref3.inactiveFieldsCount;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].SubTitle, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h5",
-    textTransform: "uppercase",
-    weight: "bold"
-  }, t("titles.filters"))), /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Block, {
-    active: selectedState === FIELD_STATES.active,
-    count: activeFieldsCount,
-    label: fieldStatesTaxonomy.active,
-    onClick: function onClick() {
-      return setSelectedState(FIELD_STATES.active);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Block, {
-    active: selectedState === FIELD_STATES.inactive,
-    count: inactiveFieldsCount,
-    label: fieldStatesTaxonomy.inactive,
-    onClick: function onClick() {
-      return setSelectedState(FIELD_STATES.inactive);
-    }
-  }));
-};
-var getDashBoardTitle = function getDashBoardTitle(_ref4) {
-  var _findBy;
-  var isOwnerBased = _ref4.isOwnerBased,
-    owners = _ref4.owners,
-    selectedVal = _ref4.selectedVal;
-  return t("messages.manageFieldFor", {
-    resource: isOwnerBased ? (_findBy = pure.findBy({
-      id: selectedVal
-    }, owners)) === null || _findBy === void 0 ? void 0 : _findBy.name : selectedVal
-  });
-};
-
 /** @type {React.FC<import("types").FieldsDashboardProps>} */
 
 var FieldsDashboard = function FieldsDashboard(_ref) {
@@ -11044,106 +11202,41 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     showStateFilter = _ref$showStateFilter === void 0 ? true : _ref$showStateFilter,
     _ref$fieldStatesTaxon = _ref.fieldStatesTaxonomy,
     fieldStatesTaxonomy = _ref$fieldStatesTaxon === void 0 ? DEFAULT_FIELD_STATE_TAXONOMY : _ref$fieldStatesTaxon;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPaneOpen = _useState2[0],
-    setIsPaneOpen = _useState2[1];
-  var _useState3 = React.useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isMenuBarOpen = _useState4[0],
-    setIsMenuBarOpen = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isDeleteAlertOpen = _useState6[0],
-    setIsDeleteAlertOpen = _useState6[1];
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isReorderPaneOpen = _useState8[0],
-    setIsReorderPaneOpen = _useState8[1];
-  var _useState9 = React.useState(""),
-    _useState10 = _slicedToArray(_useState9, 2),
-    selectedMenu = _useState10[0],
-    setSelectedMenu = _useState10[1];
-  var _useState11 = React.useState({}),
-    _useState12 = _slicedToArray(_useState11, 2),
-    selectedField = _useState12[0],
-    setSelectedField = _useState12[1];
-  var _useState13 = React.useState(FIELD_STATES.active),
-    _useState14 = _slicedToArray(_useState13, 2),
-    selectedState = _useState14[0],
-    setSelectedState = _useState14[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useFetchConfigs = useFetchConfigs(),
-    _useFetchConfigs$data = _useFetchConfigs.data,
-    _useFetchConfigs$data2 = _useFetchConfigs$data === void 0 ? {} : _useFetchConfigs$data,
-    _useFetchConfigs$data3 = _useFetchConfigs$data2.owners,
-    owners = _useFetchConfigs$data3 === void 0 ? [] : _useFetchConfigs$data3,
-    _useFetchConfigs$data4 = _useFetchConfigs$data2.resourceTypes,
-    resourceTypes = _useFetchConfigs$data4 === void 0 ? [] : _useFetchConfigs$data4,
-    isConfigsLoading = _useFetchConfigs.isLoading;
-  var _useFetchFields = useFetchFields({
-      resourceType: !showOwnersInMenu ? selectedMenu : undefined,
-      ownerId: showOwnersInMenu ? selectedMenu : undefined,
-      state: selectedState
-    }, {
-      enabled: !!selectedMenu
+  var _useFieldsDashboard = useFieldsDashboard({
+      buildColumnData: buildColumnData,
+      showOwnersInMenu: showOwnersInMenu
     }),
-    _useFetchFields$data = _useFetchFields.data,
-    _useFetchFields$data2 = _useFetchFields$data === void 0 ? {} : _useFetchFields$data,
-    _useFetchFields$data3 = _useFetchFields$data2.fields,
-    fields = _useFetchFields$data3 === void 0 ? [] : _useFetchFields$data3,
-    count = _useFetchFields$data2.count,
-    activeFieldsCount = _useFetchFields$data2.activeFieldsCount,
-    inactiveFieldsCount = _useFetchFields$data2.inactiveFieldsCount,
-    isFieldsLoading = _useFetchFields.isLoading,
-    isFieldsFetching = _useFetchFields.isFetching;
-  var _useDestroyField = useDestroyField(),
-    deleteField = _useDestroyField.mutate,
-    isDeleting = _useDestroyField.isLoading;
-  var handleDelete = function handleDelete() {
-    deleteField(selectedField.id, {
-      onSuccess: function onSuccess() {
-        setIsDeleteAlertOpen(false);
-        setSelectedField({});
-      }
-    });
-  };
-  var handleClosePane = function handleClosePane() {
-    setIsPaneOpen(false);
-    setSelectedField({});
-  };
-  var handleEditButtonClick = function handleEditButtonClick(field) {
-    setSelectedField(field);
-    setIsPaneOpen(true);
-  };
-  var handleDeleteButtonClick = function handleDeleteButtonClick(field) {
-    setSelectedField(field);
-    setIsDeleteAlertOpen(true);
-  };
-  var handleAlertClose = function handleAlertClose() {
-    setIsDeleteAlertOpen(false);
-    setSelectedField({});
-  };
-  var handleReorderPaneClose = function handleReorderPaneClose() {
-    setIsReorderPaneOpen(false);
-  };
-  var defaultColumns = buildDefaultColumns({
-    onDeleteClick: handleDeleteButtonClick,
-    onEditClick: handleEditButtonClick
-  });
-  var columnData = buildColumnData({
-    onEditClick: handleEditButtonClick,
-    onDeleteClick: handleDeleteButtonClick,
-    defaultColumns: defaultColumns
-  });
-  var menuItems = showOwnersInMenu ? owners : resourceTypes;
-  var isScreenLoading = isFieldsLoading || isConfigsLoading;
-  var showCountSubheader = count > 0;
-  React.useEffect(function () {
-    var _owners$;
-    showOwnersInMenu ? setSelectedMenu((_owners$ = owners[0]) === null || _owners$ === void 0 ? void 0 : _owners$.id) : setSelectedMenu(resourceTypes[0]);
-  }, [isConfigsLoading]);
+    isPaneOpen = _useFieldsDashboard.isPaneOpen,
+    setIsPaneOpen = _useFieldsDashboard.setIsPaneOpen,
+    isMenuBarOpen = _useFieldsDashboard.isMenuBarOpen,
+    setIsMenuBarOpen = _useFieldsDashboard.setIsMenuBarOpen,
+    isDeleteAlertOpen = _useFieldsDashboard.isDeleteAlertOpen,
+    isReorderPaneOpen = _useFieldsDashboard.isReorderPaneOpen,
+    setIsReorderPaneOpen = _useFieldsDashboard.setIsReorderPaneOpen,
+    fields = _useFieldsDashboard.fields,
+    owners = _useFieldsDashboard.owners,
+    count = _useFieldsDashboard.count,
+    activeFieldsCount = _useFieldsDashboard.activeFieldsCount,
+    inactiveFieldsCount = _useFieldsDashboard.inactiveFieldsCount,
+    menuItems = _useFieldsDashboard.menuItems,
+    columnData = _useFieldsDashboard.columnData,
+    selectedField = _useFieldsDashboard.selectedField,
+    selectedState = _useFieldsDashboard.selectedState,
+    setSelectedState = _useFieldsDashboard.setSelectedState,
+    selectedMenu = _useFieldsDashboard.selectedMenu,
+    setSelectedMenu = _useFieldsDashboard.setSelectedMenu,
+    isFieldsFetching = _useFieldsDashboard.isFieldsFetching,
+    isFieldsLoading = _useFieldsDashboard.isFieldsLoading,
+    isDeleting = _useFieldsDashboard.isDeleting,
+    isScreenLoading = _useFieldsDashboard.isScreenLoading,
+    isConfigsLoading = _useFieldsDashboard.isConfigsLoading,
+    showCountSubheader = _useFieldsDashboard.showCountSubheader,
+    handleDelete = _useFieldsDashboard.handleDelete,
+    handleAlertClose = _useFieldsDashboard.handleAlertClose,
+    handleClosePane = _useFieldsDashboard.handleClosePane,
+    handleReorderPaneClose = _useFieldsDashboard.handleReorderPaneClose;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex flex-grow"
   }, /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"], {
@@ -11187,6 +11280,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     }), /*#__PURE__*/React__default["default"].createElement(FieldsPane, {
       additionalValidations: paneProps === null || paneProps === void 0 ? void 0 : paneProps.validations,
       allowedKinds: allowedKinds,
+      initialValues: paneProps === null || paneProps === void 0 ? void 0 : paneProps.initialValues,
       isOpen: isPaneOpen,
       resourceType: showOwnersInMenu ? resourceType : selectedMenu,
       selectedField: selectedField,
@@ -11201,7 +11295,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       className: "mr-4 font-semibold",
       style: "h4"
-    }, count, t("titles.field", count > 1 ? PLURAL : SINGULAR).toLocaleLowerCase())
+    }, "".concat(count, " "), t("titles.field", count > 1 ? PLURAL : SINGULAR).toLocaleLowerCase())
   }), /*#__PURE__*/React__default["default"].createElement(FieldsTable, {
     columnData: columnData,
     isLoading: isFieldsFetching || isFieldsLoading,
@@ -11330,7 +11424,9 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     _ref$customComponents = _ref.customComponents,
     customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents,
     _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$showBorder = _ref.showBorder,
+    showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder;
   var _useFetchFields = useFetchFields({
       resourceType: ramda.isEmpty(resourceType) ? undefined : resourceType,
       ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId
@@ -11341,8 +11437,12 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     fields = _useFetchFields$data3 === void 0 ? [] : _useFetchFields$data3,
     isFieldsLoading = _useFetchFields.isLoading;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"](className, "neeto-ui-border-gray-300 m-3 space-y-3 rounded-lg border bg-white px-4 py-2")
-  }, isFieldsLoading ? /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null) : getNonSystemFields(fields).map(function (field) {
+    className: classnames__default["default"]("space-y-3", {
+      "neeto-ui-border-gray-300 m-3 rounded-lg border bg-white px-4 py-2": showBorder
+    }, className)
+  }, isFieldsLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center justify-center"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)) : getNonSystemFields(fields).map(function (field) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: field.id
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {