chore: resolve various warnings

SiaFoundation · Oct 11, 2024 · 4cf6c8e · 4cf6c8e
1 parent 5cf4f1b
commit 4cf6c8e
Show file tree

Hide file tree

Showing 36 changed files with 284 additions and 92 deletions.
diff --git a/.changeset/eight-kids-cheer.md b/.changeset/eight-kids-cheer.md
@@ -0,0 +1,5 @@
+---
+'website': patch
+---
+
+Added a max height and radius for hosts on the host map.
diff --git a/.changeset/five-bobcats-grin.md b/.changeset/five-bobcats-grin.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+The Dialog now supports providing a title or description that is visually hidden but still announced by assistive technology.
diff --git a/.changeset/late-drinks-protect.md b/.changeset/late-drinks-protect.md
@@ -0,0 +1,5 @@
+---
+'website': patch
+---
+
+Fixed hydration mismatch warnings related to the random selection of a host on the globe.
diff --git a/.changeset/late-readers-play.md b/.changeset/late-readers-play.md
@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+Fixed an issue with the uploads list loading and empty states.
diff --git a/.changeset/mean-zebras-impress.md b/.changeset/mean-zebras-impress.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': patch
+---
+
+Fixed a warning caused by animation props being passed to non-animated graphs.
diff --git a/.changeset/perfect-nails-tell.md b/.changeset/perfect-nails-tell.md
@@ -0,0 +1,5 @@
+---
+'website': patch
+---
+
+Fixed a hydration mismatch warning related to the ThemeRadio in footer.
diff --git a/.changeset/quick-horses-love.md b/.changeset/quick-horses-love.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Adjusted tooltip to only wrap content with Paragraph if prop is a string or React.Fragment.
diff --git a/.changeset/red-kangaroos-nail.md b/.changeset/red-kangaroos-nail.md
@@ -0,0 +1,5 @@
+---
+'walletd': patch
+---
+
+Fixed an issue where the app would try to fetch from an invalid URL when first initializing.
diff --git a/.changeset/six-cougars-sell.md b/.changeset/six-cougars-sell.md
@@ -0,0 +1,6 @@
+---
+'hostd': patch
+'renterd': patch
+---
+
+Added explicit aria descriptions to some primary dialogs.
diff --git a/.changeset/stale-windows-walk.md b/.changeset/stale-windows-walk.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': patch
+---
+
+Fixed a 1 pixel gap that would show between the top of the Table and its sticky header when scrolling.
diff --git a/.changeset/sweet-timers-fry.md b/.changeset/sweet-timers-fry.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': patch
+---
+
+Fixed warnings caused by the Dialog description prop and aria-describedby.
diff --git a/apps/hostd/contexts/volumes/columns.tsx b/apps/hostd/contexts/volumes/columns.tsx
@@ -53,7 +53,7 @@ export const columns: VolumesTableColumn[] = [
             'available'
           ) : (
             <>
-              <Text>unavailable</Text>
+              <Text size="12">unavailable</Text>
               <div className="flex flex-col">
                 {data.errors?.map((reason) => (
                   <Text key={reason} size="10" noWrap>

diff --git a/apps/hostd/dialogs/VolumeCreateDialog.tsx b/apps/hostd/dialogs/VolumeCreateDialog.tsx
@@ -1,5 +1,4 @@
 import {
-  Paragraph,
   Dialog,
   GBToSectors,
   triggerErrorToast,
@@ -211,6 +210,7 @@ export function VolumeCreateDialog({ trigger, open, onOpenChange }: Props) {
   return (
     <Dialog
       title="Create Volume"
+      description="Create a new volume. Select a system directory and specific the size of the volume."
       trigger={trigger}
       open={open}
       onOpenChange={(val) => {
@@ -230,10 +230,6 @@ export function VolumeCreateDialog({ trigger, open, onOpenChange }: Props) {
       }
     >
       <div className="flex flex-col gap-4">
-        <Paragraph size="14">
-          Create a new volume. Select a system directory and specific the size
-          of the volume.
-        </Paragraph>
         <FieldText name="name" form={form} fields={fields} />
         <div className="flex flex-col gap-3">
           <div className="flex flex-col gap-1">

diff --git a/apps/renterd/components/Contracts/index.tsx b/apps/renterd/components/Contracts/index.tsx
@@ -74,7 +74,7 @@ export function Contracts() {
             height: listHeight,
           }}
         >
-          <ScrollArea className="z-0" id="scroll-hosts">
+          <ScrollArea className="z-0">
             <div
               className={cx(showDetailView ? 'pb-6 px-6' : 'p-6', 'min-w-fit')}
             >

diff --git a/apps/renterd/components/Files/FilesStatsMenuShared/FilesStatsMenuSize.tsx b/apps/renterd/components/Files/FilesStatsMenuShared/FilesStatsMenuSize.tsx
@@ -36,8 +36,8 @@ export function FilesStatsMenuSize() {
     <Tooltip
       side="bottom"
       content={
-        <Text className="flex justify-between gap-6">
-          <Text className="flex flex-col gap-1">
+        <div className="flex justify-between gap-6">
+          <div className="flex flex-col gap-1">
             <Text size="12" color="subtle">
               size of all files
             </Text>
@@ -53,8 +53,8 @@ export function FilesStatsMenuSize() {
             <Text size="12" color="subtle">
               total storage utilization
             </Text>
-          </Text>
-          <Text className="flex flex-col gap-1 items-end">
+          </div>
+          <div className="flex flex-col gap-1 items-end">
             <Text size="12">{humanBytes(stats.data.totalObjectsSize)}</Text>
             <Text size="12">{humanBytes(stats.data.totalSectorsSize)}</Text>
             {!!averageRedundancyFactor && (
@@ -64,8 +64,8 @@ export function FilesStatsMenuSize() {
             )}
             <Separator className="w-full my-1" />
             <Text size="12">{humanBytes(stats.data.totalUploadedSize)}</Text>
-          </Text>
-        </Text>
+          </div>
+        </div>
       }
     >
       <Text size="12" font="mono">

diff --git a/apps/renterd/components/Hosts/HostMap/HostItem.tsx b/apps/renterd/components/Hosts/HostMap/HostItem.tsx
@@ -90,26 +90,42 @@ export function HostItem({
     <Tooltip
       content={
         <div className="flex flex-col gap-1">
-          <Text color="contrast" weight="bold">
+          <Text size="12" color="contrast" weight="bold">
             {countryCodeEmoji(host.country_code)} {host.country_code}
           </Text>
           <div className="flex gap-2">
             <div className="flex flex-col gap-1">
-              <Text color="subtle">storage</Text>
-              <Text color="subtle">download</Text>
-              <Text color="subtle">upload</Text>
+              <Text size="12" color="subtle">
+                storage
+              </Text>
+              <Text size="12" color="subtle">
+                download
+              </Text>
+              <Text size="12" color="subtle">
+                upload
+              </Text>
             </div>
             <div className="flex flex-col gap-1">
-              <Text color="contrast">
+              <Text size="12" color="contrast">
                 {humanBytes(host.settings?.total_storage || 0)}
               </Text>
-              <Text color="contrast">{getDownloadSpeed(host)}</Text>
-              <Text color="contrast">{getUploadSpeed(host)}</Text>
+              <Text size="12" color="contrast">
+                {getDownloadSpeed(host)}
+              </Text>
+              <Text size="12" color="contrast">
+                {getUploadSpeed(host)}
+              </Text>
             </div>
             <div className="flex flex-col gap-1">
-              <Text color="contrast">{storageCost}</Text>
-              <Text color="contrast">{downloadCost}</Text>
-              <Text color="contrast">{uploadCost}</Text>
+              <Text size="12" color="contrast">
+                {storageCost}
+              </Text>
+              <Text size="12" color="contrast">
+                {downloadCost}
+              </Text>
+              <Text size="12" color="contrast">
+                {uploadCost}
+              </Text>
             </div>
           </div>
         </div>

diff --git a/apps/renterd/components/Keys/KeysCreateDialog.tsx b/apps/renterd/components/Keys/KeysCreateDialog.tsx
@@ -6,7 +6,6 @@ import {
   FormSubmitButton,
   ConfigFields,
   useOnInvalid,
-  Paragraph,
   Button,
 } from '@siafoundation/design-system'
 import { useCallback, useMemo } from 'react'
@@ -159,6 +158,7 @@ export function KeysCreateDialog({ trigger, open, onOpenChange }: Props) {
   return (
     <Dialog
       title="Create S3 key"
+      description="Create a new S3 authentication key."
       trigger={trigger}
       open={open}
       onOpenChange={(val) => {
@@ -178,7 +178,6 @@ export function KeysCreateDialog({ trigger, open, onOpenChange }: Props) {
       }
     >
       <div className="flex flex-col gap-4">
-        <Paragraph>Create a new S3 authentication key.</Paragraph>
         <div className="flex flex-col gap-2">
           <FieldText name="name" form={form} fields={fields} />
           <FieldText name="secret" form={form} fields={fields} />

diff --git a/apps/renterd/contexts/contracts/columns.tsx b/apps/renterd/contexts/contracts/columns.tsx
@@ -192,37 +192,37 @@ export const columns: ContractsTableColumn[] = [
           content={
             <div className="flex flex-col gap-1.5">
               <div className="flex">
-                <Text className="flex-1" weight="medium">
+                <Text size="12" className="flex-1" weight="medium">
                   pending
                 </Text>
-                <Text className="flex-[2]" color="subtle">
+                <Text size="12" className="flex-[2]" color="subtle">
                   Contract has been added.
                 </Text>
               </div>
               <Separator className="w-full" />
               <div className="flex">
-                <Text className="flex-1" weight="medium">
+                <Text size="12" className="flex-1" weight="medium">
                   active
                 </Text>
-                <Text className="flex-[2]" color="subtle">
+                <Text size="12" className="flex-[2]" color="subtle">
                   Contract has appeared on chain.
                 </Text>
               </div>
               <Separator className="w-full" />
               <div className="flex">
-                <Text className="flex-1" weight="medium">
+                <Text size="12" className="flex-1" weight="medium">
                   complete
                 </Text>
-                <Text className="flex-[2]" color="subtle">
+                <Text size="12" className="flex-[2]" color="subtle">
                   Storage proof has appeared on chain.
                 </Text>
               </div>
               <Separator className="w-full" />
               <div className="flex">
-                <Text className="flex-1" weight="medium">
+                <Text size="12" className="flex-1" weight="medium">
                   failed
                 </Text>
-                <Text className="flex-[2]" color="subtle">
+                <Text size="12" className="flex-[2]" color="subtle">
                   Storage proof was not submitted before the end of proof
                   window.
                 </Text>

diff --git a/apps/renterd/contexts/uploads/index.tsx b/apps/renterd/contexts/uploads/index.tsx
@@ -40,6 +40,11 @@ function useUploadsMain() {
   const response = useMultipartUploadListUploads({
     disabled: !activeBucket,
     payload: payload as MultipartUploadListUploadsPayload,
+    config: {
+      swr: {
+        keepPreviousData: true,
+      },
+    },
   })
 
   const abortAll = useCallback(async () => {
@@ -64,9 +69,9 @@ function useUploadsMain() {
     )
   }, [response.data, apiBusUploadAbort, activeBucket, uploadsMap])
 
-  const dataset: ObjectUploadData[] | undefined = useMemo(() => {
+  const dataset: ObjectUploadData[] = useMemo(() => {
     if (!response.data?.uploads || !activeBucket?.name) {
-      return undefined
+      return []
     }
     return response.data.uploads.map((upload) => {
       const id = upload.uploadID

diff --git a/apps/renterd/dialogs/FilesBucketCreateDialog.tsx b/apps/renterd/dialogs/FilesBucketCreateDialog.tsx
@@ -1,5 +1,4 @@
 import {
-  Paragraph,
   Dialog,
   triggerErrorToast,
   triggerSuccessToast,
@@ -77,6 +76,7 @@ export function FilesBucketCreateDialog({
   return (
     <Dialog
       title="Create Bucket"
+      description="A bucket is an isolated collection of files."
       trigger={trigger}
       open={open}
       onOpenChange={(val) => {
@@ -91,9 +91,6 @@ export function FilesBucketCreateDialog({
       onSubmit={form.handleSubmit(onSubmit, onInvalid)}
     >
       <div className="flex flex-col gap-4">
-        <Paragraph size="14">
-          A bucket is an isolated collection of files.
-        </Paragraph>
         <FieldText name="name" form={form} fields={fields} autoComplete="off" />
         <FormSubmitButton form={form}>Create bucket</FormSubmitButton>
       </div>

diff --git a/apps/walletd/components/Wallet/WalletActionsMenu.tsx b/apps/walletd/components/Wallet/WalletActionsMenu.tsx
@@ -22,6 +22,7 @@ export function WalletActionsMenu() {
   const { openDialog } = useDialog()
   const walletId = router.query.id as string
   const balance = useWalletBalance({
+    disabled: !walletId,
     params: {
       id: walletId,
     },

diff --git a/apps/website/components/HostMap/Globe.tsx b/apps/website/components/HostMap/Globe.tsx
@@ -17,7 +17,7 @@ import { useTheme } from 'next-themes'
 import { useElementSize } from 'usehooks-ts'
 
 type Props = {
-  activeHost: SiaCentralPartialHost
+  activeHost?: SiaCentralPartialHost
   selectActiveHost: (public_key: string) => void
   hosts: SiaCentralPartialHost[]
   rates: {
@@ -56,7 +56,9 @@ function GlobeComponent({ activeHost, hosts, rates, selectActiveHost }: Props) {
   }, [])
 
   const moveToActiveHost = useCallback(() => {
-    moveToHost(activeHost)
+    if (activeHost) {
+      moveToHost(activeHost)
+    }
   }, [moveToHost, activeHost])
 
   useEffect(() => {
@@ -110,6 +112,9 @@ function GlobeComponent({ activeHost, hosts, rates, selectActiveHost }: Props) {
   }, [hosts])
 
   const activeRoutes = useMemo(() => {
+    if (!activeHost) {
+      return []
+    }
     let routes: Route[] = []
     for (let i = 0; i < hosts.length; i++) {
       const host = hosts[i]
@@ -212,8 +217,11 @@ function distanceBetweenHosts(
 
 function doesIncludeActiveHost(
   route: Route,
-  activeHost: SiaCentralPartialHost
+  activeHost?: SiaCentralPartialHost
 ) {
+  if (!activeHost) {
+    return false
+  }
   return (
     route.dst.public_key === activeHost.public_key ||
     route.src.public_key === activeHost.public_key