@bigbinary/neeto-webhooks-frontend 1.6.24 → 1.6.26

package/dist/index.js

@@ -20,6 +20,7 @@ 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 * as yup from 'yup';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 
 var getDeliveriesPath = function getDeliveriesPath(webhooksPath) {
   return "".concat(webhooksPath, "/:webhookId/deliveries");
@@ -941,6 +942,9 @@ 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";
+
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -996,9 +1000,6 @@ var useFetchEvents = function useFetchEvents() {
   });
 };
 
-var WEBHOOK_HELP_URL = "https://neetocalhelp.neetokb.com/p/a-4bb6c2a2";
-var WEBHOOK_SECRETS_HELP_URL = "https://neetocalhelp.neetokb.com/p/a-80de90bd";
-
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
@@ -1277,10 +1278,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       }
     }
   }, function (_ref2) {
-    var dirty = _ref2.dirty,
-      isSubmitting = _ref2.isSubmitting,
-      isValid = _ref2.isValid,
-      setFieldValue = _ref2.setFieldValue;
+    var setFieldValue = _ref2.setFieldValue;
     return isLoading ? /*#__PURE__*/React.createElement("div", {
       className: "flex items-center justify-center"
     }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
@@ -1346,46 +1344,43 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       onClick: function onClick() {
         return handleClick(setFieldValue);
       }
-    }))), /*#__PURE__*/React.createElement(Pane.Footer, {
-      className: "flex gap-2"
-    }, /*#__PURE__*/React.createElement(ActionBlock, {
-      className: "space-x-3",
+    }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
       cancelButtonProps: {
-        onClick: onClose,
-        disabled: false,
-        label: t("neetoWebhooks.buttons.cancel")
-      },
-      submitButtonProps: {
-        label: t("neetoWebhooks.buttons.saveChanges"),
-        disabled: !dirty || !isValid,
-        loading: isSubmitting
+        onClick: onClose
       }
     })));
   }));
 };
 
-var Header = function Header(_ref) {
-  var breadcrumbs = _ref.breadcrumbs,
+var Header = withT(function (_ref) {
+  var t = _ref.t,
+    breadcrumbs = _ref.breadcrumbs,
     setIsAddWebhookPaneOpen = _ref.setIsAddWebhookPaneOpen;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header$2, {
     breadcrumbs: breadcrumbs,
-    title: t("neetoWebhooks.webhook.title"),
     actionBlock: /*#__PURE__*/React.createElement(Button, {
       "data-cy": "add-new-webhook-button",
       label: t("neetoWebhooks.webhook.add"),
       onClick: function onClick() {
         return setIsAddWebhookPaneOpen(true);
       }
-    })
+    }),
+    title: /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center gap-x-2"
+    }, t("neetoWebhooks.webhook.title"), /*#__PURE__*/React.createElement(HelpPopover, {
+      description: t("neetoWebhooks.webhook.helpDescription"),
+      helpLinkProps: {
+        href: WEBHOOK_HELP_URL
+      },
+      title: t("neetoWebhooks.webhook.title")
+    }))
   }), /*#__PURE__*/React.createElement(Typography, {
     className: "mb-3",
     "data-cy": "webhook-description-header",
     style: "h5",
     weight: "normal"
   }, t("neetoWebhooks.webhook.description")));
-};
+});
 var Header$1 = /*#__PURE__*/React.memo(Header);
 
 var Webhooks = function Webhooks(_ref) {
@@ -1465,9 +1460,7 @@ var Webhooks = function Webhooks(_ref) {
     fixedHeight: true,
     currentPageNumber: pageNumber,
     defaultPageSize: DEFAULT_PAGE_SIZE,
-    handlePageChange: function handlePageChange(page) {
-      return setPageNumber(page);
-    },
+    handlePageChange: setPageNumber,
     loading: isFetching,
     rowData: webhooks,
     columnData: buildColumns({
@@ -1478,7 +1471,19 @@ var Webhooks = function Webhooks(_ref) {
   })) : /*#__PURE__*/React.createElement("div", {
     className: "flex h-full w-full items-center justify-center"
   }, /*#__PURE__*/React.createElement(NoData, {
-    title: t("neetoWebhooks.webhook.empty")
+    title: t("neetoWebhooks.webhook.empty"),
+    helpText: /*#__PURE__*/React.createElement("a", {
+      className: "neeto-ui-text-primary-800 hover:neeto-ui-text-primary-800 visited:neeto-ui-text-primary-600 font-medium",
+      href: WEBHOOK_HELP_URL,
+      rel: "noreferrer",
+      target: "_blank"
+    }, t("neetoWebhooks.webhook.emptyHelpText")),
+    primaryButtonProps: {
+      label: t("neetoWebhooks.webhook.add"),
+      onClick: function onClick() {
+        return setIsAddWebhookPaneOpen(true);
+      }
+    }
   })), /*#__PURE__*/React.createElement(AddWebhookPane, {
     editingWebhookId: editingWebhookId,
     entityId: entityId,