@bigbinary/neeto-webhooks-frontend 1.6.8 → 1.6.10

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { useParams, useRouteMatch, Switch as Switch$1, Route } from 'react-router-dom';
 import { isPresent, removeBy, isNotEmpty, removeById, findBy } from '@bigbinary/neeto-cist';
 import { DEFAULT_STALE_TIME, SINGULAR, DEFAULT_PAGE_SIZE, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
@@ -14,10 +14,10 @@ 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 } from '@bigbinary/neeto-icons';
+import { Info, Plus } from '@bigbinary/neeto-icons';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import { Form, Textarea, Select, Input, Switch, ActionBlock } from '@bigbinary/neetoui/formik';
 import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
-import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import * as yup from 'yup';
 
 var getDeliveriesPath = function getDeliveriesPath(webhooksPath) {
@@ -980,7 +980,73 @@ var useFetchEvents = function useFetchEvents() {
   });
 };
 
-var WEBHOOK_HELP_URL = "https://help.neetocal.com/articles/webhook";
+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()).
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return unsafeStringify(rnds);
+}
 
 var MENU_ITEMS = {
   EDIT: "edit",
@@ -1090,6 +1156,9 @@ var buildColumns = function buildColumns(_ref6) {
     width: 400
   }];
 };
+var generateRandomSecret = function generateRandomSecret() {
+  return v4().replace(/-/g, "");
+};
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -1103,6 +1172,10 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     webhooks = _ref.webhooks;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSecretInputFieldVisible = _useState2[0],
+    setIsSecretInputFieldVisible = _useState2[1];
   var _useCreateWebhook = useCreateWebhook({
       onSuccess: function onSuccess() {
         onClose();
@@ -1143,6 +1216,24 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       entityType: entityType
     }));
   };
+  var handleClick = function handleClick(setFieldValue) {
+    var randomWebhookSecret = generateRandomSecret();
+    setFieldValue("secret", randomWebhookSecret);
+    setIsSecretInputFieldVisible(true);
+  };
+  var handleRegenerate = function handleRegenerate(setFieldValue) {
+    var randomWebhookSecret = generateRandomSecret();
+    setFieldValue("secret", randomWebhookSecret);
+  };
+  var handleDelete = function handleDelete(setFieldValue) {
+    setFieldValue("secret", null);
+    setIsSecretInputFieldVisible(false);
+  };
+  useEffect(function () {
+    if (webhook !== null && webhook !== void 0 && webhook.secret) {
+      setIsSecretInputFieldVisible(true);
+    }
+  }, [webhook]);
   return /*#__PURE__*/React.createElement(Pane, {
     isOpen: isOpen,
     onClose: onClose,
@@ -1172,7 +1263,8 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
   }, function (_ref2) {
     var dirty = _ref2.dirty,
       isSubmitting = _ref2.isSubmitting,
-      isValid = _ref2.isValid;
+      isValid = _ref2.isValid,
+      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", {
@@ -1194,15 +1286,16 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       name: "events",
       options: events,
       placeholder: t("neetoWebhooks.webhook.eventPlaceholder")
-    }), /*#__PURE__*/React.createElement(Input, {
+    }), isSecretInputFieldVisible && /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center justify-between space-x-3"
+    }, /*#__PURE__*/React.createElement(Input, {
       "data-cy": "secret-key-input-field",
       name: "secret",
-      placeholder: t("neetoWebhooks.webhook.secretPlaceholder"),
       label: /*#__PURE__*/React.createElement(Trans, {
         i18nKey: "neetoWebhooks.webhook.secret",
         components: {
           helpLink: /*#__PURE__*/React.createElement("a", {
-            href: WEBHOOK_HELP_URL,
+            href: WEBHOOK_SECRETS_HELP_URL,
             rel: "noreferrer",
             target: "_blank"
           }),
@@ -1211,10 +1304,37 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
             size: 20
           })
         }
-      })
-    }), /*#__PURE__*/React.createElement(Switch, {
+      }),
+      placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "mt-6"
+    }, /*#__PURE__*/React.createElement(MoreDropdown, {
+      menuItems: [{
+        key: "regenerate-secret",
+        label: t("neetoWebhooks.buttons.regenerate"),
+        "data-cy": "regenerate-secret",
+        onClick: function onClick() {
+          return handleRegenerate(setFieldValue);
+        }
+      }, {
+        key: "delete-secret",
+        label: t("neetoWebhooks.buttons.delete"),
+        "data-cy": "delete-secret",
+        onClick: function onClick() {
+          return handleDelete(setFieldValue);
+        }
+      }]
+    }))), /*#__PURE__*/React.createElement(Switch, {
       label: t("neetoWebhooks.webhook.active"),
       name: "isActive"
+    }), !isSecretInputFieldVisible && /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "add-secret-key",
+      icon: Plus,
+      label: t("neetoWebhooks.buttons.addSecretKey"),
+      style: "text",
+      onClick: function onClick() {
+        return handleClick(setFieldValue);
+      }
     }))), /*#__PURE__*/React.createElement(Pane.Footer, {
       className: "flex gap-2"
     }, /*#__PURE__*/React.createElement(ActionBlock, {