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

package/index.d.ts

@@ -1471,6 +1471,10 @@ declare interface IHelpIconButtonProps {
     transformOrigin?: PopoverOrigin;
 }
 
+declare interface IInfoBanner {
+    text: string;
+}
+
 export declare interface IInformationIconProps {
     className?: string;
     color?: string;
@@ -1700,6 +1704,8 @@ declare enum IncomingMessageState {
     Paused = 4
 }
 
+export declare function InfoBanner({ text }: IInfoBanner): JSX.Element;
+
 export declare function InformationIcon(props: IInformationIconProps): JSX.Element;
 
 declare interface INumberComponentProps extends Omit<OutlinedTextFieldProps, "variant" | "value" | "onChange" | "type" | "defaultValue"> {

package/index.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React__default, { useState, useEffect, createElement, useRef, useMemo, useContext, memo, isValidElement, cloneElement, Children, createContext, useCallback, useDebugValue, useLayoutEffect, forwardRef as forwardRef$1, Fragment as Fragment$1, Component, useReducer } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Accordion as Accordion$1, AccordionSummary, AccordionDetails, Typography as Typography$3, Button as Button$3, Box, CircularProgress as CircularProgress$3, Tooltip as Tooltip$2, Breadcrumbs, IconButton as IconButton$3, Popover as Popover$4, SvgIcon as SvgIcon$3, TableCell as TableCell$2, Grid as Grid$1, Paper as Paper$3, Chip as Chip$1, MenuItem as MenuItem$2, List as List$4, ListItemButton, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1, ListItem as ListItem$1, Input as Input$3, TextField as TextField$3, InputAdornment as InputAdornment$3, Stack, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, RadioGroup, Radio, createTheme as createTheme$3, TableContainer, Table as Table$1, TableHead, TableRow as TableRow$1, TableBody as TableBody$1, capitalize as capitalize$2, ThemeProvider as ThemeProvider$1, Dialog as Dialog$2, DialogTitle, DialogContent as DialogContent$2, DialogActions as DialogActions$2 } from "@mui/material";
+import { Accordion as Accordion$1, AccordionSummary, AccordionDetails, Typography as Typography$3, Button as Button$3, Box, CircularProgress as CircularProgress$3, Tooltip as Tooltip$2, Breadcrumbs, IconButton as IconButton$3, Popover as Popover$4, SvgIcon as SvgIcon$3, TableCell as TableCell$2, Grid as Grid$1, Paper as Paper$3, Chip as Chip$1, MenuItem as MenuItem$2, List as List$4, ListItemButton, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1, ListItem as ListItem$1, Input as Input$3, TextField as TextField$3, InputAdornment as InputAdornment$3, Stack, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, RadioGroup, Radio, createTheme as createTheme$3, TableContainer, Table as Table$1, TableHead, TableRow as TableRow$1, TableBody as TableBody$1, FormControl as FormControl$3, capitalize as capitalize$2, ThemeProvider as ThemeProvider$1, Dialog as Dialog$2, DialogTitle, DialogContent as DialogContent$2, DialogActions as DialogActions$2 } from "@mui/material";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { flushSync } from "react-dom";
 import { unstable_createGetCssVar, createSpacing as createSpacing$2, useTheme as useTheme$4, GlobalStyles as GlobalStyles$1, unstable_memoTheme, keyframes, css as css$2, styled as styled$1, alpha as alpha$2, lighten as lighten$2, darken as darken$2, decomposeColor as decomposeColor$2, recomposeColor as recomposeColor$2, getThemeProps as getThemeProps$2 } from "@mui/system";
@@ -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,17 +58959,22 @@ 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)) });
 }
+function InfoBanner({ text }) {
+  if (text) {
+    return /* @__PURE__ */ jsx("div", { className: "info-banner", "data-testid": "info-banner", children: /* @__PURE__ */ jsx(Typography$3, { variant: "subtitle2", color: "inherit", children: text }) });
+  }
+}
 const KeyboardArrowRightIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
 }));
@@ -59004,7 +59009,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 +59071,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 +59087,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 +59097,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 +59141,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 +59159,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 +83681,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: {
@@ -83706,12 +83740,22 @@ function DropdownWithEllipsis(props) {
   const { options, value, label, handleChange, dataTestId, field, className, noOptionsText } = props;
   const anchorRef = useRef(null);
   const [menuWidth, setMenuWidth] = useState(void 0);
+  const [isOpen, setIsOpen] = useState(false);
   useLayoutEffect(() => {
     setMenuWidth(anchorRef.current?.offsetWidth);
   }, []);
+  const handleKeyDown2 = (event) => {
+    if (options.length === 0 && event.key === "Tab") {
+      setIsOpen(false);
+      return;
+    }
+  };
   const selectProps = {
     ...commonMuiProps.select,
     variant: "outlined",
+    open: isOpen,
+    onOpen: () => setIsOpen(true),
+    onClose: () => setIsOpen(false),
     MenuProps: {
       keepMounted: true,
       ...commonMuiProps.select.MenuProps,
@@ -83730,6 +83774,7 @@ function DropdownWithEllipsis(props) {
       ref: anchorRef,
       onChange: (event) => handleChange(event.target.value),
       className,
+      onKeyDown: handleKeyDown2,
       variant: "outlined",
       size: "small",
       slotProps: { select: selectProps },
@@ -83912,6 +83957,227 @@ function AdvancedSettings(props) {
   };
   return /* @__PURE__ */ jsx("div", { className: "advanced-settings", children: /* @__PURE__ */ jsx(Button$3, { name: id, variant: "contained", size: "small", color: "secondary", hidden, onClick: goToConfigurationPage, children: label }) });
 }
+var LogBackupStrategyType = /* @__PURE__ */ ((LogBackupStrategyType2) => {
+  LogBackupStrategyType2[LogBackupStrategyType2["Period"] = 0] = "Period";
+  LogBackupStrategyType2[LogBackupStrategyType2["Quantity"] = 1] = "Quantity";
+  LogBackupStrategyType2[LogBackupStrategyType2["Disabled"] = 2] = "Disabled";
+  return LogBackupStrategyType2;
+})(LogBackupStrategyType || {});
+LogBackupStrategyType.Period;
+const LOG_BACKUP_STRATEGY_PERIOD_IN_DAYS_DEFAULT = 7;
+const LOG_BACKUP_STRATEGY_QUANTITY_IN_MESSAGES_DEFAULT = 3e3;
+const LOG_BACKUP_STRATEGY_BACKUP_FOLDER_DEFAULT = "";
+const LOG_BACKUP_STRATEGY_VALUE_DEFAULT = {
+  strategyType: LogBackupStrategyType,
+  periodInDays: LOG_BACKUP_STRATEGY_PERIOD_IN_DAYS_DEFAULT,
+  quantityInMessages: LOG_BACKUP_STRATEGY_QUANTITY_IN_MESSAGES_DEFAULT,
+  backupFolder: LOG_BACKUP_STRATEGY_BACKUP_FOLDER_DEFAULT
+};
+const LOG_BACKUP_STRATEGY_NUMBER_INPUT_WIDTH = 160;
+const LOG_BACKUP_STRATEGY_PERIOD_MIN_VALUE = 1;
+const LOG_BACKUP_STRATEGY_PERIOD_MAX_VALUE = 2147483647;
+const LOG_BACKUP_STRATEGY_MESSAGES_MIN_VALUE = 0;
+const LOG_BACKUP_STRATEGY_MESSAGES_MAX_VALUE = 2147483647;
+function getLogBackupStrategyOptions(services) {
+  const resources = services.resources;
+  const { numberGroupSeparator, numberDecimalSeparator } = services.applicationSettings.culture;
+  return [
+    {
+      name: "LogBackupStrategy_Period",
+      type: LogBackupStrategyType.Period,
+      label: resources.LogBackupStrategy_PeriodStrategy,
+      controls: [
+        {
+          name: "period-in-days",
+          instance: NumberComponent,
+          getProperties: (field) => ({
+            name: "periodInDays",
+            numberGroupSeparator,
+            numberDecimalSeparator,
+            sx: {
+              minWidth: LOG_BACKUP_STRATEGY_NUMBER_INPUT_WIDTH,
+              maxWidth: LOG_BACKUP_STRATEGY_NUMBER_INPUT_WIDTH
+            },
+            slotProps: {
+              htmlInput: {
+                className: "log-backup-strategy-folder__number_text-center"
+              }
+            },
+            value: field.value.periodInDays,
+            allowDecimals: false,
+            minValue: LOG_BACKUP_STRATEGY_PERIOD_MIN_VALUE,
+            maxValue: LOG_BACKUP_STRATEGY_PERIOD_MAX_VALUE,
+            onChange: (value) => field.onChange({ ...field.value, periodInDays: value }),
+            onBlur: (ev) => {
+              if (ev.target.value === "") {
+                field.onChange({ ...field.value, periodInDays: LOG_BACKUP_STRATEGY_PERIOD_MIN_VALUE });
+              }
+            }
+          })
+        }
+      ]
+    },
+    {
+      name: "LogBackupStrategy_Quantity",
+      type: LogBackupStrategyType.Quantity,
+      label: resources.LogBackupStrategy_QuantityStrategy,
+      controls: [
+        {
+          name: "quantity-in-messages",
+          instance: NumberComponent,
+          getProperties: (field) => ({
+            name: "quantityInMessages",
+            numberGroupSeparator,
+            numberDecimalSeparator,
+            sx: {
+              minWidth: LOG_BACKUP_STRATEGY_NUMBER_INPUT_WIDTH,
+              maxWidth: LOG_BACKUP_STRATEGY_NUMBER_INPUT_WIDTH
+            },
+            slotProps: {
+              htmlInput: {
+                className: "log-backup-strategy-folder__number_text-center"
+              }
+            },
+            value: field.value.quantityInMessages,
+            allowDecimals: false,
+            minValue: LOG_BACKUP_STRATEGY_MESSAGES_MIN_VALUE,
+            maxValue: LOG_BACKUP_STRATEGY_MESSAGES_MAX_VALUE,
+            onChange: (value) => field.onChange({ ...field.value, quantityInMessages: value }),
+            onBlur: (ev) => {
+              if (ev.target.value === "") {
+                field.onChange({ ...field.value, quantityInMessages: LOG_BACKUP_STRATEGY_MESSAGES_MIN_VALUE });
+              }
+            }
+          })
+        }
+      ]
+    },
+    {
+      name: "LogBackupStrategy_Disabled",
+      type: LogBackupStrategyType.Disabled,
+      label: resources.LogBackupStrategy_DisabledStrategy
+    }
+  ];
+}
+class LogBackupStrategyLogic extends ComponentLogic {
+  constructor() {
+    super(...arguments);
+    this.domain = y("LogBackupStrategyLogic");
+    this.componentDidMount = c$1("componentDidMount");
+    this.$options = this.domain.createStore([], { name: "$options" });
+  }
+  initOptions() {
+    v({
+      clock: this.componentDidMount,
+      fn: () => getLogBackupStrategyOptions(this.options.services),
+      target: this.$options
+    });
+  }
+  init() {
+    this.initOptions();
+  }
+}
+function convertLabelToNode(label, controls, field, services) {
+  return replaceControls(
+    label,
+    controls,
+    field
+  );
+}
+function replaceControls(label, controlsDescriptions, field) {
+  const controls = label.matchAll(/\[.+?\]/g);
+  let index = 0;
+  const nodes = [];
+  for (const control of controls) {
+    const controlSubstr = control[0];
+    const controlSubstrIndex = control.index;
+    const text = label.slice(index, controlSubstrIndex);
+    nodes.push(/* @__PURE__ */ jsx("span", { children: text }));
+    const controlDescriptionIndex = controlSubstr.replaceAll(/[\[\]]/g, "");
+    const controlName = controlsDescriptions[controlDescriptionIndex].name;
+    const ControlComponent = controlsDescriptions[controlDescriptionIndex].instance;
+    const controlProperties = controlsDescriptions[controlDescriptionIndex].getProperties(field);
+    nodes.push(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `log-backup-strategy__option_control-wrapper ${controlName}`,
+          "data-testid": `log-backup-strategy-option-control-wrapper-${controlName}`,
+          onClick: (ev) => ev.preventDefault(),
+          children: /* @__PURE__ */ jsx(ControlComponent, { ...controlProperties })
+        }
+      )
+    );
+    index = index + text.length + controlSubstr.length;
+  }
+  nodes.push(/* @__PURE__ */ jsx("span", { children: label.slice(index) }));
+  return /* @__PURE__ */ jsx("div", { className: "log-backup-strategy__option_label", children: nodes });
+}
+function LogBackupStrategyOption(props) {
+  const { name, type: type2, label, services, controls = [], field, fieldName } = props;
+  const key = `${fieldName}_${props.type}`;
+  return /* @__PURE__ */ jsx("div", { "data-testid": "log-backup-strategy_option-wrapper", children: /* @__PURE__ */ jsx(
+    FormControlLabel$1,
+    {
+      label: convertLabelToNode(label, controls, field),
+      control: /* @__PURE__ */ createElement(
+        Radio,
+        {
+          ...field,
+          key,
+          id: key,
+          name,
+          color: "primary",
+          onChange: (ev) => field.onChange({ ...field.value, strategyType: Number(ev.target.value) }),
+          value: type2,
+          checked: field.value.strategyType === type2,
+          "data-testid": `log-backup-strategy_option_${type2}`
+        }
+      )
+    },
+    `${key}_label}`
+  ) });
+}
+function LogBackupStrategy(props) {
+  const { id: fieldName, value } = props;
+  const services = useContext(ServicesContext);
+  const logic = useLogic({ ...props, services }, LogBackupStrategyLogic);
+  const options = e(logic.$options);
+  const { resetField, control } = useCustomFormContext();
+  const { field, fieldState } = useController({
+    name: props.id,
+    control,
+    defaultValue: { ...LOG_BACKUP_STRATEGY_VALUE_DEFAULT, ...props.value || {} }
+  });
+  useEffect(() => {
+    logic.componentDidMount();
+  }, [logic]);
+  return /* @__PURE__ */ jsx(EditorContainer, { resetValue: () => {
+    resetField(props.id);
+  }, isChanged: fieldState.isDirty, ...props, children: /* @__PURE__ */ jsxs(FormControl$3, { size: "small", children: [
+    /* @__PURE__ */ jsx(RadioGroup, { children: options.map((option) => /* @__PURE__ */ jsx(LogBackupStrategyOption, { ...option, field, fieldName, services }, `${fieldName}_${option.type}`)) }),
+    /* @__PURE__ */ jsx(
+      EditorInnerWrapper,
+      {
+        label: services.resources.LogBackupStrategy_Title,
+        description: services.resources.LogBackupStrategy_Description,
+        children: /* @__PURE__ */ jsx(
+          TextField$3,
+          {
+            variant: "outlined",
+            size: "small",
+            className: "log-backup-strategy-folder__input",
+            value: field.value.backupFolder,
+            fullWidth: true,
+            required: field.value.strategyType,
+            onChange: (e2) => field.onChange({ ...field.value, backupFolder: e2.target.value || "" }),
+            slotProps: { htmlInput: { "data-testid": "log-backup-strategy-folder" } }
+          }
+        )
+      }
+    )
+  ] }) });
+}
 var TableLocationType = /* @__PURE__ */ ((TableLocationType2) => {
   TableLocationType2[TableLocationType2["UseDefaultOrCurrent"] = 0] = "UseDefaultOrCurrent";
   TableLocationType2[TableLocationType2["UseOwnDatabase"] = 1] = "UseOwnDatabase";
@@ -85471,7 +85737,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 +85751,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}`))
     }
   );
 }
@@ -85555,6 +85821,7 @@ function registerEditors() {
   editorFactory.register("LdapCatalogs", LdapCatalogs);
   editorFactory.register("ReadonlyEditor", ReadonlyEditor);
   editorFactory.register("AdvancedSettings", AdvancedSettings);
+  editorFactory.register("LogBackupStrategy", LogBackupStrategy);
   editorFactory.register("DatabaseGenerationSettings", DatabaseGenerationSettings);
 }
 serviceName(function(s2) {
@@ -87365,6 +87632,11 @@ function Toolbar$1() {
     return await services.localizationService.getResources();
   };
   const changeLocale = async () => {
+    const { resources, formControl } = services;
+    if (formControl.isDirty) {
+      const canProceed = window.confirm(resources.UnsavedChangesConfirmation);
+      if (!canProceed) return;
+    }
     disableLocaleButton(true);
     let index;
     if (localeIndexInAvailableLocales + 1 < applicationSettings.availableLocales.length) {
@@ -88568,7 +88840,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 +88853,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 +88873,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 +88952,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 +88972,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 +88986,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 +89019,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 +122591,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 +125673,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) {
@@ -125829,6 +126104,7 @@ export {
   GroupPanel,
   HandPointRightIcon,
   HelpIconButton,
+  InfoBanner,
   InformationIcon,
   KEYCODE_ESCAPE,
   LayoutService,