oxidecomputer / oxidecomputer/console

Convert `Modal`s with forms in them to `ModalForm`

Open
#3,202 0 comments 0 reactions 0 assignees View on GitHub

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 onErroraddToast. Converting to ModalForm gives them inline submit errors and a loading spinner on the submit button, matching the side-modal forms.

Candidates for ModalForm
  • ResizeInstanceModalapp/pages/project/instances/InstancePage.tsx:274. Has an inline <p className="text-error"> at :389 that the shell replaces.
  • SiloSubnetPoolsTab Link pool — app/pages/system/silos/SiloSubnetPoolsTab.tsx:297
  • SiloIpPoolsTab Link pool — app/pages/system/silos/SiloIpPoolsTab.tsx:311
  • IpPoolPage Link silo — app/pages/system/networking/IpPoolPage.tsx:493
  • SubnetPoolPage Link silo — app/pages/system/networking/SubnetPoolPage.tsx:475
  • AntiAffinityCard Add member — app/pages/project/instances/AntiAffinityCard.tsx:241
  • anti-affinity-group-member-add Add 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:

  • SiloScimTab Create token — app/pages/system/silos/SiloScimTab.tsx:220. Informational body; Create fires the mutation and onSuccess hands the token to a second modal.
  • ImagesPage Promote 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.