Add upload form

[tinykite]

What this does

Adds a upload form component to allow users to upload their own static archive if a capture process fails.

Requirements

• Render an upload form within a dialog using the existing Dialog wrapper component, as much of the existing HTML as possible, and while refactoring the existing legacy JavaScript.

• The dialog should be triggered with a button:

• The length of the form — how many inputs it includes — should conditionally depend on if there is a guid from the most recent, failed capture.

  • If a guid does not exist, display the full form:
  • If a guid does exist, only show the following form elements:

• A user should be able to fill out the form and click "Upload", but nothing needs to happen after they click the button

  • Form submission handling itself and error handling with be taken care of in separate PRs

How to test

• You need to toggle the "vue-dashboard" django waffle feature flag to view any of the updated Vue UI.
• To test out this feature, and see some developer-only UI for testing, you will also need to toggle the developer-playground feature flag.
• Both flags can be toggled from the django admin dashboard or by visiting urls following the pattern https://perma.test:8000/manage/create?dwft_FLAG-NAME=1

• Once you've toggled both flags, you should be able to interact with a "Toggle Upload Dialog" button on the page.
• Clicking the button should surface the upload form, which includes additional testing-only buttons to test out triggering and clearing errors for a couple of the inputs.
• Hitting escape, hitting return on the either the "x" close or cancel buttons, or clicking outside the dialog element should all close the dialog.
• To toggle the form state that shows when there is a previous, valid guid associated with a capture for now, you'll need to manually pass a guid to the UploadForm component, for example:

  <UploadForm guid="4" v-if="showDevPlayground" ref="uploadDialogRef" />

Additional Notes

• The dialog containing the upload form should match the styling and functionality of the current batch upload form.
• No changes in this PR should affect how Perma works in the staging or prod environments, unless someone manually toggles on the dev-playground flag
• As mentioned above, the form is not intended to be fully functional just yet. Once all UI is merged, it should be easier to review form submission handling and error verification.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 69.02%. Comparing base (a8a09c3) to head (e56d572). Report is 22 commits behind head on develop.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## develop #3557 +/- ## =========================================== + Coverage 68.94% 69.02% +0.08% =========================================== Files 48 48 Lines 6900 6918 +18 =========================================== + Hits 4757 4775 +18 Misses 2143 2143 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[teovin]

@tinykite Just making sure I am following the requirements correctly. The toggle upload dialog button is just a way for us to render the new form without making changes to the current form, right? And once the new form is good, we will basically replace the old form with it (of course remove the toggle itself too). Apologies in advance if I am way too mistaken, we can catch up tomorrow to clarify :)

[tinykite]

@tinykite Just making sure I am following the requirements correctly. The toggle upload dialog button is just a way for us to render the new form without making changes to the current form, right? And once the new form is good, we will basically replace the old form with it (of course remove the toggle itself too). Apologies in advance if I am way too mistaken, we can catch up tomorrow to clarify :)

Yes, you are exactly right! Making sure the UI functions as expected before hooking it up to the broader capture process.