@bigbinary/neeto-webhooks-frontend 1.6.5 → 1.6.6

package/dist/index.js

@@ -6,7 +6,7 @@ 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';
@@ -14,9 +14,10 @@ import axios from 'axios';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
 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"
@@ -715,34 +722,24 @@ var buildColumns$1 = function buildColumns(_ref) {
     title: t("neetoWebhooks.tableHeaders.createdAt"),
     key: "createdAt",
     dataIndex: "createdAt",
-    width: "20%",
     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("neetoWebhooks.common.responseStatus"),
     key: "responseStatusCode",
-    width: "10%",
+    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"
@@ -752,13 +749,11 @@ var buildColumns$1 = function buildColumns(_ref) {
     title: t("neetoWebhooks.common.event", SINGULAR),
     key: "event",
     dataIndex: "event",
-    width: "20%",
     render: prop("label")
   }, {
     title: t("neetoWebhooks.tableHeaders.details"),
     key: "details",
     dataIndex: "details",
-    width: "15%",
     render: function render(_, delivery) {
       return /*#__PURE__*/React.createElement(Button, {
         label: t("neetoWebhooks.buttons.viewDetails"),
@@ -983,27 +978,26 @@ 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("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) {
@@ -1013,13 +1007,13 @@ var getValidationSchema = function getValidationSchema(webhooks) {
     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
     };
@@ -1027,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);
@@ -1043,10 +1037,10 @@ 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("neetoWebhooks.common.endpoint"),
     key: "endpoint",
@@ -1059,13 +1053,18 @@ 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);
+          }
+        })
       }));
     }
   }, {
@@ -1083,7 +1082,7 @@ var buildColumns = function buildColumns(_ref5) {
     render: function render(events) {
       return pluck("label", events).sort().join(", ");
     },
-    width: 200
+    width: 400
   }];
 };
 
@@ -1245,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"