From e65f79ad7383fab7bc1e8d0c48deaab744ca2288 Mon Sep 17 00:00:00 2001
From: Mauricio Uyaguari <lmauricio12@gmail.com>
Date: Wed, 29 Dec 2021 13:46:24 -0500
Subject: [PATCH] temp

---
 packages/legend-studio/package.json           |  1 +
 .../editor/side-bar/LocalChanges.tsx          | 21 ++++++++-----
 yarn.lock                                     | 30 +++++++++++++++++++
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/packages/legend-studio/package.json b/packages/legend-studio/package.json
index bf255ef5a29..eaa19ffdb77 100644
--- a/packages/legend-studio/package.json
+++ b/packages/legend-studio/package.json
@@ -62,6 +62,7 @@
     "react-dnd": "14.0.4",
     "react-dnd-html5-backend": "14.0.2",
     "react-dom": "17.0.2",
+    "react-dropzone": "11.4.2",
     "react-hotkeys": "2.0.0",
     "react-icons": "4.3.1",
     "react-resize-detector": "6.7.7",
diff --git a/packages/legend-studio/src/components/editor/side-bar/LocalChanges.tsx b/packages/legend-studio/src/components/editor/side-bar/LocalChanges.tsx
index 3b494d67b50..eef8441ffe8 100644
--- a/packages/legend-studio/src/components/editor/side-bar/LocalChanges.tsx
+++ b/packages/legend-studio/src/components/editor/side-bar/LocalChanges.tsx
@@ -28,12 +28,18 @@ import { entityDiffSorter } from '../../../stores/EditorSDLCState';
 import { useEditorStore } from '../EditorStoreProvider';
 import { useApplicationStore } from '@finos/legend-application';
 import { Dialog } from '@material-ui/core';
+import Dropzone, { DropzoneRef } from 'react-dropzone';
+import React, { ReactElement, ReactNode } from 'react';
 
 const PatchLoaderEditor = observer(() => {
   const editorStore = useEditorStore();
   const localChangesState = editorStore.localChangesState;
   const patchState = localChangesState.patchLoaderState;
   const onClose = (): void => patchState.closeModal();
+
+  const handleDrop = (acceptedFiles: File[]): void => {
+    console.log(acceptedFiles);
+  };
   const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     const file = event.target.files?.[0];
     if (file) {
@@ -45,7 +51,6 @@ const PatchLoaderEditor = observer(() => {
   };
   const deleteChange = (change: EntityChange): void =>
     patchState.deleteChange(change);
-
   return (
     <Dialog onClose={onClose} open={patchState.showModal}>
       <div className="modal modal--dark modal--scrollable patch-loader">
@@ -57,12 +62,14 @@ const PatchLoaderEditor = observer(() => {
         <div className="modal__body">
           <PanelLoadingIndicator isLoading={patchState.isLoadingChanges} />
           <div>
-            <input
-              id="upload-file"
-              type="file"
-              name="myFiles"
-              onChange={onChange}
-            />
+            <Dropzone onDrop={handleDrop}>
+              {({ getRootProps, getInputProps }): ReactElement => (
+                <div {...getRootProps({ className: 'dropzone' })}>
+                  <input {...getInputProps()} />
+                  <p>{`Drag'n'drop file, or click to upload file`}</p>
+                </div>
+              )}
+            </Dropzone>
           </div>
           {Boolean(patchState.overiddingChanges.length) && (
             <div className="panel__content__form__section">
diff --git a/yarn.lock b/yarn.lock
index 46017ac05a9..d971ca72fea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2674,6 +2674,7 @@ __metadata:
     react-dnd: 14.0.4
     react-dnd-html5-backend: 14.0.2
     react-dom: 17.0.2
+    react-dropzone: 11.4.2
     react-hotkeys: 2.0.0
     react-icons: 4.3.1
     react-resize-detector: 6.7.7
@@ -4829,6 +4830,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"attr-accept@npm:^2.2.1":
+  version: 2.2.2
+  resolution: "attr-accept@npm:2.2.2"
+  checksum: 496f7249354ab53e522510c1dc8f67a1887382187adde4dc205507d2f014836a247073b05e9d9ea51e2e9c7f71b0d2aa21730af80efa9af2d68303e5f0565c4d
+  languageName: node
+  linkType: hard
+
 "autoprefixer@npm:10.4.0":
   version: 10.4.0
   resolution: "autoprefixer@npm:10.4.0"
@@ -7484,6 +7492,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-selector@npm:^0.2.2":
+  version: 0.2.4
+  resolution: "file-selector@npm:0.2.4"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: 83341e7416352c7de0caf433b33c8d007d3c298c17d6ba0e70168af82bb045d905ddd6f4bc3ca764a2035c6f18eae7f52223dc6a784056f61b8391c351f88323
+  languageName: node
+  linkType: hard
+
 "fill-range@npm:^7.0.1":
   version: 7.0.1
   resolution: "fill-range@npm:7.0.1"
@@ -12562,6 +12579,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dropzone@npm:11.4.2":
+  version: 11.4.2
+  resolution: "react-dropzone@npm:11.4.2"
+  dependencies:
+    attr-accept: ^2.2.1
+    file-selector: ^0.2.2
+    prop-types: ^15.7.2
+  peerDependencies:
+    react: ">= 16.8"
+  checksum: f8dc6af69193133efe30ed11dd8c2212a180abd3833e91d03dab4bdc9546d47dcad311d7f72b4968b7d016871884555b9e16f7a490913b78dbfec8ce8f569193
+  languageName: node
+  linkType: hard
+
 "react-hotkeys@npm:2.0.0":
   version: 2.0.0
   resolution: "react-hotkeys@npm:2.0.0"