feat(ui): add invoices button, format snapshot error (platform#242)

Author: Adrinlol

ui/packages/platform/src/components/StripeForm/index.tsx

@@ -76,6 +76,17 @@ const useStyles = makeStyles(
         flex: 'auto',
       },
     },
+    flexColumnContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: '1.75 1 0',
+      gap: 20,
+
+      [theme.breakpoints.down('sm')]: {
+        width: '100%',
+        flex: 'auto',
+      },
+    },
     cardContainerTitle: {
       fontSize: 14,
       fontWeight: 'bold',
@@ -104,6 +115,11 @@ const useStyles = makeStyles(
       fontSize: 13,
       flex: '1 1 0',
     },
+    button: {
+      '&:hover': {
+        color: '#0F879D',
+      },
+    },
     columnContainer: {
       display: 'flex',
       alignItems: 'center',
@@ -342,7 +358,7 @@ function StripeForm(props: {
     <div>
       {stripeStyles}
       <div className={classes.paperContainer}>
-        <Box className={classes.subscriptionContainer}>
+        <Box className={classes.flexColumnContainer}>
           <p className={classes?.cardContainerTitle}>Subscriptions</p>
           {state.billingInfo.length > 0 ? (
             state.billingInfo.map(
@@ -406,13 +422,14 @@ function StripeForm(props: {
           )}
         </Box>
         <Box className={classes.subscriptionContainer}>
-          <p className={classes?.cardContainerTitle}>Payment methods</p>
+          <p className={classes?.cardContainerTitle}>Payments</p>
           <Paper className={classes?.cardContainer}>
             <Box
               sx={{
                 display: 'flex',
-                justifyContent: 'flex-end',
+                justifyContent: 'flex-start',
                 alignItems: 'center',
+                gap: '1rem',
               }}
             >
               <Button
@@ -426,9 +443,23 @@ function StripeForm(props: {
                   <Spinner size="sm" className={classes.spinner} />
                 )}
               </Button>
+              {state.cards.length > 0 && (
+                <Button
+                  variant="outlined"
+                  color="secondary"
+                  className={classes.button}
+                  disabled={props.disabled || state.isLoading}
+                  onClick={handleSubmit}
+                >
+                  Invoices
+                  {state.isLoading && (
+                    <Spinner size="sm" className={classes.spinner} />
+                  )}
+                </Button>
+              )}
             </Box>
             {state.cards.length === 0 && !state.isFetching ? (
-              <p className={classes.emptyMethod}>No payment method available</p>
+              <p className={classes.emptyMethod}>No payment methods available</p>
             ) : (
               <>
                 {state.cards.map(

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

@@ -115,7 +115,7 @@ export const CreateClone = observer((props: Props) => {
 
   // Snapshots getting error.
   if (stores.main.snapshots.error)
-    return <ErrorStub {...stores.main.snapshots.error} />
+    return <ErrorStub message={stores.main.snapshots.error} />
 
   const isCloneUnstable = Boolean(
     stores.main.clone && !stores.main.isCloneStable,

ui/packages/shared/pages/Instance/Info/Snapshots/index.tsx

@@ -45,7 +45,7 @@ export const Snapshots = observer(() => {
         !snapshots.data && !snapshots.error && <Spinner size="sm" />
       }
     >
-      {snapshots.error && <ErrorStub {...snapshots.error} size="normal" />}
+      {snapshots.error && <ErrorStub message={snapshots.error} size="normal" />}
 
       {snapshots.data && !snapshots.error && (
         <>

ui/packages/shared/stores/Snapshots.ts

@@ -8,20 +8,14 @@
 import { makeAutoObservable } from 'mobx'
 
 import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
-import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api'
 import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots'
 
 export type SnapshotsApi = {
   getSnapshots: GetSnapshots
 }
-
-type Error = {
-  title?: string
-  message: string
-}
 export class SnapshotsStore {
   data: Snapshot[] | null = null
-  error: Error | null = null
+  error: string | null = null
   isLoading = false
 
   private readonly api: SnapshotsApi
@@ -49,7 +43,11 @@ export class SnapshotsStore {
 
     if (response) this.data = response
 
-    if (error) this.error = { message: await getTextFromUnknownApiError(error) }
+    if (error) {
+      this.error = await error
+        .json()
+        .then((error) => error.details?.split('"message": "')[1]?.split('"')[0])
+    }
 
     return !!response
   }