Merge branch 'dle-4-0-bug-fixing' into 'dle-4-0'

fix(ui): DBLab Engine 4 UI fixes

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

Author: bogdan-ts

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

@@ -1,6 +1,6 @@
 import { getBranches } from 'api/branches/getBranches'
 import { createBranch } from 'api/branches/createBranch'
-import { getBranchSnapshots } from 'api/snapshots/getBranchSnapshots'
+import { getSnapshots } from 'api/snapshots/getSnapshots'
 
 import { CreateBranchPage } from '@postgres.ai/shared/pages/CreateBranch'
 
@@ -12,7 +12,7 @@ export const CreateBranch = () => {
   const api = {
     getBranches,
     createBranch,
-    getBranchSnapshots,
+    getSnapshots,
   }
 
   const elements = {
@@ -29,7 +29,7 @@ export const CreateBranch = () => {
 
   return (
     <PageContainer>
-      <CreateBranchPage api={api} elements={elements} />
+      <CreateBranchPage instanceId={''} api={api} elements={elements} />
     </PageContainer>
   )
 }

ui/packages/ce/src/App/Instance/Clones/CreateClone/index.tsx

@@ -8,7 +8,7 @@ import { getInstanceRetrieval } from 'api/instances/getInstanceRetrieval'
 import { createClone } from 'api/clones/createClone'
 import { getClone } from 'api/clones/getClone'
 import { getBranches } from 'api/branches/getBranches'
-import { getBranchSnapshots } from 'api/snapshots/getBranchSnapshots'
+import { getSnapshots } from 'api/snapshots/getSnapshots'
 
 export const CreateClone = () => {
   const routes = {
@@ -22,7 +22,7 @@ export const CreateClone = () => {
     createClone,
     getClone,
     getBranches,
-    getBranchSnapshots,
+    getSnapshots,
   }
 
   const elements = {

ui/packages/ce/src/api/snapshots/getBranchSnapshots.ts

@@ -28,6 +28,7 @@ import { getCliBranchListCommand, getCliCreateBranchCommand } from './utils'
 import { Snapshot } from 'types/api/entities/snapshot'
 
 interface CreateBranchProps {
+  instanceId: string
   api: MainStoreApi
   elements: {
     breadcrumbs: React.ReactNode
@@ -91,7 +92,7 @@ const useStyles = makeStyles(
 )
 
 export const CreateBranchPage = observer(
-  ({ api, elements }: CreateBranchProps) => {
+  ({ instanceId, api, elements }: CreateBranchProps) => {
     const stores = useCreatedStores(api)
     const classes = useStyles()
     const history = useHistory()
@@ -105,8 +106,8 @@ export const CreateBranchPage = observer(
       createBranchError,
       isBranchesLoading,
       isCreatingBranch,
-      getBranchSnapshots,
-      branchSnapshotsError,
+      getSnapshots,
+      snapshotsError,
     } = stores.main
 
     const handleSubmit = async (values: CreateBranchFormValues) => {
@@ -117,23 +118,28 @@ export const CreateBranchPage = observer(
       })
     }
 
-    const handleParentBranchChange = async (
-      e: React.ChangeEvent<HTMLInputElement>,
-    ) => {
-      const branchName = e.target.value
-      formik.setFieldValue('baseBranch', branchName)
-      await getBranchSnapshots(branchName).then((response) => {
+    const fetchSnapshots = async (branchName: string) => {
+      await getSnapshots(instanceId, branchName).then((response) => {
         if (response) {
           setBranchSnapshots(response)
           formik.setFieldValue('snapshotID', response[0]?.id)
         }
       })
     }
 
+    const handleParentBranchChange = async (
+      e: React.ChangeEvent<HTMLInputElement>,
+    ) => {
+      const branchName = e.target.value
+      formik.setFieldValue('baseBranch', branchName)
+      await fetchSnapshots(branchName)
+    }
+
     const [{ formik }] = useForm(handleSubmit)
 
     useEffect(() => {
       load()
+      fetchSnapshots(formik.values.baseBranch)
     }, [formik.values.baseBranch])
 
     if (isBranchesLoading) {
@@ -146,12 +152,10 @@ export const CreateBranchPage = observer(
         <div className={classes.wrapper}>
           <div className={classes.container}>
             <SectionTitle tag="h1" level={1} text="Create branch" />
-            {(branchSnapshotsError || getBranchesError) && (
+            {(snapshotsError || getBranchesError) && (
               <div className={classes.marginTop}>
                 <ErrorStub
-                  message={
-                    branchSnapshotsError?.message || getBranchesError?.message
-                  }
+                  message={snapshotsError?.message || getBranchesError?.message}
                 />
               </div>
             )}

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

@@ -13,7 +13,7 @@ import {
   CreateBranchFormValues,
 } from '@postgres.ai/shared/types/api/endpoints/createBranch'
 import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches'
-import { GetBranchSnapshots } from 'types/api/endpoints/getBranchSnapshots'
+import { GetSnapshots } from 'types/api/endpoints/getSnapshots'
 
 type Error = {
   title?: string
@@ -23,11 +23,11 @@ type Error = {
 export type MainStoreApi = {
   getBranches: GetBranches
   createBranch: CreateBranch
-  getBranchSnapshots: GetBranchSnapshots
+  getSnapshots: GetSnapshots
 }
 
 export class MainStore {
-  branchSnapshotsError: Error | null = null
+  snapshotsError: Error | null = null
   getBranchesError: Error | null = null
   createBranchError: Error | null = null
 
@@ -78,13 +78,16 @@ export class MainStore {
     return response
   }
 
-  getBranchSnapshots = async (branchName: string) => {
-    if (!this.api.getBranchSnapshots) return
+  getSnapshots = async (instanceId: string, branchName?: string) => {
+    if (!this.api.getSnapshots) return
 
-    const { response, error } = await this.api.getBranchSnapshots(branchName)
+    const { response, error } = await this.api.getSnapshots({
+      instanceId,
+      branchName,
+    })
 
     if (error) {
-      this.branchSnapshotsError = await error.json().then((err) => err)
+      this.snapshotsError = await error.json().then((err) => err)
     }
 
     return response

ui/packages/shared/pages/CreateBranch/stores/Main.ts

@@ -75,7 +75,7 @@ export const CreateClone = observer((props: Props) => {
 
   const fetchBranchSnapshotsData = async (branchName: string) => {
     const snapshotsRes =
-      (await stores.main.getBranchSnapshots(branchName)) ?? []
+      (await stores.main.getSnapshots(props.instanceId, branchName)) ?? []
     setSnapshots(snapshotsRes)
     formik.setFieldValue('snapshotId', snapshotsRes[0]?.id)
   }
@@ -86,7 +86,7 @@ export const CreateClone = observer((props: Props) => {
     const selectedBranch = e.target.value
     formik.setFieldValue('branch', selectedBranch)
 
-    if (props.api.getBranchSnapshots) {
+    if (props.api.getSnapshots) {
       await fetchBranchSnapshotsData(selectedBranch)
     }
   }
@@ -103,7 +103,7 @@ export const CreateClone = observer((props: Props) => {
       setBranchesList(branches.map((branch) => branch.name))
       formik.setFieldValue('branch', initiallySelectedBranch)
 
-      if (props.api.getBranchSnapshots) {
+      if (props.api.getSnapshots) {
         await fetchBranchSnapshotsData(initiallySelectedBranch)
       } else {
         const allSnapshots = stores.main?.snapshots?.data ?? []
@@ -154,7 +154,7 @@ export const CreateClone = observer((props: Props) => {
   if (
     stores.main.instanceError ||
     stores.main.getBranchesError ||
-    stores.main.getBranchSnapshotsError ||
+    stores.main.getSnapshotsError ||
     stores.main?.snapshots?.error
   )
     return (
@@ -165,7 +165,7 @@ export const CreateClone = observer((props: Props) => {
           message={
             stores.main.instanceError ||
             stores.main.getBranchesError?.message ||
-            stores.main.getBranchSnapshotsError?.message ||
+            stores.main.getSnapshotsError?.message ||
             (stores.main?.snapshots?.error as string)
           }
         />

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

@@ -6,7 +6,7 @@ import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance
 import { CreateClone } from '@postgres.ai/shared/types/api/endpoints/createClone'
 import { GetClone } from '@postgres.ai/shared/types/api/endpoints/getClone'
 import { GetBranches } from '@postgres.ai/shared/types/api/endpoints/getBranches'
-import { GetBranchSnapshots } from '@postgres.ai/shared/types/api/endpoints/getBranchSnapshots'
+import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots'
 import {
   SnapshotsStore,
   SnapshotsApi,
@@ -23,14 +23,14 @@ export type MainStoreApi = SnapshotsApi & {
   createClone: CreateClone
   getClone: GetClone
   getBranches?: GetBranches
-  getBranchSnapshots?: GetBranchSnapshots
+  getSnapshots?: GetSnapshots
 }
 
 export class MainStore {
   instance: Instance | null = null
   instanceError: string | null = null
   getBranchesError: Error | null = null
-  getBranchSnapshotsError: Error | null = null
+  getSnapshotsError: Error | null = null
 
   clone: Clone | null = null
   cloneError: string | null = null
@@ -45,7 +45,7 @@ export class MainStore {
     makeAutoObservable(this)
 
     this.api = api
-    if (!api.getBranchSnapshots) {
+    if (!api.getSnapshots) {
       this.snapshots = new SnapshotsStore(api)
     }
   }
@@ -100,12 +100,14 @@ export class MainStore {
     return response
   }
 
-  getBranchSnapshots = async (branchId: string) => {
-    if (!this.api.getBranchSnapshots) return
-    const { response, error } = await this.api.getBranchSnapshots(branchId)
+  getSnapshots = async (instanceId: string, branchName?: string) => {
+    if (!this.api.getSnapshots) return
+    const { response, error } = await this.api.getSnapshots({
+      instanceId,
+      branchName,
+    })
 
-    if (error)
-      this.getBranchSnapshotsError = await error.json().then((err) => err)
+    if (error) this.getSnapshotsError = await error.json().then((err) => err)
 
     return response
   }

ui/packages/shared/pages/CreateClone/stores/Main.ts

@@ -134,7 +134,7 @@ const SnapshotListItem = ({
     <div className={classes.commitItem}>
       <div className={classes.gridContainer}>
         <div className={classes.infoBlock}>
-          <div className={classes.header}>{snapshot.message}</div>
+          <div className={classes.header}>{snapshot.message || '-'}</div>
           <div className={classes.infoContent} title={snapshot.dataStateAt}>
             {timeAgo} ago
           </div>

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

@@ -58,8 +58,12 @@ export const Snapshots = observer(() => {
   const filteredSnapshots = useMemo(() => {
     if (!snapshots.data) return []
 
+    if (!messageFilter.trim()) {
+      return snapshots.data
+    }
+
     return snapshots.data.filter((snapshot) =>
-      snapshot.message.toLowerCase().includes(messageFilter.toLowerCase()),
+      snapshot?.message?.toLowerCase()?.includes(messageFilter.toLowerCase()),
     )
   }, [snapshots.data, messageFilter])