fix(UI): Pre-filling branch and snapshot when creating a clone from a branch or snapshot

Author: Bogdan Tsechoev

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

@@ -49,7 +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,
+          createClone: (branchId: string) => ROUTES.INSTANCE.CLONES.CREATE.createPath(branchId),
         }}
       />
     </PageContainer>

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

@@ -50,7 +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,
+          createClone: (branchId: string, snapshotId: string) => ROUTES.INSTANCE.CLONES.CREATE.createPath(branchId, snapshotId),
         }}
         api={api}
         elements={elements}

ui/packages/ce/src/config/routes.tsx

@@ -73,6 +73,15 @@ export const ROUTES = {
       CREATE: {
         name: 'Create clone',
         path: `/instance/clones/create`,
+        createPath: (branchId?: string, snapshotId?: string) => {
+          const params = new URLSearchParams();
+
+          if (branchId) params.set('branch_id', branchId);
+          if (snapshotId) params.set('snapshot_id', snapshotId);
+
+          const query = params.toString();
+          return `/instance/clones/create${query ? `?${query}` : ''}`;
+        }
       },
 
       CLONES: {

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

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

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

@@ -217,7 +217,7 @@ export const BranchesPage = observer((props: Props) => {
             <Button
               variant="contained"
               color="primary"
-              onClick={() => history.push(props.routes.createClone())}
+              onClick={() => history.push(props.routes.createClone(props.branchId))}
               disabled={isReloading}
               title={'Create clone'}
               className={classes.actionButton}

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

@@ -73,11 +73,13 @@ export const CreateClone = observer((props: Props) => {
     }
   }
 
-  const fetchBranchSnapshotsData = async (branchName: string) => {
-    const snapshotsRes =
-      (await stores.main.getSnapshots(props.instanceId, branchName)) ?? []
+  const fetchBranchSnapshotsData = async (branchName: string, initialSnapshotId?: string) => {
+    const snapshotsRes = (await stores.main.getSnapshots(props.instanceId, branchName)) ?? []
     setSnapshots(snapshotsRes)
-    formik.setFieldValue('snapshotId', snapshotsRes[0]?.id)
+
+    const selectedSnapshot = snapshotsRes.find(s => s.id === initialSnapshotId) || snapshotsRes[0]
+
+    formik.setFieldValue('snapshotId', selectedSnapshot?.id)
   }
 
   const handleSelectBranch = async (
@@ -93,24 +95,30 @@ export const CreateClone = observer((props: Props) => {
 
   const formik = useForm(onSubmit)
 
-  const fetchData = async () => {
+  const fetchData = async (initialBranch?: string, initialSnapshotId?: string) => {
     try {
       setIsLoadingSnapshots(true)
       await stores.main.load(props.instanceId)
 
       const branches = (await stores.main.getBranches(props.instanceId)) ?? []
-      const initiallySelectedBranch = branches[0]?.name
+
+      let initiallySelectedBranch = branches[0]?.name;
+
+      if (initialBranch && branches.find((branch) => branch.name === initialBranch)) {
+        initiallySelectedBranch = initialBranch;
+      }
+
       setBranchesList(branches.map((branch) => branch.name))
       formik.setFieldValue('branch', initiallySelectedBranch)
 
       if (props.api.getSnapshots) {
-        await fetchBranchSnapshotsData(initiallySelectedBranch)
+        await fetchBranchSnapshotsData(initiallySelectedBranch, initialSnapshotId)
       } else {
         const allSnapshots = stores.main?.snapshots?.data ?? []
         const sortedSnapshots = allSnapshots.slice().sort(compareSnapshotsDesc)
         setSnapshots(sortedSnapshots)
-        const [firstSnapshot] = allSnapshots ?? []
-        formik.setFieldValue('snapshotId', firstSnapshot?.id)
+        let selectedSnapshot = allSnapshots.find(s => s.id === initialSnapshotId) || allSnapshots[0]
+        formik.setFieldValue('snapshotId', selectedSnapshot?.id)
       }
     } catch (error) {
       console.error('Error fetching data:', error)
@@ -121,8 +129,13 @@ export const CreateClone = observer((props: Props) => {
 
   // Initial loading data.
   useEffect(() => {
-    fetchData()
-  }, [])
+    const queryString = history.location.search.split('?')[1]
+    const params = new URLSearchParams(queryString)
+    const branchId = params.get('branch_id') ?? undefined
+    const snapshotId = params.get('snapshot_id') ?? undefined
+
+    fetchData(branchId, snapshotId)
+  }, [history.location.search, formik.initialValues])
 
   // Redirect when clone is created and stable.
   useEffect(() => {

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

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

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

@@ -208,7 +208,7 @@ export const SnapshotPage = observer((props: Props) => {
             <Button
               variant="contained"
               color="primary"
-              onClick={() => history.push(props.routes.createClone())}
+              onClick={() => history.push(props.routes.createClone(snapshot?.branch as string, snapshot?.id as string))}
               title={'Create clone'}
               className={classes.actionButton}
             >