@bigbinary/neeto-webhooks-frontend 1.6.5 → 1.6.7

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

@@ -69,7 +69,7 @@
     "alert": {
       "delete": {
         "title": "Delete {{entity}}?",
-        "message": "You are deleting the {{entity}}."
+        "message": "You are permanently deleting the {{entity}}. This can't be undone."
       }
     },
     "tableHeaders": {

package/dist/index.cjs.js

@@ -21,6 +21,7 @@ var ramda = require('ramda');
 var neetoIcons = require('@bigbinary/neeto-icons');
 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 }; }
@@ -50,6 +51,7 @@ var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var DateFormat__default = /*#__PURE__*/_interopDefaultLegacy(DateFormat);
+var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 
 var getDeliveriesPath = function getDeliveriesPath(webhooksPath) {
@@ -699,12 +701,18 @@ var Details = function Details(_ref) {
     onClose: onClose
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Date, {
     date: createdAt,
+    tooltipProps: {
+      disabled: true
+    },
     typographyProps: {
       style: "h2",
       weight: "semibold"
     }
   }), /*#__PURE__*/React__default["default"].createElement("span", null, " \u2022 "), /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Time, {
     date: createdAt,
+    tooltipProps: {
+      disabled: true
+    },
     typographyProps: {
       style: "h2",
       weight: "normal"
@@ -748,34 +756,24 @@ var buildColumns$1 = function buildColumns(_ref) {
     title: i18next.t("neetoWebhooks.tableHeaders.createdAt"),
     key: "createdAt",
     dataIndex: "createdAt",
-    width: "20%",
     render: function render(createdAt) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex items-center justify-between space-x-1"
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Date, {
-        date: createdAt,
-        typographyProps: {
-          style: "body1",
-          weight: "semibold"
-        }
-      }), /*#__PURE__*/React__default["default"].createElement("span", null, " \u2022 "), /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].Time, {
-        date: createdAt,
-        typographyProps: {
-          style: "body1"
-        }
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, /*#__PURE__*/React__default["default"].createElement(DateFormat__default["default"].DateTime, {
+        date: createdAt
       })));
     }
   }, {
     title: i18next.t("neetoWebhooks.common.responseStatus"),
     key: "responseStatusCode",
-    width: "10%",
+    width: "15%",
     render: function render(_ref3) {
       var responseStatusCode = _ref3.responseStatusCode,
         status = _ref3.status;
       return /*#__PURE__*/React__default["default"].createElement("span", {
         className: "flex items-center"
       }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        className: "px-2 font-bold",
+        className: "px-2",
         style: "body2"
       }, responseStatusCode), /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
         style: status === "success" ? "success" : "warning"
@@ -785,13 +783,11 @@ var buildColumns$1 = function buildColumns(_ref) {
     title: i18next.t("neetoWebhooks.common.event", constants.SINGULAR),
     key: "event",
     dataIndex: "event",
-    width: "20%",
     render: ramda.prop("label")
   }, {
     title: i18next.t("neetoWebhooks.tableHeaders.details"),
     key: "details",
     dataIndex: "details",
-    width: "15%",
     render: function render(_, delivery) {
       return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
         label: i18next.t("neetoWebhooks.buttons.viewDetails"),
@@ -1016,27 +1012,26 @@ var useFetchEvents = function useFetchEvents() {
 
 var WEBHOOK_HELP_URL = "https://help.neetocal.com/articles/webhook";
 
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.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 = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-    buttonStyle: "text",
-    icon: neetoIcons.MenuHorizontal,
-    strategy: "fixed"
-  }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+  return [{
+    key: MENU_ITEMS.EDIT,
+    label: i18next.t("neetoWebhooks.buttons.edit"),
     onClick: onEdit
-  }, t("neetoWebhooks.buttons.edit")), /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-    style: "danger",
+  }, {
+    key: MENU_ITEMS.DELETE,
+    label: i18next.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__namespace.object().shape({
     endpoint: yup__namespace.string().trim().matches(/^(https?):\/\//i, i18next.t("neetoWebhooks.errors.webhook.invalidUrlProtocol")).url(i18next.t("neetoWebhooks.errors.webhook.invalidUrl")).required(i18next.t("neetoWebhooks.errors.webhook.required")).test("Is endpoint unique", i18next.t("neetoWebhooks.errors.webhook.urlNotUnique"), function (endpoint, ctx) {
@@ -1046,13 +1041,13 @@ var getValidationSchema = function getValidationSchema(webhooks) {
     secret: yup__namespace.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
     };
@@ -1060,14 +1055,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 !neetoCist.findBy({
       identifier: identifier
     }, values.events);
   }).map(ramda.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 !neetoCist.findBy({
       identifier: identifier
     }, initialValues.events);
@@ -1076,10 +1071,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: i18next.t("neetoWebhooks.common.endpoint"),
     key: "endpoint",
@@ -1092,13 +1087,18 @@ var buildColumns = function buildColumns(_ref5) {
         to: utils.buildUrl(deliveriesPath, {
           webhookId: webhook.id
         })
-      }, endpoint), /*#__PURE__*/React__default["default"].createElement(ActionDropdown, {
-        onDelete: function onDelete() {
-          return handleDelete(webhook.id);
+      }, endpoint), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
+        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);
+          }
+        })
       }));
     }
   }, {
@@ -1116,7 +1116,7 @@ var buildColumns = function buildColumns(_ref5) {
     render: function render(events) {
       return ramda.pluck("label", events).sort().join(", ");
     },
-    width: 200
+    width: 400
   }];
 };
 
@@ -1278,7 +1278,7 @@ var Header = function Header(_ref) {
       }
     })
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-700",
+    className: "mb-3",
     "data-cy": "webhook-description-header",
     style: "h5",
     weight: "normal"