@bigbinary/neeto-webhooks-frontend 1.6.13 → 1.6.15

package/dist/index.js

@@ -1,28 +1,32 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { useParams, useRouteMatch, Switch as Switch$1, Route } from 'react-router-dom';
-import { isPresent, removeBy, isNotEmpty, removeById, findBy } from '@bigbinary/neeto-cist';
+import { useRouteMatch, useHistory, useParams, Switch as Switch$1, Route } from 'react-router-dom';
+import { isNotPresent, isPresent, removeBy, isNotEmpty, removeById, findBy } from '@bigbinary/neeto-cist';
 import { DEFAULT_STALE_TIME, SINGULAR, DEFAULT_PAGE_SIZE, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
+import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import Container from '@bigbinary/neeto-molecules/Container';
 import Header$2 from '@bigbinary/neeto-molecules/Header';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
-import { Spinner, Typography, Tag, Tab, Pane, Button, Table, NoData, Alert } from '@bigbinary/neetoui';
-import { useTranslation, Trans } from 'react-i18next';
+import { Typography, Tag, Tab, Pane, Button, Table, NoData, Spinner, Alert } from '@bigbinary/neetoui';
+import { useTranslation } from 'react-i18next';
 import { QueryClient, QueryCache, QueryClientProvider, useQuery, useQueryClient, useMutation } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import axios from 'axios';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
 import { t as t$1 } from 'i18next';
 import { prop, pluck, assoc } from 'ramda';
-import { Info, Plus } from '@bigbinary/neeto-icons';
+import { Plus } from '@bigbinary/neeto-icons';
+import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import { Form, Textarea, Select, Input, Switch, ActionBlock } from '@bigbinary/neetoui/formik';
-import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import * as yup from '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;
@@ -157,7 +161,8 @@ var useShowDelivery = function useShowDelivery(id) {
   return 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() {
@@ -572,30 +577,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 = useState(DELIVERY_TAB.request),
     _useState2 = _slicedToArray(_useState, 2),
     activeHeader = _useState2[0],
     setActiveHeader = _useState2[1];
   var _useTranslation = 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.createElement("div", {
-      className: "flex w-full items-center justify-center py-6"
-    }, /*#__PURE__*/React.createElement(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 "";
     }
@@ -636,7 +629,7 @@ var TransactionDetails = function TransactionDetails(_ref) {
     style: "h5"
   }, t("neetoWebhooks.delivery.header")), /*#__PURE__*/React.createElement(Snippet, {
     dataCy: "delivery-request-header"
-  }, deliveryDetails.requestHeader)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+  }, delivery.requestHeader)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
     style: "h5"
   }, t("neetoWebhooks.delivery.payload")), /*#__PURE__*/React.createElement(Snippet, {
     dataCy: "delivery-request-payload"
@@ -646,31 +639,33 @@ var TransactionDetails = function TransactionDetails(_ref) {
     style: "h5"
   }, t("neetoWebhooks.delivery.header")), /*#__PURE__*/React.createElement(Snippet, {
     dataCy: "delivery-response-header"
-  }, deliveryDetails.responseHeader)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+  }, delivery.responseHeader)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
     style: "h5"
   }, t("neetoWebhooks.delivery.body")), /*#__PURE__*/React.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 = 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();
@@ -681,12 +676,15 @@ var Details = function Details(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  if (isNotPresent(delivery)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(Pane, {
-    isOpen: isPresent(delivery),
-    size: "large",
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DateFormat.Date, {
-    date: createdAt,
+    onClose: onClose,
+    isOpen: isPresent(deliveryId),
+    size: "large"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DateFormat.Date, {
+    date: delivery.createdAt,
     tooltipProps: {
       disabled: true
     },
@@ -695,7 +693,7 @@ var Details = function Details(_ref) {
       weight: "semibold"
     }
   }), /*#__PURE__*/React.createElement("span", null, " \u2022 "), /*#__PURE__*/React.createElement(DateFormat.Time, {
-    date: createdAt,
+    date: delivery.createdAt,
     tooltipProps: {
       disabled: true
     },
@@ -717,7 +715,7 @@ var Details = function Details(_ref) {
     label: t("neetoWebhooks.buttons.cancel"),
     style: "text",
     onClick: onClose
-  })));
+  })))));
 };
 
 var buildColumns$1 = function buildColumns(_ref) {
@@ -734,7 +732,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.createElement(Tag, {
         style: "info"
@@ -784,14 +782,16 @@ var Deliveries = function Deliveries(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     pageNumber = _useState2[0],
     setPageNumber = _useState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedDelivery = _useState4[0],
-    setSelectedDelivery = _useState4[1];
+  var _useRouteMatch = useRouteMatch(),
+    deliveriesUrl = _useRouteMatch.url;
+  var history = useHistory();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useParams = 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,
@@ -815,6 +815,16 @@ var Deliveries = function Deliveries(_ref) {
     link: window.location.pathname,
     text: endpoint
   }]);
+  var handleDetailsClick = function handleDetailsClick(sid) {
+    return history.push(buildUrl(deliveryDetailsPath, {
+      deliveryId: sid
+    }));
+  };
+  var handleClose = function handleClose() {
+    history.push(buildUrl(deliveriesPath, {
+      webhookId: webhookId
+    }));
+  };
   if (isLoading) return /*#__PURE__*/React.createElement(PageLoader, null);
   return /*#__PURE__*/React.createElement(Container, {
     className: "w-full"
@@ -826,26 +836,22 @@ var Deliveries = function Deliveries(_ref) {
   }, /*#__PURE__*/React.createElement(Table, {
     totalCount: totalCount,
     fixedHeight: true,
+    columnData: buildColumns$1({
+      handleDetailsClick: handleDetailsClick
+    }),
     currentPageNumber: pageNumber,
     defaultPageSize: 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.createElement("div", {
     className: "flex h-full w-full items-center justify-center"
   }, /*#__PURE__*/React.createElement(NoData, {
     description: t("neetoWebhooks.delivery.empty.description"),
     title: t("neetoWebhooks.delivery.empty.title")
   })), /*#__PURE__*/React.createElement(Details, {
-    delivery: selectedDelivery,
-    onClose: function onClose() {
-      return setSelectedDelivery({});
-    }
+    deliveryId: deliveryId,
+    onClose: handleClose
   }));
 };
 var Deliveries$1 = withReactQuery(Deliveries);
@@ -1246,19 +1252,18 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     onClose: onClose,
     initialFocusRef: endpointRef
   }, /*#__PURE__*/React.createElement(Pane.Header, {
-    className: "flex items-center space-x-3"
+    className: "flex items-center gap-x-2"
   }, /*#__PURE__*/React.createElement(Typography, {
     "data-cy": "add-new-webhook-pane-header",
     style: "h2",
     weight: "semibold"
-  }, editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")), /*#__PURE__*/React.createElement("a", {
-    href: WEBHOOK_HELP_URL,
-    rel: "noreferrer",
-    target: "_blank"
-  }, /*#__PURE__*/React.createElement(Info, {
-    className: "neeto-ui-text-primary-800 mt-0.5 cursor-pointer",
-    size: 20
-  }))), /*#__PURE__*/React.createElement(Form, {
+  }, editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")), /*#__PURE__*/React.createElement(HelpPopover, {
+    description: t("neetoWebhooks.webhook.helpDescription"),
+    helpLinkProps: {
+      href: WEBHOOK_HELP_URL
+    },
+    title: t("neetoWebhooks.webhook.title")
+  })), /*#__PURE__*/React.createElement(Form, {
     formikProps: {
       enableReinitialize: true,
       validationSchema: getValidationSchema(webhooks),
@@ -1298,20 +1303,15 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     }, /*#__PURE__*/React.createElement(Input, {
       "data-cy": "secret-key-input-field",
       name: "secret",
-      label: /*#__PURE__*/React.createElement(Trans, {
-        i18nKey: "neetoWebhooks.webhook.secret",
-        components: {
-          helpLink: /*#__PURE__*/React.createElement("a", {
-            href: WEBHOOK_SECRETS_HELP_URL,
-            rel: "noreferrer",
-            target: "_blank"
-          }),
-          info: /*#__PURE__*/React.createElement(Info, {
-            className: "neeto-ui-text-primary-800 mt-0.5 cursor-pointer",
-            size: 20
-          })
-        }
-      }),
+      label: /*#__PURE__*/React.createElement("span", {
+        className: "flex items-center gap-x-2"
+      }, t("neetoWebhooks.webhook.secret"), /*#__PURE__*/React.createElement(HelpPopover, {
+        helpLinkProps: {
+          href: WEBHOOK_SECRETS_HELP_URL
+        },
+        description: t("neetoWebhooks.webhook.secretkeyHelpDescription"),
+        title: t("neetoWebhooks.webhook.secretkeyHelpTitle")
+      })),
       placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
     }), /*#__PURE__*/React.createElement("div", {
       className: "mt-6"
@@ -1514,6 +1514,7 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
     webhooksPath = _useRouteMatch.path,
     webhooksUrl = _useRouteMatch.url;
   var deliveriesPath = getDeliveriesPath(webhooksUrl);
+  var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesPath);
   return /*#__PURE__*/React.createElement(Switch$1, null, /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: webhooksPath,
@@ -1527,6 +1528,15 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
         onDelete: onDelete
       });
     }
+  }), /*#__PURE__*/React.createElement(Route, {
+    exact: true,
+    path: deliveryDetailsPath,
+    render: function render() {
+      return /*#__PURE__*/React.createElement(Deliveries$1, {
+        breadcrumbs: breadcrumbs,
+        webhooksUrl: webhooksUrl
+      });
+    }
   }), /*#__PURE__*/React.createElement(Route, {
     component: function component() {
       return /*#__PURE__*/React.createElement(Deliveries$1, {