@docsvision/management-console 6.2.0-beta.12 → 6.2.0-beta.13

package/index.js

@@ -66,7 +66,7 @@ function Accordion(props) {
 }
 function AlertBanner({ text }) {
   if (text) {
-    return /* @__PURE__ */ jsx("div", { className: "alert-banner", children: /* @__PURE__ */ jsx(Typography$3, { variant: "subtitle2", color: "inherit", children: text }) });
+    return /* @__PURE__ */ jsx("div", { className: "alert-banner", children: /* @__PURE__ */ jsx(Typography$3, { color: "inherit", children: text }) });
   }
 }
 function ButtonWithLoading(props) {
@@ -52799,7 +52799,7 @@ function ErrorBlock({ text, close }) {
   ] });
 }
 function ErrorMessage(props) {
-  return /* @__PURE__ */ jsx("p", { className: classNames("error-message", props.className), children: props.message });
+  return /* @__PURE__ */ jsx(Typography$3, { component: "p", variant: "caption", className: classNames("error-message", props.className), children: props.message });
 }
 function ExpandButton$1(props) {
   const { expanded, dataTestId, className, ...buttonProps } = props;
@@ -58959,14 +58959,14 @@ function TextMessage(props) {
   const { content, wrapperClassName, footer, footerClassName, header, headerClassName, contentClassName } = props;
   const textContent = getTextContent$1(content, contentClassName);
   return /* @__PURE__ */ jsxs("div", { className: classNames("text-message__wrapper", wrapperClassName), children: [
-    header && /* @__PURE__ */ jsx("p", { className: headerClassName, children: header }),
+    header && /* @__PURE__ */ jsx(Typography$3, { component: "p", className: headerClassName, children: header }),
     textContent,
-    footer && /* @__PURE__ */ jsx("p", { className: footerClassName, children: footer })
+    footer && /* @__PURE__ */ jsx(Typography$3, { component: "p", className: footerClassName, children: footer })
   ] });
 }
 function getTextContent$1(content, className) {
   if (typeof content === "string") {
-    return /* @__PURE__ */ jsx("p", { className, children: content });
+    return /* @__PURE__ */ jsx(Typography$3, { component: "p", className, children: content });
   }
   return /* @__PURE__ */ jsx("ul", { className: classNames("text-message__list", className), children: content.map((m2) => /* @__PURE__ */ jsx("li", { children: m2 }, m2)) });
 }
@@ -59004,7 +59004,7 @@ function CellTextContent({ content, multiline = false }) {
     const shouldShowTooltip = isWidthOverflowing || isHeightOverflowing;
     setShowTooltip(shouldShowTooltip);
   }, [contentRef, content]);
-  return /* @__PURE__ */ jsx(LightTooltip, { title: content, placement: "top-start", disableHoverListener: !showTooltip, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: multiline ? "cell-text-content-multiline" : "cell-text-content", children: /* @__PURE__ */ jsx("span", { children: content }) }) });
+  return /* @__PURE__ */ jsx(LightTooltip, { title: content, placement: "top-start", disableHoverListener: !showTooltip, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: multiline ? "cell-text-content-multiline" : "cell-text-content", children: /* @__PURE__ */ jsx(Typography$3, { variant: "body2", children: content }) }) });
 }
 function CellWithFixedWidth(props) {
   const { content, maxWidth: maxWidth2 } = props;
@@ -59066,7 +59066,7 @@ function DatabaseSettingsCard(props) {
     /* @__PURE__ */ jsxs(Grid$1, { container: true, alignItems: "center", justifyContent: "space-between", wrap: "nowrap", className: "database-settings-card__head", children: [
       /* @__PURE__ */ jsxs(Grid$1, { container: true, alignItems: "center", children: [
         /* @__PURE__ */ jsx(StorageRounded, { color: "secondary", fontSize: "large" }),
-        /* @__PURE__ */ jsx("p", { className: "database-settings-card__title", children: title })
+        /* @__PURE__ */ jsx(Typography$3, { variant: "h5", className: "database-settings-card__title", children: title })
       ] }),
       /* @__PURE__ */ jsx(Grid$1, { children: isDefault && /* @__PURE__ */ jsx(Chip$1, { className: "database-settings-card__chip", size: "small", label }) })
     ] }),
@@ -59082,7 +59082,7 @@ function DropdownBody(props) {
     const shouldShowTooltip = contentRef.current?.scrollWidth > contentRef.current?.offsetWidth;
     setShowTooltip(shouldShowTooltip);
   }, [displayName]);
-  return /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: showTooltip ? displayName : "", disableFocusListener: true, disableTouchListener: true, children: /* @__PURE__ */ jsx("span", { ref: contentRef, className: "dropdown-body", children: displayName }) });
+  return /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: showTooltip ? displayName : "", disableFocusListener: true, disableTouchListener: true, children: /* @__PURE__ */ jsx(Typography$3, { component: "span", ref: contentRef, className: "dropdown-body", children: displayName }) });
 }
 function getDisplayName(label, options, value) {
   if (typeof value === "undefined" || value === null) return label;
@@ -59092,7 +59092,7 @@ function getDisplayName(label, options, value) {
 const DropdownOption2 = React__default.forwardRef(function DropdownOption22({ displayName, ...menuItemProps }, ref2) {
   const contentRef = React__default.useRef(null);
   const showTooltip = contentRef.current?.scrollWidth > contentRef.current?.offsetWidth;
-  return /* @__PURE__ */ jsx(MenuItem$2, { ref: ref2, ...menuItemProps, children: /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: showTooltip ? displayName : "", disableFocusListener: true, disableTouchListener: true, children: /* @__PURE__ */ jsx("span", { ref: contentRef, className: "dropdown-option__content", children: displayName }) }) });
+  return /* @__PURE__ */ jsx(MenuItem$2, { ref: ref2, ...menuItemProps, children: /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: showTooltip ? displayName : "", disableFocusListener: true, disableTouchListener: true, children: /* @__PURE__ */ jsx(Typography$3, { component: "span", ref: contentRef, className: "dropdown-option__content", children: displayName }) }) });
 });
 function EditorWrapper({ children, isChanged, isEditable }) {
   return /* @__PURE__ */ jsx("div", { className: classNames(classIf(isChanged, "changed"), classIf(isEditable, "editable"), "editor-wrapper"), children });
@@ -59136,10 +59136,10 @@ function EditorCollectionEditor(props) {
   ] });
 }
 function EditorDescription({ text }) {
-  return text ? /* @__PURE__ */ jsx("div", { className: "editor-description", children: text }) : null;
+  return text ? /* @__PURE__ */ jsx(Typography$3, { variant: "body2", className: "editor-description", children: text }) : null;
 }
 function EditorName({ text }) {
-  return /* @__PURE__ */ jsx("div", { className: "editor-name", children: text });
+  return /* @__PURE__ */ jsx(Typography$3, { variant: "h5", className: "editor-name", children: text });
 }
 function EditorInnerWrapper(props) {
   const { label, description, children, className } = props;
@@ -59154,7 +59154,7 @@ function GroupPanel(props) {
   return /* @__PURE__ */ jsx(List$4, { component: Paper$3, children: groups && Object.keys(groups).map((group) => {
     return /* @__PURE__ */ jsxs(ListItemButton, { onClick: () => selectGroup(group), selected: selectedGroup === group, children: [
       /* @__PURE__ */ jsx(ListItemIcon$1, { children: /* @__PURE__ */ jsx(GroupIcon, {}) }),
-      /* @__PURE__ */ jsx(ListItemText$1, { primary: group })
+      /* @__PURE__ */ jsx(ListItemText$1, { slotProps: { primary: { variant: "body2" } }, primary: group })
     ] }, group);
   }) });
 }
@@ -83676,6 +83676,35 @@ const theme = createTheme$3({
     h1: {
       fontSize: "2rem",
       fontWeight: 600
+    },
+    h4: {
+      fontSize: "1.2rem",
+      fontWeight: 600
+    },
+    h5: {
+      fontSize: "1.1rem",
+      fontWeight: 600
+    },
+    h6: {
+      fontSize: "1rem",
+      fontWeight: 600,
+      lineHeight: "normal"
+    },
+    subtitle1: {
+      fontSize: "1.5rem",
+      fontWeight: 400,
+      lineHeight: 1.5
+    },
+    subtitle2: {
+      fontSize: "1.2rem",
+      fontWeight: 400
+    },
+    body2: {
+      fontSize: ".85rem",
+      lineHeight: 1.5
+    },
+    caption: {
+      fontSize: ".8rem"
     }
   },
   components: {
@@ -85471,7 +85500,7 @@ function DropdownWithTooltip(props) {
     },
     renderValue: (selected) => {
       const selectedOption = options.find((option) => option.value === Number(selected));
-      return /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: selectedOption?.tooltip, children: /* @__PURE__ */ jsx("span", { className: "database-generation-settings__selected-value", children: selectedOption?.displayName }) });
+      return /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: selectedOption?.tooltip, children: /* @__PURE__ */ jsx(Typography$3, { component: "span", className: "database-generation-settings__selected-value", children: selectedOption?.displayName }) });
     }
   };
   return /* @__PURE__ */ jsx(
@@ -85485,7 +85514,7 @@ function DropdownWithTooltip(props) {
       className,
       size: "small",
       slotProps: { select: { ...selectProps, inputProps: { "data-testid": dataTestId } } },
-      children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, "data-testid": `${dataTestId}-option-${option.value}`, children: /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: option.tooltip, children: /* @__PURE__ */ jsx("span", { children: option.displayName }) }) }, `${name}_${option.value}`))
+      children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, "data-testid": `${dataTestId}-option-${option.value}`, children: /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: option.tooltip, children: /* @__PURE__ */ jsx(Typography$3, { component: "span", children: option.displayName }) }) }, `${name}_${option.value}`))
     }
   );
 }
@@ -88568,7 +88597,6 @@ function ReloadIcon(props) {
   const { className, color: color2, loading, onClick } = props;
   return /* @__PURE__ */ jsx("div", { onClick, className: classNames("reload-icon", className, classIf(loading, "loading")), children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: color2, children: /* @__PURE__ */ jsx("path", { d: "M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z" }) }) });
 }
-const ICON_COLOR = "#607d8b";
 function ExpandButton(props) {
   const { expanded, dataTestId, className, disabled, ...elementProps } = props;
   const expandedClass = expanded ? "expand-button__expanded" : "expand-button__collapsed";
@@ -88582,12 +88610,13 @@ function ExpandButton(props) {
     }
   );
 }
+const ICON_COLOR = "#607d8b";
 function ServerList(props) {
   const { services, servers, selectServer, reloadServerList, selectedServerId, loading } = props;
   const [expanded, setExpanded] = useState(true);
   return /* @__PURE__ */ jsxs("div", { className: "server-list", children: [
     /* @__PURE__ */ jsxs("div", { className: "server-list__title", children: [
-      /* @__PURE__ */ jsxs("div", { className: "server-list__title__text", children: [
+      /* @__PURE__ */ jsxs(Typography$3, { variant: "h5", className: "server-list__title__text", children: [
         /* @__PURE__ */ jsx(ExpandButton, { onClick: () => setExpanded(!expanded), expanded: servers?.length > 0 && expanded, disabled: !servers?.length }),
         `${services.resources.Servers} (${servers?.length ?? 0})`
       ] }),
@@ -88601,7 +88630,7 @@ function ServerList(props) {
           {
             className: "server-list__item-content" + classIf(selectedServerId === server.id, "selected"),
             onClick: () => selectServer(server),
-            children: server.name
+            children: /* @__PURE__ */ jsx(Typography$3, { variant: "body2", component: "span", children: server.name })
           }
         )
       ] }, server.id);
@@ -88680,23 +88709,6 @@ class ServersPageLogic extends ComponentLogic {
 function ServerIcon() {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24px", height: "24px", fill: ICON_COLOR, children: /* @__PURE__ */ jsx("path", { d: "M2 4.6V9.4C2 10.3 2.5 11 3.2 11H20.9C21.5 11 22.1 10.3 22.1 9.4V4.6C22 3.7 21.5 3 20.8 3H3.2C2.5 3 2 3.7 2 4.6M10 8V6H9V8H10M5 8H7V6H5V8M20 9H4V5H20V9M2 14.6V19.4C2 20.3 2.5 21 3.2 21H20.9C21.5 21 22.1 20.3 22.1 19.4V14.6C22.1 13.7 21.6 13 20.9 13H3.2C2.5 13 2 13.7 2 14.6M10 18V16H9V18H10M5 18H7V16H5V18M20 19H4V15H20V19Z" }) });
 }
-function ServerDescriptionCard(props) {
-  const { name, operatingSystem, services } = props;
-  const resources = services.resources;
-  const fields = [
-    { label: resources.ServerName, value: name },
-    { label: resources.OperatingSystem, value: operatingSystem }
-  ];
-  return /* @__PURE__ */ jsxs("div", { className: "server-description-card", children: [
-    /* @__PURE__ */ jsx(InformationIcon, { className: "server-description-card__info-icon", color: ICON_COLOR }),
-    /* @__PURE__ */ jsx("div", { className: "server-description-card__data", children: fields.map((field) => {
-      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-        /* @__PURE__ */ jsx("label", { children: field.label }),
-        /* @__PURE__ */ jsx("div", { children: field.value })
-      ] }, field.label);
-    }) })
-  ] });
-}
 function ComponentList(props) {
   const { components, services, onComponentClick, onDeleteClick } = props;
   const onDeleteIconClick = async (event, component) => {
@@ -88717,7 +88729,7 @@ function ComponentList(props) {
     components.map((component) => {
       return /* @__PURE__ */ jsxs("div", { className: "component-list__item", onClick: () => onComponentClick(component), children: [
         /* @__PURE__ */ jsx(ComponentIcon, { color: ICON_COLOR }),
-        /* @__PURE__ */ jsx("div", { className: "component-list__item__content", children: component.serviceName }),
+        /* @__PURE__ */ jsx(Typography$3, { className: "component-list__item__content", children: component.serviceName }),
         /* @__PURE__ */ jsx(
           DeleteIcon,
           {
@@ -88731,6 +88743,26 @@ function ComponentList(props) {
     })
   ] });
 }
+function ServerDescriptionCard(props) {
+  const { name, operatingSystem, services } = props;
+  const resources = services.resources;
+  const fields = [
+    { label: resources.ServerName, value: name },
+    { label: resources.OperatingSystem, value: operatingSystem }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "server-description-card", children: [
+    /* @__PURE__ */ jsx(InformationIcon, { className: "server-description-card__info-icon", color: ICON_COLOR }),
+    /* @__PURE__ */ jsx("div", { className: "server-description-card__data", children: fields.map((field) => {
+      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          field.label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx(Typography$3, { component: "span", variant: "body2", children: field.value })
+      ] }, field.label);
+    }) })
+  ] });
+}
 function ServerDescriptionPanel(props) {
   const { serverDescription, loadingServices, services } = props;
   const onComponentClick = (component) => {
@@ -88744,7 +88776,7 @@ function ServerDescriptionPanel(props) {
       return /* @__PURE__ */ jsx(LoadingMore, { loading: true });
     }
     if (!serverDescription) {
-      return /* @__PURE__ */ jsx("div", { className: "server-description-panel__title", children: services.resources.SelectServer });
+      return /* @__PURE__ */ jsx(Typography$3, { variant: "subtitle2", className: "server-description-panel__title", children: services.resources.SelectServer });
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -122316,7 +122348,7 @@ function ExtendedConfiguration(props) {
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "extended-configuration", children: [
-      /* @__PURE__ */ jsx(Typography$3, { variant: "h4", color: "secondary", children: resources.AdvancedSettings }),
+      /* @__PURE__ */ jsx(Typography$3, { variant: "h1", color: "secondary", children: resources.AdvancedSettings }),
       /* @__PURE__ */ jsx(SearchRow, { changeSearchText: (searchText2) => logic.changeSearchText(searchText2), searchText, services: props.services }),
       /* @__PURE__ */ jsx(Paper$3, { className: "extended-configuration__table", children: /* @__PURE__ */ jsx(
         DataGrid,
@@ -125398,7 +125430,7 @@ function ConfigurationLocksPage(props) {
         resources,
         pendingUnlockOperations
       }
-    ) : /* @__PURE__ */ jsx("p", { className: "configuration-locks-page__text", children: resources.ConfigurationLocks_Empty }))
+    ) : /* @__PURE__ */ jsx(Typography$3, { component: "p", className: "configuration-locks-page__text", children: resources.ConfigurationLocks_Empty }))
   ] }) });
 }
 function ConfigurationLocksRouteComponent(props) {