Add dismiss button for all types of toast message except loading

studio/hooks/misc/useStore.tsx

@@ -36,17 +36,21 @@ export const StoreProvider: FC<StoreProvider> = ({ children, rootStore }) => {
 
     autorun(() => {
       if (ui.notification) {
-        const { id, category, error, message } = ui.notification
+        const { id, category, error, message, progress } = ui.notification
         switch (category) {
           case 'info':
             return toast(message, { id })
           case 'success':
             return toast.success(message, { id })
           case 'error':
-            console.error('Notification', { error, message })
+            console.error('Error:', { error, message })
             return toast.error(message, { id })
           case 'loading':
-            return toast.loading(message, { id })
+            if (progress) {
+              return toast.loading(message, { id })
+            } else {
+              return toast.loading(message, { id })
+            }
         }
       }
     })

studio/pages/_app.tsx

@@ -10,13 +10,15 @@ import 'styles/contextMenu.scss'
 
 import Head from 'next/head'
 import dynamic from 'next/dynamic'
+import { useState } from 'react'
 import type { AppProps } from 'next/app'
-import { Toaster } from 'react-hot-toast'
+import { Toaster, ToastBar, toast } from 'react-hot-toast'
+import { Button, IconX } from '@supabase/ui'
+
 import { RootStore } from 'stores'
 import { StoreProvider } from 'hooks'
 import PageTelemetry from 'components/ui/PageTelemetry'
 import FlagProvider from 'components/ui/Flag/FlagProvider'
-import { useState } from 'react'
 
 const PortalRootWithNoSSR = dynamic(
   // @ts-ignore
@@ -42,7 +44,25 @@ const PortalToast = () => (
           duration: 8000,
         },
       }}
-    />
+    >
+      {(t) => (
+        <ToastBar toast={t} style={t.style}>
+          {({ icon, message }) => (
+            <>
+              {icon}
+              {message}
+              {t.type !== 'loading' && (
+                <div className="ml-4">
+                  <Button className="!p-1" type="text" onClick={() => toast.dismiss(t.id)}>
+                    <IconX size={14} strokeWidth={2} />
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+        </ToastBar>
+      )}
+    </Toaster>
   </PortalRootWithNoSSR>
 )
 

studio/pages/project/[ref]/index.tsx

@@ -47,6 +47,34 @@ const Home: NextPage = () => {
             {projectName}
           </Typography.Title>
         </div>
+        <button
+          onClick={() => {
+            ui.setNotification({ category: 'success', message: 'Oh yes' })
+          }}
+        >
+          Success
+        </button>
+        <button
+          onClick={() => {
+            ui.setNotification({ category: 'error', message: 'Oh no' })
+          }}
+        >
+          Error
+        </button>
+        <button
+          onClick={() => {
+            ui.setNotification({ category: 'loading', message: 'Oh wait' })
+          }}
+        >
+          Loading
+        </button>
+        <button
+          onClick={() => {
+            ui.setNotification({ category: 'info', message: 'Oh?' })
+          }}
+        >
+          Information
+        </button>
         {IS_PLATFORM && project && (
           <>
             {isUndefined(usage) ? (

studio/types/ui.ts

@@ -1,6 +1,7 @@
 export interface Notification {
-  id?: string
   category: 'info' | 'error' | 'success' | 'loading'
   message: string // Readable message for users to understand
-  error?: any // Any other errors that needs to be logged out in the console
+  id?: string
+  error?: any // Optional: Any other errors that needs to be logged out in the console
+  progress?: number // Optional: For loading messages to show a progress bar
 }