@bigbinary/neeto-webhooks-frontend 2.2.12 → 2.2.14

package/dist/NeetoWebhooks.js

@@ -1,14 +1,15 @@
-import { prop, pluck, assoc, mergeRight } from 'ramda';
+import { prop, gt, pluck, assoc, mergeRight } from 'ramda';
 import { useRouteMatch, useHistory, useParams, Switch as Switch$1, Route } from 'react-router-dom';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { isPresent, removeBy, isNotEmpty, removeById, findBy } from '@bigbinary/neeto-cist';
+import { isPresent, removeBy, isNotEmpty, findIndexBy, removeById, findBy } from '@bigbinary/neeto-cist';
 import { DEFAULT_STALE_TIME, SINGULAR, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
 import { useQueryParams, useMutationWithInvalidation, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import Container from '@bigbinary/neeto-molecules/Container';
 import Header$2 from '@bigbinary/neeto-molecules/Header';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import NoData from '@bigbinary/neetoui/NoData';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import Table from '@bigbinary/neetoui/Table';
@@ -30,16 +31,18 @@ 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 Plus from '@bigbinary/neeto-icons/Plus';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
+import Label from '@bigbinary/neetoui/Label';
 import Input from '@bigbinary/neetoui/formik/Input';
 import Form from '@bigbinary/neetoui/formik/Form';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
-import Select from '@bigbinary/neetoui/formik/Select';
-import Switch from '@bigbinary/neetoui/formik/Switch';
 import Textarea from '@bigbinary/neetoui/formik/Textarea';
+import Checkbox from '@bigbinary/neetoui/Checkbox';
 import * as yup from 'yup';
+import Switch from '@bigbinary/neetoui/Switch';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
 
 var HELP_LINK_URLS = {
@@ -451,7 +454,6 @@ var Deliveries = function Deliveries(_ref) {
     isFetching = _useFetchDeliveries.isFetching,
     _useFetchDeliveries$d = _useFetchDeliveries.data,
     _useFetchDeliveries$d2 = _useFetchDeliveries$d === void 0 ? {} : _useFetchDeliveries$d,
-    endpoint = _useFetchDeliveries$d2.endpoint,
     totalCount = _useFetchDeliveries$d2.totalCount,
     _useFetchDeliveries$d3 = _useFetchDeliveries$d2.deliveries,
     deliveries = _useFetchDeliveries$d3 === void 0 ? [] : _useFetchDeliveries$d3;
@@ -463,13 +465,10 @@ var Deliveries = function Deliveries(_ref) {
     text: t("neetoWebhooks.webhook.title")
   }, {
     link: window.location.pathname,
-    text: endpoint
+    text: t("neetoWebhooks.delivery.title")
   }]);
   if (isLoading) {
-    return /*#__PURE__*/jsx("div", {
-      className: "flex h-full w-full items-center justify-center",
-      children: /*#__PURE__*/jsx(Spinner, {})
-    });
+    return /*#__PURE__*/jsx(PageLoader, {});
   }
   return /*#__PURE__*/jsxs(Container, {
     className: "w-full",
@@ -498,7 +497,7 @@ var Deliveries = function Deliveries(_ref) {
         rowData: deliveries
       })
     }) : /*#__PURE__*/jsx("div", {
-      className: "flex h-full w-full items-center justify-center",
+      className: "flex justify-center items-center w-full h-full",
       children: /*#__PURE__*/jsx(NoData, {
         description: t("neetoWebhooks.delivery.empty.description"),
         title: t("neetoWebhooks.delivery.empty.title")
@@ -614,6 +613,44 @@ var useFetchEvents = function useFetchEvents() {
   });
 };
 
+var MENU_ITEMS = {
+  EDIT: "edit",
+  DELETE: "delete"
+};
+var WEBHOOK_INITIAL_VALUES = {
+  endpoint: "",
+  events: [],
+  secret: "",
+  isActive: true
+};
+
+var EventCheckbox = function EventCheckbox(_ref) {
+  var events = _ref.events,
+    values = _ref.values,
+    arrayHelpers = _ref.arrayHelpers;
+  var handleToggle = function handleToggle(isSelected, index, event) {
+    if (isSelected) {
+      arrayHelpers.remove(index);
+    } else {
+      arrayHelpers.push(event);
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    children: events.map(function (event) {
+      var index = findIndexBy(event, values.events);
+      var isSelected = gt(index, -1);
+      return /*#__PURE__*/jsx(Checkbox, {
+        checked: isSelected,
+        className: "my-4",
+        label: event.label,
+        onChange: function onChange() {
+          return handleToggle(isSelected, index, event);
+        }
+      }, event.identifier);
+    })
+  });
+};
+
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
@@ -678,9 +715,29 @@ function v4(options, buf, offset) {
   return stringify(rnds);
 }
 
-var MENU_ITEMS = {
-  EDIT: "edit",
-  DELETE: "delete"
+var ToggleActiveSwitch = function ToggleActiveSwitch(_ref) {
+  var isActive = _ref.isActive,
+    webhookId = _ref.webhookId;
+  var _useState = useState(isActive),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useUpdateWebhook = useUpdateWebhook(webhookId),
+    updateWebhook = _useUpdateWebhook.mutate;
+  var handleToggle = function handleToggle(event) {
+    var updatedStatus = event.target.checked;
+    setStatus(updatedStatus);
+    updateWebhook({
+      id: webhookId,
+      payload: {
+        isActive: updatedStatus
+      }
+    });
+  };
+  return /*#__PURE__*/jsx(Switch, {
+    checked: status,
+    onChange: handleToggle
+  });
 };
 
 function ownKeys$2(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; }
@@ -776,13 +833,10 @@ var buildColumns = function buildColumns(_ref6) {
     title: t$1("neetoWebhooks.webhook.active"),
     key: "isActive",
     dataIndex: "isActive",
-    render: function render(isActive) {
-      return isActive ? /*#__PURE__*/jsx(Tag, {
-        label: t$1("neetoWebhooks.webhook.activeStatuses.active"),
-        style: "primary"
-      }) : /*#__PURE__*/jsx(Tag, {
-        label: t$1("neetoWebhooks.webhook.activeStatuses.inactive"),
-        style: "danger"
+    render: function render(isActive, webhook) {
+      return /*#__PURE__*/jsx(ToggleActiveSwitch, {
+        isActive: isActive,
+        webhookId: webhook.id
       });
     },
     width: 150
@@ -791,7 +845,10 @@ var buildColumns = function buildColumns(_ref6) {
     dataIndex: "events",
     key: "events",
     render: function render(events) {
-      return pluck("label", events).sort().join(", ");
+      return /*#__PURE__*/jsx("span", {
+        className: "whitespace-normal",
+        children: pluck("label", events).sort().join(", ")
+      });
     },
     width: 300
   }];
@@ -838,12 +895,9 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
   var _useFetchEvents = useFetchEvents(),
     events = _useFetchEvents.data,
     isLoading = _useFetchEvents.isLoading;
-  var initialValues = editingWebhookId ? webhook : {
-    endpoint: "",
-    events: events,
-    secret: "",
-    isActive: true
-  };
+  var initialValues = editingWebhookId ? _objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), webhook) : _objectSpread$1(_objectSpread$1({}, WEBHOOK_INITIAL_VALUES), {}, {
+    events: events
+  });
   var handleSubmit = function handleSubmit(values) {
     var payload = buildPayload({
       isEditing: editingWebhookId,
@@ -906,7 +960,9 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       },
       children: function children(_ref2) {
         var setFieldValue = _ref2.setFieldValue,
-          values = _ref2.values;
+          values = _ref2.values,
+          touched = _ref2.touched,
+          errors = _ref2.errors;
         return isLoading ? /*#__PURE__*/jsx("div", {
           className: "flex items-center justify-center",
           children: /*#__PURE__*/jsx(Spinner, {})
@@ -923,18 +979,9 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                 placeholder: t("neetoWebhooks.webhook.endpointPlaceholder"),
                 ref: endpointRef,
                 rows: 1
-              }), !isLoading && /*#__PURE__*/jsx(Select, {
-                isMulti: true,
-                required: true,
-                getOptionLabel: prop("label"),
-                getOptionValue: prop("identifier"),
-                label: t("neetoWebhooks.common.event", PLURAL),
-                name: "events",
-                options: events,
-                placeholder: t("neetoWebhooks.webhook.eventPlaceholder")
               }), /*#__PURE__*/jsxs("div", {
                 className: "space-y-2",
-                children: [/*#__PURE__*/jsxs("span", {
+                children: [/*#__PURE__*/jsxs(Label, {
                   className: "flex items-center gap-x-2",
                   children: [t("neetoWebhooks.webhook.secret"), /*#__PURE__*/jsx(HelpPopover, {
                     helpLinkProps: {
@@ -980,15 +1027,24 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                   }
                 })]
               }), /*#__PURE__*/jsxs("div", {
-                className: "flex gap-2",
-                children: [/*#__PURE__*/jsx(Switch, {
-                  label: t("neetoWebhooks.webhook.active"),
-                  name: "isActive"
-                }), /*#__PURE__*/jsx(HelpPopover, {
-                  popoverProps: {
-                    position: "bottom"
-                  },
-                  description: values.isActive ? t("neetoWebhooks.webhook.statusActiveHelpDescription") : t("neetoWebhooks.webhook.statusInactiveHelpDescription")
+                className: "space-y-2",
+                children: [/*#__PURE__*/jsx(Label, {
+                  required: true,
+                  children: t("neetoWebhooks.common.event", PLURAL)
+                }), !isLoading && /*#__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",
+                        children: errors.events
+                      })]
+                    });
+                  }
                 })]
               })]
             })
@@ -1117,10 +1173,7 @@ var Webhooks = function Webhooks(_ref) {
     setIsDeleteAlertOpen(true);
   }, []);
   if (isLoading) {
-    return /*#__PURE__*/jsx("div", {
-      className: "flex h-full w-full items-center justify-center",
-      children: /*#__PURE__*/jsx(Spinner, {})
-    });
+    return /*#__PURE__*/jsx(PageLoader, {});
   }
   return /*#__PURE__*/jsxs(Container, {
     className: containerClassName,
@@ -1148,7 +1201,7 @@ var Webhooks = function Webhooks(_ref) {
         })
       })
     }) : /*#__PURE__*/jsx("div", {
-      className: "flex h-full w-full items-center justify-center",
+      className: "flex justify-center items-center w-full h-full",
       children: /*#__PURE__*/jsx(NoData, {
         title: t("neetoWebhooks.webhook.empty"),
         helpText: /*#__PURE__*/jsx(Button, {