ENG-3178: Migrate vendor / configure-consent forms to antd

[gilluminate]

Ticket ENG-3178

Description Of Changes

Replaces Formik + Chakra in the configure-consent "Add a vendor" modal with antd Form. The migration covers AddVendor.tsx and DataUsesForm.tsx, plus a forked VendorSelectorAnt.tsx placed next to the legacy features/system/VendorSelector.tsx — that legacy component is intentionally left in place because AddNewSystemModal and SystemInformationForm still consume it on Formik. A follow-up ticket will retire it when those two callers migrate.

Two behavior fixes ride along with the migration:

• cookieNames → cookies payload transform in handleSubmit. The backend expects each privacy declaration to ship cookies: [{ name, path, domain? }], not the UI's cookieNames: string[]. This was a pre-existing bug (the Cypress spec for this flow was describe.skip-ed on main and failing). Dictionary-sourced cookies keep their domain/path; user-typed names default to { name, path: "/" }.
• Always-mounted hidden Form.Items for name and vendor_id in VendorSelectorAnt. Without them, Form.useWatch loses reactivity when the typeahead Select flips to the text-input branch (because the registered Form.Item for name unmounts, and vendor_id was never registered at all — so the dictionary auto-populate query never fires).

cypress/e2e/consent-configuration.cy.ts is un-skipped and re-targeted at the new DOM (8/8 passing), so the dictionary-off path is fully covered by CI — the manual steps below only walk the dictionary-on path that matches a standard local dev setup.

Code Changes

• clients/admin-ui/src/features/configure-consent/AddVendor.tsx — Formik → antd Form (useForm, onFinish, async name-uniqueness rule, dirty/valid via Form.useWatch + validateFields({ validateOnly: true })). ChakraVStack / ChakraBox / useChakraDisclosure → Flex + useState. Cancel + Save moved into Modal footer prop. Added cookieNames → cookies payload transform.
• clients/admin-ui/src/features/configure-consent/DataUsesForm.tsx — FieldArray → Form.List, ControlledSelect → Form.Item + antd Select, useFormikContext → Form.useFormInstance + Form.useWatch. Each data-use block is now wrapped in an antd Card (theme-token border). Dictionary auto-populate carries cookies + cookieNames onto each declaration.
• clients/admin-ui/src/features/configure-consent/constants.ts — added cookieNames?: string[] and cookies?: MinimalCookie[] to MinimalPrivacyDeclaration; new local MinimalCookie type.
• clients/admin-ui/src/features/system/VendorSelectorAnt.tsx — new antd-Form-native fork of VendorSelector.tsx. Same external prop signature (label, isCreate, lockedForGVL, options, isLoading, onVendorSelected) plus optional nameRules. Always-mounted hidden Form.Items for name + vendor_id keep Form.useWatch reactive across the typeahead → text-input UI flip.
• clients/admin-ui/src/features/system/VendorSelector.tsx — unchanged. Still consumed by AddNewSystemModal.tsx and SystemInformationForm.tsx (both still Formik).
• clients/admin-ui/cypress/e2e/consent-configuration.cy.ts — un-skipped describe("adding a vendor", …); swapped legacy selectors (selectOption, controlled-select-…, input-privacy_declarations.N.…) for antd equivalents (antSelect helper, select-consent-use-N / select-data-use-N / select-cookies-N, vendor-name-select); cookie typing through find("input").type("…{enter}").

Steps to Confirm

1. Visit /consent/configure/add-vendors and click Add custom vendor.
2. Dictionary typeahead. Start typing a known vendor name (e.g. Aniview LTD) in the Vendor name field and pick the dictionary suggestion. The data-use blocks below should auto-populate with that vendor's data uses, and each block's Cookie names should already be filled in with tags from the dictionary.
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. In the data-use block, pick a Consent category (e.g. Analytics) and type a couple of cookie names into Cookie names (each Enter creates a tag). Click Save vendor. In Network → look at the POST /api/v1/system request body: each privacy_declarations entry should have a cookies: [{ name, path: "/" }] array (not cookieNames).
4. Marketing expansion. Add another vendor where the only data-use block has Consent category set to Marketing and Detailed consent category left empty. Save. The POST body's privacy_declarations should contain two entries instead of one: one with data_use: "marketing.advertising.first_party.targeted" and one with data_use: "marketing.advertising.third_party.targeted".
5. Add data use button. In a fresh modal, confirm the Add data use button is disabled before any consent category is picked. Pick Analytics, the button enables; click it — a new block appears. Cancel dismisses the modal and clears state for the next open.

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:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
  • No documentation updates required

---

Follow-ups not in this PR (file as separate tickets):

• Migrate AddNewSystemModal.tsx and SystemInformationForm.tsx off Formik, then retire the legacy features/system/VendorSelector.tsx.
• Replace the shared CustomTextInput wrapper (15+ consumers) with Form.Item + antd Input.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	May 11, 2026 8:04pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		May 11, 2026 8:04pm

[github-actions]

Title	Lines	Statements	Branches	Functions
admin-ui		6.67% (3082/46160)	6.03% (1604/26596)	4.66% (636/13644)
fides-js		79.51% (2019/2539)	66.24% (1248/1884)	73.31% (349/476)
privacy-center		82.53% (364/441)	79.74% (189/237)	74.07% (60/81)