Combined Modal component for New File, New Folder, and Upload.

[lindapaiste]

Changes:
The components for NewFileModal, NewFolderModal and UploadFileModal already use the same CSS class names for styling. This PR moves the HTML structure of the modal and the click-outside logic (added in #1602) into a common shared Modal component. Any differences between the three are handled by passing props to the Modal, such as title and closeAriaLabel.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[lindapaiste]

Two notes re: close on outside click.

1. I did not change the logic for handling outside clicks, but I realize now I should. I am checking the same way as before with e.path.includes(modalRef.current)). I recall that it was working for me at the time I submitted this PR, but I must have updated Chrome since then as e.path was removed in v109 and it no longer works for me.

Modal.jsx?cf57:19 Uncaught TypeError: Cannot read properties of undefined (reading 'includes')
at HTMLDocument.handleOutsideClick (Modal.jsx?cf57:19:1)

We can change it to e.composedPath() as explained here.

There is another approach ref.current.contains(e.target) which is used here and here.

2. Currently the New File and New Folder modals close on outside click but the Upload does not. Is that what we want? In this PR I applied the closing behavior to all three, but I can remove it from Upload by adding an additional prop like disableOutsideClick or something.

[lindapaiste]

@raclim I fixed note 1 with the ref.current.contains(e.target) approach. This should be good to go unless you have any thoughts about note 2.

[raclim]

Hi @lindapaiste, thanks so much for working on this—sorry it took a while to revisit it! These updates makes sense to me, and I also think it looks good to go!

Since we just created a new release I'd like to wait for a moment before addressing more PRs as a precaution, so this will probably be merged in by the end of the week!

[lindapaiste]

Currently the New File and New Folder modals close on outside click but the Upload does not. Is that what we want? In this PR I applied the closing behavior to all three, but I can remove it from Upload by adding an additional prop like disableOutsideClick or something.

@raclim I realized why we did not have the click-outside behavior on the upload modal previously. It's because clicking the "Drop files here or click to use the file browser" section is considered an outside click and therefore closes the modal. The e.target of that click is the hidden <input type="file" multiple="multiple" class="dz-hidden-input" ... /> element which is a direct child of the body. Tbh I don't understand how that becomes the e.target rather than the <div id="uploader" class="uploader dropzone dz-clickable"> but it is.

I can fix this by making it so that the hidden input is inside of the modal div instead of in the body. There is a hiddenInputContainer option for this.

Please do not push this production until we merge in a fix.

[raclim]

Sounds good, thanks for catching this—I was just about to push the release 😂 I'll hold off until then