@bigbinary/neeto-webhooks-frontend 1.6.4 → 1.6.6

package/dist/index.js

@@ -6,17 +6,18 @@ import Container from '@bigbinary/neeto-molecules/Container';
 import Header$2 from '@bigbinary/neeto-molecules/Header';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
-import { Spinner, Typography, Tag, Tab, Pane, Button, Table, NoData, Dropdown, Alert } from '@bigbinary/neetoui';
+import { Spinner, Typography, Tag, Tab, Pane, Button, Table, NoData, Alert } from '@bigbinary/neetoui';
 import { useTranslation, Trans } 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 { t } from 'i18next';
 import { prop, pluck, assoc } from 'ramda';
-import { MenuHorizontal, Info } from '@bigbinary/neeto-icons';
+import { Info } from '@bigbinary/neeto-icons';
 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) {
@@ -666,12 +667,18 @@ var Details = function Details(_ref) {
     onClose: onClose
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DateFormat.Date, {
     date: createdAt,
+    tooltipProps: {
+      disabled: true
+    },
     typographyProps: {
       style: "h2",
       weight: "semibold"
     }
   }), /*#__PURE__*/React.createElement("span", null, " \u2022 "), /*#__PURE__*/React.createElement(DateFormat.Time, {
     date: createdAt,
+    tooltipProps: {
+      disabled: true
+    },
     typographyProps: {
       style: "h2",
       weight: "normal"
@@ -696,73 +703,60 @@ var Details = function Details(_ref) {
 var buildColumns$1 = function buildColumns(_ref) {
   var handleDetailsClick = _ref.handleDetailsClick;
   return [{
-    title: t$1("neetoWebhooks.delivery.identifier", SINGULAR),
+    title: t("neetoWebhooks.delivery.identifier", SINGULAR),
     key: "identifier",
-    width: 300,
+    width: "35%",
     render: function render(_ref2) {
       var identifier = _ref2.identifier,
         redelivery = _ref2.redelivery;
       return /*#__PURE__*/React.createElement("div", {
-        className: "flex space-x-1"
+        className: "flex items-center gap-x-3"
       }, /*#__PURE__*/React.createElement(Typography, {
-        className: "px-2",
         style: "body2",
         weight: "semibold"
       }, identifier), redelivery && /*#__PURE__*/React.createElement(Tag, {
         style: "info"
-      }, t$1("neetoWebhooks.delivery.redelivery")));
+      }, t("neetoWebhooks.delivery.redelivery")));
     }
   }, {
-    title: t$1("neetoWebhooks.tableHeaders.createdAt"),
+    title: t("neetoWebhooks.tableHeaders.createdAt"),
     key: "createdAt",
     dataIndex: "createdAt",
-    width: 300,
     render: function render(createdAt) {
       return /*#__PURE__*/React.createElement("div", {
         className: "flex items-center justify-between space-x-1"
-      }, /*#__PURE__*/React.createElement(Typography, null, /*#__PURE__*/React.createElement(DateFormat.Date, {
-        date: createdAt,
-        typographyProps: {
-          style: "body1",
-          weight: "semibold"
-        }
-      }), /*#__PURE__*/React.createElement("span", null, " \u2022 "), /*#__PURE__*/React.createElement(DateFormat.Time, {
-        date: createdAt,
-        typographyProps: {
-          style: "body1"
-        }
+      }, /*#__PURE__*/React.createElement(Typography, null, /*#__PURE__*/React.createElement(DateFormat.DateTime, {
+        date: createdAt
       })));
     }
   }, {
-    title: t$1("neetoWebhooks.common.responseStatus"),
+    title: t("neetoWebhooks.common.responseStatus"),
     key: "responseStatusCode",
-    width: 150,
+    width: "15%",
     render: function render(_ref3) {
       var responseStatusCode = _ref3.responseStatusCode,
         status = _ref3.status;
       return /*#__PURE__*/React.createElement("span", {
         className: "flex items-center"
       }, /*#__PURE__*/React.createElement(Typography, {
-        className: "px-2 font-bold",
+        className: "px-2",
         style: "body2"
       }, responseStatusCode), /*#__PURE__*/React.createElement(Tag, {
         style: status === "success" ? "success" : "warning"
       }, status));
     }
   }, {
-    title: t$1("neetoWebhooks.common.event", SINGULAR),
+    title: t("neetoWebhooks.common.event", SINGULAR),
     key: "event",
     dataIndex: "event",
-    width: 100,
     render: prop("label")
   }, {
-    title: t$1("neetoWebhooks.tableHeaders.details"),
+    title: t("neetoWebhooks.tableHeaders.details"),
     key: "details",
     dataIndex: "details",
-    width: 150,
     render: function render(_, delivery) {
       return /*#__PURE__*/React.createElement(Button, {
-        label: t$1("neetoWebhooks.buttons.viewDetails"),
+        label: t("neetoWebhooks.buttons.viewDetails"),
         size: "small",
         onClick: function onClick() {
           return handleDetailsClick(delivery);
@@ -984,43 +978,42 @@ var useFetchEvents = function useFetchEvents() {
 
 var WEBHOOK_HELP_URL = "https://help.neetocal.com/articles/webhook";
 
-var Menu = Dropdown.Menu,
-  MenuItem = Dropdown.MenuItem;
-var ActionDropdown = function ActionDropdown(_ref) {
+var MENU_ITEMS = {
+  EDIT: "edit",
+  DELETE: "delete"
+};
+
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var getMenuItems = function getMenuItems(_ref) {
   var onEdit = _ref.onEdit,
     onDelete = _ref.onDelete;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(Dropdown, {
-    buttonStyle: "text",
-    icon: MenuHorizontal,
-    strategy: "fixed"
-  }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
+  return [{
+    key: MENU_ITEMS.EDIT,
+    label: t("neetoWebhooks.buttons.edit"),
     onClick: onEdit
-  }, t("neetoWebhooks.buttons.edit")), /*#__PURE__*/React.createElement(MenuItem.Button, {
-    style: "danger",
+  }, {
+    key: MENU_ITEMS.DELETE,
+    label: t("neetoWebhooks.buttons.delete"),
     onClick: onDelete
-  }, t("neetoWebhooks.buttons.delete"))));
+  }];
 };
-
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getValidationSchema = function getValidationSchema(webhooks) {
   return yup.object().shape({
-    endpoint: yup.string().trim().matches(/^(https?):\/\//i, t$1("neetoWebhooks.errors.webhook.invalidUrlProtocol")).url(t$1("neetoWebhooks.errors.webhook.invalidUrl")).required(t$1("neetoWebhooks.errors.webhook.required")).test("Is endpoint unique", t$1("neetoWebhooks.errors.webhook.urlNotUnique"), function (endpoint, ctx) {
+    endpoint: yup.string().trim().matches(/^(https?):\/\//i, t("neetoWebhooks.errors.webhook.invalidUrlProtocol")).url(t("neetoWebhooks.errors.webhook.invalidUrl")).required(t("neetoWebhooks.errors.webhook.required")).test("Is endpoint unique", t("neetoWebhooks.errors.webhook.urlNotUnique"), function (endpoint, ctx) {
       return !pluck("endpoint", removeById(ctx.parent.id, webhooks)).includes(endpoint === null || endpoint === void 0 ? void 0 : endpoint.trim());
     }),
-    events: yup.array().min(1, t$1("neetoWebhooks.errors.webhook.events.required")),
+    events: yup.array().min(1, t("neetoWebhooks.errors.webhook.events.required")),
     secret: yup.string().trim().nullable()
   });
 };
-var buildPayload = function buildPayload(_ref) {
+var buildPayload = function buildPayload(_ref2) {
   var _initialValues$events;
-  var isEditing = _ref.isEditing,
-    values = _ref.values,
-    initialValues = _ref.initialValues;
-  var events = values.events.map(function (_ref2) {
-    var identifier = _ref2.identifier;
+  var isEditing = _ref2.isEditing,
+    values = _ref2.values,
+    initialValues = _ref2.initialValues;
+  var events = values.events.map(function (_ref3) {
+    var identifier = _ref3.identifier;
     return {
       identifier: identifier
     };
@@ -1028,14 +1021,14 @@ var buildPayload = function buildPayload(_ref) {
   if (!isEditing) return _objectSpread$1(_objectSpread$1({}, values), {}, {
     eventsAttributes: events
   });
-  var deletable = ((_initialValues$events = initialValues.events) !== null && _initialValues$events !== void 0 ? _initialValues$events : []).filter(function (_ref3) {
-    var identifier = _ref3.identifier;
+  var deletable = ((_initialValues$events = initialValues.events) !== null && _initialValues$events !== void 0 ? _initialValues$events : []).filter(function (_ref4) {
+    var identifier = _ref4.identifier;
     return !findBy({
       identifier: identifier
     }, values.events);
   }).map(assoc("_destroy", true));
-  var creatable = values.events.filter(function (_ref4) {
-    var identifier = _ref4.identifier;
+  var creatable = values.events.filter(function (_ref5) {
+    var identifier = _ref5.identifier;
     return !findBy({
       identifier: identifier
     }, initialValues.events);
@@ -1044,12 +1037,12 @@ var buildPayload = function buildPayload(_ref) {
     eventsAttributes: [].concat(_toConsumableArray(creatable), _toConsumableArray(deletable))
   });
 };
-var buildColumns = function buildColumns(_ref5) {
-  var handleDelete = _ref5.handleDelete,
-    handleEdit = _ref5.handleEdit,
-    deliveriesPath = _ref5.deliveriesPath;
+var buildColumns = function buildColumns(_ref6) {
+  var handleDelete = _ref6.handleDelete,
+    handleEdit = _ref6.handleEdit,
+    deliveriesPath = _ref6.deliveriesPath;
   return [{
-    title: t$1("neetoWebhooks.common.endpoint"),
+    title: t("neetoWebhooks.common.endpoint"),
     key: "endpoint",
     dataIndex: "endpoint",
     render: function render(endpoint, webhook) {
@@ -1060,31 +1053,36 @@ var buildColumns = function buildColumns(_ref5) {
         to: buildUrl(deliveriesPath, {
           webhookId: webhook.id
         })
-      }, endpoint), /*#__PURE__*/React.createElement(ActionDropdown, {
-        onDelete: function onDelete() {
-          return handleDelete(webhook.id);
+      }, endpoint), /*#__PURE__*/React.createElement(MoreDropdown, {
+        dropdownProps: {
+          strategy: "fixed"
         },
-        onEdit: function onEdit() {
-          return handleEdit(webhook.id);
-        }
+        menuItems: getMenuItems({
+          onEdit: function onEdit() {
+            return handleEdit(webhook.id);
+          },
+          onDelete: function onDelete() {
+            return handleDelete(webhook.id);
+          }
+        })
       }));
     }
   }, {
-    title: t$1("neetoWebhooks.webhook.active"),
+    title: t("neetoWebhooks.webhook.active"),
     key: "isActive",
     dataIndex: "isActive",
     render: function render(isActive) {
-      return isActive ? t$1("neetoWebhooks.webhook.activeStatuses.yes") : t$1("neetoWebhooks.webhook.activeStatuses.no");
+      return isActive ? t("neetoWebhooks.webhook.activeStatuses.yes") : t("neetoWebhooks.webhook.activeStatuses.no");
     },
     width: 100
   }, {
-    title: t$1("neetoWebhooks.common.event", PLURAL),
+    title: t("neetoWebhooks.common.event", PLURAL),
     dataIndex: "events",
     key: "events",
     render: function render(events) {
       return pluck("label", events).sort().join(", ");
     },
-    width: 200
+    width: 400
   }];
 };
 
@@ -1246,7 +1244,7 @@ var Header = function Header(_ref) {
       }
     })
   }), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-700",
+    className: "mb-3",
     "data-cy": "webhook-description-header",
     style: "h5",
     weight: "normal"
@@ -1400,10 +1398,5 @@ var NeetoWebhooks = function NeetoWebhooks(_ref) {
   }));
 };
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = ".deliveries__list,.webhooks__list{height:calc(100vh - 200px);overflow-y:auto}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL193ZWJob29rLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvbWFpbi5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGtDQUNFLDBCQUFBLENBQ0EsZUNNRiIsInNvdXJjZXNDb250ZW50IjpbIi53ZWJob29rc19fbGlzdCB7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDIwMHB4KTtcbiAgb3ZlcmZsb3cteTogYXV0bztcbn1cbiIsIi5kZWxpdmVyaWVzX19saXN0IHtcbiAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMjAwcHgpO1xuICBvdmVyZmxvdy15OiBhdXRvO1xufVxuXG4ud2ViaG9va3NfX2xpc3Qge1xuICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAyMDBweCk7XG4gIG92ZXJmbG93LXk6IGF1dG87XG59Il19 */";
-n(css,{});
-
 export { NeetoWebhooks };
 //# sourceMappingURL=index.js.map