feat: toasts dismissible

SiaFoundation · Apr 3, 2024 · 1f5d343 · 1f5d343
1 parent 58a4d3e
commit 1f5d343
Show file tree

Hide file tree

Showing 56 changed files with 478 additions and 267 deletions.
diff --git a/.changeset/cuddly-tomatoes-move.md b/.changeset/cuddly-tomatoes-move.md
@@ -0,0 +1,8 @@
+---
+'explorer': minor
+'hostd': minor
+'renterd': minor
+'walletd': minor
+---
+
+Toast notifications can now be dismissed. Closes https://github.com/SiaFoundation/web/issues/542
diff --git a/.changeset/famous-donkeys-flash.md b/.changeset/famous-donkeys-flash.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Toasts can not be dismissed and now use separate title and body props.
diff --git a/apps/explorer/components/Faucet/FaucetFundForm.tsx b/apps/explorer/components/Faucet/FaucetFundForm.tsx
@@ -2,7 +2,7 @@ import {
   FormFieldFormik,
   FormSubmitButtonFormik,
   Paragraph,
-  triggerToast,
+  triggerSuccessToast,
 } from '@siafoundation/design-system'
 import { toHastings } from '@siafoundation/units'
 import BigNumber from 'bignumber.js'
@@ -50,7 +50,7 @@ export function FaucetFundForm({ onDone }: Props) {
       if (response.error) {
         actions.setStatus({ error: response.error })
       } else {
-        triggerToast('Address has been funded.')
+        triggerSuccessToast({ title: 'Address has been funded' })
         if (response.data) {
           onDone(response.data.id)
         }

diff --git a/apps/explorer/components/Layout/Search.tsx b/apps/explorer/components/Layout/Search.tsx
@@ -5,7 +5,7 @@ import {
   ConfigFields,
   ControlGroup,
   FieldText,
-  triggerToast,
+  triggerErrorToast,
 } from '@siafoundation/design-system'
 import { Search16 } from '@siafoundation/react-icons'
 import React, { useCallback } from 'react'
@@ -51,7 +51,7 @@ export function Search() {
 
       if (!response.data) {
         form.setError('query', { message: 'Error connecting to server.' })
-        triggerToast('Error connecting to server.')
+        triggerErrorToast({ title: 'Error connecting to server' })
         return
       }
 
@@ -91,7 +91,7 @@ export function Search() {
         form.reset()
       } else {
         form.setError('query', { message: 'No results match query.' })
-        triggerToast('No results match query.')
+        triggerErrorToast({ title: 'No results match query' })
       }
     },
     [form, router, search]

diff --git a/apps/hostd/components/Config/AnnounceButton.tsx b/apps/hostd/components/Config/AnnounceButton.tsx
@@ -61,10 +61,12 @@ export function AnnounceButton() {
           const response = await settingsAnnounce.post({})
 
           if (response.error) {
-            triggerErrorToast('Error announcing host.')
+            triggerErrorToast({ title: 'Error announcing host' })
             return
           }
-          triggerSuccessToast('Successfully broadcast host announcement.')
+          triggerSuccessToast({
+            title: 'Successfully broadcast host announcement',
+          })
         },
       }),
     [openConfirmDialog, settingsAnnounce, txpoolFee]

diff --git a/apps/hostd/components/Contracts/ContractContextMenu.tsx b/apps/hostd/components/Contracts/ContractContextMenu.tsx
@@ -41,19 +41,25 @@ export function ContractContextMenu({
       },
     })
     if (response.error) {
-      triggerErrorToast(response.error)
+      triggerErrorToast({
+        title: 'Error starting integrity check',
+        body: response.error,
+      })
     } else {
-      triggerSuccessToast(
-        <>
-          Integrity check successfully started, depending on contract data size
-          this operation can take a while. Check <Code>hostd</Code>{' '}
-          <Link onClick={() => openDialog('alerts')}>alerts</Link> for status
-          updates.
-        </>,
-        {
+      triggerSuccessToast({
+        title: 'Integrity check started',
+        body: (
+          <>
+            Depending on contract data size this operation can take a while.
+            Check <Code>hostd</Code>{' '}
+            <Link onClick={() => openDialog('alerts')}>alerts</Link> for status
+            updates.
+          </>
+        ),
+        options: {
           duration: 12_000,
-        }
-      )
+        },
+      })
     }
   }, [id, integrityCheck, openDialog])
 

diff --git a/apps/hostd/components/DirectorySelectMenu/DirectorySelectCmd/DirectoryCreate.tsx b/apps/hostd/components/DirectorySelectMenu/DirectorySelectCmd/DirectoryCreate.tsx
@@ -30,7 +30,10 @@ export function DirectoryCreate({
       },
     })
     if (response.error) {
-      triggerErrorToast(`Error creating directory: ${response.error}`)
+      triggerErrorToast({
+        title: 'Error creating directory',
+        body: response.error,
+      })
     } else {
       onCreate(newDirName)
       setNewDirName('')

diff --git a/apps/hostd/components/Volumes/VolumeContextMenu.tsx b/apps/hostd/components/Volumes/VolumeContextMenu.tsx
@@ -68,15 +68,15 @@ export function VolumeContextMenu({ id, contentProps, buttonProps }: Props) {
               },
             })
             if (response.error) {
-              triggerErrorToast(
-                `Error canceling volume ${getActiveOperationLabel(status)}.`
-              )
-            } else {
-              triggerSuccessToast(
-                `Successfully canceled volume ${getActiveOperationLabel(
+              triggerErrorToast({
+                title: `Error canceling volume ${getActiveOperationLabel(
                   status
-                )}.`
-              )
+                )}`,
+              })
+            } else {
+              triggerSuccessToast({
+                title: `Canceled volume ${getActiveOperationLabel(status)}`,
+              })
             }
           }}
         >
@@ -100,17 +100,17 @@ export function VolumeContextMenu({ id, contentProps, buttonProps }: Props) {
               },
             })
             if (response.error) {
-              triggerErrorToast(
-                nextReadOnly
-                  ? 'Error setting volume to read-only.'
-                  : 'Error setting volume to read/write.'
-              )
+              triggerErrorToast({
+                title: nextReadOnly
+                  ? 'Error setting volume to read-only'
+                  : 'Error setting volume to read/write',
+              })
             } else {
-              triggerSuccessToast(
-                nextReadOnly
-                  ? 'Volume set to read-only.'
-                  : 'Volume set to read/write.'
-              )
+              triggerSuccessToast({
+                title: nextReadOnly
+                  ? 'Volume set to read-only'
+                  : 'Volume set to read/write',
+              })
             }
           }}
         >

diff --git a/apps/hostd/contexts/config/index.tsx b/apps/hostd/contexts/config/index.tsx
@@ -50,7 +50,7 @@ export function useConfigMain() {
   const revalidateAndResetForm = useCallback(async () => {
     const _settings = await settings.mutate()
     if (!_settings) {
-      triggerErrorToast('Error fetching settings.')
+      triggerErrorToast({ title: 'Error fetching settings' })
     } else {
       // also recheck dynamic dns
       await dynDNSCheck.mutate()

diff --git a/apps/hostd/contexts/config/useOnValid.tsx b/apps/hostd/contexts/config/useOnValid.tsx
@@ -54,18 +54,22 @@ export function useOnValid({
         const needsToAnnounce =
           host.data?.lastAnnouncement?.address !== values.netAddress
         if (needsToAnnounce) {
-          triggerSuccessToast(
-            'Settings have been saved. Address has changed, make sure to re-announce the host.',
-            {
+          triggerSuccessToast({
+            title: 'Settings have been saved',
+            body: 'Address has changed, make sure to re-announce the host.',
+            options: {
               duration: 20_000,
-            }
-          )
+            },
+          })
         } else {
-          triggerSuccessToast('Settings have been saved.')
+          triggerSuccessToast({ title: 'Settings have been saved' })
         }
         await revalidateAndResetForm()
       } catch (e) {
-        triggerErrorToast((e as Error).message)
+        triggerErrorToast({
+          title: 'Error updating settings',
+          body: (e as Error).message,
+        })
         console.log(e)
       }
     },

diff --git a/apps/hostd/dialogs/AlertsDialog.tsx b/apps/hostd/dialogs/AlertsDialog.tsx
@@ -35,9 +35,12 @@ export function AlertsDialog({ open, onOpenChange }: Props) {
         payload: [id],
       })
       if (response.error) {
-        triggerErrorToast('Error dismissing alert.')
+        triggerErrorToast({
+          title: 'Error dismissing alert',
+          body: response.error,
+        })
       } else {
-        triggerSuccessToast('Alert has been dismissed.')
+        triggerSuccessToast({ title: 'Alert has been dismissed' })
       }
     },
     [dismiss]
@@ -52,17 +55,18 @@ export function AlertsDialog({ open, onOpenChange }: Props) {
         payload: ids,
       })
       if (response.error) {
-        triggerErrorToast(
-          filter
-            ? `Error dismissing all ${filter} alerts.`
-            : 'Error dismissing all alerts.'
-        )
+        triggerErrorToast({
+          title: filter
+            ? `Error dismissing all ${filter} alerts`
+            : 'Error dismissing all alerts',
+          body: response.error,
+        })
       } else {
-        triggerSuccessToast(
-          filter
-            ? `All ${filter} alerts have been dismissed.`
-            : 'All alerts have been dismissed.'
-        )
+        triggerSuccessToast({
+          title: filter
+            ? `All ${filter} alerts have been dismissed`
+            : 'All alerts have been dismissed',
+        })
       }
     },
     [dismiss, alerts]

diff --git a/apps/hostd/dialogs/VolumeCreateDialog.tsx b/apps/hostd/dialogs/VolumeCreateDialog.tsx
@@ -136,9 +136,12 @@ export function VolumeCreateDialog({ trigger, open, onOpenChange }: Props) {
         },
       })
       if (response.error) {
-        triggerErrorToast(response.error)
+        triggerErrorToast({
+          title: 'Error creating volume',
+          body: response.error,
+        })
       } else {
-        triggerSuccessToast('New volume created.')
+        triggerSuccessToast({ title: 'New volume created' })
         form.reset(defaultValues)
         closeDialog()
       }

diff --git a/apps/hostd/dialogs/VolumeDeleteDialog.tsx b/apps/hostd/dialogs/VolumeDeleteDialog.tsx
@@ -79,9 +79,12 @@ export function VolumeDeleteDialog({ trigger, open, onOpenChange }: Props) {
         },
       })
       if (response.error) {
-        triggerErrorToast(response.error)
+        triggerErrorToast({
+          title: 'Error deleting volume',
+          body: response.error,
+        })
       } else {
-        triggerSuccessToast('Volume permanently deleted.')
+        triggerSuccessToast({ title: 'Volume permanently deleted' })
         form.reset()
         closeDialog()
       }

diff --git a/apps/hostd/dialogs/VolumeResizeDialog.tsx b/apps/hostd/dialogs/VolumeResizeDialog.tsx
@@ -102,9 +102,12 @@ export function VolumeResizeDialog({ trigger, open, onOpenChange }: Props) {
         },
       })
       if (response.error) {
-        triggerErrorToast(response.error)
+        triggerErrorToast({
+          title: 'Error resizing volume',
+          body: response.error,
+        })
       } else {
-        triggerSuccessToast('Volume resizing initiated.')
+        triggerSuccessToast({ title: 'Volume resizing initiated' })
         form.reset(defaultValues)
         closeDialog()
       }

diff --git a/apps/renterd/components/Contracts/useContractConfirmDelete.tsx b/apps/renterd/components/Contracts/useContractConfirmDelete.tsx
@@ -39,9 +39,12 @@ export function useContractConfirmDelete() {
           })
 
           if (response.error) {
-            triggerErrorToast('Error deleting contract.')
+            triggerErrorToast({
+              title: 'Error deleting contract',
+              body: response.error,
+            })
           }
-          triggerSuccessToast('Successfully deleted contract.')
+          triggerSuccessToast({ title: 'Deleted contract' })
         },
       }),
     [openConfirmDialog, deleteContract]

diff --git a/apps/renterd/components/Files/FileContextMenu/index.tsx b/apps/renterd/components/Files/FileContextMenu/index.tsx
@@ -6,17 +6,16 @@ import {
   DropdownMenuLeftSlot,
   DropdownMenuLabel,
   copyToClipboardCustom,
-  Text,
   Code,
 } from '@siafoundation/design-system'
 import {
   Download16,
   Copy16,
   Delete16,
   Document16,
-  Warning16,
   Filter16,
   Edit16,
+  Warning24,
 } from '@siafoundation/react-icons'
 import { useFileDelete } from '../useFileDelete'
 import { CopyMetadataMenuItem } from './CopyMetadataMenuItem'
@@ -110,25 +109,20 @@ export function FileContextMenu({ path }: Props) {
       </DropdownMenuItem>
       <DropdownMenuItem
         onSelect={() => {
-          copyToClipboardCustom(
-            getFileUrl(path, true),
-            <div className="flex flex-col gap-2">
-              <Text>Copied authenticated file URL to clipboard.</Text>
-              <Text>
+          copyToClipboardCustom({
+            text: getFileUrl(path, true),
+            title: 'Copied authenticated file URL to clipboard',
+            body: (
+              <>
                 The authenticated URL contains the <Code>renterd</Code>{' '}
                 password, be careful when pasting or sharing the URL.
-              </Text>
-            </div>,
-            {
-              icon: (
-                <div className="!flex-none w-5">
-                  <Warning16 className="w-5 text-amber-600" />
-                </div>
-              ),
-              duration: 10_000,
-              className: '!max-w-[1200px]',
-            }
-          )
+              </>
+            ),
+            icon: <Warning24 className="text-amber-600" />,
+            options: {
+              duration: 100_000,
+            },
+          })
         }}
       >
         <DropdownMenuLeftSlot>

diff --git a/apps/renterd/components/Files/useDirectoryDelete.tsx b/apps/renterd/components/Files/useDirectoryDelete.tsx
@@ -42,9 +42,12 @@ export function useDirectoryDelete() {
           })
 
           if (response.error) {
-            triggerErrorToast('Error deleting directory.')
+            triggerErrorToast({
+              title: 'Error deleting directory',
+              body: response.error,
+            })
           }
-          triggerSuccessToast('Successfully deleted directory.')
+          triggerSuccessToast({ title: 'Deleted directory' })
         },
       }),
     [openConfirmDialog, deleteObject]