Support kB and MB when displaying the size of a file (#2823)

demo/site/package.json

@@ -34,6 +34,7 @@
         "@opentelemetry/sdk-node": "^0.53.0",
         "cache-manager": "^5.5.3",
         "express": "^4.0.0",
+        "filesize": "^10.1.6",
         "fs-extra": "^9.0.0",
         "graphql": "^15.0.0",
         "graphql-tag": "^2.12.6",

demo/site/src/common/blocks/CallToActionBlock.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { PropsWithData, withPreview } from "@comet/cms-site";
 import { CallToActionBlockData } from "@src/blocks.generated";
+import { filesize } from "filesize";
 
 import { Button, ButtonVariant } from "../components/Button";
 import { HiddenIfInvalidLink } from "../helpers/HiddenIfInvalidLink";
@@ -13,12 +14,19 @@ const buttonVariantMap: Record<CallToActionBlockData["variant"], ButtonVariant>
 };
 
 export const CallToActionBlock = withPreview(
-    ({ data: { textLink, variant } }: PropsWithData<CallToActionBlockData>) => (
-        <HiddenIfInvalidLink link={textLink.link}>
-            <Button as={LinkBlock} data={textLink.link} variant={buttonVariantMap[variant]}>
-                {textLink.text}
-            </Button>
-        </HiddenIfInvalidLink>
-    ),
+    ({ data: { textLink, variant } }: PropsWithData<CallToActionBlockData>) => {
+        const linkBlock = textLink.link.block;
+        let buttonText = textLink.text;
+        if (linkBlock && linkBlock.type === "damFileDownload" && "file" in linkBlock.props && linkBlock.props.file) {
+            buttonText = `${buttonText} (${filesize(linkBlock?.props.file?.size)})`;
+        }
+        return (
+            <HiddenIfInvalidLink link={textLink.link}>
+                <Button as={LinkBlock} data={textLink.link} variant={buttonVariantMap[variant]}>
+                    {buttonText}
+                </Button>
+            </HiddenIfInvalidLink>
+        );
+    },
     { label: "Call To Action" },
 );

demo/site/src/common/blocks/TextLinkBlock.tsx

@@ -1,20 +1,15 @@
 "use client";
 import { PropsWithData, withPreview } from "@comet/cms-site";
 import { TextLinkBlockData } from "@src/blocks.generated";
+import { filesize } from "filesize";
 import styled from "styled-components";
 
 import { LinkBlock } from "./LinkBlock";
 
 export const TextLinkBlock = withPreview(
     ({ data: { link, text } }: PropsWithData<TextLinkBlockData>) => {
         if (link.block && link.block.type === "damFileDownload" && "file" in link.block.props && link.block.props.file) {
-            return (
-                <Link data={link}>
-                    <>
-                        {text} ({Math.round(link.block.props.file.size / 1024)} KB)
-                    </>
-                </Link>
-            );
+            return <Link data={link}>{`${text} (${filesize(link.block.props.file.size)})`}</Link>;
         }
 
         return <Link data={link}>{text}</Link>;