From f72918cf492b6cc06b4d0ebce7920f403722f88f Mon Sep 17 00:00:00 2001
From: Zhihao Cui <5257855+origami-z@users.noreply.github.com>
Date: Thu, 13 Jun 2024 11:21:38 +0100
Subject: [PATCH] Fix file drop zone not responding to file browser (#42)

---
 .../ui-src/__tests__/SimpleView.spec.tsx      | 55 +++++++++++++++++++
 .../copy-manager/ui-src/view/SimpleView.tsx   |  7 +--
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/packages/copy-manager/ui-src/__tests__/SimpleView.spec.tsx b/packages/copy-manager/ui-src/__tests__/SimpleView.spec.tsx
index b89979d..d51b2c1 100644
--- a/packages/copy-manager/ui-src/__tests__/SimpleView.spec.tsx
+++ b/packages/copy-manager/ui-src/__tests__/SimpleView.spec.tsx
@@ -65,6 +65,61 @@ $2:1,Page 1,Heading,Body,,NONE,0
 
     await userEvents.click(screen.getByRole("button", { name: "Update" }));
 
+    expect(window.parent.postMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pluginMessage: {
+          type: "update-content-with-lang",
+          lang: "v2", // selected 2 lines above
+          persistInFigma: true,
+        },
+      }),
+      "*"
+    );
+  });
+  test("Pick a file from button and change revision via dropdown", async () => {
+    const csvData = `id,page,name,characters,v2,listOption,headingLevel
+$2:1,Page 1,Page Title,Features,Features v2,NONE,1
+$2:1,Page 1,Heading,Body,,NONE,0
+    `;
+    const file = new File([csvData as BlobPart], "chucknorris.csv", {
+      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    });
+    const fileInput = document.querySelector(`input[type='file']`);
+    fireEvent.change(fileInput!, {
+      target: { files: [file] },
+    });
+
+    await waitFor(() => {
+      expect(window.parent.postMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pluginMessage: {
+            type: "detect-available-lang-from-csv",
+            csvString: csvData,
+          },
+        }),
+        "*"
+      );
+    });
+
+    fireEvent(
+      window,
+      new MessageEvent("message", {
+        data: {
+          pluginMessage: {
+            type: "available-lang-from-csv",
+            langs: ["v2"],
+          },
+        },
+      })
+    );
+
+    await userEvents.click(
+      await screen.findByRole("combobox", { name: "Version" })
+    );
+    await userEvents.click(screen.getByRole("option", { name: "v2" }));
+
+    await userEvents.click(screen.getByRole("button", { name: "Update" }));
+
     expect(window.parent.postMessage).toHaveBeenCalledWith(
       expect.objectContaining({
         pluginMessage: {
diff --git a/packages/copy-manager/ui-src/view/SimpleView.tsx b/packages/copy-manager/ui-src/view/SimpleView.tsx
index 22e71c8..de6e678 100644
--- a/packages/copy-manager/ui-src/view/SimpleView.tsx
+++ b/packages/copy-manager/ui-src/view/SimpleView.tsx
@@ -82,10 +82,7 @@ export const SimpleView = () => {
     );
   };
 
-  const onFileDrop = (
-    _: React.DragEvent<HTMLDivElement>,
-    files: readonly File[]
-  ) => {
+  const onFileDrop = (_: any, files: readonly File[]) => {
     if (files.length && files[0] !== null) {
       const csv = files[0];
       setCsvFile(csv);
@@ -126,7 +123,7 @@ export const SimpleView = () => {
         >
           <FileDropZoneIcon />
           <strong>Drop files here or</strong>
-          <FileDropZoneTrigger accept=".csv" />
+          <FileDropZoneTrigger accept=".csv" onChange={onFileDrop} />
         </FileDropZone>
       ) : (
         <StackLayout gap={1}>