@postgres.ai/shared 3.5.0-pr-1027.1 → 4.0.0-pr-1028.1

package/components/DestroyCloneModal/index.js

@@ -9,15 +9,15 @@ export const DestroyCloneModal = (props) => {
         onDestroyClone();
         onClose();
     };
-    return (_jsxs(Modal, { title: `Destroy clone ${cloneId}`, onClose: onClose, isOpen: isOpen, children: [_jsxs(Text, { children: ["Are you sure you want to destroy clone", ' ', _jsx(ImportantText, { children: cloneId }), "?"] }), _jsx(SimpleModalControls, { items: [
+    return (_jsxs(Modal, { title: `Delete clone ${cloneId}`, onClose: onClose, isOpen: isOpen, children: [_jsxs(Text, { children: ["Are you sure you want to delete clone", ' ', _jsx(ImportantText, { children: cloneId }), "? This action cannot be undone."] }), _jsx(SimpleModalControls, { items: [
                     {
                         text: 'Cancel',
                         onClick: onClose,
                     },
                     {
-                        text: 'Destroy clone',
+                        text: 'Delete clone',
                         variant: 'primary',
                         onClick: handleClickDestroy,
-                    }
+                    },
                 ] })] }));
 };

package/components/DestroyCloneRestrictionModal/index.js

@@ -7,7 +7,7 @@ import { Text } from '@postgres.ai/shared/components/Text';
 import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls';
 export const DestroyCloneRestrictionModal = observer((props) => {
     const { isOpen, onClose, cloneId, clonePagePath } = props;
-    return (_jsxs(Modal, { title: "Cannot destroy clone", isOpen: isOpen, onClose: onClose, children: [_jsxs(Text, { children: ["Cannot destroy clone ", _jsx(ImportantText, { children: cloneId }), " because deletion protection is enabled. You can disable deletion protection on", ' ', clonePagePath ? (_jsx(Link, { to: clonePagePath, children: "the clone page" })) : ('this page'), "."] }), _jsx(SimpleModalControls, { items: [
+    return (_jsxs(Modal, { title: "Cannot delete clone", isOpen: isOpen, onClose: onClose, children: [_jsxs(Text, { children: ["Cannot delete clone ", _jsx(ImportantText, { children: cloneId }), " because deletion protection is enabled. You can disable deletion protection on", ' ', clonePagePath ? (_jsx(Link, { to: clonePagePath, children: "the clone page" })) : ('this page'), "."] }), _jsx(SimpleModalControls, { items: [
                     {
                         text: 'Close',
                         onClick: onClose,

package/components/MenuButton/index.d.ts

@@ -4,6 +4,8 @@ declare type BaseProps = {
     className?: string;
     icon?: React.ReactNode;
     isCollapsed?: boolean;
+    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
 };
 declare type ButtonProps = BaseProps & {
     type?: 'button' | 'submit';

package/components/MenuButton/index.js

@@ -7,7 +7,7 @@ export const Button = (props) => {
     const className = cn(styles.root, props.isCollapsed && styles.collapsed, props.className);
     const children = (_jsxs(_Fragment, { children: [props.icon && (_jsx("span", { className: cn(styles.icon, props.isCollapsed && styles.collapsed), children: props.icon })), !props.isCollapsed && props.children] }));
     if (!props.type || props.type === 'button' || props.type === 'submit')
-        return (_jsx("button", { className: className, onClick: props.onClick, disabled: props.disabled, children: children }));
+        return (_jsx("button", { className: className, onClick: props.onClick, disabled: props.disabled, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, children: children }));
     if (props.type === 'link')
         return (_jsx(NavLink, { className: className, to: props.to, activeClassName: props.activeClassName, children: children }));
     if (props.type === 'gateway-link')

package/components/ResetCloneModal/index.js

@@ -15,6 +15,7 @@ import { ImportantText } from '@postgres.ai/shared/components/ImportantText';
 import { Spinner } from '@postgres.ai/shared/components/Spinner';
 import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls';
 import { compareSnapshotsDesc } from '@postgres.ai/shared/utils/snapshot';
+import { isValidDate } from '@postgres.ai/shared/utils/date';
 const useStyles = makeStyles({
     snapshots: {
         margin: '16px 0 0 0',
@@ -63,9 +64,10 @@ export const ResetCloneModal = (props) => {
                     const isCurrent = snapshot.id === ((_a = clone.snapshot) === null || _a === void 0 ? void 0 : _a.id);
                     return {
                         value: snapshot.id,
-                        children: (_jsxs(_Fragment, { children: [snapshot.dataStateAt, " (", formatDistanceToNowStrict(snapshot.dataStateAtDate, {
-                                    addSuffix: true,
-                                }), ")", isLatest && (_jsx("span", { className: classes.snapshotTag, children: "Latest" })), isCurrent && (_jsx("span", { className: classes.snapshotTag, children: "Current" }))] })),
+                        children: (_jsxs(_Fragment, { children: [snapshot.dataStateAt, " (", isValidDate(snapshot.dataStateAtDate) &&
+                                    formatDistanceToNowStrict(snapshot.dataStateAtDate, {
+                                        addSuffix: true,
+                                    }), ")", isLatest && (_jsx("span", { className: classes.snapshotTag, children: "Latest" })), isCurrent && (_jsx("span", { className: classes.snapshotTag, children: "Current" }))] })),
                     };
                 })) !== null && _a !== void 0 ? _a : [], onChange: (e) => setSelectedSnapshotId(e.target.value), fullWidth: true, className: classes.snapshots }), _jsx(SimpleModalControls, { items: [
                     {

package/icons/ArrowDropDown/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 declare type Props = {
     className?: string;
+    onClick?: () => void;
 };
 export declare const ArrowDropDownIcon: (props: Props) => JSX.Element;
 export {};

package/icons/ArrowDropDown/index.js

@@ -1,6 +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", children: _jsx("path", { 
+    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/PostgresSQL/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PostgresSQLIcon: () => JSX.Element;

package/icons/PostgresSQL/index.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PostgresSQLIcon = () => (_jsxs("svg", { className: "postgres-logo", width: "432.071pt", height: "445.383pt", viewBox: "0 0 432.071 445.383", xmlSpace: "preserve", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { id: "orginal", style: {
+                fillRule: 'nonzero',
+                clipRule: 'nonzero',
+                stroke: '#000000',
+                strokeMiterlimit: 4,
+            } }), _jsxs("g", { id: "Layer_x0020_3", style: {
+                fillRule: 'nonzero',
+                clipRule: 'nonzero',
+                stroke: '#FFFFFF',
+                strokeWidth: 12.4651,
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round',
+                strokeMiterlimit: 4,
+            }, children: [_jsx("path", { style: {
+                        fill: '#000000',
+                        stroke: '#000000',
+                        strokeWidth: 37.3953,
+                        strokeLinecap: 'butt',
+                        strokeLinejoin: 'miter',
+                        strokeMiterlimit: 4,
+                    }, d: "M323.205,324.227c2.833-23.601,1.984-27.062,19.563-23.239l4.463,0.392c13.517,0.615,31.199-2.174,41.587-7c22.362-10.376,35.622-27.7,13.572-23.148c-50.297,10.376-53.755-6.655-53.755-6.655c53.111-78.803,75.313-178.836,56.149-203.322    C352.514-5.534,262.036,26.049,260.522,26.869l-0.482,0.089c-9.938-2.062-21.06-3.294-33.554-3.496c-22.761-0.374-40.032,5.967-53.133,15.904c0,0-161.408-66.498-153.899,83.628c1.597,31.936,45.777,241.655,98.47,178.31    c19.259-23.163,37.871-42.748,37.871-42.748c9.242,6.14,20.307,9.272,31.912,8.147l0.897-0.765c-0.281,2.876-0.157,5.689,0.359,9.019c-13.572,15.167-9.584,17.83-36.723,23.416c-27.457,5.659-11.326,15.734-0.797,18.367c12.768,3.193,42.305,7.716,62.268-20.224    l-0.795,3.188c5.325,4.26,4.965,30.619,5.72,49.452c0.756,18.834,2.017,36.409,5.856,46.771c3.839,10.36,8.369,37.05,44.036,29.406c29.809-6.388,52.6-15.582,54.677-101.107" }), _jsx("path", { style: {
+                        fill: '#336791',
+                        stroke: 'none',
+                    }, d: "M402.395,271.23c-50.302,10.376-53.76-6.655-53.76-6.655c53.111-78.808,75.313-178.843,56.153-203.326c-52.27-66.785-142.752-35.2-144.262-34.38l-0.486,0.087c-9.938-2.063-21.06-3.292-33.56-3.496c-22.761-0.373-40.026,5.967-53.127,15.902    c0,0-161.411-66.495-153.904,83.63c1.597,31.938,45.776,241.657,98.471,178.312c19.26-23.163,37.869-42.748,37.869-42.748c9.243,6.14,20.308,9.272,31.908,8.147l0.901-0.765c-0.28,2.876-0.152,5.689,0.361,9.019c-13.575,15.167-9.586,17.83-36.723,23.416    c-27.459,5.659-11.328,15.734-0.796,18.367c12.768,3.193,42.307,7.716,62.266-20.224l-0.796,3.188c5.319,4.26,9.054,27.711,8.428,48.969c-0.626,21.259-1.044,35.854,3.147,47.254c4.191,11.4,8.368,37.05,44.042,29.406c29.809-6.388,45.256-22.942,47.405-50.555    c1.525-19.631,4.976-16.729,5.194-34.28l2.768-8.309c3.192-26.611,0.507-35.196,18.872-31.203l4.463,0.392c13.517,0.615,31.208-2.174,41.591-7c22.358-10.376,35.618-27.7,13.573-23.148z" }), _jsx("path", { d: "M215.866,286.484c-1.385,49.516,0.348,99.377,5.193,111.495c4.848,12.118,15.223,35.688,50.9,28.045c29.806-6.39,40.651-18.756,45.357-46.051c3.466-20.082,10.148-75.854,11.005-87.281" }), _jsx("path", { d: "M173.104,38.256c0,0-161.521-66.016-154.012,84.109c1.597,31.938,45.779,241.664,98.473,178.316c19.256-23.166,36.671-41.335,36.671-41.335" }), _jsx("path", { d: "M260.349,26.207c-5.591,1.753,89.848-34.889,144.087,34.417c19.159,24.484-3.043,124.519-56.153,203.329" }), _jsx("path", { style: {
+                        strokeLinejoin: 'bevel',
+                    }, d: "M348.282,263.953c0,0,3.461,17.036,53.764,6.653c22.04-4.552,8.776,12.774-13.577,23.155c-18.345,8.514-59.474,10.696-60.146-1.069c-1.729-30.355,21.647-21.133,19.96-28.739c-1.525-6.85-11.979-13.573-18.894-30.338    c-6.037-14.633-82.796-126.849,21.287-110.183c3.813-0.789-27.146-99.002-124.553-100.599c-97.385-1.597-94.19,119.762-94.19,119.762" }), _jsx("path", { d: "M188.604,274.334c-13.577,15.166-9.584,17.829-36.723,23.417c-27.459,5.66-11.326,15.733-0.797,18.365c12.768,3.195,42.307,7.718,62.266-20.229c6.078-8.509-0.036-22.086-8.385-25.547c-4.034-1.671-9.428-3.765-16.361,3.994z" }), _jsx("path", { d: "M187.715,274.069c-1.368-8.917,2.93-19.528,7.536-31.942c6.922-18.626,22.893-37.255,10.117-96.339c-9.523-44.029-73.396-9.163-73.436-3.193c-0.039,5.968,2.889,30.26-1.067,58.548c-5.162,36.913,23.488,68.132,56.479,64.938" }), _jsx("path", { style: {
+                        fill: '#FFFFFF',
+                        stroke: '#FFFFFF',
+                        strokeWidth: 4.155,
+                        strokeLinecap: 'butt',
+                        strokeLinejoin: 'miter',
+                    }, d: "M172.517,141.7c-0.288,2.039,3.733,7.48,8.976,8.207c5.234,0.73,9.714-3.522,9.998-5.559c0.284-2.039-3.732-4.285-8.977-5.015c-5.237-0.731-9.719,0.333-9.996,2.367z" }), _jsx("path", { style: {
+                        fill: '#FFFFFF',
+                        strokeWidth: 2.0775,
+                        strokeLinecap: 'butt',
+                        strokeLinejoin: 'miter',
+                    }, d: "M331.941,137.543c0.284,2.039-3.732,7.48-8.976,8.207c-5.238,0.73-9.718-3.522-10.005-5.559c-0.277-2.039,3.74-4.285,8.979-5.015c5.239-0.73,9.718,0.333,10.002,2.368z" }), _jsx("path", { d: "M350.676,123.432c0.863,15.994-3.445,26.888-3.988,43.914c-0.804,24.748,11.799,53.074-7.191,81.435" }), _jsx("path", { style: {
+                        strokeWidth: 3,
+                    }, d: "M0,60.232" })] })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postgres.ai/shared",
-  "version": "3.5.0-pr-1027.1",
+  "version": "4.0.0-pr-1028.1",
   "main": "index.js",
   "types": "index.d.ts",
   "peerDependencies": {

package/pages/Branches/Branch/context.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Api } from './stores/Main';
+export declare type Host = {
+    branchId: string;
+    instanceId: string;
+    routes: {
+        branch: () => string;
+        branches: () => string;
+        snapshot: (snapshotId: string) => string;
+        createClone: (branchId: string) => string;
+    };
+    api: Api;
+    elements: {
+        breadcrumbs: React.ReactNode;
+    };
+};
+export declare const useHost: () => Host, HostProvider: import("react").Provider<Host>;
+export declare const useStores: () => {
+    main: import("./stores/Main").MainStore;
+}, StoresProvider: import("react").Provider<{
+    main: import("./stores/Main").MainStore;
+}>;

package/pages/Branches/Branch/context.js

@@ -0,0 +1,3 @@
+import { createStrictContext } from '@postgres.ai/shared/utils/react';
+export const { useStrictContext: useHost, Provider: HostProvider } = createStrictContext();
+export const { useStrictContext: useStores, Provider: StoresProvider } = createStrictContext();

package/pages/Branches/Branch/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Host } from './context';
+declare type Props = Host & {
+    isPlatform?: boolean;
+};
+export declare const BranchesPage: ((props: Props) => JSX.Element) & {
+    displayName: string;
+};
+export {};

package/pages/Branches/Branch/index.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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, useState } from 'react';
+import { useHistory } from 'react-router';
+import { observer } from 'mobx-react-lite';
+import copyToClipboard from 'copy-to-clipboard';
+import { makeStyles, Button, TextField, IconButton, Table, TableHead, TableRow, TableBody, } from '@material-ui/core';
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
+import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { icons } from '@postgres.ai/shared/styles/icons';
+import { styles } from '@postgres.ai/shared/styles/styles';
+import { DeleteBranchModal } from '@postgres.ai/shared/pages/Branches/components/Modals/DeleteBranchModal';
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer';
+import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils';
+import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight';
+import { getCliBranchListCommand } from '@postgres.ai/shared/pages/CreateBranch/utils';
+import { TableBodyCell, TableBodyCellMenu, TableHeaderCell, } from '@postgres.ai/shared/components/Table';
+import { useCreatedStores } from './useCreatedStores';
+import { InstanceTabs, TABS_INDEX } from "../../Instance/Tabs";
+const useStyles = makeStyles(() => ({
+    wrapper: {
+        display: 'flex',
+        gap: '60px',
+        maxWidth: '100%',
+        fontSize: '14px',
+        marginTop: '20px',
+        '@media (max-width: 1300px)': {
+            flexDirection: 'column',
+            gap: '20px',
+        },
+    },
+    marginTop: {
+        marginTop: '16px',
+    },
+    title: {
+        marginTop: '8px',
+        lineHeight: '26px'
+    },
+    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',
+    },
+    actions: {
+        display: 'flex',
+        marginRight: '-16px',
+    },
+    spinner: {
+        marginLeft: '8px',
+    },
+    actionButton: {
+        marginRight: '16px',
+    },
+    summary: {
+        marginTop: 20,
+    },
+    text: {
+        marginTop: '4px',
+    },
+    cliText: {
+        marginTop: '8px',
+    },
+    paramTitle: {
+        display: 'inline-block',
+        width: 200,
+    },
+    copyFieldContainer: {
+        position: 'relative',
+        display: 'block',
+        maxWidth: 525,
+        width: '100%',
+    },
+    textField: {
+        ...styles.inputField,
+        'max-width': 525,
+        display: 'inline-block',
+        '& .MuiOutlinedInput-input': {
+            paddingRight: '32px!important',
+        },
+    },
+    tableContainer: {
+        position: 'relative',
+        maxWidth: 525,
+        width: '100%',
+    },
+    copyButton: {
+        position: 'absolute',
+        top: 16,
+        right: 0,
+        zIndex: 100,
+        width: 32,
+        height: 32,
+        padding: 8,
+    },
+    pointerCursor: {
+        cursor: 'pointer',
+    },
+}), { index: 1 });
+export const BranchesPage = observer((props) => {
+    const classes = useStyles();
+    const history = useHistory();
+    const stores = useCreatedStores(props);
+    const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false);
+    const { branch, snapshotList, deleteBranch, reload, load, isReloading, isBranchesLoading, getBranchesError, snapshotListError, getBranchError, } = stores.main;
+    const hasBranchError = getBranchesError || getBranchError || snapshotListError;
+    const branchLogLength = snapshotList === null || snapshotList === void 0 ? void 0 : snapshotList.reduce((acc, snapshot) => {
+        var _a;
+        if ((snapshot === null || snapshot === void 0 ? void 0 : snapshot.branch) !== null) {
+            return acc + ((_a = snapshot.branch) === null || _a === void 0 ? void 0 : _a.length);
+        }
+        else {
+            return acc;
+        }
+    }, 0);
+    const headRendered = (_jsxs(_Fragment, { children: [_jsx("style", { children: 'p { margin: 0;}' }), props.elements.breadcrumbs, _jsx(SectionTitle, { className: classes.title, tag: "h1", level: 1, text: `Branch ${props.branchId}`, children: _jsx(InstanceTabs, { tab: TABS_INDEX.BRANCHES, isPlatform: props.isPlatform, instanceId: props.instanceId, hasLogs: props.api.initWS !== undefined }) })] }));
+    useEffect(() => {
+        load(props.branchId, props.instanceId);
+    }, []);
+    if (isBranchesLoading)
+        return _jsx(PageSpinner, {});
+    if (hasBranchError) {
+        return (_jsxs(_Fragment, { children: [headRendered, _jsx(ErrorStub, { title: (getBranchesError === null || getBranchesError === void 0 ? void 0 : getBranchesError.title) ||
+                        (getBranchError === null || getBranchError === void 0 ? void 0 : getBranchError.title) ||
+                        (snapshotListError === null || snapshotListError === void 0 ? void 0 : snapshotListError.title), message: (getBranchesError === null || getBranchesError === void 0 ? void 0 : getBranchesError.message) ||
+                        (getBranchError === null || getBranchError === void 0 ? void 0 : getBranchError.message) ||
+                        (snapshotListError === null || snapshotListError === void 0 ? void 0 : snapshotListError.message), className: classes.marginTop })] }));
+    }
+    return (_jsxs(_Fragment, { children: [headRendered, _jsxs("div", { className: classes.wrapper, children: [_jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.actions, children: [_jsx(Button, { variant: "contained", color: "primary", onClick: () => history.push(props.routes.createClone(props.branchId)), disabled: isReloading, title: 'Create clone', className: classes.actionButton, children: "Create clone" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => setIsOpenDestroyModal(true), disabled: isReloading, title: 'Delete this branch', className: classes.actionButton, children: "Delete branch" }), _jsxs(Button, { variant: "outlined", color: "secondary", onClick: () => reload(props.branchId, props.instanceId), disabled: isReloading, title: 'Refresh branch information', className: classes.actionButton, children: ["Reload info", isReloading && _jsx(Spinner, { size: "sm", className: classes.spinner })] })] }), _jsx("br", {}), _jsxs("div", { children: [_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 branch."] }), children: icons.infoIcon })] }), _jsx("p", { className: classes.text, children: (branch === null || branch === void 0 ? void 0 : branch.dataStateAt) || '-' })] }), _jsxs("div", { className: classes.summary, children: [_jsxs("p", { children: [_jsx("strong", { children: "Summary" }), "\u00A0"] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Branch name:" }), branch === null || branch === void 0 ? void 0 : branch.name] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Parent branch:" }), branch === null || branch === void 0 ? void 0 : branch.parent] })] }), _jsx("br", {}), _jsx("p", { children: _jsx("strong", { children: "Snapshot info" }) }), _jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", label: "Snapshot ID", value: branch === null || branch === void 0 ? void 0 : branch.snapshotID, className: classes.textField, margin: "normal", fullWidth: true, InputLabelProps: {
+                                                    shrink: true,
+                                                    style: styles.inputFieldLabel,
+                                                }, FormHelperTextProps: {
+                                                    style: styles.inputFieldHelper,
+                                                } }), _jsx(IconButton, { className: classes.copyButton, "aria-label": "Copy", onClick: () => copyToClipboard(String(branch === null || branch === void 0 ? void 0 : branch.snapshotID)), children: icons.copyIcon })] }), _jsx("br", {}), Number(branchLogLength) > 0 && (_jsxs(_Fragment, { children: [_jsxs("strong", { children: ["Branch log (", branchLogLength, ")"] }), _jsx(HorizontalScrollContainer, { children: _jsxs(Table, { className: classes.tableContainer, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Name" }), _jsx(TableHeaderCell, { children: "Snapshot ID" }), _jsx(TableHeaderCell, { children: "Data state at" }), _jsx(TableHeaderCell, { children: "Message" })] }) }), snapshotList === null || snapshotList === void 0 ? void 0 : snapshotList.map((snapshot, id) => {
+                                                            var _a;
+                                                            return (_jsx(TableBody, { children: (_a = snapshot === null || snapshot === void 0 ? void 0 : snapshot.branch) === null || _a === void 0 ? void 0 : _a.map((item, id) => {
+                                                                    var _a;
+                                                                    return (_jsxs(TableRow, { hover: true, className: classes.pointerCursor, onClick: () => generateSnapshotPageId(snapshot.id) &&
+                                                                            history.push(props.routes.snapshot(generateSnapshotPageId(snapshot.id) || '')), children: [_jsx(TableBodyCellMenu, { actions: [
+                                                                                    {
+                                                                                        name: 'Copy branch name',
+                                                                                        onClick: () => copyToClipboard(item),
+                                                                                    },
+                                                                                    {
+                                                                                        name: 'Copy snapshot ID',
+                                                                                        onClick: () => copyToClipboard(snapshot.id || ''),
+                                                                                    },
+                                                                                ] }), _jsx(TableBodyCell, { children: item }), _jsx(TableBodyCell, { children: snapshot.id || '-' }), _jsx(TableBodyCell, { children: snapshot.dataStateAt || '-' }), _jsx(TableBodyCell, { children: (_a = snapshot.message) !== null && _a !== void 0 ? _a : '-' })] }, id));
+                                                                }) }, id));
+                                                        })] }) })] }))] })] }), _jsxs("div", { className: classes.snippetContainer, children: [_jsx(SectionTitle, { className: classes.marginTop, tag: "h2", level: 2, text: 'Delete branch using CLI' }), _jsx("p", { className: classes.cliText, children: "You can delete this branch using CLI. To do this, run the command below:" }), _jsx(SyntaxHighlight, { content: `dblab branch delete ${props.branchId}` }), _jsx(SectionTitle, { className: classes.marginTop, tag: "h2", level: 2, text: 'Get branches using CLI' }), _jsx("p", { className: classes.marginTop, children: "To list all branches using CLI, copy and paste it into your terminal." }), _jsx(SyntaxHighlight, { content: getCliBranchListCommand() }), _jsx(SectionTitle, { className: classes.marginTop, tag: "h2", level: 2, text: 'Get snapshots for this branch using CLI' }), _jsx("p", { className: classes.cliText, children: "You can get a list of snapshots for this branch using CLI. To do this, run the command below:" }), _jsx(SyntaxHighlight, { content: `dblab branch log ${props.branchId}` })] }), _jsx(DeleteBranchModal, { isOpen: isOpenDestroyModal, onClose: () => setIsOpenDestroyModal(false), deleteBranch: deleteBranch, branchName: props.branchId, instanceId: props.instanceId, afterSubmitClick: () => {
+                            stores.main.reload(props.branchId, props.instanceId);
+                            history.push(props.routes.branches());
+                        } })] })] }));
+});

package/pages/Branches/Branch/stores/Main.d.ts

@@ -0,0 +1,37 @@
+import { GetBranches } from '@postgres.ai/shared/types/api/endpoints/getBranches';
+import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches';
+import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch';
+import { SnapshotList, GetSnapshotList } from '@postgres.ai/shared/types/api/endpoints/getSnapshotList';
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS';
+declare type Error = {
+    title?: string;
+    message: string;
+};
+export declare type Api = {
+    getBranches: GetBranches;
+    deleteBranch: DeleteBranch;
+    getSnapshotList: GetSnapshotList;
+    initWS: InitWS;
+};
+export declare class MainStore {
+    getBranchError: Error | null;
+    snapshotListError: Error | null;
+    getBranchesError: Error | null;
+    isReloading: boolean;
+    isBranchesLoading: boolean;
+    branches: Branch[] | null;
+    branch: Branch | null;
+    snapshotList: SnapshotList[] | null;
+    private readonly api;
+    constructor(api: Api);
+    load: (branchId: string, instanceId: string) => Promise<void>;
+    reload: (branchId: string, instanceId: string) => Promise<void>;
+    getBranches: (branchId: string, instanceId: string) => Promise<Branch[] | null | undefined>;
+    getBranch: (branchId: string, instanceId: string) => Promise<boolean>;
+    deleteBranch: (branchName: string, instanceId: string) => Promise<{
+        response: Response | null;
+        error: globalThis.Error | null;
+    } | undefined>;
+    getSnapshotList: (branchName: string, instanceId: string) => Promise<SnapshotList[] | null | undefined>;
+}
+export {};

package/pages/Branches/Branch/stores/Main.js

@@ -0,0 +1,90 @@
+/*--------------------------------------------------------------------------
+ * 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';
+export class MainStore {
+    constructor(api) {
+        this.getBranchError = null;
+        this.snapshotListError = null;
+        this.getBranchesError = null;
+        this.isReloading = false;
+        this.isBranchesLoading = false;
+        this.branches = null;
+        this.branch = null;
+        this.snapshotList = null;
+        this.load = async (branchId, instanceId) => {
+            if (!branchId)
+                return;
+            this.isBranchesLoading = true;
+            await this.getBranches(branchId, instanceId);
+        };
+        this.reload = async (branchId, instanceId) => {
+            if (!branchId)
+                return;
+            this.isReloading = true;
+            await this.getBranches(branchId, instanceId);
+            this.isReloading = false;
+        };
+        this.getBranches = async (branchId, instanceId) => {
+            if (!this.api.getBranches)
+                return;
+            const { response, error } = await this.api.getBranches(instanceId);
+            if (error) {
+                this.isBranchesLoading = false;
+                this.getBranchesError = await error.json().then((err) => err);
+            }
+            if (response) {
+                this.branches = response;
+                this.getBranch(branchId, instanceId);
+            }
+            return response;
+        };
+        this.getBranch = async (branchId, instanceId) => {
+            var _a;
+            const currentBranch = (_a = this.branches) === null || _a === void 0 ? void 0 : _a.filter((s) => {
+                return s.name === branchId;
+            });
+            if (currentBranch && (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.length) > 0) {
+                this.branch = currentBranch[0];
+                this.getSnapshotList(currentBranch[0].name, instanceId);
+            }
+            else {
+                this.getBranchError = {
+                    title: 'Error',
+                    message: `Branch "${branchId}" not found`,
+                };
+                this.isBranchesLoading = false;
+            }
+            return !!currentBranch;
+        };
+        this.deleteBranch = async (branchName, instanceId) => {
+            var _a;
+            if (!branchName)
+                return;
+            const { response, error } = await this.api.deleteBranch(branchName, instanceId);
+            if (response) {
+                this.branches =
+                    ((_a = this.branches) === null || _a === void 0 ? void 0 : _a.filter((branch) => branch.name !== branchName)) || [];
+            }
+            return { response, error };
+        };
+        this.getSnapshotList = async (branchName, instanceId) => {
+            if (!this.api.getSnapshotList)
+                return;
+            const { response, error } = await this.api.getSnapshotList(branchName, instanceId);
+            this.isBranchesLoading = false;
+            if (error) {
+                this.snapshotListError = await error.json().then((err) => err);
+            }
+            if (response) {
+                this.snapshotList = response;
+            }
+            return response;
+        };
+        this.api = api;
+        makeAutoObservable(this);
+    }
+}

package/pages/Branches/Branch/useCreatedStores.d.ts

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

package/pages/Branches/Branch/useCreatedStores.js

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

package/pages/Branches/components/BranchesTable/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches';
+import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch';
+export declare const BranchesTable: ({ branches, emptyTableText, deleteBranch, branchesRoute, reloadBranches, }: {
+    branches: Branch[];
+    emptyTableText: string;
+    deleteBranch: DeleteBranch;
+    branchesRoute: string;
+    reloadBranches: () => void;
+}) => JSX.Element;

package/pages/Branches/components/BranchesTable/index.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 cn from 'classnames';
+import { useEffect, useState } from 'react';
+import copy from 'copy-to-clipboard';
+import { makeStyles } from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { isValidDate } from '@postgres.ai/shared/utils/date';
+import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown';
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer';
+import { useHost } from '@postgres.ai/shared/pages/Instance/context';
+import { Table, TableHead, TableRow, TableBody, TableHeaderCell, TableBodyCell, TableBodyCellMenu, } from '@postgres.ai/shared/components/Table';
+import { DeleteBranchModal } from '../Modals/DeleteBranchModal';
+const useStyles = makeStyles({
+    cellContentCentered: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    pointerCursor: {
+        cursor: 'pointer',
+    },
+    sortIcon: {
+        marginLeft: '8px',
+        width: '10px',
+    },
+    interactiveRow: {
+        cursor: 'pointer',
+    },
+    verticalCentered: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    marginTop: {
+        marginTop: '16px',
+    },
+    sortIconUp: {
+        transform: 'rotate(180deg)',
+    },
+}, { index: 1 });
+export const BranchesTable = ({ branches, emptyTableText, deleteBranch, branchesRoute, reloadBranches, }) => {
+    var _a;
+    const host = useHost();
+    const history = useHistory();
+    const classes = useStyles();
+    const [state, setState] = useState({
+        sortByParent: 'desc',
+        branches: [],
+    });
+    const [branchId, setBranchId] = useState('');
+    const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false);
+    const handlesortByParent = () => {
+        const sortByParent = state.sortByParent === 'desc' ? 'asc' : 'desc';
+        const sortedBranches = [...state.branches].sort((a, b) => {
+            if (sortByParent === 'asc') {
+                return a.parent.localeCompare(b.parent);
+            }
+            else {
+                return b.parent.localeCompare(a.parent);
+            }
+        });
+        setState({
+            sortByParent,
+            branches: sortedBranches,
+        });
+    };
+    useEffect(() => {
+        setState({
+            sortByParent: 'desc',
+            branches: branches !== null && branches !== void 0 ? branches : [],
+        });
+    }, [branches]);
+    if (!state.branches.length) {
+        return _jsx("p", { className: classes.marginTop, children: emptyTableText });
+    }
+    return (_jsx(HorizontalScrollContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Branch" }), _jsx(TableHeaderCell, { children: _jsxs("div", { onClick: handlesortByParent, className: cn(classes.interactiveRow, classes.verticalCentered), children: ["Parent", _jsx(ArrowDropDownIcon, { className: cn(state.sortByParent === 'asc' && classes.sortIconUp, classes.sortIcon) })] }) }), _jsx(TableHeaderCell, { children: "Data state time" }), _jsx(TableHeaderCell, { children: "Latest Snapshot ID" }), _jsx(TableHeaderCell, { children: "Number of snapshots" })] }) }), _jsx(TableBody, { children: (_a = state.branches) === null || _a === void 0 ? void 0 : _a.map((branch) => {
+                        const branchPagePath = host.routes.branch(branch.name);
+                        return (_jsxs(TableRow, { hover: true, onClick: () => history.push(branchPagePath), className: classes.pointerCursor, children: [_jsx(TableBodyCellMenu, { actions: [
+                                        {
+                                            name: 'Copy snapshot ID',
+                                            onClick: () => copy(branch.snapshotID),
+                                        },
+                                        {
+                                            name: 'Delete branch',
+                                            onClick: () => {
+                                                setBranchId(branch.name);
+                                                setIsOpenDestroyModal(true);
+                                            },
+                                        },
+                                    ] }), _jsx(TableBodyCell, { children: branch.name }), _jsx(TableBodyCell, { children: branch.parent }), _jsxs(TableBodyCell, { children: [branch.dataStateAt, " (", isValidDate(new Date(branch.dataStateAt))
+                                            ? formatDistanceToNowStrict(new Date(branch.dataStateAt), {
+                                                addSuffix: true,
+                                            })
+                                            : '-', ")"] }), _jsx(TableBodyCell, { children: branch.snapshotID }), _jsx(TableBodyCell, { children: branch.numSnapshots })] }, branch.name));
+                    }) }), _jsx(DeleteBranchModal, { isOpen: isOpenDestroyModal, onClose: () => {
+                        setIsOpenDestroyModal(false);
+                        setBranchId('');
+                    }, deleteBranch: deleteBranch, branchName: branchId, instanceId: host.instanceId, afterSubmitClick: () => {
+                        reloadBranches();
+                        history.push(branchesRoute);
+                    } })] }) }));
+};