@bigbinary/neeto-api-keys-frontend 2.0.0 → 2.2.0

package/dist/ApiKeys.js

@@ -0,0 +1,748 @@
+import { useState, useEffect, useRef } from 'react';
+import { t } from 'i18next';
+import { isNotEmpty, isPresent, isNotPresent } from '@bigbinary/neeto-cist';
+import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
+import { useMutationWithInvalidation, withT, withTitle, useQueryParams, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import Header from '@bigbinary/neeto-molecules/Header';
+import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
+import Alert from '@bigbinary/neetoui/Alert';
+import Button from '@bigbinary/neetoui/Button';
+import { useTranslation, Trans } from 'react-i18next';
+import { isEmpty, prop } from 'ramda';
+import { useHistory } from 'react-router-dom';
+import { getQueryParams, buildUrl, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
+import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/initializers';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import Pane from '@bigbinary/neetoui/Pane';
+import Typography from '@bigbinary/neetoui/Typography';
+import NeetoUIForm from '@bigbinary/neetoui/formik/Form';
+import Input from '@bigbinary/neetoui/formik/Input';
+import Checkbox from '@bigbinary/neetoui/formik/Checkbox';
+import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
+import { Field } from 'formik';
+import NeetoUIDatePicker from '@bigbinary/neetoui/DatePicker';
+import dayjs from 'dayjs';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
+import Tag from '@bigbinary/neetoui/Tag';
+import * as yup from 'yup';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
+import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import NeetoUITable from '@bigbinary/neetoui/Table';
+import NoData from '@bigbinary/neetoui/NoData';
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+var getPageFromSearchParams = function getPageFromSearchParams() {
+  var _getQueryParams = getQueryParams(),
+    page = _getQueryParams.page;
+  return parseInt(page) || DEFAULT_PAGE_INDEX;
+};
+var setPageSearchParam = function setPageSearchParam(_ref) {
+  var page = _ref.page,
+    history = _ref.history;
+  var searchParams = page !== DEFAULT_PAGE_INDEX && buildUrl("", {
+    page: page
+  });
+  history.push({
+    search: searchParams
+  });
+};
+
+var usePagination = function usePagination(_ref) {
+  var searchTerm = _ref.searchTerm;
+  var _useState = useState(getPageFromSearchParams),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentPage = _useState2[0],
+    setCurrentPage = _useState2[1];
+  var history = useHistory();
+  useEffect(function () {
+    handlePageChange(getPageFromSearchParams());
+  }, []);
+  useEffect(function () {
+    if (isNotEmpty(searchTerm) && currentPage !== DEFAULT_PAGE_INDEX) {
+      handlePageChange(DEFAULT_PAGE_INDEX);
+    }
+  }, [searchTerm]);
+  var handlePageChange = function handlePageChange(page) {
+    setCurrentPage(page);
+    setPageSearchParam({
+      page: page,
+      history: history
+    });
+  };
+  var onFetchSuccess = function onFetchSuccess(_ref2) {
+    var totalCount = _ref2.totalCount,
+      apiKeys = _ref2.apiKeys;
+    if (totalCount !== 0 && isEmpty(apiKeys)) {
+      handlePageChange(DEFAULT_PAGE_INDEX);
+    }
+  };
+  return {
+    currentPage: currentPage,
+    handlePageChange: handlePageChange,
+    onFetchSuccess: onFetchSuccess
+  };
+};
+
+var API_KEYS_BASE_URL = "/neeto_api_keys_engine/api/v1/api_keys";
+var HELP_DOC_URL = "https://help.".concat(globalProps$1.appName.toLowerCase(), ".com/articles/api-keys");
+
+var fetch = function fetch(params) {
+  return axios.get(API_KEYS_BASE_URL, {
+    params: params
+  });
+};
+var create = function create(payload) {
+  return axios.post(API_KEYS_BASE_URL, {
+    apiKey: payload
+  });
+};
+var update = function update(_ref) {
+  var id = _ref.id,
+    payload = _ref.payload;
+  return axios.put("".concat(API_KEYS_BASE_URL, "/").concat(id), {
+    apiKey: payload
+  });
+};
+var destroy = function destroy(id) {
+  return axios["delete"]("".concat(API_KEYS_BASE_URL, "/").concat(id));
+};
+var apiKeysApi = {
+  fetch: fetch,
+  create: create,
+  update: update,
+  destroy: destroy
+};
+
+var QUERY_KEYS = {
+  API_KEYS: "api-keys"
+};
+
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useFetchApiKeys = function useFetchApiKeys(_ref) {
+  var params = _ref.params,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options;
+  return useQuery(_objectSpread$4({
+    queryKey: [QUERY_KEYS.API_KEYS, params],
+    queryFn: function queryFn() {
+      return apiKeysApi.fetch(params);
+    }
+  }, options));
+};
+var useCreateApiKey = function useCreateApiKey(onSuccess) {
+  return useMutationWithInvalidation(apiKeysApi.create, {
+    keysToInvalidate: [[QUERY_KEYS.API_KEYS]],
+    onSuccess: onSuccess
+  });
+};
+var useUpdateApiKey = function useUpdateApiKey(onSuccess) {
+  return useMutationWithInvalidation(function (_ref2) {
+    var id = _ref2.id,
+      payload = _ref2.payload;
+    return apiKeysApi.update({
+      id: id,
+      payload: payload
+    });
+  }, {
+    keysToInvalidate: [[QUERY_KEYS.API_KEYS]],
+    onSuccess: onSuccess
+  });
+};
+var useDeleteApiKey = function useDeleteApiKey(onSuccess) {
+  return useMutationWithInvalidation(apiKeysApi.destroy, {
+    keysToInvalidate: [[QUERY_KEYS.API_KEYS]],
+    onSuccess: onSuccess
+  });
+};
+
+var INITIAL_VALUES = {
+  expiresAt: null,
+  label: "",
+  hasNoExpiry: true
+};
+var NEXT_DAY = dayjs().add(1, "day").startOf("day");
+var VALIDATION_SCHEMA = yup.object({
+  expiresAt: yup.date().when("hasNoExpiry", function (hasNoExpiry, field) {
+    return hasNoExpiry ? field.nullable() : field.nullable().required(t("neetoApiKeys.validations.required", {
+      entity: t("neetoApiKeys.fields.expiryDate")
+    })).min(NEXT_DAY, t("neetoApiKeys.validations.expiry", {
+      date: dateFormat.date(NEXT_DAY)
+    }));
+  }),
+  label: yup.string().required(t("neetoApiKeys.validations.required", {
+    entity: t("neetoApiKeys.fields.label")
+  }))
+});
+var MENU_ITEMS = {
+  EDIT: "edit",
+  DELETE: "delete"
+};
+
+var isInPast = function isInPast(date) {
+  return dayjs(date).isBefore(dayjs());
+};
+var partlyHideToken = function partlyHideToken(key) {
+  return key.slice(-4).padStart(20, "*");
+};
+var formatExpiry = function formatExpiry(date) {
+  return dayjs(date).diff(dayjs(), "day") <= 2 ? dateFormat.fromNow(date) : dateFormat.date(date);
+};
+var getMenuItems = function getMenuItems(_ref) {
+  var onEdit = _ref.onEdit,
+    onDelete = _ref.onDelete;
+  return [{
+    key: MENU_ITEMS.EDIT,
+    label: t("neetoApiKeys.buttons.edit"),
+    onClick: onEdit
+  }, {
+    key: MENU_ITEMS.DELETE,
+    label: t("neetoApiKeys.buttons.delete"),
+    onClick: onDelete
+  }];
+};
+var buildColumnData = function buildColumnData(_ref2) {
+  var handleDelete = _ref2.handleDelete,
+    handleEdit = _ref2.handleEdit;
+  return [{
+    title: t("neetoApiKeys.table.headers.label"),
+    key: "label",
+    dataIndex: "label",
+    width: 400,
+    render: function render(label, apiKey) {
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between space-x-3",
+        children: [/*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: label
+        }), /*#__PURE__*/jsx(MoreDropdown, {
+          dropdownProps: {
+            strategy: "fixed"
+          },
+          menuItems: getMenuItems({
+            onEdit: function onEdit() {
+              return handleEdit(apiKey);
+            },
+            onDelete: function onDelete() {
+              return handleDelete(apiKey);
+            }
+          })
+        })]
+      });
+    }
+  }, {
+    title: t("neetoApiKeys.table.headers.token"),
+    key: "token",
+    dataIndex: "token",
+    width: 400,
+    render: function render(token) {
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: partlyHideToken(token)
+        }), /*#__PURE__*/jsx(CopyToClipboardButton, {
+          style: "text",
+          value: token
+        })]
+      });
+    }
+  }, {
+    title: t("neetoApiKeys.table.headers.status"),
+    key: "status",
+    width: 144,
+    render: function render(_, _ref3) {
+      var expiresAt = _ref3.expiresAt;
+      return isPresent(expiresAt) && isInPast(expiresAt) ? /*#__PURE__*/jsx(Tag, {
+        style: "warning",
+        children: t("neetoApiKeys.tags.expired")
+      }) : /*#__PURE__*/jsx(Tag, {
+        style: "success",
+        children: t("neetoApiKeys.tags.active")
+      });
+    }
+  }, {
+    title: t("neetoApiKeys.table.headers.expiresAt"),
+    key: "expiresAt",
+    dataIndex: "expiresAt",
+    width: 200,
+    render: function render(expiresAt) {
+      return isPresent(expiresAt) ? formatExpiry(expiresAt) : /*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        children: t("neetoApiKeys.common.never")
+      });
+    }
+  }, {
+    title: t("neetoApiKeys.table.headers.createdAt"),
+    key: "createdAt",
+    dataIndex: "createdAt",
+    width: 200,
+    render: function render(createdAt) {
+      return isPresent(createdAt) ? dateFormat.dateTime(createdAt) : /*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        children: t("neetoApiKeys.common.never")
+      });
+    }
+  }];
+};
+var getStartOfTime = function getStartOfTime(time, unit) {
+  return dayjs(time).startOf(unit);
+};
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DatePicker = function DatePicker(_ref) {
+  var defaultValue = _ref.defaultValue,
+    disabledDate = _ref.disabledDate,
+    label = _ref.label,
+    placeholder = _ref.placeholder,
+    name = _ref.name,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return /*#__PURE__*/jsx(Field, {
+    name: name,
+    children: function children(_ref2) {
+      var _globalProps;
+      var field = _ref2.field,
+        meta = _ref2.meta,
+        setFieldValue = _ref2.form.setFieldValue;
+      return /*#__PURE__*/jsx(NeetoUIDatePicker, _objectSpread$3(_objectSpread$3({
+        defaultValue: defaultValue,
+        disabled: disabled,
+        disabledDate: disabledDate,
+        label: label,
+        placeholder: placeholder,
+        allowClear: false,
+        className: "w-full",
+        error: meta.touched && meta.error,
+        format: (_globalProps = globalProps) === null || _globalProps === void 0 || (_globalProps = _globalProps.user) === null || _globalProps === void 0 ? void 0 : _globalProps.dateFormat,
+        getPopupContainer: prop("parentNode")
+      }, field), {}, {
+        onChange: function onChange(date) {
+          setFieldValue(field.name, getStartOfTime(date, "day"));
+        }
+      }));
+    }
+  });
+};
+
+var Form = withT(function (_ref) {
+  var t = _ref.t,
+    _ref$initialValues = _ref.initialValues,
+    initialValues = _ref$initialValues === void 0 ? INITIAL_VALUES : _ref$initialValues,
+    isSubmitting = _ref.isSubmitting,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit,
+    initialFocusRef = _ref.initialFocusRef;
+  return /*#__PURE__*/jsx(NeetoUIForm, {
+    formikProps: {
+      validationSchema: VALIDATION_SCHEMA,
+      initialValues: initialValues,
+      onSubmit: onSubmit
+    },
+    children: function children(_ref2) {
+      var setFieldValue = _ref2.setFieldValue,
+        _ref2$values = _ref2.values,
+        _ref2$values2 = _ref2$values === void 0 ? {} : _ref2$values,
+        hasNoExpiry = _ref2$values2.hasNoExpiry,
+        expiresAt = _ref2$values2.expiresAt;
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Pane.Body, {
+          children: /*#__PURE__*/jsxs("div", {
+            className: "w-full space-y-4",
+            children: [/*#__PURE__*/jsx(Input, {
+              autoFocus: true,
+              label: t("neetoApiKeys.fields.label"),
+              name: "label",
+              placeholder: t("neetoApiKeys.placeholders.label"),
+              ref: initialFocusRef
+            }), /*#__PURE__*/jsxs("div", {
+              className: "space-y-2",
+              children: [!hasNoExpiry && /*#__PURE__*/jsx(DatePicker, {
+                defaultValue: expiresAt,
+                disabledDate: function disabledDate(date) {
+                  return date < NEXT_DAY;
+                },
+                label: t("neetoApiKeys.fields.expiryDate"),
+                name: "expiresAt",
+                placeholder: t("neetoApiKeys.placeholders.selectExpiryDate")
+              }), /*#__PURE__*/jsx(Checkbox, {
+                checked: hasNoExpiry,
+                label: t("neetoApiKeys.fields.neverExpire"),
+                name: "hasNoExpiry",
+                onChange: function onChange() {
+                  setFieldValue("expiresAt", null);
+                  setFieldValue("hasNoExpiry", !hasNoExpiry);
+                }
+              })]
+            })]
+          })
+        }), /*#__PURE__*/jsx(Pane.Footer, {
+          children: /*#__PURE__*/jsx(ActionBlock, {
+            isSubmitting: isSubmitting,
+            cancelButtonProps: {
+              onClick: onClose
+            }
+          })
+        })]
+      });
+    }
+  });
+});
+
+var Create = function Create(_ref) {
+  var onClose = _ref.onClose,
+    isOpen = _ref.isOpen;
+  var initialFocusRef = useRef(null);
+  var _useCreateApiKey = useCreateApiKey(onClose),
+    createApiKey = _useCreateApiKey.mutate,
+    isCreating = _useCreateApiKey.isPending;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs(Pane, {
+    initialFocusRef: initialFocusRef,
+    isOpen: isOpen,
+    onClose: onClose,
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsxs(Typography, {
+        style: "h2",
+        children: [t("neetoApiKeys.headers.createApiKey"), /*#__PURE__*/jsx(HelpPopover, {
+          className: "ml-2",
+          description: t("neetoApiKeys.tooltips.apiKeysDescription"),
+          helpLinkProps: {
+            href: HELP_DOC_URL
+          },
+          title: t("neetoApiKeys.tooltips.apiKeys")
+        })]
+      })
+    }), /*#__PURE__*/jsx(Form, {
+      initialFocusRef: initialFocusRef,
+      onClose: onClose,
+      isSubmitting: isCreating,
+      onSubmit: createApiKey
+    })]
+  });
+};
+
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Update = function Update(_ref) {
+  var onClose = _ref.onClose,
+    apiKey = _ref.apiKey;
+  var initialFocusRef = useRef(null);
+  var _useUpdateApiKey = useUpdateApiKey(onClose),
+    updateApiKey = _useUpdateApiKey.mutate,
+    isUpdating = _useUpdateApiKey.isPending;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleUpdate = function handleUpdate(values) {
+    updateApiKey({
+      id: apiKey.id,
+      payload: values
+    });
+  };
+  var initialValues = _objectSpread$2(_objectSpread$2({}, apiKey), {}, {
+    hasNoExpiry: isNotPresent(apiKey.expiresAt)
+  });
+  return /*#__PURE__*/jsxs(Pane, {
+    initialFocusRef: initialFocusRef,
+    onClose: onClose,
+    isOpen: isNotEmpty(apiKey),
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsxs(Typography, {
+        style: "h2",
+        children: [t("neetoApiKeys.headers.updateApiKey"), /*#__PURE__*/jsx(HelpPopover, {
+          className: "ml-2",
+          description: t("neetoApiKeys.tooltips.apiKeysDescription"),
+          helpLinkProps: {
+            href: HELP_DOC_URL
+          },
+          title: t("neetoApiKeys.tooltips.apiKeys")
+        })]
+      })
+    }), /*#__PURE__*/jsx(Form, {
+      initialFocusRef: initialFocusRef,
+      initialValues: initialValues,
+      onClose: onClose,
+      isSubmitting: isUpdating,
+      onSubmit: handleUpdate
+    })]
+  });
+};
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Table = function Table(_ref) {
+  var handleDelete = _ref.handleDelete,
+    handleEdit = _ref.handleEdit,
+    currentPage = _ref.currentPage,
+    setIsCreatePaneOpen = _ref.setIsCreatePaneOpen,
+    _ref$noDataProps = _ref.noDataProps,
+    noDataProps = _ref$noDataProps === void 0 ? {} : _ref$noDataProps,
+    data = _ref.data,
+    isLoading = _ref.isLoading,
+    isFetching = _ref.isFetching,
+    handlePageChange = _ref.handlePageChange;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (isLoading) return /*#__PURE__*/jsx(PageLoader, {});
+  if (isEmpty(data === null || data === void 0 ? void 0 : data.apiKeys)) {
+    return /*#__PURE__*/jsxs("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: [/*#__PURE__*/jsx(NoData, _objectSpread$1({
+        className: "w-full",
+        title: t("neetoApiKeys.noData.title"),
+        helpText: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoApiKeys.noData.helpText",
+          components: {
+            helpLink: /*#__PURE__*/jsx(Button, {
+              href: HELP_DOC_URL,
+              style: "link",
+              target: "_blank"
+            })
+          }
+        }),
+        primaryButtonProps: {
+          label: t("neetoApiKeys.buttons.addApiKey"),
+          onClick: function onClick() {
+            return setIsCreatePaneOpen(true);
+          }
+        }
+      }, noDataProps)), ";"]
+    });
+  }
+  return /*#__PURE__*/jsx(TableWrapper, {
+    hasPagination: (data === null || data === void 0 ? void 0 : data.totalCount) > DEFAULT_PAGE_SIZE,
+    children: /*#__PURE__*/jsx(NeetoUITable, {
+      handlePageChange: handlePageChange,
+      fixedHeight: true,
+      columnData: buildColumnData({
+        handleDelete: handleDelete,
+        handleEdit: handleEdit
+      }),
+      currentPageNumber: currentPage,
+      defaultPageSize: DEFAULT_PAGE_SIZE,
+      loading: isFetching,
+      rowData: data === null || data === void 0 ? void 0 : data.apiKeys,
+      totalCount: data === null || data === void 0 ? void 0 : data.totalCount
+    })
+  });
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ApiKeys = function ApiKeys(_ref) {
+  var noDataProps = _ref.noDataProps,
+    headerProps = _ref.headerProps;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    apiKeyToBeDeleted = _useState2[0],
+    setApiKeyToBeDeleted = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    apiKeyToBeEdited = _useState4[0],
+    setApiKeyToBeEdited = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isCreatePaneOpen = _useState6[0],
+    setIsCreatePaneOpen = _useState6[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useQueryParams = useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var _useDeleteApiKey = useDeleteApiKey(function () {
+      return setApiKeyToBeDeleted({});
+    }),
+    deleteApiKey = _useDeleteApiKey.mutate,
+    isDeleting = _useDeleteApiKey.isPending;
+  var debouncedSearchTerm = useDebounce(searchTerm);
+  var _usePagination = usePagination({
+      searchTerm: debouncedSearchTerm
+    }),
+    currentPage = _usePagination.currentPage,
+    handlePageChange = _usePagination.handlePageChange,
+    onFetchSuccess = _usePagination.onFetchSuccess;
+  var queryParams = {
+    searchTerm: debouncedSearchTerm,
+    page: currentPage,
+    pageSize: DEFAULT_PAGE_SIZE
+  };
+  var _useFetchApiKeys = useFetchApiKeys({
+      params: queryParams
+    }),
+    data = _useFetchApiKeys.data,
+    isLoading = _useFetchApiKeys.isLoading,
+    isFetching = _useFetchApiKeys.isFetching;
+  var showFilters = isPresent(debouncedSearchTerm) || (data === null || data === void 0 ? void 0 : data.totalCount) > 0;
+  useEffect(function () {
+    if (!data) return;
+    onFetchSuccess(data);
+  }, [data]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex h-full w-full flex-col",
+    children: [/*#__PURE__*/jsx(Header, _objectSpread({
+      actionBlock: /*#__PURE__*/jsx(Button, {
+        label: t("neetoApiKeys.buttons.addApiKey"),
+        onClick: function onClick() {
+          return setIsCreatePaneOpen(true);
+        }
+      }),
+      searchProps: showFilters && {
+        placeholder: t("neetoApiKeys.placeholders.search")
+      },
+      title: /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-x-2",
+        children: [t("neetoApiKeys.common.apiKey", PLURAL), /*#__PURE__*/jsx(HelpPopover, {
+          description: t("neetoApiKeys.tooltips.apiKeysDescription"),
+          helpLinkProps: {
+            href: HELP_DOC_URL
+          },
+          title: t("neetoApiKeys.tooltips.apiKeys")
+        })]
+      })
+    }, headerProps)), /*#__PURE__*/jsx(Table, {
+      currentPage: currentPage,
+      data: data,
+      handlePageChange: handlePageChange,
+      isFetching: isFetching,
+      isLoading: isLoading,
+      noDataProps: noDataProps,
+      setIsCreatePaneOpen: setIsCreatePaneOpen,
+      handleDelete: setApiKeyToBeDeleted,
+      handleEdit: setApiKeyToBeEdited
+    }), /*#__PURE__*/jsx(Alert, {
+      isOpen: isNotEmpty(apiKeyToBeDeleted),
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoApiKeys.buttons.delete"),
+      title: t("neetoApiKeys.alert.titles.deleteApiKey"),
+      message: /*#__PURE__*/jsx(Trans, {
+        components: {
+          bold: /*#__PURE__*/jsx("strong", {})
+        },
+        i18nKey: "neetoApiKeys.alert.descriptions.deleteApiKey",
+        values: {
+          name: apiKeyToBeDeleted.label
+        }
+      }),
+      onClose: function onClose() {
+        return setApiKeyToBeDeleted({});
+      },
+      onSubmit: function onSubmit() {
+        return deleteApiKey(apiKeyToBeDeleted.id);
+      }
+    }), /*#__PURE__*/jsx(Create, {
+      isOpen: isCreatePaneOpen,
+      onClose: function onClose() {
+        return setIsCreatePaneOpen(false);
+      }
+    }), /*#__PURE__*/jsx(Update, {
+      apiKey: apiKeyToBeEdited,
+      onClose: function onClose() {
+        return setApiKeyToBeEdited({});
+      }
+    })]
+  });
+};
+var index = withTitle(ApiKeys, t("neetoApiKeys.common.apiKey", PLURAL));
+
+export { index as default };
+//# sourceMappingURL=ApiKeys.js.map