@bigbinary/neeto-rules-frontend 0.4.1 → 0.4.3

package/dist/index.cjs.js

@@ -1097,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();
@@ -2355,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],
@@ -2376,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]);
@@ -2386,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"), {});
@@ -2406,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() {
@@ -2414,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"
@@ -2454,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) {
@@ -2478,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,
@@ -4146,9 +4166,10 @@ var Events$1 = function Events(_ref) {
   }));
 };
 
-var _excluded$5 = ["data", "label", "name", "performerName", "conditionsName", "onSelectEvent"];
+var _excluded$5 = ["addButtonTooltipProps", "data", "label", "name", "performerName", "conditionsName", "onSelectEvent"];
 var EventConditions = function EventConditions(_ref) {
-  var data = _ref.data,
+  var addButtonTooltipProps = _ref.addButtonTooltipProps,
+    data = _ref.data,
     label = _ref.label,
     name = _ref.name,
     performerName = _ref.performerName,
@@ -4158,6 +4179,8 @@ var EventConditions = function EventConditions(_ref) {
   var _useFormikContext = formik.useFormikContext(),
     values = _useFormikContext.values,
     setFieldValue = _useFormikContext.setFieldValue;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var elementProps = data[name] || {};
   var conditionProps = data[conditionsName] || {};
   var conditions = values[conditionsName].value || [];
@@ -4184,18 +4207,21 @@ var EventConditions = function EventConditions(_ref) {
     name: name,
     onSelectEvent: onSelectEvent,
     performerName: performerName
-  })), showAddButton && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  })), showAddButton && /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, _extends({
+    content: t("neetoRules.form.noTicketFields")
+  }, addButtonTooltipProps), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     "data-cy": "add-condition-button",
     "data-test-id": "automation-rules-add-events-button",
+    disabled: ramda.isEmpty(conditionProps === null || conditionProps === void 0 ? void 0 : conditionProps.conditionOptions),
     icon: neetoIcons.Plus,
     size: 32,
-    style: "icon",
+    style: "text",
     tooltipProps: {
-      content: i18next.t("neetoRules.form.addCondition"),
+      content: t("neetoRules.form.addCondition"),
       position: "top"
     },
     onClick: handleAddCondition
-  })), !showAddButton && /*#__PURE__*/React__default["default"].createElement("div", {
+  })))), !showAddButton && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mt-3"
   }, /*#__PURE__*/React__default["default"].createElement(Conditions, _extends({
     data: data,