@bigbinary/neeto-webhooks-frontend 3.0.8 → 3.0.10

package/dist/NeetoWebhooks.js

@@ -24,13 +24,13 @@ import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
 import Button from '@bigbinary/neetoui/Button';
 import Pane from '@bigbinary/neetoui/Pane';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useRef, useEffect, memo, useCallback } from 'react';
+import { useState, useRef, useMemo, useEffect, memo, useCallback } from 'react';
 import Typography from '@bigbinary/neetoui/Typography';
 import Tab from '@bigbinary/neetoui/Tab';
 import Tag from '@bigbinary/neetoui/Tag';
 import { t as t$1 } from 'i18next';
 import Alert from '@bigbinary/neetoui/Alert';
-import { FieldArray } from 'formik';
+import { FieldArray, ErrorMessage } from 'formik';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
@@ -634,13 +634,15 @@ var WEBHOOK_INITIAL_VALUES = {
 var EventCheckbox = function EventCheckbox(_ref) {
   var events = _ref.events,
     values = _ref.values,
-    arrayHelpers = _ref.arrayHelpers;
+    arrayHelpers = _ref.arrayHelpers,
+    onEventsChange = _ref.onEventsChange;
   var handleToggle = function handleToggle(isSelected, index, event) {
     if (isSelected) {
       arrayHelpers.remove(index);
     } else {
       arrayHelpers.push(event);
     }
+    onEventsChange === null || onEventsChange === void 0 || onEventsChange();
   };
   return /*#__PURE__*/jsx("div", {
     children: events.map(function (event) {
@@ -781,7 +783,7 @@ var getValidationSchema = function getValidationSchema(webhooks) {
     endpoint: yup.string().trim().matches(/^(https?):\/\//i, t$1("neetoWebhooks.errors.webhook.invalidUrlProtocol")).url(t$1("neetoWebhooks.errors.webhook.invalidUrl")).required(t$1("neetoWebhooks.errors.webhook.required")).test("Is endpoint unique", t$1("neetoWebhooks.errors.webhook.urlNotUnique"), function (endpoint, ctx) {
       return !pluck("endpoint", removeById(ctx.parent.id, webhooks)).includes(endpoint === null || endpoint === void 0 ? void 0 : endpoint.trim());
     }),
-    events: yup.array().min(1, t$1("neetoWebhooks.errors.webhook.events.required")),
+    events: yup.array()["default"]([]).min(1, t$1("neetoWebhooks.errors.webhook.events.required")),
     secret: yup.string().trim().nullable()
   });
 };
@@ -982,9 +984,13 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     _useFetchEvents$data = _useFetchEvents.data,
     events = _useFetchEvents$data === void 0 ? [] : _useFetchEvents$data,
     isLoading = _useFetchEvents.isLoading;
-  var initialValues = editingWebhookId ? _objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), webhook) : _objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), {}, {
-    events: events
-  });
+  var initialValues = useMemo(function () {
+    return editingWebhookId ? _objectSpread$1(_objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), webhook), {}, {
+      events: Array.isArray(webhook === null || webhook === void 0 ? void 0 : webhook.events) ? webhook === null || webhook === void 0 ? void 0 : webhook.events : []
+    }) : _objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), {}, {
+      events: events
+    });
+  }, [editingWebhookId, webhook, events]);
   var isWebhookExpiredOrDeprecated = editingWebhookId && (webhook.versionExpired || webhook.versionDeprecated);
   var handleSubmit = function handleSubmit(values) {
     // Check if webhook is expired or deprecated before allowing edit
@@ -1052,10 +1058,10 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       },
       children: function children(_ref2) {
         var setFieldValue = _ref2.setFieldValue,
+          setFieldTouched = _ref2.setFieldTouched,
           values = _ref2.values,
-          touched = _ref2.touched,
-          errors = _ref2.errors,
-          isValid = _ref2.isValid;
+          isValid = _ref2.isValid,
+          dirty = _ref2.dirty;
         return isLoading ? /*#__PURE__*/jsx("div", {
           className: "flex items-center justify-center",
           children: /*#__PURE__*/jsx(Spinner, {})
@@ -1128,19 +1134,25 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                 children: [/*#__PURE__*/jsx(Label, {
                   required: true,
                   children: t("neetoWebhooks.common.event", PLURAL)
-                }), !isLoading && /*#__PURE__*/jsx(FieldArray, {
+                }), /*#__PURE__*/jsx(FieldArray, {
                   name: "events",
                   render: function render(arrayHelpers) {
-                    return /*#__PURE__*/jsxs("div", {
-                      children: [/*#__PURE__*/jsx(EventCheckbox, {
-                        arrayHelpers: arrayHelpers,
-                        events: events,
-                        values: values
-                      }), touched.events && errors.events && /*#__PURE__*/jsx("div", {
-                        className: "neeto-ui-text-error-800 text-xs mt-1",
-                        "data-testid": "event-error-text",
-                        children: errors.events
-                      })]
+                    return /*#__PURE__*/jsx(EventCheckbox, {
+                      arrayHelpers: arrayHelpers,
+                      events: events,
+                      values: values,
+                      onEventsChange: function onEventsChange() {
+                        return setFieldTouched("events", true);
+                      }
+                    });
+                  }
+                }), /*#__PURE__*/jsx(ErrorMessage, {
+                  name: "events",
+                  render: function render(msg) {
+                    return /*#__PURE__*/jsx("div", {
+                      className: "neeto-ui-text-error-800 text-xs mt-1",
+                      "data-testid": "event-error-text",
+                      children: msg
                     });
                   }
                 })]
@@ -1152,7 +1164,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                 onClick: onClose
               },
               submitButtonProps: {
-                disabled: isWebhookExpiredOrDeprecated || !isValid
+                disabled: isWebhookExpiredOrDeprecated || !isValid || editingWebhookId && !dirty
               }
             })
           })]