@bigbinary/neeto-rules-frontend 0.4.0 → 0.4.2

package/dist/index.js

@@ -3,19 +3,20 @@ import { BrowserRouter } from 'react-router-dom';
 import { shallow } from 'zustand/shallow';
 import classNames from 'classnames';
 import { useFormikContext, Formik, Form, useField, FieldArray, ErrorMessage } from 'formik';
-import { findBy, noop, isNotEmpty, toLabelAndValue, removeBy } from '@bigbinary/neeto-cist';
+import { findBy, noop, isNotEmpty, isPresent, toLabelAndValue, removeBy } from '@bigbinary/neeto-cist';
 import { ActionBlock, Textarea, MultiEmailInput, Input as Input$2, Select as Select$1, Radio } from '@bigbinary/neetoui/formik';
 import { t as t$1 } from 'i18next';
 import * as yup from 'yup';
 import { isEditorEmpty, FormikEditor } from '@bigbinary/neeto-editor';
-import { withImmutableActions, useDebounce, useHotKeys } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { withImmutableActions, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { create } from 'zustand';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { Typography, Button, Pane, DatePicker, Dropdown as Dropdown$1, Input as Input$1, Checkbox, Select, Label } from '@bigbinary/neetoui';
 import { useTranslation } from 'react-i18next';
 import { Down, Up, Check, Search, Close, Delete, Plus, Refresh, Eye } from '@bigbinary/neeto-icons';
-import { pluck, isNotNil, assocPath, toLower, isEmpty, isNil, without, append, pipe, partition } from 'ramda';
+import { pluck, isNil, isNotNil, assocPath, toLower, isEmpty, without, append, pipe, partition } from 'ramda';
 import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
+import useHotkeys from '@bigbinary/neeto-hotkeys';
 
 function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure " + obj);
@@ -1066,7 +1067,7 @@ var useOnButtonPressed = function useOnButtonPressed(ref, handler) {
   var buttonPressed = function buttonPressed() {
     var keysPressed = {};
     var listener = function listener(event) {
-      if (!ref.current) return;
+      if (isNil(event.key)) return;
       keysPressed[event.key] = true;
       if ((keysPressed["Meta"] || keysPressed["Control"]) && event.key === "Enter") {
         handler();
@@ -1827,10 +1828,10 @@ var InlineInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useOnClickOutside(inputWrapperRef, function () {
     return handleCancel(inputValue);
   });
-  var inputFieldEscapeHotkeyRef = useHotKeys(SHORTCUTS.cancel.sequence, handleCancel, {
+  var inputFieldEscapeHotkeyRef = useHotkeys(SHORTCUTS.cancel.sequence, handleCancel, {
     mode: "scoped"
   });
-  var inputFieldEnterHotkeyRef = useHotKeys(SHORTCUTS.submit.sequence, onSubmit, {
+  var inputFieldEnterHotkeyRef = useHotkeys(SHORTCUTS.submit.sequence, onSubmit, {
     mode: "scoped"
   });
   useEffect(function () {
@@ -2324,8 +2325,10 @@ var ActionItem = function ActionItem(_ref) {
     elementProps = _ref.elementProps,
     onSelectAction = _ref.onSelectAction,
     selectedActionOptions = _ref.selectedActionOptions;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useState = useState({
-      label: t$1("neetoRules.form.doThis")
+      label: t("neetoRules.form.doThis")
     }),
     _useState2 = _slicedToArray(_useState, 2),
     selectedOption = _useState2[0],
@@ -2345,9 +2348,9 @@ var ActionItem = function ActionItem(_ref) {
     touched = _useFormikContext.touched;
   var optionList = elementProps.actionOptions;
   var actions = values[parentName].value || [];
-  var label = index ? t$1("neetoRules.common.and", {
-    what: t$1("neetoRules.common.then").toLowerCase()
-  }) : t$1("neetoRules.common.then");
+  var label = index ? t("neetoRules.common.and", {
+    what: t("neetoRules.common.then")
+  }) : t("neetoRules.common.then");
   var actionOptions = useMemo(function () {
     return getActionOptions(action, actions, optionList);
   }, [action, actions]);
@@ -2355,7 +2358,7 @@ var ActionItem = function ActionItem(_ref) {
     return getFieldDetails$1(action.name, actionOptions);
   }, [action, actionOptions]);
   var searchedOptions = getSearchedOptions$3(actionOptions, searchTerm);
-  var isActionSelected = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) === t$1("neetoRules.form.doThis") && errors.actions && touched.actions && isNotNil((_errors$actions = errors.actions) === null || _errors$actions === void 0 || (_errors$actions = _errors$actions.value) === null || _errors$actions === void 0 ? void 0 : _errors$actions[index]) && isNotNil((_touched$actions = touched.actions) === null || _touched$actions === void 0 || (_touched$actions = _touched$actions.value) === null || _touched$actions === void 0 ? void 0 : _touched$actions[index]);
+  var isActionSelected = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) === t("neetoRules.form.doThis") && errors.actions && touched.actions && isNotNil((_errors$actions = errors.actions) === null || _errors$actions === void 0 || (_errors$actions = _errors$actions.value) === null || _errors$actions === void 0 ? void 0 : _errors$actions[index]) && isNotNil((_touched$actions = touched.actions) === null || _touched$actions === void 0 || (_touched$actions = _touched$actions.value) === null || _touched$actions === void 0 ? void 0 : _touched$actions[index]);
   var handleSelectOption = function handleSelectOption(option) {
     setFieldValue("".concat(name, ".name"), option.value);
     setFieldValue("".concat(name, ".metadata"), {});
@@ -2375,7 +2378,8 @@ var ActionItem = function ActionItem(_ref) {
     }
     return [];
   };
-  var _ref2 = (action === null || action === void 0 ? void 0 : action.name) === "message_to_slack" && getSlackChannelErrors(getSelectedFieldOptions(), action),
+  var isMessageToSlackAction = (action === null || action === void 0 ? void 0 : action.name) === "message_to_slack";
+  var _ref2 = isMessageToSlackAction && getSlackChannelErrors(getSelectedFieldOptions(), action),
     selectDropDownHasError = _ref2.error,
     selectDropDownErrorMessage = _ref2.message;
   var findSelectedOption = function findSelectedOption() {
@@ -2383,18 +2387,35 @@ var ActionItem = function ActionItem(_ref) {
       value: selectedField === null || selectedField === void 0 ? void 0 : selectedField.value,
       label: selectedField === null || selectedField === void 0 ? void 0 : selectedField.label
     }) : setSelectedOption({
-      label: t$1("neetoRules.form.doThis")
+      label: t("neetoRules.form.doThis")
     });
   };
+  var _ref3 = selectedField || {},
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
+    _ref3$disabledReason = _ref3.disabledReason,
+    disabledReason = _ref3$disabledReason === void 0 ? "" : _ref3$disabledReason;
+  var renderErrorCallout = function renderErrorCallout(message) {
+    return /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-text-white neeto-ui-bg-error-500 neeto-ui-rounded-sm -mx-4 w-full p-3",
+      style: "h5"
+    }, message);
+  };
+  var renderDisabledReason = function renderDisabledReason() {
+    if (typeof disabledReason === "function") {
+      return disabledReason(selectedField);
+    }
+    if (typeof disabledReason === "string" && isPresent(disabledReason)) {
+      return renderErrorCallout(disabledReason);
+    }
+    return null;
+  };
   useEffect(function () {
     findSelectedOption();
   }, [selectedField]);
   return /*#__PURE__*/React.createElement("div", {
     className: "mb-1 flex max-w-2xl flex-wrap gap-x-1 gap-y-2"
-  }, selectDropDownHasError && /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-white neeto-ui-bg-error-500 neeto-ui-rounded-sm -mx-4 w-full p-3",
-    style: "h5"
-  }, selectDropDownErrorMessage), /*#__PURE__*/React.createElement(Typography, {
+  }, selectDropDownHasError && renderErrorCallout(selectDropDownErrorMessage), !isMessageToSlackAction && isDisabled && renderDisabledReason(), /*#__PURE__*/React.createElement(Typography, {
     className: "neeto-ui-text-gray-700 mt-1",
     style: "h5",
     weight: "normal"
@@ -2423,7 +2444,7 @@ var ActionItem = function ActionItem(_ref) {
     autoFocus: true,
     className: "mb-1",
     "data-cy": "search-text-field",
-    placeholder: t$1("neetoRules.common.search"),
+    placeholder: t("neetoRules.common.search"),
     prefix: /*#__PURE__*/React.createElement(Search, null),
     value: searchTerm,
     onChange: function onChange(e) {
@@ -2447,7 +2468,7 @@ var ActionItem = function ActionItem(_ref) {
     }, option.label);
   })), isEmpty(actionOptions) && /*#__PURE__*/React.createElement(MenuItem$7.Button, {
     "data-cy": "no-options-menu-item"
-  }, t$1("neetoRules.common.noOptions")))), /*#__PURE__*/React.createElement(ActionSubItem, {
+  }, t("neetoRules.common.noOptions")))), /*#__PURE__*/React.createElement(ActionSubItem, {
     action: action,
     index: index,
     selectedField: selectedField,