feat(ui): Redesign of the "Snapshots" page

Author: Adrinlol

…/ce/src/api/snapshots/destroySnapshot.js …/ce/src/api/snapshots/destroySnapshot.tsui/packages/ce/src/api/snapshots/destroySnapshot.js renamed to ui/packages/ce/src/api/snapshots/destroySnapshot.ts ui/packages/ce/src/api/snapshots/destroySnapshot.js renamed to ui/packages/ce/src/api/snapshots/destroySnapshot.ts

@@ -7,11 +7,15 @@
 
 import { request } from 'helpers/request'
 
-export const destroySnapshot = async (snapshotId) => {
+export const destroySnapshot = async (
+  snapshotId: string,
+  forceDelete: boolean,
+) => {
   const response = await request(`/snapshot/delete`, {
     method: 'POST',
     body: JSON.stringify({
       snapshotID: snapshotId,
+      force: forceDelete,
     }),
   })
 

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

@@ -13,7 +13,8 @@ import {
 import { request } from 'helpers/request'
 
 export const getSnapshots: GetSnapshots = async (req) => {
-  const response = await request('/snapshots')
+  const url = `/snapshots${req.branchName ? `?branch=${req.branchName}` : ''}`;
+  const response = await request(url);
 
   return {
     response: response.ok

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

@@ -337,7 +337,7 @@ export const BranchesPage = observer((props: Props) => {
                               {snapshot.dataStateAt || '-'}
                             </TableBodyCell>
                             <TableBodyCell>
-                              {snapshot.comment ?? '-'}
+                              {snapshot.message ?? '-'}
                             </TableBodyCell>
                           </TableRow>
                         ))}

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

@@ -100,7 +100,7 @@ export const CreateSnapshotPage = observer(
     const clonesList = instance?.instance?.state?.cloning.clones || []
 
     const handleSubmit = async (values: FormValues) => {
-      await createSnapshot(values.cloneID, values.comment).then((snapshot) => {
+      await createSnapshot(values.cloneID, values.message).then((snapshot) => {
         if (snapshot && generateSnapshotPageId(snapshot.snapshotID)) {
           history.push(
             `/instance/snapshots/${generateSnapshotPageId(
@@ -165,18 +165,18 @@ export const CreateSnapshotPage = observer(
                     : []
                 }
               />
-              <strong>Comment</strong>
+              <strong>Message</strong>
               <p className={classes.marginTop}>
-                Optional comment to be added to the snapshot.
+                Message to be added to the snapshot.
               </p>
               <TextField
-                label="Comment"
+                label="Message *"
                 fullWidth
                 className={classes.marginBottom2x}
-                value={formik.values.comment}
-                error={Boolean(formik.errors.comment)}
+                value={formik.values.message}
+                error={Boolean(formik.errors.message)}
                 onChange={(e) =>
-                  formik.setFieldValue('comment', e.target.value)
+                  formik.setFieldValue('message', e.target.value)
                 }
               />
               <Button

ui/packages/shared/pages/CreateSnapshot/useForm.ts

@@ -10,18 +10,19 @@ import * as Yup from 'yup'
 
 export type FormValues = {
   cloneID: string
-  comment?: string
+  message: string
 }
 
 const Schema = Yup.object().shape({
   cloneID: Yup.string().required('Clone ID is required'),
+  message: Yup.string().required('Message is required'),
 })
 
 export const useForm = (onSubmit: (values: FormValues) => void) => {
   const formik = useFormik<FormValues>({
     initialValues: {
       cloneID: '',
-      comment: '',
+      message: '',
     },
     validationSchema: Schema,
     onSubmit,

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

@@ -0,0 +1,77 @@
+import { observer } from 'mobx-react-lite'
+import { makeStyles, TextField } from '@material-ui/core'
+import { Select } from '@postgres.ai/shared/components/Select'
+
+interface SnapshotHeaderProps {
+  branches: string[] | null
+  selectedBranch: string
+  setMessageFilter: (value: string) => void
+  setSelectedBranch: (value: string) => void
+}
+
+const useStyles = makeStyles(
+  {
+    outerContainer: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingBottom: '6px',
+    },
+    select: {
+      width: '200px',
+    },
+    inputContainer: {
+      width: '300px',
+
+      '& input': {
+        padding: '8px',
+      },
+    },
+  },
+  { index: 1 },
+)
+
+export const SnapshotHeader = observer(
+  ({
+    branches,
+    selectedBranch,
+    setMessageFilter,
+    setSelectedBranch,
+  }: SnapshotHeaderProps) => {
+    const classes = useStyles()
+
+    return (
+      <div className={classes.outerContainer}>
+        <Select
+          fullWidth
+          label="Branch"
+          className={classes.select}
+          value={selectedBranch}
+          disabled={!branches}
+          onChange={(e) => {
+            setSelectedBranch(e.target.value)
+          }}
+          items={
+            branches
+              ? branches.map((branch) => {
+                  return {
+                    value: branch,
+                    children: <div>{branch}</div>,
+                  }
+                })
+              : []
+          }
+        />
+        <TextField
+          variant="outlined"
+          className={classes.inputContainer}
+          onChange={(e) => setMessageFilter(e.target.value)}
+          label={'Filter by message'}
+          InputLabelProps={{
+            shrink: true,
+          }}
+        />
+      </div>
+    )
+  },
+)