Refactoring: rename Number component to FileSize

This represents its purpose better and isn't so confusing

Author: MytsV

src/component-library/Pages/DID/DIDMetaView.tsx

@@ -2,7 +2,7 @@ import { DIDTypeTag } from "../../Tags/DIDTypeTag"
 import { BoolTag } from "../../Tags/BoolTag"
 import { twMerge } from "tailwind-merge"
 import { AvailabilityTag } from "../../Tags/AvailabilityTag"
-import { Number } from "../../Text/Content/Number"
+import { FileSize } from "../../Text/Content/FileSize"
 import { DIDMetaViewModel } from "@/lib/infrastructure/data/view-model/did"
 var format = require("date-format")
 
@@ -96,7 +96,7 @@ export const DIDMetaView = (
                 <tbody className="w-full" aria-label="File Information">
                     <tr aria-label="Size">
                         <Titletd>Size</Titletd>
-                        <Contenttd><Number number={meta.bytes as number} /></Contenttd>
+                        <Contenttd><FileSize bytesNumber={meta.bytes as number} /></Contenttd>
                     </tr>
                     <tr aria-label="GUID">
                         <Titletd>GUID</Titletd>

src/component-library/Pages/DID/PageDIDDatasetReplicas.tsx

@@ -3,7 +3,7 @@ import { createColumnHelper } from "@tanstack/react-table"
 import { useEffect, useState } from "react"
 
 import { DateTag } from "../../Tags/DateTag";
-import { Number } from "../../Text/Content/Number";
+import { FileSize } from "../../Text/Content/FileSize";
 import { ReplicaStateTag } from "../../Tags/ReplicaStateTag";
 import { ReplicaState } from "@/lib/core/entity/rucio";
 import { RSETag } from "../../Tags/RSETag";
@@ -118,7 +118,7 @@ export const PageDIDDatasetReplicas = (
                             "font-mono text-right dark:text-text-0 text-text-1000",
                         )}
                     >
-                        <Number number={info.row.original.available_bytes} />
+                        <FileSize bytesNumber={info.row.original.available_bytes} />
                     </span>
                 )
             },

src/component-library/Pages/Dashboard/Widgets/WidgetUsedquota.tsx

@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
 import { Pie } from 'react-chartjs-2';
 import { BoolTag } from "@/component-library/Tags/BoolTag";
-import { Number } from "@/component-library/Text/Content/Number";
+import { FileSize } from "@/component-library/Text/Content/FileSize";
 import { Contenttd, Generaltable, Titleth } from "@/component-library/Helpers/Metatable";
 import tailwind from "@/tailwind"
 ChartJS.register(ArcElement, Tooltip, Legend);
@@ -69,15 +69,15 @@ const RSEPie: React.FC<JSX.IntrinsicElements["div"] & {
                 </tr>
                 <tr>
                     <Titleth>Total Space</Titleth>
-                    <Contenttd><Number number={input.total} /></Contenttd>
+                    <Contenttd><FileSize bytesNumber={input.total} /></Contenttd>
                 </tr>
                 <tr>
                     <Titleth>Space Used</Titleth>
-                    <Contenttd><Number number={input.used} /></Contenttd>
+                    <Contenttd><FileSize bytesNumber={input.used} /></Contenttd>
                 </tr>
                 <tr>
                     <Titleth>Quota</Titleth>
-                    <Contenttd><Number number={input.quota} /></Contenttd>
+                    <Contenttd><FileSize bytesNumber={input.quota} /></Contenttd>
                 </tr>
             </Generaltable>
         </div>

src/component-library/Pages/Rule/1_DIDs/CreateRuleDIDTable.tsx

@@ -1,7 +1,7 @@
 import { DIDType } from "@/lib/core/entity/rucio";
 import { createColumnHelper } from "@tanstack/react-table";
 import { DIDTypeTag } from "../../../Tags/DIDTypeTag";
-import { Number } from "../../../Text/Content/Number";
+import { FileSize } from "../../../Text/Content/FileSize";
 import { P } from "../../../Text/Content/P";
 import { StreamedTable } from "../../../StreamedTables/StreamedTable";
 import { TableFilterString } from "../../../StreamedTables/TableFilterString";
@@ -82,7 +82,7 @@ export const CreateRuleDIDTable = (
             },
             cell: (info) => {
                 return <p className="font-mono dark:text-text-200 text-text-800">
-                    <Number number={info.getValue()} />
+                    <FileSize bytesNumber={info.getValue()} />
                 </p>
             },
             meta: {

src/component-library/Pages/Rule/2_RSEs/CreateRuleRSETable.tsx

@@ -3,7 +3,7 @@ import { StreamedTable } from "../../../StreamedTables/StreamedTable";
 import { createColumnHelper, Row } from "@tanstack/react-table";
 import { H3 } from "../../../Text/Headings/H3";
 import { P } from "../../../Text/Content/P";
-import { Number } from "../../../Text/Content/Number";
+import { FileSize } from "../../../Text/Content/FileSize";
 import { TableSortUpDown } from "../../../StreamedTables/TableSortUpDown";
 import { useState, useEffect } from "react";
 import { TableFilterString } from "../../../StreamedTables/TableFilterString";
@@ -80,7 +80,7 @@ export const CreateRuleRSETable = (
                         isNoQuotaLeftFunction(info.row) ? "text-base-error-500 dark:text-base-error-500 font-bold" : "text-text-1000 dark:text-text-0",
                         "text-right"
                     )}>
-                        <Number number={info.getValue()} />
+                        <FileSize bytesNumber={info.getValue()} />
                     </P>
                 )
             },
@@ -108,7 +108,7 @@ export const CreateRuleRSETable = (
                         isNoQuotaLeftFunction(info.row) ? "text-base-error-500 dark:text-base-error-500 font-bold" : "text-text-1000 dark:text-text-0",
                         "text-right"
                     )}>
-                        <Number number={info.getValue()} />
+                        <FileSize bytesNumber={info.getValue()} />
                     </P>
                 )
             },
@@ -129,7 +129,7 @@ export const CreateRuleRSETable = (
                 )
             },
             cell: (props) => {
-                return <P mono className="text-right text-text-1000 dark:text-text-0"><Number number={props.row.original.bytes_limit} /></P>
+                return <P mono className="text-right text-text-1000 dark:text-text-0"><FileSize bytesNumber={props.row.original.bytes_limit} /></P>
             },
             meta: {
                 style: "w-24"

src/component-library/Pages/Rule/4_Summary/DIDSummaryTable.tsx

@@ -3,7 +3,7 @@ import { createColumnHelper } from "@tanstack/react-table"
 import { BasicStatusTag, BasicStatusTagProps } from "@/component-library/Tags/BasicStatusTag"
 import { P } from "@/component-library/Text/Content/P"
 import { TableSortUpDown } from "@/component-library/StreamedTables/TableSortUpDown"
-import { Number } from "@/component-library/Text/Content/Number"
+import { FileSize } from "@/component-library/Text/Content/FileSize"
 import { twMerge } from "tailwind-merge"
 import { generateDerivedDIDName, generateNewScope } from "@/lib/core/utils/did-utils"
 import { AccountInfo, DID } from "@/lib/core/entity/rucio"
@@ -201,7 +201,7 @@ export const DIDSummaryTable = (props: {
                     <div className={twMerge("flex flex-col items-left",
                         "text-right text-text-1000 dark:text-text-100"
                     )}>
-                        <Number number={value} />
+                        <FileSize bytesNumber={value} />
                     </div>
                 )
             },
@@ -235,7 +235,7 @@ export const DIDSummaryTable = (props: {
                     <div className={twMerge("flex flex-col items-left",
                         "text-right text-text-1000 dark:text-text-100"
                     )}>
-                        <Number number={value} />
+                        <FileSize bytesNumber={value} />
                     </div>
                 )
             },
@@ -327,14 +327,14 @@ export const DIDSummaryTable = (props: {
                         <tr className="border-t dark:border-neutral-400 text-text-1000 dark:text-text-0">
                             <td className="w-56 pl-2 py-1">Total Size</td>
                             <td className="pl-2 py-1">{
-                                typeof totalSize === 'number' ? <Number number={totalSize} /> : totalSize
+                                typeof totalSize === 'number' ? <FileSize bytesNumber={totalSize} /> : totalSize
                             }</td>
                         </tr>
                         <tr className="border-t dark:border-neutral-400 text-text-1000 dark:text-text-0">
                             <td className="w-56 pl-2 py-1">Total Requested Size</td>
                             <td className="pl-2 py-1">
                                 {
-                                    typeof totalRequestedSize === 'number' ? <Number number={totalRequestedSize} /> : totalRequestedSize
+                                    typeof totalRequestedSize === 'number' ? <FileSize bytesNumber={totalRequestedSize} /> : totalRequestedSize
                                 }
                             </td>
                         </tr>

src/component-library/Pages/Rule/4_Summary/RSESummaryTable.tsx

@@ -5,7 +5,7 @@ import { P } from "@/component-library/Text/Content/P"
 import { RSEAccountUsageLimitViewModel } from "@/lib/infrastructure/data/view-model/rse"
 import { createColumnHelper } from "@tanstack/react-table"
 import { twMerge } from "tailwind-merge"
-import { Number } from "@/component-library/Text/Content/Number"
+import { FileSize } from "@/component-library/Text/Content/FileSize"
 
 type TRSESummaryTableRow = {
     rseName: string,
@@ -95,7 +95,7 @@ export const RSESummaryTable = (props: {
                     <div className={twMerge("flex flex-col items-left",
                         "text-left dark:text-text-0 text-text-1000"
                     )}>
-                        <Number number={value} />
+                        <FileSize bytesNumber={value} />
                     </div>
                 )
             },
@@ -121,7 +121,7 @@ export const RSESummaryTable = (props: {
                         "text-left",
                         "dark:text-text-0 text-text-1000"
                     )}>
-                        <Number number={value} />
+                        <FileSize bytesNumber={value} />
                     </div>
                 )
             },

src/component-library/Text/Content/Number.tsx src/component-library/Text/Content/FileSize.tsx

@@ -1,16 +1,16 @@
 import { twMerge } from "tailwind-merge";
 
-type ByteProps = JSX.IntrinsicElements["span"] & { number: number; decimalPlaces?: number }
+type ByteProps = JSX.IntrinsicElements["span"] & { bytesNumber: number; decimalPlaces?: number }
 
-export const Number: React.FC<ByteProps> = (
+export const FileSize: React.FC<ByteProps> = (
     {
-        number,
+        bytesNumber,
         decimalPlaces,
         ...props
     }
 ) => {
     const {className, ...otherprops} = props
-    if (number === 0) return (
+    if (bytesNumber === 0) return (
         <span
             className={twMerge(
                 className ?? "",
@@ -20,7 +20,7 @@ export const Number: React.FC<ByteProps> = (
             0
         </span>
     )
-    if(number === Infinity) return (
+    if(bytesNumber === Infinity) return (
         <span
             className={twMerge(
                 className ?? "",
@@ -31,7 +31,7 @@ export const Number: React.FC<ByteProps> = (
             Infinity
         </span>
     )
-    if (isNaN(+number)) return (
+    if (isNaN(+bytesNumber)) return (
         <span
             className={twMerge(
                 className ?? "",
@@ -47,7 +47,7 @@ export const Number: React.FC<ByteProps> = (
     const dm = decimalPlaces ?? 1
     const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
 
-    const absnum = Math.abs(number)
+    const absnum = Math.abs(bytesNumber)
     const i = Math.floor(Math.log(absnum) / Math.log(base))
 
     return (
@@ -57,7 +57,7 @@ export const Number: React.FC<ByteProps> = (
             )}
             {...otherprops}
         >
-            {number < 0 ? "-" : ""}{`${parseFloat((absnum / Math.pow(base, i)).toFixed(dm))} ${sizes[i]}`}
+            {bytesNumber < 0 ? "-" : ""}{`${parseFloat((absnum / Math.pow(base, i)).toFixed(dm))} ${sizes[i]}`}
         </span>
     )
 }

src/component-library/Text/Content/Number.stories.tsx

@@ -1,7 +1,7 @@
 
 import {StoryFn, Meta} from '@storybook/react'
 
-import {Number as L} from './Number'
+import {FileSize as L} from './FileSize'
 
 export default {
     title: 'Components/Text/Content',
@@ -12,6 +12,6 @@ const Template: StoryFn<typeof L> = args => <L {...args} />
 
 export const Number = Template.bind({})
 Number.args = {
-    number: 2000,
+    bytesNumber: 2000,
     decimalPlaces: 2,
 }