refactor(web): extract FormCard — shared add/create form shell (heading + error banner + busy submit) #281

New issue

Closed

opened 2026-08-04 19:24:46 +02:00 by dominik.polakovics · 1 comment

dominik.polakovics commented

2026-08-04 19:24:46 +02:00

Owner

This was generated by AI during triage.

Split out of umbrella #276 (frontend component reuse, follow-up to #275).

Nine add/create forms hand-roll the same card shell: a .card.form-card container, an <h2> heading, an ErrorBanner, a <form> with fields, and a primary submit button whose label swaps while busy ("Creating…" / "Create token"). Sites: the create-token and create-credential cards, AddRepo, NewIssue (which puts the classes on the <form> element itself), and the add-forms in the repo-settings Secrets, Imports, and Schedules sections. Each duplicates the busy-state wiring and error plumbing shape.

Extract the shell into a shared component, keeping fields with the caller. The agent brief follows in a comment.

> *This was generated by AI during triage.* Split out of umbrella #276 (frontend component reuse, follow-up to #275). Nine add/create forms hand-roll the same card shell: a `.card.form-card` container, an `<h2>` heading, an `ErrorBanner`, a `<form>` with fields, and a primary submit button whose label swaps while busy ("Creating…" / "Create token"). Sites: the create-token and create-credential cards, AddRepo, NewIssue (which puts the classes on the `<form>` element itself), and the add-forms in the repo-settings Secrets, Imports, and Schedules sections. Each duplicates the busy-state wiring and error plumbing shape. Extract the shell into a shared component, keeping fields with the caller. The agent brief follows in a comment.

dominik.polakovics added the

enhancement

label

2026-08-04 19:24:46 +02:00

dominik.polakovics commented

2026-08-04 19:24:53 +02:00

Author

Owner

This was generated by AI during triage.

Agent Brief

Category: enhancement
Summary: Extract the add/create form card shell (card + heading + error banner + form + busy-aware submit) into a shared FormCard component and migrate the ~9 hand-rolled sites.

Current behavior:
Every add/create form hand-rolls the same shell: a card container carrying the form-card class, an <h2> heading, an ErrorBanner fed by a local error signal, a <form> with the fields, and a primary submit button that is disabled while busy and swaps its label ("Creating…" vs "Create token"). Sites: the create-token and create-credential cards, AddRepo, NewIssue, and the add-forms in the repo-settings Secrets, Imports, and Schedules sections. NewIssue differs by putting the card classes directly on the <form> element.

Desired behavior:
A shared component (suggested name FormCard) owns the shell — heading, error banner wiring, form element with submit handling, and the primary submit button with idle/busy labels and disabled-while-busy behavior. Field markup stays with the caller as children. All the listed sites render through it. No visual change.

Key interfaces:

New FormCard component in the shared components directory, colocated test in the SectionCard style. Suggested props: title, error message + dismiss handler (or equivalent), submit handler, busy flag, idle/busy submit labels, children (the fields)
ErrorBanner — reused inside the shell, not modified
The form-card CSS class remains the styling hook and is applied by the component after migration; whether the class lands on a wrapper or the form element is an implementation decision, as long as the rendered look of every site is unchanged (NewIssue has a test asserting on the form.form-card shape — keep it meaningful)

Acceptance criteria:

FormCard exists with a colocated test
The add/create forms for tokens, credentials, repos (AddRepo), issues (NewIssue), secrets, imports, and schedules render through it
Submit is disabled while busy and shows the busy label, exactly as each site does today
Error display and dismissal behave as before at every site
No visual change; existing frontend tests pass

Out of scope:

Any validation, field, or behavior changes to the forms themselves
Non-create forms and settings toggles that don't follow this shell
The other pattern families tracked by #276

> *This was generated by AI during triage.* ## Agent Brief **Category:** enhancement **Summary:** Extract the add/create form card shell (card + heading + error banner + form + busy-aware submit) into a shared `FormCard` component and migrate the ~9 hand-rolled sites. **Current behavior:** Every add/create form hand-rolls the same shell: a card container carrying the `form-card` class, an `<h2>` heading, an `ErrorBanner` fed by a local error signal, a `<form>` with the fields, and a primary submit button that is disabled while busy and swaps its label ("Creating…" vs "Create token"). Sites: the create-token and create-credential cards, AddRepo, NewIssue, and the add-forms in the repo-settings Secrets, Imports, and Schedules sections. NewIssue differs by putting the card classes directly on the `<form>` element. **Desired behavior:** A shared component (suggested name `FormCard`) owns the shell — heading, error banner wiring, form element with submit handling, and the primary submit button with idle/busy labels and disabled-while-busy behavior. Field markup stays with the caller as children. All the listed sites render through it. No visual change. **Key interfaces:** - New `FormCard` component in the shared components directory, colocated test in the `SectionCard` style. Suggested props: title, error message + dismiss handler (or equivalent), submit handler, busy flag, idle/busy submit labels, children (the fields) - `ErrorBanner` — reused inside the shell, not modified - The `form-card` CSS class remains the styling hook and is applied by the component after migration; whether the class lands on a wrapper or the form element is an implementation decision, as long as the rendered look of every site is unchanged (NewIssue has a test asserting on the `form.form-card` shape — keep it meaningful) **Acceptance criteria:** - [ ] `FormCard` exists with a colocated test - [ ] The add/create forms for tokens, credentials, repos (AddRepo), issues (NewIssue), secrets, imports, and schedules render through it - [ ] Submit is disabled while busy and shows the busy label, exactly as each site does today - [ ] Error display and dismissal behave as before at every site - [ ] No visual change; existing frontend tests pass **Out of scope:** - Any validation, field, or behavior changes to the forms themselves - Non-create forms and settings toggles that don't follow this shell - The other pattern families tracked by #276

dominik.polakovics added the

ready-for-agent

label

2026-08-04 19:24:53 +02:00

dominik.polakovics referenced this issue

2026-08-04 19:25:35 +02:00

Frontend component reuse: inventory repeated UI patterns, then file per-family extraction issues #276

dominik.polakovics referenced this issue

2026-08-04 19:25:35 +02:00

Frontend component reuse: inventory repeated UI patterns, then file per-family extraction issues #276

dominik.polakovics referenced this issue

2026-08-04 20:21:19 +02:00