Create a dropzone component for dragging and dropping jupyter files into canvas

[bourdakos1]

Notes:

• adds eslint-plugin-react-hooks for checking react hooks
• turns off react/prop-types because we use TypeScript and it seems like we don't use PropTypes

Developer's Certificate of Origin 1.1

   By making a contribution to this project, I certify that:

   (a) The contribution was created in whole or in part by me and I
       have the right to submit it under the Apache License 2.0; or

   (b) The contribution is based upon previous work that, to the best
       of my knowledge, is covered under an appropriate open source
       license and I have the right under that license to submit that
       work with modifications, whether created in whole or in part
       by me, under the same open source license (unless I am
       permitted to submit under a different license), as indicated
       in the file; or

   (c) The contribution was provided directly to me by some other
       person who certified (a), (b) or (c) and I have not modified
       it.

   (d) I understand and agree that this project and the contribution
       are public and that a record of the contribution (including all
       personal information I submit with it, including my sign-off) is
       maintained indefinitely and may be redistributed consistent with
       this project or the open source license(s) involved.

[elyra-bot]

Thanks for making a pull request to Elyra!

To try out this branch on binder, follow this link:

[karlaspuldaro]

LGTM

[lresende]

Thanks @bourdakos1, overall it looks good to me. One question I have is about the actual dropzone, is this something specific to pipelines? Would code-snippet, which is enabling some darg-drop support be able to reuse this? This could help us decide overall where the location of this component should reside.

[bourdakos1]

@lresende I wouldn't say this is specific to pipelines. However, I'm guessing this won't be useful for code-snippets, because this dropzone component only handles the "drop". Where code-snippets handles "dragging from", and I assume the Notebook itself handles the actual "drop".

If we have another widget where we are dragging and dropping something onto the widget itself, it would be useful there.

[ajbozarth]

In general this look good to me, I don't fully understand the details in some of the new files, but I assume it's just leveraging react more directly. I do have a few meta comments though:

1. Why is LuminoDropzone split into multiple files and kept in a directory, from previous experience in lab usually components like this would just be in a single file?
2. I think this components belongs in the ui-components package rather than pipeline
3. Why the name LuminoDropzone?

I'll take some time to check this out and test locally later today as well

[ajbozarth]

tested locally and it works great

[bourdakos1]

@ajbozarth I’m just used to a react components being a folder. The index file is the react component, useLuminoDropzone is a react “hook” that could be used directly in a functional component. (Our pipeline class component can’t use the hook and has to use )

I can definitely move it to ui-components

I called it LuminoDropzone because the events it listens for are from “@lumino/dragdrop”

[ajbozarth]

I’m just used to a react components being a folder. The index file is the react component, useLuminoDropzone is a react “hook” that could be used directly in a functional component. (Our pipeline class component can’t use the hook and has to use )

That makes sense, I figured it was a react related reason. Prior to starting dev on lab I preferred creating subduers like this anyway.

I can definitely move it to ui-components

Thanks, I'll "approve" once you've move it

I called it LuminoDropzone because the events it listens for are from “@lumino/dragdrop”

gotcha

[marthacryan]

Tried locally and it worked as expected. Code LGTM. Thanks!

[lresende]

Also, if using a directory, could we name it maybe dragdrop as in Lumino or dropzone?