upgrade filesize through a major version

Author: david-crespo

app/forms/image-from-snapshot.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import fileSize from 'filesize'
+import { filesize } from 'filesize'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
@@ -83,7 +83,7 @@ export function CreateImageFromSnapshotSideModalForm() {
         <PropertiesTable.Row label="Snapshot">{data.name}</PropertiesTable.Row>
         <PropertiesTable.Row label="Project">{project}</PropertiesTable.Row>
         <PropertiesTable.Row label="Size">
-          {fileSize(data.size, { base: 2 })}
+          {filesize(data.size, { base: 2 })}
         </PropertiesTable.Row>
       </PropertiesTable>
 

app/forms/image-upload.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import filesize from 'filesize'
+import { filesize } from 'filesize'
 import pMap from 'p-map'
 import pRetry from 'p-retry'
 import { useRef, useState } from 'react'

app/pages/project/instances/instance/InstancePage.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { format } from 'date-fns'
-import filesize from 'filesize'
+import { filesize } from 'filesize'
 import { useMemo } from 'react'
 import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 

app/pages/system/inventory/sled/SledPage.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import fileSize from 'filesize'
+import { filesize } from 'filesize'
 import type { LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
@@ -27,7 +27,7 @@ export function SledPage() {
   const { sledId } = useSledParams()
   const { data: sled } = usePrefetchedApiQuery('sledView', { path: { sledId } })
 
-  const ram = fileSize(sled.usablePhysicalRam, { output: 'object', base: 2 })
+  const ram = filesize(sled.usablePhysicalRam, { output: 'object', base: 2 })
 
   return (
     <>

libs/table/cells/InstanceResourceCell.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import fileSize from 'filesize'
+import { filesize } from 'filesize'
 
 import type { Instance } from '@oxide/api'
 
@@ -14,7 +14,7 @@ import type { Cell } from './Cell'
 export const InstanceResourceCell = ({
   value,
 }: Cell<Pick<Instance, 'ncpus' | 'memory'>>) => {
-  const memory = fileSize(value.memory, { output: 'object', base: 2 })
+  const memory = filesize(value.memory, { output: 'object', base: 2 })
   return (
     <div className="space-y-0.5">
       <div>

libs/table/cells/SizeCell.tsx

@@ -5,13 +5,13 @@
  *
  * Copyright Oxide Computer Company
  */
-import fileSize from 'filesize'
+import { filesize } from 'filesize'
 
 import type { Cell } from './Cell'
 
 /** Human-readable format for size in bytes */
 export const SizeCell = ({ value: bytes }: Cell<number>) => {
-  const size = fileSize(bytes, { base: 2, output: 'object' })
+  const size = filesize(bytes, { base: 2, output: 'object' })
   return (
     <span className="text-secondary">
       {size.value} <span className="text-quaternary">{size.unit}</span>

libs/ui/lib/file-input/FileInput.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import filesize from 'filesize'
+import { filesize } from 'filesize'
 import {
   forwardRef,
   useRef,

package-lock.json

@@ -46,7 +46,7 @@
     "@tanstack/react-table": "^8.11.3",
     "classnames": "^2.5.1",
     "date-fns": "^2.30.0",
-    "filesize": "^8.0.7",
+    "filesize": "^10.1.0",
     "lodash.throttle": "^4.1.1",
     "match-sorter": "^6.3.1",
     "mousetrap": "^1.6.5",