@bigbinary/neeto-webhooks-frontend 1.7.0-beta1 → 2.0.1

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

@@ -39,7 +39,8 @@
       "header": "Header",
       "body": "Body",
       "payload": "Payload",
-      "identifier": "Identifier",
+      "deliveryId": "Delivery ID",
+      "sid": "ID",
       "empty": {
         "title": "There are no deliveries to show.",
         "description": "No events have been sent to this webhook"

package/dist/index.cjs.js

@@ -6,7 +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 reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var Header$2 = require('@bigbinary/neeto-molecules/Header');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
@@ -25,10 +25,10 @@ var Typography = require('@bigbinary/neetoui/Typography');
 var Tab = require('@bigbinary/neetoui/Tab');
 var Tag = require('@bigbinary/neetoui/Tag');
 var i18next = require('i18next');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var ramda = require('ramda');
 var Alert = require('@bigbinary/neetoui/Alert');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var neetoIcons = require('@bigbinary/neeto-icons');
+var Plus = require('@bigbinary/neeto-icons/Plus');
 var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Spinner = require('@bigbinary/neetoui/Spinner');
@@ -75,6 +75,7 @@ var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var Tab__default = /*#__PURE__*/_interopDefaultLegacy(Tab);
 var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var Plus__default = /*#__PURE__*/_interopDefaultLegacy(Plus);
 var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
@@ -124,46 +125,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";
 
@@ -677,6 +638,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"
@@ -703,7 +704,8 @@ var TransactionDetails = function TransactionDetails(_ref) {
     t = _useTranslation.t;
   var status = delivery.status,
     identifier = delivery.identifier,
-    responseStatusCode = delivery.responseStatusCode;
+    responseStatusCode = delivery.responseStatusCode,
+    sid = delivery.sid;
   var renderPayload = function renderPayload() {
     try {
       return JSON.stringify(JSON.parse(delivery.requestBody), null, 2);
@@ -718,7 +720,15 @@ var TransactionDetails = function TransactionDetails(_ref) {
         className: "flex w-full flex-col space-y-2 pb-4",
         children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
           className: "flex items-center space-x-1",
-          children: [t("neetoWebhooks.delivery.identifier"), ":", /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          children: [t("neetoWebhooks.delivery.sid"), ":", /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            className: "px-2 font-bold",
+            "data-cy": "delivery-sid",
+            style: "body2",
+            children: sid
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "flex items-center space-x-1",
+          children: [t("neetoWebhooks.delivery.deliveryId"), ":", /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
             className: "px-2 font-bold",
             "data-cy": "delivery-identifier",
             style: "body2",
@@ -884,9 +894,9 @@ var Details = function Details(_ref) {
 };
 
 var buildColumns$1 = function buildColumns(_ref) {
-  var handleDetailsClick = _ref.handleDetailsClick;
+  var deliveryDetailsPath = _ref.deliveryDetailsPath;
   return [{
-    title: i18next.t("neetoWebhooks.delivery.identifier", constants.SINGULAR),
+    title: i18next.t("neetoWebhooks.delivery.deliveryId"),
     key: "identifier",
     dataIndex: "identifier",
     width: 390,
@@ -895,10 +905,10 @@ var buildColumns$1 = function buildColumns(_ref) {
         className: "flex items-center gap-x-3",
         children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
           style: "link",
+          to: utils.buildUrl(deliveryDetailsPath, {
+            deliveryId: delivery.sid
+          }),
           weight: "semibold",
-          onClick: function onClick() {
-            return handleDetailsClick(delivery.sid);
-          },
           children: delivery.identifier
         }), delivery.redelivery && /*#__PURE__*/jsxRuntime.jsx(Tag__default["default"], {
           style: "info",
@@ -952,10 +962,6 @@ var buildColumns$1 = function buildColumns(_ref) {
 var Deliveries = function Deliveries(_ref) {
   var webhooksUrl = _ref.webhooksUrl,
     hostBreadcrumbs = _ref.breadcrumbs;
-  var _useState = React.useState(1),
-    _useState2 = _slicedToArray(_useState, 2),
-    pageNumber = _useState2[0],
-    setPageNumber = _useState2[1];
   var _useRouteMatch = reactRouterDom.useRouteMatch(),
     deliveriesUrl = _useRouteMatch.url;
   var history = reactRouterDom.useHistory();
@@ -964,10 +970,12 @@ var Deliveries = function Deliveries(_ref) {
   var _useParams = reactRouterDom.useParams(),
     webhookId = _useParams.webhookId,
     deliveryId = _useParams.deliveryId;
-  var deliveriesPath = getDeliveriesPath(webhooksUrl);
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$page = _useQueryParams.page,
+    page = _useQueryParams$page === void 0 ? constants.DEFAULT_PAGE_INDEX : _useQueryParams$page;
   var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesUrl);
   var _useFetchDeliveries = useFetchDeliveries(webhookId, {
-      page: pageNumber,
+      page: page,
       pageSize: constants.DEFAULT_PAGE_SIZE
     }),
     isLoading = _useFetchDeliveries.isLoading,
@@ -988,16 +996,6 @@ 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__*/jsxRuntime.jsx(PageLoader__default["default"], {});
   return /*#__PURE__*/jsxRuntime.jsxs(Container__default["default"], {
     className: "w-full",
@@ -1010,11 +1008,10 @@ var Deliveries = function Deliveries(_ref) {
         totalCount: totalCount,
         fixedHeight: true,
         columnData: buildColumns$1({
-          handleDetailsClick: handleDetailsClick
+          deliveryDetailsPath: deliveryDetailsPath
         }),
-        currentPageNumber: pageNumber,
+        currentPageNumber: page,
         defaultPageSize: constants.DEFAULT_PAGE_SIZE,
-        handlePageChange: setPageNumber,
         loading: isFetching,
         rowData: deliveries
       })
@@ -1027,7 +1024,9 @@ var Deliveries = function Deliveries(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(Details, {
       deliveryId: deliveryId,
       webhookSid: webhookId,
-      onClose: handleClose
+      onClose: function onClose() {
+        return history.goBack();
+      }
     })]
   });
 };
@@ -1074,7 +1073,7 @@ var useFetchWebhooks = function useFetchWebhooks(params) {
 };
 var useCreateWebhook = function useCreateWebhook(options) {
   return reactUtils.useMutationWithInvalidation(webhooksApi.create, {
-    keysToInvalidate: [QUERY_KEYS.WEBHOOK_LIST],
+    keysToInvalidate: [[QUERY_KEYS.WEBHOOK_LIST]],
     onSuccess: function onSuccess() {
       var _options$onSuccess;
       options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 || _options$onSuccess.call(options);
@@ -1106,7 +1105,7 @@ var useUpdateWebhook = function useUpdateWebhook(id, options) {
 };
 var useDestroyWebhook = function useDestroyWebhook(options) {
   return reactUtils.useMutationWithInvalidation(webhooksApi.destroy, {
-    keysToInvalidate: [QUERY_KEYS.WEBHOOK_LIST],
+    keysToInvalidate: [[QUERY_KEYS.WEBHOOK_LIST]],
     onSuccess: function onSuccess() {
       var _options$onSuccess3;
       options === null || options === void 0 || (_options$onSuccess3 = options.onSuccess) === null || _options$onSuccess3 === void 0 || _options$onSuccess3.call(options);
@@ -1481,7 +1480,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                 name: "isActive"
               }), !isSecretInputFieldVisible && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
                 "data-cy": "add-secret-key",
-                icon: neetoIcons.Plus,
+                icon: Plus__default["default"],
                 label: t("neetoWebhooks.buttons.addSecretKey"),
                 style: "text",
                 onClick: function onClick() {
@@ -1505,10 +1504,13 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
 var Header = reactUtils.withT(function (_ref) {
   var t = _ref.t,
     breadcrumbs = _ref.breadcrumbs,
-    setIsAddWebhookPaneOpen = _ref.setIsAddWebhookPaneOpen;
+    title = _ref.title,
+    setIsAddWebhookPaneOpen = _ref.setIsAddWebhookPaneOpen,
+    headerSize = _ref.headerSize;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Header__default["default"], {
       breadcrumbs: breadcrumbs,
+      size: headerSize,
       actionBlock: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         "data-cy": "add-new-webhook-button",
         label: t("neetoWebhooks.webhook.add"),
@@ -1516,7 +1518,7 @@ var Header = reactUtils.withT(function (_ref) {
           return setIsAddWebhookPaneOpen(true);
         }
       }),
-      title: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      title: title || /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex items-center gap-x-2",
         children: [t("neetoWebhooks.webhook.title"), /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
           description: t("neetoWebhooks.webhook.helpDescription"),
@@ -1541,9 +1543,13 @@ var Webhooks = function Webhooks(_ref) {
   var deliveriesPath = _ref.deliveriesPath,
     entityType = _ref.entityType,
     breadcrumbs = _ref.breadcrumbs,
+    title = _ref.title,
     entityId = _ref.entityId,
     onCreate = _ref.onCreate,
-    onDelete = _ref.onDelete;
+    onDelete = _ref.onDelete,
+    headerSize = _ref.headerSize,
+    _ref$containerClassNa = _ref.containerClassName,
+    containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa;
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     editingWebhookId = _useState2[0],
@@ -1560,15 +1566,14 @@ var Webhooks = function Webhooks(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isDeleteAlertOpen = _useState8[0],
     setIsDeleteAlertOpen = _useState8[1];
-  var _useState9 = React.useState(1),
-    _useState10 = _slicedToArray(_useState9, 2),
-    pageNumber = _useState10[0],
-    setPageNumber = _useState10[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$page = _useQueryParams.page,
+    page = _useQueryParams$page === void 0 ? constants.DEFAULT_PAGE_INDEX : _useQueryParams$page;
   var _useFetchWebhooks = useFetchWebhooks({
       entityId: entityId,
-      page: pageNumber,
+      page: page,
       pageSize: constants.DEFAULT_PAGE_SIZE
     }),
     isLoading = _useFetchWebhooks.isLoading,
@@ -1603,18 +1608,19 @@ var Webhooks = function Webhooks(_ref) {
     return /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {});
   }
   return /*#__PURE__*/jsxRuntime.jsxs(Container__default["default"], {
-    className: "w-full",
+    className: containerClassName,
     children: [/*#__PURE__*/jsxRuntime.jsx(Header$1, {
       breadcrumbs: breadcrumbs,
-      setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen
+      headerSize: headerSize,
+      setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen,
+      title: title
     }), neetoCist.isNotEmpty(webhooks) ? /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
       hasPagination: totalCount > constants.DEFAULT_PAGE_SIZE,
       children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
         totalCount: totalCount,
         fixedHeight: true,
-        currentPageNumber: pageNumber,
+        currentPageNumber: page,
         defaultPageSize: constants.DEFAULT_PAGE_SIZE,
-        handlePageChange: setPageNumber,
         loading: isFetching,
         rowData: webhooks,
         columnData: buildColumns({
@@ -1627,12 +1633,12 @@ var Webhooks = function Webhooks(_ref) {
       className: "flex h-full w-full items-center justify-center",
       children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], {
         title: t("neetoWebhooks.webhook.empty"),
-        helpText: /*#__PURE__*/jsxRuntime.jsx("a", {
-          className: "neeto-ui-text-primary-800 hover:neeto-ui-text-primary-800 visited:neeto-ui-text-primary-600 font-medium",
+        helpText: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
           href: WEBHOOK_HELP_URL,
+          label: t("neetoWebhooks.webhook.emptyHelpText"),
           rel: "noreferrer",
-          target: "_blank",
-          children: t("neetoWebhooks.webhook.emptyHelpText")
+          style: "link",
+          target: "_blank"
         }),
         primaryButtonProps: {
           label: t("neetoWebhooks.webhook.add"),
@@ -1677,8 +1683,11 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
     entityId = _ref.entityId,
     _ref$breadcrumbs = _ref.breadcrumbs,
     breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    title = _ref.title,
     onCreate = _ref.onCreate,
-    onDelete = _ref.onDelete;
+    onDelete = _ref.onDelete,
+    headerSize = _ref.headerSize,
+    containerClassName = _ref.containerClassName;
   var _useRouteMatch = reactRouterDom.useRouteMatch(),
     webhooksPath = _useRouteMatch.path,
     webhooksUrl = _useRouteMatch.url;
@@ -1691,11 +1700,14 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
       component: function component() {
         return /*#__PURE__*/jsxRuntime.jsx(Webhooks$1, {
           breadcrumbs: breadcrumbs,
+          containerClassName: containerClassName,
           deliveriesPath: deliveriesPath,
           entityId: entityId,
           entityType: entityType,
+          headerSize: headerSize,
           onCreate: onCreate,
-          onDelete: onDelete
+          onDelete: onDelete,
+          title: title
         });
       }
     }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {