oxidecomputer / oxidecomputer/console
Convert `Modal`s with forms in them to `ModalForm`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 228
- Forks
- 22
- Avg merge
- 19h 42m
- Merged PRs (30d)
- 32
Description
Follow-up to #3192 and #3197. These modals use raw Modal + Modal.Footer + useApiMutation with onError → addToast. Converting to ModalForm gives them inline submit errors and a loading spinner on the submit button, matching the side-modal forms.
Candidates for ModalForm
-
ResizeInstanceModal—app/pages/project/instances/InstancePage.tsx:274. Has an inline<p className="text-error">at :389 that the shell replaces. -
SiloSubnetPoolsTabLink pool —app/pages/system/silos/SiloSubnetPoolsTab.tsx:297 -
SiloIpPoolsTabLink pool —app/pages/system/silos/SiloIpPoolsTab.tsx:311 -
IpPoolPageLink silo —app/pages/system/networking/IpPoolPage.tsx:493 -
SubnetPoolPageLink silo —app/pages/system/networking/SubnetPoolPage.tsx:475 -
AntiAffinityCardAdd member —app/pages/project/instances/AntiAffinityCard.tsx:241 -
anti-affinity-group-member-addAdd instance —app/forms/anti-affinity-group-member-add.tsx:67
ModalForm hardcodes <Message title="Error"> inline — simplest to drop the custom titles, matching #3197. Or we could add the ability to pass a custom error title.
Doesn't fit — not form submissions
These have no inputs and would need a throwaway useForm just to satisfy ModalForm's signature:
SiloScimTabCreate token —app/pages/system/silos/SiloScimTab.tsx:220. Informational body; Create fires the mutation andonSuccesshands the token to a second modal.ImagesPagePromote image —app/pages/project/images/ImagesPage.tsx:189. "Are you sure you want to promote X?"
Leave as-is or refactor toward confirmAction.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the existing ModalForm usage in the side-modal forms, then inspect the seven listed candidate files at their referenced locations. Convert only the form-submission modals, preserving the listed exclusions; done means the candidates use ModalForm with inline errors and submit loading feedback, with the checklist updated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100