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

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, 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 { 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, Menu as Menu$3 } 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";
@@ -58970,9 +58970,9 @@ function getTextContent$1(content, className) {
   }
   return /* @__PURE__ */ jsx("ul", { className: classNames("text-message__list", className), children: content.map((m2) => /* @__PURE__ */ jsx("li", { children: m2 }, m2)) });
 }
-function InfoBanner({ text }) {
+function InfoBanner({ text, typographyProps }) {
   if (text) {
-    return /* @__PURE__ */ jsx("div", { className: "info-banner", "data-testid": "info-banner", children: /* @__PURE__ */ jsx(Typography$3, { variant: "subtitle2", color: "inherit", children: text }) });
+    return /* @__PURE__ */ jsx("div", { className: "info-banner", "data-testid": "info-banner", children: /* @__PURE__ */ jsx(Typography$3, { color: "inherit", ...typographyProps, children: text }) });
   }
 }
 const KeyboardArrowRightIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
@@ -59032,6 +59032,9 @@ function CellWithTwoLineClamping(props) {
   };
   return /* @__PURE__ */ jsx(Cell, { className, style: { maxWidth: maxWidth2 }, align: props.align || "left", onClick, children: /* @__PURE__ */ jsx(LightTooltip, { title: content, placement: "top-start", disableHoverListener: !showTooltip, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: "mui-table__cell-clamp-two-line", children: content }) }) });
 }
+const ArrowDownwardIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+}));
 const ArrowDropDownOutlined = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "m7 10 5 5 5-5z"
 }));
@@ -59053,6 +59056,9 @@ const DeleteIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
 const GroupIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3m-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3m0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5m8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5"
 }));
+const MoreVertIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+}));
 const Replay = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8"
 }));
@@ -83664,7 +83670,8 @@ const theme = createTheme$3({
       main: "#c10015"
     },
     warning: {
-      main: "#f2c037"
+      main: "#ff9800",
+      light: "#ffe0b2"
     },
     info: {
       main: "#1976d2"
@@ -85802,6 +85809,52 @@ function DatabaseGenerationSettings(props) {
   });
   return /* @__PURE__ */ jsx(EditorCollectionEditor, { isChanged: isDirty, resetValue: () => resetField(fieldName, { defaultValue }), ...props, children: editors });
 }
+function ServerAppList(props) {
+  const { required, id: fieldName, value, label } = props;
+  const services = useContext(ServicesContext);
+  const resources = services.resources;
+  const { resetField, control } = useCustomFormContext();
+  const options = value?.services ?? [];
+  const defaultValue = {
+    currentServiceId: value?.currentServiceId ?? "",
+    services: options
+  };
+  const {
+    field,
+    fieldState: { isDirty, error }
+  } = useController({
+    name: fieldName,
+    control,
+    rules: {
+      validate: (value2) => {
+        if (required && !value2?.currentServiceId) {
+          return resources.Dialog_ValidationRequired;
+        }
+        return true;
+      }
+    },
+    defaultValue
+  });
+  const handleChange = (value2) => {
+    field.onChange({ ...field.value, currentServiceId: value2 });
+  };
+  return /* @__PURE__ */ jsxs(EditorContainer, { isChanged: isDirty, resetValue: () => resetField(fieldName, { defaultValue }), ...props, children: [
+    /* @__PURE__ */ jsx(
+      DropdownWithEllipsis,
+      {
+        options,
+        value: field.value?.currentServiceId,
+        label,
+        field,
+        dataTestId: "server-app-list",
+        handleChange,
+        className: "server-app-list",
+        noOptionsText: resources.NoApplicationServers
+      }
+    ),
+    error && /* @__PURE__ */ jsx(ErrorMessage, { message: error.message })
+  ] });
+}
 function registerEditors() {
   editorFactory.register("TenantsEditor", TenantsEditor);
   editorFactory.register("MailConnectionsEditor", MailConnectionsEditor);
@@ -85823,6 +85876,7 @@ function registerEditors() {
   editorFactory.register("AdvancedSettings", AdvancedSettings);
   editorFactory.register("LogBackupStrategy", LogBackupStrategy);
   editorFactory.register("DatabaseGenerationSettings", DatabaseGenerationSettings);
+  editorFactory.register("ServerAppList", ServerAppList);
 }
 serviceName(function(s2) {
   return s2.router;
@@ -88952,21 +89006,656 @@ 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 ComponentList(props) {
-  const { components, services, onComponentClick, onDeleteClick } = props;
-  const onDeleteIconClick = async (event, component) => {
+function getCircularProgressUtilityClass(slot) {
+  return generateUtilityClass("MuiCircularProgress", slot);
+}
+generateUtilityClasses("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
+const SIZE = 44;
+const circularRotateKeyframe = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const circularDashKeyframe = keyframes`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
+  }
+`;
+const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css$2`
+        animation: ${circularRotateKeyframe} 1.4s linear infinite;
+      ` : null;
+const dashAnimation = typeof circularDashKeyframe !== "string" ? css$2`
+        animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
+      ` : null;
+const useUtilityClasses$1a = (ownerState) => {
+  const {
+    classes: classes2,
+    variant,
+    color: color2,
+    disableShrink
+  } = ownerState;
+  const slots = {
+    root: ["root", variant, `color${capitalize(color2)}`],
+    svg: ["svg"],
+    circle: ["circle", `circle${capitalize(variant)}`, disableShrink && "circleDisableShrink"]
+  };
+  return composeClasses(slots, getCircularProgressUtilityClass, classes2);
+};
+const CircularProgressRoot = styled("span", {
+  name: "MuiCircularProgress",
+  slot: "Root",
+  overridesResolver: (props, styles3) => {
+    const {
+      ownerState
+    } = props;
+    return [styles3.root, styles3[ownerState.variant], styles3[`color${capitalize(ownerState.color)}`]];
+  }
+})(memoTheme(({
+  theme: theme2
+}) => ({
+  display: "inline-block",
+  variants: [{
+    props: {
+      variant: "determinate"
+    },
+    style: {
+      transition: theme2.transitions.create("transform")
+    }
+  }, {
+    props: {
+      variant: "indeterminate"
+    },
+    style: rotateAnimation || {
+      animation: `${circularRotateKeyframe} 1.4s linear infinite`
+    }
+  }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    props: {
+      color: color2
+    },
+    style: {
+      color: (theme2.vars || theme2).palette[color2].main
+    }
+  }))]
+})));
+const CircularProgressSVG = styled("svg", {
+  name: "MuiCircularProgress",
+  slot: "Svg"
+})({
+  display: "block"
+  // Keeps the progress centered
+});
+const CircularProgressCircle = styled("circle", {
+  name: "MuiCircularProgress",
+  slot: "Circle",
+  overridesResolver: (props, styles3) => {
+    const {
+      ownerState
+    } = props;
+    return [styles3.circle, styles3[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles3.circleDisableShrink];
+  }
+})(memoTheme(({
+  theme: theme2
+}) => ({
+  stroke: "currentColor",
+  variants: [{
+    props: {
+      variant: "determinate"
+    },
+    style: {
+      transition: theme2.transitions.create("stroke-dashoffset")
+    }
+  }, {
+    props: {
+      variant: "indeterminate"
+    },
+    style: {
+      // Some default value that looks fine waiting for the animation to kicks in.
+      strokeDasharray: "80px, 200px",
+      strokeDashoffset: 0
+      // Add the unit to fix a Edge 16 and below bug.
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === "indeterminate" && !ownerState.disableShrink,
+    style: dashAnimation || {
+      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+    }
+  }]
+})));
+const CircularProgress = /* @__PURE__ */ React.forwardRef(function CircularProgress22(inProps, ref2) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiCircularProgress"
+  });
+  const {
+    className,
+    color: color2 = "primary",
+    disableShrink = false,
+    size = 40,
+    style: style2,
+    thickness = 3.6,
+    value = 0,
+    variant = "indeterminate",
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    color: color2,
+    disableShrink,
+    size,
+    thickness,
+    value,
+    variant
+  };
+  const classes2 = useUtilityClasses$1a(ownerState);
+  const circleStyle = {};
+  const rootStyle = {};
+  const rootProps = {};
+  if (variant === "determinate") {
+    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
+    circleStyle.strokeDasharray = circumference.toFixed(3);
+    rootProps["aria-valuenow"] = Math.round(value);
+    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
+    rootStyle.transform = "rotate(-90deg)";
+  }
+  return /* @__PURE__ */ jsx(CircularProgressRoot, {
+    className: clsx$2(classes2.root, className),
+    style: {
+      width: size,
+      height: size,
+      ...rootStyle,
+      ...style2
+    },
+    ownerState,
+    ref: ref2,
+    role: "progressbar",
+    ...rootProps,
+    ...other,
+    children: /* @__PURE__ */ jsx(CircularProgressSVG, {
+      className: classes2.svg,
+      ownerState,
+      viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
+      children: /* @__PURE__ */ jsx(CircularProgressCircle, {
+        className: classes2.circle,
+        style: circleStyle,
+        ownerState,
+        cx: SIZE,
+        cy: SIZE,
+        r: (SIZE - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness
+      })
+    })
+  });
+});
+function getIconButtonUtilityClass(slot) {
+  return generateUtilityClass("MuiIconButton", slot);
+}
+const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]);
+const useUtilityClasses$19 = (ownerState) => {
+  const {
+    classes: classes2,
+    disabled,
+    color: color2,
+    edge,
+    size,
+    loading
+  } = ownerState;
+  const slots = {
+    root: ["root", loading && "loading", disabled && "disabled", color2 !== "default" && `color${capitalize(color2)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
+    loadingIndicator: ["loadingIndicator"],
+    loadingWrapper: ["loadingWrapper"]
+  };
+  return composeClasses(slots, getIconButtonUtilityClass, classes2);
+};
+const IconButtonRoot = styled(ButtonBase, {
+  name: "MuiIconButton",
+  slot: "Root",
+  overridesResolver: (props, styles3) => {
+    const {
+      ownerState
+    } = props;
+    return [styles3.root, ownerState.loading && styles3.loading, ownerState.color !== "default" && styles3[`color${capitalize(ownerState.color)}`], ownerState.edge && styles3[`edge${capitalize(ownerState.edge)}`], styles3[`size${capitalize(ownerState.size)}`]];
+  }
+})(memoTheme(({
+  theme: theme2
+}) => ({
+  textAlign: "center",
+  flex: "0 0 auto",
+  fontSize: theme2.typography.pxToRem(24),
+  padding: 8,
+  borderRadius: "50%",
+  color: (theme2.vars || theme2).palette.action.active,
+  transition: theme2.transitions.create("background-color", {
+    duration: theme2.transitions.duration.shortest
+  }),
+  variants: [{
+    props: (props) => !props.disableRipple,
+    style: {
+      "--IconButton-hoverBg": theme2.vars ? `rgba(${theme2.vars.palette.action.activeChannel} / ${theme2.vars.palette.action.hoverOpacity})` : alpha(theme2.palette.action.active, theme2.palette.action.hoverOpacity),
+      "&:hover": {
+        backgroundColor: "var(--IconButton-hoverBg)",
+        // Reset on touch devices, it doesn't add specificity
+        "@media (hover: none)": {
+          backgroundColor: "transparent"
+        }
+      }
+    }
+  }, {
+    props: {
+      edge: "start"
+    },
+    style: {
+      marginLeft: -12
+    }
+  }, {
+    props: {
+      edge: "start",
+      size: "small"
+    },
+    style: {
+      marginLeft: -3
+    }
+  }, {
+    props: {
+      edge: "end"
+    },
+    style: {
+      marginRight: -12
+    }
+  }, {
+    props: {
+      edge: "end",
+      size: "small"
+    },
+    style: {
+      marginRight: -3
+    }
+  }]
+})), memoTheme(({
+  theme: theme2
+}) => ({
+  variants: [{
+    props: {
+      color: "inherit"
+    },
+    style: {
+      color: "inherit"
+    }
+  }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    props: {
+      color: color2
+    },
+    style: {
+      color: (theme2.vars || theme2).palette[color2].main
+    }
+  })), ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    props: {
+      color: color2
+    },
+    style: {
+      "--IconButton-hoverBg": theme2.vars ? `rgba(${(theme2.vars || theme2).palette[color2].mainChannel} / ${theme2.vars.palette.action.hoverOpacity})` : alpha((theme2.vars || theme2).palette[color2].main, theme2.palette.action.hoverOpacity)
+    }
+  })), {
+    props: {
+      size: "small"
+    },
+    style: {
+      padding: 5,
+      fontSize: theme2.typography.pxToRem(18)
+    }
+  }, {
+    props: {
+      size: "large"
+    },
+    style: {
+      padding: 12,
+      fontSize: theme2.typography.pxToRem(28)
+    }
+  }],
+  [`&.${iconButtonClasses.disabled}`]: {
+    backgroundColor: "transparent",
+    color: (theme2.vars || theme2).palette.action.disabled
+  },
+  [`&.${iconButtonClasses.loading}`]: {
+    color: "transparent"
+  }
+})));
+const IconButtonLoadingIndicator = styled("span", {
+  name: "MuiIconButton",
+  slot: "LoadingIndicator"
+})(({
+  theme: theme2
+}) => ({
+  display: "none",
+  position: "absolute",
+  visibility: "visible",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  color: (theme2.vars || theme2).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: "flex"
+    }
+  }]
+}));
+const IconButton = /* @__PURE__ */ React.forwardRef(function IconButton22(inProps, ref2) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiIconButton"
+  });
+  const {
+    edge = false,
+    children,
+    className,
+    color: color2 = "default",
+    disabled = false,
+    disableFocusRipple = false,
+    size = "medium",
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
+    ...other
+  } = props;
+  const loadingId = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /* @__PURE__ */ jsx(CircularProgress, {
+    "aria-labelledby": loadingId,
+    color: "inherit",
+    size: 16
+  });
+  const ownerState = {
+    ...props,
+    edge,
+    color: color2,
+    disabled,
+    disableFocusRipple,
+    loading,
+    loadingIndicator,
+    size
+  };
+  const classes2 = useUtilityClasses$19(ownerState);
+  return /* @__PURE__ */ jsxs(IconButtonRoot, {
+    id: loading ? loadingId : idProp,
+    className: clsx$2(classes2.root, className),
+    centerRipple: true,
+    focusRipple: !disableFocusRipple,
+    disabled: disabled || loading,
+    ref: ref2,
+    ...other,
+    ownerState,
+    children: [typeof loading === "boolean" && // use plain HTML span to minimize the runtime overhead
+    /* @__PURE__ */ jsx("span", {
+      className: classes2.loadingWrapper,
+      style: {
+        display: "contents"
+      },
+      children: /* @__PURE__ */ jsx(IconButtonLoadingIndicator, {
+        className: classes2.loadingIndicator,
+        ownerState,
+        children: loading && loadingIndicator
+      })
+    }), children]
+  });
+});
+class ImportSettingsLogic extends ComponentLogic {
+  constructor() {
+    super(...arguments);
+    this.domain = y("ImportSettings");
+    this.$peers = this.domain.store(null, { name: "peers" });
+    this.initializePeers = this.domain.event("initializePeers");
+    this.getPeersFx = this.domain.effect("loadPeers");
+    this.copyFx = this.domain.effect("copySettings");
+  }
+  init() {
+    const { serverController, settingsController } = this.options.services;
+    v({
+      clock: this.initializePeers,
+      target: this.getPeersFx
+    });
+    v({
+      clock: this.getPeersFx.doneData,
+      target: this.$peers
+    });
+    this.getPeersFx.use(async () => {
+      return serverController.getPeers(this.options.serviceId);
+    });
+    this.copyFx.use(async (request) => {
+      await settingsController.copy(request);
+    });
+    this.initializePeers();
+  }
+}
+function WarningBanner(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "warning-banner", children: [
+    /* @__PURE__ */ jsx(WarningIcon, { className: "warning-banner__warning-icon", fontSize: "large" }),
+    /* @__PURE__ */ jsx(Typography$3, { variant: "caption", children: props.services.resources.Attention + " " + props.text })
+  ] });
+}
+const DATE_TIME_FORMAT_RUS = "DD.MM.YYYY HH:mm:ss";
+const DATE_TIME_FORMAT_ENG = "MM/D/YYYY, h:mm:ss A";
+function ImportSettingsDialog(props) {
+  const logic = useLogic(props, ImportSettingsLogic);
+  const { open, onClose, services, serviceId, serverName } = props;
+  const resources = services.resources;
+  const [selectedPeer, setSelectedPeer] = useState(null);
+  const isLoading = e(logic.copyFx.pending);
+  const handlePeerChange = (event, peerId) => {
+    event.stopPropagation();
+    const peer = peers.find((p2) => p2.id === peerId);
+    setSelectedPeer(peer);
+  };
+  const peers = e(logic.$peers);
+  const onSubmitClick = async () => {
+    if (selectedPeer.lastUpdated) {
+      const dateFormat = services.applicationSettings.culture.name === "ru-RU" ? DATE_TIME_FORMAT_RUS : DATE_TIME_FORMAT_ENG;
+      const dateStr = hooks(selectedPeer.lastUpdated).format(dateFormat);
+      await services.messageWindow.showConfirmation(
+        formatString$1(resources.ImportSettingsConfirmationWithDateMessage, dateStr),
+        {
+          modalIcon: /* @__PURE__ */ jsx(WarningIcon, { className: "import-settings-dialog__warning-icon", fontSize: "small" }),
+          customCaptionText: services.resources.Attention,
+          color: theme.palette.warning.main
+        }
+      );
+    } else {
+      await services.messageWindow.showConfirmation(
+        resources.ImportSettingsConfirmationMessage,
+        {
+          modalIcon: /* @__PURE__ */ jsx(WarningIcon, { className: "import-settings-dialog__warning-icon", fontSize: "small" }),
+          customCaptionText: services.resources.Attention,
+          color: theme.palette.warning.main
+        }
+      );
+    }
+    await logic.copyFx({ targetServiceId: serviceId, sourceServiceId: selectedPeer.id });
+    showNote({ timeout: 3e3, text: formatString$1(resources.ImportSettingsCompletedMessage, selectedPeer.serverName, serverName) });
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(ThemeProvider$1, { theme, children: /* @__PURE__ */ jsxs(
+    Dialog$2,
+    {
+      onClick: (e2) => {
+        e2.stopPropagation();
+      },
+      maxWidth: "md",
+      open,
+      onClose,
+      className: "import-settings-dialog",
+      fullWidth: true,
+      sx: { zIndex: 900, fontSize: "0.85rem" },
+      slotProps: {
+        paper: { style: { maxHeight: "60vh" } }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { variant: "h6", className: "import-settings-dialog__title", children: [
+          resources.ImportSettings,
+          /* @__PURE__ */ jsx(IconButton$3, { "aria-label": "close", onClick: onClose, children: /* @__PURE__ */ jsx(Close, {}) })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogContent$2, { className: "import-settings-dialog__content", children: [
+          /* @__PURE__ */ jsx(Typography$3, { variant: "subtitle2", color: "inherit", children: resources.SelectImportSettingsFrom }),
+          !!peers?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Box, { className: "import-settings-dialog__content-box", children: /* @__PURE__ */ jsx(RadioGroup, { className: "import-settings-dialog__peers-group", value: selectedPeer?.id, onChange: handlePeerChange, children: peers?.map((peer) => /* @__PURE__ */ jsx(
+              FormControlLabel$1,
+              {
+                value: peer.id,
+                control: /* @__PURE__ */ jsx(Radio, {}),
+                label: /* @__PURE__ */ jsxs("div", { className: "import-settings-dialog__peer-label", children: [
+                  /* @__PURE__ */ jsx(ComputerRounded, { fontSize: "small", color: "secondary" }),
+                  /* @__PURE__ */ jsx(Typography$3, { variant: "body2", color: "inherit", children: `${peer.serverName} (${peer.id})` })
+                ] })
+              },
+              peer.id
+            )) }) }),
+            /* @__PURE__ */ jsx(WarningBanner, { text: resources.ImportSettingsWarning, services: props.services })
+          ] }) : /* @__PURE__ */ jsx(Typography$3, { variant: "body1", color: "error", children: resources.ImportSettingsNoServersMessage })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogActions$2, { className: "import-settings-dialog__actions", children: [
+          /* @__PURE__ */ jsx(
+            Button$3,
+            {
+              type: "button",
+              disabled: isLoading,
+              onClick: onClose,
+              color: "primary",
+              "data-testid": "cancel-button",
+              children: resources.Dialog_Cancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button$3,
+            {
+              loading: isLoading,
+              disabled: !selectedPeer,
+              type: "submit",
+              onClick: onSubmitClick,
+              variant: "contained",
+              color: "primary",
+              "data-testid": "accept-button",
+              children: resources.DialogButton_Accept
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function ComponentMenu(props) {
+  const { services, serverName, component, onDeleteClick } = props;
+  const { resources } = services;
+  const [openedDialog, setOpenedDialog] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleMenuButtonClick = (event) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const closeMenu = () => {
+    setAnchorEl(null);
+  };
+  const handleCloseMenu = () => {
+    setOpenedDialog(false);
+    closeMenu();
+  };
+  const onDeleteMenuClick = async (event) => {
     event.stopPropagation();
+    closeMenu();
     await services.messageWindow.showConfirmation(
       formatString$1(services.resources.ConfirmDeleteService, component.serviceName),
       {
         customButtonOkText: services.resources.Delete,
-        modalIcon: /* @__PURE__ */ jsx(WarningIcon, { className: "component-list__warning-icon", fontSize: "medium" }),
+        modalIcon: /* @__PURE__ */ jsx(WarningIcon, { className: "component-menu__warning-icon", fontSize: "medium" }),
         customCaptionText: services.resources.Attention,
-        color: "#ff9800"
+        color: theme.palette.warning.main
       }
     );
     onDeleteClick(component);
   };
+  const onImportMenuClick = async (event) => {
+    event.stopPropagation();
+    closeMenu();
+    setOpenedDialog(true);
+  };
+  const handleCloseImportDialog = () => {
+    setOpenedDialog(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        "aria-label": "component menu",
+        "aria-controls": open ? "component-menu" : void 0,
+        "aria-expanded": open ? "true" : void 0,
+        "aria-haspopup": "true",
+        "data-testid": "component-menu-button",
+        onClick: (event) => handleMenuButtonClick(event),
+        children: /* @__PURE__ */ jsx(MoreVertIcon, { color: "secondary" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Menu$3,
+      {
+        anchorEl,
+        open,
+        id: "component-menu",
+        onClose: handleCloseMenu,
+        onClick: handleCloseMenu,
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: [
+          /* @__PURE__ */ jsxs(MenuItem$2, { onClick: (event) => onImportMenuClick(event), "data-testid": "component-import-settings-button", children: [
+            /* @__PURE__ */ jsx(ListItemIcon$1, { children: /* @__PURE__ */ jsx(ArrowDownwardIcon, { fontSize: "small" }) }),
+            /* @__PURE__ */ jsx(Typography$3, { variant: "body1", color: "secondary", children: resources.ImportSettings })
+          ] }),
+          /* @__PURE__ */ jsxs(MenuItem$2, { onClick: (event) => onDeleteMenuClick(event), children: [
+            /* @__PURE__ */ jsx(ListItemIcon$1, { children: /* @__PURE__ */ jsx(
+              DeleteIcon,
+              {
+                color: "error",
+                fontSize: "small",
+                "data-testid": "delete-icon",
+                className: "component-menu__item__delete-icon"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Typography$3, { variant: "body1", color: "error", children: resources.DeleteComponent })
+          ] })
+        ]
+      }
+    ),
+    openedDialog && /* @__PURE__ */ jsx(
+      ImportSettingsDialog,
+      {
+        services,
+        open: openedDialog,
+        onClose: handleCloseImportDialog,
+        serviceId: component.serviceId,
+        serverName
+      }
+    )
+  ] });
+}
+function ComponentList(props) {
+  const { components, serverName, services, onComponentClick, onDeleteClick } = props;
   return /* @__PURE__ */ jsxs("div", { className: "component-list", children: [
     /* @__PURE__ */ jsx("div", { className: "component-list__title", children: services.resources.Components }),
     components.map((component) => {
@@ -88974,11 +89663,12 @@ function ComponentList(props) {
         /* @__PURE__ */ jsx(ComponentIcon, { color: ICON_COLOR }),
         /* @__PURE__ */ jsx(Typography$3, { className: "component-list__item__content", children: component.serviceName }),
         /* @__PURE__ */ jsx(
-          DeleteIcon,
+          ComponentMenu,
           {
-            "data-testid": "delete-icon",
-            className: "component-list__item__delete-icon",
-            onClick: (event) => onDeleteIconClick(event, component)
+            services,
+            serverName,
+            component,
+            onDeleteClick
           }
         ),
         /* @__PURE__ */ jsx(ExpandMoreIcon, { color: ICON_COLOR })
@@ -89035,6 +89725,7 @@ function ServerDescriptionPanel(props) {
         {
           onComponentClick,
           onDeleteClick,
+          serverName: serverDescription.name,
           components: serverDescription.services,
           services
         }
@@ -89117,6 +89808,9 @@ class ServersController {
   getServerInfo(serverId) {
     return this.requestService.get(`api/servers/${serverId}`, null, { disableDialogsOnErrors: true });
   }
+  getPeers(serviceId) {
+    return this.requestService.get(`api/servers/${serviceId}/peers`);
+  }
   getServiceInfo(serviceId) {
     return this.requestService.get(`api/servers/service/${serviceId}`, null, { disableDialogsOnErrors: true });
   }
@@ -90720,7 +91414,7 @@ const inputOverridesResolver = (props, styles3) => {
   } = props;
   return [styles3.input, ownerState.size === "small" && styles3.inputSizeSmall, ownerState.multiline && styles3.inputMultiline, ownerState.type === "search" && styles3.inputTypeSearch, ownerState.startAdornment && styles3.inputAdornedStart, ownerState.endAdornment && styles3.inputAdornedEnd, ownerState.hiddenLabel && styles3.inputHiddenLabel];
 };
-const useUtilityClasses$1a = (ownerState) => {
+const useUtilityClasses$18 = (ownerState) => {
   const {
     classes: classes2,
     color: color2,
@@ -91106,7 +91800,7 @@ const InputBase = /* @__PURE__ */ React.forwardRef(function InputBase22(inProps,
     startAdornment,
     type: type2
   };
-  const classes2 = useUtilityClasses$1a(ownerState);
+  const classes2 = useUtilityClasses$18(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input3 = slots.input || components.Input || InputBaseInput;
@@ -91171,7 +91865,7 @@ const InputBase = /* @__PURE__ */ React.forwardRef(function InputBase22(inProps,
   });
 });
 const _excluded$K = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
-const useUtilityClasses$19 = (ownerState) => {
+const useUtilityClasses$17 = (ownerState) => {
   const {
     classes: classes2
   } = ownerState;
@@ -91208,7 +91902,7 @@ const GridEditInputCell = forwardRef((props, ref2) => {
   const apiRef = useGridApiContext();
   const inputRef = React.useRef(null);
   const [valueState, setValueState] = React.useState(value);
-  const classes2 = useUtilityClasses$19(rootProps);
+  const classes2 = useUtilityClasses$17(rootProps);
   const handleChange = React.useCallback(async (event) => {
     const newValue = event.target.value;
     if (onValueChange) {
@@ -93925,7 +94619,7 @@ function resolveAnchorEl$1(anchorEl) {
 function isHTMLElement(element) {
   return element.nodeType !== void 0;
 }
-const useUtilityClasses$18 = (ownerState) => {
+const useUtilityClasses$16 = (ownerState) => {
   const {
     classes: classes2
   } = ownerState;
@@ -94026,7 +94720,7 @@ const PopperTooltip = /* @__PURE__ */ React.forwardRef(function PopperTooltip2(p
   if (TransitionProps !== null) {
     childProps.TransitionProps = TransitionProps;
   }
-  const classes2 = useUtilityClasses$18(props);
+  const classes2 = useUtilityClasses$16(props);
   const Root = slots.root ?? "div";
   const rootProps = useSlotProps({
     elementType: Root,
@@ -94173,7 +94867,7 @@ function getListSubheaderUtilityClass(slot) {
   return generateUtilityClass("MuiListSubheader", slot);
 }
 generateUtilityClasses("MuiListSubheader", ["root", "colorPrimary", "colorInherit", "gutters", "inset", "sticky"]);
-const useUtilityClasses$17 = (ownerState) => {
+const useUtilityClasses$15 = (ownerState) => {
   const {
     classes: classes2,
     color: color2,
@@ -94268,7 +94962,7 @@ const ListSubheader = /* @__PURE__ */ React.forwardRef(function ListSubheader2(i
     disableSticky,
     inset
   };
-  const classes2 = useUtilityClasses$17(ownerState);
+  const classes2 = useUtilityClasses$15(ownerState);
   return /* @__PURE__ */ jsx(ListSubheaderRoot, {
     as: component,
     className: clsx$2(classes2.root, className),
@@ -94284,7 +94978,7 @@ function getPaperUtilityClass(slot) {
   return generateUtilityClass("MuiPaper", slot);
 }
 generateUtilityClasses("MuiPaper", ["root", "rounded", "outlined", "elevation", "elevation0", "elevation1", "elevation2", "elevation3", "elevation4", "elevation5", "elevation6", "elevation7", "elevation8", "elevation9", "elevation10", "elevation11", "elevation12", "elevation13", "elevation14", "elevation15", "elevation16", "elevation17", "elevation18", "elevation19", "elevation20", "elevation21", "elevation22", "elevation23", "elevation24"]);
-const useUtilityClasses$16 = (ownerState) => {
+const useUtilityClasses$14 = (ownerState) => {
   const {
     square,
     elevation,
@@ -94356,7 +95050,7 @@ const Paper = /* @__PURE__ */ React.forwardRef(function Paper22(inProps, ref2) {
     square,
     variant
   };
-  const classes2 = useUtilityClasses$16(ownerState);
+  const classes2 = useUtilityClasses$14(ownerState);
   return /* @__PURE__ */ jsx(PaperRoot, {
     as: component,
     ownerState,
@@ -94377,418 +95071,6 @@ const Paper = /* @__PURE__ */ React.forwardRef(function Paper22(inProps, ref2) {
     }
   });
 });
-function getCircularProgressUtilityClass(slot) {
-  return generateUtilityClass("MuiCircularProgress", slot);
-}
-generateUtilityClasses("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
-const SIZE = 44;
-const circularRotateKeyframe = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-const circularDashKeyframe = keyframes`
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
-  }
-
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
-  }
-
-  100% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: -126px;
-  }
-`;
-const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css$2`
-        animation: ${circularRotateKeyframe} 1.4s linear infinite;
-      ` : null;
-const dashAnimation = typeof circularDashKeyframe !== "string" ? css$2`
-        animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
-      ` : null;
-const useUtilityClasses$15 = (ownerState) => {
-  const {
-    classes: classes2,
-    variant,
-    color: color2,
-    disableShrink
-  } = ownerState;
-  const slots = {
-    root: ["root", variant, `color${capitalize(color2)}`],
-    svg: ["svg"],
-    circle: ["circle", `circle${capitalize(variant)}`, disableShrink && "circleDisableShrink"]
-  };
-  return composeClasses(slots, getCircularProgressUtilityClass, classes2);
-};
-const CircularProgressRoot = styled("span", {
-  name: "MuiCircularProgress",
-  slot: "Root",
-  overridesResolver: (props, styles3) => {
-    const {
-      ownerState
-    } = props;
-    return [styles3.root, styles3[ownerState.variant], styles3[`color${capitalize(ownerState.color)}`]];
-  }
-})(memoTheme(({
-  theme: theme2
-}) => ({
-  display: "inline-block",
-  variants: [{
-    props: {
-      variant: "determinate"
-    },
-    style: {
-      transition: theme2.transitions.create("transform")
-    }
-  }, {
-    props: {
-      variant: "indeterminate"
-    },
-    style: rotateAnimation || {
-      animation: `${circularRotateKeyframe} 1.4s linear infinite`
-    }
-  }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
-    props: {
-      color: color2
-    },
-    style: {
-      color: (theme2.vars || theme2).palette[color2].main
-    }
-  }))]
-})));
-const CircularProgressSVG = styled("svg", {
-  name: "MuiCircularProgress",
-  slot: "Svg"
-})({
-  display: "block"
-  // Keeps the progress centered
-});
-const CircularProgressCircle = styled("circle", {
-  name: "MuiCircularProgress",
-  slot: "Circle",
-  overridesResolver: (props, styles3) => {
-    const {
-      ownerState
-    } = props;
-    return [styles3.circle, styles3[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles3.circleDisableShrink];
-  }
-})(memoTheme(({
-  theme: theme2
-}) => ({
-  stroke: "currentColor",
-  variants: [{
-    props: {
-      variant: "determinate"
-    },
-    style: {
-      transition: theme2.transitions.create("stroke-dashoffset")
-    }
-  }, {
-    props: {
-      variant: "indeterminate"
-    },
-    style: {
-      // Some default value that looks fine waiting for the animation to kicks in.
-      strokeDasharray: "80px, 200px",
-      strokeDashoffset: 0
-      // Add the unit to fix a Edge 16 and below bug.
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.variant === "indeterminate" && !ownerState.disableShrink,
-    style: dashAnimation || {
-      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
-      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
-    }
-  }]
-})));
-const CircularProgress = /* @__PURE__ */ React.forwardRef(function CircularProgress22(inProps, ref2) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: "MuiCircularProgress"
-  });
-  const {
-    className,
-    color: color2 = "primary",
-    disableShrink = false,
-    size = 40,
-    style: style2,
-    thickness = 3.6,
-    value = 0,
-    variant = "indeterminate",
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
-    color: color2,
-    disableShrink,
-    size,
-    thickness,
-    value,
-    variant
-  };
-  const classes2 = useUtilityClasses$15(ownerState);
-  const circleStyle = {};
-  const rootStyle = {};
-  const rootProps = {};
-  if (variant === "determinate") {
-    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
-    circleStyle.strokeDasharray = circumference.toFixed(3);
-    rootProps["aria-valuenow"] = Math.round(value);
-    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
-    rootStyle.transform = "rotate(-90deg)";
-  }
-  return /* @__PURE__ */ jsx(CircularProgressRoot, {
-    className: clsx$2(classes2.root, className),
-    style: {
-      width: size,
-      height: size,
-      ...rootStyle,
-      ...style2
-    },
-    ownerState,
-    ref: ref2,
-    role: "progressbar",
-    ...rootProps,
-    ...other,
-    children: /* @__PURE__ */ jsx(CircularProgressSVG, {
-      className: classes2.svg,
-      ownerState,
-      viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
-      children: /* @__PURE__ */ jsx(CircularProgressCircle, {
-        className: classes2.circle,
-        style: circleStyle,
-        ownerState,
-        cx: SIZE,
-        cy: SIZE,
-        r: (SIZE - thickness) / 2,
-        fill: "none",
-        strokeWidth: thickness
-      })
-    })
-  });
-});
-function getIconButtonUtilityClass(slot) {
-  return generateUtilityClass("MuiIconButton", slot);
-}
-const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]);
-const useUtilityClasses$14 = (ownerState) => {
-  const {
-    classes: classes2,
-    disabled,
-    color: color2,
-    edge,
-    size,
-    loading
-  } = ownerState;
-  const slots = {
-    root: ["root", loading && "loading", disabled && "disabled", color2 !== "default" && `color${capitalize(color2)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
-    loadingIndicator: ["loadingIndicator"],
-    loadingWrapper: ["loadingWrapper"]
-  };
-  return composeClasses(slots, getIconButtonUtilityClass, classes2);
-};
-const IconButtonRoot = styled(ButtonBase, {
-  name: "MuiIconButton",
-  slot: "Root",
-  overridesResolver: (props, styles3) => {
-    const {
-      ownerState
-    } = props;
-    return [styles3.root, ownerState.loading && styles3.loading, ownerState.color !== "default" && styles3[`color${capitalize(ownerState.color)}`], ownerState.edge && styles3[`edge${capitalize(ownerState.edge)}`], styles3[`size${capitalize(ownerState.size)}`]];
-  }
-})(memoTheme(({
-  theme: theme2
-}) => ({
-  textAlign: "center",
-  flex: "0 0 auto",
-  fontSize: theme2.typography.pxToRem(24),
-  padding: 8,
-  borderRadius: "50%",
-  color: (theme2.vars || theme2).palette.action.active,
-  transition: theme2.transitions.create("background-color", {
-    duration: theme2.transitions.duration.shortest
-  }),
-  variants: [{
-    props: (props) => !props.disableRipple,
-    style: {
-      "--IconButton-hoverBg": theme2.vars ? `rgba(${theme2.vars.palette.action.activeChannel} / ${theme2.vars.palette.action.hoverOpacity})` : alpha(theme2.palette.action.active, theme2.palette.action.hoverOpacity),
-      "&:hover": {
-        backgroundColor: "var(--IconButton-hoverBg)",
-        // Reset on touch devices, it doesn't add specificity
-        "@media (hover: none)": {
-          backgroundColor: "transparent"
-        }
-      }
-    }
-  }, {
-    props: {
-      edge: "start"
-    },
-    style: {
-      marginLeft: -12
-    }
-  }, {
-    props: {
-      edge: "start",
-      size: "small"
-    },
-    style: {
-      marginLeft: -3
-    }
-  }, {
-    props: {
-      edge: "end"
-    },
-    style: {
-      marginRight: -12
-    }
-  }, {
-    props: {
-      edge: "end",
-      size: "small"
-    },
-    style: {
-      marginRight: -3
-    }
-  }]
-})), memoTheme(({
-  theme: theme2
-}) => ({
-  variants: [{
-    props: {
-      color: "inherit"
-    },
-    style: {
-      color: "inherit"
-    }
-  }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
-    props: {
-      color: color2
-    },
-    style: {
-      color: (theme2.vars || theme2).palette[color2].main
-    }
-  })), ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
-    props: {
-      color: color2
-    },
-    style: {
-      "--IconButton-hoverBg": theme2.vars ? `rgba(${(theme2.vars || theme2).palette[color2].mainChannel} / ${theme2.vars.palette.action.hoverOpacity})` : alpha((theme2.vars || theme2).palette[color2].main, theme2.palette.action.hoverOpacity)
-    }
-  })), {
-    props: {
-      size: "small"
-    },
-    style: {
-      padding: 5,
-      fontSize: theme2.typography.pxToRem(18)
-    }
-  }, {
-    props: {
-      size: "large"
-    },
-    style: {
-      padding: 12,
-      fontSize: theme2.typography.pxToRem(28)
-    }
-  }],
-  [`&.${iconButtonClasses.disabled}`]: {
-    backgroundColor: "transparent",
-    color: (theme2.vars || theme2).palette.action.disabled
-  },
-  [`&.${iconButtonClasses.loading}`]: {
-    color: "transparent"
-  }
-})));
-const IconButtonLoadingIndicator = styled("span", {
-  name: "MuiIconButton",
-  slot: "LoadingIndicator"
-})(({
-  theme: theme2
-}) => ({
-  display: "none",
-  position: "absolute",
-  visibility: "visible",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  color: (theme2.vars || theme2).palette.action.disabled,
-  variants: [{
-    props: {
-      loading: true
-    },
-    style: {
-      display: "flex"
-    }
-  }]
-}));
-const IconButton = /* @__PURE__ */ React.forwardRef(function IconButton22(inProps, ref2) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: "MuiIconButton"
-  });
-  const {
-    edge = false,
-    children,
-    className,
-    color: color2 = "default",
-    disabled = false,
-    disableFocusRipple = false,
-    size = "medium",
-    id: idProp,
-    loading = null,
-    loadingIndicator: loadingIndicatorProp,
-    ...other
-  } = props;
-  const loadingId = useId(idProp);
-  const loadingIndicator = loadingIndicatorProp ?? /* @__PURE__ */ jsx(CircularProgress, {
-    "aria-labelledby": loadingId,
-    color: "inherit",
-    size: 16
-  });
-  const ownerState = {
-    ...props,
-    edge,
-    color: color2,
-    disabled,
-    disableFocusRipple,
-    loading,
-    loadingIndicator,
-    size
-  };
-  const classes2 = useUtilityClasses$14(ownerState);
-  return /* @__PURE__ */ jsxs(IconButtonRoot, {
-    id: loading ? loadingId : idProp,
-    className: clsx$2(classes2.root, className),
-    centerRipple: true,
-    focusRipple: !disableFocusRipple,
-    disabled: disabled || loading,
-    ref: ref2,
-    ...other,
-    ownerState,
-    children: [typeof loading === "boolean" && // use plain HTML span to minimize the runtime overhead
-    /* @__PURE__ */ jsx("span", {
-      className: classes2.loadingWrapper,
-      style: {
-        display: "contents"
-      },
-      children: /* @__PURE__ */ jsx(IconButtonLoadingIndicator, {
-        className: classes2.loadingIndicator,
-        ownerState,
-        children: loading && loadingIndicator
-      })
-    }), children]
-  });
-});
 const CancelIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
 }));
@@ -125708,6 +125990,17 @@ class RootElementService {
     this.rootElementId = rootElementId;
   }
 }
+const $SettingsController = serviceName((s2) => s2.settingsController);
+class SettingsController {
+  constructor(requestService) {
+    this.requestService = requestService;
+    this.name = "Settings";
+    this.meta = null;
+  }
+  copy(request) {
+    return this.requestService.post("api/settings/copy", request);
+  }
+}
 class Application extends ServiceContainer {
   constructor(reactRootElementId) {
     super();
@@ -125782,6 +126075,7 @@ class Application extends ServiceContainer {
     this.registerService($ExtendedConfigurationController, new ExtendedConfigurationController(this.requestService));
     this.registerService($SessionsController, new SessionsController(this.requestService));
     this.registerService($RootElement, new RootElementService(this.reactRootElementId));
+    this.registerService($SettingsController, new SettingsController(this.requestService));
     await this.registerLocalization();
     this.registerService($MessageWindow, new MessageWindowService({ resources: this.resources }));
     const about = await this.requestService.get("api/about");
@@ -125959,11 +126253,6 @@ function DatabaseSelectionModal(props) {
     const selectedItems = databases.filter((database) => selectedIds.has(database.hash));
     onApply(selectedItems);
   };
-  const handleKeyDown2 = (event, databaseHash) => {
-    if (event.key === "Enter") {
-      handleToggle(databaseHash);
-    }
-  };
   const hasDatabases = databases.length > 0;
   const isApplyDisabled = !hasDatabases || !selectedIds.size;
   const columns = [resources.Alias, resources.ApplicationServer, resources.SqlServer, ""];
@@ -126018,7 +126307,6 @@ function DatabaseSelectionModal(props) {
                             checked: isSelected,
                             onChange: () => handleToggle(database.hash),
                             onClick: (event) => event.stopPropagation(),
-                            onKeyDown: (event) => handleKeyDown2(event, database.hash),
                             disabled: hasError
                           }
                         ) })