ENG-3179: Migrate properties form to Ant Design

[gilluminate]

Ticket ENG-3179

Description Of Changes

Migrates the properties form (create + edit) from Chakra UI components and Formik form state to Ant Design Form, Card, Select, and Input. Adds proper form validation via antd rules, a loading spinner for the edit page, and disabled input theme tokens so read-only fields match the disabled style.

Code Changes

• Replaced ChakraBox, ChakraFlex, FormSection, CustomTextInput, ControlledSelect, ScrollableList with Ant Form, Card, Flex, Input, Select
• Replaced Formik (<Formik>, useFormikContext, enableReinitialize) with antd Form.useForm, Form.useWatch, Form.Item rules
• Added isLoading prop to PropertyForm for edit page loading state
• Added disabled input theme tokens (colorBorderDisabled, colorTextDisabled, colorBgContainerDisabled) to fidesui default theme
• Updated read-only input SCSS to reference disabled tokens instead of hardcoded values
• Removed unused compact-item SCSS overrides (replaced by Space.Addon)
• Changed to named export for PropertyForm

Steps to Confirm

1. Navigate to Properties page, click "Add property"
2. Verify the form renders with Name, Type, and Experiences fields
3. Confirm Save button is disabled until the form is touched and valid
4. Fill in a name, select a type, optionally add experiences, and save
5. Open the newly created property for editing
6. Verify all fields are populated correctly, including the read-only Property ID field with copy button
7. Change the name and save -- confirm the update succeeds
8. Verify the Delete button opens the delete confirmation modal

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	Apr 9, 2026 8:49pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Apr 9, 2026 8:49pm

[github-actions]

Title	Lines	Statements	Branches	Functions
admin-ui		5.87% (2547/43324)	4.88% (1199/24531)	3.95% (508/12838)
fides-js		78.98% (1962/2484)	65.55% (1214/1852)	72.57% (336/463)
privacy-center		85.93% (330/384)	81.1% (176/217)	78.87% (56/71)

[claude]

Code Review: Properties Form Antd Migration (#7880)

This PR migrates PropertyForm from Chakra/Formik to Ant Design and also cleans up read-only input styling in fidesui. The overall approach is solid and the component structure is clean. A couple of issues are worth addressing before merge.

---

🔴 Issues to Address

1. Experience configs dropdown uses stale table pagination state
(PropertyForm.tsx:45-46)

The form queries experience configs using selectPage/selectPageSize from the privacy-experience Redux slice — whatever page the user last visited in the experience table. This causes the multi-select to silently show only a subset of available experiences. A user on edit mode could see an incomplete list and accidentally deselect experiences that simply aren't on the cached page. The query should use a fixed { page: 1, size: 200 } (or similar) decoupled from the table state.

2. form.isFieldsTouched() blocks Save on the edit page
(PropertyForm.tsx:211)

setFieldsValue (called on load) does not mark fields as touched, so the Save button stays disabled when the form loads with an existing property's data. A user who wants to save without changes (e.g. after an upstream edit) cannot. The previous Formik dirty check compared values against initialValues and didn't have this problem. Consider a value-diff dirty check or simply rely on !submittable alone.

---

🟡 Suggestions

3. Verify Space.Addon is a valid fidesui export
(PropertyForm.tsx:186-188)

Space.Addon is not a standard antd component. If it's a custom fidesui export, the .ant-space-addon CSS class targeted in global.scss needs to match what it renders. Worth a quick visual check that the clipboard button in the Property ID row looks correct.

4. Typo: --ant-input-hove-shadow → --ant-input-hover-shadow
(global.scss:129)

Missing r — the hover shadow suppression on read-only inputs has never taken effect. This was pre-existing but easy to fix while touching this area.

---

✅ What's Good

• Clean removal of Chakra/Formik dependencies throughout the form and its pages.
• isLoading prop + Spin fallback gives a good loading state UX.
• getValueProps/getValueFromEvent pattern for the experiences Select is the correct antd way to bridge array-of-objects ↔ array-of-IDs.
• Unifying read-only input styles to reference the disabled token variables is a nice consistency improvement in global.scss.
• The default-theme.ts reordering (moving Select after Popover) is a minor cleanup, no functional change.

🔬 Codegraph: unavailable

---

💡 Write /code-review in a comment to re-run this review.