Integration modal UX improvements

[jack-gale-ethyca]

Ticket ENG-2695

Description Of Changes

1. Single-click integration selection: Clicking an integration card now navigates directly to the configuration form, eliminating the intermediate "select then click Next" two-step flow. The "Details" path (card detail view with its own Next button) is unchanged.
2. Modal title updated: First screen now reads "Select an integration" instead of "Add integration".
3. Footer removed from list view: The list screen no longer shows Cancel/Next buttons. Footer with Back/Save only appears on the detail and form steps.
4. Fixed search/filter bar: The search input and category dropdown sit in a non-scrolling zone above the card grid. Cards scroll independently beneath it.
5. Consistent modal height: The modal is a fixed 700px tall across all steps -- no height jump when transitioning between list view (no footer) and form view (with footer).
6. Chakra to Ant/Tailwind migration: Replaced the Chakra FormModal wrapper with Ant Design Modal in AddIntegrationModal. Replaced Chakra layout primitives (Box, Flex, Text, Wrap) with plain divs + Tailwind utilities in SelectableIntegrationBox, including hover states and keyboard accessibility (role="button", tabIndex, onKeyDown). The configuration form internals (ConfigureIntegrationForm) are intentionally untouched to avoid validation/submission risk.

Steps to Confirm

• Open integrations page, click "Add Integration"
• Verify modal title says "Select an integration" with no footer buttons
• Verify search input and category filter stay fixed while cards scroll
• Verify no gap between modal header and filter bar
• Click an integration card -- should go directly to config form with Back/Save footer
• Verify modal height does not jump between steps
• Click "Details" on a card -- verify detail view still works with Back/Next footer
• Fill out and save a new integration -- verify form submission still works
• Hover over cards -- verify border/shadow hover effect

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	Feb 27, 2026 8:16pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Feb 27, 2026 8:16pm

[greptile-apps]

Greptile Summary

This PR improves the integration modal UX by enabling single-click integration selection, updating modal title to "Select an integration", fixing the search/filter bar position, and maintaining consistent 700px modal height. The implementation successfully migrates from Chakra UI's FormModal to Ant Design Modal and extracts filter logic into a reusable custom hook.

Key changes:

• Single-click flow navigates directly to config form, eliminating intermediate selection step
• Filter bar now fixed while cards scroll independently
• Modal footer only appears on detail/form steps, not list view
• Filter state management extracted to useIntegrationFilters hook

Issues found:

• Keyboard accessibility bug: Space key handler lacks e.preventDefault(), causing page scroll
• Style guideline violation: Multiple div elements used for layout instead of Ant Design's Flex component as required by repository conventions

Confidence Score: 3/5

• Safe to merge after fixing keyboard accessibility bug; style issues are non-blocking
• One keyboard accessibility bug must be fixed (Space key scroll issue). Multiple style guideline violations exist but won't break functionality. UX improvements are well-implemented.
• Pay attention to SelectableIntegrationBox.tsx for the Space key bug fix

Important Files Changed

Filename	Overview
clients/admin-ui/src/features/integrations/SelectableIntegrationBox.tsx	Replaced Chakra components with divs and Tailwind; violates custom rule requiring Ant Design Flex; missing preventDefault in Space key handler
clients/admin-ui/src/features/integrations/add-integration/AddIntegrationModal.tsx	Migrated from Chakra FormModal to Ant Modal with fixed height; removed two-step selection; uses divs for layout instead of Flex
clients/admin-ui/src/features/integrations/add-integration/SelectIntegrationType.tsx	Extracted filter logic to custom hook; simplified component to receive filtered data as props; removed selection state management
clients/admin-ui/src/features/common/modals/FormModal.tsx	Added optional subheader prop for additional content between header and body; minimal change with no impact

_{Last reviewed commit: 5dde3c2}

[greptile-apps]

_{4 files reviewed, 7 comments}

_{Edit Code Review Agent Settings | Greptile}

[gilluminate]

Ant migration stuff needs a lot of clean up. Likely need to update to our latest FE ruleset for cursor

[jack-gale-ethyca]

@gilluminate I got Jades script working on my local repo and removed my local cursor rules that conflict. I ran that through my changed files and commit those changes. Let me know what you think.

[gilluminate]

@jack-gale-ethyca much better! Thanks for doing that. We're really close, just a few more nit-picky items (we still need to add these to our rules!)

[jack-gale-ethyca]

@gilluminate We should be good to go, all checks are passing and I made all the updates you requested.

[gilluminate]

Looks great! Ship it