@postgres.ai/shared 3.5.1-pr-1027.0 → 4.0.0-pr-1028.1

package/pages/CreateClone/stores/Main.js

@@ -0,0 +1,85 @@
+import { makeAutoObservable } from 'mobx';
+import { SnapshotsStore, } from '@postgres.ai/shared/stores/Snapshots';
+import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api';
+import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone';
+const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000;
+export class MainStore {
+    constructor(api) {
+        this.instance = null;
+        this.instanceError = null;
+        this.getBranchesError = null;
+        this.getSnapshotsError = null;
+        this.clone = null;
+        this.cloneError = null;
+        this.load = async (instanceId) => {
+            var _a, _b;
+            const [instance, isLoadedSnapshots] = await Promise.all([
+                this.api.getInstance({ instanceId }),
+                (_b = (_a = this.snapshots) === null || _a === void 0 ? void 0 : _a.load(instanceId)) !== null && _b !== void 0 ? _b : true,
+            ]);
+            if (instance.response)
+                this.instance = instance.response;
+            if (instance.error)
+                this.instanceError = await getTextFromUnknownApiError(instance.error);
+            return Boolean(instance.response) && isLoadedSnapshots;
+        };
+        this.createClone = async (data) => {
+            if (!this.instance)
+                return false;
+            const { response, error } = await this.api.createClone({
+                ...data,
+                instanceId: this.instance.id,
+            });
+            if (response) {
+                this.clone = response;
+                this.updateCloneUntilStable({
+                    instanceId: this.instance.id,
+                    cloneId: this.clone.id,
+                });
+            }
+            if (error)
+                this.cloneError = await error.json().then((err) => (err === null || err === void 0 ? void 0 : err.message) || err);
+            return Boolean(response);
+        };
+        this.getBranches = async (instanceId) => {
+            if (!this.api.getBranches)
+                return;
+            const { response, error } = await this.api.getBranches(instanceId);
+            if (error)
+                this.getBranchesError = await error.json().then((err) => err);
+            return response;
+        };
+        this.getSnapshots = async (instanceId, branchName) => {
+            if (!this.api.getSnapshots)
+                return;
+            const { response, error } = await this.api.getSnapshots({
+                instanceId,
+                branchName,
+            });
+            if (error)
+                this.getSnapshotsError = await error.json().then((err) => err);
+            return response;
+        };
+        this.updateCloneUntilStable = async (args) => {
+            window.clearTimeout(this.cloneUpdateTimeout);
+            const { response, error } = await this.api.getClone(args);
+            if (response) {
+                this.clone = response;
+                if (!this.isCloneStable)
+                    this.cloneUpdateTimeout = window.setTimeout(() => this.updateCloneUntilStable(args), UNSTABLE_CLONE_UPDATE_TIMEOUT);
+            }
+            if (error)
+                this.cloneError = await error.json().then((err) => (err === null || err === void 0 ? void 0 : err.message) || err);
+        };
+        makeAutoObservable(this);
+        this.api = api;
+        if (!api.getSnapshots) {
+            this.snapshots = new SnapshotsStore(api);
+        }
+    }
+    get isCloneStable() {
+        if (!this.clone)
+            return;
+        return checkIsCloneStable(this.clone);
+    }
+}

package/pages/CreateClone/styles.module.scss

@@ -1,15 +1,41 @@
+.container {
+  display: flex;
+  gap: 60px;
+  margin-top: 20px;
+  max-width: 1200px;
+
+  @media (max-width: 1300px) {
+    flex-direction: column;
+    gap: 20px;
+  }
+}
+
 .title {
   margin-top: 16px;
 }
 
 .form {
-  max-width: 425px;
-  margin-top: 8px;
+  flex: 1 1 0;
+}
+
+.snippetContainer {
+  flex: 1 1 0;
+  min-width: 0;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  padding: 0 20px 10px 20px;
+  height: max-content;
+  border-radius: 4px;
+}
+
+.snapshotItem {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
 }
 
 .section {
   & + .section {
-    margin-top: 32px;
+    margin-top: 24px;
   }
 }
 
@@ -22,6 +48,10 @@
   margin-top: 8px;
 }
 
+.marginBottom {
+  margin-bottom: 10px;
+}
+
 .remark {
   font-size: 12px;
 }
@@ -38,8 +68,10 @@
 .summary {
   display: flex;
   align-items: center;
-  background-color: rgba(#808080, 0.15) !important;
+  background-color: rgb(250, 250, 250) !important;
+  box-shadow: none !important;
   padding: 12px;
+  margin: 10px 0 15px 0;
 }
 
 .summaryIcon {
@@ -69,3 +101,14 @@
 .elapsedTime {
   margin-left: 24px;
 }
+
+.snapshotOverflow {
+  width: 100%;
+  word-wrap: break-word;
+  white-space: initial;
+}
+
+.pageTitle {
+  margin-top: 8px;
+  line-height: 26px;
+}

package/pages/CreateClone/useCreatedStores.d.ts

@@ -0,0 +1,6 @@
+import { MainStore, MainStoreApi } from './stores/Main';
+export declare const useCreatedStores: (api: MainStoreApi) => {
+    main: MainStore;
+};
+export declare type Stores = ReturnType<typeof useCreatedStores>;
+export type { MainStoreApi };

package/pages/CreateClone/useCreatedStores.js

@@ -0,0 +1,5 @@
+import { useMemo } from 'react';
+import { MainStore } from './stores/Main';
+export const useCreatedStores = (api) => ({
+    main: useMemo(() => new MainStore(api), []),
+});

package/pages/CreateClone/useForm.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+export declare type FormValues = {
+    branch: string;
+    cloneId: string;
+    snapshotId: string;
+    dbUser: string;
+    dbPassword: string;
+    isProtected: boolean;
+};
+export declare const useForm: (onSubmit: (values: FormValues) => void) => {
+    initialValues: FormValues;
+    initialErrors: import("formik").FormikErrors<unknown>;
+    initialTouched: import("formik").FormikTouched<unknown>;
+    initialStatus: any;
+    handleBlur: {
+        (e: import("react").FocusEvent<any, Element>): void;
+        <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+    };
+    handleChange: {
+        (e: import("react").ChangeEvent<any>): void;
+        <T_1 = string | import("react").ChangeEvent<any>>(field: T_1): T_1 extends import("react").ChangeEvent<any> ? void : (e: string | import("react").ChangeEvent<any>) => void;
+    };
+    handleReset: (e: any) => void;
+    handleSubmit: (e?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
+    resetForm: (nextState?: Partial<import("formik").FormikState<FormValues>> | undefined) => void;
+    setErrors: (errors: import("formik").FormikErrors<FormValues>) => void;
+    setFormikState: (stateOrCb: import("formik").FormikState<FormValues> | ((state: import("formik").FormikState<FormValues>) => import("formik").FormikState<FormValues>)) => void;
+    setFieldTouched: (field: string, touched?: boolean | undefined, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+    setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+    setFieldError: (field: string, value: string | undefined) => void;
+    setStatus: (status: any) => void;
+    setSubmitting: (isSubmitting: boolean) => void;
+    setTouched: (touched: import("formik").FormikTouched<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+    setValues: (values: import("react").SetStateAction<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+    submitForm: () => Promise<any>;
+    validateForm: (values?: FormValues | undefined) => Promise<import("formik").FormikErrors<FormValues>>;
+    validateField: (name: string) => Promise<void> | Promise<string | undefined>;
+    isValid: boolean;
+    dirty: boolean;
+    unregisterField: (name: string) => void;
+    registerField: (name: string, { validate }: any) => void;
+    getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+    getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
+    getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
+    validateOnBlur: boolean;
+    validateOnChange: boolean;
+    validateOnMount: boolean;
+    values: FormValues;
+    errors: import("formik").FormikErrors<FormValues>;
+    touched: import("formik").FormikTouched<FormValues>;
+    isSubmitting: boolean;
+    isValidating: boolean;
+    status?: any;
+    submitCount: number;
+};

package/pages/CreateClone/useForm.js

@@ -0,0 +1,26 @@
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+const Schema = Yup.object().shape({
+    cloneId: Yup.string(),
+    snapshotId: Yup.string().required('Date state time is required'),
+    dbUser: Yup.string().required('Database username is required'),
+    dbPassword: Yup.string().required('Database password is required'),
+    isProtected: Yup.boolean(),
+});
+export const useForm = (onSubmit) => {
+    const formik = useFormik({
+        initialValues: {
+            branch: '',
+            cloneId: '',
+            snapshotId: '',
+            dbUser: '',
+            dbPassword: '',
+            isProtected: false,
+        },
+        validationSchema: Schema,
+        onSubmit,
+        validateOnBlur: false,
+        validateOnChange: false,
+    });
+    return formik;
+};

package/pages/CreateClone/utils/index.d.ts

@@ -0,0 +1,3 @@
+import { FormValues } from '@postgres.ai/shared/pages/CreateClone/useForm';
+export declare const getCliCreateCloneCommand: (values: FormValues) => string;
+export declare const getCliCloneStatus: (cloneId: string) => string;

package/pages/CreateClone/utils/index.js

@@ -0,0 +1,17 @@
+export const getCliCreateCloneCommand = (values) => {
+    const { dbUser, dbPassword, branch, isProtected, cloneId } = values;
+    return `dblab clone create \
+
+  --username ${dbUser ? dbUser : `<USERNAME>`} \
+
+  --password ${dbPassword ? dbPassword.replace(/./g, '*') : `<PASSWORD>`} \
+
+  ${branch ? `--branch ${branch}` : ``} \
+
+  ${isProtected ? `--protected` : ''} \ 
+
+  --id ${cloneId ? cloneId : `<CLONE_ID>`} \ `;
+};
+export const getCliCloneStatus = (cloneId) => {
+    return `dblab clone status ${cloneId ? cloneId : `<CLONE_ID>`}`;
+};

package/pages/CreateSnapshot/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { MainStoreApi } from './stores/Main';
+interface CreateSnapshotProps {
+    instanceId: string;
+    api: MainStoreApi;
+    routes: {
+        snapshot: (snapshotId: string) => string;
+    };
+    elements: {
+        breadcrumbs: React.ReactNode;
+    };
+    isPlatform?: boolean;
+}
+export declare const CreateSnapshotPage: (({ instanceId, api, elements, routes, isPlatform }: CreateSnapshotProps) => JSX.Element) & {
+    displayName: string;
+};
+export {};

package/pages/CreateSnapshot/index.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * 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 { useEffect } from 'react';
+import { useHistory } from 'react-router';
+import { observer } from 'mobx-react-lite';
+import { makeStyles } from '@material-ui/core';
+import { Button } from '@postgres.ai/shared/components/Button';
+import { ResponseMessage } from '@postgres.ai/shared/pages/Instance/Configuration/ResponseMessage';
+import { Select } from '@postgres.ai/shared/components/Select';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight';
+import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils';
+import { TextField } from '@postgres.ai/shared/components/TextField';
+import { useForm } from './useForm';
+import { useCreatedStores } from './useCreatedStores';
+import { getCliCreateSnapshotCommand } from './utils';
+import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
+const useStyles = makeStyles({
+    wrapper: {
+        display: 'flex',
+        gap: '60px',
+        maxWidth: '1200px',
+        fontSize: '14px',
+        marginTop: '20px',
+        '@media (max-width: 1300px)': {
+            flexDirection: 'column',
+            gap: '20px',
+        },
+    },
+    container: {
+        maxWidth: '100%',
+        flex: '1 1 0',
+        minWidth: 0,
+        '&  p,span': {
+            fontSize: 14,
+        },
+    },
+    snippetContainer: {
+        flex: '1 1 0',
+        minWidth: 0,
+        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 12px',
+        padding: '10px 20px 10px 20px',
+        height: 'max-content',
+        borderRadius: '4px',
+    },
+    marginBottom: {
+        marginBottom: '8px',
+    },
+    marginBottom2x: {
+        marginBottom: '16px',
+    },
+    marginTop: {
+        marginTop: '8px',
+    },
+    marginTop2x: {
+        marginTop: '16px',
+    },
+    spinner: {
+        marginLeft: '8px',
+        color: '#fff',
+    },
+    title: {
+        marginTop: '8px',
+        lineHeight: '26px'
+    },
+}, { index: 1 });
+export const CreateSnapshotPage = observer(({ instanceId, api, elements, routes, isPlatform }) => {
+    var _a, _b;
+    const stores = useCreatedStores(api);
+    const classes = useStyles();
+    const history = useHistory();
+    const { load, instance, createSnapshot, isCreatingSnapshot, snapshotError, } = stores.main;
+    const clonesList = ((_b = (_a = instance === null || instance === void 0 ? void 0 : instance.instance) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.cloning.clones) || [];
+    const handleSubmit = async (values) => {
+        await createSnapshot(values.cloneID, values.message, instanceId).then((snapshot) => {
+            if (snapshot && generateSnapshotPageId(snapshot.snapshotID)) {
+                history.push(routes.snapshot(generateSnapshotPageId(snapshot.snapshotID)));
+            }
+        });
+    };
+    const [{ formik }] = useForm(handleSubmit);
+    if (!clonesList) {
+        return _jsx(StubSpinner, {});
+    }
+    useEffect(() => {
+        load(instanceId);
+    }, []);
+    useEffect(() => {
+        if (!history.location.search)
+            return;
+        const queryString = history.location.search.split('?')[1];
+        if (!queryString)
+            return;
+        const params = new URLSearchParams(queryString);
+        const cloneID = params.get('clone_id');
+        if (!cloneID)
+            return;
+        formik.setFieldValue('cloneID', cloneID);
+    }, [history.location.search, formik.initialValues]);
+    return (_jsxs(_Fragment, { children: [elements.breadcrumbs, _jsx(SectionTitle, { tag: "h1", level: 1, text: "Create snapshot", className: classes.title, children: _jsx(InstanceTabs, { tab: TABS_INDEX.SNAPSHOTS, isPlatform: isPlatform, instanceId: instanceId, hasLogs: api.initWS !== undefined }) }), _jsxs("div", { className: classes.wrapper, children: [_jsx("div", { className: classes.container, children: _jsxs("div", { className: classes.marginTop2x, children: [_jsx("strong", { children: "Clone ID" }), _jsx("p", { className: classes.marginTop, children: "Choose a clone ID from the dropdown below. This will be the starting point for your new snapshot." }), _jsx(Select, { fullWidth: true, label: "Clone ID *", value: formik.values.cloneID, disabled: formik.isSubmitting, className: classes.marginBottom2x, onChange: (e) => formik.setFieldValue('cloneID', e.target.value), error: Boolean(formik.errors.cloneID), items: clonesList
+                                        ? clonesList.map((clone, i) => {
+                                            var _a, _b;
+                                            const isLatest = i === 0;
+                                            return {
+                                                value: clone.id,
+                                                children: (_jsxs("div", { children: [_jsxs("strong", { children: [clone.id, " ", isLatest && _jsx("span", { children: "Latest" })] }), _jsxs("p", { children: ["Created: ", (_a = clone === null || clone === void 0 ? void 0 : clone.snapshot) === null || _a === void 0 ? void 0 : _a.createdAt] }), _jsxs("p", { children: ["Data state at: ", (_b = clone === null || clone === void 0 ? void 0 : clone.snapshot) === null || _b === void 0 ? void 0 : _b.dataStateAt] })] })),
+                                            };
+                                        })
+                                        : [] }), _jsx("strong", { children: "Message" }), _jsx("p", { className: classes.marginTop, children: "Message to be added to the snapshot." }), _jsx(TextField, { label: "Message *", fullWidth: true, className: classes.marginBottom2x, value: formik.values.message, error: Boolean(formik.errors.message), onChange: (e) => formik.setFieldValue('message', e.target.value) }), _jsxs(Button, { variant: "primary", size: "medium", className: classes.marginTop, onClick: formik.submitForm, children: ["Create snapshot", isCreatingSnapshot && (_jsx(Spinner, { size: "sm", className: classes.spinner }))] }), snapshotError && (_jsx(ResponseMessage, { type: 'error', message: snapshotError }))] }) }), ' ', _jsxs("div", { className: classes.snippetContainer, children: [_jsx(SectionTitle, { tag: "h1", level: 1, text: "The same using CLI" }), _jsx("p", { className: classes.marginTop, children: "Alternatively, you can create a new snapshot using CLI. Fill the form, copy the command below and paste it into your terminal." }), _jsx(SyntaxHighlight, { content: getCliCreateSnapshotCommand(formik.values.cloneID, formik.values.message) })] })] })] }));
+});

package/pages/CreateSnapshot/stores/Main.d.ts

@@ -0,0 +1,21 @@
+import { CreateSnapshot } from '@postgres.ai/shared/types/api/endpoints/createSnapshot';
+import { MainStore as InstanceStore, Api as InstanceStoreApi } from '@postgres.ai/shared/pages/Instance/stores/Main';
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS';
+declare type Error = {
+    title?: string;
+    message: string;
+};
+export declare type MainStoreApi = InstanceStoreApi & {
+    createSnapshot: CreateSnapshot;
+    initWS: InitWS;
+};
+export declare class MainStore {
+    snapshotError: Error | null;
+    isCreatingSnapshot: boolean;
+    readonly instance: InstanceStore;
+    private readonly api;
+    constructor(api: MainStoreApi);
+    load: (instanceId: string) => Promise<void>;
+    createSnapshot: (cloneID: string, message: string, instanceId: string) => Promise<import("../../../types/api/entities/createSnapshot").CreateSnapshotDTO | null | undefined>;
+}
+export {};

package/pages/CreateSnapshot/stores/Main.js

@@ -0,0 +1,31 @@
+/*--------------------------------------------------------------------------
+ * 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 { makeAutoObservable } from 'mobx';
+import { MainStore as InstanceStore, } from '@postgres.ai/shared/pages/Instance/stores/Main';
+export class MainStore {
+    constructor(api) {
+        this.snapshotError = null;
+        this.isCreatingSnapshot = false;
+        this.load = async (instanceId) => {
+            this.instance.load(instanceId);
+        };
+        this.createSnapshot = async (cloneID, message, instanceId) => {
+            if (!this.api.createSnapshot)
+                return;
+            this.snapshotError = null;
+            this.isCreatingSnapshot = true;
+            const { response, error } = await this.api.createSnapshot(cloneID, message, instanceId);
+            this.isCreatingSnapshot = false;
+            if (error)
+                this.snapshotError = await error.json().then((err) => err.message);
+            return response;
+        };
+        this.api = api;
+        this.instance = new InstanceStore(api);
+        makeAutoObservable(this);
+    }
+}

package/pages/CreateSnapshot/useCreatedStores.d.ts

@@ -0,0 +1,6 @@
+import { MainStore, MainStoreApi } from './stores/Main';
+export declare const useCreatedStores: (api: MainStoreApi) => {
+    main: MainStore;
+};
+export declare type Stores = ReturnType<typeof useCreatedStores>;
+export type { MainStoreApi };

package/pages/CreateSnapshot/useCreatedStores.js

@@ -0,0 +1,5 @@
+import { useMemo } from 'react';
+import { MainStore } from './stores/Main';
+export const useCreatedStores = (api) => ({
+    main: useMemo(() => new MainStore(api), []),
+});

package/pages/CreateSnapshot/useForm.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+export declare type FormValues = {
+    cloneID: string;
+    message: string;
+};
+export declare const useForm: (onSubmit: (values: FormValues) => void) => {
+    formik: {
+        initialValues: FormValues;
+        initialErrors: import("formik").FormikErrors<unknown>;
+        initialTouched: import("formik").FormikTouched<unknown>;
+        initialStatus: any;
+        handleBlur: {
+            (e: import("react").FocusEvent<any, Element>): void;
+            <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+        };
+        handleChange: {
+            (e: import("react").ChangeEvent<any>): void;
+            <T_1 = string | import("react").ChangeEvent<any>>(field: T_1): T_1 extends import("react").ChangeEvent<any> ? void : (e: string | import("react").ChangeEvent<any>) => void;
+        };
+        handleReset: (e: any) => void;
+        handleSubmit: (e?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
+        resetForm: (nextState?: Partial<import("formik").FormikState<FormValues>> | undefined) => void;
+        setErrors: (errors: import("formik").FormikErrors<FormValues>) => void;
+        setFormikState: (stateOrCb: import("formik").FormikState<FormValues> | ((state: import("formik").FormikState<FormValues>) => import("formik").FormikState<FormValues>)) => void;
+        setFieldTouched: (field: string, touched?: boolean | undefined, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setFieldError: (field: string, value: string | undefined) => void;
+        setStatus: (status: any) => void;
+        setSubmitting: (isSubmitting: boolean) => void;
+        setTouched: (touched: import("formik").FormikTouched<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setValues: (values: import("react").SetStateAction<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        submitForm: () => Promise<any>;
+        validateForm: (values?: FormValues | undefined) => Promise<import("formik").FormikErrors<FormValues>>;
+        validateField: (name: string) => Promise<void> | Promise<string | undefined>;
+        isValid: boolean;
+        dirty: boolean;
+        unregisterField: (name: string) => void;
+        registerField: (name: string, { validate }: any) => void;
+        getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+        getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
+        getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
+        validateOnBlur: boolean;
+        validateOnChange: boolean;
+        validateOnMount: boolean;
+        values: FormValues;
+        errors: import("formik").FormikErrors<FormValues>;
+        touched: import("formik").FormikTouched<FormValues>;
+        isSubmitting: boolean;
+        isValidating: boolean;
+        status?: any;
+        submitCount: number;
+    };
+}[];

package/pages/CreateSnapshot/useForm.js

@@ -0,0 +1,25 @@
+/*--------------------------------------------------------------------------
+ * 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 { useFormik } from 'formik';
+import * as Yup from 'yup';
+const Schema = Yup.object().shape({
+    cloneID: Yup.string().required('Clone ID is required'),
+    message: Yup.string().required('Message is required'),
+});
+export const useForm = (onSubmit) => {
+    const formik = useFormik({
+        initialValues: {
+            cloneID: '',
+            message: '',
+        },
+        validationSchema: Schema,
+        onSubmit,
+        validateOnBlur: false,
+        validateOnChange: false,
+    });
+    return [{ formik }];
+};

package/pages/CreateSnapshot/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const getCliCreateSnapshotCommand: (cloneID: string, message: string) => string;

package/pages/CreateSnapshot/utils/index.js

@@ -0,0 +1,3 @@
+export const getCliCreateSnapshotCommand = (cloneID, message) => {
+    return `dblab commit --clone-id ${cloneID || '<CLONE_ID>'} --message ${message || '<MESSAGE>'}`;
+};

package/pages/Instance/Clones/ClonesList/ConnectionModal/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    cloneId: string;
+};
+export declare const ConnectionModal: ((props: Props) => JSX.Element | null) & {
+    displayName: string;
+};
+export {};