@bigbinary/neeto-rules-frontend 0.4.0 → 0.4.2

package/dist/index.cjs.js

@@ -20,6 +20,7 @@ var reactI18next = require('react-i18next');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var ramda = require('ramda');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var useHotkeys = require('@bigbinary/neeto-hotkeys');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,6 +46,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var useHotkeys__default = /*#__PURE__*/_interopDefaultLegacy(useHotkeys);
 
 function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure " + obj);
@@ -1095,7 +1097,7 @@ var useOnButtonPressed = function useOnButtonPressed(ref, handler) {
   var buttonPressed = function buttonPressed() {
     var keysPressed = {};
     var listener = function listener(event) {
-      if (!ref.current) return;
+      if (ramda.isNil(event.key)) return;
       keysPressed[event.key] = true;
       if ((keysPressed["Meta"] || keysPressed["Control"]) && event.key === "Enter") {
         handler();
@@ -1856,10 +1858,10 @@ var InlineInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
   useOnClickOutside(inputWrapperRef, function () {
     return handleCancel(inputValue);
   });
-  var inputFieldEscapeHotkeyRef = reactUtils.useHotKeys(SHORTCUTS.cancel.sequence, handleCancel, {
+  var inputFieldEscapeHotkeyRef = useHotkeys__default["default"](SHORTCUTS.cancel.sequence, handleCancel, {
     mode: "scoped"
   });
-  var inputFieldEnterHotkeyRef = reactUtils.useHotKeys(SHORTCUTS.submit.sequence, onSubmit, {
+  var inputFieldEnterHotkeyRef = useHotkeys__default["default"](SHORTCUTS.submit.sequence, onSubmit, {
     mode: "scoped"
   });
   React.useEffect(function () {
@@ -2353,8 +2355,10 @@ var ActionItem = function ActionItem(_ref) {
     elementProps = _ref.elementProps,
     onSelectAction = _ref.onSelectAction,
     selectedActionOptions = _ref.selectedActionOptions;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useState = React.useState({
-      label: i18next.t("neetoRules.form.doThis")
+      label: t("neetoRules.form.doThis")
     }),
     _useState2 = _slicedToArray(_useState, 2),
     selectedOption = _useState2[0],
@@ -2374,9 +2378,9 @@ var ActionItem = function ActionItem(_ref) {
     touched = _useFormikContext.touched;
   var optionList = elementProps.actionOptions;
   var actions = values[parentName].value || [];
-  var label = index ? i18next.t("neetoRules.common.and", {
-    what: i18next.t("neetoRules.common.then").toLowerCase()
-  }) : i18next.t("neetoRules.common.then");
+  var label = index ? t("neetoRules.common.and", {
+    what: t("neetoRules.common.then")
+  }) : t("neetoRules.common.then");
   var actionOptions = React.useMemo(function () {
     return getActionOptions(action, actions, optionList);
   }, [action, actions]);
@@ -2384,7 +2388,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) === i18next.t("neetoRules.form.doThis") && errors.actions && touched.actions && ramda.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]) && ramda.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 && ramda.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]) && ramda.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"), {});
@@ -2404,7 +2408,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() {
@@ -2412,18 +2417,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: i18next.t("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__default["default"].createElement(neetoui.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" && neetoCist.isPresent(disabledReason)) {
+      return renderErrorCallout(disabledReason);
+    }
+    return null;
+  };
   React.useEffect(function () {
     findSelectedOption();
   }, [selectedField]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mb-1 flex max-w-2xl flex-wrap gap-x-1 gap-y-2"
-  }, selectDropDownHasError && /*#__PURE__*/React__default["default"].createElement(neetoui.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__default["default"].createElement(neetoui.Typography, {
+  }, selectDropDownHasError && renderErrorCallout(selectDropDownErrorMessage), !isMessageToSlackAction && isDisabled && renderDisabledReason(), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     className: "neeto-ui-text-gray-700 mt-1",
     style: "h5",
     weight: "normal"
@@ -2452,7 +2474,7 @@ var ActionItem = function ActionItem(_ref) {
     autoFocus: true,
     className: "mb-1",
     "data-cy": "search-text-field",
-    placeholder: i18next.t("neetoRules.common.search"),
+    placeholder: t("neetoRules.common.search"),
     prefix: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Search, null),
     value: searchTerm,
     onChange: function onChange(e) {
@@ -2476,7 +2498,7 @@ var ActionItem = function ActionItem(_ref) {
     }, option.label);
   })), ramda.isEmpty(actionOptions) && /*#__PURE__*/React__default["default"].createElement(MenuItem$7.Button, {
     "data-cy": "no-options-menu-item"
-  }, i18next.t("neetoRules.common.noOptions")))), /*#__PURE__*/React__default["default"].createElement(ActionSubItem, {
+  }, t("neetoRules.common.noOptions")))), /*#__PURE__*/React__default["default"].createElement(ActionSubItem, {
     action: action,
     index: index,
     selectedField: selectedField,