@bigbinary/neeto-webhooks-frontend 3.0.12 → 3.0.14

package/dist/v2/NeetoWebhooks.js

@@ -1,12 +1,14 @@
+import { useState, useRef, useMemo, useEffect, memo, useCallback } from 'react';
 import { pluck, assoc, mergeRight } from 'ramda';
 import { useRouteMatch, useHistory, useParams, Switch as Switch$1, Route } from 'react-router-dom';
-import { q as queryClient, u as useRedeliverWebhook, a as useShowDelivery, b as useFetchDeliveries, g as getDeliveriesPath, c as getDeliveryDetailsPath, d as useUpdateWebhook, v as v4, e as useCreateWebhook, f as useShowWebhook, h as useFetchEvents, i as useFetchWebhooks, j as useDestroyWebhook, H as HELP_LINK_URLS } from '../main-CfvmjDDj.js';
+import { q as queryClient, u as useRedeliverWebhook, a as useShowDelivery, b as useFetchDeliveries, g as getDeliveriesPath, c as getDeliveryDetailsPath, d as useUpdateWebhook, v as v4, e as useCreateWebhook, f as useShowWebhook, h as useFetchEvents, i as useFetchWebhooks, j as useDestroyWebhook, k as validateEntityProps, H as HELP_LINK_URLS } from '../main-CcNqvzWi.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { Typography, Badge, Tabs, Sheet, Spinner, Button, DataTable, Empty, Checkbox, Switch, Label, Alert } from '@bigbinary/neeto-atoms';
+import { Send, Plus, Webhook } from 'lucide-react';
 import { isPresent, removeBy, isNotEmpty, findIndexBy, removeById, findBy } from '@bigbinary/neeto-cist';
 import { SINGULAR, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX, PLURAL } from '@bigbinary/neeto-commons-frontend/v2/constants';
 import { useQueryParams, withT } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
 import { buildUrl } from '@bigbinary/neeto-commons-frontend/v2/utils';
-import { Typography, Badge, Tabs, Sheet, Spinner, Button, DataTable, Empty, Checkbox, Switch, Label, Alert } from '@bigbinary/neeto-atoms';
 import Container from '@bigbinary/neeto-molecules/v2/Container';
 import Header$2 from '@bigbinary/neeto-molecules/v2/Header';
 import TableWrapper from '@bigbinary/neeto-molecules/v2/TableWrapper';
@@ -19,11 +21,9 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import DateFormat from '@bigbinary/neeto-molecules/v2/DateFormat';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useRef, useMemo, useEffect, memo, useCallback } from 'react';
 import { t } from 'i18next';
 import { Form, Textarea, Input, ActionBlock } from '@bigbinary/neeto-atoms/formik';
 import { FieldArray, ErrorMessage } from 'formik';
-import { Plus } from 'lucide-react';
 import HelpPopover from '@bigbinary/neeto-molecules/v2/HelpPopover';
 import MoreDropdown from '@bigbinary/neeto-molecules/v2/MoreDropdown';
 import * as yup from 'yup';
@@ -58,7 +58,7 @@ var Snippet = function Snippet(_ref) {
     _ref$dataTestid = _ref.dataTestid,
     dataTestid = _ref$dataTestid === void 0 ? "" : _ref$dataTestid;
   return /*#__PURE__*/jsx("div", {
-    className: "neeto-ui-rounded neeto-ui-border-gray-300 neeto-ui-bg-gray-100 my-2 whitespace-pre-wrap break-all border p-4",
+    className: "my-2 whitespace-pre-wrap break-all rounded-lg border border-border bg-muted p-4",
     "data-testid": dataTestid,
     children: children
   });
@@ -83,97 +83,98 @@ var TransactionDetails = function TransactionDetails(_ref) {
       return "";
     }
   };
-  return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsxs("div", {
-      className: "neeto-ui-bg-white sticky top-0 mb-2 flex w-full flex-col",
-      children: [/*#__PURE__*/jsxs("div", {
-        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.sid"), ":", /*#__PURE__*/jsx(Typography, {
-            className: "px-2 font-bold",
-            "data-testid": "delivery-sid",
-            variant: "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-testid": "delivery-identifier",
-            variant: "body2",
-            children: identifier
-          })]
-        }), /*#__PURE__*/jsxs("span", {
-          className: "flex items-center",
-          children: [t("neetoWebhooks.common.responseStatus"), ":", /*#__PURE__*/jsx(Typography, {
-            className: "px-2 font-bold",
-            "data-testid": "delivery-response-code",
-            variant: "body2",
-            children: responseStatusCode
-          }), /*#__PURE__*/jsx(Badge, {
-            variant: status === "success" ? "green-subtle" : "amber-subtle",
-            children: status
-          })]
+  return /*#__PURE__*/jsxs("div", {
+    className: "sticky top-0 mb-2 flex w-full flex-col bg-background",
+    children: [/*#__PURE__*/jsxs("div", {
+      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.sid"), ":", /*#__PURE__*/jsx(Typography, {
+          className: "px-2",
+          "data-testid": "delivery-sid",
+          variant: "body2",
+          weight: "bold",
+          children: sid
         })]
-      }), /*#__PURE__*/jsxs(Tabs, {
-        value: activeHeader,
-        onValueChange: setActiveHeader,
-        children: [/*#__PURE__*/jsxs(Tabs.List, {
-          children: [/*#__PURE__*/jsx(Tabs.Item, {
-            value: DELIVERY_TAB.request,
-            children: t("neetoWebhooks.delivery.request")
-          }), /*#__PURE__*/jsx(Tabs.Item, {
-            value: DELIVERY_TAB.response,
-            children: t("neetoWebhooks.delivery.response")
-          })]
-        }), /*#__PURE__*/jsx(Tabs.Content, {
+      }), /*#__PURE__*/jsxs("span", {
+        className: "flex items-center space-x-1",
+        children: [t("neetoWebhooks.delivery.deliveryId"), ":", /*#__PURE__*/jsx(Typography, {
+          className: "px-2",
+          "data-testid": "delivery-identifier",
+          variant: "body2",
+          weight: "bold",
+          children: identifier
+        })]
+      }), /*#__PURE__*/jsxs("span", {
+        className: "flex items-center",
+        children: [t("neetoWebhooks.common.responseStatus"), ":", /*#__PURE__*/jsx(Typography, {
+          className: "px-2",
+          "data-testid": "delivery-response-code",
+          variant: "body2",
+          weight: "bold",
+          children: responseStatusCode
+        }), /*#__PURE__*/jsx(Badge, {
+          variant: status === "success" ? "green" : "amber",
+          children: status
+        })]
+      })]
+    }), /*#__PURE__*/jsxs(Tabs, {
+      value: activeHeader,
+      onValueChange: setActiveHeader,
+      children: [/*#__PURE__*/jsxs(Tabs.List, {
+        children: [/*#__PURE__*/jsx(Tabs.Item, {
           value: DELIVERY_TAB.request,
-          children: /*#__PURE__*/jsxs("div", {
-            className: "mt-2 w-full space-y-4",
-            children: [/*#__PURE__*/jsxs("div", {
-              children: [/*#__PURE__*/jsx(Typography, {
-                variant: "h5",
-                children: t("neetoWebhooks.delivery.header")
-              }), /*#__PURE__*/jsx(Snippet, {
-                dataTestid: "delivery-request-header",
-                children: delivery.requestHeader
-              })]
-            }), /*#__PURE__*/jsxs("div", {
-              children: [/*#__PURE__*/jsx(Typography, {
-                variant: "h5",
-                children: t("neetoWebhooks.delivery.payload")
-              }), /*#__PURE__*/jsx(Snippet, {
-                dataTestid: "delivery-request-payload",
-                children: renderPayload()
-              })]
-            })]
-          })
-        }), /*#__PURE__*/jsx(Tabs.Content, {
+          children: t("neetoWebhooks.delivery.request")
+        }), /*#__PURE__*/jsx(Tabs.Item, {
           value: DELIVERY_TAB.response,
-          children: /*#__PURE__*/jsxs("div", {
-            className: "mt-2 w-full space-y-4",
-            children: [/*#__PURE__*/jsxs("div", {
-              children: [/*#__PURE__*/jsx(Typography, {
-                variant: "h5",
-                children: t("neetoWebhooks.delivery.header")
-              }), /*#__PURE__*/jsx(Snippet, {
-                dataTestid: "delivery-response-header",
-                children: delivery.responseHeader
-              })]
-            }), /*#__PURE__*/jsxs("div", {
-              children: [/*#__PURE__*/jsx(Typography, {
-                variant: "h5",
-                children: t("neetoWebhooks.delivery.body")
-              }), /*#__PURE__*/jsx(Snippet, {
-                dataTestid: "delivery-response-body",
-                children: delivery.responseBody
-              })]
-            })]
-          })
+          children: t("neetoWebhooks.delivery.response")
         })]
+      }), /*#__PURE__*/jsx(Tabs.Content, {
+        value: DELIVERY_TAB.request,
+        children: /*#__PURE__*/jsxs("div", {
+          className: "mt-2 w-full space-y-4",
+          children: [/*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(Typography, {
+              variant: "h5",
+              children: t("neetoWebhooks.delivery.header")
+            }), /*#__PURE__*/jsx(Snippet, {
+              dataTestid: "delivery-request-header",
+              children: delivery.requestHeader
+            })]
+          }), /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(Typography, {
+              variant: "h5",
+              children: t("neetoWebhooks.delivery.payload")
+            }), /*#__PURE__*/jsx(Snippet, {
+              dataTestid: "delivery-request-payload",
+              children: renderPayload()
+            })]
+          })]
+        })
+      }), /*#__PURE__*/jsx(Tabs.Content, {
+        value: DELIVERY_TAB.response,
+        children: /*#__PURE__*/jsxs("div", {
+          className: "mt-2 w-full space-y-4",
+          children: [/*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(Typography, {
+              variant: "h5",
+              children: t("neetoWebhooks.delivery.header")
+            }), /*#__PURE__*/jsx(Snippet, {
+              dataTestid: "delivery-response-header",
+              children: delivery.responseHeader
+            })]
+          }), /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(Typography, {
+              variant: "h5",
+              children: t("neetoWebhooks.delivery.body")
+            }), /*#__PURE__*/jsx(Snippet, {
+              dataTestid: "delivery-response-body",
+              children: delivery.responseBody
+            })]
+          })]
+        })
       })]
-    })
+    })]
   });
 };
 
@@ -219,15 +220,14 @@ var Details = function Details(_ref) {
         children: /*#__PURE__*/jsx(Spinner, {})
       }) : /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx(Sheet.Header, {
-          children: /*#__PURE__*/jsxs(Fragment, {
+          children: /*#__PURE__*/jsxs(Sheet.Title, {
             children: [/*#__PURE__*/jsx(DateFormat.Date, {
               date: delivery.createdAt,
               tooltipProps: {
                 disabled: true
               },
               typographyProps: {
-                variant: "h2",
-                weight: "semibold"
+                variant: null
               }
             }), /*#__PURE__*/jsx("span", {
               children: " \u2022 "
@@ -237,7 +237,7 @@ var Details = function Details(_ref) {
                 disabled: true
               },
               typographyProps: {
-                variant: "h2",
+                variant: null,
                 weight: "normal"
               }
             })]
@@ -278,14 +278,16 @@ var buildColumns$1 = function buildColumns(_ref) {
       return /*#__PURE__*/jsxs("div", {
         className: "flex items-center gap-x-3",
         children: [/*#__PURE__*/jsx(Button, {
+          className: "min-w-0 shrink justify-start text-left [&>span]:min-w-0 [&>span>span]:truncate",
+          title: delivery.identifier,
           variant: "link",
           to: buildUrl(deliveryDetailsPath, {
             deliveryId: delivery.sid,
             page: page
           }),
-          weight: "semibold",
           children: delivery.identifier
         }), delivery.redelivery && /*#__PURE__*/jsx(Badge, {
+          className: "shrink-0",
           variant: "blue",
           children: t("neetoWebhooks.delivery.redelivery")
         })]
@@ -298,13 +300,8 @@ var buildColumns$1 = function buildColumns(_ref) {
     size: 280,
     cell: function cell(_ref3) {
       var getValue = _ref3.getValue;
-      return /*#__PURE__*/jsx("div", {
-        className: "flex items-center justify-between space-x-1",
-        children: /*#__PURE__*/jsx(Typography, {
-          children: /*#__PURE__*/jsx(DateFormat.DateTime, {
-            date: getValue()
-          })
-        })
+      return /*#__PURE__*/jsx(DateFormat.DateTime, {
+        date: getValue()
       });
     }
   }, {
@@ -317,14 +314,13 @@ var buildColumns$1 = function buildColumns(_ref) {
         responseStatusCode = _row$original.responseStatusCode,
         status = _row$original.status;
       return /*#__PURE__*/jsxs("span", {
-        className: "flex items-center",
-        children: [/*#__PURE__*/jsx(Typography, {
-          className: "px-2",
-          variant: "body2",
-          children: responseStatusCode
-        }), /*#__PURE__*/jsx(Badge, {
+        className: "flex items-center gap-x-2",
+        children: [/*#__PURE__*/jsx(Badge, {
           variant: status === "success" ? "green" : "amber",
           children: status
+        }), /*#__PURE__*/jsx(Typography, {
+          variant: "body2",
+          children: responseStatusCode
         })]
       });
     }
@@ -414,6 +410,7 @@ var Deliveries$1 = function Deliveries(_ref) {
       className: "flex justify-center items-center w-full h-full",
       children: /*#__PURE__*/jsx(Empty, {
         description: t("neetoWebhooks.delivery.empty.description"),
+        icon: Send,
         title: t("neetoWebhooks.delivery.empty.title")
       })
     }), /*#__PURE__*/jsx(Details, {
@@ -606,17 +603,16 @@ var buildColumns = function buildColumns(_ref6) {
         getValue = _ref7.getValue;
       var webhook = row.original;
       return /*#__PURE__*/jsxs("div", {
-        className: "flex items-center justify-between space-x-3",
+        className: "flex items-center justify-between gap-3 w-full",
         children: [/*#__PURE__*/jsx(Button, {
-          variant: "link",
+          className: "min-w-0 justify-start text-left [&>span]:min-w-0 [&>span>span]:truncate shrink",
+          title: getValue(),
           to: buildUrl(deliveriesPath, {
             webhookId: webhook.sid
           }),
+          variant: "link",
           children: getValue()
         }), /*#__PURE__*/jsx(MoreDropdown, {
-          dropdownButtonProps: {
-            className: "me-1 my-1"
-          },
           menuItems: getMenuItems({
             onEdit: function onEdit() {
               return handleEdit(webhook.id);
@@ -664,10 +660,11 @@ var buildColumns = function buildColumns(_ref6) {
             variant: "amber",
             children: "deprecated"
           })]
-        }), timeMessage && /*#__PURE__*/jsxs("div", {
-          className: "text-xs neeto-ui-text-gray-600",
+        }), timeMessage && /*#__PURE__*/jsxs(Typography, {
+          color: "muted",
+          variant: "caption",
           children: [timeMessage, ".", " ", /*#__PURE__*/jsx("a", {
-            className: "text-blue-600 hover:text-blue-800 underline",
+            className: "text-primary underline decoration-primary/40 underline-offset-4 hover:decoration-primary",
             href: webhook.defaultVersionPayloadDocUrl,
             rel: "noopener noreferrer",
             target: "_blank",
@@ -681,8 +678,8 @@ var buildColumns = function buildColumns(_ref6) {
     accessorKey: "events",
     header: t("neetoWebhooks.common.event", PLURAL),
     size: 300,
-    cell: function cell(_ref10) {
-      var getValue = _ref10.getValue;
+    cell: function cell(_ref0) {
+      var getValue = _ref0.getValue;
       return /*#__PURE__*/jsx("span", {
         className: "whitespace-normal",
         children: pluck("label", getValue()).sort().join(", ")
@@ -797,21 +794,19 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
         isOpen: isOpen,
         onClose: onClose,
         initialFocusRef: endpointRef,
-        children: [/*#__PURE__*/jsxs(Sheet.Header, {
-          className: "flex items-center gap-x-2",
-          children: [/*#__PURE__*/jsx(Typography, {
-            as: "h2",
+        size: "large",
+        children: [/*#__PURE__*/jsx(Sheet.Header, {
+          children: /*#__PURE__*/jsxs(Sheet.Title, {
+            className: "flex items-center gap-2",
             "data-testid": "add-new-webhook-pane-header",
-            variant: "h2",
-            weight: "semibold",
-            children: editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")
-          }), /*#__PURE__*/jsx(HelpPopover, {
-            description: t("neetoWebhooks.webhook.helpDescription"),
-            helpLinkProps: {
-              href: webhooksHelpLink
-            },
-            title: t("neetoWebhooks.webhook.title")
-          })]
+            children: [editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add"), /*#__PURE__*/jsx(HelpPopover, {
+              description: t("neetoWebhooks.webhook.helpDescription"),
+              helpLinkProps: {
+                href: webhooksHelpLink
+              },
+              title: t("neetoWebhooks.webhook.title")
+            })]
+          })
         }), isLoading ? /*#__PURE__*/jsx(Sheet.Body, {
           children: /*#__PURE__*/jsx("div", {
             className: "flex items-center justify-center",
@@ -823,22 +818,26 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
             children: /*#__PURE__*/jsxs("div", {
               className: "w-full space-y-4 md:space-y-6",
               children: [/*#__PURE__*/jsx(Typography, {
-                className: "mb-2",
+                className: "mb-4",
                 variant: "body2",
                 children: t("neetoWebhooks.webhook.postRequestIsSentToEndpointURL")
               }), /*#__PURE__*/jsx(Textarea, {
                 required: true,
+                className: "[&_textarea]:[field-sizing:content]!",
                 "data-testid": "endpoint-input-field",
                 label: t("neetoWebhooks.webhook.endpoint"),
                 name: "endpoint",
                 placeholder: t("neetoWebhooks.webhook.endpointPlaceholder"),
                 ref: endpointRef,
-                rows: 1
+                resize: "none",
+                size: "small"
               }), /*#__PURE__*/jsxs("div", {
                 className: "space-y-2",
-                children: [/*#__PURE__*/jsxs(Label, {
+                children: [/*#__PURE__*/jsxs("div", {
                   className: "flex items-center gap-x-2",
-                  children: [t("neetoWebhooks.webhook.secret"), /*#__PURE__*/jsx(HelpPopover, {
+                  children: [/*#__PURE__*/jsx(Label, {
+                    children: t("neetoWebhooks.webhook.secret")
+                  }), /*#__PURE__*/jsx(HelpPopover, {
                     helpLinkProps: {
                       href: secretsHelpLink
                     },
@@ -901,9 +900,11 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                 }), /*#__PURE__*/jsx(ErrorMessage, {
                   name: "events",
                   render: function render(msg) {
-                    return /*#__PURE__*/jsx("div", {
-                      className: "neeto-ui-text-error-800 text-xs mt-1",
+                    return /*#__PURE__*/jsx(Typography, {
+                      className: "mt-1",
+                      color: "destructive",
                       "data-testid": "event-error-text",
+                      variant: "caption",
                       children: msg
                     });
                   }
@@ -958,8 +959,8 @@ var Header$1 = withT(function (_ref) {
       }, titleHelpPopoverProps)
     }), isNotEmpty(webhooks) && /*#__PURE__*/jsx(SubHeader, {
       leftActionBlock: /*#__PURE__*/jsx(Typography, {
-        as: "h4",
-        variant: "h4",
+        as: "h6",
+        variant: "h6",
         children: t("neetoWebhooks.common.webhookWithCount", {
           count: webhooks.length
         })
@@ -1070,6 +1071,7 @@ var Webhooks$1 = function Webhooks(_ref) {
     }) : /*#__PURE__*/jsx("div", {
       className: "flex justify-center items-center w-full h-full",
       children: /*#__PURE__*/jsx(Empty, {
+        icon: Webhook,
         title: t("neetoWebhooks.webhook.empty"),
         description: /*#__PURE__*/jsx(Button, {
           href: webhooksHelpLink,
@@ -1134,6 +1136,12 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
   var _useRouteMatch = useRouteMatch(),
     webhooksPath = _useRouteMatch.path,
     webhooksUrl = _useRouteMatch.url;
+  useEffect(function () {
+    return validateEntityProps({
+      entityId: entityId,
+      entityType: entityType
+    });
+  }, [entityId, entityType]);
   var deliveriesPath = getDeliveriesPath(webhooksUrl);
   var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesPath);
   var helpLinks = mergeRight(HELP_LINK_URLS, helpLinkUrls);