feat: add drag and drop support to Upload Style area (#1852)

## Feat: Add drag and drop support to Upload Style area

Closes #911

---

### Problem
The Upload Style area only supported click-to-upload. Users could not
drag and drop a JSON file directly onto it.

### Fix
Added `onDragOver` and `onDrop` event handlers to the Upload Style area.
The dropped file is passed to the existing file reading logic already
used by the Upload button. A visual highlight is shown when dragging
over the area.

cypress/e2e/maputnik-cypress-helper.ts

@@ -43,6 +43,12 @@ export default class MaputnikCypressHelper {
         }
       });
     },
+    dropFileByFixture: (fixture: string, dropzoneTestId: string) => {
+      this.helper.get.elementByTestId(dropzoneTestId).selectFile("cypress/fixtures/" + fixture, {
+        action: "drag-drop",
+        force: true,
+      });
+    },
     ...this.helper.when,
   };
 

cypress/e2e/maputnik-driver.ts

@@ -143,7 +143,12 @@ export class MaputnikDriver {
     },
     chooseExampleFile: () => {
       this.helper.given.fixture("example-style.json", "example-style.json");
-      this.helper.when.openFileByFixture("example-style.json", "modal:open.file.button", "modal:open.file.input");
+      this.helper.when.openFileByFixture("example-style.json", "modal:open.dropzone", "modal:open.file.input");
+      this.helper.when.wait(200);
+    },
+    dropExampleFile: () => {
+      this.helper.given.fixture("example-style.json", "example-style.json");
+      this.helper.when.dropFileByFixture("example-style.json", "modal:open.dropzone");
       this.helper.when.wait(200);
     },
     setStyle: (

cypress/e2e/modals.cy.ts

@@ -23,6 +23,11 @@ describe("modals", () => {
       then(get.fixture("example-style.json")).shouldEqualToStoredStyle();
     });
 
+    it("upload via drag and drop", () => {
+      when.dropExampleFile();
+      then(get.fixture("example-style.json")).shouldEqualToStoredStyle();
+    });
+
     describe("when click open url", () => {
       beforeEach(() => {
         const styleFileUrl = get.exampleFileUrl();