From 0bda6c28aea5b6ca49abcc75a0957fc6adf37782 Mon Sep 17 00:00:00 2001
From: Peter Makowski <me+git@petermakowski.io>
Date: Tue, 30 Jan 2024 16:51:33 +0100
Subject: [PATCH] chore: use formatBytes from react components

---
 package.json                                  |   2 +-
 .../UploadTextArea/UploadTextArea.tsx         |   4 +-
 .../AddLogicalVolume/AddLogicalVolume.tsx     |  55 +++++---
 .../AddPartition/AddPartition.tsx             |  55 +++++---
 .../StorageTable/PoolSelect/PoolSelect.tsx    |  33 +++--
 .../KVMResourceMeter/KVMResourceMeter.tsx     |   3 +-
 .../StoragePopover/StoragePopover.tsx         |  17 ++-
 .../StorageCards/StorageCards.tsx             |  16 +--
 .../StorageResources/StorageResources.tsx     |   9 +-
 src/app/kvm/utils.ts                          |   3 +-
 .../StorageColumn/StorageColumn.tsx           |   4 +-
 src/app/utils/formatBytes.test.ts             | 119 +-----------------
 src/app/utils/formatBytes.ts                  |  74 ++---------
 src/app/utils/formatSpeedUnits.ts             |   4 +-
 src/app/utils/index.ts                        |   1 -
 yarn.lock                                     |  21 +---
 16 files changed, 140 insertions(+), 280 deletions(-)

diff --git a/package.json b/package.json
index 683a20a72e7..d7ccfa40b3c 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@canonical/maas-react-components": "1.15.0",
+    "@canonical/maas-react-components": "1.19.1",
     "@canonical/macaroon-bakery": "1.3.2",
     "@canonical/react-components": "0.46.0",
     "@reduxjs/toolkit": "1.9.3",
diff --git a/src/app/base/components/UploadTextArea/UploadTextArea.tsx b/src/app/base/components/UploadTextArea/UploadTextArea.tsx
index 056813f61fd..5c306dc8aab 100644
--- a/src/app/base/components/UploadTextArea/UploadTextArea.tsx
+++ b/src/app/base/components/UploadTextArea/UploadTextArea.tsx
@@ -1,6 +1,7 @@
 import type { ChangeEvent } from "react";
 import { useState } from "react";
 
+import { formatBytes } from "@canonical/maas-react-components";
 import type { TextareaProps } from "@canonical/react-components";
 import { Icon, Textarea } from "@canonical/react-components";
 import { useFormikContext } from "formik";
@@ -9,7 +10,6 @@ import { useDropzone } from "react-dropzone";
 import FormikField from "@/app/base/components/FormikField";
 import { useId } from "@/app/base/hooks/base";
 import type { AnyObject } from "@/app/base/types";
-import { formatBytes } from "@/app/utils";
 
 type Props<V> = {
   label: string;
@@ -53,7 +53,7 @@ export const UploadTextArea = <V extends AnyObject>({
     }
     const file = files[0];
     if (file.size > maxSize) {
-      const byteSize = formatBytes(maxSize, "B");
+      const byteSize = formatBytes({ value: maxSize, unit: "B" });
       setFileErrors(
         `File cannot be larger than ${byteSize.value}${byteSize.unit}.`
       );
diff --git a/src/app/base/components/node/StorageTables/AvailableStorageTable/AddLogicalVolume/AddLogicalVolume.tsx b/src/app/base/components/node/StorageTables/AvailableStorageTable/AddLogicalVolume/AddLogicalVolume.tsx
index 5abb41c2036..33a58faf357 100644
--- a/src/app/base/components/node/StorageTables/AvailableStorageTable/AddLogicalVolume/AddLogicalVolume.tsx
+++ b/src/app/base/components/node/StorageTables/AvailableStorageTable/AddLogicalVolume/AddLogicalVolume.tsx
@@ -1,3 +1,4 @@
+import { formatBytes } from "@canonical/maas-react-components";
 import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 
@@ -13,7 +14,6 @@ import type { MachineEventErrors } from "@/app/store/machine/types/base";
 import { isMachineDetails } from "@/app/store/machine/utils";
 import type { RootState } from "@/app/store/root/types";
 import type { Disk } from "@/app/store/types/node";
-import { formatBytes } from "@/app/utils";
 
 export type AddLogicalVolumeValues = {
   fstype?: string;
@@ -47,16 +47,22 @@ const generateSchema = (availableSize: number) =>
       .test("enoughSpace", "Not enough space", function test() {
         const values: AddLogicalVolumeValues = this.parent;
         const { size, unit } = values;
-        const sizeInBytes = formatBytes(size, unit, {
-          convertTo: "B",
-          roundFunc: "floor",
-        }).value;
+        const sizeInBytes = formatBytes(
+          { value: size, unit: unit },
+          {
+            convertTo: "B",
+            roundFunc: "floor",
+          }
+        ).value;
 
         if (sizeInBytes < MIN_PARTITION_SIZE) {
-          const min = formatBytes(MIN_PARTITION_SIZE, "B", {
-            convertTo: unit,
-            roundFunc: "floor",
-          }).value;
+          const min = formatBytes(
+            { value: MIN_PARTITION_SIZE, unit: "B" },
+            {
+              convertTo: unit,
+              roundFunc: "floor",
+            }
+          ).value;
           return this.createError({
             message: `At least ${min}${unit} is required to add a logical volume`,
             path: "size",
@@ -64,10 +70,13 @@ const generateSchema = (availableSize: number) =>
         }
 
         if (sizeInBytes > availableSize) {
-          const max = formatBytes(availableSize, "B", {
-            convertTo: unit,
-            roundFunc: "floor",
-          }).value;
+          const max = formatBytes(
+            { value: availableSize, unit: "B" },
+            {
+              convertTo: unit,
+              roundFunc: "floor",
+            }
+          ).value;
           return this.createError({
             message: `Only ${max}${unit} available in this volume group`,
             path: "size",
@@ -114,10 +123,13 @@ export const AddLogicalVolume = ({
           mountOptions: "",
           mountPoint: "",
           name: initialName,
-          size: formatBytes(disk.available_size, "B", {
-            convertTo: "GB",
-            roundFunc: "floor",
-          }).value,
+          size: formatBytes(
+            { value: disk.available_size, unit: "B" },
+            {
+              convertTo: "GB",
+              roundFunc: "floor",
+            }
+          ).value,
           tags: [],
           unit: "GB",
         }}
@@ -131,9 +143,12 @@ export const AddLogicalVolume = ({
           const { fstype, mountOptions, mountPoint, name, size, tags, unit } =
             values;
           // Convert size into bytes before dispatching action
-          const convertedSize = formatBytes(size, unit, {
-            convertTo: "B",
-          })?.value;
+          const convertedSize = formatBytes(
+            { value: size, unit: unit },
+            {
+              convertTo: "B",
+            }
+          )?.value;
           const params = {
             name,
             size: convertedSize,
diff --git a/src/app/base/components/node/StorageTables/AvailableStorageTable/AddPartition/AddPartition.tsx b/src/app/base/components/node/StorageTables/AvailableStorageTable/AddPartition/AddPartition.tsx
index 8c8af23ca3d..94fb9d3aed5 100644
--- a/src/app/base/components/node/StorageTables/AvailableStorageTable/AddPartition/AddPartition.tsx
+++ b/src/app/base/components/node/StorageTables/AvailableStorageTable/AddPartition/AddPartition.tsx
@@ -1,3 +1,4 @@
+import { formatBytes } from "@canonical/maas-react-components";
 import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 
@@ -13,7 +14,6 @@ import type { MachineEventErrors } from "@/app/store/machine/types/base";
 import { isMachineDetails } from "@/app/store/machine/utils";
 import type { RootState } from "@/app/store/root/types";
 import type { Disk } from "@/app/store/types/node";
-import { formatBytes } from "@/app/utils";
 
 export type AddPartitionValues = {
   fstype?: string;
@@ -43,16 +43,22 @@ const generateSchema = (availableSize: number) =>
       .test("enoughSpace", "Not enough space", function test() {
         const values: AddPartitionValues = this.parent;
         const { partitionSize, unit } = values;
-        const sizeInBytes = formatBytes(partitionSize, unit, {
-          convertTo: "B",
-          roundFunc: "floor",
-        }).value;
+        const sizeInBytes = formatBytes(
+          { value: partitionSize, unit },
+          {
+            convertTo: "B",
+            roundFunc: "floor",
+          }
+        ).value;
 
         if (sizeInBytes < MIN_PARTITION_SIZE) {
-          const min = formatBytes(MIN_PARTITION_SIZE, "B", {
-            convertTo: unit,
-            roundFunc: "floor",
-          }).value;
+          const min = formatBytes(
+            { value: MIN_PARTITION_SIZE, unit: "B" },
+            {
+              convertTo: unit,
+              roundFunc: "floor",
+            }
+          ).value;
           return this.createError({
             message: `At least ${min}${unit} is required to partition this disk`,
             path: "partitionSize",
@@ -60,10 +66,13 @@ const generateSchema = (availableSize: number) =>
         }
 
         if (sizeInBytes > availableSize) {
-          const max = formatBytes(availableSize, "B", {
-            convertTo: unit,
-            roundFunc: "floor",
-          }).value;
+          const max = formatBytes(
+            { value: availableSize, unit: "B" },
+            {
+              convertTo: unit,
+              roundFunc: "floor",
+            }
+          ).value;
           return this.createError({
             message: `Only ${max}${unit} available in this disk`,
             path: "partitionSize",
@@ -107,10 +116,13 @@ export const AddPartition = ({
           fstype: "",
           mountOptions: "",
           mountPoint: "",
-          partitionSize: formatBytes(disk.available_size, "B", {
-            convertTo: "GB",
-            roundFunc: "floor",
-          }).value,
+          partitionSize: formatBytes(
+            { value: disk.available_size, unit: "B" },
+            {
+              convertTo: "GB",
+              roundFunc: "floor",
+            }
+          ).value,
           unit: "GB",
         }}
         onCancel={closeExpanded}
@@ -124,9 +136,12 @@ export const AddPartition = ({
           const { fstype, mountOptions, mountPoint, partitionSize, unit } =
             values;
           // Convert size into bytes before dispatching action
-          const size = formatBytes(partitionSize, unit, {
-            convertTo: "B",
-          })?.value;
+          const size = formatBytes(
+            { value: partitionSize, unit },
+            {
+              convertTo: "B",
+            }
+          )?.value;
           const params = {
             blockId: disk.id,
             partitionSize: size,
diff --git a/src/app/kvm/components/KVMForms/ComposeForm/StorageTable/PoolSelect/PoolSelect.tsx b/src/app/kvm/components/KVMForms/ComposeForm/StorageTable/PoolSelect/PoolSelect.tsx
index 78684074916..920a4b85a95 100644
--- a/src/app/kvm/components/KVMForms/ComposeForm/StorageTable/PoolSelect/PoolSelect.tsx
+++ b/src/app/kvm/components/KVMForms/ComposeForm/StorageTable/PoolSelect/PoolSelect.tsx
@@ -1,4 +1,4 @@
-import { Meter } from "@canonical/maas-react-components";
+import { Meter, formatBytes } from "@canonical/maas-react-components";
 import { ContextualMenu } from "@canonical/react-components";
 import { useFormikContext } from "formik";
 import { useSelector } from "react-redux";
@@ -10,7 +10,6 @@ import { getSortedPoolsArray } from "@/app/kvm/utils";
 import podSelectors from "@/app/store/pod/selectors";
 import type { Pod, PodDetails } from "@/app/store/pod/types";
 import type { RootState } from "@/app/store/root/types";
-import { formatBytes } from "@/app/utils";
 
 type RequestMap = { [location: string]: number };
 
@@ -23,10 +22,13 @@ type Props = {
 };
 
 const byteDisplay = (bytes: number, roundDown = false): number =>
-  formatBytes(bytes, "B", {
-    convertTo: "GB",
-    roundFunc: roundDown ? "floor" : "round",
-  }).value;
+  formatBytes(
+    { value: bytes, unit: "B" },
+    {
+      convertTo: "GB",
+      roundFunc: roundDown ? "floor" : "round",
+    }
+  ).value;
 
 const generateDropdownContent = (
   pod: PodDetails,
@@ -68,19 +70,26 @@ const generateDropdownContent = (
 
         // Convert requests into bytes
         const requested = requests[name]
-          ? formatBytes(requests[name], "GB", { convertTo: "B" }).value
+          ? formatBytes(
+              { value: requests[name], unit: "GB" },
+              { convertTo: "B" }
+            ).value
           : 0;
         const pendingRequest = isSelected
           ? 0
-          : formatBytes(disk.size, "GB", { convertTo: "B" }).value;
+          : formatBytes({ value: disk.size, unit: "GB" }, { convertTo: "B" })
+              .value;
         // Free amount is the actual space available in the pool, less any
         // existing storage requests (including the current request).
         const freeBytes =
           pool.total - pool.allocated_tracked - pool.allocated_other;
-        const free = formatBytes(freeBytes - requested - pendingRequest, "B", {
-          convertTo: "B",
-          roundFunc: "floor",
-        }).value;
+        const free = formatBytes(
+          { value: freeBytes - requested - pendingRequest, unit: "B" },
+          {
+            convertTo: "B",
+            roundFunc: "floor",
+          }
+        ).value;
 
         return (
           <button
diff --git a/src/app/kvm/components/KVMResourceMeter/KVMResourceMeter.tsx b/src/app/kvm/components/KVMResourceMeter/KVMResourceMeter.tsx
index dfa8e46739e..1ca22201a1d 100644
--- a/src/app/kvm/components/KVMResourceMeter/KVMResourceMeter.tsx
+++ b/src/app/kvm/components/KVMResourceMeter/KVMResourceMeter.tsx
@@ -1,7 +1,6 @@
-import { Meter } from "@canonical/maas-react-components";
+import { Meter, formatBytes } from "@canonical/maas-react-components";
 
 import { COLOURS } from "@/app/base/constants";
-import { formatBytes } from "@/app/utils";
 
 type Props = {
   allocated: number;
diff --git a/src/app/kvm/components/StorageColumn/StoragePopover/StoragePopover.tsx b/src/app/kvm/components/StorageColumn/StoragePopover/StoragePopover.tsx
index 15f749b5418..01c92e818a7 100644
--- a/src/app/kvm/components/StorageColumn/StoragePopover/StoragePopover.tsx
+++ b/src/app/kvm/components/StorageColumn/StoragePopover/StoragePopover.tsx
@@ -1,14 +1,13 @@
 import type { ReactNode } from "react";
 import { Fragment } from "react";
 
-import { Meter } from "@canonical/maas-react-components";
+import { Meter, formatBytes } from "@canonical/maas-react-components";
 
 import Popover from "@/app/base/components/Popover";
 import { COLOURS } from "@/app/base/constants";
 import type { KVMStoragePoolResources } from "@/app/kvm/types";
 import { getSortedPoolsArray } from "@/app/kvm/utils";
 import type { Pod } from "@/app/store/pod/types";
-import { formatBytes } from "@/app/utils";
 
 type Props = {
   children: ReactNode;
@@ -52,10 +51,16 @@ const StoragePopover = ({
             const isDefault = "id" in pool && pool.id === defaultPoolId;
             const freeBytes =
               pool.total - pool.allocated_tracked - pool.allocated_other;
-            const total = formatBytes(pool.total, "B");
-            const allocated = formatBytes(pool.allocated_tracked, "B");
-            const free = formatBytes(freeBytes, "B");
-            const other = formatBytes(pool.allocated_other, "B");
+            const total = formatBytes({ value: pool.total, unit: "B" });
+            const allocated = formatBytes({
+              value: pool.allocated_tracked,
+              unit: "B",
+            });
+            const free = formatBytes({ value: freeBytes, unit: "B" });
+            const other = formatBytes({
+              value: pool.allocated_other,
+              unit: "B",
+            });
 
             return (
               <Fragment key={`storage-pool-${name}`}>
diff --git a/src/app/kvm/components/StorageResources/StorageCards/StorageCards.tsx b/src/app/kvm/components/StorageResources/StorageCards/StorageCards.tsx
index f70a50496a8..612125eb108 100644
--- a/src/app/kvm/components/StorageResources/StorageCards/StorageCards.tsx
+++ b/src/app/kvm/components/StorageResources/StorageCards/StorageCards.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
 
+import { formatBytes } from "@canonical/maas-react-components";
 import { useListener } from "@canonical/react-components/dist/hooks";
 
 import { COLOURS } from "@/app/base/constants";
@@ -8,7 +9,6 @@ import StoragePopover from "@/app/kvm/components/StorageColumn/StoragePopover";
 import type { KVMStoragePoolResources } from "@/app/kvm/types";
 import { calcFreePoolStorage, getSortedPoolsArray } from "@/app/kvm/utils";
 import type { Pod } from "@/app/store/pod/types";
-import { formatBytes } from "@/app/utils";
 
 type Props = {
   defaultPoolId?: Pod["default_storage_pool"];
@@ -58,15 +58,17 @@ const StorageCards = ({ defaultPoolId, pools }: Props): JSX.Element | null => {
         const allocatedWidth = (pool.allocated_tracked / pool.total) * 100;
         const otherWidth =
           allocatedWidth + (pool.allocated_other / pool.total) * 100;
-        const total = formatBytes(pool.total, "B");
+        const total = formatBytes({ value: pool.total, unit: "B" });
         const allocated = formatBytes(
-          pool.allocated_tracked + pool.allocated_other,
-          "B",
+          { value: pool.allocated_tracked + pool.allocated_other, unit: "B" },
           { convertTo: total.unit }
         );
-        const free = formatBytes(calcFreePoolStorage(pool), "B", {
-          convertTo: total.unit,
-        });
+        const free = formatBytes(
+          { value: calcFreePoolStorage(pool), unit: "B" },
+          {
+            convertTo: total.unit,
+          }
+        );
 
         return (
           <StoragePopover
diff --git a/src/app/kvm/components/StorageResources/StorageResources.tsx b/src/app/kvm/components/StorageResources/StorageResources.tsx
index c8bdb653b0c..85ac06864eb 100644
--- a/src/app/kvm/components/StorageResources/StorageResources.tsx
+++ b/src/app/kvm/components/StorageResources/StorageResources.tsx
@@ -1,3 +1,4 @@
+import { formatBytes } from "@canonical/maas-react-components";
 import classNames from "classnames";
 
 import StorageCards from "./StorageCards";
@@ -5,7 +6,6 @@ import StorageMeter from "./StorageMeter";
 
 import type { KVMStoragePoolResources } from "@/app/kvm/types";
 import type { Pod } from "@/app/store/pod/types";
-import { formatBytes } from "@/app/utils";
 
 type Props = {
   allocated: number; // B
@@ -22,8 +22,11 @@ const StorageResources = ({
   other = 0,
   pools,
 }: Props): JSX.Element => {
-  const freeStorage = formatBytes(free, "B");
-  const totalStorage = formatBytes(allocated + other + free, "B");
+  const freeStorage = formatBytes({ value: free, unit: "B" });
+  const totalStorage = formatBytes({
+    value: allocated + other + free,
+    unit: "B",
+  });
   const singlePool = Object.keys(pools).length === 1;
   const noPool = Object.keys(pools).length === 0;
 
diff --git a/src/app/kvm/utils.ts b/src/app/kvm/utils.ts
index 2cc6e0b59cc..1db195a8a18 100644
--- a/src/app/kvm/utils.ts
+++ b/src/app/kvm/utils.ts
@@ -1,10 +1,11 @@
+import { formatBytes } from "@canonical/maas-react-components";
+
 import { KVMSidePanelViews } from "./constants";
 import type { KVMStoragePoolResource, KVMStoragePoolResources } from "./types";
 
 import type { SidePanelContent } from "@/app/base/side-panel-context";
 import type { Pod } from "@/app/store/pod/types";
 import { getSidePanelTitle } from "@/app/store/utils/node/base";
-import { formatBytes } from "@/app/utils";
 
 /**
  * Returns a string with the formatted byte value and unit, e.g 1024 => "1KiB"
diff --git a/src/app/machines/views/MachineList/MachineListTable/StorageColumn/StorageColumn.tsx b/src/app/machines/views/MachineList/MachineListTable/StorageColumn/StorageColumn.tsx
index c9e7ed61e9b..a1d6057f769 100644
--- a/src/app/machines/views/MachineList/MachineListTable/StorageColumn/StorageColumn.tsx
+++ b/src/app/machines/views/MachineList/MachineListTable/StorageColumn/StorageColumn.tsx
@@ -1,12 +1,12 @@
 import { memo } from "react";
 
+import { formatBytes } from "@canonical/maas-react-components";
 import { useSelector } from "react-redux";
 
 import DoubleRow from "@/app/base/components/DoubleRow";
 import machineSelectors from "@/app/store/machine/selectors";
 import type { Machine, MachineMeta } from "@/app/store/machine/types";
 import type { RootState } from "@/app/store/root/types";
-import { formatBytes } from "@/app/utils";
 
 type Props = {
   systemId: Machine[MachineMeta.PK];
@@ -19,7 +19,7 @@ export const StorageColumn = ({ systemId }: Props): JSX.Element | null => {
   if (!machine) {
     return null;
   }
-  const formattedStorage = formatBytes(machine.storage, "GB");
+  const formattedStorage = formatBytes({ value: machine.storage, unit: "GB" });
 
   return (
     <DoubleRow
diff --git a/src/app/utils/formatBytes.test.ts b/src/app/utils/formatBytes.test.ts
index dd183ae807d..69bae1e5ff4 100644
--- a/src/app/utils/formatBytes.test.ts
+++ b/src/app/utils/formatBytes.test.ts
@@ -1,121 +1,4 @@
-import { formatBytes, sizeStringToNumber } from "./formatBytes";
-
-describe("formatBytes", () => {
-  it("correctly formats a value above the unit threshold", () => {
-    expect(formatBytes(900, "KB")).toStrictEqual({ value: 900, unit: "KB" });
-    expect(formatBytes(1100, "KB")).toStrictEqual({ value: 1.1, unit: "MB" });
-  });
-
-  it("correctly formats a value below the unit threshold", () => {
-    expect(formatBytes(1, "MB")).toStrictEqual({ value: 1, unit: "MB" });
-    expect(formatBytes(0.1, "MB")).toStrictEqual({ value: 100, unit: "KB" });
-  });
-
-  it("rounds the value to 2 decimal places by default", () => {
-    expect(formatBytes(1234, "B")).toStrictEqual({
-      value: 1.23,
-      unit: "KB",
-    });
-    expect(formatBytes(1236, "B")).toStrictEqual({
-      value: 1.24,
-      unit: "KB",
-    });
-  });
-
-  it("can round to different decimal places", () => {
-    expect(formatBytes(1234, "B", { decimals: 0 })).toStrictEqual({
-      value: 1,
-      unit: "KB",
-    });
-    expect(formatBytes(1234, "B", { decimals: 1 })).toStrictEqual({
-      value: 1.2,
-      unit: "KB",
-    });
-    expect(formatBytes(1234, "B", { decimals: 2 })).toStrictEqual({
-      value: 1.23,
-      unit: "KB",
-    });
-    expect(formatBytes(1234, "B", { decimals: 3 })).toStrictEqual({
-      value: 1.234,
-      unit: "KB",
-    });
-  });
-
-  it("can be forced to round result down", () => {
-    expect(formatBytes(1236, "B", { roundFunc: "floor" })).toStrictEqual({
-      value: 1.23,
-      unit: "KB",
-    });
-  });
-
-  it("can be forced to round result up", () => {
-    expect(formatBytes(1234, "B", { roundFunc: "ceil" })).toStrictEqual({
-      value: 1.24,
-      unit: "KB",
-    });
-  });
-
-  it("can handle binary units", () => {
-    expect(formatBytes(0, "B", { binary: true })).toStrictEqual({
-      value: 0,
-      unit: "B",
-    });
-    expect(formatBytes(1023, "MiB", { binary: true })).toStrictEqual({
-      value: 1023,
-      unit: "MiB",
-    });
-    expect(formatBytes(1024, "MiB", { binary: true })).toStrictEqual({
-      value: 1,
-      unit: "GiB",
-    });
-  });
-
-  it("can handle negative numbers", () => {
-    expect(formatBytes(-1, "B")).toStrictEqual({
-      value: -1,
-      unit: "B",
-    });
-    expect(formatBytes(-2000, "MB")).toStrictEqual({
-      value: -2,
-      unit: "GB",
-    });
-    expect(formatBytes(-1234, "GB", { decimals: 3 })).toStrictEqual({
-      value: -1.234,
-      unit: "TB",
-    });
-    expect(formatBytes(-1024, "MiB", { binary: true })).toStrictEqual({
-      value: -1,
-      unit: "GiB",
-    });
-  });
-
-  it("can convert to a specific unit", () => {
-    expect(formatBytes(1000000, "B", { convertTo: "B" })).toStrictEqual({
-      value: 1000000,
-      unit: "B",
-    });
-    expect(formatBytes(1000000, "B", { convertTo: "KB" })).toStrictEqual({
-      value: 1000,
-      unit: "KB",
-    });
-    expect(formatBytes(1000000, "B", { convertTo: "MB" })).toStrictEqual({
-      value: 1,
-      unit: "MB",
-    });
-    expect(
-      formatBytes(1000000, "B", { convertTo: "GB", decimals: 3 })
-    ).toStrictEqual({
-      value: 0.001,
-      unit: "GB",
-    });
-    expect(
-      formatBytes(1000000, "B", { convertTo: "TB", decimals: 6 })
-    ).toStrictEqual({
-      value: 0.000001,
-      unit: "TB",
-    });
-  });
-});
+import { sizeStringToNumber } from "./formatBytes";
 
 describe("sizeStringToNumber", () => {
   it("can convert a size string to a number of bytes", () => {
diff --git a/src/app/utils/formatBytes.ts b/src/app/utils/formatBytes.ts
index 53acfe9f47c..0e6271f576c 100644
--- a/src/app/utils/formatBytes.ts
+++ b/src/app/utils/formatBytes.ts
@@ -1,67 +1,4 @@
-export type Byte = { value: number; unit: string };
-
-type FormatBytesConfig = {
-  binary?: boolean;
-  convertTo?: string;
-  decimals?: number;
-  roundFunc?: "ceil" | "floor" | "round";
-};
-
-/**
- * Format bytes to the appropriate/supplied unit at supplied precision.
- *
- * @param value - the value in the supplied byte unit
- * @param unit - the byte unit, e.g. "KB", "TB"
- * @param config - config object
- * @param config.binary - whether formatting should be done in base 10 or 2
- * @param config.convertTo - the unit to convert to
- * @param config.decimals - the decimal places to show, if not a whole number
- * @param config.roundFunc - whether to round the value up or down
- * @returns formatted value and byte unit object
- */
-
-export const formatBytes = (
-  value: number,
-  unit: string,
-  {
-    binary = false,
-    convertTo,
-    decimals = 2,
-    roundFunc = "round",
-  }: FormatBytesConfig = {}
-): Byte => {
-  const negative = value < 0;
-  const parsedValue = Math.abs(value);
-  if (parsedValue === 0) {
-    return { value: 0, unit: convertTo || "B" };
-  }
-  const k = binary ? 1024 : 1000;
-  const sizes = binary
-    ? ["B", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"]
-    : ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-
-  // Convert to bytes.
-  const i = sizes.findIndex((size) => size === unit) || 0;
-  const valueInBytes = parsedValue * Math.pow(k, i);
-
-  // Convert to appropriate unit.
-  const j = convertTo
-    ? sizes.findIndex((size) => size === convertTo)
-    : Math.floor(Math.log(valueInBytes) / Math.log(k));
-  let valueInUnit = valueInBytes / Math.pow(k, j);
-
-  // Truncate value to supplied decimal place if not a whole number.
-  const hasDecimal = valueInUnit % 1 !== 0;
-  if (hasDecimal) {
-    const order = Math.pow(10, decimals);
-    valueInUnit = Math[roundFunc](valueInUnit * order) / order;
-  }
-
-  return {
-    value: negative ? -valueInUnit : valueInUnit,
-    unit: sizes[j],
-  };
-};
+import { formatBytes } from "@canonical/maas-react-components";
 
 /**
  *  Convert a size string (e.g. 1 MB) to a number of bytets
@@ -72,9 +9,12 @@ export const sizeStringToNumber = (sizeString: string = ""): number | null => {
     const regex = /(?<value>\d+(\.\d+)?)(?:\s+?)(?<unit>[a-zA-Z]+)/;
     const groups = sizeString.match(regex)?.groups;
     if (groups) {
-      return formatBytes(Number(groups.value), groups.unit, {
-        convertTo: "B",
-      }).value;
+      return formatBytes(
+        { value: Number(groups.value), unit: groups.unit },
+        {
+          convertTo: "B",
+        }
+      ).value;
     }
   } catch (error) {
     // eslint-disable-next-line no-console
diff --git a/src/app/utils/formatSpeedUnits.ts b/src/app/utils/formatSpeedUnits.ts
index 5f4c99a8f1c..a23d17064ad 100644
--- a/src/app/utils/formatSpeedUnits.ts
+++ b/src/app/utils/formatSpeedUnits.ts
@@ -1,4 +1,4 @@
-import { formatBytes } from "./formatBytes";
+import { formatBytes } from "@canonical/maas-react-components";
 
 /**
  * Format megabytes to an appropriate level of speed.
@@ -8,7 +8,7 @@ import { formatBytes } from "./formatBytes";
 export const formatSpeedUnits = (speedInMbytes: number): string => {
   const adjusted =
     speedInMbytes > 1
-      ? formatBytes(speedInMbytes, "MB")
+      ? formatBytes({ value: speedInMbytes, unit: "MB" })
       : { unit: "MB", value: speedInMbytes };
   return `${Math.floor(adjusted.value)} ${adjusted.unit[0]}bps`;
 };
diff --git a/src/app/utils/index.ts b/src/app/utils/index.ts
index 561a2659c89..9408e2c8e03 100644
--- a/src/app/utils/index.ts
+++ b/src/app/utils/index.ts
@@ -5,7 +5,6 @@ export { breakLines } from "./breakLines";
 export { capitaliseFirst } from "./capitaliseFirst";
 export { chunk } from "./chunk";
 export { extractPowerType } from "./extractPowerType";
-export { formatBytes } from "./formatBytes";
 export { formatErrors } from "./formatErrors";
 export { formatMacAddress } from "./formatMacAddress";
 export { formatSpeedUnits } from "./formatSpeedUnits";
diff --git a/yarn.lock b/yarn.lock
index 328c4499f27..fbe22be8002 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2137,10 +2137,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@canonical/maas-react-components@1.15.0":
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/@canonical/maas-react-components/-/maas-react-components-1.15.0.tgz#c14ec75eeb2bfe2757e45fb3bebf67689865e4df"
-  integrity sha512-0KQ0CXi6D2PURVUerRR/0CAitp3Qf7olUIJwXZnrePlLyas9zmnZ2HyVydlS/z5YptaHExqh/EQT9AGln/3T+A==
+"@canonical/maas-react-components@1.19.1":
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/@canonical/maas-react-components/-/maas-react-components-1.19.1.tgz#244989894315317a764b912288feb96aeb2fac17"
+  integrity sha512-0EASJlSK9Eu4r6RPcDShlawblJHWqECwzst87/LX00Ksz5c0MonRa6wonwfYhzdWI3cAfYgXvLCKdi58m0jKoQ==
 
 "@canonical/macaroon-bakery@1.3.2":
   version "1.3.2"
@@ -13584,18 +13584,7 @@ vite-tsconfig-paths@4.2.1:
     globrex "^0.1.2"
     tsconfck "^2.1.0"
 
-vite@5.0.12:
-  version "5.0.12"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.12.tgz#8a2ffd4da36c132aec4adafe05d7adde38333c47"
-  integrity sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==
-  dependencies:
-    esbuild "^0.19.3"
-    postcss "^8.4.32"
-    rollup "^4.2.0"
-  optionalDependencies:
-    fsevents "~2.3.3"
-
-"vite@^3.0.0 || ^4.0.0 || ^5.0.0-0", "vite@^3.1.0 || ^4.0.0 || ^5.0.0-0":
+vite@5.0.12, "vite@^3.0.0 || ^4.0.0 || ^5.0.0-0", "vite@^3.1.0 || ^4.0.0 || ^5.0.0-0":
   version "5.0.12"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.12.tgz#8a2ffd4da36c132aec4adafe05d7adde38333c47"
   integrity sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==