@postgres.ai/shared 4.2.0-pr-1203.1 → 4.2.0-pr-1201.1

package/components/Button/index.js

@@ -38,4 +38,3 @@ export const Button = forwardRef((props, ref) => {
     const classes = useStyles();
     return (_jsx(ButtonBase, { ...buttonProps, size: size, ref: ref, disabled: isDisabled, className: clsx(classes.root, className), variant: VARIANT_MAP[variant], color: "primary" }));
 });
-Button.displayName = 'Button';

package/components/Button2/index.js

@@ -8,4 +8,3 @@ export const Button = React.forwardRef((props, ref) => {
     const isDisabled = props.isDisabled || props.isLoading;
     return (_jsxs("button", { ref: ref, className: cn(styles.root, styles[size], styles[theme], props.className), type: type, onClick: props.onClick, disabled: isDisabled, children: [props.children, props.isLoading && _jsx(Spinner, { size: "sm", className: styles.spinner })] }));
 });
-Button.displayName = 'Button2';

package/components/Status/index.js

@@ -21,4 +21,3 @@ export const Status = React.forwardRef((props, ref) => {
     const { type = 'ok', children = type, icon = TYPE_TO_ICON[type], className, classNameIcon, disableColor, ...hiddenProps } = props;
     return (_jsxs("span", { ...hiddenProps, className: clsx(styles.root, !disableColor && styles[type], className), ref: ref, children: [icon && (_jsxs("span", { className: clsx(styles.iconContainer, classNameIcon), children: [icon, "\u2009"] })), children] }));
 });
-Status.displayName = 'Status';

package/components/TextField/index.js

@@ -39,5 +39,5 @@ export const TextField = (props) => {
             classes: {
                 root: classes.helperText
             }
-        }, onChange: props.onChange, select: props.select, type: props.type, error: props.error, placeholder: props.placeholder, onBlur: props.onBlur, onFocus: props.onFocus, name: props.name, helperText: props.helperText, style: props.style, children: props.children }));
+        }, onChange: props.onChange, children: props.children, select: props.select, type: props.type, error: props.error, placeholder: props.placeholder, onBlur: props.onBlur, onFocus: props.onFocus, name: props.name, helperText: props.helperText, style: props.style }));
 };

package/config/index.js

@@ -14,7 +14,7 @@ const loadDateFnsLocale = async () => {
         config.dateFnsLocale = locale.default;
         return;
     }
-    catch {
+    catch (e) {
         // Unavailable locale.
     }
 };

package/helpers/getEntropy.js

@@ -6,7 +6,7 @@ const upperChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 const digitsChars = '0123456789';
 export const MIN_ENTROPY = 60;
 function getBase(password) {
-    const uniqueChars = [];
+    let uniqueChars = [];
     for (const c of password) {
         if (!uniqueChars.includes(c)) {
             uniqueChars.push(c);
@@ -71,7 +71,7 @@ const seqKeyboard2 = 'zxcvbnm';
 const seqAlphabet = 'abcdefghijklmnopqrstuvwxyz';
 function removeMoreThanTwoFromSequence(s, seq) {
     const seqRunes = Array.from(seq);
-    const runes = Array.from(s);
+    let runes = Array.from(s);
     let matches = 0;
     for (let i = 0; i < runes.length; i++) {
         for (let j = 0; j < seqRunes.length; j++) {

package/helpers/request.js

@@ -26,7 +26,7 @@ export const request = async (path, options) => {
             },
         });
     }
-    catch {
+    catch (e) {
         return new Response(null, {
             status: 500,
             statusText: `Unknown error`,

package/icons/ArrowDropDown/index.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ArrowDropDownIcon = (props) => {
-    return (_jsx("svg", { className: props.className, viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", onClick: props.onClick, children: _jsx("path", { d: "M7.8515 0.898419C7.75261 0.799446 7.63538 0.75 7.49994 0.75H0.500038C0.364534 0.75 0.247392 0.799446 0.148419 0.898419C0.0494455 0.997501 0 1.11464 0 1.25006C0 1.38546 0.0494455 1.5026 0.148419 1.6016L3.64838 5.10156C3.74746 5.20054 3.86461 5.25009 4 5.25009C4.13539 5.25009 4.25265 5.20054 4.35154 5.10156L7.8515 1.60157C7.95036 1.5026 8 1.38546 8 1.25004C8 1.11464 7.95036 0.997501 7.8515 0.898419Z", fill: "currentColor" }) }));
+    return (_jsx("svg", { className: props.className, viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", onClick: props.onClick, children: _jsx("path", { 
+            // eslint-disable-next-line max-len
+            d: "M7.8515 0.898419C7.75261 0.799446 7.63538 0.75 7.49994 0.75H0.500038C0.364534 0.75 0.247392 0.799446 0.148419 0.898419C0.0494455 0.997501 0 1.11464 0 1.25006C0 1.38546 0.0494455 1.5026 0.148419 1.6016L3.64838 5.10156C3.74746 5.20054 3.86461 5.25009 4 5.25009C4.13539 5.25009 4.25265 5.20054 4.35154 5.10156L7.8515 1.60157C7.95036 1.5026 8 1.38546 8 1.25004C8 1.11464 7.95036 0.997501 7.8515 0.898419Z", fill: "currentColor" }) }));
 };

package/icons/Renewable/index.js

@@ -10,4 +10,3 @@ export const RenewableIcon = React.forwardRef((props, ref) => {
     const { className, ...hiddenProps } = props;
     return (_jsxs("svg", { ...hiddenProps, ref: ref, className: className, viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.14337 0L8.19809 2.9755L4.59387 3.26718L5.16139 2.07055C4.22847 2.10806 3.3161 2.48386 2.66614 3.18795L2.20594 2.76312C3.05679 1.84141 4.26977 1.40592 5.45883 1.44339L6.14337 0Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.7343 9.13905L6.12728 9.39371L7.71025 6.14261L8.45158 7.24009C8.89401 6.4179 9.03479 5.44126 8.75942 4.52346L9.35931 4.34347C9.71979 5.54495 9.47743 6.81074 8.8401 7.81527L9.7343 9.13905Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 7.57495L1.61898 4.34163L3.60962 7.36037L2.28757 7.43896C2.76953 8.23862 3.53811 8.85742 4.46813 9.08819L4.3173 9.69607C3.09983 9.39397 2.13422 8.54041 1.59468 7.48015L0 7.57495Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.26612 2.51078C5.07868 2.17637 3.73747 2.48899 2.89616 3.40036L1.97575 2.55072C3.17071 1.25624 5.01514 0.857134 6.60567 1.30506L6.26612 2.51078Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.33938 8.11969C8.34588 7.28131 8.83847 5.87691 8.45939 4.61345L9.65917 4.25348C10.1969 6.04581 9.49312 7.95595 8.14107 9.08215L7.33938 8.11969Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.07072 5.82736C2.20416 7.20026 3.19328 8.44922 4.54348 8.78425L4.24181 10C2.32911 9.5254 1.00387 7.79934 0.823976 5.94853L2.07072 5.82736Z", fill: "currentColor" })] }));
 });
-RenewableIcon.displayName = 'RenewableIcon';

package/icons/Shield/index.js

@@ -10,4 +10,3 @@ export const ShieldIcon = React.forwardRef((props, ref) => {
     const { className, ...hiddenProps } = props;
     return (_jsx("svg", { ...hiddenProps, ref: ref, className: className, viewBox: "0 0 8 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M4.00195 0L0.251953 1.66667V4.16667C0.251953 6.47917 1.85195 8.64167 4.00195 9.16667C6.15195 8.64167 7.75195 6.47917 7.75195 4.16667V1.66667L4.00195 0ZM3.16862 6.66667L1.50195 5L2.08945 4.4125L3.16862 5.4875L5.91445 2.74167L6.50195 3.33333L3.16862 6.66667Z", fill: "currentColor" }) }));
 });
-ShieldIcon.displayName = 'ShieldIcon';

package/icons/Warning/index.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const WarningIcon = (props) => {
-    return (_jsx("svg", { className: props.className, viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.79222 7.49885L6.2597 1.00518C5.69214 0.04969 4.30861 0.0484205 3.74029 1.00518L0.207947 7.49885C-0.372248 8.4752 0.330193 9.71157 1.46736 9.71157H8.53251C9.66873 9.71157 10.3724 8.47619 9.79222 7.49885ZM5 8.53969C4.67699 8.53969 4.41406 8.27676 4.41406 7.95375C4.41406 7.63074 4.67699 7.36782 5 7.36782C5.323 7.36782 5.58593 7.63074 5.58593 7.95375C5.58593 8.27676 5.323 8.53969 5 8.53969ZM5.58593 6.19594C5.58593 6.51895 5.323 6.78188 5 6.78188C4.67699 6.78188 4.41406 6.51895 4.41406 6.19594V3.26625C4.41406 2.94324 4.67699 2.68032 5 2.68032C5.323 2.68032 5.58593 2.94324 5.58593 3.26625V6.19594Z", fill: "currentColor" }) }));
+    return (_jsx("svg", { className: props.className, viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { 
+            // eslint-disable-next-line max-len
+            d: "M9.79222 7.49885L6.2597 1.00518C5.69214 0.04969 4.30861 0.0484205 3.74029 1.00518L0.207947 7.49885C-0.372248 8.4752 0.330193 9.71157 1.46736 9.71157H8.53251C9.66873 9.71157 10.3724 8.47619 9.79222 7.49885ZM5 8.53969C4.67699 8.53969 4.41406 8.27676 4.41406 7.95375C4.41406 7.63074 4.67699 7.36782 5 7.36782C5.323 7.36782 5.58593 7.63074 5.58593 7.95375C5.58593 8.27676 5.323 8.53969 5 8.53969ZM5.58593 6.19594C5.58593 6.51895 5.323 6.78188 5 6.78188C4.67699 6.78188 4.41406 6.51895 4.41406 6.19594V3.26625C4.41406 2.94324 4.67699 2.68032 5 2.68032C5.323 2.68032 5.58593 2.94324 5.58593 3.26625V6.19594Z", fill: "currentColor" }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postgres.ai/shared",
-  "version": "4.2.0-pr-1203.1",
+  "version": "4.2.0-pr-1201.1",
   "main": "index.js",
   "types": "index.d.ts",
   "peerDependencies": {

package/pages/Branches/index.js

@@ -48,8 +48,7 @@ export const Branches = observer(({ instanceId }) => {
     const loadBranches = () => {
         getBranches(instanceId)
             .then((response) => {
-            if (response)
-                setBranches(response);
+            response && setBranches(response);
         })
             .finally(() => setIsLoading(false));
     };
@@ -57,8 +56,7 @@ export const Branches = observer(({ instanceId }) => {
         loadBranches();
         const intervalId = setInterval(() => {
             getBranches(instanceId, true).then((response) => {
-                if (response)
-                    setBranches(response);
+                response && setBranches(response);
             });
         }, listRefreshIntervalMs);
         return () => clearInterval(intervalId);

package/pages/Clone/Status/index.js

@@ -39,4 +39,3 @@ export const Status = React.memo((props) => {
     const isError = statusType === 'error';
     return (_jsxs("div", { className: clsx(classes.root, className), children: [_jsx(StatusBase, { type: statusType, className: classes.status, children: statusText }), !isError && _jsx("p", { className: classes.message, children: message }), isError && (_jsx(FormattedText, { value: message, className: classes.errorMessage }))] }));
 });
-Status.displayName = 'CloneStatus';

package/pages/Clone/index.js

@@ -274,21 +274,21 @@ export const Clone = observer((props) => {
                                                 : '-'] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Clone creation time:" }), clone.metadata.cloningTime
                                                 ? `${round(clone.metadata.cloningTime, 2)} s`
                                                 : '-'] })] }), _jsx("br", {}), hasConnectionInfo && (_jsxs(_Fragment, { children: [_jsx("p", { children: _jsx("strong", { children: "Connection info" }) }), sshPortForwardingUrl && (_jsxs("div", { className: classes.fieldBlock, children: ["In a separate console, set up SSH port forwarding (and keep it running):", _jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", label: "SSH port forwarding", value: sshPortForwardingUrl, className: classes.textField, margin: "normal", fullWidth: true, 
-                                                        // @ts-expect-error TextField forwards readOnly to the input but does not declare it
+                                                        // @ts-ignore
                                                         readOnly: true, InputLabelProps: {
                                                             shrink: true,
                                                             style: styles.inputFieldLabel,
                                                         }, FormHelperTextProps: {
                                                             style: styles.inputFieldHelper,
                                                         } }), _jsx(IconButton, { className: classes.copyButton, "aria-label": "Copy", onClick: () => copyToClipboard(sshPortForwardingUrl), children: icons.copyIcon })] })] })), psqlConnectionStr && (_jsxs("div", { className: classes.fieldBlock, children: [_jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", id: "psqlConnStr", label: "psql connection string", value: psqlConnectionStr, className: classes.textField, margin: "normal", fullWidth: true, 
-                                                        // @ts-expect-error TextField forwards readOnly to the input but does not declare it
+                                                        // @ts-ignore
                                                         readOnly: true, InputLabelProps: {
                                                             shrink: true,
                                                             style: styles.inputFieldLabel,
                                                         }, FormHelperTextProps: {
                                                             style: styles.inputFieldHelper,
                                                         } }), _jsx(IconButton, { className: classes.copyButton, "aria-label": "Copy", onClick: () => copyToClipboard(psqlConnectionStr), children: icons.copyIcon })] }), "\u00A0", _jsx(Tooltip, { content: _jsx(_Fragment, { children: "Used to connect to PostgreSQL using psql. Change DBNAME to the name of the database you want to connect to. Use the PGPASSWORD environment variable to set the database password or type it when prompted." }), children: _jsx("span", { className: classes.textFieldInfo, children: icons.infoIcon }) })] })), jdbcConnectionStr && (_jsxs("div", { className: classes.fieldBlock, children: [_jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", label: "JDBC connection string", value: jdbcConnectionStr, className: classes.textField, margin: "normal", fullWidth: true, 
-                                                        // @ts-expect-error TextField forwards readOnly to the input but does not declare it
+                                                        // @ts-ignore
                                                         readOnly: true, InputLabelProps: {
                                                             shrink: true,
                                                             style: styles.inputFieldLabel,

package/pages/CreateClone/index.js

@@ -96,7 +96,7 @@ export const CreateClone = observer((props) => {
                 const allSnapshots = (_f = (_e = (_d = stores.main) === null || _d === void 0 ? void 0 : _d.snapshots) === null || _e === void 0 ? void 0 : _e.data) !== null && _f !== void 0 ? _f : [];
                 const sortedSnapshots = allSnapshots.slice().sort(compareSnapshotsDesc);
                 setSnapshots(sortedSnapshots);
-                const selectedSnapshot = allSnapshots.find(s => s.id === initialSnapshotId) || allSnapshots[0];
+                let selectedSnapshot = allSnapshots.find(s => s.id === initialSnapshotId) || allSnapshots[0];
                 formik.setFieldValue('snapshotId', selectedSnapshot === null || selectedSnapshot === void 0 ? void 0 : selectedSnapshot.id);
             }
         }

package/pages/CreateClone/utils/index.js

@@ -21,7 +21,7 @@ export const getCliCreateCloneCommand = (values, showPassword) => {
 
   ${protectedFlag} \
 
-  --id ${cloneIdDisplay}`;
+  --id ${cloneIdDisplay} \ `;
 };
 export const getCliCloneStatus = (cloneId) => {
     const cloneIdDisplay = cloneId ? shellEscape(cloneId) : `<CLONE_ID>`;

package/pages/Instance/Configuration/Header/index.js

@@ -13,5 +13,5 @@ import { ExternalIcon } from '@postgres.ai/shared/icons/External';
 import styles from '../styles.module.scss';
 export const ConfigSectionTitle = ({ tag }) => (_jsx(SectionTitle, { level: 2, tag: "h2", text: _jsxs("div", { className: styles.sectionTitle, children: [_jsx("p", { children: "Section" }), _jsxs("p", { children: ["\"", tag, "\""] })] }) }));
 const DOCS_URL = 'https://postgres.ai/docs/reference-guides/database-lab-engine-configuration-reference';
-export const Header = (props) => (_jsxs("div", { className: styles.root, children: [_jsxs(Box, { mb: 3, children: [_jsx(Typography, { paragraph: true, children: "Only select parameters can be changed here." }), _jsxs(Typography, { paragraph: true, children: ["However, you can still see", ' ', _jsx(Link, { href: "#", underline: "always", onClick: props.setOpen, className: styles.externalLink, children: "the full config" }), ". For details, read", ' ', _jsxs("a", { href: DOCS_URL, target: "_blank", rel: "noreferrer", className: styles.externalLink, children: ["the docs", _jsx(ExternalIcon, { className: styles.externalIcon })] }), "."] }), _jsxs(Typography, { paragraph: true, children: [_jsx("strong", { children: "Data retrieval mode" }), ": ", props.retrievalMode] })] }), _jsx(ConfigSectionTitle, { tag: "global" })] }));
-export const ModalTitle = () => (_jsxs("div", { children: [_jsx(Typography, { className: styles.modalTitle, children: "Full configuration file (view only)" }), _jsxs(Typography, { variant: "h3", children: ["Sensitive values are masked. For details, read", ' ', _jsxs("a", { href: DOCS_URL, target: "_blank", rel: "noreferrer", className: styles.externalLink, children: ["the docs", _jsx(ExternalIcon, { className: classNames(styles.externalIcon, styles.largeIcon) })] }), "."] })] }));
+export const Header = (props) => (_jsxs("div", { className: styles.root, children: [_jsxs(Box, { mb: 3, children: [_jsx(Typography, { paragraph: true, children: "Only select parameters can be changed here." }), _jsxs(Typography, { paragraph: true, children: ["However, you can still see", ' ', _jsx(Link, { href: "#", underline: "always", onClick: props.setOpen, className: styles.externalLink, children: "the full config" }), ". For details, read", ' ', _jsxs("a", { href: DOCS_URL, target: "_blank", className: styles.externalLink, children: ["the docs", _jsx(ExternalIcon, { className: styles.externalIcon })] }), "."] }), _jsxs(Typography, { paragraph: true, children: [_jsx("strong", { children: "Data retrieval mode" }), ": ", props.retrievalMode] })] }), _jsx(ConfigSectionTitle, { tag: "global" })] }));
+export const ModalTitle = () => (_jsxs("div", { children: [_jsx(Typography, { className: styles.modalTitle, children: "Full configuration file (view only)" }), _jsxs(Typography, { variant: "h3", children: ["Sensitive values are masked. For details, read", ' ', _jsxs("a", { href: DOCS_URL, target: "_blank", className: styles.externalLink, children: ["the docs", _jsx(ExternalIcon, { className: classNames(styles.externalIcon, styles.largeIcon) })] }), "."] })] }));

package/pages/Instance/Configuration/PhysicalMode/EnvsEditor/index.d.ts

@@ -7,7 +7,5 @@ declare type Props = {
     disabled?: boolean;
     keyErrors?: (string | undefined)[];
 };
-export declare const MASKED_ENV_VALUE = "****";
-export declare const isMaskedEnvValue: (value: string) => boolean;
 export declare const EnvsEditor: ({ envs, onChange, suggestions, disabled, keyErrors, }: Props) => JSX.Element;
 export {};

package/pages/Instance/Configuration/PhysicalMode/EnvsEditor/index.js

@@ -1,12 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, IconButton, TextField, Typography } from '@material-ui/core';
 import Box from '@mui/material/Box';
-// MASKED_ENV_VALUE is what the engine returns instead of a stored env value:
-// envs carry WAL-G and pgBackRest credentials, so GET /admin/config lists
-// the keys only. Posting the mask back for a key keeps the stored value.
-export const MASKED_ENV_VALUE = '****';
-export const isMaskedEnvValue = (value) => value === MASKED_ENV_VALUE;
-const MASKED_HINT = 'Stored on the server; kept unless you change it';
 // EnvsEditor renders a rows-of-key/value editor with add/remove and a
 // click-to-add suggestion list. Engine consumes envs as a free-form map
 // (physical.go:76, CopyOptions.Envs map[string]string); the UI is a thin
@@ -26,6 +20,5 @@ export const EnvsEditor = ({ envs, onChange, suggestions = [], disabled, keyErro
         onChange([...envs, { key, value: '' }]);
     };
     const usedKeys = new Set(envs.map((e) => e.key));
-    const hasMasked = envs.some((e) => isMaskedEnvValue(e.value));
-    return (_jsxs(Box, { mt: 1, "data-testid": "envs-editor", children: [_jsx(Typography, { variant: "subtitle2", children: "Environment variables" }), hasMasked && (_jsx(Box, { mt: 0.5, children: _jsxs(Typography, { variant: "caption", color: "textSecondary", "data-testid": "envs-masked-hint", children: ["Values shown as ", MASKED_ENV_VALUE, " are stored on the server and are kept unless you change them. Renaming such a variable requires entering its value again."] }) })), envs.length === 0 ? (_jsx(Box, { mt: 1, mb: 1, children: _jsx(Typography, { variant: "caption", color: "textSecondary", children: "No environment variables set. Use suggestions below or click \"Add\"." }) })) : (envs.map((env, i) => (_jsxs(Box, { display: "flex", alignItems: "center", mt: 1, "data-testid": `envs-row-${i}`, children: [_jsx(TextField, { size: "small", label: "Name", value: env.key, disabled: disabled, error: Boolean(keyErrors[i]), helperText: keyErrors[i], onChange: (e) => updateRow(i, { key: e.target.value }), inputProps: { 'data-testid': `envs-key-${i}` } }), _jsx(Box, { mx: 1, children: _jsx(TextField, { size: "small", label: "Value", value: env.value, disabled: disabled, helperText: isMaskedEnvValue(env.value) ? MASKED_HINT : undefined, onChange: (e) => updateRow(i, { value: e.target.value }), inputProps: { 'data-testid': `envs-value-${i}` } }) }), _jsx(IconButton, { size: "small", "aria-label": "remove env", disabled: disabled, onClick: () => removeRow(i), "data-testid": `envs-remove-${i}`, children: "\u00D7" })] }, i)))), _jsx(Box, { mt: 1, children: _jsx(Button, { size: "small", variant: "outlined", disabled: disabled, onClick: () => addRow(), "data-testid": "envs-add", children: "+ Add" }) }), suggestions.length > 0 && (_jsxs(Box, { mt: 1, children: [_jsx(Typography, { variant: "caption", color: "textSecondary", children: "Suggestions:" }), _jsx(Box, { mt: 0.5, children: suggestions.map((s) => (_jsx(Button, { size: "small", variant: "text", disabled: disabled || usedKeys.has(s), onClick: () => addRow(s), "data-testid": `envs-suggest-${s}`, children: s }, s))) })] }))] }));
+    return (_jsxs(Box, { mt: 1, "data-testid": "envs-editor", children: [_jsx(Typography, { variant: "subtitle2", children: "Environment variables" }), envs.length === 0 ? (_jsx(Box, { mt: 1, mb: 1, children: _jsx(Typography, { variant: "caption", color: "textSecondary", children: "No environment variables set. Use suggestions below or click \"Add\"." }) })) : (envs.map((env, i) => (_jsxs(Box, { display: "flex", alignItems: "center", mt: 1, "data-testid": `envs-row-${i}`, children: [_jsx(TextField, { size: "small", label: "Name", value: env.key, disabled: disabled, error: Boolean(keyErrors[i]), helperText: keyErrors[i], onChange: (e) => updateRow(i, { key: e.target.value }), inputProps: { 'data-testid': `envs-key-${i}` } }), _jsx(Box, { mx: 1, children: _jsx(TextField, { size: "small", label: "Value", value: env.value, disabled: disabled, onChange: (e) => updateRow(i, { value: e.target.value }), inputProps: { 'data-testid': `envs-value-${i}` } }) }), _jsx(IconButton, { size: "small", "aria-label": "remove env", disabled: disabled, onClick: () => removeRow(i), "data-testid": `envs-remove-${i}`, children: "\u00D7" })] }, i)))), _jsx(Box, { mt: 1, children: _jsx(Button, { size: "small", variant: "outlined", disabled: disabled, onClick: () => addRow(), "data-testid": "envs-add", children: "+ Add" }) }), suggestions.length > 0 && (_jsxs(Box, { mt: 1, children: [_jsx(Typography, { variant: "caption", color: "textSecondary", children: "Suggestions:" }), _jsx(Box, { mt: 0.5, children: suggestions.map((s) => (_jsx(Button, { size: "small", variant: "text", disabled: disabled || usedKeys.has(s), onClick: () => addRow(s), "data-testid": `envs-suggest-${s}`, children: s }, s))) })] }))] }));
 };

package/pages/Instance/Configuration/index.js

@@ -42,11 +42,7 @@ export const Configuration = observer(({ instanceId, switchActiveTab, reload, di
     const classes = useStyles();
     const stores = useStores();
     const { config, isConfigurationLoading, updateConfig, getSeImages, fullConfig, testDbSource, configError, getFullConfig, getFullConfigError, getEngine, } = stores.main;
-    // The form mutates its working copy, so the store's config is cloned rather than read
-    // directly. The store replaces the whole object on every fetch, so keying the clone on
-    // its identity keeps the copy — and everything that depends on it — stable between
-    // fetches instead of changing on every render.
-    const configData = useMemo(() => config && JSON.parse(JSON.stringify(config)), [config]);
+    const configData = config && JSON.parse(JSON.stringify(config));
     const isConfigurationDisabled = disableConfigModification;
     const [dleEdition, setDledition] = useState('');
     const isCeEdition = dleEdition === 'community';
@@ -58,14 +54,11 @@ export const Configuration = observer(({ instanceId, switchActiveTab, reload, di
     // Prevents the Simple/Expert default from flipping mid-session when an
     // Apply triggers a refetch and the recomputed default would differ.
     const [initialMode, setInitialMode] = useState(null);
-    const defaultMode = configData
-        ? getInitialConfigMode(configData.host, configData.retrievalMode)
-        : null;
     useEffect(() => {
-        if (initialMode !== null || defaultMode === null)
-            return;
-        setInitialMode(defaultMode);
-    }, [defaultMode, initialMode]);
+        if (initialMode === null && configData) {
+            setInitialMode(getInitialConfigMode(configData.host, configData.retrievalMode));
+        }
+    }, [configData, initialMode]);
     const configMode = (_a = userPickedMode !== null && userPickedMode !== void 0 ? userPickedMode : initialMode) !== null && _a !== void 0 ? _a : 'simple';
     const setConfigMode = setUserPickedMode;
     const portInitFromConfig = useRef(false);
@@ -258,7 +251,7 @@ export const Configuration = observer(({ instanceId, switchActiveTab, reload, di
             const currentValues = uniqueChipValue(String(formik.values[id]));
             const splitValues = currentValues.split(' ');
             const curDividers = String(formik.values[id]).match(/[,(\s)(\n)(\r)(\t)(\r\n)]/gm);
-            for (const i in splitValues) {
+            for (let i in splitValues) {
                 if (curDividers && splitValues[i] !== uniqueValue) {
                     newValues =
                         newValues +
@@ -514,14 +507,14 @@ export const Configuration = observer(({ instanceId, switchActiveTab, reload, di
         isCeEdition,
     ]);
     return (_jsxs("div", { className: styles.root, children: [_jsx(Snackbar, { onClick: () => {
-                    if (!dockerState.error)
-                        return;
-                    setDockerState({
-                        ...dockerState,
-                        error: '',
-                    });
+                    Boolean(dockerState.error)
+                        ? setDockerState({
+                            ...dockerState,
+                            error: '',
+                        })
+                        : undefined;
                 }, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, open: (isConfigurationDisabled || Boolean(dockerState.error)) &&
-                    !isModalOpen, message: dockerState.error
+                    !isModalOpen, message: Boolean(dockerState.error)
                     ? dockerState.error
                     : PREVENT_MODIFYING_MESSAGE, className: styles.snackbar }), !config && isConfigurationLoading ? (_jsx("div", { className: styles.spinnerContainer, children: _jsx(Spinner, { size: "lg", className: styles.spinner }) })) : (_jsxs(Box, { children: [_jsx(Header, { retrievalMode: formik.values.retrievalMode, setOpen: handleModalClick }), _jsxs(Tabs, { value: configMode, onChange: (_, value) => setConfigMode(value), indicatorColor: "primary", textColor: "primary", "aria-label": "Configuration mode", children: [_jsx(Tab, { value: "simple", label: "Simple" }), _jsx(Tab, { value: "expert", label: "Expert" })] }), configMode === 'simple' ? (_jsx(SimpleMode, { instanceId: instanceId, disabled: isConfigurationDisabled, onApplied: switchTab, onEdit: (proposed, password) => {
                             const projection = buildProjectionFromProposed(proposed, password);
@@ -593,7 +586,7 @@ export const Configuration = observer(({ instanceId, switchActiveTab, reload, di
                                                                         value: image,
                                                                         children: image,
                                                                     };
-                                                                }) })] })), _jsxs(Typography, { paragraph: true, children: ["Cannot find your image? Reach out to support:", ' ', _jsxs("a", { href: 'https://postgres.ai/contact', target: "_blank", className: styles.externalLink, rel: "noreferrer", children: ["https://postgres.ai/contact", _jsx(ExternalIcon, { className: styles.externalIcon })] })] })] })] }), _jsxs(Box, { mb: 3, children: [_jsx(ConfigSectionTitle, { tag: "databaseConfigs" }), _jsx("span", { className: classes.grayText, style: { marginTop: '0.5rem', display: 'block' }, children: "Default PostgreSQL configuration used for all PostgreSQL instances running in containers managed by DBLab." }), _jsx(InputWithTooltip, { type: "textarea", label: "shared_buffers parameter", value: formik.values.sharedBuffers, tooltipText: tooltipText.sharedBuffers, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('sharedBuffers', e.target.value) }), _jsx(InputWithTooltip, { type: "textarea", label: "shared_preload_libraries", value: formik.values.sharedPreloadLibraries, tooltipText: tooltipText.sharedPreloadLibraries, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('sharedPreloadLibraries', e.target.value) }), _jsx(InputWithTooltip, { type: "textarea", label: "Query tuning parameters", value: typeof formik.values.tuningParams === 'object'
+                                                                }) })] })), _jsxs(Typography, { paragraph: true, children: ["Cannot find your image? Reach out to support:", ' ', _jsxs("a", { href: 'https://postgres.ai/contact', target: "_blank", className: styles.externalLink, children: ["https://postgres.ai/contact", _jsx(ExternalIcon, { className: styles.externalIcon })] })] })] })] }), _jsxs(Box, { mb: 3, children: [_jsx(ConfigSectionTitle, { tag: "databaseConfigs" }), _jsx("span", { className: classes.grayText, style: { marginTop: '0.5rem', display: 'block' }, children: "Default PostgreSQL configuration used for all PostgreSQL instances running in containers managed by DBLab." }), _jsx(InputWithTooltip, { type: "textarea", label: "shared_buffers parameter", value: formik.values.sharedBuffers, tooltipText: tooltipText.sharedBuffers, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('sharedBuffers', e.target.value) }), _jsx(InputWithTooltip, { type: "textarea", label: "shared_preload_libraries", value: formik.values.sharedPreloadLibraries, tooltipText: tooltipText.sharedPreloadLibraries, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('sharedPreloadLibraries', e.target.value) }), _jsx(InputWithTooltip, { type: "textarea", label: "Query tuning parameters", value: typeof formik.values.tuningParams === 'object'
                                                     ? Object.entries(formik.values.tuningParams)
                                                         .map(([key, value]) => `${key}=${value}`)
                                                         .join('\n')
@@ -609,7 +602,7 @@ export const Configuration = observer(({ instanceId, switchActiveTab, reload, di
                                                     : '', message: testConnectionState.fetchTuning.error ||
                                                     testConnectionState.fetchTuning.message.message })) : null] }), formik.values.retrievalMode === 'logical' && (_jsxs(Box, { children: [_jsxs(Box, { children: [_jsx(Typography, { className: styles.subsection, children: "Subsection \"retrieval.spec.logicalRestore\"" }), _jsx("span", { className: classes.grayText, children: "Restoring options." })] }), _jsx(InputWithTooltip, { label: "pg_restore jobs", value: formik.values.restoreParallelJobs, tooltipText: tooltipText.restoreParallelJobs, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('restoreParallelJobs', e.target.value) }), _jsx(InputWithChip, { value: formik.values.pgRestoreCustomOptions, label: "pg_restore customOptions", id: "pgRestoreCustomOptions", tooltipText: tooltipText.pgRestoreCustomOptions, handleDeleteChip: handleDeleteChip, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('pgRestoreCustomOptions', e.target.value) }), _jsx(InputWithTooltip, { type: "textarea", label: "Restore PostgreSQL configs", value: formik.values.restoreConfigs, tooltipText: tooltipText.restoreConfigs, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('restoreConfigs', e.target.value) }), _jsx(FormControlLabel, { style: { maxWidth: 'max-content' }, control: _jsx(Checkbox, { name: "restoreIgnoreErrors", checked: formik.values.restoreIgnoreErrors, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('restoreIgnoreErrors', e.target.checked), classes: {
                                                         root: classes.checkboxRoot,
-                                                    } }), label: 'Ignore errors during logical data restore' })] })), _jsx(Box, { mt: 1, children: _jsx(Typography, { className: styles.subsection, children: "Subsection \"retrieval.refresh\"" }) }), _jsxs("span", { className: classes.grayText, children: ["Define full data refresh on schedule. The process requires at least one additional filesystem mount point. The schedule is to be specified using", ' ', _jsxs("a", { href: "https://en.wikipedia.org/wiki/Cron#Overview", target: "_blank", className: styles.externalLink, rel: "noreferrer", children: ["crontab format", _jsx(ExternalIcon, { className: styles.externalIcon })] }), "."] }), _jsx(InputWithTooltip, { label: "timetable", value: formik.values.timetable, tooltipText: tooltipText.timetable, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('timetable', e.target.value) })] }), _jsxs(Box, { mt: 2, mb: 2, sx: {
+                                                    } }), label: 'Ignore errors during logical data restore' })] })), _jsx(Box, { mt: 1, children: _jsx(Typography, { className: styles.subsection, children: "Subsection \"retrieval.refresh\"" }) }), _jsxs("span", { className: classes.grayText, children: ["Define full data refresh on schedule. The process requires at least one additional filesystem mount point. The schedule is to be specified using", ' ', _jsxs("a", { href: "https://en.wikipedia.org/wiki/Cron#Overview", target: "_blank", className: styles.externalLink, children: ["crontab format", _jsx(ExternalIcon, { className: styles.externalIcon })] }), "."] }), _jsx(InputWithTooltip, { label: "timetable", value: formik.values.timetable, tooltipText: tooltipText.timetable, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('timetable', e.target.value) })] }), _jsxs(Box, { mt: 2, mb: 2, sx: {
                                     display: 'flex',
                                     alignItems: 'center',
                                 }, children: [_jsxs(Button, { variant: "contained", color: "secondary", onClick: () => {

package/pages/Instance/Configuration/tooltipText.js

@@ -3,9 +3,9 @@ import styles from './styles.module.scss';
 export const tooltipText = {
     dockerTag: () => (_jsx("div", { children: "Docker image version \u2014 the latest ones are listed first. If you are unsure, pick the first one." })),
     dockerImage: () => (_jsxs("div", { children: ["Major PostgreSQL version (e.g., \"9.6\", \"15\"). For logical provisioning mode, the version used by DBLab does not need to match the version on the source, although matching versions is recommended. ", _jsx("br", {}), "If you need a version that is not listed here, contact support."] })),
-    dockerImageType: () => (_jsxs("div", { children: ["Docker image used to run all database containers \u2014 clones, snapshot preparation containers, and sync containers. Although such images are based on traditional Docker images for PostgreSQL, DBLab expects slightly different behavior: for example, PostgreSQL is not the first process used to start the container, so PostgreSQL restarts do not trigger a container state change. For details, see", ' ', _jsx("a", { target: '_blank', href: 'https://postgres.ai/docs/database-lab/supported-databases', className: styles.externalLink, rel: "noreferrer", children: "the docs" }), "."] })),
+    dockerImageType: () => (_jsxs("div", { children: ["Docker image used to run all database containers \u2014 clones, snapshot preparation containers, and sync containers. Although such images are based on traditional Docker images for PostgreSQL, DBLab expects slightly different behavior: for example, PostgreSQL is not the first process used to start the container, so PostgreSQL restarts do not trigger a container state change. For details, see", ' ', _jsx("a", { target: '_blank', href: 'https://postgres.ai/docs/database-lab/supported-databases', className: styles.externalLink, children: "the docs" }), "."] })),
     sharedBuffers: () => (_jsxs("div", { children: ["Defines the default buffer pool size for each PostgreSQL instance managed by DBLab. Note that this amount of RAM is immediately allocated at PostgreSQL startup time. For example, if the machine running DBLab has 32 GiB of RAM and the value used here is '1GB', then the theoretical limit of clones is 32. Practically, this limit is even lower because some memory is consumed by other processes. If you need more clones, reduce the value of", ' ', _jsx("span", { className: styles.firaCodeFont, children: "configs.shared_buffers" }), "."] })),
-    sharedPreloadLibraries: () => (_jsxs("div", { children: ["Specifies one or more shared libraries (comma-separated list) to be preloaded at PostgreSQL server start (", _jsx("a", { target: '_blank', href: 'https://postgresqlco.nf/doc/en/param/shared_preload_libraries/', className: styles.externalLink, rel: "noreferrer", children: "details" }), "). If some libraries or extensions are missing, PostgreSQL fails to start, so make sure that ", _jsx("span", { className: styles.firaCodeFont, children: "dockerImage" }), ' ', "used above contains all required extensions."] })),
+    sharedPreloadLibraries: () => (_jsxs("div", { children: ["Specifies one or more shared libraries (comma-separated list) to be preloaded at PostgreSQL server start (", _jsx("a", { target: '_blank', href: 'https://postgresqlco.nf/doc/en/param/shared_preload_libraries/', className: styles.externalLink, children: "details" }), "). If some libraries or extensions are missing, PostgreSQL fails to start, so make sure that ", _jsx("span", { className: styles.firaCodeFont, children: "dockerImage" }), ' ', "used above contains all required extensions."] })),
     host: () => (_jsx("div", { children: "Hostname or IP of the database that will be used as the source for data retrieval (full data refresh)." })),
     port: () => (_jsx("div", { children: "Port of the database that will be used as the source for data retrieval (full data refresh)." })),
     username: () => (_jsx("div", { children: "Username used to connect to the database that will be used as the source for data retrieval (full data refresh)." })),
@@ -17,6 +17,6 @@ export const tooltipText = {
     restoreParallelJobs: () => (_jsx("div", { children: "Number of parallel workers used to restore databases from dump to PostgreSQL managed by DBLab. For initial data retrieval (the first data refresh), it is recommended to match the number of available vCPUs on the machine running DBLab. This yields faster restore times but can increase CPU and disk I/O usage on that machine (up to temporary resource saturation). For subsequent refreshes, if DBLab is in continuous use, it is recommended to reduce this value by 50% to reserve capacity for normal DBLab operations (such as working with clones)." })),
     pgRestoreCustomOptions: () => (_jsx("div", { children: "pg_restore options to be used to restore from a database dump, for example: '--exclude-schema=repack --exclude-schema=\"camelStyleSchemaName\"'. Note that due to security reasons, the current implementation supports only letters, numbers, hyphen, underscore, equal sign, and double quotes." })),
     restoreConfigs: () => (_jsxs("div", { children: ["PostgreSQL configuration parameters applied during logical restore (one", ' ', _jsx("span", { className: styles.firaCodeFont, children: "parameter=value" }), " per line). These settings are written to", ' ', _jsx("span", { className: styles.firaCodeFont, children: "postgresql.conf" }), " before restore starts and do not affect clones. Useful for tuning restore performance, for example:", _jsx("br", {}), _jsx("span", { className: styles.firaCodeFont, children: "maintenance_work_mem=8GB" }), _jsx("br", {}), _jsx("span", { className: styles.firaCodeFont, children: "max_parallel_maintenance_workers=7" }), _jsx("br", {}), _jsx("span", { className: styles.firaCodeFont, children: "shared_preload_libraries=" }), _jsx("br", {}), _jsx("span", { className: styles.firaCodeFont, children: "fsync=off" })] })),
-    timetable: () => (_jsxs("div", { children: ["Schedule for full data refreshes, in", ' ', _jsx("a", { target: '_blank', href: 'https://en.wikipedia.org/wiki/Cron#Overview', className: styles.externalLink, rel: "noreferrer", children: "crontab format" }), "."] })),
-    tuningParams: () => (_jsxs("div", { children: ["Query tuning parameters. These are essential to ensure that cloned PostgreSQL instances generate the same plans as the source (specifically, they are crucial for query performance troubleshooting and optimization, including working with EXPLAIN plans). For details, see the", ' ', _jsx("a", { target: '_blank', href: 'https://postgres.ai/docs/how-to-guides/administration/postgresql-configuration#postgresql-configuration-in-clones', className: styles.externalLink, rel: "noreferrer", children: "docs" }), "."] })),
+    timetable: () => (_jsxs("div", { children: ["Schedule for full data refreshes, in", ' ', _jsx("a", { target: '_blank', href: 'https://en.wikipedia.org/wiki/Cron#Overview', className: styles.externalLink, children: "crontab format" }), "."] })),
+    tuningParams: () => (_jsxs("div", { children: ["Query tuning parameters. These are essential to ensure that cloned PostgreSQL instances generate the same plans as the source (specifically, they are crucial for query performance troubleshooting and optimization, including working with EXPLAIN plans). For details, see the", ' ', _jsx("a", { target: '_blank', href: 'https://postgres.ai/docs/how-to-guides/administration/postgresql-configuration#postgresql-configuration-in-clones', className: styles.externalLink, children: "docs" }), "."] })),
 };

package/pages/Instance/Configuration/useForm.js

@@ -154,7 +154,7 @@ export const useForm = (onSubmit) => {
     const markPortDirty = () => setPortDirty(true);
     const omitPortOnSubmit = originalPortWasUnset && !portDirty;
     const formatDatabaseArray = (database) => {
-        const databases = [];
+        let databases = [];
         const splitDatabaseArray = database.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/);
         for (let i = 0; i < splitDatabaseArray.length; i++) {
             if (splitDatabaseArray[i] !== '') {

package/pages/Instance/Configuration/utils/index.d.ts

@@ -9,7 +9,7 @@ interface DockerImage {
 }
 export declare const uniqueChipValue: (values: string) => string;
 export declare const postUniqueDatabases: (values: string) => {
-    [k: string]: string | object;
+    [k: string]: string | Object;
 } | null;
 export declare const genericDockerImages: DockerImage[];
 export declare const isSeDockerImage: (dockerImage: string | undefined) => boolean;

package/pages/Instance/Configuration/utils/index.js

@@ -3,8 +3,8 @@ import { dockerImagesConfig, genericImagePrefix } from '../dockerCatalog';
 const seContainerRegistry = 'se-images';
 export const uniqueChipValue = (values) => {
     const splitChipArray = values.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/);
-    const databaseArray = [];
-    for (const i in splitChipArray) {
+    let databaseArray = [];
+    for (let i in splitChipArray) {
         if (splitChipArray[i] !== '' &&
             databaseArray.indexOf(splitChipArray[i]) === -1) {
             databaseArray.push(splitChipArray[i]);
@@ -24,18 +24,18 @@ export const postUniqueDatabases = (values) => {
 const createDockerImages = (dockerImagesConfig) => {
     const dockerImages = [];
     for (const pg_major_version in dockerImagesConfig) {
-        const hasVersion = Object.prototype.hasOwnProperty.call(dockerImagesConfig, pg_major_version);
-        if (!hasVersion)
-            continue;
-        dockerImagesConfig[pg_major_version].forEach((tag) => {
-            const image = {
-                package_group: 'postgresai',
-                pg_major_version,
-                tag: `${pg_major_version}-${tag}`,
-                location: `${genericImagePrefix}:${pg_major_version}-${tag}`,
-            };
-            dockerImages.push(image);
-        });
+        if (dockerImagesConfig.hasOwnProperty(pg_major_version)) {
+            const customTags = dockerImagesConfig[pg_major_version];
+            customTags.forEach((tag) => {
+                const image = {
+                    package_group: 'postgresai',
+                    pg_major_version,
+                    tag: `${pg_major_version}-${tag}`,
+                    location: `${genericImagePrefix}:${pg_major_version}-${tag}`,
+                };
+                dockerImages.push(image);
+            });
+        }
     }
     return dockerImages;
 };
@@ -74,7 +74,7 @@ export const getImageMajorVersion = (pgImage) => {
             ? pgServerVersion.split('.')[0]
             : pgServerVersion;
     }
-    catch {
+    catch (error) {
         // Return undefined for malformed image strings
         return undefined;
     }
@@ -114,7 +114,7 @@ export const createFallbackDockerImage = (dockerPath, dockerTag) => {
 };
 // Creates enhanced list of Docker images, including image from configuration
 export const createEnhancedDockerImages = (configDockerPath, configDockerTag) => {
-    const enhancedImages = [...genericDockerImages];
+    let enhancedImages = [...genericDockerImages];
     // If there's an image in config, check if we need to add it
     if (configDockerPath && configDockerTag) {
         const existingImage = genericDockerImages.find((image) => image.location === configDockerPath || image.tag === configDockerTag);

package/pages/Instance/Tabs/PlatformTabs.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 declare type Props = {
     value: number;
-    handleChange: (event: React.ChangeEvent<object>, newValue: number) => void;
+    handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
     hasLogs: boolean;
     isPlatform?: boolean;
     hideInstanceTabs?: boolean;
 };
-export declare const PlatformTabs: ({ value, handleChange, hideInstanceTabs, }: Props) => JSX.Element;
+export declare const PlatformTabs: ({ value, handleChange, hasLogs, hideInstanceTabs, }: Props) => JSX.Element;
 export {};

package/pages/Instance/Tabs/PlatformTabs.js

@@ -4,7 +4,7 @@ import { Tab as TabComponent, Tabs as TabsComponent } from '@material-ui/core';
 import { TABS_INDEX } from '.';
 import { useTabsStyles } from './styles';
 import { PostgresSQLIcon } from '@postgres.ai/shared/icons/PostgresSQL';
-export const PlatformTabs = ({ value, handleChange, hideInstanceTabs, }) => {
+export const PlatformTabs = ({ value, handleChange, hasLogs, hideInstanceTabs, }) => {
     const classes = useTabsStyles();
     const { org, instanceId } = useParams();
     const tabs = [

package/pages/Instance/Tabs/index.d.ts

@@ -9,7 +9,7 @@ export declare const TABS_INDEX: {
 };
 export interface TabsProps {
     value: number;
-    handleChange: (event: React.ChangeEvent<object>, newValue: number) => void;
+    handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
     hasLogs: boolean;
     isPlatform?: boolean;
     hideInstanceTabs?: boolean;

package/pages/Instance/index.js

@@ -50,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
     },
 }), { index: 1 });
 export const Instance = observer((props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const classes = useStyles();
     const { instanceId, api, isPlatform } = props;
     const [activeTab, setActiveTab] = React.useState((props === null || props === void 0 ? void 0 : props.renderCurrentTab) || TABS_INDEX.OVERVIEW);
@@ -84,7 +84,7 @@ export const Instance = observer((props) => {
         }
     }, [instance, hasBeenRedirected]);
     return (_jsx(HostProvider, { value: props, children: _jsxs(StoresProvider, { value: stores, children: [props.elements.breadcrumbs, _jsx(SectionTitle, { text: props.title, level: 1, tag: "h1", className: classes.title, rightContent: _jsx(Button, { onClick: () => load(props.instanceId, isPlatform), isDisabled: !instance && !instanceError, className: classes.reloadButton, children: "Reload info" }), children: isInstanceIntegrated && (_jsx(InstanceTabs, { instanceId: props.instanceId, tab: activeTab, onTabChange: (tabID) => setActiveTab(tabID), isPlatform: isPlatform, hasLogs: api.initWS !== undefined, hideInstanceTabs: props.hideBranchingFeatures })) }), instanceError && (_jsx(ErrorStub, { ...instanceError, className: classes.errorStub })), isInstanceIntegrated ? (_jsxs(_Fragment, { children: [_jsxs(TabPanel, { value: activeTab, index: TABS_INDEX.OVERVIEW, children: [!instanceError && (_jsx("div", { className: classes.content, children: instance && ((_b = (_a = instance.state) === null || _a === void 0 ? void 0 : _a.retrieving) === null || _b === void 0 ? void 0 : _b.status) ? (_jsxs(_Fragment, { children: [_jsx(Clones, {}), _jsx(Info, { hideBranchingFeatures: props.hideBranchingFeatures })] })) : (_jsx(StubSpinner, {})) })), _jsx(ClonesModal, {}), _jsx(SnapshotsModal, {})] }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.CLONES, children: activeTab === TABS_INDEX.CLONES && (_jsx("div", { className: classes.content, children: !instanceError &&
-                                    (instance ? _jsx(Clones, { onlyRenderList: true }) : _jsx(StubSpinner, {})) })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.LOGS, children: activeTab === TABS_INDEX.LOGS && (_jsx(Logs, { api: api, instanceId: props.instanceId })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.CONFIGURATION, children: activeTab === TABS_INDEX.CONFIGURATION && (_jsx(Configuration, { instanceId: instanceId, switchActiveTab: switchTab, reload: () => load(props.instanceId), disableConfigModification: (_c = instance === null || instance === void 0 ? void 0 : instance.state) === null || _c === void 0 ? void 0 : _c.engine.disableConfigModification })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.SNAPSHOTS, children: activeTab === TABS_INDEX.SNAPSHOTS && (_jsx(Snapshots, { instanceId: instanceId })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.BRANCHES, children: activeTab === TABS_INDEX.BRANCHES && (_jsx(Branches, { instanceId: instanceId })) })] })) : !isLoadingInstance && !isLoadingInstanceRetrieval && !instanceError ? (_jsx(TabPanel, { value: activeTab, index: activeTab, children: _jsx(InactiveInstance, { instance: instance, org: (_e = (_d = props.elements.breadcrumbs) === null || _d === void 0 ? void 0 : _d.props.org) !== null && _e !== void 0 ? _e : '' }) })) : (!instanceError && (_jsx(TabPanel, { value: activeTab, index: activeTab, children: _jsx("div", { className: classes.content, children: _jsx(StubSpinner, {}) }) })))] }) }));
+                                    (instance ? _jsx(Clones, { onlyRenderList: true }) : _jsx(StubSpinner, {})) })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.LOGS, children: activeTab === TABS_INDEX.LOGS && (_jsx(Logs, { api: api, instanceId: props.instanceId })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.CONFIGURATION, children: activeTab === TABS_INDEX.CONFIGURATION && (_jsx(Configuration, { instanceId: instanceId, switchActiveTab: switchTab, reload: () => load(props.instanceId), disableConfigModification: (_c = instance === null || instance === void 0 ? void 0 : instance.state) === null || _c === void 0 ? void 0 : _c.engine.disableConfigModification })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.SNAPSHOTS, children: activeTab === TABS_INDEX.SNAPSHOTS && (_jsx(Snapshots, { instanceId: instanceId })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.BRANCHES, children: activeTab === TABS_INDEX.BRANCHES && (_jsx(Branches, { instanceId: instanceId })) })] })) : !isLoadingInstance && !isLoadingInstanceRetrieval && !instanceError ? (_jsx(TabPanel, { value: activeTab, index: activeTab, children: _jsx(InactiveInstance, { instance: instance, org: (_d = props.elements.breadcrumbs) === null || _d === void 0 ? void 0 : _d.props.org }) })) : (!instanceError && (_jsx(TabPanel, { value: activeTab, index: activeTab, children: _jsx("div", { className: classes.content, children: _jsx(StubSpinner, {}) }) })))] }) }));
 });
 function TabPanel(props) {
     const { children, value, index, ...other } = props;

package/pages/Instance/stores/Main.js

@@ -164,7 +164,7 @@ export class MainStore {
             return response;
         };
         this.getFullConfig = async (instanceId) => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f;
             if (!this.api.getFullConfig)
                 return;
             const { response, error } = await this.api.getFullConfig(instanceId);
@@ -176,10 +176,10 @@ export class MainStore {
                 this.platformUrl = rawPlatformUrl === null || rawPlatformUrl === void 0 ? void 0 : rawPlatformUrl.replace(/['"]+/g, '').trim().split(/\s+/)[0];
                 this.uiVersion = (_f = (_e = (_d = splitYML[0]) === null || _d === void 0 ? void 0 : _d.split('dockerImage: "postgresai/ce-ui:')[2]) === null || _e === void 0 ? void 0 : _e.split('\n')[0]) === null || _f === void 0 ? void 0 : _f.replace(/['"]+/g, '');
             }
-            if (error) {
-                const failure = (await error.json());
-                this.getFullConfigError = (_g = failure.message) !== null && _g !== void 0 ? _g : null;
-            }
+            if (error)
+                this.getFullConfigError = await error
+                    .json()
+                    .then((err) => err.message);
             return response;
         };
         this.getSeImages = async (values) => {

package/pages/Logs/hooks/useWsScroll.js

@@ -5,41 +5,33 @@ export const useWsScroll = (isLoading, simpleInstall) => {
     const [isAtBottom, setIsAtBottom] = useState(true);
     useEffect(() => {
         var _a;
-        if (!isLoading) {
-            wsSnackbar(isAtBottom, isNewData);
-        }
+        !isLoading && wsSnackbar(isAtBottom, isNewData);
         const contentElement = document.getElementById('content-container');
         const targetNode = simpleInstall
             ? (_a = document.getElementById('logs-container')) === null || _a === void 0 ? void 0 : _a.parentElement
             : document.getElementById('logs-container');
         const clientAtBottom = (element) => element.scrollHeight - element.scrollTop - 50 < element.clientHeight;
         const handleScroll = (e) => {
-            if (!clientAtBottom(e.target)) {
+            if (clientAtBottom(e.target)) {
+                setIsAtBottom(true);
+                setIsNewData(false);
+            }
+            else {
                 setIsAtBottom(false);
-                return;
             }
-            setIsAtBottom(true);
-            setIsNewData(false);
         };
-        // Log lines arrive as <p> nodes; a <div> is page chrome. The filter keeps the tagName
-        // guard the removed DOMNodeInserted listener used.
-        const handleInsert = (mutations) => {
-            const hasNewLine = mutations.some((mutation) => Array.from(mutation.addedNodes).some((node) => node.nodeName !== 'DIV'));
-            if (!hasNewLine)
-                return;
-            if (isAtBottom) {
-                targetNode === null || targetNode === void 0 ? void 0 : targetNode.scrollIntoView(false);
+        const handleInsert = (e) => {
+            var _a;
+            if (((_a = e.srcElement) === null || _a === void 0 ? void 0 : _a.tagName) !== 'DIV') {
+                isAtBottom && (targetNode === null || targetNode === void 0 ? void 0 : targetNode.scrollIntoView(false));
+                setIsNewData(true);
             }
-            setIsNewData(true);
         };
-        const observer = new MutationObserver(handleInsert);
         contentElement === null || contentElement === void 0 ? void 0 : contentElement.addEventListener('scroll', handleScroll, false);
-        if (contentElement) {
-            observer.observe(contentElement, { childList: true, subtree: true });
-        }
+        contentElement === null || contentElement === void 0 ? void 0 : contentElement.addEventListener('DOMNodeInserted', handleInsert, false);
         return () => {
             contentElement === null || contentElement === void 0 ? void 0 : contentElement.removeEventListener('scroll', handleScroll, false);
-            observer.disconnect();
+            contentElement === null || contentElement === void 0 ? void 0 : contentElement.removeEventListener('DOMNodeInserted', handleInsert, false);
         };
-    }, [isAtBottom, isNewData, isLoading, simpleInstall]);
+    }, [isAtBottom, isNewData, isLoading]);
 };