Package dialog redesign aka Package Editor (first iteration)

[fiskus]

Main changes:

• Added PackageEditor page, but link to it is hidden by settings.beta
  There are a very few changes in existing code:
  • route
  • preferences.ui.actions.editPackage option when settings.beta
  • hide .webm by default in JsonEditor.
• PackageEditor is divided into UI elements, State and IO
  • UI elements are in components/Form/Package and components/FileManager
  • State and components linked to that state in containers/Bucket/PackageEditor
  • validation and package creation is mostly copy-pasted from existing code

I tried to divided State to smaller modules (start at app/containers/Bucket/PackageEditor/State/index.tsx). Each module has:

• State
• Actions - callbacks to change the state
• Getters - computable properties with the source of truth in State
  • common use is for disabled property (to disable submit) and to calculate formData (data format needed to submit)
• Context - everything above stored here and exported

State is in React.Provider and available across the PackageEditor.

I don't use Final Form. I found it very hard to manage.

Instead of AsyncResult I use simple type Var = Value | Error | typeof Loading. I'm OK to convert it to taggedV2, it's just difficult for me to think with taggedV2 in mind.

TODO

• Reduce State changes and re-renders
• Unit tests
• Confirm that this change meets security best practices and does not violate the security model
• Documentation
  • JavaScript: basic explanation and screenshot of new features
  • Markdown somewhere in docs/**/*.md that explains the feature to end users (said .md files should be linked from SUMMARY.md so they appear on https://docs.quiltdata.com)
  • Markdown docs for developers
• Changelog entry (skip if change is not significant to end users, e.g. docs only)

[codecov]

Codecov Report

Merging #3478 (d5ea1e3) into master (60042d8) will decrease coverage by 0.93%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master    #3478      +/-   ##
==========================================
- Coverage   36.24%   35.32%   -0.93%     
==========================================
  Files         683      711      +28     
  Lines       29855    30633     +778     
  Branches     4394     4540     +146     
==========================================
  Hits        10821    10821              
- Misses      17874    18624     +750     
- Partials     1160     1188      +28     

Flag	Coverage Δ
api-python	91.35% <ø> (ø)
catalog	9.84% <0.00%> (-0.39%)	⬇️
lambda	86.03% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...alog/app/components/Form/Package/CommitMessage.tsx	0.00% <0.00%> (ø)
.../app/components/Form/Package/DestinationBucket.tsx	0.00% <0.00%> (ø)
...alog/app/components/Form/Package/InputSkeleton.tsx	0.00% <0.00%> (ø)
...atalog/app/components/Form/Package/PackageName.tsx	0.00% <0.00%> (ø)
catalog/app/components/Form/Package/TextField.tsx	0.00% <0.00%> (ø)
catalog/app/components/Form/Package/Workflow.tsx	0.00% <0.00%> (ø)
catalog/app/components/JsonEditor/JsonEditor.tsx	0.00% <0.00%> (ø)
catalog/app/constants/loading.ts	0.00% <0.00%> (ø)
catalog/app/constants/routes.js	0.00% <0.00%> (ø)
catalog/app/containers/Bucket/Bucket.js	0.00% <0.00%> (ø)
... and 25 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more