@bigbinary/neeto-webhooks-frontend 1.6.8 → 1.6.9

package/README.md

@@ -68,6 +68,8 @@ You can learn more about the setup and usage here:
     ```zsh
     yarn add @bigbinary/neeto-webhooks-frontend
     ```
+### Instructions for development
+Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
 
 ### Components
 #### `NeetoWebhooks` ([source code](https://github.com/bigbinary/neeto-webhooks-nano/blob/52aa6b3fc38dce1afb9f6a7a821f3d2d12cb6a6a/app/javascript/src/components/NeetoWebhooks.jsx))

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

@@ -15,7 +15,9 @@
       "cancel": "Cancel",
       "delete": "Delete",
       "edit": "Edit",
-      "viewDetails": "View details"
+      "viewDetails": "View details",
+      "regenerate": "Regenerate",
+      "addSecretKey": "Add secret key"
     },
     "errors": {
       "webhook": {

package/dist/index.cjs.js

@@ -19,9 +19,9 @@ var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
 var i18next = require('i18next');
 var ramda = require('ramda');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var formik = require('@bigbinary/neetoui/formik');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var yup = require('yup');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -1014,7 +1014,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",
@@ -1124,6 +1190,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; }
@@ -1137,6 +1206,10 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
     webhooks = _ref.webhooks;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSecretInputFieldVisible = _useState2[0],
+    setIsSecretInputFieldVisible = _useState2[1];
   var _useCreateWebhook = useCreateWebhook({
       onSuccess: function onSuccess() {
         onClose();
@@ -1177,6 +1250,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);
+  };
+  React.useEffect(function () {
+    if (webhook !== null && webhook !== void 0 && webhook.secret) {
+      setIsSecretInputFieldVisible(true);
+    }
+  }, [webhook]);
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
     isOpen: isOpen,
     onClose: onClose,
@@ -1206,7 +1297,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__default["default"].createElement("div", {
       className: "flex items-center justify-center"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1228,15 +1320,16 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
       name: "events",
       options: events,
       placeholder: t("neetoWebhooks.webhook.eventPlaceholder")
-    }), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+    }), isSecretInputFieldVisible && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex items-center justify-between space-x-3"
+    }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
       "data-cy": "secret-key-input-field",
       name: "secret",
-      placeholder: t("neetoWebhooks.webhook.secretPlaceholder"),
       label: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
         i18nKey: "neetoWebhooks.webhook.secret",
         components: {
           helpLink: /*#__PURE__*/React__default["default"].createElement("a", {
-            href: WEBHOOK_HELP_URL,
+            href: WEBHOOK_SECRETS_HELP_URL,
             rel: "noreferrer",
             target: "_blank"
           }),
@@ -1245,10 +1338,36 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
             size: 20
           })
         }
-      })
-    }), /*#__PURE__*/React__default["default"].createElement(formik.Switch, {
+      }),
+      placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "mt-6"
+    }, /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
+      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__default["default"].createElement(formik.Switch, {
       label: t("neetoWebhooks.webhook.active"),
       name: "isActive"
+    }), !isSecretInputFieldVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      icon: neetoIcons.Plus,
+      label: t("neetoWebhooks.buttons.addSecretKey"),
+      style: "text",
+      onClick: function onClick() {
+        return handleClick(setFieldValue);
+      }
     }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
       className: "flex gap-2"
     }, /*#__PURE__*/React__default["default"].createElement(formik.ActionBlock, {