@bigbinary/neeto-molecules 1.1.6 → 1.1.8

package/dist/CustomDomainDashboard.js

@@ -2,10 +2,10 @@ import * as React from 'react';
 import React__default, { forwardRef, useRef, useState } from 'react';
 import { isNotPresent, isNotEmpty, noop, snakeToCamelCase } from '@bigbinary/neeto-commons-frontend/pure';
 import { withT, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Typography, Button, Alert, Dropdown as Dropdown$1, Input, Tag, Callout, Pane, Label, Table, NoData } from '@bigbinary/neetoui';
+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 { not } from 'ramda';
-import { Column, Download, Filter, MenuVertical, Search, MenuHorizontal, Info, Check } from '@bigbinary/neeto-icons';
+import { not, mergeRight } from 'ramda';
+import { Column, Download, Filter, MenuHorizontal, Search, MenuVertical, Info, Check } from '@bigbinary/neeto-icons';
 import ManageColumns from '@bigbinary/neeto-molecules/Columns';
 import { Filters } from '@bigbinary/neeto-filters-frontend';
 import { PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
@@ -1434,11 +1434,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$2 = ["text"];
+var _excluded$3 = ["text"];
 var PageLoader = function PageLoader(_ref) {
   var _ref$text = _ref.text,
     text = _ref$text === void 0 ? "" : _ref$text,
-    otherProps = _objectWithoutProperties(_ref, _excluded$2);
+    otherProps = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement("div", _extends$1({
     className: "neeto-molecules-pageloader__wrapper"
   }, otherProps), /*#__PURE__*/React__default.createElement("div", {
@@ -1508,19 +1508,19 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-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$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 Columns = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$buttonProps = _ref.buttonProps,
     buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   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$2({
+    buttonProps: _objectSpread$3({
       icon: Column,
       label: null,
       tooltipProps: {
@@ -1530,7 +1530,7 @@ var Columns = /*#__PURE__*/forwardRef(function (_ref, ref) {
       "data-testid": "columns-button",
       "data-cy": "columns-dropdown-button"
     }, buttonProps)
-  }, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  }, _objectSpread$3(_objectSpread$3({}, props), {}, {
     ref: ref
   }))));
 });
@@ -1560,18 +1560,18 @@ var DownloadButton = function DownloadButton(_ref) {
   }, count));
 };
 
-var _excluded = ["buttonProps"];
-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 _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 FilterButton = function FilterButton(_ref) {
   var buttonProps = _ref.buttonProps,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded$1);
   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$1({
+    buttonProps: _objectSpread$2({
       "data-testid": "filter-button",
       icon: Filter,
       style: "text",
@@ -1690,7 +1690,7 @@ var SIZES = {
 var Dropdown = function Dropdown(props) {
   return /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$1({
     buttonStyle: "text",
-    icon: MenuVertical,
+    icon: MenuHorizontal,
     position: "bottom-end"
   }, props));
 };
@@ -1776,6 +1776,76 @@ var INITIAL_VALUES = {
   hostname: ""
 };
 
+var MENU_ITEM_TYPES = {
+  menuItem: "menuItem",
+  divider: "divider"
+};
+var DEFAULT_TOOLTIP_PROPS = {
+  disabled: true,
+  position: "bottom"
+};
+
+var _excluded = ["key", "onClick", "label", "type", "isVisible"];
+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 MoreDropdown = function MoreDropdown(_ref) {
+  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
+    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
+    _ref$isVertical = _ref.isVertical,
+    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
+    menuTopChildren = _ref.menuTopChildren,
+    menuBottomChildren = _ref.menuBottomChildren,
+    _ref$menuItems = _ref.menuItems,
+    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
+  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
+  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
+  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
+  if (isDropdownDisabled && !tooltipProps.disabled) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, tooltipProps, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Button, _extends$1({
+      disabled: true,
+      "data-testid": "nui-dropdown-button",
+      icon: targetIcon,
+      iconPosition: "right",
+      size: "medium",
+      style: "text"
+    }, dropdownButtonProps))));
+  }
+  return /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$1({
+    autoWidth: true,
+    className: "flex",
+    disabled: isDisabled,
+    icon: targetIcon,
+    buttonProps: _objectSpread$1({
+      className: "min-h-0 flex-shrink-0",
+      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,
+      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+      menuItemProps = _objectWithoutProperties(_ref2, _excluded);
+    if (!isVisible) return null;
+    return type === MENU_ITEM_TYPES.menuItem ? /*#__PURE__*/React__default.createElement(MenuItem.Button, _extends$1({
+      key: key
+    }, _objectSpread$1({
+      onClick: onClick
+    }, menuItemProps)), label) : /*#__PURE__*/React__default.createElement(Divider, {
+      key: key
+    });
+  }), menuBottomChildren));
+};
+
 var TagBlock = function TagBlock(_ref) {
   var status = _ref.status,
     _ref$stacked = _ref.stacked,
@@ -1808,13 +1878,41 @@ var TagBlock = function TagBlock(_ref) {
 };
 var TagBlock$1 = /*#__PURE__*/React__default.memo(TagBlock);
 
-var Menu = Dropdown$1.Menu,
-  MenuItem = Dropdown$1.MenuItem;
 var renderColumnData = function renderColumnData(enableManagePane, enableDeleteAlert) {
   return [{
     title: t$1("neetoMolecules.customDomain.customDomain", SINGULAR),
     dataIndex: "hostname",
-    key: "hostname"
+    key: "hostname",
+    width: "60%",
+    render: function render(hostName, customDomain) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex items-center justify-between gap-x-3"
+      }, /*#__PURE__*/React__default.createElement(Typography, {
+        style: "body2"
+      }, hostName), /*#__PURE__*/React__default.createElement(MoreDropdown, {
+        dropdownButtonProps: {
+          "data-testid": "nui-dropdown-icon-".concat(customDomain.id)
+        },
+        dropdownProps: {
+          position: "bottom-end",
+          strategy: "fixed",
+          autoWidth: true
+        },
+        menuItems: [{
+          label: t$1("neetoMolecules.common.actions.edit"),
+          onClick: function onClick() {
+            return enableManagePane(customDomain);
+          },
+          key: "edit-custom-domain-button"
+        }, {
+          label: t$1("neetoMolecules.common.actions.delete"),
+          onClick: function onClick() {
+            return enableDeleteAlert(customDomain);
+          },
+          key: "delete-custom-domain"
+        }]
+      }));
+    }
   }, {
     title: t$1("neetoMolecules.common.status"),
     dataIndex: "status",
@@ -1825,33 +1923,6 @@ var renderColumnData = function renderColumnData(enableManagePane, enableDeleteA
       });
     },
     width: "40%"
-  }, {
-    id: "actions",
-    width: "10%",
-    render: function render(_, customDomain) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        }
-      }, /*#__PURE__*/React__default.createElement(Dropdown$1, {
-        autoWidth: true,
-        icon: MenuHorizontal,
-        position: "bottom-end",
-        strategy: "fixed",
-        buttonProps: {
-          style: "text",
-          "data-testid": "nui-dropdown-icon-".concat(customDomain.id)
-        }
-      }, /*#__PURE__*/React__default.createElement(Menu, null, /*#__PURE__*/React__default.createElement(MenuItem.Button, {
-        onClick: function onClick() {
-          return enableManagePane(customDomain);
-        }
-      }, t$1("neetoMolecules.common.actions.edit")), /*#__PURE__*/React__default.createElement(MenuItem.Button, {
-        onClick: function onClick() {
-          return enableDeleteAlert(customDomain);
-        }
-      }, t$1("neetoMolecules.common.actions.delete")))));
-    }
   }];
 };
 var recordData = function recordData(customDomain) {