@bigbinary/neeto-webhooks-frontend 2.0.0 → 2.0.2

package/dist/index.js

@@ -1,10 +1,12 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { prop, pluck, assoc, mergeRight } from 'ramda';
 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 { 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 Container from '@bigbinary/neeto-molecules/Container';
 import Header$2 from '@bigbinary/neeto-molecules/Header';
+import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import NoData from '@bigbinary/neetoui/NoData';
@@ -21,11 +23,9 @@ 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 { prop, pluck, assoc } from 'ramda';
+import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import Alert from '@bigbinary/neetoui/Alert';
-import { useMutationWithInvalidation, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Plus from '@bigbinary/neeto-icons/Plus';
-import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import Input from '@bigbinary/neetoui/formik/Input';
@@ -36,6 +36,12 @@ import Switch from '@bigbinary/neetoui/formik/Switch';
 import Textarea from '@bigbinary/neetoui/formik/Textarea';
 import * as yup from 'yup';
 
+var HELP_LINK_URLS = {
+  webhook: "https://neetocalhelp.neetokb.com/p/a-4bb6c2a2",
+  secrets: "https://neetocalhelp.neetokb.com/p/a-80de90bd",
+  deliveries: "https://help.neetocal.com/articles/managing-webhook-deliveries"
+};
+
 var getDeliveriesPath = function getDeliveriesPath(webhooksPath) {
   return "".concat(webhooksPath, "/:webhookId/deliveries");
 };
@@ -74,46 +80,6 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
 function _typeof$1(o) {
   "@babel/helpers - typeof";
 
@@ -627,6 +593,46 @@ try {
 
 var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 var DELIVERY_TAB = {
   response: "response",
   request: "request"
@@ -910,11 +916,8 @@ var buildColumns$1 = function buildColumns(_ref) {
 
 var Deliveries = function Deliveries(_ref) {
   var webhooksUrl = _ref.webhooksUrl,
-    hostBreadcrumbs = _ref.breadcrumbs;
-  var _useState = useState(1),
-    _useState2 = _slicedToArray(_useState, 2),
-    pageNumber = _useState2[0],
-    setPageNumber = _useState2[1];
+    hostBreadcrumbs = _ref.breadcrumbs,
+    helpLink = _ref.helpLink;
   var _useRouteMatch = useRouteMatch(),
     deliveriesUrl = _useRouteMatch.url;
   var history = useHistory();
@@ -923,10 +926,12 @@ var Deliveries = function Deliveries(_ref) {
   var _useParams = useParams(),
     webhookId = _useParams.webhookId,
     deliveryId = _useParams.deliveryId;
-  var deliveriesPath = getDeliveriesPath(webhooksUrl);
+  var _useQueryParams = useQueryParams(),
+    _useQueryParams$page = _useQueryParams.page,
+    page = _useQueryParams$page === void 0 ? DEFAULT_PAGE_INDEX : _useQueryParams$page;
   var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesUrl);
   var _useFetchDeliveries = useFetchDeliveries(webhookId, {
-      page: pageNumber,
+      page: page,
       pageSize: DEFAULT_PAGE_SIZE
     }),
     isLoading = _useFetchDeliveries.isLoading,
@@ -947,17 +952,21 @@ var Deliveries = function Deliveries(_ref) {
     link: window.location.pathname,
     text: endpoint
   }]);
-  var handleClose = function handleClose() {
-    history.push(buildUrl(deliveriesPath, {
-      webhookId: webhookId
-    }));
-  };
   if (isLoading) return /*#__PURE__*/jsx(PageLoader, {});
   return /*#__PURE__*/jsxs(Container, {
     className: "w-full",
     children: [/*#__PURE__*/jsx(Header$2, {
       breadcrumbs: breadcrumbs,
-      title: t("neetoWebhooks.delivery.title")
+      title: /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-x-2",
+        children: [t("neetoWebhooks.delivery.title"), /*#__PURE__*/jsx(HelpPopover, {
+          description: t("neetoWebhooks.delivery.helpDescription"),
+          helpLinkProps: {
+            href: helpLink
+          },
+          title: t("neetoWebhooks.delivery.title")
+        })]
+      })
     }), isNotEmpty(deliveries) ? /*#__PURE__*/jsx(TableWrapper, {
       hasPagination: totalCount > DEFAULT_PAGE_SIZE,
       children: /*#__PURE__*/jsx(Table, {
@@ -966,9 +975,8 @@ var Deliveries = function Deliveries(_ref) {
         columnData: buildColumns$1({
           deliveryDetailsPath: deliveryDetailsPath
         }),
-        currentPageNumber: pageNumber,
+        currentPageNumber: page,
         defaultPageSize: DEFAULT_PAGE_SIZE,
-        handlePageChange: setPageNumber,
         loading: isFetching,
         rowData: deliveries
       })
@@ -981,7 +989,9 @@ var Deliveries = function Deliveries(_ref) {
     }), /*#__PURE__*/jsx(Details, {
       deliveryId: deliveryId,
       webhookSid: webhookId,
-      onClose: handleClose
+      onClose: function onClose() {
+        return history.goBack();
+      }
     })]
   });
 };
@@ -1068,9 +1078,6 @@ var useDestroyWebhook = function useDestroyWebhook(options) {
   });
 };
 
-var WEBHOOK_HELP_URL = "https://neetocalhelp.neetokb.com/p/a-4bb6c2a2";
-var WEBHOOK_SECRETS_HELP_URL = "https://neetocalhelp.neetokb.com/p/a-80de90bd";
-
 var baseUrl = "/webhooks/events/all";
 var all = function all() {
   return axios.get(baseUrl);
@@ -1275,7 +1282,9 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     onCreate = _ref.onCreate,
-    webhooks = _ref.webhooks;
+    webhooks = _ref.webhooks,
+    webhookHelpLink = _ref.webhookHelpLink,
+    secretsHelpLink = _ref.secretsHelpLink;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(false),
@@ -1355,7 +1364,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       }), /*#__PURE__*/jsx(HelpPopover, {
         description: t("neetoWebhooks.webhook.helpDescription"),
         helpLinkProps: {
-          href: WEBHOOK_HELP_URL
+          href: webhookHelpLink
         },
         title: t("neetoWebhooks.webhook.title")
       })]
@@ -1403,7 +1412,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                     className: "flex items-center gap-x-2",
                     children: [t("neetoWebhooks.webhook.secret"), /*#__PURE__*/jsx(HelpPopover, {
                       helpLinkProps: {
-                        href: WEBHOOK_SECRETS_HELP_URL
+                        href: secretsHelpLink
                       },
                       description: t("neetoWebhooks.webhook.secretkeyHelpDescription"),
                       title: t("neetoWebhooks.webhook.secretkeyHelpTitle")
@@ -1461,7 +1470,8 @@ var Header = withT(function (_ref) {
     breadcrumbs = _ref.breadcrumbs,
     title = _ref.title,
     setIsAddWebhookPaneOpen = _ref.setIsAddWebhookPaneOpen,
-    headerSize = _ref.headerSize;
+    headerSize = _ref.headerSize,
+    webhookHelpLink = _ref.webhookHelpLink;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Header$2, {
       breadcrumbs: breadcrumbs,
@@ -1478,7 +1488,7 @@ var Header = withT(function (_ref) {
         children: [t("neetoWebhooks.webhook.title"), /*#__PURE__*/jsx(HelpPopover, {
           description: t("neetoWebhooks.webhook.helpDescription"),
           helpLinkProps: {
-            href: WEBHOOK_HELP_URL
+            href: webhookHelpLink
           },
           title: t("neetoWebhooks.webhook.title")
         })]
@@ -1504,7 +1514,9 @@ var Webhooks = function Webhooks(_ref) {
     onDelete = _ref.onDelete,
     headerSize = _ref.headerSize,
     _ref$containerClassNa = _ref.containerClassName,
-    containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa;
+    containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa,
+    webhookHelpLink = _ref.webhookHelpLink,
+    secretsHelpLink = _ref.secretsHelpLink;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     editingWebhookId = _useState2[0],
@@ -1521,15 +1533,14 @@ var Webhooks = function Webhooks(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isDeleteAlertOpen = _useState8[0],
     setIsDeleteAlertOpen = _useState8[1];
-  var _useState9 = useState(1),
-    _useState10 = _slicedToArray(_useState9, 2),
-    pageNumber = _useState10[0],
-    setPageNumber = _useState10[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useQueryParams = useQueryParams(),
+    _useQueryParams$page = _useQueryParams.page,
+    page = _useQueryParams$page === void 0 ? DEFAULT_PAGE_INDEX : _useQueryParams$page;
   var _useFetchWebhooks = useFetchWebhooks({
       entityId: entityId,
-      page: pageNumber,
+      page: page,
       pageSize: DEFAULT_PAGE_SIZE
     }),
     isLoading = _useFetchWebhooks.isLoading,
@@ -1569,15 +1580,15 @@ var Webhooks = function Webhooks(_ref) {
       breadcrumbs: breadcrumbs,
       headerSize: headerSize,
       setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen,
-      title: title
+      title: title,
+      webhookHelpLink: webhookHelpLink
     }), isNotEmpty(webhooks) ? /*#__PURE__*/jsx(TableWrapper, {
       hasPagination: totalCount > DEFAULT_PAGE_SIZE,
       children: /*#__PURE__*/jsx(Table, {
         totalCount: totalCount,
         fixedHeight: true,
-        currentPageNumber: pageNumber,
+        currentPageNumber: page,
         defaultPageSize: DEFAULT_PAGE_SIZE,
-        handlePageChange: setPageNumber,
         loading: isFetching,
         rowData: webhooks,
         columnData: buildColumns({
@@ -1591,7 +1602,7 @@ var Webhooks = function Webhooks(_ref) {
       children: /*#__PURE__*/jsx(NoData, {
         title: t("neetoWebhooks.webhook.empty"),
         helpText: /*#__PURE__*/jsx(Button, {
-          href: WEBHOOK_HELP_URL,
+          href: webhookHelpLink,
           label: t("neetoWebhooks.webhook.emptyHelpText"),
           rel: "noreferrer",
           style: "link",
@@ -1609,6 +1620,8 @@ var Webhooks = function Webhooks(_ref) {
       entityId: entityId,
       entityType: entityType,
       onCreate: onCreate,
+      secretsHelpLink: secretsHelpLink,
+      webhookHelpLink: webhookHelpLink,
       webhooks: webhooks,
       isOpen: isAddWebhookPaneOpen,
       onClose: handlePaneClose
@@ -1644,12 +1657,15 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
     onCreate = _ref.onCreate,
     onDelete = _ref.onDelete,
     headerSize = _ref.headerSize,
+    _ref$helpLinkUrls = _ref.helpLinkUrls,
+    helpLinkUrls = _ref$helpLinkUrls === void 0 ? {} : _ref$helpLinkUrls,
     containerClassName = _ref.containerClassName;
   var _useRouteMatch = useRouteMatch(),
     webhooksPath = _useRouteMatch.path,
     webhooksUrl = _useRouteMatch.url;
   var deliveriesPath = getDeliveriesPath(webhooksUrl);
   var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesPath);
+  var helpLinks = mergeRight(HELP_LINK_URLS, helpLinkUrls);
   return /*#__PURE__*/jsxs(Switch$1, {
     children: [/*#__PURE__*/jsx(Route, {
       exact: true,
@@ -1664,7 +1680,9 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
           headerSize: headerSize,
           onCreate: onCreate,
           onDelete: onDelete,
-          title: title
+          title: title,
+          secretsHelpLink: helpLinks.secrets,
+          webhookHelpLink: helpLinks.webhook
         });
       }
     }), /*#__PURE__*/jsx(Route, {
@@ -1673,17 +1691,19 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
       render: function render() {
         return /*#__PURE__*/jsx(Deliveries$1, {
           breadcrumbs: breadcrumbs,
-          webhooksUrl: webhooksUrl
+          webhooksUrl: webhooksUrl,
+          helpLink: helpLinks.deliveries
         });
       }
     }), /*#__PURE__*/jsx(Route, {
+      path: deliveriesPath,
       component: function component() {
         return /*#__PURE__*/jsx(Deliveries$1, {
           breadcrumbs: breadcrumbs,
-          webhooksUrl: webhooksUrl
+          webhooksUrl: webhooksUrl,
+          helpLink: helpLinks.deliveries
         });
-      },
-      path: deliveriesPath
+      }
     })]
   });
 };