@bigbinary/neeto-webhooks-frontend 1.6.14 → 1.6.15

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

@@ -48,6 +48,7 @@
     "webhook": {
       "title": "Webhooks",
       "description": "All new action event details will be posted to the configured webhook URLs",
+      "helpDescription": "Receive a webhook when the specified events take place.",
       "empty": "There are no webhooks defined currently",
       "add": "Add new webhook",
       "endpoint": "Endpoint",
@@ -55,7 +56,10 @@
       "event_other": "Events",
       "endpointPlaceholder": "Enter endpoint URL",
       "eventPlaceholder": "Select webhook events",
-      "secret": "Secret key (optional) <helpLink><info></helpLink>",
+      "secret": "Secret key (optional)",
+      "secretkeyHelpTitle": "Securing webhook requests",
+      "secretkeyHelpDescription": "Adding a secret key will help you to verify that the webhook request was actually sent from neeto.",
+
       "secretPlaceholder": "Enter secret key",
       "edit": "Edit Webhook",
       "active": "Active",

package/dist/index.cjs.js

@@ -20,6 +20,7 @@ var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
 var i18next = require('i18next');
 var ramda = require('ramda');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var formik = require('@bigbinary/neetoui/formik');
 var yup = require('yup');
@@ -51,6 +52,7 @@ var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var DateFormat__default = /*#__PURE__*/_interopDefaultLegacy(DateFormat);
+var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 
@@ -1285,19 +1287,18 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     onClose: onClose,
     initialFocusRef: endpointRef
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, {
-    className: "flex items-center space-x-3"
+    className: "flex items-center gap-x-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     "data-cy": "add-new-webhook-pane-header",
     style: "h2",
     weight: "semibold"
-  }, editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")), /*#__PURE__*/React__default["default"].createElement("a", {
-    href: WEBHOOK_HELP_URL,
-    rel: "noreferrer",
-    target: "_blank"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Info, {
-    className: "neeto-ui-text-primary-800 mt-0.5 cursor-pointer",
-    size: 20
-  }))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+  }, editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")), /*#__PURE__*/React__default["default"].createElement(HelpPopover__default["default"], {
+    description: t("neetoWebhooks.webhook.helpDescription"),
+    helpLinkProps: {
+      href: WEBHOOK_HELP_URL
+    },
+    title: t("neetoWebhooks.webhook.title")
+  })), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
     formikProps: {
       enableReinitialize: true,
       validationSchema: getValidationSchema(webhooks),
@@ -1337,20 +1338,15 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
       "data-cy": "secret-key-input-field",
       name: "secret",
-      label: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-        i18nKey: "neetoWebhooks.webhook.secret",
-        components: {
-          helpLink: /*#__PURE__*/React__default["default"].createElement("a", {
-            href: WEBHOOK_SECRETS_HELP_URL,
-            rel: "noreferrer",
-            target: "_blank"
-          }),
-          info: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Info, {
-            className: "neeto-ui-text-primary-800 mt-0.5 cursor-pointer",
-            size: 20
-          })
-        }
-      }),
+      label: /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "flex items-center gap-x-2"
+      }, t("neetoWebhooks.webhook.secret"), /*#__PURE__*/React__default["default"].createElement(HelpPopover__default["default"], {
+        helpLinkProps: {
+          href: WEBHOOK_SECRETS_HELP_URL
+        },
+        description: t("neetoWebhooks.webhook.secretkeyHelpDescription"),
+        title: t("neetoWebhooks.webhook.secretkeyHelpTitle")
+      })),
       placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mt-6"