@bigbinary/neeto-rules-frontend 2.7.9 → 2.7.11

package/dist/{index-BHLJ3lzS.js → index-CqnO-IZF.js}

@@ -8,7 +8,7 @@ var _typeof = require('@babel/runtime/helpers/typeof');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var useAutomationRulesApi = require('./useAutomationRulesApi-C1T2E1AN.js');
-var keyboardShortcuts = require('./keyboardShortcuts-Dg7lUOmj.js');
+var keyboardShortcuts = require('./keyboardShortcuts-5radhjgX.js');
 var ramda = require('ramda');
 var i18next = require('i18next');
 var yup = require('yup');
@@ -107,6 +107,17 @@ var ScrollToErrorField = function ScrollToErrorField(_ref) {
   return null;
 };
 
+var DEFAULT_LONG_TEXT_ROWS = 8;
+
+// Atoms puts leading-none on option labels, which suits short options but
+// leaves panel options — full sentences that regularly wrap — with no leading
+// at all on their second line.
+var PANEL_OPTION_LABEL_CLASSES = "[&_label]:leading-normal";
+
+// A vertical RadioGroup also defaults to an 8px gap, too tight to scan once the
+// options wrap. Checkbox lists space themselves and only need the label fix.
+var PANEL_RADIO_GROUP_CLASSES = "data-[orientation=vertical]:gap-3 ".concat(PANEL_OPTION_LABEL_CLASSES);
+
 var Body = function Body(_ref) {
   var children = _ref.children,
     className = _ref.className;
@@ -437,8 +448,9 @@ var ActionPanel = function ActionPanel() {
           variant: "h5",
           children: [label, "..."]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          color: "muted",
           "data-testid": "action-description",
-          variant: "body1",
+          variant: "body3",
           children: t("neetoRules.form.addActionDescription")
         })]
       })
@@ -464,6 +476,7 @@ var ActionPanel = function ActionPanel() {
         })]
       }), neetoCist.isNotEmpty(searchedOptions) ? /*#__PURE__*/jsxRuntime.jsx(formik$1.RadioGroup, {
         ref: ref,
+        className: PANEL_RADIO_GROUP_CLASSES,
         name: "".concat(name, ".name"),
         orientation: "vertical",
         value: selectedField === null || selectedField === void 0 ? void 0 : selectedField.value,
@@ -493,8 +506,6 @@ var ActionPanel = function ActionPanel() {
   });
 };
 
-var DEFAULT_LONG_TEXT_ROWS = 8;
-
 var Target$k = function Target(_ref) {
   var _errors$actions, _touched$actions, _selectedField$separa;
   var index = _ref.index,
@@ -1416,13 +1427,30 @@ var SelectField$1 = function SelectField(_ref2) {
     setValue(value !== null && value !== void 0 ? value : null);
     setTouched(true);
   };
+  var formatOptionLabel = function formatOptionLabel(_ref3) {
+    var label = _ref3.label,
+      isPrivate = _ref3.isPrivate;
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-between gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        children: label
+      }), isPrivate && /*#__PURE__*/jsxRuntime.jsx(lucideReact.Lock, {
+        "aria-label": t("neetoRules.slack.private"),
+        className: "text-muted-foreground shrink-0",
+        role: "img",
+        size: 14
+      })]
+    });
+  };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-start gap-2",
-    children: [/*#__PURE__*/jsxRuntime.jsx(formik$1.Select, _objectSpread$c(_objectSpread$c({}, _objectSpread$c({
+    children: [/*#__PURE__*/jsxRuntime.jsx(formik$1.Select, _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({
       className: className,
       name: name,
       required: required
-    }, otherProps)), {}, {
+    }, otherProps), {}, {
+      formatOptionLabel: formatOptionLabel
+    })), {}, {
       innerRef: ref,
       label: defaultLabel,
       options: dropdownOptions,
@@ -2074,7 +2102,7 @@ var MultiSelectCheckbox$1 = function MultiSelectCheckbox(_ref2) {
   };
   var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || t("neetoRules.labels.selectValues");
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "space-y-3",
+    className: classNames("space-y-3", PANEL_OPTION_LABEL_CLASSES),
     children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
       required: required,
       children: defaultLabel
@@ -3136,8 +3164,9 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
             children: header
           })]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          color: "muted",
           "data-testid": "action-sub-item-description",
-          variant: "body1",
+          variant: "body3",
           children: t("neetoRules.form.addActionSubItemDescription")
         })]
       })
@@ -3520,7 +3549,7 @@ var MultiSelectCheckbox = function MultiSelectCheckbox(_ref2) {
   };
   var defaultLabel = t("neetoRules.labels.selectValues");
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "space-y-3",
+    className: classNames("space-y-3", PANEL_OPTION_LABEL_CLASSES),
     children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
       required: required,
       children: defaultLabel
@@ -3777,6 +3806,7 @@ var RadioField = function RadioField(_ref2) {
     }), neetoCist.isNotEmpty(searchedOptions) ? /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.RadioGroup, _objectSpread$4(_objectSpread$4({
       ref: ref,
       required: required,
+      className: PANEL_RADIO_GROUP_CLASSES,
       label: showLabel && t("neetoRules.labels.selectValue"),
       orientation: "vertical",
       value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value,
@@ -4034,8 +4064,9 @@ var FieldPanel = function FieldPanel() {
           variant: "h5",
           children: [index ? logicalOperatorLabel : conditionLabel, "..."]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          color: "muted",
           "data-testid": "condition-description",
-          variant: "body1",
+          variant: "body3",
           children: t("neetoRules.form.addConditionDescription")
         })]
       })
@@ -4278,8 +4309,9 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
             children: [index ? logicalOperatorLabel : conditionLabel, " ", fieldLabel, "..."]
           })]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          color: "muted",
           "data-testid": "condition-verb-and-value-description",
-          variant: "body1",
+          variant: "body3",
           children: t("neetoRules.form.addConditionVerbAndValueDescription")
         })]
       })
@@ -4365,7 +4397,8 @@ var DelayPanel = function DelayPanel() {
           variant: "h5",
           children: t("neetoRules.common.addDelay")
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-          variant: "body1",
+          color: "muted",
+          variant: "body3",
           children: t("neetoRules.helpText.addDelay")
         })]
       })
@@ -4618,8 +4651,9 @@ var EventsPanel = function EventsPanel() {
           variant: "h5",
           children: [t("neetoRules.common.when"), "..."]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          color: "muted",
           "data-testid": "event-description",
-          variant: "body1",
+          variant: "body3",
           children: t("neetoRules.form.addEventDescription")
         })]
       })
@@ -4641,8 +4675,9 @@ var EventsPanel = function EventsPanel() {
           }
         })
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "space-y-3",
+        className: classNames("space-y-3", PANEL_OPTION_LABEL_CLASSES),
         children: [neetoCist.isNotEmpty(searchedOptions) ? singleSelect ? /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.RadioGroup, {
+          className: PANEL_RADIO_GROUP_CLASSES,
           orientation: "vertical",
           value: (eventNames === null || eventNames === void 0 ? void 0 : eventNames[0]) || "",
           onValueChange: handleRadioChange,
@@ -4777,14 +4812,16 @@ var PerformerPanel = function PerformerPanel() {
             children: [t("neetoRules.form.actionTriggeredBy"), "..."]
           })]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          color: "muted",
           "data-testid": "performer-description",
-          variant: "body1",
+          variant: "body3",
           children: t("neetoRules.form.addPerformerDescription")
         })]
       })
     }), /*#__PURE__*/jsxRuntime.jsx(Panel.Body, {
       children: /*#__PURE__*/jsxRuntime.jsx(formik$1.RadioGroup, {
         ref: ref,
+        className: PANEL_RADIO_GROUP_CLASSES,
         disabled: isMenuDisabled,
         name: "".concat(performerName, ".value"),
         orientation: "vertical",
@@ -5383,4 +5420,4 @@ exports.getSlackChannelErrors = getSlackChannelErrors;
 exports.getValidationSchema = getValidationSchema;
 exports.getVerbOptions = getVerbOptions;
 exports.usePollRuleName = usePollRuleName;
-//# sourceMappingURL=index-BHLJ3lzS.js.map
+//# sourceMappingURL=index-CqnO-IZF.js.map