@bigbinary/neeto-rules-frontend 0.4.1 → 0.4.3

package/dist/index.js

@@ -3,7 +3,7 @@ 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';
@@ -11,10 +11,10 @@ import { isEditorEmpty, FormikEditor } from '@bigbinary/neeto-editor';
 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 { Typography, Button, Pane, DatePicker, Dropdown as Dropdown$1, Input as Input$1, Checkbox, Select, Tooltip, 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';
 
@@ -1067,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();
@@ -2325,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],
@@ -2346,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]);
@@ -2356,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"), {});
@@ -2376,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() {
@@ -2384,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"
@@ -2424,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) {
@@ -2448,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,
@@ -4116,9 +4136,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,
@@ -4128,6 +4149,8 @@ var EventConditions = function EventConditions(_ref) {
   var _useFormikContext = useFormikContext(),
     values = _useFormikContext.values,
     setFieldValue = _useFormikContext.setFieldValue;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var elementProps = data[name] || {};
   var conditionProps = data[conditionsName] || {};
   var conditions = values[conditionsName].value || [];
@@ -4154,18 +4177,21 @@ var EventConditions = function EventConditions(_ref) {
     name: name,
     onSelectEvent: onSelectEvent,
     performerName: performerName
-  })), showAddButton && /*#__PURE__*/React.createElement(Button, {
+  })), showAddButton && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    content: t("neetoRules.form.noTicketFields")
+  }, addButtonTooltipProps), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
     "data-cy": "add-condition-button",
     "data-test-id": "automation-rules-add-events-button",
+    disabled: isEmpty(conditionProps === null || conditionProps === void 0 ? void 0 : conditionProps.conditionOptions),
     icon: Plus,
     size: 32,
-    style: "icon",
+    style: "text",
     tooltipProps: {
-      content: t$1("neetoRules.form.addCondition"),
+      content: t("neetoRules.form.addCondition"),
       position: "top"
     },
     onClick: handleAddCondition
-  })), !showAddButton && /*#__PURE__*/React.createElement("div", {
+  })))), !showAddButton && /*#__PURE__*/React.createElement("div", {
     className: "mt-3"
   }, /*#__PURE__*/React.createElement(Conditions, _extends({
     data: data,