@bigbinary/neeto-molecules 1.0.78-beta → 1.0.79

package/dist/CustomDomainDashboard.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import React__default, { forwardRef, useRef, useState } from 'react';
-import { isNotEmpty, noop, snakeToCamelCase } from '@bigbinary/neeto-commons-frontend/pure';
+import { noop, snakeToCamelCase, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
 import { 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 { useTranslation, Trans } from 'react-i18next';
-import { Column, Download, Filter, MenuVertical, Search, MenuHorizontal, Info, Copy, Check } from '@bigbinary/neeto-icons';
+import { Column, Download, Filter, Right, MenuVertical, HamburgerMenu, Search, MenuHorizontal, Info, Copy, Check } from '@bigbinary/neeto-icons';
 import ManageColumns from '@bigbinary/neeto-molecules/Columns';
 import { Filters } from '@bigbinary/neeto-filters-frontend';
-import { withEventTargetValue, joinHyphenCase, copyToClipboard, timeFormat } from '@bigbinary/neeto-commons-frontend/utils';
+import { withEventTargetValue, joinHyphenCase, copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils';
+import { isEmpty } from 'ramda';
 import { Link } from 'react-router-dom';
 import { Formik, Form } from 'formik';
 import { Input as Input$1 } from '@bigbinary/neetoui/formik';
@@ -1316,7 +1317,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$3 = ".neeto-molecules-container{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;height:100vh;justify-content:flex-start;overflow-y:auto;padding:0 40px!important}.neeto-molecules-container--header-fixed{padding:0!important}.neeto-molecules-container--header-fixed>.neeto-molecules-header,.neeto-molecules-container--header-fixed>.neeto-molecules-scrollable,.neeto-molecules-container--header-fixed>.neeto-molecules-subheader{padding-left:40px!important;padding-right:40px!important}";
+var css$3 = ".neeto-molecules-container{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;height:100vh;justify-content:flex-start;overflow-y:auto;padding:0 24px}.neeto-molecules-container--header-fixed{padding:0}.neeto-molecules-container--header-fixed>.neeto-molecules-header,.neeto-molecules-container--header-fixed>.neeto-molecules-scrollable,.neeto-molecules-container--header-fixed>.neeto-molecules-subheader{padding-left:24px;padding-right:24px}";
 n(css$3,{});
 
 var Container = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -1633,7 +1634,7 @@ var DeleteAlert = function DeleteAlert(_ref) {
   });
 };
 
-var css = ".neeto-molecules-header{align-items:flex-start!important;background:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;justify-content:space-between;min-height:auto!important;padding:40px 0 24px!important;width:100%}.neeto-molecules-header .neeto-molecules-header__toggle-menubar-btn{margin-right:8px}.neeto-molecules-header .neeto-molecules-header__left{align-items:flex-start!important;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}.neeto-molecules-header .neeto-molecules-header__left-data-wrap{display:flex;flex-wrap:wrap}.neeto-molecules-header .neeto-molecules-header__page-title{align-items:center;display:flex;flex-direction:row;gap:12px;margin-top:-16px;width:100%}.neeto-molecules-header .neeto-molecules-header__page-title h2{font-size:40px;line-height:48px}.neeto-molecules-header .neeto-molecules-header__page-title--has-breadcrumbs{margin-top:0}.neeto-molecules-header .neeto-molecules-header__breadcrumbs-wrap{display:flex;margin:0 0 40px}.neeto-molecules-header .neeto-molecules-header__breadcrumb{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;line-height:1}.neeto-molecules-header .neeto-molecules-header__breadcrumb a{text-decoration:none;transition:all .3s ease-in-out}.neeto-molecules-header .neeto-molecules-header__breadcrumb a:focus-visible{border-radius:var(--neeto-ui-rounded-sm);outline:3px solid rgba(var(--neeto-ui-primary-500),50%)}.neeto-molecules-header .neeto-molecules-header__breadcrumb-separator{font-size:12px;line-height:16px;margin:0 12px!important}.neeto-molecules-header .neeto-molecules-header__right{align-items:center;display:flex;flex-direction:row;justify-content:flex-end}";
+var css = ".neeto-molecules-header{align-items:center;background:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;justify-content:space-between;min-height:var(--neeto-ui-main-header-height);padding:24px 0;width:100%}.neeto-molecules-header--has-breadcrumbs{min-height:var(--neeto-ui-main-header-with-breadcrumbs-height)}.neeto-molecules-header .neeto-molecules-header__toggle-menubar-btn{margin-right:8px}.neeto-molecules-header .neeto-molecules-header__left{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}.neeto-molecules-header .neeto-molecules-header__left-data-wrap{display:flex;flex-wrap:wrap}.neeto-molecules-header .neeto-molecules-header__page-title{display:flex;flex-direction:row;width:100%}.neeto-molecules-header .neeto-molecules-header__breadcrumbs-wrap{display:flex}.neeto-molecules-header .neeto-molecules-header__breadcrumb{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;line-height:1}.neeto-molecules-header .neeto-molecules-header__breadcrumb a{text-decoration:none;transition:all .3s ease-in-out}.neeto-molecules-header .neeto-molecules-header__breadcrumb a:focus-visible{border-radius:var(--neeto-ui-rounded-sm);outline:3px solid rgba(var(--neeto-ui-primary-500),50%)}.neeto-molecules-header .neeto-molecules-header__breadcrumb-separator{margin:0 4px}.neeto-molecules-header .neeto-molecules-header__right{align-items:center;display:flex;flex-direction:row;justify-content:flex-end}";
 n(css,{});
 
 var Breadcrumbs = function Breadcrumbs(_ref) {
@@ -1649,22 +1650,27 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     }, /*#__PURE__*/React__default.createElement(Link, {
       to: link
     }, /*#__PURE__*/React__default.createElement(Typography, {
-      className: "neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-header__breadcrumb-link",
+      className: "neeto-molecules-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-header__breadcrumb-link",
       component: "span",
       "data-cy": text,
       "data-test-id": text,
       style: "body2",
       weight: "normal"
-    }, text)), index + 1 !== breadcrumbs.length && /*#__PURE__*/React__default.createElement("span", {
-      className: "neeto-molecules-header__breadcrumb-separator neeto-ui-text-black"
-    }, "/"));
+    }, text)), /*#__PURE__*/React__default.createElement(Right, {
+      className: "neeto-molecules-header__breadcrumb-separator neeto-ui-text-gray-400",
+      size: 16
+    }));
   }));
 };
 var Breadcrumbs$1 = /*#__PURE__*/React__default.memo(Breadcrumbs);
 
 var Dropdown = function Dropdown(props) {
   return /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$1({
+    buttonProps: {
+      className: "ml-1.5"
+    },
     buttonStyle: "text",
+    className: "ml-3",
     icon: MenuVertical,
     position: "bottom-end"
   }, props));
@@ -1672,6 +1678,7 @@ var Dropdown = function Dropdown(props) {
 
 var Header$2 = function Header(_ref) {
   var title = _ref.title,
+    menuBarToggle = _ref.menuBarToggle,
     searchProps = _ref.searchProps,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
@@ -1684,17 +1691,24 @@ var Header$2 = function Header(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(["neeto-molecules-header", className])
+    className: classnames(["neeto-molecules-header", {
+      "neeto-molecules-header--has-breadcrumbs": !isEmpty(breadcrumbs)
+    }, className])
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-header__left"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, menuBarToggle && /*#__PURE__*/React__default.createElement(Button, {
+    "aria-label": "Toggle Menubar",
+    className: "neeto-molecules-header__toggle-menubar-btn",
+    "data-cy": "menubar-toggle-button",
+    icon: HamburgerMenu,
+    style: "text",
+    onClick: menuBarToggle
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-header__left-data-wrap"
-  }, isNotEmpty(breadcrumbs) && /*#__PURE__*/React__default.createElement(Breadcrumbs$1, {
+  }, breadcrumbs && /*#__PURE__*/React__default.createElement(Breadcrumbs$1, {
     breadcrumbs: breadcrumbs
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("neeto-molecules-header__page-title", {
-      "neeto-molecules-header__page-title--has-breadcrumbs": isNotEmpty(breadcrumbs)
-    })
+    className: "neeto-molecules-header__page-title"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     "data-cy": "main-header",
     "data-test-id": "main-header",
@@ -1754,10 +1768,8 @@ var INITIAL_VALUES = {
 
 var TagBlock = function TagBlock(_ref) {
   var status = _ref.status,
-    isCnameRecordsAdded = _ref.isCnameRecordsAdded,
     _ref$stacked = _ref.stacked,
-    stacked = _ref$stacked === void 0 ? false : _ref$stacked,
-    handleValidateCname = _ref.handleValidateCname;
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var isDomainValidated = status === "active" || status === "pending_cname_validation";
@@ -1782,11 +1794,6 @@ var TagBlock = function TagBlock(_ref) {
     indicatorStyle: status === "active" ? "success" : "warning",
     style: "secondary",
     label: t("neetoMolecules.customDomain.status.cname.".concat(camelCasedStatus))
-  }), isCnameRecordsAdded && status === "pending_cname_validation" && /*#__PURE__*/React__default.createElement(Button, {
-    className: "text-xs",
-    style: "link",
-    label: t("neetoMolecules.customDomain.validation.buttonLabel.cnameCheck"),
-    onClick: handleValidateCname
   }))));
 };
 var TagBlock$1 = /*#__PURE__*/React__default.memo(TagBlock);
@@ -1845,8 +1852,11 @@ var recordData = function recordData(customDomain) {
   var recordName = isDomainValidated ? hostname : cnameValidationParams === null || cnameValidationParams === void 0 ? void 0 : cnameValidationParams.name;
   var recordValue = isDomainValidated ? dnsTarget : cnameValidationParams === null || cnameValidationParams === void 0 ? void 0 : cnameValidationParams.value;
   var recordType = isDomainValidated ? t$1("neetoMolecules.customDomain.cname") : t$1("neetoMolecules.customDomain.domainValidationCname");
-  var recordDescription = t$1("neetoMolecules.customDomain.validation.desc", {
+  var recordDescription = isDomainValidated ? t$1("neetoMolecules.customDomain.validation.desc", {
     record: recordType
+  }) : t$1("neetoMolecules.customDomain.validation.desc", {
+    record: recordType,
+    proxyMessage: t$1("neetoMolecules.customDomain.validation.proxyMessage")
   });
   var recordNameLabel = t$1("neetoMolecules.customDomain.validation.record", {
     record: recordType,
@@ -1906,28 +1916,25 @@ var Record = function Record(_ref) {
 };
 var Record$1 = /*#__PURE__*/React__default.memo(Record);
 
-var CustomDomainInfo = function CustomDomainInfo(_ref) {
-  var time = _ref.time;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+var StatusInfo = function StatusInfo() {
+  var helpUrl = "https://help.".concat(globalProps.appName.toLowerCase(), ".com/articles/custom-domains");
   return /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-6"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-rounded neeto-ui-bg-gray-100 neeto-ui-text-gray-700 space-y-3 p-4"
   }, /*#__PURE__*/React__default.createElement(Trans, {
-    i18nKey: "neetoMolecules.customDomain.messageBlock.dnsStatus"
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    href: "mailto:support@neeto.com",
-    label: "support@neeto.com",
-    style: "link"
-  })), /*#__PURE__*/React__default.createElement(Callout, {
-    icon: Info,
-    style: "info"
-  }, t("neetoMolecules.customDomain.messageBlock.cnameAddedTime", {
-    time: timeFormat.fromNow(time)
+    i18nKey: "neetoMolecules.customDomain.messageBlock.dnsStatus",
+    components: {
+      a: /*#__PURE__*/React__default.createElement("a", {
+        className: "neeto-ui-btn--style-link",
+        href: helpUrl,
+        rel: "noreferrer",
+        target: "_blank"
+      })
+    }
   })));
 };
-var StatusInfo = /*#__PURE__*/React__default.memo(CustomDomainInfo);
+var StatusInfo$1 = /*#__PURE__*/React__default.memo(StatusInfo);
 
 var getCustomDomainValidationSchema = function getCustomDomainValidationSchema() {
   return Yup.object().shape({
@@ -2136,14 +2143,12 @@ var Manage = function Manage(_ref) {
       loading: isValidating,
       label: t("neetoMolecules.customDomain.validation.buttonLabel.domain"),
       onClick: handleValidateDomain
-    }), customDomain.status === "pending_cname_validation" && !customDomain.addedCnameAt && /*#__PURE__*/React__default.createElement(Button, {
+    }), customDomain.status === "pending_cname_validation" && /*#__PURE__*/React__default.createElement(Button, {
       "data-cy": "validate-cname-record-button",
       loading: isCnameValidating || isUpdating,
       label: t("neetoMolecules.customDomain.validation.buttonLabel.cnameAdded"),
       onClick: handleUpdateCname
-    }), customDomain.status === "pending_cname_validation" && customDomain.addedCnameAt && /*#__PURE__*/React__default.createElement(StatusInfo, {
-      time: customDomain.addedCnameAt
-    })))));
+    }), /*#__PURE__*/React__default.createElement(StatusInfo$1, null)))));
   }));
 };