@bigbinary/neeto-molecules 1.1.21 → 1.1.23

package/dist/CustomDomainDashboard.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { forwardRef, useRef, useState } from 'react';
 import { isNotPresent, isNotEmpty, noop, snakeToCamelCase } from '@bigbinary/neeto-cist';
-import { withT, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { withT, useMutationWithInvalidation, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { Typography, Button, Alert, Dropdown as Dropdown$1, Input, Tooltip, Tag, Callout, Pane, Label, Table, NoData } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
 import classnames from 'classnames';
@@ -17,7 +17,7 @@ import { Input as Input$1 } from '@bigbinary/neetoui/formik';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
 import { t as t$1 } from 'i18next';
 import * as Yup from 'yup';
-import { useQueryClient, useMutation, useQuery } from 'react-query';
+import { useQuery } from 'react-query';
 import axios from 'axios';
 
 function _arrayWithHoles(arr) {
@@ -1374,11 +1374,11 @@ var SvgNeeto = function SvgNeeto(props) {
 var css$2 = ".neeto-molecules-pageloader__wrapper{height:100%;position:relative;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader{height:100%;left:0;position:absolute;top:0;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__content{height:66px;margin-bottom:16px;overflow:hidden;padding:8px;position:relative;width:66px}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__text{color:rgb(var(--neeto-ui-gray-800));font-size:1.25rem;line-height:1.75rem;margin-bottom:4rem;text-align:center}.neeto-molecules-pageloader__spinner{display:flex;gap:2px;height:25px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.neeto-molecules-pageloader__spinner>div{animation:neeto-ui-stretch-delay 1.2s ease-in-out infinite;background-color:#fff;border-radius:2px;display:inline-flex;height:100%;width:2px}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect2{animation-delay:-1.1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect3{animation-delay:-1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect4{animation-delay:-.9s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect5{animation-delay:-.8s}@keyframes neeto-ui-stretch-delay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}";
 n(css$2,{});
 
-var _excluded$3 = ["text"];
+var _excluded$5 = ["text"];
 var PageLoader = function PageLoader(_ref) {
   var _ref$text = _ref.text,
     text = _ref$text === void 0 ? "" : _ref$text,
-    otherProps = _objectWithoutProperties(_ref, _excluded$3);
+    otherProps = _objectWithoutProperties(_ref, _excluded$5);
   return /*#__PURE__*/React__default.createElement("div", _extends$1({
     className: "neeto-molecules-pageloader__wrapper"
   }, otherProps), /*#__PURE__*/React__default.createElement("div", {
@@ -1448,19 +1448,19 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var _excluded$2 = ["buttonProps"];
-function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$4 = ["buttonProps"];
+function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Columns = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$buttonProps = _ref.buttonProps,
     buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-subheader__columns"
   }, /*#__PURE__*/React__default.createElement(ManageColumns, _extends$1({
-    buttonProps: _objectSpread$3({
+    buttonProps: _objectSpread$4({
       icon: Column,
       label: null,
       tooltipProps: {
@@ -1470,7 +1470,7 @@ var Columns = /*#__PURE__*/forwardRef(function (_ref, ref) {
       "data-testid": "columns-button",
       "data-cy": "columns-dropdown-button"
     }, buttonProps)
-  }, _objectSpread$3(_objectSpread$3({}, props), {}, {
+  }, _objectSpread$4(_objectSpread$4({}, props), {}, {
     ref: ref
   }))));
 });
@@ -1500,18 +1500,18 @@ var DownloadButton = function DownloadButton(_ref) {
   }, count));
 };
 
-var _excluded$1 = ["buttonProps"];
-function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$3 = ["buttonProps"];
+function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FilterButton = function FilterButton(_ref) {
   var buttonProps = _ref.buttonProps,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-subheader__filter"
   }, /*#__PURE__*/React__default.createElement(Filters, _extends$1({
-    buttonProps: _objectSpread$2({
+    buttonProps: _objectSpread$3({
       "data-testid": "filter-button",
       icon: Filter,
       style: "text",
@@ -1725,12 +1725,61 @@ var DEFAULT_TOOLTIP_PROPS = {
   position: "bottom"
 };
 
-var _excluded = ["key", "onClick", "label", "type", "isVisible"];
+var _excluded$2 = ["label", "key"],
+  _excluded2 = ["isVisible", "key"];
+var MenuItem$1 = Dropdown$1.MenuItem,
+  Menu$1 = Dropdown$1.Menu;
+var Submenu = function Submenu(_ref) {
+  var label = _ref.label,
+    key = _ref.key,
+    menuItemProps = _objectWithoutProperties(_ref, _excluded$2);
+  return /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$1({
+    customTarget: /*#__PURE__*/React__default.createElement(MenuItem$1.Button, null, label),
+    key: key,
+    position: "left",
+    trigger: "hover"
+  }, menuItemProps.dropdownProps), /*#__PURE__*/React__default.createElement(Menu$1, null, menuItemProps.menuItems.map(function (_ref2) {
+    var _ref2$isVisible = _ref2.isVisible,
+      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+      key = _ref2.key,
+      menuItemProps = _objectWithoutProperties(_ref2, _excluded2);
+    if (!isVisible) return null;
+    return /*#__PURE__*/React__default.createElement(MoreDropdownMenuItem, _extends$1({
+      key: key
+    }, menuItemProps));
+  })));
+};
+
+var _excluded$1 = ["onClick", "label", "type", "hasSubItems"];
+function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var MenuItem = Dropdown$1.MenuItem,
+  Divider = Dropdown$1.Divider;
+var MoreDropdownMenuItem = function MoreDropdownMenuItem(_ref) {
+  var onClick = _ref.onClick,
+    label = _ref.label,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref$type,
+    _ref$hasSubItems = _ref.hasSubItems,
+    hasSubItems = _ref$hasSubItems === void 0 ? false : _ref$hasSubItems,
+    menuItemProps = _objectWithoutProperties(_ref, _excluded$1);
+  if (type === MENU_ITEM_TYPES.divider) {
+    return /*#__PURE__*/React__default.createElement(Divider, null);
+  }
+  if (hasSubItems) {
+    return /*#__PURE__*/React__default.createElement(Submenu, _objectSpread$2({
+      label: label
+    }, menuItemProps));
+  }
+  return /*#__PURE__*/React__default.createElement(MenuItem.Button, _objectSpread$2({
+    onClick: onClick
+  }, menuItemProps), label);
+};
+
+var _excluded = ["isVisible", "key"];
 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 Menu = Dropdown$1.Menu,
-  MenuItem = Dropdown$1.MenuItem,
-  Divider = Dropdown$1.Divider;
+var Menu = Dropdown$1.Menu;
 var MoreDropdown = function MoreDropdown(_ref) {
   var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
     dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
@@ -1767,22 +1816,14 @@ var MoreDropdown = function MoreDropdown(_ref) {
       style: "text"
     }, dropdownButtonProps)
   }, dropdownProps), /*#__PURE__*/React__default.createElement(Menu, null, menuTopChildren, menuItems.map(function (_ref2) {
-    var key = _ref2.key,
-      onClick = _ref2.onClick,
-      label = _ref2.label,
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref2$type,
-      _ref2$isVisible = _ref2.isVisible,
+    var _ref2$isVisible = _ref2.isVisible,
       isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+      key = _ref2.key,
       menuItemProps = _objectWithoutProperties(_ref2, _excluded);
     if (!isVisible) return null;
-    return type === MENU_ITEM_TYPES.menuItem ? /*#__PURE__*/React__default.createElement(MenuItem.Button, _extends$1({
+    return /*#__PURE__*/React__default.createElement(MoreDropdownMenuItem, _extends$1({
       key: key
-    }, _objectSpread$1({
-      onClick: onClick
-    }, menuItemProps)), label) : /*#__PURE__*/React__default.createElement(Divider, {
-      key: key
-    });
+    }, menuItemProps));
   }), menuBottomChildren));
 };
 
@@ -1994,74 +2035,54 @@ var customDomainApi = {
   updateCustomDomain: updateCustomDomain
 };
 
-var DEFAULT_STALE_TIME = 60 * 60 * 1000;
 var DOMAIN_QUERY_KEY = "custom-domain";
 
 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 useCreateCustomDomain = function useCreateCustomDomain(url) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var queryClient = useQueryClient();
-  return useMutation(function (payload) {
+  return useMutationWithInvalidation(function (payload) {
     return customDomainApi.createCustomDomain(url, payload);
-  }, _objectSpread(_objectSpread({}, options), {}, {
-    onSuccess: function onSuccess() {
-      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
-    }
-  }));
+  }, _objectSpread({
+    keysToInvalidate: [DOMAIN_QUERY_KEY]
+  }, options));
 };
 var useDeleteCustomDomain = function useDeleteCustomDomain(url) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var queryClient = useQueryClient();
-  return useMutation(function (id) {
+  return useMutationWithInvalidation(function (id) {
     return customDomainApi.deleteCustomDomain(url, id);
-  }, _objectSpread(_objectSpread({}, options), {}, {
-    onSuccess: function onSuccess(result) {
-      var _options$onSuccess;
-      (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options, result);
-      queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
-    }
-  }));
+  }, _objectSpread({
+    keysToInvalidate: [DOMAIN_QUERY_KEY]
+  }, options));
 };
 var useFetchCustomDomains = function useFetchCustomDomains(params) {
   return useQuery([DOMAIN_QUERY_KEY, _objectSpread({}, params)], function () {
     return customDomainApi.fetchCustomDomains(params);
-  }, {
-    staleTime: DEFAULT_STALE_TIME
   });
 };
 var useValidateDomain = function useValidateDomain(url) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var queryClient = useQueryClient();
-  return useMutation(function (id) {
+  return useMutationWithInvalidation(function (id) {
     return customDomainApi.validateDomain(url, id);
-  }, _objectSpread(_objectSpread({}, options), {}, {
-    onSuccess: function onSuccess() {
-      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
-    }
-  }));
+  }, _objectSpread({
+    keysToInvalidate: [DOMAIN_QUERY_KEY]
+  }, options));
 };
 var useValidateCname = function useValidateCname(url) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var queryClient = useQueryClient();
-  return useMutation(function (id) {
+  return useMutationWithInvalidation(function (id) {
     return customDomainApi.validateCname(url, id);
-  }, _objectSpread(_objectSpread({}, options), {}, {
-    onSuccess: function onSuccess() {
-      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
-    }
-  }));
+  }, _objectSpread({
+    keysToInvalidate: [DOMAIN_QUERY_KEY]
+  }, options));
 };
 var useUpdateCustomDomain = function useUpdateCustomDomain(url) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var queryClient = useQueryClient();
-  return useMutation(function (id) {
+  return useMutationWithInvalidation(function (id) {
     return customDomainApi.updateCustomDomain(url, id);
-  }, _objectSpread(_objectSpread({}, options), {}, {
-    onSuccess: function onSuccess() {
-      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
-    }
-  }));
+  }, _objectSpread({
+    keysToInvalidate: [DOMAIN_QUERY_KEY]
+  }, options));
 };
 
 var Manage = function Manage(_ref) {