ENG-3552: Migrate AddNewSystemModal to antd Form

[gilluminate]

Ticket ENG-3552

Description Of Changes

Follow-up to #8156. Migrates the "Add New System" modal off Formik + Yup + Chakra wrappers to antd Form. Reuses the VendorSelectorAnt and dirty-aware ConfirmCloseModal that #8156 already shipped.

Two deliberate variances from #8156's AddVendor migration:

• ConfirmCloseModal is preserved. The ticket explicitly calls for swapping formik.dirty for form.isFieldsTouched() rather than dropping the guard. The modal is reachable from three call sites (AssignSystemModal, action-center SystemCell, system-assets AssetSystemCell) and the unsaved-changes UX is worth keeping.
• Public props are unchanged (isOpen, onClose, onSuccessfulSubmit, toastOnSuccess), so none of the three call sites need edits.

The legacy features/system/VendorSelector.tsx stays in place; it's still consumed by SystemInformationForm, which will migrate in a separate ticket. After that lands the legacy selector can be deleted.

Code Changes

• clients/admin-ui/src/features/system/AddNewSystemModal.tsx
  • useFormik / FormikProvider / Yup → Form.useForm<FormValues>() + FormRule[] (async uniqueness rule mirrors AddVendor.nameRules).
  • VendorSelector → VendorSelectorAnt with nameRules prop. Non-dictionary branch becomes a plain Form.Item name="name" + Input.
  • DictSuggestionTextArea → Form.Item name="description" + Input.TextArea with an inline useEffect watching vendor_id + the dict-suggestion redux state; on "showing" it calls form.setFieldValue("description", dictEntry.description). The legacy component is untouched (still used by SystemInformationForm).
  • ControlledSelect mode="tags" → antd Select mode="tags" inside Form.Item, with aria-label to satisfy jsx-a11y/control-has-associated-label.
  • Save / Cancel moved into ConfirmCloseModal's footer prop. Save is gated by Form.useWatch([], form) + validateFields({ validateOnly: true }) driving a submittable boolean (same pattern as AddVendor). Save calls form.submit().
  • ConfirmCloseModal now reads dirty via () => form.isFieldsTouched().
  • FormGuard dropped (matches ENG-3178: Migrate vendor / configure-consent forms to antd #8156).

Steps to Confirm

These exercise the dictionary path that matches a standard local dev setup. The non-dictionary path is covered by the same Form.Item + Input fallback used in AddVendor after #8156.

1. Open the modal. Go to Data discovery → Action center, click an unassigned asset row, choose Add new system. Modal opens with data-testid="add-modal-content".
2. Dictionary typeahead. Start typing a known vendor (e.g. Aniview LTD) and pick the suggestion. The Description field should auto-populate with the dictionary description. Compass button activates. System Tags stays editable.
3. Custom (off-dictionary) entry. Open the modal again, type a name that isn't in the dictionary, and pick the Create new system "…" option. Description stays empty; tags accept free-text Enter-to-tag. Click Save → toast appears, modal closes, the asset cell shows the new system.
4. GVL lock (TCF enabled). Pick a GVL vendor. Description + tags should disable; name field becomes read-only via VendorSelectorAnt's nameFieldLockedForGVL.
5. Dirty close-guard. Type a name, then press Escape or click the backdrop. The "Unsaved Changes" confirm dialog should appear. Open a clean modal → backdrop closes immediately without a prompt.
6. Save gating. Open the modal; Save is disabled until a name is entered. Type a name that already exists → the async uniqueness rule shows the existing error message.
7. Other entry points. Repeat the smoke flow from System Assets tab → "+" cell and Action Center → Assign System to confirm the three call sites still work without prop changes.

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • No migrations
• Documentation:
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ignored		May 14, 2026 10:23pm
fides-privacy-center	Ignored		May 14, 2026 10:23pm

[github-actions]

Title	Lines	Statements	Branches	Functions
admin-ui		6.89% (3150/45708)	6.26% (1655/26434)	4.78% (647/13523)
fides-js		79.17% (1977/2497)	66.25% (1249/1885)	73.31% (349/476)
privacy-center		82.53% (364/441)	79.74% (189/237)	74.07% (60/81)