@postgres.ai/shared 4.0.4 → 4.1.0

package/components/Tooltip/index.tsx

@@ -0,0 +1,52 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import {
+  Tooltip as TooltipBase,
+  TooltipProps,
+  makeStyles,
+} from '@material-ui/core'
+
+type Props = {
+  children: JSX.Element
+  content: string | JSX.Element
+  disableTouchListener?: boolean
+  placement?: TooltipProps['placement']
+  interactive?: TooltipProps['interactive']
+  enterTouchDelay?: TooltipProps['enterTouchDelay']
+}
+
+const useStyles = makeStyles(
+  {
+    tooltip: {
+      fontSize: '10px',
+      padding: '4px 8px',
+    },
+  },
+  { index: 1 },
+)
+
+export const Tooltip = (props: Props) => {
+  const {
+    content,
+    placement = 'top',
+    enterTouchDelay = 0,
+    ...otherProps
+  } = props
+
+  const classes = useStyles()
+
+  return (
+    <TooltipBase
+      {...otherProps}
+      enterTouchDelay={enterTouchDelay}
+      placement={placement}
+      title={content}
+      classes={{ tooltip: classes.tooltip }}
+    />
+  )
+}

package/config/index.ts

@@ -0,0 +1,32 @@
+import { Locale } from 'date-fns'
+import { enUS } from 'date-fns/locale'
+import { getUserLocale } from 'get-user-locale'
+
+type Config = {
+  dateFnsLocale: Locale
+  appName: string
+}
+
+export const config: Config = {
+  dateFnsLocale: enUS,
+  appName: 'Postgres.AI',
+}
+
+const loadDateFnsLocale = async () => {
+  const userLocale = getUserLocale()
+
+  // We are already using this locale.
+  if (userLocale === config.dateFnsLocale.code) return
+
+  try {
+    const locale = await import(`date-fns/locale/${userLocale}`)
+    config.dateFnsLocale = locale.default
+    return
+  } catch (e) {
+    // Unavailable locale.
+  }
+}
+
+export const initConfig = async () => {
+  await loadDateFnsLocale()
+}

package/config/links.ts

@@ -0,0 +1,6 @@
+export const linksConfig = {
+  cloudSignIn: 'https://postgres.ai/pricing',
+  docs: 'https://postgres.ai/docs',
+  support: 'https://postgres.ai/contact',
+  github: 'https://github.com/postgres-ai/database-lab-engine',
+}

package/dist/components/Button2/styles.module.scss

@@ -0,0 +1,82 @@
+@import '@postgres.ai/shared/styles/vars';
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  border-radius: $border-radius--small;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+
+  @include touch-transition(background-color color box-shadow opacity);
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  // Sizes.
+  &.sm {
+    height: 20px;
+    font-size: 12px;
+  }
+
+  &.md {
+    min-height: 26px;
+    font-size: 14px;
+  }
+
+  &.lg {
+    height: 32px;
+  }
+
+  // Themes.
+  &.primary {
+    background: $color-blue-main;
+    color: $color-white;
+
+    &:hover {
+      background: darken($color-blue-main, 5);
+    }
+
+    &:active {
+      background: darken($color-blue-main, 10);
+    }
+  }
+
+  &.secondary {
+    background: $color-white;
+    border: 1px solid $color-blue-main;
+    color: $color-blue-main;
+
+    &:hover {
+      background: #f4f6f7;
+    }
+
+    &:active {
+      background: #bdd5dc;
+    }
+  }
+
+  &.accent {
+    background: $color-orange;
+    color: $color-white;
+
+    &:hover {
+      background: darken($color-orange, 5);
+    }
+
+    &:active {
+      background: darken($color-orange, 10);
+    }
+  }
+}
+
+.spinner {
+  margin-left: 8px;
+  color: inherit;
+}

package/dist/components/FormattedText/styles.module.scss

@@ -0,0 +1,34 @@
+@import '@postgres.ai/shared/styles/vars';
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  position: relative;
+  background: $color-white--100;
+  border: 1px solid $color-gray-100;
+  border-radius: $border-radius--small;
+  overflow: hidden;
+
+  &:hover .copyButtonContainer {
+    opacity: 1;
+  }
+}
+
+.content {
+  padding: 10px 80px 10px 10px;
+  line-height: 1.5;
+  overflow: auto;
+  max-height: inherit;
+  margin: 0;
+}
+
+.copyButtonContainer {
+  opacity: 0;
+
+  @include touch-transition(opacity);
+}
+
+.copyButton {
+  position: absolute;
+  top: 8.5px;
+  right: 8.5px;
+}

package/dist/components/Link2/styles.module.scss

@@ -0,0 +1,12 @@
+@import '@postgres.ai/shared/styles/vars';
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  color: $color-blue-main;
+
+  @include touch-transition(color);
+
+  &:hover {
+    color: $color-blue-dark;
+  }
+}

package/dist/components/MenuButton/styles.module.scss

@@ -0,0 +1,42 @@
+@import '@postgres.ai/shared/styles/vars';
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  background-color: $color-gray-darkest;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 0;
+  height: 48px;
+  width: 100%;
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: 700;
+  text-decoration: none;
+
+  @include touch-transition(background-color color);
+
+  &:hover {
+    background-color: $color-gray-darkest--hover;
+    color: inherit;
+  }
+
+  &.collapsed {
+    justify-content: center;
+  }
+
+  + .root {
+    margin-top: 8px;
+  }
+}
+
+.icon {
+  font-size: 0;
+
+  &:not(.collapsed) {
+    margin-right: 8px;
+  }
+}

package/dist/components/PageSpinner/styles.module.scss

@@ -0,0 +1,13 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 100%;
+}

package/{components → dist/components}/Select/index.d.ts

@@ -13,6 +13,7 @@ declare type Props = {
     fullWidth?: TextFieldProps['fullWidth'];
     disabled?: TextFieldProps['disabled'];
     error?: boolean;
+    style?: TextFieldProps['style'];
 };
 export declare const Select: (props: Props) => JSX.Element;
 export {};

package/dist/components/Spinner/styles.module.scss

@@ -0,0 +1,33 @@
+@import '@postgres.ai/shared/styles/vars';
+
+@keyframes rotation {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.root {
+  color: $color-orange;
+
+  animation: rotation ease-in-out .5s infinite;
+
+  // Sizes.
+  &.sm {
+    height: 16px;
+    width: 16px;
+  }
+
+  &.md {
+    height: 24px;
+    width: 24px;
+  }
+
+  &.lg {
+    height: 32px;
+    width: 32px;
+  }
+}

package/dist/components/Status/styles.module.scss

@@ -0,0 +1,45 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+@import '@postgres.ai/shared/styles/vars';
+
+.root {
+  &.ok {
+    color: $color-status-ok;
+  }
+
+  &.warning {
+    color: $color-status-warning;
+  }
+
+  &.error {
+    color: $color-status-error;
+  }
+
+  &.waiting {
+    color: $color-status-waiting;
+  }
+
+  &.unknown {
+    color: $color-status-unknown;
+  }
+}
+
+.iconContainer {
+  display: inline-block;
+  margin-right: 0.5em;
+  width: 0.8em;
+  position: relative;
+}
+
+.icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

package/dist/components/StubSpinnerFlex/styles.module.scss

@@ -0,0 +1,20 @@
+@import '@postgres.ai/shared/styles/vars';
+
+.root {
+  background: $color-white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  &.absolute {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &.flex {
+    flex: 1 1 100%;
+  }
+}

package/{components → dist/components}/TextField/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { InputProps, TextFieldProps as TextFieldPropsBase } from '@material-ui/core';
 export declare type TextFieldProps = {
     label?: string;
@@ -23,5 +23,6 @@ export declare type TextFieldProps = {
     onFocus?: TextFieldPropsBase['onFocus'];
     name?: TextFieldPropsBase['name'];
     helperText?: TextFieldPropsBase['helperText'];
+    style?: React.CSSProperties;
 };
 export declare const TextField: (props: TextFieldProps) => JSX.Element;

package/{components → dist/components}/TextField/index.js

@@ -39,5 +39,5 @@ export const TextField = (props) => {
             classes: {
                 root: classes.helperText
             }
-        }, 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 }));
+        }, 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/dist/meta.json

@@ -0,0 +1 @@
+{"buildDate":1634829055606}

package/dist/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@postgres.ai/shared",
+  "version": "4.1.0",
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/copy-assets.js",
+    "pack": "node scripts/pack.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@material-ui/styles": "^4.11.4",
+    "@monaco-editor/react": "^4.4.5",
+    "@mui/material": "^5.10.12",
+    "@types/node": "^12.20.33",
+    "@types/react": "^17.0.30",
+    "@types/react-dom": "^17.0.10",
+    "@types/react-router": "^5.1.17",
+    "@types/react-router-dom": "^5.3.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "byte-size": "^9.0.1",
+    "classnames": "^2.3.1",
+    "clsx": "^2.1.1",
+    "copy-to-clipboard": "^3.3.1",
+    "date-fns": "^2.22.1",
+    "formik": "^2.4.9",
+    "get-user-locale": "^1.4.0",
+    "mobx": "^6.3.5",
+    "mobx-react-lite": "^3.2.1",
+    "moment": "^2.24.0",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-countdown-hook": "^1.1.0",
+    "react-dom": "^17.0.2",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-syntax-highlighter": "^15.6.6",
+    "typescript": "^4.8.3",
+    "use-timer": "^2.0.1",
+    "whatwg-fetch": "^3.6.2",
+    "yup": "^0.32.11"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "glob": "^11.1.0"
+  }
+}

package/{pages → dist/pages}/Clone/index.js

@@ -9,7 +9,8 @@ import { useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useHistory } from 'react-router-dom';
 import copyToClipboard from 'copy-to-clipboard';
-import { makeStyles, Button, FormControlLabel, Checkbox, TextField, IconButton, } from '@material-ui/core';
+import { makeStyles, Button, TextField, IconButton, } from '@material-ui/core';
+import { Select } from '@postgres.ai/shared/components/Select';
 import { getSshPortForwardingCommand, getPsqlConnectionStr, getJdbcConnectionStr, } from '@postgres.ai/shared/utils/connection';
 import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
 import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
@@ -163,7 +164,7 @@ const useStyles = makeStyles((theme) => ({
     },
 }), { index: 1 });
 export const Clone = observer((props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const classes = useStyles();
     const history = useHistory();
     const stores = useCreatedStores(props);
@@ -207,8 +208,45 @@ export const Clone = observer((props) => {
     };
     // Clone reload.
     const reloadClone = () => stores.main.reload();
-    // Data protection.
-    const toggleDataProtection = () => stores.main.updateClone(!clone.protected);
+    // Data protection - build options based on admin config.
+    const maxDurationMinutes = (_g = (_f = (_e = instance.state) === null || _e === void 0 ? void 0 : _e.cloning) === null || _f === void 0 ? void 0 : _f.protectionMaxDurationMinutes) !== null && _g !== void 0 ? _g : 0;
+    const allowForever = maxDurationMinutes === 0;
+    const allDurationOptions = [
+        { value: '60', minutes: 60, children: '1 hour' },
+        { value: '720', minutes: 720, children: '12 hours' },
+        { value: '1440', minutes: 1440, children: '1 day' },
+        { value: '2880', minutes: 2880, children: '2 days' },
+        { value: '4320', minutes: 4320, children: '3 days' },
+        { value: '5760', minutes: 5760, children: '4 days' },
+        { value: '7200', minutes: 7200, children: '5 days' },
+        { value: '8640', minutes: 8640, children: '6 days' },
+        { value: '10080', minutes: 10080, children: '7 days' },
+        { value: '20160', minutes: 20160, children: '14 days' },
+        { value: '43200', minutes: 43200, children: '30 days' },
+    ];
+    const protectionOptions = [
+        { value: 'none', children: 'No protection' },
+        ...allDurationOptions
+            .filter((opt) => maxDurationMinutes === 0 || opt.minutes <= maxDurationMinutes)
+            .map(({ value, children }) => ({ value, children })),
+        ...(allowForever ? [{ value: '0', children: 'Forever' }] : []),
+    ];
+    const handleProtectionChange = (e) => {
+        const value = e.target.value;
+        if (value === 'none') {
+            stores.main.updateCloneProtection(null);
+        }
+        else {
+            stores.main.updateCloneProtection(parseInt(value, 10));
+        }
+    };
+    const getCurrentProtectionValue = () => {
+        if (!clone.protected)
+            return 'none';
+        if (!clone.protectedTillDate)
+            return '0';
+        return 'current';
+    };
     // Commands.
     const sshPortForwardingUrl = getSshPortForwardingCommand(instance, clone);
     const jdbcConnectionStr = getJdbcConnectionStr(clone);
@@ -221,7 +259,7 @@ export const Clone = observer((props) => {
         isUpdatingClone ||
         !isCloneStable;
     return (_jsxs(_Fragment, { children: [headRendered, _jsxs("div", { className: classes.wrapper, children: [_jsxs("div", { className: classes.summary, children: [_jsxs("div", { className: classes.actions, children: [_jsxs(Button, { variant: "contained", color: "primary", onClick: requestResetClone, disabled: isDisabledControls, title: 'Reset clone', className: classes.actionButton, children: ["Reset clone", isResettingClone && (_jsx(Spinner, { size: "sm", className: classes.spinner }))] }), _jsxs(Button, { variant: "contained", color: "primary", onClick: requestDestroyClone, disabled: isDisabledControls, title: 'Delete this clone', className: classes.actionButton, children: ["Delete clone", isDestroyingClone && (_jsx(Spinner, { size: "sm", className: classes.spinner }))] }), !props.hideBranchingFeatures && _jsxs(Button, { variant: "contained", color: "primary", onClick: createSnapshot, disabled: isDisabledControls, title: 'Create snapshot', className: classes.actionButton, children: ["Create snapshot", snapshots.snapshotDataLoading && (_jsx(Spinner, { size: "sm", className: classes.spinner }))] }), _jsxs(Button, { variant: "outlined", color: "secondary", onClick: reloadClone, disabled: isDisabledControls, title: 'Refresh clone information', className: classes.actionButton, children: ["Reload info", isReloading && _jsx(Spinner, { size: "sm", className: classes.spinner })] })] }), stores.main.destroyCloneError ||
-                                (stores.main.resetCloneError && (_jsx(ErrorStub, { title: 'Resetting error', message: stores.main.resetCloneError, className: classes.errorStub }))), !props.hideBranchingFeatures && _jsxs("div", { children: [_jsx("p", { children: _jsx("strong", { children: "Branch" }) }), _jsx("p", { className: classes.text, children: clone.branch })] }), _jsxs("div", { className: classes.title, children: [_jsx("p", { children: _jsx("strong", { children: "Created" }) }), _jsx("p", { className: classes.text, children: clone.createdAt })] }), _jsx("br", {}), _jsxs("div", { children: [_jsxs("p", { children: [_jsx("strong", { children: "Data state at" }), "\u00A0", _jsx(Tooltip, { content: _jsxs(_Fragment, { children: [_jsx("strong", { children: "Data state time" }), " is a time at which data is\u00A0 recovered for this clone."] }), children: icons.infoIcon })] }), _jsx("p", { className: classes.text, children: (_e = clone.snapshot) === null || _e === void 0 ? void 0 : _e.dataStateAt })] }), _jsx("br", {}), _jsxs("div", { children: [_jsx("p", { children: _jsx("strong", { children: "Status" }) }), _jsx(Status, { rawClone: clone, className: classes.status })] }), _jsx("br", {}), _jsxs("div", { children: [_jsxs("p", { children: [_jsx("strong", { children: "Summary" }), "\u00A0", _jsx(Tooltip, { content: _jsxs(_Fragment, { children: [_jsx("strong", { children: "Logical data size" }), " is a logical size of files in PGDATA which is being thin-cloned.", _jsx("br", {}), _jsx("br", {}), _jsx("strong", { children: "Physical data diff size" }), " is an actual size of a\u00A0 thin clone. On creation there is no diff between clone\u2019s\u00A0 and initial data state, all data blocks match. During work\u00A0 with the clone data diverges and data diff size increases.", _jsx("br", {}), _jsx("br", {}), _jsx("strong", { children: "Clone creation time" }), " is time which was\u00A0 spent to provision the clone."] }), children: icons.infoIcon })] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Logical data size:" }), ((_f = instance.state) === null || _f === void 0 ? void 0 : _f.dataSize)
+                                (stores.main.resetCloneError && (_jsx(ErrorStub, { title: 'Resetting error', message: stores.main.resetCloneError, className: classes.errorStub }))), !props.hideBranchingFeatures && _jsxs("div", { children: [_jsx("p", { children: _jsx("strong", { children: "Branch" }) }), _jsx("p", { className: classes.text, children: clone.branch })] }), _jsxs("div", { className: classes.title, children: [_jsx("p", { children: _jsx("strong", { children: "Created" }) }), _jsx("p", { className: classes.text, children: clone.createdAt })] }), _jsx("br", {}), _jsxs("div", { children: [_jsxs("p", { children: [_jsx("strong", { children: "Data state at" }), "\u00A0", _jsx(Tooltip, { content: _jsxs(_Fragment, { children: [_jsx("strong", { children: "Data state time" }), " is a time at which data is\u00A0 recovered for this clone."] }), children: icons.infoIcon })] }), _jsx("p", { className: classes.text, children: (_h = clone.snapshot) === null || _h === void 0 ? void 0 : _h.dataStateAt })] }), _jsx("br", {}), _jsxs("div", { children: [_jsx("p", { children: _jsx("strong", { children: "Status" }) }), _jsx(Status, { rawClone: clone, className: classes.status })] }), _jsx("br", {}), _jsxs("div", { children: [_jsxs("p", { children: [_jsx("strong", { children: "Summary" }), "\u00A0", _jsx(Tooltip, { content: _jsxs(_Fragment, { children: [_jsx("strong", { children: "Logical data size" }), " is a logical size of files in PGDATA which is being thin-cloned.", _jsx("br", {}), _jsx("br", {}), _jsx("strong", { children: "Physical data diff size" }), " is an actual size of a\u00A0 thin clone. On creation there is no diff between clone\u2019s\u00A0 and initial data state, all data blocks match. During work\u00A0 with the clone data diverges and data diff size increases.", _jsx("br", {}), _jsx("br", {}), _jsx("strong", { children: "Clone creation time" }), " is time which was\u00A0 spent to provision the clone."] }), children: icons.infoIcon })] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Logical data size:" }), ((_j = instance.state) === null || _j === void 0 ? void 0 : _j.dataSize)
                                                 ? formatBytesIEC(instance.state.dataSize)
                                                 : '-'] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Physical data diff size:" }), clone.metadata.cloneDiffSize
                                                 ? formatBytesIEC(clone.metadata.cloneDiffSize)
@@ -248,5 +286,10 @@ export const Clone = observer((props) => {
                                                             style: styles.inputFieldLabel,
                                                         }, FormHelperTextProps: {
                                                             style: styles.inputFieldHelper,
-                                                        } }), _jsx(IconButton, { className: classes.copyButton, "aria-label": "Copy", onClick: () => copyToClipboard(jdbcConnectionStr), children: icons.copyIcon })] }), "\u00A0", _jsx(Tooltip, { content: _jsx(_Fragment, { children: "Used to connect to PostgreSQL using JDBC. Change DBNAME to the name of the database you want to connect to, and change DBPASSWORD to the password you used when creating the clone." }), children: _jsx("span", { className: classes.textFieldInfo, children: icons.infoIcon }) })] }))] })), _jsx("br", {}), _jsx("div", { className: classes.fieldBlock, children: _jsxs("span", { className: classes.remark, children: ["Password was set during clone creation. It\u2019s not being stored.", _jsx("br", {}), "You would need to recreate a clone if the password is lost."] }) }), _jsx("br", {}), _jsx("p", { children: _jsx("strong", { children: "Protection" }) }), _jsxs("p", { children: [_jsx(FormControlLabel, { className: classes.checkboxLabel, control: _jsx(Checkbox, { checked: clone.protected, onChange: toggleDataProtection, name: "protected", disabled: isDisabledControls }), label: "Enable deletion protection" }), _jsx("br", {}), _jsxs("span", { className: classes.remark, children: ["When enabled, no one can delete this clone and automated deletion is also disabled.", _jsx("br", {}), "Please be careful: abandoned clones with this checkbox enabled may cause out-of-disk-space events. Check disk space on a daily basis and delete this clone once your work is done."] })] }), stores.main.updateCloneError && (_jsx(ErrorStub, { title: "Updating error", message: stores.main.updateCloneError, className: classes.errorStub }))] }), _jsxs("div", { className: classes.snippetContainer, children: [_jsx(SectionTitle, { tag: "h2", level: 2, text: 'Reset clone using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can reset the clone using CLI using the following command:" }), _jsx(SyntaxHighlight, { content: getCliResetCloneCommand(props.cloneId) }), _jsx(SectionTitle, { className: classes.title, tag: "h2", level: 2, text: 'Delete clone using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can delete the clone using CLI using the following command:" }), _jsx(SyntaxHighlight, { content: getCliDestroyCloneCommand(props.cloneId) }), _jsx(SectionTitle, { className: classes.title, tag: "h2", level: 2, text: 'Toggle deletion protection using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can toggle deletion protection using CLI for this clone using the following command:" }), _jsx(SyntaxHighlight, { content: getCliProtectedCloneCommand(true) }), _jsx(SyntaxHighlight, { content: getCliProtectedCloneCommand(false) }), _jsx(SectionTitle, { className: classes.title, tag: "h2", level: 2, text: 'Create snapshot for this clone using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can create a snapshot for this clone using CLI using the following command:" }), _jsx(SyntaxHighlight, { content: getCreateSnapshotCommand(props.cloneId) })] }), _jsxs(_Fragment, { children: [_jsx(DestroyCloneRestrictionModal, { isOpen: isOpenRestrictionModal, onClose: () => setIsOpenRestrictionModal(false), cloneId: clone.id }), _jsx(DestroyCloneModal, { isOpen: isOpenDestroyModal, onClose: () => setIsOpenDestroyModal(false), cloneId: clone.id, onDestroyClone: destroyClone }), _jsx(ResetCloneModal, { isOpen: isOpenResetModal, onClose: () => setIsOpenResetModal(false), clone: clone, snapshots: snapshots.data, onResetClone: resetClone, version: (_g = instance.state) === null || _g === void 0 ? void 0 : _g.engine.version })] })] })] }));
+                                                        } }), _jsx(IconButton, { className: classes.copyButton, "aria-label": "Copy", onClick: () => copyToClipboard(jdbcConnectionStr), children: icons.copyIcon })] }), "\u00A0", _jsx(Tooltip, { content: _jsx(_Fragment, { children: "Used to connect to PostgreSQL using JDBC. Change DBNAME to the name of the database you want to connect to, and change DBPASSWORD to the password you used when creating the clone." }), children: _jsx("span", { className: classes.textFieldInfo, children: icons.infoIcon }) })] }))] })), _jsx("br", {}), _jsx("div", { className: classes.fieldBlock, children: _jsxs("span", { className: classes.remark, children: ["Password was set during clone creation. It\u2019s not being stored.", _jsx("br", {}), "You would need to recreate a clone if the password is lost."] }) }), _jsx("br", {}), _jsx("p", { children: _jsx("strong", { children: "Protection" }) }), _jsxs("div", { style: { marginTop: '8px', marginBottom: '16px' }, children: [_jsx(Select, { label: "Deletion protection", items: clone.protected && clone.protectedTillDate
+                                            ? [
+                                                { value: 'current', children: `Protected until ${clone.protectedTillDate.toLocaleString()}` },
+                                                ...protectionOptions,
+                                            ]
+                                            : protectionOptions, value: getCurrentProtectionValue(), onChange: handleProtectionChange, disabled: isDisabledControls, style: { minWidth: 100 } }), isUpdatingClone && _jsx(Spinner, { size: "sm", className: classes.spinner })] }), _jsxs("span", { className: classes.remark, children: ["Select how long this clone should be protected from deletion. Protected clones cannot be deleted manually or automatically.", _jsx("br", {}), "Check disk space regularly and delete this clone once your work is done."] }), stores.main.updateCloneError && (_jsx(ErrorStub, { title: "Updating error", message: stores.main.updateCloneError, className: classes.errorStub }))] }), _jsxs("div", { className: classes.snippetContainer, children: [_jsx(SectionTitle, { tag: "h2", level: 2, text: 'Reset clone using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can reset the clone using CLI using the following command:" }), _jsx(SyntaxHighlight, { content: getCliResetCloneCommand(props.cloneId) }), _jsx(SectionTitle, { className: classes.title, tag: "h2", level: 2, text: 'Delete clone using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can delete the clone using CLI using the following command:" }), _jsx(SyntaxHighlight, { content: getCliDestroyCloneCommand(props.cloneId) }), _jsx(SectionTitle, { className: classes.title, tag: "h2", level: 2, text: 'Toggle deletion protection using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can toggle deletion protection using CLI for this clone using the following command:" }), _jsx(SyntaxHighlight, { content: getCliProtectedCloneCommand(true) }), _jsx(SyntaxHighlight, { content: getCliProtectedCloneCommand(false) }), _jsx(SectionTitle, { className: classes.title, tag: "h2", level: 2, text: 'Create snapshot for this clone using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can create a snapshot for this clone using CLI using the following command:" }), _jsx(SyntaxHighlight, { content: getCreateSnapshotCommand(props.cloneId) })] }), _jsxs(_Fragment, { children: [_jsx(DestroyCloneRestrictionModal, { isOpen: isOpenRestrictionModal, onClose: () => setIsOpenRestrictionModal(false), cloneId: clone.id }), _jsx(DestroyCloneModal, { isOpen: isOpenDestroyModal, onClose: () => setIsOpenDestroyModal(false), cloneId: clone.id, onDestroyClone: destroyClone }), _jsx(ResetCloneModal, { isOpen: isOpenResetModal, onClose: () => setIsOpenResetModal(false), clone: clone, snapshots: snapshots.data, onResetClone: resetClone, version: (_k = instance.state) === null || _k === void 0 ? void 0 : _k.engine.version })] })] })] }));
 });

package/{pages → dist/pages}/Clone/stores/Main.d.ts

@@ -42,6 +42,6 @@ export declare class MainStore {
     private loadClone;
     resetClone: (snapshotId: string) => Promise<boolean>;
     destroyClone: () => Promise<boolean>;
-    updateClone: (isProtected: boolean) => Promise<void>;
+    updateCloneProtection: (durationMinutes: number | null) => Promise<void>;
 }
 export {};

package/{pages → dist/pages}/Clone/stores/Main.js

@@ -110,21 +110,27 @@ export class MainStore {
             this.isDestroyingClone = false;
             return Boolean(response);
         };
-        this.updateClone = async (isProtected) => {
+        this.updateCloneProtection = async (durationMinutes) => {
             if (!this.instance || !this.clone)
                 return;
             this.isUpdatingClone = true;
             const prevIsProtected = this.clone.protected;
+            const isProtected = durationMinutes !== null;
             this.clone.protected = isProtected;
             const { response, error } = await this.api.updateClone({
                 instanceId: this.instance.id,
                 cloneId: this.clone.id,
                 clone: {
                     isProtected,
+                    protectionDurationMinutes: durationMinutes !== null && durationMinutes !== void 0 ? durationMinutes : undefined,
                 },
             });
-            if (!response)
+            if (response) {
+                await this.loadClone(this.instance.id, this.clone.id);
+            }
+            else {
                 this.clone.protected = prevIsProtected;
+            }
             if (error)
                 this.updateCloneError = await getTextFromUnknownApiError(error);
             this.isUpdatingClone = false;

package/{pages → dist/pages}/CreateBranch/useForm.d.ts

@@ -33,7 +33,7 @@ export declare const useForm: (onSubmit: (values: CreateBranchFormValues) => voi
         dirty: boolean;
         unregisterField: (name: string) => void;
         registerField: (name: string, { validate }: any) => void;
-        getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+        getFieldProps: (nameOrOptions: string | import("formik").FieldConfig<any>) => import("formik").FieldInputProps<any>;
         getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
         getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
         validateOnBlur: boolean;