@bigbinary/neeto-webhooks-frontend 1.6.13 → 1.6.15

package/app/javascript/src/translations/en.json

@@ -48,6 +48,7 @@
     "webhook": {
       "title": "Webhooks",
       "description": "All new action event details will be posted to the configured webhook URLs",
+      "helpDescription": "Receive a webhook when the specified events take place.",
       "empty": "There are no webhooks defined currently",
       "add": "Add new webhook",
       "endpoint": "Endpoint",
@@ -55,7 +56,10 @@
       "event_other": "Events",
       "endpointPlaceholder": "Enter endpoint URL",
       "eventPlaceholder": "Select webhook events",
-      "secret": "Secret key (optional) <helpLink><info></helpLink>",
+      "secret": "Secret key (optional)",
+      "secretkeyHelpTitle": "Securing webhook requests",
+      "secretkeyHelpDescription": "Adding a secret key will help you to verify that the webhook request was actually sent from neeto.",
+
       "secretPlaceholder": "Enter secret key",
       "edit": "Edit Webhook",
       "active": "Active",

package/dist/index.cjs.js

@@ -6,6 +6,7 @@ var React = require('react');
 var reactRouterDom = require('react-router-dom');
 var neetoCist = require('@bigbinary/neeto-cist');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var Header$2 = require('@bigbinary/neeto-molecules/Header');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
@@ -19,9 +20,9 @@ var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
 var i18next = require('i18next');
 var ramda = require('ramda');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var formik = require('@bigbinary/neetoui/formik');
-var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var yup = require('yup');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -51,12 +52,16 @@ var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var DateFormat__default = /*#__PURE__*/_interopDefaultLegacy(DateFormat);
+var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 
 var getDeliveriesPath = function getDeliveriesPath(webhooksPath) {
   return "".concat(webhooksPath, "/:webhookId/deliveries");
 };
+var getDeliveryDetailsPath = function getDeliveryDetailsPath(deliveriesPath) {
+  return "".concat(deliveriesPath, "/:deliveryId/");
+};
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
@@ -191,7 +196,8 @@ var useShowDelivery = function useShowDelivery(id) {
   return reactQuery.useQuery([QUERY_KEYS.DELIVERY_DETAILS, id], function () {
     return deliveriesApi.show(id);
   }, {
-    staleTime: DELIVERY_STALE_TIME
+    staleTime: DELIVERY_STALE_TIME,
+    enabled: !!id
   });
 };
 var useRedeliverWebhook = function useRedeliverWebhook() {
@@ -606,30 +612,18 @@ var Snippet = function Snippet(_ref) {
 
 var TransactionDetails = function TransactionDetails(_ref) {
   var delivery = _ref.delivery;
-  var deliveryId = delivery.id,
-    status = delivery.status,
-    identifier = delivery.identifier,
-    responseStatusCode = delivery.responseStatusCode;
   var _useState = React.useState(DELIVERY_TAB.request),
     _useState2 = _slicedToArray(_useState, 2),
     activeHeader = _useState2[0],
     setActiveHeader = _useState2[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useShowDelivery = useShowDelivery(deliveryId),
-    isLoading = _useShowDelivery.isLoading,
-    _useShowDelivery$data = _useShowDelivery.data,
-    _useShowDelivery$data2 = _useShowDelivery$data === void 0 ? {} : _useShowDelivery$data,
-    _useShowDelivery$data3 = _useShowDelivery$data2.delivery,
-    deliveryDetails = _useShowDelivery$data3 === void 0 ? {} : _useShowDelivery$data3;
-  if (isLoading) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex w-full items-center justify-center py-6"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
-  }
+  var status = delivery.status,
+    identifier = delivery.identifier,
+    responseStatusCode = delivery.responseStatusCode;
   var renderPayload = function renderPayload() {
     try {
-      return JSON.stringify(JSON.parse(deliveryDetails.requestBody), null, 2);
+      return JSON.stringify(JSON.parse(delivery.requestBody), null, 2);
     } catch (_unused) {
       return "";
     }
@@ -670,7 +664,7 @@ var TransactionDetails = function TransactionDetails(_ref) {
     style: "h5"
   }, t("neetoWebhooks.delivery.header")), /*#__PURE__*/React__default["default"].createElement(Snippet, {
     dataCy: "delivery-request-header"
-  }, deliveryDetails.requestHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, delivery.requestHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h5"
   }, t("neetoWebhooks.delivery.payload")), /*#__PURE__*/React__default["default"].createElement(Snippet, {
     dataCy: "delivery-request-payload"
@@ -680,31 +674,33 @@ var TransactionDetails = function TransactionDetails(_ref) {
     style: "h5"
   }, t("neetoWebhooks.delivery.header")), /*#__PURE__*/React__default["default"].createElement(Snippet, {
     dataCy: "delivery-response-header"
-  }, deliveryDetails.responseHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, delivery.responseHeader)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h5"
   }, t("neetoWebhooks.delivery.body")), /*#__PURE__*/React__default["default"].createElement(Snippet, {
     dataCy: "delivery-response-body"
-  }, deliveryDetails.responseBody)))));
+  }, delivery.responseBody)))));
 };
 
 var Details = function Details(_ref) {
-  var delivery = _ref.delivery,
-    onClose = _ref.onClose;
-  var createdAt = delivery.createdAt,
-    id = delivery.id,
-    event = delivery.event;
+  var onClose = _ref.onClose,
+    deliveryId = _ref.deliveryId;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useRedeliverWebhook = useRedeliverWebhook(),
     isRedelivering = _useRedeliverWebhook.isLoading,
     redeliverWebhook = _useRedeliverWebhook.mutateAsync;
+  var _useShowDelivery = useShowDelivery(deliveryId),
+    isLoading = _useShowDelivery.isLoading,
+    _useShowDelivery$data = _useShowDelivery.data,
+    _useShowDelivery$data2 = _useShowDelivery$data === void 0 ? {} : _useShowDelivery$data,
+    delivery = _useShowDelivery$data2.delivery;
   var handleRedeliverClick = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.next = 2;
-            return redeliverWebhook(id);
+            return redeliverWebhook(deliveryId);
           case 2:
           case "end":
             return _context.stop();
@@ -715,12 +711,15 @@ var Details = function Details(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  if (neetoCist.isNotPresent(delivery)) {
+    return null;
+  }
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
-    isOpen: neetoCist.isPresent(delivery),
-    size: "large",
-    onClose: onClose
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Date, {
-    date: createdAt,
+    onClose: onClose,
+    isOpen: neetoCist.isPresent(deliveryId),
+    size: "large"
+  }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Date, {
+    date: delivery.createdAt,
     tooltipProps: {
       disabled: true
     },
@@ -729,7 +728,7 @@ var Details = function Details(_ref) {
       weight: "semibold"
     }
   }), /*#__PURE__*/React__default["default"].createElement("span", null, " \u2022 "), /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Time, {
-    date: createdAt,
+    date: delivery.createdAt,
     tooltipProps: {
       disabled: true
     },
@@ -751,7 +750,7 @@ var Details = function Details(_ref) {
     label: t("neetoWebhooks.buttons.cancel"),
     style: "text",
     onClick: onClose
-  })));
+  })))));
 };
 
 var buildColumns$1 = function buildColumns(_ref) {
@@ -768,7 +767,7 @@ var buildColumns$1 = function buildColumns(_ref) {
         style: "link",
         weight: "semibold",
         onClick: function onClick() {
-          return handleDetailsClick(delivery);
+          return handleDetailsClick(delivery.sid);
         }
       }, delivery.identifier), delivery.redelivery && /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
         style: "info"
@@ -818,14 +817,16 @@ var Deliveries = function Deliveries(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     pageNumber = _useState2[0],
     setPageNumber = _useState2[1];
-  var _useState3 = React.useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedDelivery = _useState4[0],
-    setSelectedDelivery = _useState4[1];
+  var _useRouteMatch = reactRouterDom.useRouteMatch(),
+    deliveriesUrl = _useRouteMatch.url;
+  var history = reactRouterDom.useHistory();
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useParams = reactRouterDom.useParams(),
-    webhookId = _useParams.webhookId;
+    webhookId = _useParams.webhookId,
+    deliveryId = _useParams.deliveryId;
+  var deliveriesPath = getDeliveriesPath(webhooksUrl);
+  var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesUrl);
   var _useFetchDeliveries = useFetchDeliveries({
       sid: webhookId,
       page: pageNumber,
@@ -849,6 +850,16 @@ var Deliveries = function Deliveries(_ref) {
     link: window.location.pathname,
     text: endpoint
   }]);
+  var handleDetailsClick = function handleDetailsClick(sid) {
+    return history.push(utils.buildUrl(deliveryDetailsPath, {
+      deliveryId: sid
+    }));
+  };
+  var handleClose = function handleClose() {
+    history.push(utils.buildUrl(deliveriesPath, {
+      webhookId: webhookId
+    }));
+  };
   if (isLoading) return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
   return /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     className: "w-full"
@@ -860,26 +871,22 @@ var Deliveries = function Deliveries(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
     totalCount: totalCount,
     fixedHeight: true,
+    columnData: buildColumns$1({
+      handleDetailsClick: handleDetailsClick
+    }),
     currentPageNumber: pageNumber,
     defaultPageSize: constants.DEFAULT_PAGE_SIZE,
-    handlePageChange: function handlePageChange(page) {
-      return setPageNumber(page);
-    },
+    handlePageChange: setPageNumber,
     loading: isFetching,
-    rowData: deliveries,
-    columnData: buildColumns$1({
-      handleDetailsClick: setSelectedDelivery
-    })
+    rowData: deliveries
   })) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex h-full w-full items-center justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
     description: t("neetoWebhooks.delivery.empty.description"),
     title: t("neetoWebhooks.delivery.empty.title")
   })), /*#__PURE__*/React__default["default"].createElement(Details, {
-    delivery: selectedDelivery,
-    onClose: function onClose() {
-      return setSelectedDelivery({});
-    }
+    deliveryId: deliveryId,
+    onClose: handleClose
   }));
 };
 var Deliveries$1 = withReactQuery(Deliveries);
@@ -1280,19 +1287,18 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     onClose: onClose,
     initialFocusRef: endpointRef
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, {
-    className: "flex items-center space-x-3"
+    className: "flex items-center gap-x-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     "data-cy": "add-new-webhook-pane-header",
     style: "h2",
     weight: "semibold"
-  }, editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")), /*#__PURE__*/React__default["default"].createElement("a", {
-    href: WEBHOOK_HELP_URL,
-    rel: "noreferrer",
-    target: "_blank"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Info, {
-    className: "neeto-ui-text-primary-800 mt-0.5 cursor-pointer",
-    size: 20
-  }))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+  }, editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")), /*#__PURE__*/React__default["default"].createElement(HelpPopover__default["default"], {
+    description: t("neetoWebhooks.webhook.helpDescription"),
+    helpLinkProps: {
+      href: WEBHOOK_HELP_URL
+    },
+    title: t("neetoWebhooks.webhook.title")
+  })), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
     formikProps: {
       enableReinitialize: true,
       validationSchema: getValidationSchema(webhooks),
@@ -1332,20 +1338,15 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
       "data-cy": "secret-key-input-field",
       name: "secret",
-      label: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-        i18nKey: "neetoWebhooks.webhook.secret",
-        components: {
-          helpLink: /*#__PURE__*/React__default["default"].createElement("a", {
-            href: WEBHOOK_SECRETS_HELP_URL,
-            rel: "noreferrer",
-            target: "_blank"
-          }),
-          info: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Info, {
-            className: "neeto-ui-text-primary-800 mt-0.5 cursor-pointer",
-            size: 20
-          })
-        }
-      }),
+      label: /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "flex items-center gap-x-2"
+      }, t("neetoWebhooks.webhook.secret"), /*#__PURE__*/React__default["default"].createElement(HelpPopover__default["default"], {
+        helpLinkProps: {
+          href: WEBHOOK_SECRETS_HELP_URL
+        },
+        description: t("neetoWebhooks.webhook.secretkeyHelpDescription"),
+        title: t("neetoWebhooks.webhook.secretkeyHelpTitle")
+      })),
       placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mt-6"
@@ -1548,6 +1549,7 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
     webhooksPath = _useRouteMatch.path,
     webhooksUrl = _useRouteMatch.url;
   var deliveriesPath = getDeliveriesPath(webhooksUrl);
+  var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesPath);
   return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Switch, null, /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Route, {
     exact: true,
     path: webhooksPath,
@@ -1561,6 +1563,15 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
         onDelete: onDelete
       });
     }
+  }), /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Route, {
+    exact: true,
+    path: deliveryDetailsPath,
+    render: function render() {
+      return /*#__PURE__*/React__default["default"].createElement(Deliveries$1, {
+        breadcrumbs: breadcrumbs,
+        webhooksUrl: webhooksUrl
+      });
+    }
   }), /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Route, {
     component: function component() {
       return /*#__PURE__*/React__default["default"].createElement(Deliveries$1, {