@bigbinary/neeto-fields-frontend 1.1.1 → 1.1.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback, createContext, memo, useReducer } from 'react';
+import React, { useContext, useState, useRef, useEffect, useMemo, useLayoutEffect, useCallback, createContext, memo, useReducer } from 'react';
 import { Switch, TimePicker, DatePicker, Select, Input, Textarea, Typography, Pane, Label, Button as Button$1, Dropdown, NoData, Table, Spinner, Alert } from '@bigbinary/neetoui';
 import { toLabelAndValue, isNotEmpty, capitalize as capitalize$1, filterBy, findBy, humanize, countBy, existsBy, noop as noop$2 } from '@bigbinary/neeto-commons-frontend/pure';
 import { values, map, isNotNil, isNil, pluck, clone as clone$1, pipe, mergeAll, omit, prop, pick, isEmpty, assoc, any, not, head } from 'ramda';
@@ -14,7 +14,7 @@ import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import axios from 'axios';
 import { buildUrl, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
-import { handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { useDebounce, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { Link, useHistory } from 'react-router-dom';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import { unstable_batchedUpdates, createPortal } from 'react-dom';
@@ -5251,8 +5251,8 @@ var titles = {
 	addField: "Add new field",
 	editField: "Edit field",
 	deleteField: "Delete field ?",
-	name: "Name",
-	kind: "Kind",
+	fieldName: "Field name",
+	fieldKind: "Field type",
 	required: "Required",
 	dropdownOptions: "Dropdown options",
 	regexOptions: "Regex options",
@@ -5264,7 +5264,7 @@ var labels = {
 	edit: "Edit",
 	"delete": "Delete",
 	fieldName: "Field name",
-	fieldKind: "Field kind",
+	fieldKind: "Field type",
 	createField: "Create field",
 	updateField: "Update field",
 	addMoreOption: "Add more option",
@@ -5281,7 +5281,8 @@ var placeholders = {
 	enterFieldName: "Enter field name",
 	enterAnOption: "Enter an option",
 	regexExample: "Example: /^[0-9]{5}$/",
-	enterErrorMessage: "Message to show on error"
+	enterErrorMessage: "Message to show on error",
+	searchFields: "Search fields"
 };
 var fields = {
 	kinds: {
@@ -5947,7 +5948,7 @@ var validateField = /*#__PURE__*/function () {
         case 7:
           _context.prev = 7;
           _context.t0 = _context["catch"](1);
-          return _context.abrupt("return", _context.t0.errors);
+          return _context.abrupt("return", _context.t0.errors[0]);
         case 10:
         case "end":
           return _context.stop();
@@ -6026,7 +6027,7 @@ var useFormikFields = function useFormikFields(_ref) {
     handleSubmit: handleSubmit,
     fieldProps: _objectSpread$a(_objectSpread$a({}, formikFieldProps), {}, {
       required: props[isRequiredColumnName],
-      error: meta.touched && meta.error,
+      error: individualSubmit ? meta.error : meta.touched && meta.error,
       options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
       value: getValueForField(formikFieldProps.value),
       dirty: dirty,
@@ -6331,12 +6332,14 @@ var fieldUrl = function fieldUrl(fieldId) {
 var fetch$1 = function fetch(_ref) {
   var resourceType = _ref.resourceType,
     ownerId = _ref.ownerId,
-    state = _ref.state;
+    state = _ref.state,
+    searchTerm = _ref.searchTerm;
   return axios.get(FIELDS_URL, {
     params: {
       resourceType: resourceType,
       ownerId: ownerId,
-      state: state
+      state: state,
+      searchTerm: searchTerm
     }
   });
 };
@@ -6393,12 +6396,14 @@ var useFetchFields = function useFetchFields(_ref, options) {
     ownerId = _ref.ownerId,
     state = _ref.state,
     _ref$prefixQueryKeys = _ref.prefixQueryKeys,
-    prefixQueryKeys = _ref$prefixQueryKeys === void 0 ? [] : _ref$prefixQueryKeys;
-  return useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [resourceType, ownerId, state]), function () {
+    prefixQueryKeys = _ref$prefixQueryKeys === void 0 ? [] : _ref$prefixQueryKeys,
+    searchTerm = _ref.searchTerm;
+  return useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [resourceType, ownerId, state, searchTerm]), function () {
     return fieldsApi.fetch({
       resourceType: resourceType,
       ownerId: ownerId,
-      state: state
+      state: state,
+      searchTerm: searchTerm
     });
   }, _objectSpread$7({
     staleTime: DEFAULT_STALE_TIME
@@ -6639,7 +6644,7 @@ var DEFAULT_OPTION = {
 };
 var DEFAULT_OPTIONS_DATA = [DEFAULT_OPTION];
 var DEFAULT_REGEX_DATA = {
-  regex: "",
+  condition: "",
   helpMessage: ""
 };
 var BASIC_FIELD_FORM_VALIDATIONS = {
@@ -6864,7 +6869,8 @@ var Edit = function Edit(_ref) {
     _useShowField$data = _useShowField.data,
     _useShowField$data2 = _useShowField$data === void 0 ? {} : _useShowField$data,
     _useShowField$data2$f = _useShowField$data2.field,
-    field = _useShowField$data2$f === void 0 ? {} : _useShowField$data2$f;
+    field = _useShowField$data2$f === void 0 ? {} : _useShowField$data2$f,
+    isLoading = _useShowField.isLoading;
   var _useUpdateField = useUpdateField({
       onSuccess: function onSuccess() {
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -6888,7 +6894,7 @@ var Edit = function Edit(_ref) {
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2"
-  }, t("titles.editField"))), /*#__PURE__*/React.createElement(Form, {
+  }, t("titles.editField"))), isLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(Form, {
     formikProps: {
       initialValues: _objectSpread$4(_objectSpread$4({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
       validationSchema: generateValidationSchema(additionalValidations),
@@ -6939,7 +6945,7 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
   return [{
     key: "name",
     dataIndex: "name",
-    title: t$1("titles.name"),
+    title: t$1("titles.fieldName"),
     render: function render(name, field) {
       return /*#__PURE__*/React.createElement("div", {
         className: "flex items-center justify-between gap-x-3"
@@ -6965,7 +6971,7 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
   }, {
     key: "kind",
     dataIndex: "kind",
-    title: t$1("titles.kind"),
+    title: t$1("titles.fieldKind"),
     render: function render(kind) {
       return DISPLAY_KINDS[kind];
     }
@@ -7085,7 +7091,9 @@ 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;
+    showOwnersInMenu = _ref.showOwnersInMenu,
+    fieldStatesTaxonomy = _ref.fieldStatesTaxonomy,
+    nameAliases = _ref.nameAliases;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPaneOpen = _useState2[0],
@@ -7106,11 +7114,18 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     selectedField = _useState10[0],
     setSelectedField = _useState10[1];
+  var _useState11 = useState(""),
+    _useState12 = _slicedToArray(_useState11, 2),
+    searchTerm = _useState12[0],
+    setSearchTerm = _useState12[1];
   var _getQueryParams = getQueryParams(),
     resource = _getQueryParams.resource,
     state = _getQueryParams.state;
   var ownerId = showOwnersInMenu ? resource : undefined;
+  var debouncedSearchTerm = useDebounce(searchTerm.trim());
   var history = useHistory();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useFetchConfigs = useFetchConfigs(),
     _useFetchConfigs$data = _useFetchConfigs.data,
     _useFetchConfigs$data2 = _useFetchConfigs$data === void 0 ? {} : _useFetchConfigs$data,
@@ -7122,10 +7137,12 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var fieldParams = {
     resourceType: !showOwnersInMenu ? resource : undefined,
     ownerId: ownerId,
-    state: state || FIELD_STATES.active
+    state: state || FIELD_STATES.active,
+    searchTerm: debouncedSearchTerm
   };
   var _useFetchFields = useFetchFields(fieldParams, {
-      enabled: !!resource
+      enabled: !!resource,
+      keepPreviousData: true
     }),
     _useFetchFields$data = _useFetchFields.data,
     _useFetchFields$data2 = _useFetchFields$data === void 0 ? {} : _useFetchFields$data,
@@ -7136,6 +7153,16 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     inactiveFieldsCount = _useFetchFields$data2.inactiveFieldsCount,
     isFieldsLoading = _useFetchFields.isLoading,
     isFieldsFetching = _useFetchFields.isFetching;
+  var _useFetchFields2 = useFetchFields(_objectSpread$2(_objectSpread$2({}, fieldParams), {}, {
+      state: FIELD_STATES.active,
+      searchTerm: ""
+    }), {
+      enabled: !!resource
+    }),
+    _useFetchFields2$data = _useFetchFields2.data,
+    _useFetchFields2$data2 = _useFetchFields2$data === void 0 ? {} : _useFetchFields2$data,
+    _useFetchFields2$data3 = _useFetchFields2$data2.fields,
+    allFields = _useFetchFields2$data3 === void 0 ? [] : _useFetchFields2$data3;
   var _useDestroyField = useDestroyField({
       onSuccess: function onSuccess() {
         setIsDeleteAlertOpen(false);
@@ -7203,6 +7230,31 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var menuItems = showOwnersInMenu ? owners : resourceTypes;
   var isScreenLoading = isFieldsLoading || isConfigsLoading;
   var showCountSubheader = count > 0;
+  var searchProps = {
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
+    value: searchTerm,
+    placeholder: t("placeholders.searchFields")
+  };
+  var menuBarFilters = useMemo(function () {
+    return renderMenuBarFilters({
+      selectedState: state,
+      fieldStatesTaxonomy: fieldStatesTaxonomy,
+      activeFieldsCount: activeFieldsCount,
+      inactiveFieldsCount: inactiveFieldsCount,
+      handleBlockClick: handleBlockClick
+    });
+  }, [activeFieldsCount, inactiveFieldsCount, state]);
+  var menuBarItems = useMemo(function () {
+    return renderMenuBarItems({
+      isOwnerBased: showOwnersInMenu,
+      items: menuItems,
+      selectedMenu: resource,
+      handleBlockClick: handleBlockClick,
+      nameAliases: nameAliases
+    });
+  }, [menuItems, resource]);
   useEffect(function () {
     handleURLWithDefaultValues();
   }, [isConfigsLoading]);
@@ -7217,8 +7269,6 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     fields: fields,
     owners: owners,
     count: count,
-    activeFieldsCount: activeFieldsCount,
-    inactiveFieldsCount: inactiveFieldsCount,
     menuItems: menuItems,
     columnData: columnData,
     selectedField: selectedField,
@@ -7235,7 +7285,10 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     handleAlertClose: handleAlertClose,
     handleClosePane: handleClosePane,
     handleReorderPaneClose: handleReorderPaneClose,
-    handleBlockClick: handleBlockClick
+    searchProps: searchProps,
+    menuBarFilters: menuBarFilters,
+    menuBarItems: menuBarItems,
+    allFields: allFields
   };
 };
 
@@ -11651,7 +11704,9 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     t = _useTranslation.t;
   var _useFieldsDashboard = useFieldsDashboard({
       buildColumnData: buildColumnData,
-      showOwnersInMenu: showOwnersInMenu
+      showOwnersInMenu: showOwnersInMenu,
+      fieldStatesTaxonomy: fieldStatesTaxonomy,
+      nameAliases: nameAliases
     }),
     isPaneOpen = _useFieldsDashboard.isPaneOpen,
     setIsPaneOpen = _useFieldsDashboard.setIsPaneOpen,
@@ -11663,8 +11718,6 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     fields = _useFieldsDashboard.fields,
     owners = _useFieldsDashboard.owners,
     count = _useFieldsDashboard.count,
-    activeFieldsCount = _useFieldsDashboard.activeFieldsCount,
-    inactiveFieldsCount = _useFieldsDashboard.inactiveFieldsCount,
     menuItems = _useFieldsDashboard.menuItems,
     columnData = _useFieldsDashboard.columnData,
     selectedField = _useFieldsDashboard.selectedField,
@@ -11680,26 +11733,17 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     handleAlertClose = _useFieldsDashboard.handleAlertClose,
     handleClosePane = _useFieldsDashboard.handleClosePane,
     handleReorderPaneClose = _useFieldsDashboard.handleReorderPaneClose,
-    handleBlockClick = _useFieldsDashboard.handleBlockClick;
+    searchProps = _useFieldsDashboard.searchProps,
+    menuBarFilters = _useFieldsDashboard.menuBarFilters,
+    menuBarItems = _useFieldsDashboard.menuBarItems,
+    allFields = _useFieldsDashboard.allFields;
   var isMenuBarNeeded = showStateFilter || menuItems.length > 1;
   return /*#__PURE__*/React.createElement(React.Fragment, null, isMenuBarNeeded && /*#__PURE__*/React.createElement(MenuBar, {
     showMenu: isMenuBarOpen,
     title: t("titles.field", PLURAL)
   }, isConfigsLoading ? /*#__PURE__*/React.createElement("div", {
     className: "flex items-center justify-center"
-  }, /*#__PURE__*/React.createElement(Spinner, null)) : renderMenuBarItems({
-    isOwnerBased: showOwnersInMenu,
-    items: menuItems,
-    selectedMenu: selectedMenu,
-    handleBlockClick: handleBlockClick,
-    nameAliases: nameAliases
-  }), showStateFilter && renderMenuBarFilters({
-    selectedState: selectedState,
-    fieldStatesTaxonomy: fieldStatesTaxonomy,
-    activeFieldsCount: activeFieldsCount,
-    inactiveFieldsCount: inactiveFieldsCount,
-    handleBlockClick: handleBlockClick
-  })), isScreenLoading ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__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(PageLoader, null)) : /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _extends({
     breadcrumbs: breadcrumbs
@@ -11711,10 +11755,10 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     actionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, {
       label: t("labels.reorder"),
       style: "secondary",
-      disabled: !existsBy({
+      disabled: selectedState === FIELD_STATES.inactive || !existsBy({
         isSystem: false,
         state: "active"
-      }, fields),
+      }, allFields),
       onClick: function onClick() {
         return setIsReorderPaneOpen(true);
       }
@@ -11723,19 +11767,8 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
       onClick: function onClick() {
         return setIsPaneOpen(true);
       }
-    }), /*#__PURE__*/React.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
-      ,
-      selectedField: selectedField,
-      onClose: handleClosePane,
-      onMutationSuccess: paneProps === null || paneProps === void 0 ? void 0 : paneProps.onMutationSuccess
-    }, paneProps === null || paneProps === void 0 ? void 0 : paneProps.children)),
+    })),
+    searchProps: searchProps,
     title: humanize(getDashBoardTitle({
       isOwnerBased: showOwnersInMenu,
       owners: owners,
@@ -11746,7 +11779,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     leftActionBlock: /*#__PURE__*/React.createElement(Typography, {
       className: "mr-4 font-semibold",
       style: "h4"
-    }, "".concat(count, " "), t("titles.field", count > 1 ? PLURAL : SINGULAR).toLocaleLowerCase())
+    }, count, " ", selectedState, " ", t("titles.field", count > 1 ? PLURAL : SINGULAR).toLocaleLowerCase())
   }), /*#__PURE__*/React.createElement(FieldsTable, {
     columnData: columnData,
     helpDocUrl: helpDocUrl,
@@ -11754,11 +11787,23 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     rowData: isEmpty(rowData) ? fields : rowData,
     setIsPaneOpen: setIsPaneOpen,
     totalCount: count
-  })), /*#__PURE__*/React.createElement(ReorderPane, {
-    allFields: fields,
+  }), /*#__PURE__*/React.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
+    ,
+    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.createElement(ReorderPane, {
     isOpen: isReorderPaneOpen,
     ownerId: showOwnersInMenu ? selectedMenu : "",
-    onClose: handleReorderPaneClose
+    onClose: handleReorderPaneClose,
+    allFields: allFields
   }), /*#__PURE__*/React.createElement(Alert, {
     isOpen: isDeleteAlertOpen,
     isSubmitting: isDeleting,
@@ -11846,6 +11891,7 @@ var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className;
   return /*#__PURE__*/React.createElement(Form, {
+    scrollToErrorField: true,
     className: classnames("flex w-full", className),
     formikProps: {
       initialValues: getInitialFieldValue(field, fieldValues),