@bigbinary/neeto-fields-frontend 1.1.3 → 1.1.5

package/dist/index.cjs.js

@@ -7,6 +7,7 @@ var neetoui = require('@bigbinary/neetoui');
 var pure = require('@bigbinary/neeto-commons-frontend/pure');
 var ramda = require('ramda');
 var formik = require('formik');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var yup = require('yup');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var formik$1 = require('@bigbinary/neetoui/formik');
@@ -18,7 +19,6 @@ var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var reactQuery = require('react-query');
 var axios = require('axios');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var reactRouterDom = require('react-router-dom');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var reactDom = require('react-dom');
@@ -5341,9 +5341,12 @@ var fields = {
 	}
 };
 var messages = {
-	noFields: "There are no fields to show",
+	noFields: "There are no {{title}} to show",
 	confirmDelete: "Are you sure want to delete the field? This action cannot be undone.",
 	manageFieldFor: "Manage fields for {{resource}}",
+	manageTitleForResource: "Manage {{title}} for {{resource}}",
+	titleForResource: "{{title}} for {{resource}}",
+	stateTitleForResource: "{{state}} {{title}} for {{resource}}",
 	invalidKind: "Invalid kind",
 	reorderFields: "Fields are displayed from top to bottom."
 };
@@ -5364,7 +5367,7 @@ var tooltips = {
 	reorder: "Fields a are displayed from top to bottom. Re-order them"
 };
 var helpTexts = {
-	noData: "Here is how you can use <a>fields.</a>"
+	noData: "Here is how you can use <a>{{title}}.</a>"
 };
 var en = {
 	common: common,
@@ -5879,57 +5882,60 @@ var buildSchemaAllowingEmptyValue = function buildSchemaAllowingEmptyValue(schem
     name: "validate-if-not-empty",
     test: function test(value) {
       if (pure.isNotEmpty(value) && ramda.isNotNil(value)) {
-        try {
-          schema.validateSync(value);
-          return true;
-        } catch (_unused) {
-          return false;
-        }
+        schema.validateSync(value);
+      }
+      return true;
+    }
+  });
+};
+var buildSchemaForRequiredInputs = function buildSchemaForRequiredInputs(schema) {
+  return yup__namespace.mixed().test({
+    name: "validate-required-inputs",
+    test: function test(value) {
+      if (ramda.isEmpty(value) || ramda.isNil(value)) {
+        throw new yup__namespace.ValidationError(t$1("validations.thisIsRequired"));
       }
+      schema.validateSync(value);
       return true;
     }
   });
 };
-var buildFieldValidationSchema = function buildFieldValidationSchema(_ref) {
-  var kind = _ref.kind,
-    isRequired = _ref.isRequired,
-    fieldData = _ref.fieldData;
+var buildSchema = function buildSchema(_ref) {
+  var schema = _ref.schema,
+    isRequired = _ref.isRequired;
+  return isRequired ? buildSchemaForRequiredInputs(schema) : buildSchemaAllowingEmptyValue(schema);
+};
+var getBasicValidationSchema = function getBasicValidationSchema(_ref2) {
+  var kind = _ref2.kind,
+    fieldData = _ref2.fieldData;
   switch (kind) {
     case KINDS.singleOption:
     case KINDS.text:
       {
-        var schema = yup__namespace.string().trim().nullable();
-        return isRequired ? schema.required(t$1("validations.thisIsRequired")) : schema;
+        return yup__namespace.string().trim().nullable();
       }
     case KINDS.number:
     case KINDS.monetary:
     case KINDS.decimal:
       {
-        var _schema = buildSchemaAllowingEmptyValue(yup__namespace.number().typeError(t$1("validations.notAValidNumber")));
-        return isRequired ? _schema.required(t$1("validations.thisIsRequired")) : _schema;
+        return yup__namespace.number(t$1("validations.notAValidNumber")).nullable();
       }
     case KINDS.integer:
       {
-        var _schema2 = buildSchemaAllowingEmptyValue(yup__namespace.number().nullable().integer().typeError(t$1("validations.notAValidInteger")));
-        return isRequired ? _schema2.required(t$1("validations.thisIsRequired")) : _schema2;
+        return yup__namespace.number().nullable().integer(t$1("validations.notAValidInteger"));
       }
     case KINDS.date:
     case KINDS.time:
       {
-        var _schema3 = buildSchemaAllowingEmptyValue(dateSchema);
-        return isRequired ? _schema3.required(t$1("validations.thisIsRequired")) : _schema3;
+        return dateSchema;
       }
     case KINDS.multiOption:
       {
-        var _schema4 = yup__namespace.array().of(yup__namespace.string()).nullable();
-        return isRequired ? _schema4.min(1, t$1("validations.minOneItem")).required(t$1("validations.thisIsRequired")) : _schema4;
+        return yup__namespace.array().of(yup__namespace.string()).nullable();
       }
     case KINDS.dateRange:
     case KINDS.timeRange:
       {
-        if (isRequired) {
-          return yup__namespace.array().of(dateSchema).required(t$1("validations.thisIsRequired"));
-        }
         return yup__namespace.array().of(dateSchema).nullable();
       }
     case KINDS.checkbox:
@@ -5937,13 +5943,25 @@ var buildFieldValidationSchema = function buildFieldValidationSchema(_ref) {
     case KINDS.regex:
       {
         var regexPattern = fieldData === null || fieldData === void 0 ? void 0 : fieldData.condition;
-        var _schema5 = buildSchemaAllowingEmptyValue(yup__namespace.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage));
-        return isRequired ? _schema5.required(t$1("validations.thisIsRequired")) : _schema5;
+        return yup__namespace.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage);
       }
     default:
       return yup__namespace.mixed();
   }
 };
+var buildFieldValidationSchema = function buildFieldValidationSchema(_ref3) {
+  var kind = _ref3.kind,
+    isRequired = _ref3.isRequired,
+    fieldData = _ref3.fieldData;
+  var schema = getBasicValidationSchema({
+    kind: kind,
+    fieldData: fieldData
+  });
+  return buildSchema({
+    schema: schema,
+    isRequired: isRequired
+  });
+};
 var cleanedRegex = function cleanedRegex(expression) {
   if (expression.startsWith("/") && expression.endsWith("/")) {
     return expression.slice(1, -1);
@@ -5952,9 +5970,9 @@ var cleanedRegex = function cleanedRegex(expression) {
 };
 var buildOptionsToLabelAndValue = function buildOptionsToLabelAndValue() {
   var optionObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return optionObjects.map(function (_ref2) {
-    var label = _ref2.label,
-      value = _ref2.value;
+  return optionObjects.map(function (_ref4) {
+    var label = _ref4.label,
+      value = _ref4.value;
     return {
       label: label,
       value: value || label
@@ -5965,12 +5983,12 @@ var buildArrayToLabelAndValues = function buildArrayToLabelAndValues(value) {
   return ramda.map(pure.toLabelAndValue, value || []);
 };
 var validateField = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
+  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref5) {
     var fieldValue, fieldName, isRequired, kind, fieldData;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          fieldValue = _ref3.fieldValue, fieldName = _ref3.fieldName, isRequired = _ref3.isRequired, kind = _ref3.kind, fieldData = _ref3.fieldData;
+          fieldValue = _ref5.fieldValue, fieldName = _ref5.fieldName, isRequired = _ref5.isRequired, kind = _ref5.kind, fieldData = _ref5.fieldData;
           _context.prev = 1;
           _context.next = 4;
           return yup__namespace.object().shape(_defineProperty({}, fieldName, buildFieldValidationSchema({
@@ -5991,7 +6009,7 @@ var validateField = /*#__PURE__*/function () {
     }, _callee, null, [[1, 7]]);
   }));
   return function validateField(_x) {
-    return _ref4.apply(this, arguments);
+    return _ref6.apply(this, arguments);
   };
 }();
 var dateTimeToString = function dateTimeToString(dateTime) {
@@ -6014,8 +6032,7 @@ var useFormikFields = function useFormikFields(_ref) {
     isRequiredColumnName = _ref$isRequiredColumn === void 0 ? "isRequired" : _ref$isRequiredColumn,
     props = _objectWithoutProperties(_ref, _excluded$3);
   var formikContext = formik.useFormikContext();
-  var setFieldValue = formikContext.setFieldValue,
-    submitForm = formikContext.submitForm,
+  var submitForm = formikContext.submitForm,
     dirty = formikContext.dirty,
     isSubmitting = formikContext.isSubmitting;
   var fieldPath = escapeString("".concat(name, "-").concat(fieldId));
@@ -6042,9 +6059,10 @@ var useFormikFields = function useFormikFields(_ref) {
     formikFieldProps = _useField2[0],
     meta = _useField2[1],
     helpers = _useField2[2];
+  var debouncedSubmitForm = reactUtils.useFuncDebounce(submitForm, 100);
   var handleSubmit = function handleSubmit(value) {
-    ramda.isNotNil(value) && setFieldValue(fieldValuePath, value);
-    individualSubmit && submitForm();
+    ramda.isNotNil(value) && helpers.setValue(value);
+    individualSubmit && debouncedSubmitForm();
   };
   var getValueForField = function getValueForField(value) {
     if (kind === KINDS.singleOption) {
@@ -6055,17 +6073,19 @@ var useFormikFields = function useFormikFields(_ref) {
     return value || "";
   };
   var isDropdown = ["single_option", "multi_option"].includes(kind);
-  if (isSubmitting && !meta.touched) {
-    helpers.setTouched(true);
-  }
+  React.useEffect(function () {
+    if (isSubmitting && !meta.touched) {
+      helpers.setTouched(true);
+    }
+  }, [isSubmitting]);
   return {
+    dirty: dirty,
     handleSubmit: handleSubmit,
     fieldProps: _objectSpread$a(_objectSpread$a({}, formikFieldProps), {}, {
       required: props[isRequiredColumnName],
       error: individualSubmit ? meta.error : meta.touched && meta.error,
       options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
       value: getValueForField(formikFieldProps.value),
-      dirty: dirty,
       label: !individualSubmit && pure.capitalize(name),
       disabled: disabled
     })
@@ -6131,8 +6151,9 @@ var MultiOption = function MultiOption(props) {
 var Number$1 = function Number(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+    fieldProps = _useFormikFields.fieldProps,
+    dirty = _useFormikFields.dirty;
+  var showSubmitButton = props.individualSubmit && dirty;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, {
     type: "number",
     suffix: showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
@@ -6153,7 +6174,11 @@ var RangePicker = function RangePicker(props) {
     var _ref2 = _slicedToArray(_ref, 2),
       begin = _ref2[0],
       end = _ref2[1];
-    return handleSubmit([dateTimeToString(begin), dateTimeToString(end)]);
+    if (begin && end) {
+      handleSubmit([dateTimeToString(begin), dateTimeToString(end)]);
+    } else {
+      handleSubmit([]);
+    }
   };
   if (props.kind === KINDS.dateRange) {
     return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({}, fieldProps, {
@@ -6176,11 +6201,11 @@ var SingleOption = function SingleOption(props) {
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    isClearable: true,
     isSearchable: true
   }, fieldProps, {
-    onChange: function onChange(_ref) {
-      var value = _ref.value;
-      return handleSubmit(value);
+    onChange: function onChange(option) {
+      return handleSubmit((option === null || option === void 0 ? void 0 : option.value) || "");
     }
   }));
 };
@@ -6188,8 +6213,9 @@ var SingleOption = function SingleOption(props) {
 var Text = function Text(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+    fieldProps = _useFormikFields.fieldProps,
+    dirty = _useFormikFields.dirty;
+  var showSubmitButton = props.individualSubmit && dirty;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, {
     suffix: showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
       icon: neetoIcons.Check,
@@ -6206,8 +6232,9 @@ var TextArea = function TextArea(props) {
     t = _useTranslation.t;
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+    fieldProps = _useFormikFields.fieldProps,
+    dirty = _useFormikFields.dirty;
+  var showSubmitButton = props.individualSubmit && dirty;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Textarea, fieldProps), showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
     className: "m-auto mt-2",
     label: t("labels.submit"),
@@ -6274,26 +6301,46 @@ var transformValues = function transformValues(_ref2) {
     fieldValuesAttributes: cleanedFieldValues
   });
 };
-var getInitialFieldValue = function getInitialFieldValue(field) {
-  var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+var getDefaultInitialValue = function getDefaultInitialValue(kind) {
+  switch (kind) {
+    case KINDS.checkbox:
+      return false;
+    case KINDS.multiOption:
+    case KINDS.dateRange:
+    case KINDS.timeRange:
+      return [];
+    default:
+      return "";
+  }
+};
+var getInitialFieldValue = function getInitialFieldValue(_ref4) {
+  var field = _ref4.field,
+    _ref4$fieldValues = _ref4.fieldValues,
+    fieldValues = _ref4$fieldValues === void 0 ? [] : _ref4$fieldValues,
+    _ref4$isIndividualFie = _ref4.isIndividualFieldForm,
+    isIndividualFieldForm = _ref4$isIndividualFie === void 0 ? false : _ref4$isIndividualFie;
   var existingFieldValueData = pure.findBy({
     fieldId: field.id
   }, fieldValues);
+  var keyInData = field.kind === KINDS.multiOption ? "values" : "value";
   var newFieldValueData = {
     fieldId: field.id,
-    data: null
+    data: isIndividualFieldForm ? _defineProperty({}, keyInData, getDefaultInitialValue(field.kind)) : null
   };
   return _defineProperty({}, escapeString("".concat(field.name, "-").concat(field.id)), existingFieldValueData || newFieldValueData);
 };
 var getAllInitialFieldValues = function getAllInitialFieldValues(fields) {
   var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return getNonSystemFields(fields).map(function (field) {
-    return getInitialFieldValue(field, fieldValues);
+    return getInitialFieldValue({
+      field: field,
+      fieldValues: fieldValues
+    });
   });
 };
-var mergeInitialValues = function mergeInitialValues(_ref5) {
-  var initialValues = _ref5.initialValues,
-    fields = _ref5.fields;
+var mergeInitialValues = function mergeInitialValues(_ref7) {
+  var initialValues = _ref7.initialValues,
+    fields = _ref7.fields;
   var initialValue = ramda.mergeAll([initialValues].concat(_toConsumableArray(getAllInitialFieldValues(fields, initialValues === null || initialValues === void 0 ? void 0 : initialValues.fieldValues))));
   return ramda.omit(["fieldValues"], initialValue);
 };
@@ -6358,6 +6405,21 @@ var SINGULAR = {
 var PLURAL = {
   count: 2
 };
+var INFO_ICON_SIZE = 16;
+
+var TitleWithHelpLink = function TitleWithHelpLink(_ref) {
+  var title = _ref.title,
+    helpUrl = _ref.helpUrl;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-x-1"
+  }, title, helpUrl && /*#__PURE__*/React__default["default"].createElement("a", {
+    href: helpUrl,
+    rel: "noreferrer",
+    target: "_blank"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Info, {
+    size: INFO_ICON_SIZE
+  })));
+};
 
 var fieldUrl = function fieldUrl(fieldId) {
   return utils.buildUrl(FIELD_URL, {
@@ -6599,7 +6661,7 @@ var FIELD_KINDS = {
   single_option: {
     value: "single_option",
     label: t$1("fields.kinds.singleOption"),
-    group: 3
+    group: 12
   },
   multi_option: {
     value: "multi_option",
@@ -6799,6 +6861,7 @@ var FieldForm = function FieldForm(_ref) {
     className: "w-full space-y-4"
   }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
     required: true,
+    "data-cy": "name-text-field",
     disabled: isSystem,
     label: t("labels.fieldName"),
     name: "name",
@@ -6811,12 +6874,15 @@ var FieldForm = function FieldForm(_ref) {
     options: kindSelectOptions,
     onChange: handleKindChange
   }), isAdditionalDataNeeded(chosenKind) && /*#__PURE__*/React__default["default"].createElement(AdditionalInputs, null), !hideRequiredSwitch && /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
-    className: "flex items-center gap-2"
+    className: "flex items-center gap-2",
+    "data-cy": "is-required-switch-container"
   }, /*#__PURE__*/React__default["default"].createElement(formik$1.Switch, {
+    "data-cy": "is-required-switch",
     name: "isRequired"
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     className: "leading-4",
     component: "span",
+    "data-cy": "is-required-switch-label",
     style: "body2"
   }, t("labels.isRequired"))), children));
 };
@@ -6856,6 +6922,7 @@ var Add = function Add(_ref) {
     });
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "add-pane-header",
     style: "h2"
   }, t("titles.addField"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formikProps: {
@@ -6928,6 +6995,7 @@ var Edit = function Edit(_ref) {
     });
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "edit-pane-header",
     style: "h2"
   }, t("titles.editField"))), isLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formikProps: {
@@ -6987,17 +7055,20 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
       }, /*#__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"
+        strategy: "fixed",
+        buttonProps: {
+          className: "flex-shrink-0",
+          "data-cy": "neeto-fields-options-dropdown"
+        }
       }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+        "data-cy": "edit-menu-item-button",
         onClick: function onClick() {
           return onEditClick(field);
         }
       }, t$1("labels.edit")), !field.isSystem && /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+        "data-cy": "delete-menu-item-button",
         onClick: function onClick() {
           return onDeleteClick(field);
         }
@@ -7024,14 +7095,18 @@ var renderMenuBarItems = function renderMenuBarItems(_ref2) {
     isOwnerBased = _ref2.isOwnerBased,
     selectedMenu = _ref2.selectedMenu,
     handleBlockClick = _ref2.handleBlockClick,
-    nameAliases = _ref2.nameAliases;
+    nameAliases = _ref2.nameAliases,
+    title = _ref2.title;
+  title = title.toLocaleLowerCase();
   if (isOwnerBased) {
     return items.map(function (item) {
       return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Item, {
         active: selectedMenu === item.id,
+        "data-cy": "menubar-".concat(pure.slugify(item.name), "-menu-item"),
         key: item.id,
         label: pure.humanize(item.name),
-        description: t$1("messages.manageFieldFor", {
+        description: t$1("messages.manageTitleForResource", {
+          title: title,
           resource: pure.humanize(item.name).toLocaleLowerCase()
         }),
         onClick: handleBlockClick({
@@ -7041,11 +7116,14 @@ var renderMenuBarItems = function renderMenuBarItems(_ref2) {
     });
   }
   return items.length > 1 && items.map(function (item) {
+    var label = nameAliases[item] || pure.humanize(item);
     return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Item, {
       active: selectedMenu === item,
+      "data-cy": "neeto-fields-".concat(pure.slugify(label), "-menu-item"),
       key: item,
-      label: nameAliases[item] || pure.humanize(item),
-      description: t$1("messages.manageFieldFor", {
+      label: label,
+      description: t$1("messages.manageTitleForResource", {
+        title: title,
         resource: pure.humanize(item).toLocaleLowerCase()
       }),
       onClick: handleBlockClick({
@@ -7061,12 +7139,14 @@ var renderMenuBarFilters = function renderMenuBarFilters(_ref3) {
     inactiveFieldsCount = _ref3.inactiveFieldsCount,
     handleBlockClick = _ref3.handleBlockClick;
   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, {
+    "data-cy": "menubar-subtitle",
     style: "h5",
     textTransform: "uppercase",
     weight: "bold"
   }, t$1("titles.filters"))), /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Block, {
     active: selectedState === FIELD_STATES.active,
     count: activeFieldsCount,
+    "data-cy": "menubar-active-block",
     label: fieldStatesTaxonomy.active,
     onClick: handleBlockClick({
       state: FIELD_STATES.active
@@ -7074,6 +7154,7 @@ var renderMenuBarFilters = function renderMenuBarFilters(_ref3) {
   }), /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Block, {
     active: selectedState === FIELD_STATES.inactive,
     count: inactiveFieldsCount,
+    "data-cy": "menubar-inactive-block",
     label: fieldStatesTaxonomy.inactive,
     onClick: handleBlockClick({
       state: FIELD_STATES.inactive
@@ -7085,19 +7166,41 @@ var getDashBoardTitle = function getDashBoardTitle(_ref4) {
   var isOwnerBased = _ref4.isOwnerBased,
     owners = _ref4.owners,
     selectedVal = _ref4.selectedVal,
-    nameAliases = _ref4.nameAliases;
-  return t$1("messages.manageFieldFor", {
-    resource: isOwnerBased ? (_findBy = pure.findBy({
-      id: selectedVal
-    }, owners)) === null || _findBy === void 0 ? void 0 : _findBy.name : nameAliases[selectedVal] || selectedVal
-  });
+    nameAliases = _ref4.nameAliases,
+    isSingleResource = _ref4.isSingleResource,
+    showStateFilter = _ref4.showStateFilter,
+    selectedState = _ref4.selectedState,
+    title = _ref4.title;
+  var resource = isOwnerBased ? (_findBy = pure.findBy({
+    id: selectedVal
+  }, owners)) === null || _findBy === void 0 ? void 0 : _findBy.name : nameAliases[selectedVal] || selectedVal;
+  var displayTitle = title;
+  if (showStateFilter && !isSingleResource) {
+    displayTitle = t$1("messages.stateTitleForResource", {
+      state: selectedState,
+      title: title,
+      resource: resource
+    });
+  } else if (showStateFilter && isSingleResource) {
+    displayTitle = "".concat(selectedState, " ").concat(title);
+  } else if (!showStateFilter && !isSingleResource) {
+    displayTitle = t$1("messages.titleForResource", {
+      title: title,
+      resource: resource
+    });
+  }
+  return pure.humanize(displayTitle);
 };
-var renderNoDataHelpText = function renderNoDataHelpText(url) {
+var renderNoDataHelpText = function renderNoDataHelpText(title, url) {
   return /*#__PURE__*/React__default["default"].createElement(Trans, {
     i18nKey: "helpTexts.noData",
+    values: {
+      title: title
+    },
     components: {
       a: /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
         className: "neeto-ui-text-primary-600 underline",
+        "data-cy": "no-data-help-text-link",
         target: "_blank",
         to: {
           pathname: url
@@ -7126,9 +7229,12 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var buildColumnData = _ref.buildColumnData,
-    showOwnersInMenu = _ref.showOwnersInMenu,
+    isOwnerBased = _ref.isOwnerBased,
     fieldStatesTaxonomy = _ref.fieldStatesTaxonomy,
-    nameAliases = _ref.nameAliases;
+    nameAliases = _ref.nameAliases,
+    title = _ref.title,
+    resources = _ref.resources,
+    showStateFilter = _ref.showStateFilter;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPaneOpen = _useState2[0],
@@ -7153,15 +7259,17 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     searchTerm = _useState12[0],
     setSearchTerm = _useState12[1];
-  var _getQueryParams = utils.getQueryParams(),
-    resource = _getQueryParams.resource,
-    state = _getQueryParams.state;
-  var ownerId = showOwnersInMenu ? resource : undefined;
   var debouncedSearchTerm = reactUtils.useDebounce(searchTerm.trim());
   var history = reactRouterDom.useHistory();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useFetchConfigs = useFetchConfigs(),
+  var _getQueryParams = utils.getQueryParams(),
+    resource = _getQueryParams.resource,
+    state = _getQueryParams.state;
+  var ownerId = isOwnerBased ? resource : undefined;
+  var _useFetchConfigs = useFetchConfigs({
+      enabled: !resources
+    }),
     _useFetchConfigs$data = _useFetchConfigs.data,
     _useFetchConfigs$data2 = _useFetchConfigs$data === void 0 ? {} : _useFetchConfigs$data,
     _useFetchConfigs$data3 = _useFetchConfigs$data2.owners,
@@ -7170,7 +7278,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     resourceTypes = _useFetchConfigs$data4 === void 0 ? [] : _useFetchConfigs$data4,
     isConfigsLoading = _useFetchConfigs.isLoading;
   var fieldParams = {
-    resourceType: !showOwnersInMenu ? resource : undefined,
+    resourceType: !isOwnerBased ? resource : undefined,
     ownerId: ownerId,
     state: state || FIELD_STATES.active,
     searchTerm: debouncedSearchTerm
@@ -7246,14 +7354,15 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
       state: state
     }, params)));
   };
+  var menuItems = resources || (isOwnerBased ? owners : resourceTypes);
   var handleURLWithDefaultValues = function handleURLWithDefaultValues() {
     var queryParams = {
       resource: resource,
       state: state
     };
     if (!isConfigsLoading && ramda.isNil(resource)) {
-      var _owners$;
-      queryParams.resource = showOwnersInMenu ? (_owners$ = owners[0]) === null || _owners$ === void 0 ? void 0 : _owners$.id : resourceTypes[0];
+      var _menuItems$;
+      queryParams.resource = isOwnerBased ? menuItems === null || menuItems === void 0 ? void 0 : (_menuItems$ = menuItems[0]) === null || _menuItems$ === void 0 ? void 0 : _menuItems$.id : menuItems === null || menuItems === void 0 ? void 0 : menuItems[0];
     }
     if (!isConfigsLoading && ramda.isNil(state)) {
       queryParams.state = FIELD_STATES.active;
@@ -7262,7 +7371,6 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
       history.replace(utils.buildUrl("", queryParams));
     }
   };
-  var menuItems = showOwnersInMenu ? owners : resourceTypes;
   var isScreenLoading = isFieldsLoading || isConfigsLoading;
   var showCountSubheader = count > 0;
   var searchProps = {
@@ -7272,6 +7380,20 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     value: searchTerm,
     placeholder: t("placeholders.searchFields")
   };
+  var isSingleResource = menuItems.length === 1;
+  var isMenuBarNeeded = showStateFilter || !isSingleResource;
+  var headerDisplayTitle = React.useMemo(function () {
+    return getDashBoardTitle({
+      isOwnerBased: isOwnerBased,
+      owners: menuItems,
+      selectedVal: resource,
+      nameAliases: nameAliases,
+      showStateFilter: showStateFilter,
+      selectedState: state,
+      isSingleResource: isSingleResource,
+      title: title
+    });
+  }, [resource, state, isSingleResource, menuItems]);
   var menuBarFilters = React.useMemo(function () {
     return renderMenuBarFilters({
       selectedState: state,
@@ -7280,19 +7402,20 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
       inactiveFieldsCount: inactiveFieldsCount,
       handleBlockClick: handleBlockClick
     });
-  }, [activeFieldsCount, inactiveFieldsCount, state]);
+  }, [activeFieldsCount, inactiveFieldsCount]);
   var menuBarItems = React.useMemo(function () {
     return renderMenuBarItems({
-      isOwnerBased: showOwnersInMenu,
+      isOwnerBased: isOwnerBased,
       items: menuItems,
       selectedMenu: resource,
       handleBlockClick: handleBlockClick,
-      nameAliases: nameAliases
+      nameAliases: nameAliases,
+      title: title
     });
   }, [menuItems, resource]);
   React.useEffect(function () {
     handleURLWithDefaultValues();
-  }, [isConfigsLoading]);
+  }, [isConfigsLoading, resources]);
   return {
     isPaneOpen: isPaneOpen,
     setIsPaneOpen: setIsPaneOpen,
@@ -7302,9 +7425,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     isReorderPaneOpen: isReorderPaneOpen,
     setIsReorderPaneOpen: setIsReorderPaneOpen,
     fields: fields,
-    owners: owners,
     count: count,
-    menuItems: menuItems,
     columnData: columnData,
     selectedField: selectedField,
     selectedState: state,
@@ -7315,6 +7436,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     isDeleting: isDeleting,
     isScreenLoading: isScreenLoading,
     isConfigsLoading: isConfigsLoading,
+    isMenuBarNeeded: isMenuBarNeeded,
     showCountSubheader: showCountSubheader,
     handleDelete: handleDelete,
     handleAlertClose: handleAlertClose,
@@ -7323,7 +7445,8 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     searchProps: searchProps,
     menuBarFilters: menuBarFilters,
     menuBarItems: menuBarItems,
-    allFields: allFields
+    allFields: allFields,
+    headerDisplayTitle: headerDisplayTitle
   };
 };
 
@@ -7333,16 +7456,20 @@ var FieldsTable = function FieldsTable(_ref) {
     rowData = _ref.rowData,
     columnData = _ref.columnData,
     setIsPaneOpen = _ref.setIsPaneOpen,
-    helpDocUrl = _ref.helpDocUrl;
+    helpDocUrl = _ref.helpDocUrl,
+    title = _ref.title;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var showNoDataScreen = !isLoading && ramda.isEmpty(rowData);
+  title = title.toLocaleLowerCase();
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], null, showNoDataScreen ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex h-full w-full items-center justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, _extends({}, helpDocUrl && {
-    helpText: renderNoDataHelpText(helpDocUrl)
+    helpText: renderNoDataHelpText(title, helpDocUrl)
   }, {
-    title: t("messages.noFields"),
+    title: t("messages.noFields", {
+      title: title
+    }),
     primaryButtonProps: {
       label: t("labels.addField"),
       onClick: function onClick() {
@@ -11617,12 +11744,15 @@ var FieldBlock = function FieldBlock(_ref) {
     ref: setNodeRef,
     style: style
   }, attributes, listeners, {
-    className: "neeto-ui-text-gray-800 mb-3 flex items-center space-x-4 font-medium"
+    className: "neeto-ui-text-gray-800 mb-3 flex items-center space-x-4 font-medium",
+    "data-cy": "reorder-field-block"
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-bg-gray-100 neeto-ui-text-gray-700 neeto-ui-rounded-sm flex h-6 w-6 flex-shrink-0 items-center justify-center p-1"
   }, index - systemFieldsCount + 1), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-border-gray-400 neeto-ui-bg-white neeto-ui-rounded neeto-ui-shadow-xs flex w-96 items-center space-x-4 border border-solid p-3"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Reorder, null), /*#__PURE__*/React__default["default"].createElement("div", null, field.name)));
+  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Reorder, null), /*#__PURE__*/React__default["default"].createElement("div", {
+    "data-cy": "reorder-field-block-name"
+  }, field.name)));
 };
 var FieldBlock$1 = /*#__PURE__*/React__default["default"].memo(FieldBlock);
 
@@ -11673,10 +11803,12 @@ var ReorderPane = function ReorderPane(_ref) {
     isOpen: isOpen,
     onClose: onClose
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "reorder-pane-header",
     style: "h2",
     weight: "semibold"
   }, t("titles.reorderFields"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     className: "mb-3",
+    "data-cy": "reorder-pane-message",
     style: "body2"
   }, t("messages.reorderFields")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex flex-col items-center"
@@ -11697,11 +11829,13 @@ var ReorderPane = function ReorderPane(_ref) {
   }))))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
     className: "flex items-center space-x-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "save-changes-button",
     disabled: initialStateRef.current === fields,
     label: t("labels.saveChanges"),
     loading: isSubmitting,
     onClick: handleReorderSave
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "cancel-button",
     label: t("labels.cancel"),
     style: "text",
     onClick: onClose
@@ -11714,7 +11848,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
   var _ref$rowData = _ref.rowData,
     rowData = _ref$rowData === void 0 ? [] : _ref$rowData,
     _ref$showOwnersInMenu = _ref.showOwnersInMenu,
-    showOwnersInMenu = _ref$showOwnersInMenu === void 0 ? false : _ref$showOwnersInMenu,
+    isOwnerBased = _ref$showOwnersInMenu === void 0 ? false : _ref$showOwnersInMenu,
     _ref$resourceType = _ref.resourceType,
     resourceType = _ref$resourceType === void 0 ? "" : _ref$resourceType,
     _ref$allowedKinds = _ref.allowedKinds,
@@ -11734,14 +11868,20 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     fieldStatesTaxonomy = _ref$fieldStatesTaxon === void 0 ? DEFAULT_FIELD_STATE_TAXONOMY : _ref$fieldStatesTaxon,
     helpDocUrl = _ref.helpDocUrl,
     _ref$nameAliases = _ref.nameAliases,
-    nameAliases = _ref$nameAliases === void 0 ? {} : _ref$nameAliases;
+    nameAliases = _ref$nameAliases === void 0 ? {} : _ref$nameAliases,
+    headerTitle = _ref.headerTitle,
+    resources = _ref.resources;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var title = pure.capitalize(headerTitle || t("titles.field", PLURAL));
   var _useFieldsDashboard = useFieldsDashboard({
       buildColumnData: buildColumnData,
-      showOwnersInMenu: showOwnersInMenu,
+      isOwnerBased: isOwnerBased,
       fieldStatesTaxonomy: fieldStatesTaxonomy,
-      nameAliases: nameAliases
+      nameAliases: nameAliases,
+      title: title,
+      resources: resources,
+      showStateFilter: showStateFilter
     }),
     isPaneOpen = _useFieldsDashboard.isPaneOpen,
     setIsPaneOpen = _useFieldsDashboard.setIsPaneOpen,
@@ -11751,9 +11891,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     isReorderPaneOpen = _useFieldsDashboard.isReorderPaneOpen,
     setIsReorderPaneOpen = _useFieldsDashboard.setIsReorderPaneOpen,
     fields = _useFieldsDashboard.fields,
-    owners = _useFieldsDashboard.owners,
     count = _useFieldsDashboard.count,
-    menuItems = _useFieldsDashboard.menuItems,
     columnData = _useFieldsDashboard.columnData,
     selectedField = _useFieldsDashboard.selectedField,
     selectedState = _useFieldsDashboard.selectedState,
@@ -11763,6 +11901,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     isDeleting = _useFieldsDashboard.isDeleting,
     isScreenLoading = _useFieldsDashboard.isScreenLoading,
     isConfigsLoading = _useFieldsDashboard.isConfigsLoading,
+    isMenuBarNeeded = _useFieldsDashboard.isMenuBarNeeded,
     showCountSubheader = _useFieldsDashboard.showCountSubheader,
     handleDelete = _useFieldsDashboard.handleDelete,
     handleAlertClose = _useFieldsDashboard.handleAlertClose,
@@ -11771,11 +11910,11 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     searchProps = _useFieldsDashboard.searchProps,
     menuBarFilters = _useFieldsDashboard.menuBarFilters,
     menuBarItems = _useFieldsDashboard.menuBarItems,
-    allFields = _useFieldsDashboard.allFields;
-  var isMenuBarNeeded = showStateFilter || menuItems.length > 1;
+    allFields = _useFieldsDashboard.allFields,
+    headerDisplayTitle = _useFieldsDashboard.headerDisplayTitle;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isMenuBarNeeded && /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"], {
     showMenu: isMenuBarOpen,
-    title: t("titles.field", PLURAL)
+    title: title
   }, isConfigsLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)) : menuBarItems, showStateFilter && menuBarFilters), isScreenLoading && ramda.isEmpty(fields) ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -11788,6 +11927,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     }
   }, {
     actionBlock: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      "data-cy": "neeto-fields-reorder-button",
       label: t("labels.reorder"),
       style: "secondary",
       disabled: selectedState === FIELD_STATES.inactive || !pure.existsBy({
@@ -11798,45 +11938,46 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
         return setIsReorderPaneOpen(true);
       }
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      "data-cy": "neeto-fields-add-button",
       label: t("labels.addField"),
       onClick: function onClick() {
         return setIsPaneOpen(true);
       }
     })),
     searchProps: searchProps,
-    title: pure.humanize(getDashBoardTitle({
-      isOwnerBased: showOwnersInMenu,
-      owners: owners,
-      selectedVal: selectedMenu,
-      nameAliases: nameAliases
-    }))
+    title: /*#__PURE__*/React__default["default"].createElement(TitleWithHelpLink, {
+      helpUrl: helpDocUrl,
+      title: headerDisplayTitle
+    })
   })), showCountSubheader && /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
     leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       className: "mr-4 font-semibold",
+      "data-cy": "neeto-fields-subheader-text",
       style: "h4"
-    }, count, " ", selectedState, " ", 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,
     helpDocUrl: helpDocUrl,
     isLoading: isFieldsFetching || isFieldsLoading,
     rowData: ramda.isEmpty(rowData) ? fields : rowData,
     setIsPaneOpen: setIsPaneOpen,
-    totalCount: count
+    totalCount: count,
+    title: title
   }), /*#__PURE__*/React__default["default"].createElement(FieldsPane, {
     additionalValidations: paneProps === null || paneProps === void 0 ? void 0 : paneProps.validations,
     allowedKinds: allowedKinds,
     hideRequiredSwitch: paneProps === null || paneProps === void 0 ? void 0 : paneProps.hideRequiredSwitch,
     initialValues: paneProps === null || paneProps === void 0 ? void 0 : paneProps.initialValues,
     isOpen: isPaneOpen,
-    ownerId: showOwnersInMenu ? selectedMenu : "",
-    resourceType: showOwnersInMenu ? resourceType : selectedMenu //Currently we support only one resource type when fields are classified based on owners
+    ownerId: isOwnerBased ? selectedMenu : "",
+    resourceType: isOwnerBased ? resourceType : selectedMenu //Currently we support only one resource type when fields are classified based on owners
     ,
     selectedField: selectedField,
     onClose: handleClosePane,
     onMutationSuccess: paneProps === null || paneProps === void 0 ? void 0 : paneProps.onMutationSuccess
   }, paneProps === null || paneProps === void 0 ? void 0 : paneProps.children)), /*#__PURE__*/React__default["default"].createElement(ReorderPane, {
     isOpen: isReorderPaneOpen,
-    ownerId: showOwnersInMenu ? selectedMenu : "",
+    ownerId: isOwnerBased ? selectedMenu : "",
     onClose: handleReorderPaneClose,
     allFields: allFields
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
@@ -11929,7 +12070,11 @@ var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
     scrollToErrorField: true,
     className: classnames__default["default"]("flex w-full", className),
     formikProps: {
-      initialValues: getInitialFieldValue(field, fieldValues),
+      initialValues: getInitialFieldValue({
+        field: field,
+        fieldValues: fieldValues,
+        isIndividualFieldForm: true
+      }),
       onSubmit: onSubmit,
       enableReinitialize: true
     }