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

package/dist/index.js

@@ -24,7 +24,7 @@ import { t as t$1 } from 'i18next';
 import { prop, pluck, assoc } from 'ramda';
 import Alert from '@bigbinary/neetoui/Alert';
 import { useMutationWithInvalidation, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Plus } from '@bigbinary/neeto-icons';
+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';
@@ -653,7 +653,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);
@@ -668,7 +669,15 @@ var TransactionDetails = function TransactionDetails(_ref) {
         className: "flex w-full flex-col space-y-2 pb-4",
         children: [/*#__PURE__*/jsxs("span", {
           className: "flex items-center space-x-1",
-          children: [t("neetoWebhooks.delivery.identifier"), ":", /*#__PURE__*/jsx(Typography, {
+          children: [t("neetoWebhooks.delivery.sid"), ":", /*#__PURE__*/jsx(Typography, {
+            className: "px-2 font-bold",
+            "data-cy": "delivery-sid",
+            style: "body2",
+            children: sid
+          })]
+        }), /*#__PURE__*/jsxs("span", {
+          className: "flex items-center space-x-1",
+          children: [t("neetoWebhooks.delivery.deliveryId"), ":", /*#__PURE__*/jsx(Typography, {
             className: "px-2 font-bold",
             "data-cy": "delivery-identifier",
             style: "body2",
@@ -834,9 +843,9 @@ var Details = function Details(_ref) {
 };
 
 var buildColumns$1 = function buildColumns(_ref) {
-  var handleDetailsClick = _ref.handleDetailsClick;
+  var deliveryDetailsPath = _ref.deliveryDetailsPath;
   return [{
-    title: t$1("neetoWebhooks.delivery.identifier", SINGULAR),
+    title: t$1("neetoWebhooks.delivery.deliveryId"),
     key: "identifier",
     dataIndex: "identifier",
     width: 390,
@@ -845,10 +854,10 @@ var buildColumns$1 = function buildColumns(_ref) {
         className: "flex items-center gap-x-3",
         children: [/*#__PURE__*/jsx(Button, {
           style: "link",
+          to: buildUrl(deliveryDetailsPath, {
+            deliveryId: delivery.sid
+          }),
           weight: "semibold",
-          onClick: function onClick() {
-            return handleDetailsClick(delivery.sid);
-          },
           children: delivery.identifier
         }), delivery.redelivery && /*#__PURE__*/jsx(Tag, {
           style: "info",
@@ -938,11 +947,6 @@ 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
@@ -960,7 +964,7 @@ var Deliveries = function Deliveries(_ref) {
         totalCount: totalCount,
         fixedHeight: true,
         columnData: buildColumns$1({
-          handleDetailsClick: handleDetailsClick
+          deliveryDetailsPath: deliveryDetailsPath
         }),
         currentPageNumber: pageNumber,
         defaultPageSize: DEFAULT_PAGE_SIZE,
@@ -1024,7 +1028,7 @@ var useFetchWebhooks = function useFetchWebhooks(params) {
 };
 var useCreateWebhook = function useCreateWebhook(options) {
   return 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);
@@ -1056,7 +1060,7 @@ var useUpdateWebhook = function useUpdateWebhook(id, options) {
 };
 var useDestroyWebhook = function useDestroyWebhook(options) {
   return 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);
@@ -1455,10 +1459,13 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
 var Header = withT(function (_ref) {
   var t = _ref.t,
     breadcrumbs = _ref.breadcrumbs,
-    setIsAddWebhookPaneOpen = _ref.setIsAddWebhookPaneOpen;
+    title = _ref.title,
+    setIsAddWebhookPaneOpen = _ref.setIsAddWebhookPaneOpen,
+    headerSize = _ref.headerSize;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Header$2, {
       breadcrumbs: breadcrumbs,
+      size: headerSize,
       actionBlock: /*#__PURE__*/jsx(Button, {
         "data-cy": "add-new-webhook-button",
         label: t("neetoWebhooks.webhook.add"),
@@ -1466,7 +1473,7 @@ var Header = withT(function (_ref) {
           return setIsAddWebhookPaneOpen(true);
         }
       }),
-      title: /*#__PURE__*/jsxs("div", {
+      title: title || /*#__PURE__*/jsxs("div", {
         className: "flex items-center gap-x-2",
         children: [t("neetoWebhooks.webhook.title"), /*#__PURE__*/jsx(HelpPopover, {
           description: t("neetoWebhooks.webhook.helpDescription"),
@@ -1491,9 +1498,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 = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     editingWebhookId = _useState2[0],
@@ -1553,10 +1564,12 @@ var Webhooks = function Webhooks(_ref) {
     return /*#__PURE__*/jsx(PageLoader, {});
   }
   return /*#__PURE__*/jsxs(Container, {
-    className: "w-full",
+    className: containerClassName,
     children: [/*#__PURE__*/jsx(Header$1, {
       breadcrumbs: breadcrumbs,
-      setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen
+      headerSize: headerSize,
+      setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen,
+      title: title
     }), isNotEmpty(webhooks) ? /*#__PURE__*/jsx(TableWrapper, {
       hasPagination: totalCount > DEFAULT_PAGE_SIZE,
       children: /*#__PURE__*/jsx(Table, {
@@ -1577,12 +1590,12 @@ var Webhooks = function Webhooks(_ref) {
       className: "flex h-full w-full items-center justify-center",
       children: /*#__PURE__*/jsx(NoData, {
         title: t("neetoWebhooks.webhook.empty"),
-        helpText: /*#__PURE__*/jsx("a", {
-          className: "neeto-ui-text-primary-800 hover:neeto-ui-text-primary-800 visited:neeto-ui-text-primary-600 font-medium",
+        helpText: /*#__PURE__*/jsx(Button, {
           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"),
@@ -1627,8 +1640,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 = useRouteMatch(),
     webhooksPath = _useRouteMatch.path,
     webhooksUrl = _useRouteMatch.url;
@@ -1641,11 +1657,14 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
       component: function component() {
         return /*#__PURE__*/jsx(Webhooks$1, {
           breadcrumbs: breadcrumbs,
+          containerClassName: containerClassName,
           deliveriesPath: deliveriesPath,
           entityId: entityId,
           entityType: entityType,
+          headerSize: headerSize,
           onCreate: onCreate,
-          onDelete: onDelete
+          onDelete: onDelete,
+          title: title
         });
       }
     }), /*#__PURE__*/jsx(Route, {