@bigbinary/neeto-rules-frontend 2.5.27 → 2.5.29

package/dist/NeetoRulesForm.js

@@ -3,28 +3,30 @@ import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructurin
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { shallow } from 'zustand/shallow';
-import { useRef, useEffect, createElement, useCallback, forwardRef, useState, useMemo, memo, Fragment as Fragment$1 } from 'react';
+import { useRef, useEffect, useState, createElement, useCallback, forwardRef, useMemo, memo, Fragment as Fragment$1 } from 'react';
 import { useFormikContext, useField, FieldArray, ErrorMessage, Formik, Form as Form$1 } from 'formik';
-import { findBy, noop, isNotEmpty, isPresent, hyphenate, renameKeys, notEqualsDeep, nullSafe, toLabelAndValue, removeBy, isNotPresent } from '@bigbinary/neeto-cist';
+import { findBy, isNotEmpty, noop, isPresent, hyphenate, renameKeys, notEqualsDeep, nullSafe, toLabelAndValue, removeBy, isNotPresent, isNot } from '@bigbinary/neeto-cist';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import Delete from '@bigbinary/neeto-icons/Delete';
-import Refresh from '@bigbinary/neeto-icons/Refresh';
 import Button from '@bigbinary/neetoui/Button';
 import { useTranslation, Trans } from 'react-i18next';
-import { u as useUtilityStore, g as getSeparator, d as dotPath$1, b as getDateTimeValue, a as getDateTimeFormattedValue, D as DATE_TIME_TYPES, e as DATE_TIME_FORMAT, f as DATE_FORMAT, T as TIME_FORMAT } from './useUtilityStore-C0O0N3Aq.js';
+import { u as useUtilityStore, g as getSeparator, d as dotPath$1, b as getDateTimeValue, a as getDateTimeFormattedValue, D as DATE_TIME_TYPES, e as DATE_TIME_FORMAT, f as DATE_FORMAT, T as TIME_FORMAT } from './useUtilityStore-6TPs8A8Q.js';
 import classNames from 'classnames';
 import Typography from '@bigbinary/neetoui/Typography';
-import { assocPath, pluck, identity, isEmpty, mergeDeepLeft, isNotNil, whereAny, reject, equals, unless, path, omit, useWith, split, when, is, trim, eqBy, F, values, isNil, without, append, pipe, filter, uniq, join, map, assoc, mergeLeft, includes, test } from 'ramda';
+import { assocPath, toLower, pluck, identity, isEmpty, mergeDeepLeft, isNotNil, whereAny, reject, equals, unless, path, omit, useWith, split, when, is, trim, eqBy, F, values, isNil, without, append, pipe, filter, uniq, join, map, assoc, mergeLeft, includes, test } from 'ramda';
 import { t as t$1 } from 'i18next';
 import * as yup from 'yup';
+import Search from '@bigbinary/neeto-icons/Search';
+import Input$1 from '@bigbinary/neetoui/Input';
 import Radio from '@bigbinary/neetoui/formik/Radio';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { manager } from '@bigbinary/neetoui/managers';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Collapse from '@bigbinary/neeto-icons/Collapse';
+import Callout from '@bigbinary/neetoui/Callout';
 import Left from '@bigbinary/neeto-icons/Left';
 import Textarea from '@bigbinary/neetoui/formik/Textarea';
-import Input$1 from '@bigbinary/neetoui/formik/Input';
+import Input$2 from '@bigbinary/neetoui/formik/Input';
 import Switch from '@bigbinary/neetoui/formik/Switch';
 import { withT, useStateWithDependency, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Editor from '@monaco-editor/react';
@@ -36,19 +38,19 @@ import { dayjs, joinHyphenCase, hyphenize } from '@bigbinary/neeto-commons-front
 import DatePicker from '@bigbinary/neetoui/DatePicker';
 import MultiEmailInput from '@bigbinary/neetoui/formik/MultiEmailInput';
 import FormikEditor from '@bigbinary/neeto-editor/FormikEditor';
+import Refresh from '@bigbinary/neeto-icons/Refresh';
 import Select$1 from '@bigbinary/neetoui/formik/Select';
 import useHotkeys from '@bigbinary/neeto-hotkeys';
 import Check from '@bigbinary/neeto-icons/Check';
 import Close from '@bigbinary/neeto-icons/Close';
-import Input$2 from '@bigbinary/neetoui/Input';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import CreatableSelect from 'react-select/creatable';
 import _toArray from '@babel/runtime/helpers/toArray';
 import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/PhoneNumber';
 import Tag from '@bigbinary/neetoui/Tag';
 import { components } from 'react-select';
+import { O as OPERATORS$1, V as VERB_LABELS, M as MAXIMUM_OPTION_LENGTH$2, I as INPUT_FIELD_TYPES, C as CONDITION_VALUE_TYPES, F as FIELDS_WITH_OPTIONS$1 } from './constants-C_bfl8XZ.js';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
-import { O as OPERATORS$1, V as VERB_LABELS, I as INPUT_FIELD_TYPES, C as CONDITION_VALUE_TYPES, F as FIELDS_WITH_OPTIONS$1 } from './constants-DvCsjJGj.js';
 import Radio$1 from '@bigbinary/neetoui/Radio';
 import TimePicker from '@bigbinary/neetoui/TimePicker';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
@@ -148,7 +150,7 @@ var Footer = function Footer(_ref) {
     className = _ref.className;
   return /*#__PURE__*/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
   });
 };
@@ -166,7 +168,7 @@ var Header = function Header(_ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/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__*/jsx("div", {
       className: "flex min-w-0 flex-grow",
       children: children
@@ -216,7 +218,7 @@ var Panel = function Panel() {
     large: "neeto-rules-side-panel--large"
   }[panelState.size] || "neeto-rules-side-panel--small";
   return /*#__PURE__*/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__*/jsx(Component, _objectSpread$u(_objectSpread$u({}, data), {}, {
       onClose: resetPanelState
@@ -227,15 +229,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__*/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__*/jsx("div", {
+    className: "sticky top-0 neeto-ui-bg-white py-6 flex flex-col gap-3",
+    children: children
   });
 };
 
@@ -281,6 +279,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: {
@@ -288,6 +287,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__*/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 findBy({
@@ -316,6 +327,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 toLower(label).includes(toLower(searchTerm.trim()));
+  });
+};
 var getSelectedOptions = function getSelectedOptions(options) {
   return options.filter(identity).length ? options : [];
 };
@@ -368,6 +385,10 @@ var getPanelSize = function getPanelSize(selectedField) {
 var ActionPanel = function ActionPanel() {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
   var _useUtilityStore = useUtilityStore(function (store) {
       return {
         setPanelState: store["setPanelState"],
@@ -407,6 +428,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);
@@ -447,26 +470,45 @@ var ActionPanel = function ActionPanel() {
         })]
       })
     }), /*#__PURE__*/jsxs(Panel.Body, {
-      className: "space-y-4",
-      children: [/*#__PURE__*/jsx(ErrorCallout, {
-        selectedField: selectedField,
-        message: errorMessage
-      }), /*#__PURE__*/jsx(Radio, {
+      className: classNames("space-y-4", {
+        "pt-0": isSearchable || errorMessage
+      }),
+      children: [(isSearchable || errorMessage) && /*#__PURE__*/jsxs(StickySidebarHeader, {
+        children: [isSearchable && /*#__PURE__*/jsx(Input$1, {
+          "data-cy": "search-text-field",
+          placeholder: t("neetoRules.common.search"),
+          prefix: /*#__PURE__*/jsx(Search, {}),
+          value: searchTerm,
+          onChange: function onChange(e) {
+            return setSearchTerm(e.target.value);
+          },
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        }), /*#__PURE__*/jsx(ErrorCallout, {
+          selectedField: selectedField,
+          message: errorMessage
+        })]
+      }), isNotEmpty(searchedOptions) ? /*#__PURE__*/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__*/createElement(Radio.Item, {
             label: label,
             value: value,
-            key: index,
+            key: value,
             onFocus: setFieldActive
           });
         })
+      }) : /*#__PURE__*/jsx("div", {
+        className: "py-1 text-sm",
+        "data-cy": "no-options-menu-item",
+        children: t("neetoRules.common.noOptions")
       })]
     }), /*#__PURE__*/jsx(Panel.Footer, {
       children: /*#__PURE__*/jsx(Button, {
@@ -721,13 +763,13 @@ var KeyValuePairsField = withT(function (_ref) {
         children: [data.map(function (_, index) {
           return /*#__PURE__*/jsxs("div", {
             className: "flex h-8 space-x-3",
-            children: [/*#__PURE__*/jsx(Input$1, {
+            children: [/*#__PURE__*/jsx(Input$2, {
               onFocus: onFocus,
               className: "w-1/3",
               name: "".concat(name, ".").concat(index, ".key"),
               placeholder: t("neetoRules.labels.key"),
               type: "text"
-            }), /*#__PURE__*/jsx(Input$1, {
+            }), /*#__PURE__*/jsx(Input$2, {
               onFocus: onFocus,
               className: "w-2/3",
               name: "".concat(name, ".").concat(index, ".value"),
@@ -964,7 +1006,7 @@ var SaveAsTemplate = function SaveAsTemplate(_ref) {
       label: t("neetoRules.labels.saveAsTemplate"),
       name: switchName,
       onChange: handleChange
-    }), shouldSaveAsTemplate && /*#__PURE__*/jsx(Input$1, {
+    }), shouldSaveAsTemplate && /*#__PURE__*/jsx(Input$2, {
       autoFocus: true,
       required: true,
       label: t("neetoRules.labels.templateName"),
@@ -1140,7 +1182,7 @@ var ApiFields = function ApiFields(_ref2) {
       initialFocusRef: ref,
       onChange: handleTemplateChange,
       onFocus: setFieldActive
-    }), /*#__PURE__*/jsx(Input$1, {
+    }), /*#__PURE__*/jsx(Input$2, {
       required: true,
       className: "mb-4",
       "data-cy": "api-action-endpoint-text-field",
@@ -1380,7 +1422,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) {
@@ -1444,6 +1486,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 = useTranslation(),
     t = _useTranslation2.t;
@@ -1475,18 +1519,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__*/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__*/jsxs("div", {
+    className: "flex items-start gap-2",
+    children: [/*#__PURE__*/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__*/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;
 
@@ -1623,7 +1681,7 @@ var EmailFields = function EmailFields(_ref2) {
       name: "".concat(name, ".emails"),
       initialFocusRef: isFirstFieldInForm("emails") ? initialFocusRef : null,
       onFocus: setFieldActive
-    }), !selectedField.hideSubject && /*#__PURE__*/jsx(Input$1, {
+    }), !selectedField.hideSubject && /*#__PURE__*/jsx(Input$2, {
       required: true,
       className: "mb-4",
       "data-cy": "email-action-subject-text-field",
@@ -1703,7 +1761,7 @@ var Input = function Input(_ref2) {
     }),
     ref = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  return /*#__PURE__*/jsx(Input$1, {
+  return /*#__PURE__*/jsx(Input$2, {
     ref: ref,
     required: required,
     className: "my-auto",
@@ -1785,7 +1843,7 @@ var InlineInput = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/jsx("div", {
     className: classNames("flex flex-grow", _defineProperty({}, className, className)),
     ref: inputWrapperRef,
-    children: /*#__PURE__*/jsx(Input$2, _objectSpread$n(_objectSpread$n({
+    children: /*#__PURE__*/jsx(Input$1, _objectSpread$n(_objectSpread$n({
       autoFocus: true,
       required: true,
       className: "neeto-planner-inline-input",
@@ -2199,7 +2257,6 @@ var MultiSelectCheckbox$1 = function MultiSelectCheckbox(_ref2) {
     }) : /*#__PURE__*/jsx(Select$1, {
       name: name,
       innerRef: ref,
-      label: defaultLabel,
       options: dropdownOptions,
       onFocus: setFieldActive
     })]
@@ -2809,7 +2866,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 ? noop : _ref$openPanel;
+    openPanel = _ref$openPanel === void 0 ? noop : _ref$openPanel,
+    handleSlackChannelRefresh = _ref.handleSlackChannelRefresh;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var hasError = !!errorMessage;
@@ -2866,6 +2924,7 @@ var ActionSubItem = function ActionSubItem(_ref) {
         }
       }), /*#__PURE__*/jsx(EmailFields.Target, {
         action: action,
+        hasError: hasError,
         index: index,
         name: name,
         selectedField: selectedField,
@@ -3005,6 +3064,8 @@ var ActionSubItem = function ActionSubItem(_ref) {
         return openPanel("small");
       }
     }) : /*#__PURE__*/jsx(SelectField$2, {
+      action: action,
+      handleSlackChannelRefresh: handleSlackChannelRefresh,
       index: index,
       selectedField: selectedField,
       required: true,
@@ -3177,14 +3238,15 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
   var _useUtilityStore2 = 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),
     name = _useUtilityStore2.name,
@@ -3192,7 +3254,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 = useFormikContext(),
     setFieldTouched = _useFormikContext.setFieldTouched;
   var _useField = useField("".concat(name, ".metadata")),
@@ -3248,12 +3311,17 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
         })]
       })
     }), /*#__PURE__*/jsxs(Panel.Body, {
-      className: "space-y-4",
-      children: [/*#__PURE__*/jsx(ErrorCallout, {
-        selectedField: selectedField,
-        message: errorMessage
+      className: classNames("space-y-4", {
+        "pt-0": errorMessage
+      }),
+      children: [errorMessage && /*#__PURE__*/jsx(StickySidebarHeader, {
+        children: /*#__PURE__*/jsx(ErrorCallout, {
+          selectedField: selectedField,
+          message: errorMessage
+        })
       }), /*#__PURE__*/jsx(ActionSubItem$1, {
         action: action,
+        handleSlackChannelRefresh: handleSlackChannelRefresh,
         index: index,
         selectedField: selectedField,
         valueOptions: valueOptions,
@@ -3421,7 +3489,7 @@ var InputField$1 = function InputField(_ref2) {
     }),
     ref = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  return /*#__PURE__*/jsx(Input$1, {
+  return /*#__PURE__*/jsx(Input$2, {
     name: name,
     placeholder: placeholder,
     ref: ref,
@@ -3681,6 +3749,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 toLower(label).includes(toLower(searchTerm.trim()));
+  });
+};
 var getAllOptions = function getAllOptions(options) {
   return Array.isArray(options) ? options.map(function (option) {
     return {
@@ -3798,7 +3872,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) {
@@ -3853,9 +3927,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 = useTranslation(),
     t = _useTranslation2.t;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
   var _useField3 = useField(name),
     _useField4 = _slicedToArray(_useField3, 3),
     field = _useField4[0],
@@ -3870,6 +3950,7 @@ var RadioField$1 = function RadioField(_ref2) {
   var selectedOption = findBy({
     value: field.value
   }, options);
+  var searchedOptions = getSearchedOptions$1(options, searchTerm);
   var handleRadioChange = function handleRadioChange(_ref3) {
     var value = _ref3.target.value;
     var selectedOption = findBy({
@@ -3878,25 +3959,45 @@ var RadioField$1 = function RadioField(_ref2) {
     handleOnChange ? handleOnChange(selectedOption) : setValue(value);
     setTouched(true);
   };
-  return /*#__PURE__*/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__*/createElement(Radio$1.Item, {
-        label: label,
-        value: value,
-        key: index
-      });
-    })
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "w-full",
+    children: [isSearchable && /*#__PURE__*/jsx(StickySidebarHeader, {
+      children: /*#__PURE__*/jsx(Input$1, {
+        "data-cy": "search-text-field",
+        placeholder: t("neetoRules.common.search"),
+        prefix: /*#__PURE__*/jsx(Search, {}),
+        value: searchTerm,
+        onChange: function onChange(e) {
+          return setSearchTerm(e.target.value);
+        },
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      })
+    }), isNotEmpty(searchedOptions) ? /*#__PURE__*/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__*/createElement(Radio$1.Item, {
+          label: label,
+          value: value,
+          key: value
+        });
+      })
+    })) : /*#__PURE__*/jsx("div", {
+      className: "py-1 text-sm",
+      "data-cy": "no-options-menu-item",
+      children: t("neetoRules.common.noOptions")
+    })]
+  });
 };
 RadioField$1.Target = Target$2;
 
@@ -4121,6 +4222,7 @@ var FieldPanel = function FieldPanel() {
   var _useField3 = useField("".concat(name, ".joinType")),
     _useField4 = _slicedToArray(_useField3, 1),
     logicalOperator = _useField4[0];
+  var isSearchable = conditionOptions.length > MAXIMUM_OPTION_LENGTH$2;
   var handleContinue = function handleContinue() {
     !meta.error && setPanelState(mergeDeepLeft({
       type: PANEL_TYPES.VERB_AND_VALUE,
@@ -4148,7 +4250,11 @@ var FieldPanel = function FieldPanel() {
         })]
       })
     }), /*#__PURE__*/jsx(Panel.Body, {
+      className: classNames({
+        "pt-0": isSearchable
+      }),
       children: /*#__PURE__*/jsx(RadioField$1, {
+        isSearchable: isSearchable,
         shouldAutoFocus: true,
         handleOnChange: handleFieldChange,
         name: "".concat(name, ".field"),
@@ -4414,6 +4520,7 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
   });
 };
 
+var MAXIMUM_OPTION_LENGTH = 7;
 var OPERATORS = {
   or: "or_operator",
   and: "and_operator"
@@ -4476,7 +4583,7 @@ var DelayPanel = function DelayPanel() {
     }), /*#__PURE__*/jsx(Panel.Body, {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex gap-x-2",
-        children: [/*#__PURE__*/jsx(Input$1, {
+        children: [/*#__PURE__*/jsx(Input$2, {
           className: "w-44",
           max: 15,
           min: 1,
@@ -4510,11 +4617,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 toLower(label).includes(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 = useTranslation(),
     t = _useTranslation.t;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
   var _useUtilityStore = useUtilityStore(function (store) {
       return {
         setPanelState: store["setPanelState"]
@@ -4556,6 +4679,8 @@ var EventsPanel = function EventsPanel() {
   var defaultData = elementProps.defaultData;
   var eventNames = 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;
@@ -4658,10 +4783,26 @@ var EventsPanel = function EventsPanel() {
           children: t("neetoRules.form.addEventDescription")
         })]
       })
-    }), /*#__PURE__*/jsx(Panel.Body, {
-      children: /*#__PURE__*/jsxs("div", {
+    }), /*#__PURE__*/jsxs(Panel.Body, {
+      className: classNames({
+        "pt-0": isSearchable
+      }),
+      children: [isSearchable && /*#__PURE__*/jsx(StickySidebarHeader, {
+        children: /*#__PURE__*/jsx(Input$1, {
+          "data-cy": "search-text-field",
+          placeholder: t("neetoRules.common.search"),
+          prefix: /*#__PURE__*/jsx(Search, {}),
+          value: searchTerm,
+          onChange: function onChange(e) {
+            return setSearchTerm(e.target.value);
+          },
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        })
+      }), /*#__PURE__*/jsxs("div", {
         className: "space-y-3",
-        children: [isNotEmpty(dropdownOptions) ? dropdownOptions.map(function (option) {
+        children: [isNotEmpty(searchedOptions) ? searchedOptions.map(function (option) {
           return /*#__PURE__*/createElement(Checkbox, {
             ref: ref,
             checked: eventNames === null || eventNames === void 0 ? void 0 : eventNames.includes(option.value),
@@ -4682,7 +4823,7 @@ var EventsPanel = function EventsPanel() {
           className: "neeto-ui-input__error",
           children: error
         })]
-      })
+      })]
     }), /*#__PURE__*/jsx(Panel.Footer, {
       children: /*#__PURE__*/jsx(Button, {
         "data-cy": "continue-button",
@@ -5207,7 +5348,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 = useTranslation(),
     t = _useTranslation.t;
   var _useFormikContext = useFormikContext(),
@@ -5219,10 +5361,12 @@ var ActionItem = function ActionItem(_ref) {
     setFieldActive = _useActiveField.setFieldActive;
   var _useUtilityStore = useUtilityStore(function (store) {
       return {
-        setPanelState: store["setPanelState"]
+        setPanelState: store["setPanelState"],
+        setErrorFields: store["setErrorFields"]
       };
     }, shallow),
-    setPanelState = _useUtilityStore.setPanelState;
+    setPanelState = _useUtilityStore.setPanelState,
+    setErrorFields = _useUtilityStore.setErrorFields;
   var _useUtilityStore2 = useUtilityStore(function (store) {
       var _store$panelState;
       return {
@@ -5280,7 +5424,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({
@@ -5308,7 +5453,24 @@ var ActionItem = function ActionItem(_ref) {
         })
       });
     });
-  }, [selectedField]);
+  }, [selectedField === null || selectedField === void 0 ? void 0 : selectedField.value]);
+  var hasError = !!errorMessage;
+  useEffect(function () {
+    if (hasError) {
+      setErrorFields(function (prev) {
+        return prev.includes(name) ? prev : [].concat(_toConsumableArray(prev), [name]);
+      });
+    } else {
+      setErrorFields(function (prev) {
+        return prev.filter(isNot(name));
+      });
+    }
+    return function () {
+      setErrorFields(function (prev) {
+        return prev.filter(isNot(name));
+      });
+    };
+  }, [hasError, name, setErrorFields]);
   return /*#__PURE__*/jsx("div", {
     className: "flex flex-grow min-w-0 flex-wrap gap-x-1 gap-y-3",
     children: /*#__PURE__*/jsxs("div", {
@@ -5324,7 +5486,7 @@ var ActionItem = function ActionItem(_ref) {
         style: "link",
         className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
           "neeto-ui-text-accent-800": isFieldActive,
-          "neeto-ui-text-error-500": isActionSelected
+          "neeto-ui-text-error-500": isActionSelected || !!errorMessage
         }),
         onClick: handleOnClick
       }), /*#__PURE__*/jsx(ActionSubItem$1, _objectSpread$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, panelData), {}, {
@@ -5427,6 +5589,7 @@ var Actions = function Actions(_ref) {
               children: [/*#__PURE__*/jsx(ActionItem$1, {
                 action: action,
                 elementProps: elementProps,
+                handleSlackChannelRefresh: handleSlackChannelRefresh,
                 index: index,
                 onSelectAction: onSelectAction,
                 routeToSlackIntegration: routeToSlackIntegration,
@@ -5437,18 +5600,7 @@ var Actions = function Actions(_ref) {
                 parentName: name
               }), /*#__PURE__*/jsxs("div", {
                 className: "flex flex-wrap flex-shrink-0 self-center",
-                children: [handleSlackChannelRefresh && action.name === "message_to_slack" && /*#__PURE__*/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__*/jsx(Button, {
+                children: [showButton && index === actions.length - 1 && /*#__PURE__*/jsx(Button, {
                   "data-cy": "add-action-button",
                   icon: Plus,
                   size: "medium",
@@ -5629,7 +5781,7 @@ var ConditionItem = function ConditionItem(_ref) {
         })
       });
     });
-  }, [selectedField, condition.verb]);
+  }, [selectedField === null || selectedField === void 0 ? void 0 : selectedField.value, condition.verb]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [!!index && /*#__PURE__*/jsx(LogicalOperator, {
       handleGroupJoinType: handleGroupJoinType,
@@ -5993,12 +6145,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) {
@@ -6223,7 +6369,7 @@ var InputField = function InputField(_ref) {
     _useDebouncedUpdate2 = _slicedToArray(_useDebouncedUpdate, 2),
     text = _useDebouncedUpdate2[0],
     setText = _useDebouncedUpdate2[1];
-  return /*#__PURE__*/jsx(Input$1, _objectSpread$7(_objectSpread$7({
+  return /*#__PURE__*/jsx(Input$2, _objectSpread$7(_objectSpread$7({
     className: "mb-4",
     label: label || (elementProps === null || elementProps === void 0 ? void 0 : elementProps.label)
   }, field), {}, {
@@ -6610,10 +6756,12 @@ var Form = function Form(_ref) {
     customData = _useCustomDataStore.customData;
   var _useUtilityStore = useUtilityStore(function (store) {
       return {
-        resetPanelState: store["resetPanelState"]
+        resetPanelState: store["resetPanelState"],
+        errorFields: store["errorFields"]
       };
     }, shallow),
-    resetPanelState = _useUtilityStore.resetPanelState;
+    resetPanelState = _useUtilityStore.resetPanelState,
+    errorFields = _useUtilityStore.errorFields;
   var initialValues = useMemo(function () {
     return formatData(data);
   }, [data]);
@@ -6633,6 +6781,10 @@ var Form = function Form(_ref) {
     };
   }, []);
   var submitForm = function submitForm(values, formikBag) {
+    if (isNotEmpty(errorFields)) {
+      formikBag.setSubmitting(false);
+      return;
+    }
     if (isCancelledNameGeneration) {
       saveRuleName(values);
       return;