@bigbinary/neeto-api-keys-frontend 1.0.1 → 1.0.3

package/dist/index.js

@@ -1,8 +1,7 @@
-import React, { createElement, isValidElement, cloneElement, createContext, useContext, useRef, useState, useEffect } from 'react';
+import React, { createElement, isValidElement, cloneElement, createContext, useContext, useState, useRef, useEffect } from 'react';
 import { DEFAULT_PAGE_INDEX, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
 import { isPresent, isNotPresent, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
-import { useMutationWithInvalidation, withT, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
-import Container from '@bigbinary/neeto-molecules/Container';
+import { useMutationWithInvalidation, useDebounce, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Header from '@bigbinary/neeto-molecules/Header';
 import { Dropdown, Typography, Button, Tag, DatePicker as DatePicker$1, Pane, NoData, Table as Table$1, Alert } from '@bigbinary/neetoui';
 import { useQuery } from 'react-query';
@@ -2337,6 +2336,62 @@ function warnOnce() {
   if (typeof args[0] === 'string') alreadyWarned[args[0]] = new Date();
   warn(...args);
 }
+const loadedClb = (i18n, cb) => () => {
+  if (i18n.isInitialized) {
+    cb();
+  } else {
+    const initialized = () => {
+      setTimeout(() => {
+        i18n.off('initialized', initialized);
+      }, 0);
+      cb();
+    };
+    i18n.on('initialized', initialized);
+  }
+};
+function loadNamespaces(i18n, ns, cb) {
+  i18n.loadNamespaces(ns, loadedClb(i18n, cb));
+}
+function loadLanguages(i18n, lng, ns, cb) {
+  if (typeof ns === 'string') ns = [ns];
+  ns.forEach(n => {
+    if (i18n.options.ns.indexOf(n) < 0) i18n.options.ns.push(n);
+  });
+  i18n.loadLanguages(lng, loadedClb(i18n, cb));
+}
+function oldI18nextHasLoadedNamespace(ns, i18n) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const lng = i18n.languages[0];
+  const fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
+  const lastLng = i18n.languages[i18n.languages.length - 1];
+  if (lng.toLowerCase() === 'cimode') return true;
+  const loadNotPending = (l, n) => {
+    const loadState = i18n.services.backendConnector.state[`${l}|${n}`];
+    return loadState === -1 || loadState === 2;
+  };
+  if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18n.services.backendConnector.backend && i18n.isLanguageChangingTo && !loadNotPending(i18n.isLanguageChangingTo, ns)) return false;
+  if (i18n.hasResourceBundle(lng, ns)) return true;
+  if (!i18n.services.backendConnector.backend || i18n.options.resources && !i18n.options.partialBundledLanguages) return true;
+  if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
+  return false;
+}
+function hasLoadedNamespace(ns, i18n) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!i18n.languages || !i18n.languages.length) {
+    warnOnce('i18n.languages were undefined or empty', i18n.languages);
+    return true;
+  }
+  const isNewerI18next = i18n.options.ignoreJSONStructure !== undefined;
+  if (!isNewerI18next) {
+    return oldI18nextHasLoadedNamespace(ns, i18n, options);
+  }
+  return i18n.hasLoadedNamespace(ns, {
+    lng: options.lng,
+    precheck: (i18nInstance, loadNotPending) => {
+      if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18nInstance.services.backendConnector.backend && i18nInstance.isLanguageChangingTo && !loadNotPending(i18nInstance.isLanguageChangingTo, ns)) return false;
+    }
+  });
+}
 
 const matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g;
 const htmlEntities = {
@@ -2640,6 +2695,19 @@ const initReactI18next = {
 };
 
 const I18nContext = createContext();
+class ReportNamespaces {
+  constructor() {
+    this.usedNamespaces = {};
+  }
+  addUsedNamespaces(namespaces) {
+    namespaces.forEach(ns => {
+      if (!this.usedNamespaces[ns]) this.usedNamespaces[ns] = true;
+    });
+  }
+  getUsedNamespaces() {
+    return Object.keys(this.usedNamespaces);
+  }
+}
 
 function Trans(_ref) {
   let {
@@ -2682,6 +2750,112 @@ function Trans(_ref) {
   });
 }
 
+const usePrevious = (value, ignore) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = ignore ? ref.current : value;
+  }, [value, ignore]);
+  return ref.current;
+};
+function useTranslation(ns) {
+  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    i18n: i18nFromProps
+  } = props;
+  const {
+    i18n: i18nFromContext,
+    defaultNS: defaultNSFromContext
+  } = useContext(I18nContext) || {};
+  const i18n = i18nFromProps || i18nFromContext || getI18n();
+  if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
+  if (!i18n) {
+    warnOnce('You will need to pass in an i18next instance by using initReactI18next');
+    const notReadyT = (k, optsOrDefaultValue) => {
+      if (typeof optsOrDefaultValue === 'string') return optsOrDefaultValue;
+      if (optsOrDefaultValue && typeof optsOrDefaultValue === 'object' && typeof optsOrDefaultValue.defaultValue === 'string') return optsOrDefaultValue.defaultValue;
+      return Array.isArray(k) ? k[k.length - 1] : k;
+    };
+    const retNotReady = [notReadyT, {}, false];
+    retNotReady.t = notReadyT;
+    retNotReady.i18n = {};
+    retNotReady.ready = false;
+    return retNotReady;
+  }
+  if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
+  const i18nOptions = {
+    ...getDefaults(),
+    ...i18n.options.react,
+    ...props
+  };
+  const {
+    useSuspense,
+    keyPrefix
+  } = i18nOptions;
+  let namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
+  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+  if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
+  const ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(n => hasLoadedNamespace(n, i18n, i18nOptions));
+  function getT() {
+    return i18n.getFixedT(props.lng || null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
+  }
+  const [t, setT] = useState(getT);
+  let joinedNS = namespaces.join();
+  if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
+  const previousJoinedNS = usePrevious(joinedNS);
+  const isMounted = useRef(true);
+  useEffect(() => {
+    const {
+      bindI18n,
+      bindI18nStore
+    } = i18nOptions;
+    isMounted.current = true;
+    if (!ready && !useSuspense) {
+      if (props.lng) {
+        loadLanguages(i18n, props.lng, namespaces, () => {
+          if (isMounted.current) setT(getT);
+        });
+      } else {
+        loadNamespaces(i18n, namespaces, () => {
+          if (isMounted.current) setT(getT);
+        });
+      }
+    }
+    if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
+      setT(getT);
+    }
+    function boundReset() {
+      if (isMounted.current) setT(getT);
+    }
+    if (bindI18n && i18n) i18n.on(bindI18n, boundReset);
+    if (bindI18nStore && i18n) i18n.store.on(bindI18nStore, boundReset);
+    return () => {
+      isMounted.current = false;
+      if (bindI18n && i18n) bindI18n.split(' ').forEach(e => i18n.off(e, boundReset));
+      if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(e => i18n.store.off(e, boundReset));
+    };
+  }, [i18n, joinedNS]);
+  const isInitial = useRef(true);
+  useEffect(() => {
+    if (isMounted.current && !isInitial.current) {
+      setT(getT);
+    }
+    isInitial.current = false;
+  }, [i18n, keyPrefix]);
+  const ret = [t, i18n, ready];
+  ret.t = t;
+  ret.i18n = i18n;
+  ret.ready = ready;
+  if (ready) return ret;
+  if (!ready && !useSuspense) return ret;
+  throw new Promise(resolve => {
+    if (props.lng) {
+      loadLanguages(i18n, props.lng, namespaces, () => resolve());
+    } else {
+      loadNamespaces(i18n, namespaces, () => resolve());
+    }
+  });
+}
+
 var common = {
 	apiKey_one: "API key",
 	apiKey_other: "API keys",
@@ -2766,6 +2940,21 @@ instance.use(initReactI18next).init({
   fallbackLng: "en"
 });
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -2887,21 +3076,6 @@ var useDeleteApiKey = function useDeleteApiKey(onSuccess) {
   });
 };
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 var dayjs_min = {exports: {}};
 
 dayjs_min.exports;
@@ -2915,10 +3089,11 @@ var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
 var Menu = Dropdown.Menu,
   MenuItem = Dropdown.MenuItem;
-var ActionDropdown = withT(function (_ref) {
-  var t = _ref.t,
-    handleEdit = _ref.handleEdit,
+var ActionDropdown = function ActionDropdown(_ref) {
+  var handleEdit = _ref.handleEdit,
     handleDelete = _ref.handleDelete;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   return /*#__PURE__*/React.createElement(Dropdown, {
     buttonStyle: "text",
     icon: MenuHorizontal,
@@ -2929,7 +3104,7 @@ var ActionDropdown = withT(function (_ref) {
     style: "danger",
     onClick: handleDelete
   }, t("buttons.delete"))));
-});
+};
 
 var isInPast = function isInPast(date) {
   return dayjs(date).isBefore(dayjs());
@@ -3081,14 +3256,15 @@ var VALIDATION_SCHEMA = yup.object({
 });
 var DEFAULT_PAGE_SIZE = 15;
 
-var Form = withT(function (_ref) {
-  var t = _ref.t,
-    _ref$initialValues = _ref.initialValues,
+var Form = function Form(_ref) {
+  var _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;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   return /*#__PURE__*/React.createElement(Form$1, {
     formikProps: {
       validationSchema: VALIDATION_SCHEMA,
@@ -3142,16 +3318,17 @@ var Form = withT(function (_ref) {
       }
     })));
   });
-});
+};
 
-var Create = withT(function (_ref) {
-  var t = _ref.t,
-    onClose = _ref.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.isLoading;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   return /*#__PURE__*/React.createElement(Pane, {
     initialFocusRef: initialFocusRef,
     onClose: onClose,
@@ -3164,7 +3341,7 @@ var Create = withT(function (_ref) {
     isSubmitting: isCreating,
     onSubmit: createApiKey
   }));
-});
+};
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -3209,14 +3386,15 @@ function _defineProperty(obj, key, value) {
 
 function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Update = withT(function (_ref) {
-  var t = _ref.t,
-    onClose = _ref.onClose,
+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.isLoading;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var handleUpdate = function handleUpdate(values) {
     updateApiKey({
       id: apiKey.id,
@@ -3239,7 +3417,7 @@ var Update = withT(function (_ref) {
     isSubmitting: isUpdating,
     onSubmit: handleUpdate
   }));
-});
+};
 
 var getPageFromSearchParams = function getPageFromSearchParams() {
   var _getQueryParams = getQueryParams(),
@@ -3293,12 +3471,15 @@ var usePagination = function usePagination(_ref) {
   };
 };
 
-var Table = withT(function (_ref) {
-  var t = _ref.t,
-    handleDelete = _ref.handleDelete,
+var Table = function Table(_ref) {
+  var handleDelete = _ref.handleDelete,
     handleEdit = _ref.handleEdit,
-    searchTerm = _ref.searchTerm;
+    searchTerm = _ref.searchTerm,
+    _ref$noDataProps = _ref.noDataProps,
+    noDataProps = _ref$noDataProps === void 0 ? {} : _ref$noDataProps;
   var debouncedSearchTerm = useDebounce(searchTerm);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _usePagination = usePagination({
       searchTerm: debouncedSearchTerm
     }),
@@ -3327,10 +3508,10 @@ var Table = withT(function (_ref) {
   if (isEmpty(apiKeys)) {
     return /*#__PURE__*/React.createElement("div", {
       className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React.createElement(NoData, {
+    }, /*#__PURE__*/React.createElement(NoData, _extends({
       className: "w-full",
       title: t("noData.title")
-    }), ";");
+    }, noDataProps)), ";");
   }
   return /*#__PURE__*/React.createElement(TableWrapper, {
     hasPagination: totalCount > DEFAULT_PAGE_SIZE
@@ -3347,12 +3528,11 @@ var Table = withT(function (_ref) {
     rowData: apiKeys,
     totalCount: totalCount
   }));
-});
+};
 
-var ApiKeys = withT(function (_ref) {
-  var t = _ref.t,
-    _ref$breadcrumbs = _ref.breadcrumbs,
-    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs;
+var ApiKeys = function ApiKeys(_ref) {
+  var noDataProps = _ref.noDataProps,
+    headerProps = _ref.headerProps;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     searchTerm = _useState2[0],
@@ -3369,13 +3549,16 @@ var ApiKeys = withT(function (_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isCreatePaneOpen = _useState8[0],
     setIsCreatePaneOpen = _useState8[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useDeleteApiKey = useDeleteApiKey(function () {
       return setApiKeyToBeDeleted({});
     }),
     deleteApiKey = _useDeleteApiKey.mutate,
     isDeleting = _useDeleteApiKey.isLoading;
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, {
-    breadcrumbs: breadcrumbs,
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex h-full w-full flex-col"
+  }, /*#__PURE__*/React.createElement(Header, _extends({
     title: t("common.apiKey", PLURAL),
     actionBlock: /*#__PURE__*/React.createElement(Button, {
       label: t("buttons.addApiKey"),
@@ -3391,10 +3574,11 @@ var ApiKeys = withT(function (_ref) {
       },
       placeholder: t("placeholders.search")
     }
-  }), /*#__PURE__*/React.createElement(Table, {
+  }, headerProps)), /*#__PURE__*/React.createElement(Table, {
     handleDelete: setApiKeyToBeDeleted,
     handleEdit: setApiKeyToBeEdited,
-    searchTerm: searchTerm
+    searchTerm: searchTerm,
+    noDataProps: noDataProps
   }), /*#__PURE__*/React.createElement(Alert, {
     isOpen: isNotEmpty(apiKeyToBeDeleted),
     isSubmitting: isDeleting,
@@ -3426,7 +3610,8 @@ var ApiKeys = withT(function (_ref) {
       return setApiKeyToBeEdited({});
     }
   }));
-});
+};
+var index = withTitle(ApiKeys, t$1("common.apiKey", PLURAL));
 
-export { ApiKeys };
+export { index as ApiKeys };
 //# sourceMappingURL=index.js.map