[CCUBE-2188][GZ] refactor file upload

e2e/nextjs-app/src/app/components/file-upload/editable.e2e.tsx

@@ -2,49 +2,80 @@
 
 import type { FileItemProps } from "@lifesg/react-design-system/file-upload";
 import { FileUpload } from "@lifesg/react-design-system/file-upload";
-import { useState } from "react";
+import { useRef, useState } from "react";
+
+const THUMBNAIL_URL = "/sample.jpg";
 
 const INITIAL_ITEMS: FileItemProps[] = [
     {
         id: "editable-image",
         name: "editable-image.jpg",
         size: 5120,
         type: "image/jpeg",
-        thumbnailImageDataUrl: "/sample.jpg",
+        thumbnailImageDataUrl: THUMBNAIL_URL,
+    },
+    {
+        id: "described-image",
+        name: "described-image.jpg",
+        size: 3072,
+        type: "image/jpeg",
+        thumbnailImageDataUrl: THUMBNAIL_URL,
+        description: "Already has a description",
+    },
+    {
+        id: "another-image",
+        name: "another-image.jpg",
+        size: 2048,
+        type: "image/jpeg",
+        thumbnailImageDataUrl: THUMBNAIL_URL,
+        description: "Another described image",
     },
 ];
 
 export default function Story() {
+    const nextId = useRef(0);
     const [fileItems, setFileItems] = useState<FileItemProps[]>(INITIAL_ITEMS);
 
-    const handleEdit = (updatedItem: FileItemProps) => {
-        setFileItems((prevItems) => {
-            return prevItems.map((item) => {
-                if (item.id === updatedItem.id) {
-                    return updatedItem;
-                }
-
-                return item;
-            });
+    const handleChange = (files: File[]) => {
+        const newItems = files.map((file) => {
+            nextId.current += 1;
+            return {
+                id: `upload-file-${nextId.current}`,
+                name: file.name,
+                size: file.size,
+                type: file.type,
+            };
         });
+        setFileItems((prev) => prev.concat(newItems));
+    };
+
+    const handleEdit = (updatedItem: FileItemProps) => {
+        setFileItems((prevItems) =>
+            prevItems.map((item) =>
+                item.id === updatedItem.id ? updatedItem : item
+            )
+        );
     };
 
     const handleDelete = (deletedItem: FileItemProps) => {
-        setFileItems((prevItems) => {
-            return prevItems.filter((item) => item.id !== deletedItem.id);
-        });
+        setFileItems((prevItems) =>
+            prevItems.filter((item) => item.id !== deletedItem.id)
+        );
     };
 
     return (
         <FileUpload
             data-testid="file-upload"
-            title="Editable file items"
-            description="Add a description, save it, and reopen edit mode."
+            title="Editable and sortable file items"
+            description="Add a description, save it, and reopen edit mode. Sort is disabled while any item is in edit mode."
             fileItems={fileItems}
             editableFileItems
+            sortable
             fileDescriptionMaxLength={200}
+            onChange={handleChange}
             onEdit={handleEdit}
             onDelete={handleDelete}
+            onSort={setFileItems}
         />
     );
 }

e2e/tests/components/file-upload/file-upload.e2e.spec.ts

@@ -328,9 +328,21 @@ test.describe("FileUpload", () => {
                     story.locators.internal.editDisplay("editable-image")
                 ).toBeVisible();
 
+                const dragHandle = story.locators.fileUpload.locator(
+                    '[data-testid$="-drag-handle"]'
+                );
+                await expect(dragHandle).toHaveCount(0);
+
                 await compareScreenshot(story, "mount");
             });
 
+            await test.step("Sort disabled while an item is in edit mode", async () => {
+                const dragHandle = story.locators.fileUpload.locator(
+                    '[data-testid$="-drag-handle"]'
+                );
+                await expect(dragHandle).toHaveCount(0);
+            });
+
             await test.step("Save description", async () => {
                 await story.locators.internal
                     .textarea("editable-image")
@@ -350,10 +362,20 @@ test.describe("FileUpload", () => {
                 });
             });
 
+            await test.step("Sort enabled after all items in display mode", async () => {
+                const dragHandle = story.locators.fileUpload.locator(
+                    '[data-testid$="-drag-handle"]'
+                );
+                await expect(dragHandle.first()).toBeVisible();
+            });
+
             await test.step("Cancel edit keeps saved description", async () => {
                 await story.locators.internal
                     .editButton("editable-image")
                     .click();
+                await expect(
+                    story.locators.internal.textarea("editable-image")
+                ).toBeVisible();
                 await story.locators.internal
                     .textarea("editable-image")
                     .fill("Temporary change");
@@ -367,6 +389,13 @@ test.describe("FileUpload", () => {
                     )
                 ).toBeVisible();
             });
+
+            await test.step("Sort restored after cancel", async () => {
+                const dragHandle = story.locators.fileUpload.locator(
+                    '[data-testid$="-drag-handle"]'
+                );
+                await expect(dragHandle.first()).toBeVisible();
+            });
         });
     });
 
@@ -467,7 +496,7 @@ test.describe("FileUpload", () => {
             await story.init("long-description", { size: "mobile" });
         });
 
-        test("Long description text", async ({ story }) => {
+        test("Long description text - mobile", async ({ story }) => {
             await compareScreenshot(story, "mount", {
                 locator: story.locators.fileUpload,
             });