@bigbinary/neeto-rules-frontend 2.5.28 → 2.5.29

package/dist/cjs/NeetoRulesForm.js

@@ -10,7 +10,6 @@ var formik = require('formik');
 var neetoCist = require('@bigbinary/neeto-cist');
 var Plus = require('@bigbinary/neeto-icons/Plus');
 var Delete = require('@bigbinary/neeto-icons/Delete');
-var Refresh = require('@bigbinary/neeto-icons/Refresh');
 var Button = require('@bigbinary/neetoui/Button');
 var reactI18next = require('react-i18next');
 var useUtilityStore = require('../useUtilityStore-D6PfpKqa.js');
@@ -19,14 +18,17 @@ var Typography = require('@bigbinary/neetoui/Typography');
 var ramda = require('ramda');
 var i18next = require('i18next');
 var yup = require('yup');
+var Search = require('@bigbinary/neeto-icons/Search');
+var Input$1 = require('@bigbinary/neetoui/Input');
 var Radio = require('@bigbinary/neetoui/formik/Radio');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var managers = require('@bigbinary/neetoui/managers');
 var jsxRuntime = require('react/jsx-runtime');
 var Collapse = require('@bigbinary/neeto-icons/Collapse');
+var Callout = require('@bigbinary/neetoui/Callout');
 var Left = require('@bigbinary/neeto-icons/Left');
 var Textarea = require('@bigbinary/neetoui/formik/Textarea');
-var Input$1 = require('@bigbinary/neetoui/formik/Input');
+var Input$2 = require('@bigbinary/neetoui/formik/Input');
 var Switch = require('@bigbinary/neetoui/formik/Switch');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Editor = require('@monaco-editor/react');
@@ -38,19 +40,19 @@ var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var DatePicker = require('@bigbinary/neetoui/DatePicker');
 var MultiEmailInput = require('@bigbinary/neetoui/formik/MultiEmailInput');
 var FormikEditor = require('@bigbinary/neeto-editor/FormikEditor');
+var Refresh = require('@bigbinary/neeto-icons/Refresh');
 var Select$1 = require('@bigbinary/neetoui/formik/Select');
 var useHotkeys = require('@bigbinary/neeto-hotkeys');
 var Check = require('@bigbinary/neeto-icons/Check');
 var Close = require('@bigbinary/neeto-icons/Close');
-var Input$2 = require('@bigbinary/neetoui/Input');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var CreatableSelect = require('react-select/creatable');
 var _toArray = require('@babel/runtime/helpers/toArray');
 var PhoneNumber = require('@bigbinary/neeto-molecules/PhoneNumber');
 var Tag = require('@bigbinary/neetoui/Tag');
 var reactSelect = require('react-select');
+var constants = require('../constants-BjXYr8nk.js');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
-var constants = require('../constants-CCwwHsAM.js');
 var Radio$1 = require('@bigbinary/neetoui/Radio');
 var TimePicker = require('@bigbinary/neetoui/TimePicker');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
@@ -169,7 +171,7 @@ var Footer = function Footer(_ref) {
     className = _ref.className;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     "data-cy": "pane-footer",
-    className: classNames("neeto-rules-side-panel__footer neeto-ui-border-gray-300 flex items-center justify-between border-t p-6", className),
+    className: classNames("neeto-rules-side-panel__footer neeto-ui-border-gray-200 flex items-center justify-between border-t p-6", className),
     children: children
   });
 };
@@ -187,7 +189,7 @@ var Header = function Header(_ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     "data-cy": "pane-header",
-    className: classNames("neeto-rules-side-panel__header neeto-ui-border-gray-300 flex items-start justify-between border-b p-6", _defineProperty({}, className, className)),
+    className: classNames("neeto-rules-side-panel__header neeto-ui-border-gray-200 flex items-start justify-between border-b p-6", _defineProperty({}, className, className)),
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex min-w-0 flex-grow",
       children: children
@@ -237,7 +239,7 @@ var Panel = function Panel() {
     large: "neeto-rules-side-panel--large"
   }[panelState.size] || "neeto-rules-side-panel--small";
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$u(_objectSpread$u({
-    className: classNames("neeto-rules-side-panel neeto-ui-border-gray-300 transition-width neeto-ui-bg-white ml-auto flex h-screen max-h-full flex-col overflow-y-auto border-l duration-300 ease-in-out", _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, panelSize, isOpen), "w-0 overflow-hidden", !isOpen), "absolute", hasOverlays), "right-0", hasOverlays))
+    className: classNames("neeto-rules-side-panel neeto-ui-border-gray-200 transition-width neeto-ui-bg-white ml-auto flex h-screen max-h-full flex-col overflow-y-auto border-l duration-300 ease-in-out", _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, panelSize, isOpen), "w-0 overflow-hidden", !isOpen), "absolute", hasOverlays), "right-0", hasOverlays))
   }, paneProps), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$u(_objectSpread$u({}, data), {}, {
       onClose: resetPanelState
@@ -248,15 +250,11 @@ Panel.Header = Header;
 Panel.Body = Body;
 Panel.Footer = Footer;
 
-var ErrorCallout = function ErrorCallout(_ref) {
-  var message = _ref.message,
-    selectedField = _ref.selectedField;
-  if (!message) return null;
-  if (typeof message === "function") return message(selectedField);
-  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
-    className: "neeto-ui-text-white neeto-ui-bg-error-500 neeto-ui-rounded-sm -mx-4 w-full p-3",
-    style: "h5",
-    children: message
+var StickySidebarHeader = function StickySidebarHeader(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "sticky top-0 neeto-ui-bg-white py-6 flex flex-col gap-3",
+    children: children
   });
 };
 
@@ -302,6 +300,7 @@ var DEFAULT_RULE_ACTION = {
 };
 var EDITOR_ADDONS = ["code-block", "block-quote", "image-upload"];
 var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var MAXIMUM_OPTION_LENGTH$1 = 7;
 var ACTION_INPUT_TYPES = ["text", "number", "decimal", "regex"];
 var DEFAULT_HELP_POPOVER_PROPS = {
   helpLinkProps: {
@@ -309,6 +308,18 @@ var DEFAULT_HELP_POPOVER_PROPS = {
   }
 };
 
+var ErrorCallout = function ErrorCallout(_ref) {
+  var message = _ref.message,
+    selectedField = _ref.selectedField;
+  if (!message) return null;
+  if (typeof message === "function") return message(selectedField);
+  return /*#__PURE__*/jsxRuntime.jsx(Callout, {
+    className: "block",
+    style: "danger",
+    children: message
+  });
+};
+
 var getFieldDetails$1 = function getFieldDetails(fieldValue) {
   var actionOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return neetoCist.findBy({
@@ -337,6 +348,12 @@ var getDetailsByValue = function getDetailsByValue(value, options) {
     value: value
   }, options);
 };
+var getSearchedOptions$2 = function getSearchedOptions(dropdownOptions, searchTerm) {
+  return dropdownOptions.filter(function (_ref) {
+    var label = _ref.label;
+    return ramda.toLower(label).includes(ramda.toLower(searchTerm.trim()));
+  });
+};
 var getSelectedOptions = function getSelectedOptions(options) {
   return options.filter(ramda.identity).length ? options : [];
 };
@@ -389,6 +406,10 @@ var getPanelSize = function getPanelSize(selectedField) {
 var ActionPanel = function ActionPanel() {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useState = react.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
   var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
       return {
         setPanelState: store["setPanelState"],
@@ -428,6 +449,8 @@ var ActionPanel = function ActionPanel() {
     ref = _useActiveField.ref,
     setFieldActive = _useActiveField.setFieldActive;
   var label = index ? t("neetoRules.common.andThen") : t("neetoRules.common.then");
+  var isSearchable = actionOptions.length > MAXIMUM_OPTION_LENGTH$1;
+  var searchedOptions = getSearchedOptions$2(actionOptions, searchTerm);
   var setFieldValueAndUntouch = function setFieldValueAndUntouch(field, value) {
     setFieldValue(field, value);
     setFieldTouched(field, false);
@@ -468,26 +491,45 @@ var ActionPanel = function ActionPanel() {
         })]
       })
     }), /*#__PURE__*/jsxRuntime.jsxs(Panel.Body, {
-      className: "space-y-4",
-      children: [/*#__PURE__*/jsxRuntime.jsx(ErrorCallout, {
-        selectedField: selectedField,
-        message: errorMessage
-      }), /*#__PURE__*/jsxRuntime.jsx(Radio, {
+      className: classNames("space-y-4", {
+        "pt-0": isSearchable || errorMessage
+      }),
+      children: [(isSearchable || errorMessage) && /*#__PURE__*/jsxRuntime.jsxs(StickySidebarHeader, {
+        children: [isSearchable && /*#__PURE__*/jsxRuntime.jsx(Input$1, {
+          "data-cy": "search-text-field",
+          placeholder: t("neetoRules.common.search"),
+          prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
+          value: searchTerm,
+          onChange: function onChange(e) {
+            return setSearchTerm(e.target.value);
+          },
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(ErrorCallout, {
+          selectedField: selectedField,
+          message: errorMessage
+        })]
+      }), neetoCist.isNotEmpty(searchedOptions) ? /*#__PURE__*/jsxRuntime.jsx(Radio, {
         ref: ref,
         stacked: true,
         name: "".concat(name, ".name"),
         value: selectedField === null || selectedField === void 0 ? void 0 : selectedField.value,
         onChange: handleSelectOption,
-        children: actionOptions.map(function (_ref2, index) {
+        children: searchedOptions.map(function (_ref2) {
           var label = _ref2.label,
             value = _ref2.value;
           return /*#__PURE__*/react.createElement(Radio.Item, {
             label: label,
             value: value,
-            key: index,
+            key: value,
             onFocus: setFieldActive
           });
         })
+      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "py-1 text-sm",
+        "data-cy": "no-options-menu-item",
+        children: t("neetoRules.common.noOptions")
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Panel.Footer, {
       children: /*#__PURE__*/jsxRuntime.jsx(Button, {
@@ -742,13 +784,13 @@ var KeyValuePairsField = reactUtils.withT(function (_ref) {
         children: [data.map(function (_, index) {
           return /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex h-8 space-x-3",
-            children: [/*#__PURE__*/jsxRuntime.jsx(Input$1, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(Input$2, {
               onFocus: onFocus,
               className: "w-1/3",
               name: "".concat(name, ".").concat(index, ".key"),
               placeholder: t("neetoRules.labels.key"),
               type: "text"
-            }), /*#__PURE__*/jsxRuntime.jsx(Input$1, {
+            }), /*#__PURE__*/jsxRuntime.jsx(Input$2, {
               onFocus: onFocus,
               className: "w-2/3",
               name: "".concat(name, ".").concat(index, ".value"),
@@ -985,7 +1027,7 @@ var SaveAsTemplate = function SaveAsTemplate(_ref) {
       label: t("neetoRules.labels.saveAsTemplate"),
       name: switchName,
       onChange: handleChange
-    }), shouldSaveAsTemplate && /*#__PURE__*/jsxRuntime.jsx(Input$1, {
+    }), shouldSaveAsTemplate && /*#__PURE__*/jsxRuntime.jsx(Input$2, {
       autoFocus: true,
       required: true,
       label: t("neetoRules.labels.templateName"),
@@ -1161,7 +1203,7 @@ var ApiFields = function ApiFields(_ref2) {
       initialFocusRef: ref,
       onChange: handleTemplateChange,
       onFocus: setFieldActive
-    }), /*#__PURE__*/jsxRuntime.jsx(Input$1, {
+    }), /*#__PURE__*/jsxRuntime.jsx(Input$2, {
       required: true,
       className: "mb-4",
       "data-cy": "api-action-endpoint-text-field",
@@ -1401,7 +1443,7 @@ var EditorAction = function EditorAction(_ref) {
   }, otherProps));
 };
 
-var _excluded$d = ["dropdownOptions", "name", "selectedField", "shouldAutoFocus", "className", "required"];
+var _excluded$d = ["dropdownOptions", "name", "selectedField", "shouldAutoFocus", "className", "required", "handleSlackChannelRefresh", "action"];
 function ownKeys$p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Target$g = function Target(_ref) {
@@ -1465,6 +1507,8 @@ var SelectField$2 = function SelectField(_ref2) {
     className = _ref2.className,
     _ref2$required = _ref2.required,
     required = _ref2$required === void 0 ? false : _ref2$required,
+    handleSlackChannelRefresh = _ref2.handleSlackChannelRefresh,
+    action = _ref2.action,
     otherProps = _objectWithoutProperties(_ref2, _excluded$d);
   var _useTranslation2 = reactI18next.useTranslation(),
     t = _useTranslation2.t;
@@ -1496,18 +1540,32 @@ var SelectField$2 = function SelectField(_ref2) {
     setValue((_option$value = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value !== void 0 ? _option$value : null);
     setTouched(true);
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Select$1, _objectSpread$p(_objectSpread$p({}, _objectSpread$p({
-    className: className,
-    name: name,
-    required: required
-  }, otherProps)), {}, {
-    innerRef: ref,
-    label: defaultLabel,
-    options: dropdownOptions,
-    value: selectedOption,
-    onChange: handleSelectOption,
-    onFocus: setFieldActive
-  }));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-start gap-2",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Select$1, _objectSpread$p(_objectSpread$p({}, _objectSpread$p({
+      className: className,
+      name: name,
+      required: required
+    }, otherProps)), {}, {
+      innerRef: ref,
+      label: defaultLabel,
+      options: dropdownOptions,
+      value: selectedOption,
+      onChange: handleSelectOption,
+      onFocus: setFieldActive
+    })), handleSlackChannelRefresh && action.name === "message_to_slack" && /*#__PURE__*/jsxRuntime.jsx(Button, {
+      className: "mt-[22px]",
+      "data-cy": "refresh-slack-button",
+      icon: Refresh,
+      size: "medium",
+      style: "secondary",
+      tooltipProps: {
+        content: t("neetoRules.slack.refreshChannelList"),
+        position: "top"
+      },
+      onClick: handleSlackChannelRefresh
+    })]
+  });
 };
 SelectField$2.Target = Target$g;
 
@@ -1644,7 +1702,7 @@ var EmailFields = function EmailFields(_ref2) {
       name: "".concat(name, ".emails"),
       initialFocusRef: isFirstFieldInForm("emails") ? initialFocusRef : null,
       onFocus: setFieldActive
-    }), !selectedField.hideSubject && /*#__PURE__*/jsxRuntime.jsx(Input$1, {
+    }), !selectedField.hideSubject && /*#__PURE__*/jsxRuntime.jsx(Input$2, {
       required: true,
       className: "mb-4",
       "data-cy": "email-action-subject-text-field",
@@ -1724,7 +1782,7 @@ var Input = function Input(_ref2) {
     }),
     ref = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  return /*#__PURE__*/jsxRuntime.jsx(Input$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(Input$2, {
     ref: ref,
     required: required,
     className: "my-auto",
@@ -1806,7 +1864,7 @@ var InlineInput = /*#__PURE__*/react.forwardRef(function (props, ref) {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: classNames("flex flex-grow", _defineProperty({}, className, className)),
     ref: inputWrapperRef,
-    children: /*#__PURE__*/jsxRuntime.jsx(Input$2, _objectSpread$n(_objectSpread$n({
+    children: /*#__PURE__*/jsxRuntime.jsx(Input$1, _objectSpread$n(_objectSpread$n({
       autoFocus: true,
       required: true,
       className: "neeto-planner-inline-input",
@@ -2220,7 +2278,6 @@ var MultiSelectCheckbox$1 = function MultiSelectCheckbox(_ref2) {
     }) : /*#__PURE__*/jsxRuntime.jsx(Select$1, {
       name: name,
       innerRef: ref,
-      label: defaultLabel,
       options: dropdownOptions,
       onFocus: setFieldActive
     })]
@@ -2830,7 +2887,8 @@ var ActionSubItem = function ActionSubItem(_ref) {
     isTarget = _ref$isTarget === void 0 ? false : _ref$isTarget,
     errorMessage = _ref.errorMessage,
     _ref$openPanel = _ref.openPanel,
-    openPanel = _ref$openPanel === void 0 ? neetoCist.noop : _ref$openPanel;
+    openPanel = _ref$openPanel === void 0 ? neetoCist.noop : _ref$openPanel,
+    handleSlackChannelRefresh = _ref.handleSlackChannelRefresh;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var hasError = !!errorMessage;
@@ -3027,6 +3085,8 @@ var ActionSubItem = function ActionSubItem(_ref) {
         return openPanel("small");
       }
     }) : /*#__PURE__*/jsxRuntime.jsx(SelectField$2, {
+      action: action,
+      handleSlackChannelRefresh: handleSlackChannelRefresh,
       index: index,
       selectedField: selectedField,
       required: true,
@@ -3199,14 +3259,15 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
   var _useUtilityStore2 = useUtilityStore.useUtilityStore(function (store) {
-      var _store$panelState, _store$panelState2, _store$panelState3, _store$panelState4, _store$panelState5, _store$panelState6;
+      var _store$panelState, _store$panelState2, _store$panelState3, _store$panelState4, _store$panelState5, _store$panelState6, _store$panelState7;
       return {
         name: (_store$panelState = store["panelState"]) === null || _store$panelState === void 0 || (_store$panelState = _store$panelState["data"]) === null || _store$panelState === void 0 ? void 0 : _store$panelState["name"],
         index: (_store$panelState2 = store["panelState"]) === null || _store$panelState2 === void 0 || (_store$panelState2 = _store$panelState2["data"]) === null || _store$panelState2 === void 0 ? void 0 : _store$panelState2["index"],
         action: (_store$panelState3 = store["panelState"]) === null || _store$panelState3 === void 0 || (_store$panelState3 = _store$panelState3["data"]) === null || _store$panelState3 === void 0 ? void 0 : _store$panelState3["action"],
         valueOptions: (_store$panelState4 = store["panelState"]) === null || _store$panelState4 === void 0 || (_store$panelState4 = _store$panelState4["data"]) === null || _store$panelState4 === void 0 ? void 0 : _store$panelState4["valueOptions"],
         selectedField: (_store$panelState5 = store["panelState"]) === null || _store$panelState5 === void 0 || (_store$panelState5 = _store$panelState5["data"]) === null || _store$panelState5 === void 0 ? void 0 : _store$panelState5["selectedField"],
-        errorMessage: (_store$panelState6 = store["panelState"]) === null || _store$panelState6 === void 0 || (_store$panelState6 = _store$panelState6["data"]) === null || _store$panelState6 === void 0 ? void 0 : _store$panelState6["errorMessage"]
+        errorMessage: (_store$panelState6 = store["panelState"]) === null || _store$panelState6 === void 0 || (_store$panelState6 = _store$panelState6["data"]) === null || _store$panelState6 === void 0 ? void 0 : _store$panelState6["errorMessage"],
+        handleSlackChannelRefresh: (_store$panelState7 = store["panelState"]) === null || _store$panelState7 === void 0 || (_store$panelState7 = _store$panelState7["data"]) === null || _store$panelState7 === void 0 ? void 0 : _store$panelState7["handleSlackChannelRefresh"]
       };
     }, shallow.shallow),
     name = _useUtilityStore2.name,
@@ -3214,7 +3275,8 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
     action = _useUtilityStore2.action,
     valueOptions = _useUtilityStore2.valueOptions,
     selectedField = _useUtilityStore2.selectedField,
-    errorMessage = _useUtilityStore2.errorMessage;
+    errorMessage = _useUtilityStore2.errorMessage,
+    handleSlackChannelRefresh = _useUtilityStore2.handleSlackChannelRefresh;
   var _useFormikContext = formik.useFormikContext(),
     setFieldTouched = _useFormikContext.setFieldTouched;
   var _useField = formik.useField("".concat(name, ".metadata")),
@@ -3270,12 +3332,17 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
         })]
       })
     }), /*#__PURE__*/jsxRuntime.jsxs(Panel.Body, {
-      className: "space-y-4",
-      children: [/*#__PURE__*/jsxRuntime.jsx(ErrorCallout, {
-        selectedField: selectedField,
-        message: errorMessage
+      className: classNames("space-y-4", {
+        "pt-0": errorMessage
+      }),
+      children: [errorMessage && /*#__PURE__*/jsxRuntime.jsx(StickySidebarHeader, {
+        children: /*#__PURE__*/jsxRuntime.jsx(ErrorCallout, {
+          selectedField: selectedField,
+          message: errorMessage
+        })
       }), /*#__PURE__*/jsxRuntime.jsx(ActionSubItem$1, {
         action: action,
+        handleSlackChannelRefresh: handleSlackChannelRefresh,
         index: index,
         selectedField: selectedField,
         valueOptions: valueOptions,
@@ -3443,7 +3510,7 @@ var InputField$1 = function InputField(_ref2) {
     }),
     ref = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  return /*#__PURE__*/jsxRuntime.jsx(Input$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(Input$2, {
     name: name,
     placeholder: placeholder,
     ref: ref,
@@ -3703,6 +3770,12 @@ var getVerbOptions = function getVerbOptions() {
     };
   });
 };
+var getSearchedOptions$1 = function getSearchedOptions(dropdownOptions, searchTerm) {
+  return dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.filter(function (_ref) {
+    var label = _ref.label;
+    return ramda.toLower(label).includes(ramda.toLower(searchTerm.trim()));
+  });
+};
 var getAllOptions = function getAllOptions(options) {
   return Array.isArray(options) ? options.map(function (option) {
     return {
@@ -3820,7 +3893,7 @@ var MultiSelectCreate = function MultiSelectCreate(_ref2) {
 MultiSelectCreate.Target = Target$3;
 
 var _excluded$7 = ["name", "options", "placeholder", "onClick"],
-  _excluded2 = ["name", "options", "handleOnChange", "shouldAutoFocus", "showLabel", "required"];
+  _excluded2 = ["name", "options", "handleOnChange", "shouldAutoFocus", "showLabel", "required", "isSearchable"];
 function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Target$2 = function Target(_ref) {
@@ -3875,9 +3948,15 @@ var RadioField$1 = function RadioField(_ref2) {
     showLabel = _ref2$showLabel === void 0 ? true : _ref2$showLabel,
     _ref2$required = _ref2.required,
     required = _ref2$required === void 0 ? false : _ref2$required,
+    _ref2$isSearchable = _ref2.isSearchable,
+    isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     otherProps = _objectWithoutProperties(_ref2, _excluded2);
   var _useTranslation2 = reactI18next.useTranslation(),
     t = _useTranslation2.t;
+  var _useState = react.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
   var _useField3 = formik.useField(name),
     _useField4 = _slicedToArray(_useField3, 3),
     field = _useField4[0],
@@ -3892,6 +3971,7 @@ var RadioField$1 = function RadioField(_ref2) {
   var selectedOption = neetoCist.findBy({
     value: field.value
   }, options);
+  var searchedOptions = getSearchedOptions$1(options, searchTerm);
   var handleRadioChange = function handleRadioChange(_ref3) {
     var value = _ref3.target.value;
     var selectedOption = neetoCist.findBy({
@@ -3900,25 +3980,45 @@ var RadioField$1 = function RadioField(_ref2) {
     handleOnChange ? handleOnChange(selectedOption) : setValue(value);
     setTouched(true);
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Radio$1, _objectSpread$h(_objectSpread$h({
-    ref: ref,
-    required: required,
-    stacked: true,
-    label: showLabel && t("neetoRules.labels.selectValue"),
-    value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value,
-    onChange: handleRadioChange,
-    onFocus: setFieldActive
-  }, otherProps), {}, {
-    children: options.map(function (_ref4, index) {
-      var label = _ref4.label,
-        value = _ref4.value;
-      return /*#__PURE__*/react.createElement(Radio$1.Item, {
-        label: label,
-        value: value,
-        key: index
-      });
-    })
-  }));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "w-full",
+    children: [isSearchable && /*#__PURE__*/jsxRuntime.jsx(StickySidebarHeader, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Input$1, {
+        "data-cy": "search-text-field",
+        placeholder: t("neetoRules.common.search"),
+        prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
+        value: searchTerm,
+        onChange: function onChange(e) {
+          return setSearchTerm(e.target.value);
+        },
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      })
+    }), neetoCist.isNotEmpty(searchedOptions) ? /*#__PURE__*/jsxRuntime.jsx(Radio$1, _objectSpread$h(_objectSpread$h({
+      ref: ref,
+      required: required,
+      stacked: true,
+      label: showLabel && t("neetoRules.labels.selectValue"),
+      value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value,
+      onChange: handleRadioChange,
+      onFocus: setFieldActive
+    }, otherProps), {}, {
+      children: searchedOptions.map(function (_ref4) {
+        var label = _ref4.label,
+          value = _ref4.value;
+        return /*#__PURE__*/react.createElement(Radio$1.Item, {
+          label: label,
+          value: value,
+          key: value
+        });
+      })
+    })) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "py-1 text-sm",
+      "data-cy": "no-options-menu-item",
+      children: t("neetoRules.common.noOptions")
+    })]
+  });
 };
 RadioField$1.Target = Target$2;
 
@@ -4143,6 +4243,7 @@ var FieldPanel = function FieldPanel() {
   var _useField3 = formik.useField("".concat(name, ".joinType")),
     _useField4 = _slicedToArray(_useField3, 1),
     logicalOperator = _useField4[0];
+  var isSearchable = conditionOptions.length > constants.MAXIMUM_OPTION_LENGTH;
   var handleContinue = function handleContinue() {
     !meta.error && setPanelState(ramda.mergeDeepLeft({
       type: PANEL_TYPES.VERB_AND_VALUE,
@@ -4170,7 +4271,11 @@ var FieldPanel = function FieldPanel() {
         })]
       })
     }), /*#__PURE__*/jsxRuntime.jsx(Panel.Body, {
+      className: classNames({
+        "pt-0": isSearchable
+      }),
       children: /*#__PURE__*/jsxRuntime.jsx(RadioField$1, {
+        isSearchable: isSearchable,
         shouldAutoFocus: true,
         handleOnChange: handleFieldChange,
         name: "".concat(name, ".field"),
@@ -4436,6 +4541,7 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
   });
 };
 
+var MAXIMUM_OPTION_LENGTH = 7;
 var OPERATORS = {
   or: "or_operator",
   and: "and_operator"
@@ -4498,7 +4604,7 @@ var DelayPanel = function DelayPanel() {
     }), /*#__PURE__*/jsxRuntime.jsx(Panel.Body, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex gap-x-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Input$1, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Input$2, {
           className: "w-44",
           max: 15,
           min: 1,
@@ -4532,11 +4638,27 @@ var DelayPanel = function DelayPanel() {
   });
 };
 
+var getAllEvents = function getAllEvents(events, dropdownOptions) {
+  return dropdownOptions.filter(function (option) {
+    return events.includes(option.value);
+  });
+};
+var getSearchedOptions = function getSearchedOptions(dropdownOptions, searchTerm) {
+  return dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.filter(function (_ref) {
+    var label = _ref.label;
+    return ramda.toLower(label).includes(ramda.toLower(searchTerm.trim()));
+  });
+};
+
 function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EventsPanel = function EventsPanel() {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useState = react.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
   var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
       return {
         setPanelState: store["setPanelState"]
@@ -4578,6 +4700,8 @@ var EventsPanel = function EventsPanel() {
   var defaultData = elementProps.defaultData;
   var eventNames = ramda.pluck("name", events);
   var dropdownOptions = elementProps.eventOptions;
+  var searchedOptions = getSearchedOptions(dropdownOptions, searchTerm);
+  var isSearchable = dropdownOptions.length > MAXIMUM_OPTION_LENGTH;
   var handleDefaultData = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _values$name;
@@ -4680,10 +4804,26 @@ var EventsPanel = function EventsPanel() {
           children: t("neetoRules.form.addEventDescription")
         })]
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(Panel.Body, {
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+    }), /*#__PURE__*/jsxRuntime.jsxs(Panel.Body, {
+      className: classNames({
+        "pt-0": isSearchable
+      }),
+      children: [isSearchable && /*#__PURE__*/jsxRuntime.jsx(StickySidebarHeader, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Input$1, {
+          "data-cy": "search-text-field",
+          placeholder: t("neetoRules.common.search"),
+          prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
+          value: searchTerm,
+          onChange: function onChange(e) {
+            return setSearchTerm(e.target.value);
+          },
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "space-y-3",
-        children: [neetoCist.isNotEmpty(dropdownOptions) ? dropdownOptions.map(function (option) {
+        children: [neetoCist.isNotEmpty(searchedOptions) ? searchedOptions.map(function (option) {
           return /*#__PURE__*/react.createElement(Checkbox, {
             ref: ref,
             checked: eventNames === null || eventNames === void 0 ? void 0 : eventNames.includes(option.value),
@@ -4704,7 +4844,7 @@ var EventsPanel = function EventsPanel() {
           className: "neeto-ui-input__error",
           children: error
         })]
-      })
+      })]
     }), /*#__PURE__*/jsxRuntime.jsx(Panel.Footer, {
       children: /*#__PURE__*/jsxRuntime.jsx(Button, {
         "data-cy": "continue-button",
@@ -5229,7 +5369,8 @@ var ActionItem = function ActionItem(_ref) {
     selectedActionOptions = _ref.selectedActionOptions,
     routeToSlackIntegration = _ref.routeToSlackIntegration,
     shouldOpenPanel = _ref.shouldOpenPanel,
-    setShouldOpenPanel = _ref.setShouldOpenPanel;
+    setShouldOpenPanel = _ref.setShouldOpenPanel,
+    handleSlackChannelRefresh = _ref.handleSlackChannelRefresh;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useFormikContext = formik.useFormikContext(),
@@ -5304,7 +5445,8 @@ var ActionItem = function ActionItem(_ref) {
     selectedField: selectedField,
     onSelectAction: onSelectAction,
     valueOptions: getSelectedFieldOptions(),
-    errorMessage: errorMessage
+    errorMessage: errorMessage,
+    handleSlackChannelRefresh: handleSlackChannelRefresh
   };
   var _openPanel = function openPanel(type, panelSize) {
     setPanelState({
@@ -5332,9 +5474,10 @@ var ActionItem = function ActionItem(_ref) {
         })
       });
     });
-  }, [selectedField]);
+  }, [selectedField === null || selectedField === void 0 ? void 0 : selectedField.value]);
+  var hasError = !!errorMessage;
   react.useEffect(function () {
-    if (errorMessage) {
+    if (hasError) {
       setErrorFields(function (prev) {
         return prev.includes(name) ? prev : [].concat(_toConsumableArray(prev), [name]);
       });
@@ -5348,7 +5491,7 @@ var ActionItem = function ActionItem(_ref) {
         return prev.filter(neetoCist.isNot(name));
       });
     };
-  }, [errorMessage, name, setErrorFields]);
+  }, [hasError, name, setErrorFields]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex flex-grow min-w-0 flex-wrap gap-x-1 gap-y-3",
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -5467,6 +5610,7 @@ var Actions = function Actions(_ref) {
               children: [/*#__PURE__*/jsxRuntime.jsx(ActionItem$1, {
                 action: action,
                 elementProps: elementProps,
+                handleSlackChannelRefresh: handleSlackChannelRefresh,
                 index: index,
                 onSelectAction: onSelectAction,
                 routeToSlackIntegration: routeToSlackIntegration,
@@ -5477,18 +5621,7 @@ var Actions = function Actions(_ref) {
                 parentName: name
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                 className: "flex flex-wrap flex-shrink-0 self-center",
-                children: [handleSlackChannelRefresh && action.name === "message_to_slack" && /*#__PURE__*/jsxRuntime.jsx(Button, {
-                  "data-cy": "refresh-slack-button",
-                  icon: Refresh,
-                  size: "medium",
-                  tooltipProps: {
-                    content: t("neetoRules.slack.refreshChannelList"),
-                    position: "top"
-                  },
-                  onClick: function onClick() {
-                    return handleSlackChannelRefresh();
-                  }
-                }), showButton && index === actions.length - 1 && /*#__PURE__*/jsxRuntime.jsx(Button, {
+                children: [showButton && index === actions.length - 1 && /*#__PURE__*/jsxRuntime.jsx(Button, {
                   "data-cy": "add-action-button",
                   icon: Plus,
                   size: "medium",
@@ -5669,7 +5802,7 @@ var ConditionItem = function ConditionItem(_ref) {
         })
       });
     });
-  }, [selectedField, condition.verb]);
+  }, [selectedField === null || selectedField === void 0 ? void 0 : selectedField.value, condition.verb]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!!index && /*#__PURE__*/jsxRuntime.jsx(LogicalOperator, {
       handleGroupJoinType: handleGroupJoinType,
@@ -6033,12 +6166,6 @@ var Performer = function Performer(_ref) {
   });
 };
 
-var getAllEvents = function getAllEvents(events, dropdownOptions) {
-  return dropdownOptions.filter(function (option) {
-    return events.includes(option.value);
-  });
-};
-
 function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Events = function Events(_ref) {
@@ -6263,7 +6390,7 @@ var InputField = function InputField(_ref) {
     _useDebouncedUpdate2 = _slicedToArray(_useDebouncedUpdate, 2),
     text = _useDebouncedUpdate2[0],
     setText = _useDebouncedUpdate2[1];
-  return /*#__PURE__*/jsxRuntime.jsx(Input$1, _objectSpread$7(_objectSpread$7({
+  return /*#__PURE__*/jsxRuntime.jsx(Input$2, _objectSpread$7(_objectSpread$7({
     className: "mb-4",
     label: label || (elementProps === null || elementProps === void 0 ? void 0 : elementProps.label)
   }, field), {}, {