@bigbinary/neeto-api-keys-frontend 1.0.9 → 1.0.11

package/dist/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var i18next = require('i18next');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
-var neetoCist = require('@bigbinary/neeto-cist');
+var neetocist = require('neetocist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Header = require('@bigbinary/neeto-molecules/Header');
 var neetoui = require('@bigbinary/neetoui');
@@ -17,6 +17,7 @@ var formik = require('formik');
 var ramda = require('ramda');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var yup = require('yup');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
@@ -45,6 +46,7 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
@@ -202,23 +204,27 @@ dayjs_min.exports;
 var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
-var ActionDropdown = function ActionDropdown(_ref) {
-  var handleEdit = _ref.handleEdit,
-    handleDelete = _ref.handleDelete;
-  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, {
-    onClick: handleEdit
-  }, t("neetoApiKeys.buttons.edit")), /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-    style: "danger",
-    onClick: handleDelete
-  }, t("neetoApiKeys.buttons.delete"))));
+var INITIAL_VALUES = {
+  expiresAt: null,
+  label: "",
+  hasNoExpiry: true
+};
+var NEXT_DAY = dayjs().add(1, "day").startOf("day");
+var VALIDATION_SCHEMA = yup__namespace.object({
+  expiresAt: yup__namespace.date().when("hasNoExpiry", function (hasNoExpiry, field) {
+    return hasNoExpiry ? field.nullable() : field.nullable().required(i18next.t("neetoApiKeys.validations.required", {
+      entity: i18next.t("neetoApiKeys.fields.expiryDate")
+    })).min(NEXT_DAY, i18next.t("neetoApiKeys.validations.expiry", {
+      date: utils.dateFormat.date(NEXT_DAY)
+    }));
+  }),
+  label: yup__namespace.string().required(i18next.t("neetoApiKeys.validations.required", {
+    entity: i18next.t("neetoApiKeys.fields.label")
+  }))
+});
+var MENU_ITEMS = {
+  EDIT: "edit",
+  DELETE: "delete"
 };
 
 var isInPast = function isInPast(date) {
@@ -230,9 +236,22 @@ var partlyHideToken = function partlyHideToken(key) {
 var formatExpiry = function formatExpiry(date) {
   return dayjs(date).diff(dayjs(), "day") <= 2 ? utils.dateFormat.fromNow(date) : utils.dateFormat.date(date);
 };
-var buildColumnData = function buildColumnData(_ref) {
-  var _handleDelete = _ref.handleDelete,
-    _handleEdit = _ref.handleEdit;
+var getMenuItems = function getMenuItems(_ref) {
+  var onEdit = _ref.onEdit,
+    onDelete = _ref.onDelete;
+  return [{
+    key: MENU_ITEMS.EDIT,
+    label: i18next.t("neetoApiKeys.buttons.edit"),
+    onClick: onEdit
+  }, {
+    key: MENU_ITEMS.DELETE,
+    label: i18next.t("neetoApiKeys.buttons.delete"),
+    onClick: onDelete
+  }];
+};
+var buildColumnData = function buildColumnData(_ref2) {
+  var handleDelete = _ref2.handleDelete,
+    handleEdit = _ref2.handleEdit;
   return [{
     title: i18next.t("neetoApiKeys.table.headers.label"),
     key: "label",
@@ -269,9 +288,9 @@ var buildColumnData = function buildColumnData(_ref) {
     title: i18next.t("neetoApiKeys.table.headers.status"),
     key: "status",
     width: "15%",
-    render: function render(_, _ref2) {
-      var expiresAt = _ref2.expiresAt;
-      return neetoCist.isPresent(expiresAt) && isInPast(expiresAt) ? /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+    render: function render(_, _ref3) {
+      var expiresAt = _ref3.expiresAt;
+      return neetocist.isPresent(expiresAt) && isInPast(expiresAt) ? /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
         style: "warning"
       }, i18next.t("neetoApiKeys.tags.expired")) : /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
         style: "success"
@@ -283,7 +302,7 @@ var buildColumnData = function buildColumnData(_ref) {
     dataIndex: "expiresAt",
     width: "15%",
     render: function render(expiresAt) {
-      return neetoCist.isPresent(expiresAt) ? formatExpiry(expiresAt) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      return neetocist.isPresent(expiresAt) ? formatExpiry(expiresAt) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
         style: "body2"
       }, i18next.t("neetoApiKeys.common.never"));
     }
@@ -293,20 +312,25 @@ var buildColumnData = function buildColumnData(_ref) {
     dataIndex: "createdAt",
     width: "15%",
     render: function render(createdAt) {
-      return neetoCist.isPresent(createdAt) ? utils.dateFormat.dateTime(createdAt) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      return neetocist.isPresent(createdAt) ? utils.dateFormat.dateTime(createdAt) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
         style: "body2"
       }, i18next.t("neetoApiKeys.common.never"));
     }
   }, {
     key: "opitons",
     render: function render(_, apiKey) {
-      return /*#__PURE__*/React__default["default"].createElement(ActionDropdown, {
-        handleDelete: function handleDelete() {
-          return _handleDelete(apiKey);
+      return /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
+        dropdownProps: {
+          strategy: "fixed"
         },
-        handleEdit: function handleEdit() {
-          return _handleEdit(apiKey);
-        }
+        menuItems: getMenuItems({
+          onEdit: function onEdit() {
+            return handleEdit(apiKey);
+          },
+          onDelete: function onDelete() {
+            return handleDelete(apiKey);
+          }
+        })
       });
     },
     width: "40%"
@@ -351,26 +375,6 @@ var DatePicker = function DatePicker(_ref) {
   });
 };
 
-var INITIAL_VALUES = {
-  expiresAt: null,
-  label: "",
-  hasNoExpiry: true
-};
-var NEXT_DAY = dayjs().add(1, "day").startOf("day");
-var VALIDATION_SCHEMA = yup__namespace.object({
-  expiresAt: yup__namespace.date().when("hasNoExpiry", function (hasNoExpiry, field) {
-    return hasNoExpiry ? field.nullable() : field.nullable().required(i18next.t("neetoApiKeys.validations.required", {
-      entity: i18next.t("neetoApiKeys.fields.expiryDate")
-    })).min(NEXT_DAY, i18next.t("neetoApiKeys.validations.expiry", {
-      date: utils.dateFormat.date(NEXT_DAY)
-    }));
-  }),
-  label: yup__namespace.string().required(i18next.t("neetoApiKeys.validations.required", {
-    entity: i18next.t("neetoApiKeys.fields.label")
-  }))
-});
-var DEFAULT_PAGE_SIZE = 15;
-
 var Form = function Form(_ref) {
   var _ref$initialValues = _ref.initialValues,
     initialValues = _ref$initialValues === void 0 ? INITIAL_VALUES : _ref$initialValues,
@@ -517,12 +521,12 @@ var Update = function Update(_ref) {
     });
   };
   var initialValues = _objectSpread(_objectSpread({}, apiKey), {}, {
-    hasNoExpiry: neetoCist.isNotPresent(apiKey.expiresAt)
+    hasNoExpiry: neetocist.isNotPresent(apiKey.expiresAt)
   });
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
     initialFocusRef: initialFocusRef,
     onClose: onClose,
-    isOpen: neetoCist.isNotEmpty(apiKey)
+    isOpen: neetocist.isNotEmpty(apiKey)
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2"
   }, t("neetoApiKeys.headers.updateApiKey"))), /*#__PURE__*/React__default["default"].createElement(Form, {
@@ -561,7 +565,7 @@ var usePagination = function usePagination(_ref) {
     handlePageChange(getPageFromSearchParams());
   }, []);
   React.useEffect(function () {
-    if (neetoCist.isNotEmpty(searchTerm) && currentPage !== constants.DEFAULT_PAGE_INDEX) {
+    if (neetocist.isNotEmpty(searchTerm) && currentPage !== constants.DEFAULT_PAGE_INDEX) {
       handlePageChange(constants.DEFAULT_PAGE_INDEX);
     }
   }, [searchTerm]);
@@ -604,7 +608,7 @@ var Table = function Table(_ref) {
   var queryParams = {
     searchTerm: debouncedSearchTerm,
     page: currentPage,
-    pageSize: DEFAULT_PAGE_SIZE
+    pageSize: constants.DEFAULT_PAGE_SIZE
   };
   var _useFetchApiKeys = useFetchApiKeys({
       params: queryParams,
@@ -629,7 +633,7 @@ var Table = function Table(_ref) {
     }, noDataProps)), ";");
   }
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
-    hasPagination: totalCount > DEFAULT_PAGE_SIZE
+    hasPagination: totalCount > constants.DEFAULT_PAGE_SIZE
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
     fixedHeight: true,
     columnData: buildColumnData({
@@ -637,7 +641,7 @@ var Table = function Table(_ref) {
       handleEdit: handleEdit
     }),
     currentPageNumber: currentPage,
-    defaultPageSize: DEFAULT_PAGE_SIZE,
+    defaultPageSize: constants.DEFAULT_PAGE_SIZE,
     handlePageChange: handlePageChange,
     loading: isFetching,
     rowData: apiKeys,
@@ -648,24 +652,23 @@ var Table = function Table(_ref) {
 var ApiKeys = function ApiKeys(_ref) {
   var noDataProps = _ref.noDataProps,
     headerProps = _ref.headerProps;
-  var _useState = React.useState(""),
+  var _useState = React.useState({}),
     _useState2 = _slicedToArray(_useState, 2),
-    searchTerm = _useState2[0],
-    setSearchTerm = _useState2[1];
+    apiKeyToBeDeleted = _useState2[0],
+    setApiKeyToBeDeleted = _useState2[1];
   var _useState3 = React.useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
-    apiKeyToBeDeleted = _useState4[0],
-    setApiKeyToBeDeleted = _useState4[1];
-  var _useState5 = React.useState({}),
+    apiKeyToBeEdited = _useState4[0],
+    setApiKeyToBeEdited = _useState4[1];
+  var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    apiKeyToBeEdited = _useState6[0],
-    setApiKeyToBeEdited = _useState6[1];
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isCreatePaneOpen = _useState8[0],
-    setIsCreatePaneOpen = _useState8[1];
+    isCreatePaneOpen = _useState6[0],
+    setIsCreatePaneOpen = _useState6[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.search_term,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
   var _useDeleteApiKey = useDeleteApiKey(function () {
       return setApiKeyToBeDeleted({});
     }),
@@ -682,11 +685,6 @@ var ApiKeys = function ApiKeys(_ref) {
       }
     }),
     searchProps: {
-      value: searchTerm,
-      onChange: function onChange(_ref2) {
-        var value = _ref2.target.value;
-        return setSearchTerm(value);
-      },
       placeholder: t("neetoApiKeys.placeholders.search")
     }
   }, headerProps)), /*#__PURE__*/React__default["default"].createElement(Table, {
@@ -695,7 +693,7 @@ var ApiKeys = function ApiKeys(_ref) {
     searchTerm: searchTerm,
     noDataProps: noDataProps
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
-    isOpen: neetoCist.isNotEmpty(apiKeyToBeDeleted),
+    isOpen: neetocist.isNotEmpty(apiKeyToBeDeleted),
     isSubmitting: isDeleting,
     submitButtonLabel: t("neetoApiKeys.buttons.delete"),
     title: t("neetoApiKeys.alert.titles.deleteApiKey"),