Merge branch 'ce-ui-fixes' into 'dle-4-0'

feat (UI): Create clone button added to snapshots and branches pages, "data state at" changed to "Snapshot" on create clone page, platform EE UI bug fix

See merge request postgres-ai/database-lab!1001

Author: Bogdan Tsechoev

ui/packages/ce/src/App/Instance/Branches/Branch/index.tsx

@@ -49,6 +49,7 @@ export const Branch = () => {
           branches: () => ROUTES.INSTANCE.BRANCHES.BRANCHES.path,
           snapshot: (snapshotId: string) =>
             ROUTES.INSTANCE.SNAPSHOTS.SNAPSHOT.createPath(snapshotId),
+          createClone: () => ROUTES.INSTANCE.CLONES.CREATE.path,
         }}
       />
     </PageContainer>

ui/packages/ce/src/App/Instance/Snapshots/Snapshot/index.tsx

@@ -50,6 +50,7 @@ export const Snapshot = () => {
             ROUTES.INSTANCE.BRANCHES.BRANCH.createPath(branchName),
           clone: (cloneId: string) =>
             ROUTES.INSTANCE.CLONES.CLONE.createPath(cloneId),
+          createClone: () => ROUTES.INSTANCE.CLONES.CREATE.path,
         }}
         api={api}
         elements={elements}

ui/packages/platform/src/api/clones/createClone.ts

@@ -9,6 +9,7 @@ type Req = {
   dbUser: string
   dbPassword: string
   isProtected: boolean
+  branch?: string
 }
 
 export const createClone = async (req: Req) => {
@@ -19,6 +20,7 @@ export const createClone = async (req: Req) => {
       action: '/clone',
       method: 'post',
       data: {
+        branch: req.branch,
         id: req.cloneId,
         snapshot: {
           id: req.snapshotId,

ui/packages/platform/src/pages/Branch/index.tsx

@@ -52,6 +52,17 @@ export const Branch = () => {
             instanceId: params.instanceId,
             snapshotId,
           }),
+    createClone: () =>
+      params.project
+        ? ROUTES.ORG.PROJECT.INSTANCES.INSTANCE.CLONES.ADD.createPath({
+            org: params.org,
+            project: params.project,
+            instanceId: params.instanceId,
+        })
+        : ROUTES.ORG.INSTANCES.INSTANCE.CLONES.ADD.createPath({
+            org: params.org,
+            instanceId: params.instanceId,
+        }),
   }
 
   const api = {

ui/packages/platform/src/pages/CreateClone/index.tsx

@@ -7,6 +7,7 @@ import { getInstance } from 'api/instances/getInstance'
 import { getSnapshots } from 'api/snapshots/getSnapshots'
 import { createClone } from 'api/clones/createClone'
 import { getClone } from 'api/clones/getClone'
+import { getBranches } from 'api/branches/getBranches'
 import { ConsoleBreadcrumbsWrapper } from 'components/ConsoleBreadcrumbs/ConsoleBreadcrumbsWrapper'
 
 type Params = {
@@ -38,6 +39,7 @@ export const CreateClone = () => {
     getInstance,
     createClone,
     getClone,
+    getBranches
   }
 
   const elements = {

ui/packages/platform/src/pages/Snapshot/index.tsx

@@ -62,6 +62,17 @@ export const Snapshot = () => {
             cloneId: cloneId,
             instanceId: params.instanceId,
           }),
+    createClone: () =>
+      params.project
+        ? ROUTES.ORG.PROJECT.INSTANCES.INSTANCE.CLONES.ADD.createPath({
+            org: params.org,
+            project: params.project,
+            instanceId: params.instanceId,
+          })
+        : ROUTES.ORG.INSTANCES.INSTANCE.CLONES.ADD.createPath({
+            org: params.org,
+            instanceId: params.instanceId,
+        }),
   }
 
   const api = {

ui/packages/shared/pages/Branches/Branch/context.ts

@@ -10,6 +10,7 @@ export type Host = {
     branch: () => string
     branches: () => string
     snapshot: (snapshotId: string) => string
+    createClone: () => string
   }
   api: Api
   elements: {

ui/packages/shared/pages/Branches/Branch/index.tsx

@@ -214,6 +214,16 @@ export const BranchesPage = observer((props: Props) => {
       <div className={classes.wrapper}>
         <div className={classes.container}>
           <div className={classes.actions}>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={() => history.push(props.routes.createClone())}
+              disabled={isReloading}
+              title={'Create clone'}
+              className={classes.actionButton}
+            >
+              Create clone
+            </Button>
             <Button
               variant="contained"
               color="primary"

ui/packages/shared/pages/CreateClone/index.tsx

@@ -214,7 +214,7 @@ export const CreateClone = observer((props: Props) => {
 
             <Select
               fullWidth
-              label="Data state time *"
+              label="Snapshot *"
               value={formik.values.snapshotId}
               disabled={!snapshots || isCreatingClone}
               onChange={(e) =>
@@ -228,12 +228,12 @@ export const CreateClone = observer((props: Props) => {
                     value: snapshot.id,
                     children: (
                       <div className={styles.snapshotItem}>
-                        <span>
-                          {snapshot.dataStateAt}
-                          {isLatest && (
-                            <span className={styles.snapshotTag}>Latest</span>
-                          )}
-                        </span>
+                        <strong className={styles.snapshotOverflow}>
+                          {snapshot?.id} {isLatest && <span>Latest</span>}
+                        </strong>
+                        {snapshot?.dataStateAt && (
+                          <p>Data state at: {snapshot?.dataStateAt}</p>
+                        )}
                         {snapshot.message && (
                           <span>Message: {snapshot.message}</span>
                         )}

ui/packages/shared/pages/CreateClone/styles.module.scss

@@ -101,3 +101,9 @@
 .elapsedTime {
   margin-left: 24px;
 }
+
+.snapshotOverflow {
+  width: 100%;
+  word-wrap: break-word;
+  white-space: initial;
+}

ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsList/index.tsx

@@ -6,7 +6,7 @@ import copy from 'copy-to-clipboard'
 import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
 import { DestroySnapshotModal } from '@postgres.ai/shared/pages/Snapshots/Snapshot/DestorySnapshotModal'
 import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+import { useHost, useStores } from '@postgres.ai/shared/pages/Instance/context'
 import { IconButton } from '@mui/material'
 import { icons } from '@postgres.ai/shared/styles/icons'
 import { RowMenu } from '@postgres.ai/shared/components/Table/RowMenu'
@@ -131,6 +131,9 @@ const SnapshotListItem = ({
   const classes = useStyles()
   const timeAgo = formatDistanceToNowStrict(snapshot.createdAtDate)
 
+  const history = useHistory()
+  const host = useHost()
+
   return (
     <div className={classes.commitItem}>
       <div className={classes.gridContainer}>
@@ -185,14 +188,18 @@ const SnapshotListItem = ({
                   name: 'Show related clones',
                   onClick: () => openClonesModal(),
                 },
+                {
+                  name: 'Create new clone',
+                  onClick: () => history.push(host.routes.createClone()),
+                },
                 {
                   name: 'Delete snapshot',
                   onClick: () =>
                     setSnapshotModal({
                       isOpen: true,
                       snapshotId: snapshot.id,
                     }),
-                },
+                }
               ]}
             />
           </div>

ui/packages/shared/pages/Snapshots/Snapshot/context.ts

@@ -11,6 +11,7 @@ export type Host = {
     snapshots: () => string
     branch: (branchName: string) => string
     clone: (cloneId: string) => string
+    createClone: () => string
   }
   api: Api
   elements: {

ui/packages/shared/pages/Snapshots/Snapshot/index.tsx

@@ -205,6 +205,15 @@ export const SnapshotPage = observer((props: Props) => {
       <div className={classes.wrapper}>
         <div className={classes.container}>
           <div className={classes.actions}>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={() => history.push(props.routes.createClone())}
+              title={'Create clone'}
+              className={classes.actionButton}
+            >
+              Create clone
+            </Button>
             <Button
               variant="contained"
               color="primary"