Merge branch 'fill-snapshot-data' into 'dle-4-0'

feat(UI): Create snapshot button now is a link to the pre-filled form, fix e2e tests pipeline

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

Author: Bogdan Tsechoev

ui/.gitlab-ci.yml

@@ -72,7 +72,10 @@ e2e-ce-ui-test:
     # TODO: Set up caching.
 #    - pnpm config set store-dir /builds/postgres-ai/database-lab/.pnpm-store/
   script:
-    - pnpm --dir ui/ i --no-frozen-lockfile
+    - pnpm --dir ui/ --filter @postgres.ai/ce install
+    - pnpm --dir ui/ --filter @postgres.ai/ce build
     - pnpm --dir ui/ --filter @postgres.ai/ce exec cypress install
-    - pnpm --dir ui/ --filter @postgres.ai/ce start & wait-on http://localhost:3001
+    - npx serve -s ui/packages/ce/build -l 3001 > server.log 2>&1 &
+    - sleep 20
+    - timeout 120s wait-on http://localhost:3001 || (echo "❌ UI didn't start in time"; cat server.log; exit 1)
     - pnpm --dir ui/ --filter @postgres.ai/ce cy:run

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

@@ -59,6 +59,7 @@ export const Clone = () => {
           instance: () => ROUTES.INSTANCE.path,
           snapshot: (snapshotId: string) =>
             ROUTES.INSTANCE.SNAPSHOTS.SNAPSHOT.createPath(snapshotId),
+          createSnapshot: (cloneId: string) => ROUTES.INSTANCE.SNAPSHOTS.CREATE.createPath(cloneId),
         }}
         api={api}
         elements={elements}

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

@@ -27,6 +27,13 @@ export const ROUTES = {
       CREATE: {
         name: 'Create snapshot',
         path: `/instance/snapshots/create`,
+        createPath: (cloneId?: string) => {
+          const params = new URLSearchParams();
+          if (cloneId) params.set('clone_id', cloneId);
+
+          const query = params.toString();
+          return `/instance/snapshots/create${query ? `?${query}` : ''}`;
+        }
       },
 
       SNAPSHOTS: {

ui/packages/platform/src/config/routes/snapshots.ts

@@ -5,8 +5,12 @@ export const ORG_SNAPSHOTS = {
     return `/${org}/instances/${instanceId}/snapshots`
   },
   ADD: {
-    createPath: (args?: { org: string; instanceId: string }) => {
-      const { org = ':org', instanceId = ':instanceId' } = args ?? {}
+    createPath: (args?: { org: string; instanceId: string, cloneId?: string }) => {
+      const { org = ':org', instanceId = ':instanceId', cloneId = undefined } = args ?? {}
+
+      if (cloneId) {
+        return `/${org}/instances/${instanceId}/snapshots/add?clone_id=${cloneId}`
+      }
 
       return `/${org}/instances/${instanceId}/snapshots/add`
     },
@@ -44,13 +48,19 @@ export const PROJECT_SNAPSHOTS = {
       org: string
       project: string
       instanceId: string
+      cloneId?: string
     }) => {
       const {
         org = ':org',
         project = ':project',
         instanceId = ':instanceId',
+        cloneId = undefined,
       } = args ?? {}
 
+      if (cloneId) {
+        return `/${org}/${project}/instances/${instanceId}/snapshots/add?clone_id=${cloneId}`
+      }
+
       return `/${org}/${project}/instances/${instanceId}/snapshots/add`
     },
   },

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

@@ -45,6 +45,19 @@ export const Clone = () => {
             instanceId: params.instanceId,
             snapshotId,
           }),
+    createSnapshot: () =>
+      params.project
+        ? ROUTES.ORG.PROJECT.INSTANCES.INSTANCE.SNAPSHOTS.ADD.createPath({
+            org: params.org,
+            project: params.project,
+            instanceId: params.instanceId,
+            cloneId: params.cloneId,
+          })
+        : ROUTES.ORG.INSTANCES.INSTANCE.SNAPSHOTS.ADD.createPath({
+            org: params.org,
+            instanceId: params.instanceId,
+            cloneId: params.cloneId,
+          })
   }
 
   const api = {

ui/packages/shared/pages/Clone/context.ts

@@ -9,6 +9,7 @@ export type Host = {
   routes: {
     instance: () => string
     snapshot: (snapshotId: string) => string
+    createSnapshot: (cloneId: string) => string
   }
   api: Api
   elements: {

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

@@ -276,17 +276,7 @@ export const Clone = observer((props: Props) => {
   }
 
   const createSnapshot = async () => {
-    await snapshots
-      .createSnapshot(props.cloneId, '', props.instanceId)
-      .then((snapshot) => {
-        if (snapshot && generateSnapshotPageId(snapshot.snapshotID)) {
-          history.push(
-            props.routes.snapshot(
-              generateSnapshotPageId(snapshot.snapshotID) as string,
-            ),
-          )
-        }
-      })
+    history.push(props.routes.createSnapshot(props.cloneId))
   }
 
   // Clone reload.

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

@@ -127,6 +127,23 @@ export const CreateSnapshotPage = observer(
       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 (
       <>
         {elements.breadcrumbs}