@bigbinary/neeto-webhooks-frontend 2.2.3 → 2.2.5

package/README.md

@@ -47,7 +47,7 @@ The engine is used to manage webhooks across neeto products.
 4. Run the following command to copy the migrations from the engine to the host
    application:
    ```zsh
-   bundle exec rails neeto_webhooks_engine:install:migrations
+   rails g neeto_webhooks_engine:install
    ```
 5. Add the migrations to the database:
    ```zsh

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

@@ -4,7 +4,9 @@
       "event_one": "Event",
       "event_other": "Events",
       "endpoint": "Endpoint",
-      "responseStatus": "Response status"
+      "responseStatus": "Response status",
+      "webhookWithCount": "{{count}} Webhook",
+      "webhookWithCount_other": "{{count}} Webhooks"
     },
     "entity": {
       "webhook": "webhook",
@@ -17,7 +19,7 @@
       "edit": "Edit",
       "viewDetails": "View details",
       "regenerate": "Regenerate",
-      "addSecretKey": "Add secret key"
+      "generateSecretKey": "Generate secret key"
     },
     "errors": {
       "webhook": {
@@ -62,14 +64,15 @@
       "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",
       "activeStatuses": {
-        "yes": "Yes",
-        "no": "No"
-      }
+        "active": "Active",
+        "inactive": "Inactive"
+      },
+      "statusActiveHelpDescription": "The webhook is currently active. Toggle to make it inactive.",
+      "statusInactiveHelpDescription": "The webhook is currently inactive. Toggle to make it active."
     },
     "operation": {
       "edit": "Edit",

package/dist/NeetoWebhooks.js

@@ -3,6 +3,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { isPresent, removeBy, isNotEmpty, removeById, findBy } from '@bigbinary/neeto-cist';
 import { DEFAULT_STALE_TIME, SINGULAR, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
 import { useQueryParams, useMutationWithInvalidation, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import Container from '@bigbinary/neeto-molecules/Container';
 import Header$2 from '@bigbinary/neeto-molecules/Header';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
@@ -28,7 +29,6 @@ import Typography from '@bigbinary/neetoui/Typography';
 import Tab from '@bigbinary/neetoui/Tab';
 import Tag from '@bigbinary/neetoui/Tag';
 import { t as t$1 } from 'i18next';
-import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import { prop, pluck, assoc } from 'ramda';
 import Alert from '@bigbinary/neetoui/Alert';
 import Plus from '@bigbinary/neeto-icons/Plus';
@@ -40,6 +40,7 @@ import Select from '@bigbinary/neetoui/formik/Select';
 import Switch from '@bigbinary/neetoui/formik/Switch';
 import Textarea from '@bigbinary/neetoui/formik/Textarea';
 import * as yup from 'yup';
+import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
 
 var getDeliveriesPath = function getDeliveriesPath(webhooksPath) {
   return "".concat(webhooksPath, "/:webhookId/deliveries");
@@ -358,7 +359,8 @@ var Details = function Details(_ref) {
 };
 
 var buildColumns$1 = function buildColumns(_ref) {
-  var deliveryDetailsPath = _ref.deliveryDetailsPath;
+  var deliveryDetailsPath = _ref.deliveryDetailsPath,
+    page = _ref.page;
   return [{
     title: t$1("neetoWebhooks.delivery.deliveryId"),
     key: "identifier",
@@ -370,7 +372,8 @@ var buildColumns$1 = function buildColumns(_ref) {
         children: [/*#__PURE__*/jsx(Button, {
           style: "link",
           to: buildUrl(deliveryDetailsPath, {
-            deliveryId: delivery.sid
+            deliveryId: delivery.sid,
+            page: page
           }),
           weight: "semibold",
           children: delivery.identifier
@@ -437,6 +440,7 @@ var Deliveries = function Deliveries(_ref) {
   var _useQueryParams = useQueryParams(),
     _useQueryParams$page = _useQueryParams.page,
     page = _useQueryParams$page === void 0 ? DEFAULT_PAGE_INDEX : _useQueryParams$page;
+  var deliveriesPath = getDeliveriesPath(webhooksUrl);
   var deliveryDetailsPath = getDeliveryDetailsPath(deliveriesUrl);
   var _useFetchDeliveries = useFetchDeliveries(webhookId, {
       page: page,
@@ -486,7 +490,8 @@ var Deliveries = function Deliveries(_ref) {
         totalCount: totalCount,
         fixedHeight: true,
         columnData: buildColumns$1({
-          deliveryDetailsPath: deliveryDetailsPath
+          deliveryDetailsPath: deliveryDetailsPath,
+          page: page
         }),
         currentPageNumber: page,
         defaultPageSize: DEFAULT_PAGE_SIZE,
@@ -503,7 +508,10 @@ var Deliveries = function Deliveries(_ref) {
       deliveryId: deliveryId,
       webhookSid: webhookId,
       onClose: function onClose() {
-        return history.goBack();
+        return history.replace(buildUrl(deliveriesPath, {
+          webhookId: webhookId,
+          page: page
+        }));
       }
     })]
   });
@@ -554,7 +562,7 @@ var useCreateWebhook = function useCreateWebhook(options) {
     keysToInvalidate: [[QUERY_KEYS.WEBHOOK_LIST]],
     onSuccess: function onSuccess() {
       var _options$onSuccess;
-      options === null || options === void 0 ? void 0 : (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options);
+      options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 || _options$onSuccess.call(options);
     }
   });
 };
@@ -577,7 +585,7 @@ var useUpdateWebhook = function useUpdateWebhook(id, options) {
     keysToInvalidate: [[QUERY_KEYS.WEBHOOK_LIST], [QUERY_KEYS.WEBHOOK_DETAILS, id], [QUERY_KEYS.DELIVERY_LIST, id]],
     onSuccess: function onSuccess() {
       var _options$onSuccess2;
-      options === null || options === void 0 ? void 0 : (_options$onSuccess2 = options.onSuccess) === null || _options$onSuccess2 === void 0 ? void 0 : _options$onSuccess2.call(options);
+      options === null || options === void 0 || (_options$onSuccess2 = options.onSuccess) === null || _options$onSuccess2 === void 0 || _options$onSuccess2.call(options);
     }
   });
 };
@@ -586,7 +594,7 @@ var useDestroyWebhook = function useDestroyWebhook(options) {
     keysToInvalidate: [[QUERY_KEYS.WEBHOOK_LIST]],
     onSuccess: function onSuccess() {
       var _options$onSuccess3;
-      options === null || options === void 0 ? void 0 : (_options$onSuccess3 = options.onSuccess) === null || _options$onSuccess3 === void 0 ? void 0 : _options$onSuccess3.call(options);
+      options === null || options === void 0 || (_options$onSuccess3 = options.onSuccess) === null || _options$onSuccess3 === void 0 || _options$onSuccess3.call(options);
     }
   });
 };
@@ -738,7 +746,7 @@ var buildColumns = function buildColumns(_ref6) {
     title: t$1("neetoWebhooks.common.endpoint"),
     key: "endpoint",
     dataIndex: "endpoint",
-    width: 830,
+    width: 700,
     render: function render(endpoint, webhook) {
       return /*#__PURE__*/jsxs("div", {
         className: "flex items-center justify-between space-x-3",
@@ -768,16 +776,23 @@ var buildColumns = function buildColumns(_ref6) {
     key: "isActive",
     dataIndex: "isActive",
     render: function render(isActive) {
-      return isActive ? t$1("neetoWebhooks.webhook.activeStatuses.yes") : t$1("neetoWebhooks.webhook.activeStatuses.no");
+      return isActive ? /*#__PURE__*/jsx(Tag, {
+        label: t$1("neetoWebhooks.webhook.activeStatuses.active"),
+        style: "primary"
+      }) : /*#__PURE__*/jsx(Tag, {
+        label: t$1("neetoWebhooks.webhook.activeStatuses.inactive"),
+        style: "danger"
+      });
     },
-    width: 100
+    width: 150
   }, {
     title: t$1("neetoWebhooks.common.event", PLURAL),
     dataIndex: "events",
     key: "events",
     render: function render(events) {
       return pluck("label", events).sort().join(", ");
-    }
+    },
+    width: 300
   }];
 };
 var generateRandomSecret = function generateRandomSecret() {
@@ -803,7 +818,7 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
   var _useCreateWebhook = useCreateWebhook({
       onSuccess: function onSuccess() {
         onClose();
-        onCreate === null || onCreate === void 0 ? void 0 : onCreate();
+        onCreate === null || onCreate === void 0 || onCreate();
       }
     }),
     createWebhook = _useCreateWebhook.mutate;
@@ -887,14 +902,16 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
         }
       },
       children: function children(_ref2) {
-        var setFieldValue = _ref2.setFieldValue;
+        var setFieldValue = _ref2.setFieldValue,
+          values = _ref2.values;
         return isLoading ? /*#__PURE__*/jsx("div", {
           className: "flex items-center justify-center",
           children: /*#__PURE__*/jsx(Spinner, {})
         }) : /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(Pane.Body, {
+            className: "pb-6",
             children: /*#__PURE__*/jsxs("div", {
-              className: "w-full space-y-4",
+              className: "w-full space-y-4 md:space-y-6",
               children: [/*#__PURE__*/jsx(Textarea, {
                 required: true,
                 "data-cy": "endpoint-input-field",
@@ -912,25 +929,27 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                 name: "events",
                 options: events,
                 placeholder: t("neetoWebhooks.webhook.eventPlaceholder")
-              }), isSecretInputFieldVisible && /*#__PURE__*/jsxs("div", {
-                className: "flex items-center justify-between space-x-3",
-                children: [/*#__PURE__*/jsx(Input, {
-                  "data-cy": "secret-key-input-field",
-                  name: "secret",
-                  label: /*#__PURE__*/jsxs("span", {
-                    className: "flex items-center gap-x-2",
-                    children: [t("neetoWebhooks.webhook.secret"), /*#__PURE__*/jsx(HelpPopover, {
-                      helpLinkProps: {
-                        href: HELP_LINK_URLS.secrets
-                      },
-                      description: t("neetoWebhooks.webhook.secretkeyHelpDescription"),
-                      title: t("neetoWebhooks.webhook.secretkeyHelpTitle")
-                    })]
-                  }),
-                  placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
-                }), /*#__PURE__*/jsx("div", {
-                  className: "mt-6",
-                  children: /*#__PURE__*/jsx(MoreDropdown, {
+              }), /*#__PURE__*/jsxs("div", {
+                className: "space-y-2",
+                children: [/*#__PURE__*/jsxs("span", {
+                  className: "flex items-center gap-x-2",
+                  children: [t("neetoWebhooks.webhook.secret"), /*#__PURE__*/jsx(HelpPopover, {
+                    helpLinkProps: {
+                      href: HELP_LINK_URLS.secrets
+                    },
+                    popoverProps: {
+                      position: "bottom"
+                    },
+                    title: t("neetoWebhooks.webhook.secretkeyHelpTitle"),
+                    description: t("neetoWebhooks.webhook.secretkeyHelpDescription")
+                  })]
+                }), isSecretInputFieldVisible ? /*#__PURE__*/jsxs("div", {
+                  className: "flex items-center justify-between space-x-2",
+                  children: [/*#__PURE__*/jsx(Input, {
+                    "data-cy": "secret-key-input-field",
+                    name: "secret",
+                    placeholder: t("neetoWebhooks.webhook.secretPlaceholder")
+                  }), /*#__PURE__*/jsx(MoreDropdown, {
                     menuItems: [{
                       key: "regenerate-secret",
                       label: t("neetoWebhooks.buttons.regenerate"),
@@ -946,19 +965,28 @@ var AddWebhookPane = function AddWebhookPane(_ref) {
                         return handleDelete(setFieldValue);
                       }
                     }]
-                  })
+                  })]
+                }) : /*#__PURE__*/jsx(Button, {
+                  "data-cy": "add-secret-key",
+                  icon: Plus,
+                  iconPosition: "left",
+                  label: t("neetoWebhooks.buttons.generateSecretKey"),
+                  style: "link",
+                  onClick: function onClick() {
+                    return handleClick(setFieldValue);
+                  }
+                })]
+              }), /*#__PURE__*/jsxs("div", {
+                className: "flex gap-2",
+                children: [/*#__PURE__*/jsx(Switch, {
+                  label: t("neetoWebhooks.webhook.active"),
+                  name: "isActive"
+                }), /*#__PURE__*/jsx(HelpPopover, {
+                  popoverProps: {
+                    position: "bottom"
+                  },
+                  description: values.isActive ? t("neetoWebhooks.webhook.statusActiveHelpDescription") : t("neetoWebhooks.webhook.statusInactiveHelpDescription")
                 })]
-              }), /*#__PURE__*/jsx(Switch, {
-                label: t("neetoWebhooks.webhook.active"),
-                name: "isActive"
-              }), !isSecretInputFieldVisible && /*#__PURE__*/jsx(Button, {
-                "data-cy": "add-secret-key",
-                icon: Plus,
-                label: t("neetoWebhooks.buttons.addSecretKey"),
-                style: "text",
-                onClick: function onClick() {
-                  return handleClick(setFieldValue);
-                }
               })]
             })
           }), /*#__PURE__*/jsx(Pane.Footer, {
@@ -979,7 +1007,8 @@ var Header = withT(function (_ref) {
     breadcrumbs = _ref.breadcrumbs,
     title = _ref.title,
     setIsAddWebhookPaneOpen = _ref.setIsAddWebhookPaneOpen,
-    headerSize = _ref.headerSize;
+    headerSize = _ref.headerSize,
+    webhooks = _ref.webhooks;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Header$2, {
       breadcrumbs: breadcrumbs,
@@ -1001,12 +1030,14 @@ var Header = withT(function (_ref) {
           title: t("neetoWebhooks.webhook.title")
         })]
       })
-    }), /*#__PURE__*/jsx(Typography, {
-      className: "mb-3",
-      "data-cy": "webhook-description-header",
-      style: "h5",
-      weight: "normal",
-      children: t("neetoWebhooks.webhook.description")
+    }), isNotEmpty(webhooks) && /*#__PURE__*/jsx(SubHeader, {
+      leftActionBlock: /*#__PURE__*/jsx(Typography, {
+        component: "h4",
+        style: "h4",
+        children: t("neetoWebhooks.common.webhookWithCount", {
+          count: webhooks.length
+        })
+      })
     })]
   });
 });
@@ -1060,7 +1091,7 @@ var Webhooks = function Webhooks(_ref) {
   var _useDestroyWebhook = useDestroyWebhook({
       onSuccess: function onSuccess() {
         setIsDeleteAlertOpen(false);
-        onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+        onDelete === null || onDelete === void 0 || onDelete();
       }
     }),
     isDeleting = _useDestroyWebhook.isPending,
@@ -1089,7 +1120,8 @@ var Webhooks = function Webhooks(_ref) {
       breadcrumbs: breadcrumbs,
       headerSize: headerSize,
       setIsAddWebhookPaneOpen: setIsAddWebhookPaneOpen,
-      title: title
+      title: title,
+      webhooks: webhooks
     }), isNotEmpty(webhooks) ? /*#__PURE__*/jsx(TableWrapper, {
       hasPagination: totalCount > DEFAULT_PAGE_SIZE,
       children: /*#__PURE__*/jsx(Table, {