@bigbinary/neeto-fields-frontend 1.1.9 → 1.1.11

package/dist/index.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState, useRef, useEffect, useMemo, useLayoutEffect, useCallback, createContext, memo, useReducer } from 'react';
-import { Checkbox as Checkbox$1, TimePicker, DatePicker, Select, Input, Textarea, Typography, Pane, Label, Button as Button$1, Dropdown, Alert, NoData, Table, Spinner } from '@bigbinary/neetoui';
+import { Checkbox as Checkbox$1, TimePicker, DatePicker, Select, Input, Textarea, Typography, Pane, Label, Button as Button$1, Dropdown, Tab, Alert, NoData, Table, Spinner } from '@bigbinary/neetoui';
 import { toLabelAndValue, isNotEmpty, capitalize as capitalize$1, filterBy, findBy, slugify, humanize, countBy, existsBy, noop as noop$2 } from '@bigbinary/neeto-commons-frontend/pure';
-import { values, map, isNotNil, isEmpty, isNil, pluck, clone as clone$1, pipe, mergeAll, omit, prop, pick, assoc, any, not, head } from 'ramda';
+import { values, map, isNotNil, isNil, isEmpty, pluck, clone as clone$1, pipe, mergeAll, omit, prop, pick, assoc, any, not, head } from 'ramda';
 import { useFormikContext, useField, FieldArray } from 'formik';
 import { useFuncDebounce, useDebounce, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
 import * as yup from 'yup';
@@ -5324,6 +5324,7 @@ var validations = {
 	fieldOptionIsRequired: "Field option is required",
 	kindIsRequired: "Kind is required",
 	invalidRegexPattern: "Invalid regex pattern",
+	advancedRegexAssertionsNotSupported: "Advanced regex assertions are not supported",
 	notAValidNumber: "Entered number is not valid",
 	notAValidInteger: "Entered number is not a valid integer",
 	notAValid: "Entered number is not valid",
@@ -5844,6 +5845,15 @@ var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
 var dateSchema = yup.date().nullable();
+var isValueEmpty = function isValueEmpty(value) {
+  return typeof value === "string" && isEmpty(value.trim());
+};
+var isCheckboxUnchecked = function isCheckboxUnchecked(kind, value) {
+  return kind === KINDS.checkbox && !value;
+};
+var isArrayEmpty = function isArrayEmpty(kind, value) {
+  return [KINDS.multiOption, KINDS.singleOption, KINDS.dateRange, KINDS.timeRange].includes(kind) && isEmpty(value);
+};
 var buildSchemaAllowingEmptyValue = function buildSchemaAllowingEmptyValue(schema) {
   return yup.mixed().test({
     name: "validate-if-not-empty",
@@ -5855,11 +5865,11 @@ var buildSchemaAllowingEmptyValue = function buildSchemaAllowingEmptyValue(schem
     }
   });
 };
-var buildSchemaForRequiredInputs = function buildSchemaForRequiredInputs(schema) {
+var buildSchemaForRequiredInputs = function buildSchemaForRequiredInputs(schema, kind) {
   return yup.mixed().test({
     name: "validate-required-inputs",
     test: function test(value) {
-      if (isEmpty(value) || isNil(value)) {
+      if (isNil(value) || isValueEmpty(value) || isArrayEmpty(kind, value) || isCheckboxUnchecked(kind, value)) {
         throw new yup.ValidationError(t$1("validations.thisIsRequired"));
       }
       schema.validateSync(value);
@@ -5869,14 +5879,16 @@ var buildSchemaForRequiredInputs = function buildSchemaForRequiredInputs(schema)
 };
 var buildSchema = function buildSchema(_ref) {
   var schema = _ref.schema,
-    isRequired = _ref.isRequired;
-  return isRequired ? buildSchemaForRequiredInputs(schema) : buildSchemaAllowingEmptyValue(schema);
+    isRequired = _ref.isRequired,
+    kind = _ref.kind;
+  return isRequired ? buildSchemaForRequiredInputs(schema, kind) : buildSchemaAllowingEmptyValue(schema);
 };
 var getBasicValidationSchema = function getBasicValidationSchema(_ref2) {
   var kind = _ref2.kind,
     fieldData = _ref2.fieldData;
   switch (kind) {
     case KINDS.singleOption:
+    case KINDS.textarea:
     case KINDS.text:
       {
         return yup.string().trim().nullable();
@@ -5926,7 +5938,8 @@ var buildFieldValidationSchema = function buildFieldValidationSchema(_ref3) {
   });
   return buildSchema({
     schema: schema,
-    isRequired: isRequired
+    isRequired: isRequired,
+    kind: kind
   });
 };
 var cleanedRegex = function cleanedRegex(regexCondition) {
@@ -6053,11 +6066,13 @@ var useFormikFields = function useFormikFields(_ref) {
     dirty: dirty,
     handleSubmit: handleSubmit,
     fieldProps: _objectSpread$b(_objectSpread$b({}, formikFieldProps), {}, {
-      required: props[isRequiredColumnName],
       error: individualSubmit ? meta.error : meta.touched && meta.error,
       options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
       value: getValueForField(formikFieldProps.value),
       label: capitalize$1(name),
+      labelProps: {
+        required: props[isRequiredColumnName]
+      },
       disabled: disabled
     })
   };
@@ -6111,7 +6126,8 @@ var MultiOption = function MultiOption(props) {
     fieldProps = _useFormikFields.fieldProps;
   return /*#__PURE__*/React.createElement(Select, _extends({
     isMulti: true,
-    isSearchable: true
+    isSearchable: true,
+    strategy: "fixed"
   }, fieldProps, {
     onChange: function onChange(selectedOptions) {
       return handleSubmit(pluck("value", selectedOptions));
@@ -6173,7 +6189,8 @@ var SingleOption = function SingleOption(props) {
     fieldProps = _useFormikFields.fieldProps;
   return /*#__PURE__*/React.createElement(Select, _extends({
     isClearable: true,
-    isSearchable: true
+    isSearchable: true,
+    strategy: "fixed"
   }, fieldProps, {
     onChange: function onChange(option) {
       return handleSubmit((option === null || option === void 0 ? void 0 : option.value) || "");
@@ -6633,9 +6650,17 @@ var renderFormFooter = function renderFormFooter(_ref3) {
   }));
 };
 
+var PERMITTED_REGEX_PATTERN = /^\/.*\/[igmsyu]*$/;
+var ADVANCED_REGEX_ASSERTION_PATTERN = /\(\?=[^)]*\)|\(\?![^)]*\)|\(\?<=[^)]*\)|\(\?<![^)]*\)/;
 var regexValidationSchema = yup.object().shape({
-  condition: yup.string().required(t$1("validations.regexConditionIsRequired")).matches(/^\/.*\/[igmsyu]*$/, t$1("validations.invalidRegexPattern")).test({
-    name: "regex",
+  condition: yup.string().required(t$1("validations.regexConditionIsRequired")).matches(PERMITTED_REGEX_PATTERN, t$1("validations.invalidRegexPattern")).test({
+    name: "test-regex-is-advanced",
+    message: t$1("validations.advancedRegexAssertionsNotSupported") || "",
+    test: function test(value) {
+      return !ADVANCED_REGEX_ASSERTION_PATTERN.test(value);
+    }
+  }).test({
+    name: "test-regex-condition-pattern",
     message: t$1("validations.invalidRegexPattern") || "",
     test: function test(value) {
       try {
@@ -7657,34 +7682,27 @@ var renderMenuBarItems = function renderMenuBarItems(_ref2) {
     });
   });
 };
-var renderMenuBarFilters = function renderMenuBarFilters(_ref3) {
+var renderStateFilterTabs = function renderStateFilterTabs(_ref3) {
   var selectedState = _ref3.selectedState,
     fieldStatesTaxonomy = _ref3.fieldStatesTaxonomy,
     activeFieldsCount = _ref3.activeFieldsCount,
     inactiveFieldsCount = _ref3.inactiveFieldsCount,
     handleBlockClick = _ref3.handleBlockClick;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuBar.SubTitle, null, /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "menubar-subtitle",
-    style: "h5",
-    textTransform: "uppercase",
-    weight: "bold"
-  }, t$1("titles.filters"))), /*#__PURE__*/React.createElement(MenuBar.Block, {
+  return /*#__PURE__*/React.createElement(Tab, {
+    className: "mb-4"
+  }, /*#__PURE__*/React.createElement(Tab.Item, {
     active: selectedState === FIELD_STATES.active,
-    count: activeFieldsCount,
     "data-cy": "menubar-active-block",
-    label: fieldStatesTaxonomy.active,
     onClick: handleBlockClick({
       state: FIELD_STATES.active
     })
-  }), /*#__PURE__*/React.createElement(MenuBar.Block, {
+  }, fieldStatesTaxonomy.active, "(", activeFieldsCount, ")"), /*#__PURE__*/React.createElement(Tab.Item, {
     active: selectedState === FIELD_STATES.inactive,
-    count: inactiveFieldsCount,
     "data-cy": "menubar-inactive-block",
-    label: fieldStatesTaxonomy.inactive,
     onClick: handleBlockClick({
       state: FIELD_STATES.inactive
     })
-  }));
+  }, fieldStatesTaxonomy.inactive, "(", inactiveFieldsCount, ")"));
 };
 var getResourceName = function getResourceName(_ref4) {
   var isOwnerBased = _ref4.isOwnerBased,
@@ -7702,24 +7720,11 @@ var getResourceName = function getResourceName(_ref4) {
 var getDashBoardTitle = function getDashBoardTitle(_ref5) {
   var resourceName = _ref5.resourceName,
     isSingleResource = _ref5.isSingleResource,
-    showStateFilter = _ref5.showStateFilter,
-    selectedState = _ref5.selectedState,
     title = _ref5.title;
-  var displayTitle = title;
-  if (showStateFilter && !isSingleResource) {
-    displayTitle = t$1("messages.stateTitleForResource", {
-      state: selectedState,
-      title: title,
-      resource: resourceName
-    });
-  } else if (showStateFilter && isSingleResource) {
-    displayTitle = "".concat(selectedState, " ").concat(title);
-  } else if (!showStateFilter && !isSingleResource) {
-    displayTitle = t$1("messages.titleForResource", {
-      title: title,
-      resource: resourceName
-    });
-  }
+  var displayTitle = isSingleResource ? title : t$1("messages.titleForResource", {
+    title: title,
+    resource: resourceName
+  });
   return humanize(displayTitle);
 };
 var renderNoDataHelpText = function renderNoDataHelpText(title, url) {
@@ -7921,7 +7926,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     }
   };
   var isScreenLoading = isFieldsLoading || isConfigsLoading;
-  var showCountSubheader = count > 0;
+  var showCountSubheader = count > 0 && !showStateFilter;
   var searchProps = {
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
@@ -7931,7 +7936,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     className: "w-44"
   };
   var isSingleResource = menuItems.length === 1;
-  var isMenuBarNeeded = showStateFilter || !isSingleResource;
+  var isMenuBarNeeded = !isSingleResource && !isConfigsLoading;
   var resourceName = useMemo(function () {
     return getResourceName({
       isOwnerBased: isOwnerBased,
@@ -7943,14 +7948,12 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var headerDisplayTitle = useMemo(function () {
     return getDashBoardTitle({
       resourceName: resourceName,
-      showStateFilter: showStateFilter,
-      selectedState: state,
       isSingleResource: isSingleResource,
       title: title
     });
   }, [state, isSingleResource, resourceName]);
-  var menuBarFilters = useMemo(function () {
-    return renderMenuBarFilters({
+  var stateFilterTabs = useMemo(function () {
+    return renderStateFilterTabs({
       selectedState: state,
       fieldStatesTaxonomy: fieldStatesTaxonomy,
       activeFieldsCount: activeFieldsCount,
@@ -7999,7 +8002,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     handleClosePane: handleClosePane,
     handleReorderPaneClose: handleReorderPaneClose,
     searchProps: searchProps,
-    menuBarFilters: menuBarFilters,
+    stateFilterTabs: stateFilterTabs,
     menuBarItems: menuBarItems,
     allFields: allFields,
     headerDisplayTitle: headerDisplayTitle
@@ -12503,7 +12506,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     handleClosePane = _useFieldsDashboard.handleClosePane,
     handleReorderPaneClose = _useFieldsDashboard.handleReorderPaneClose,
     searchProps = _useFieldsDashboard.searchProps,
-    menuBarFilters = _useFieldsDashboard.menuBarFilters,
+    stateFilterTabs = _useFieldsDashboard.stateFilterTabs,
     menuBarItems = _useFieldsDashboard.menuBarItems,
     allFields = _useFieldsDashboard.allFields,
     headerDisplayTitle = _useFieldsDashboard.headerDisplayTitle;
@@ -12512,8 +12515,8 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     title: title
   }, isConfigsLoading ? /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-center"
-  }, /*#__PURE__*/React.createElement(Spinner, null)) : menuBarItems, showStateFilter && menuBarFilters), isScreenLoading && isEmpty(fields) ? /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-grow items-center justify-center"
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : menuBarItems), isScreenLoading && isEmpty(fields) ? /*#__PURE__*/React.createElement("div", {
+    className: "flex h-screen w-full flex-grow items-center justify-center"
   }, /*#__PURE__*/React.createElement(PageLoader, null)) : /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _extends({}, _objectSpread$2(_objectSpread$2({
     breadcrumbs: breadcrumbs
   }, isMenuBarNeeded && {
@@ -12551,7 +12554,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
       "data-cy": "neeto-fields-subheader-text",
       style: "h4"
     }, "".concat(count, " "), t("titles.field", count > 1 ? PLURAL : SINGULAR).toLocaleLowerCase())
-  }), /*#__PURE__*/React.createElement(FieldsTable, {
+  }), showStateFilter && stateFilterTabs, /*#__PURE__*/React.createElement(FieldsTable, {
     isLoading: isFieldsFetching || isFieldsLoading,
     rowData: isEmpty(rowData) ? fields : rowData,
     totalCount: count,