@bigbinary/neeto-webhooks-frontend 1.6.14 → 1.6.15

package/dist/index.js

@@ -8,14 +8,15 @@ import Header$2 from '@bigbinary/neeto-molecules/Header';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import { Typography, Tag, Tab, Pane, Button, Table, NoData, Spinner, Alert } from '@bigbinary/neetoui';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { QueryClient, QueryCache, QueryClientProvider, useQuery, useQueryClient, useMutation } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import axios from 'axios';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
 import { t as t$1 } from 'i18next';
 import { prop, pluck, assoc } from 'ramda';
-import { Info, Plus } from '@bigbinary/neeto-icons';
+import { Plus } from '@bigbinary/neeto-icons';
+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';
@@ -1251,19 +1252,18 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     onClose: onClose,
     initialFocusRef: endpointRef
   }, /*#__PURE__*/React.createElement(Pane.Header, {
-    className: "flex items-center space-x-3"
+    className: "flex items-center gap-x-2"
   }, /*#__PURE__*/React.createElement(Typography, {
     "data-cy": "add-new-webhook-pane-header",
     style: "h2",
     weight: "semibold"
-  }, editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")), /*#__PURE__*/React.createElement("a", {
-    href: WEBHOOK_HELP_URL,
-    rel: "noreferrer",
-    target: "_blank"
-  }, /*#__PURE__*/React.createElement(Info, {
-    className: "neeto-ui-text-primary-800 mt-0.5 cursor-pointer",
-    size: 20
-  }))), /*#__PURE__*/React.createElement(Form, {
+  }, editingWebhookId ? t("neetoWebhooks.webhook.edit") : t("neetoWebhooks.webhook.add")), /*#__PURE__*/React.createElement(HelpPopover, {
+    description: t("neetoWebhooks.webhook.helpDescription"),
+    helpLinkProps: {
+      href: WEBHOOK_HELP_URL
+    },
+    title: t("neetoWebhooks.webhook.title")
+  })), /*#__PURE__*/React.createElement(Form, {
     formikProps: {
       enableReinitialize: true,
       validationSchema: getValidationSchema(webhooks),
@@ -1303,20 +1303,15 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     }, /*#__PURE__*/React.createElement(Input, {
       "data-cy": "secret-key-input-field",
       name: "secret",
-      label: /*#__PURE__*/React.createElement(Trans, {
-        i18nKey: "neetoWebhooks.webhook.secret",
-        components: {
-          helpLink: /*#__PURE__*/React.createElement("a", {
-            href: WEBHOOK_SECRETS_HELP_URL,
-            rel: "noreferrer",
-            target: "_blank"
-          }),
-          info: /*#__PURE__*/React.createElement(Info, {
-            className: "neeto-ui-text-primary-800 mt-0.5 cursor-pointer",
-            size: 20
-          })
-        }
-      }),
+      label: /*#__PURE__*/React.createElement("span", {
+        className: "flex items-center gap-x-2"
+      }, t("neetoWebhooks.webhook.secret"), /*#__PURE__*/React.createElement(HelpPopover, {
+        helpLinkProps: {
+          href: WEBHOOK_SECRETS_HELP_URL
+        },
+        description: t("neetoWebhooks.webhook.secretkeyHelpDescription"),
+        title: t("neetoWebhooks.webhook.secretkeyHelpTitle")
+      })),
       placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
     }), /*#__PURE__*/React.createElement("div", {
       className: "mt-6"