From 77ba36cb3d41ba5ecb9f0ae52d3148f2300ea8a2 Mon Sep 17 00:00:00 2001
From: fichtnerma <72387685+fichtnerma@users.noreply.github.com>
Date: Tue, 14 Jan 2025 15:21:47 +0100
Subject: [PATCH] Support kB and MB when displaying the size of a file (#2823)

---
 demo/site/package.json                        |  1 +
 .../src/common/blocks/CallToActionBlock.tsx   | 22 +++++++++++++------
 demo/site/src/common/blocks/TextLinkBlock.tsx |  9 ++------
 pnpm-lock.yaml                                |  8 +++++++
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/demo/site/package.json b/demo/site/package.json
index 7329918529..1284bfa300 100644
--- a/demo/site/package.json
+++ b/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",
diff --git a/demo/site/src/common/blocks/CallToActionBlock.tsx b/demo/site/src/common/blocks/CallToActionBlock.tsx
index c5a3c75d92..729eeb8805 100644
--- a/demo/site/src/common/blocks/CallToActionBlock.tsx
+++ b/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" },
 );
diff --git a/demo/site/src/common/blocks/TextLinkBlock.tsx b/demo/site/src/common/blocks/TextLinkBlock.tsx
index e7fff8e330..598748f07f 100644
--- a/demo/site/src/common/blocks/TextLinkBlock.tsx
+++ b/demo/site/src/common/blocks/TextLinkBlock.tsx
@@ -1,6 +1,7 @@
 "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";
@@ -8,13 +9,7 @@ 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>;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c85ceb8d00..41cff3228b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -679,6 +679,9 @@ importers:
       express:
         specifier: ^4.0.0
         version: 4.18.2
+      filesize:
+        specifier: ^10.1.6
+        version: 10.1.6
       fs-extra:
         specifier: ^9.0.0
         version: 9.1.0
@@ -22415,6 +22418,11 @@ packages:
       minimatch: 5.1.6
     dev: true
 
+  /filesize@10.1.6:
+    resolution: {integrity: sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==}
+    engines: {node: '>= 10.4.0'}
+    dev: false
+
   /filesize@8.0.7:
     resolution: {integrity: sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==}
     engines: {node: '>= 0.4.0'}