Migrate test datasets page to Ant Design components

[gilluminate]

Ticket ENG-2513

Description Of Changes

Migrated the test datasets page and all its subcomponents from Chakra UI to Ant Design layout components and design system. This includes converting layout components, color tokens, notification system, and styling to use Ant Design patterns.

Code Changes

• Migrated DatasetEditorSection.tsx from Chakra to Ant Design layout components (Flex, Card, Alert, Typography)
• Migrated TestRunnerSection.tsx from Chakra to Ant Design, including converting useToast to useMessage API
• Migrated TestLogsSection.tsx from Chakra to Ant Design with CSS variable-based color system
• Updated test-datasets.tsx page to use Ant Design Flex components
• Replaced Chakra color tokens with Ant Design CSS variables (e.g., var(--ant-color-error))
• Converted all toast notifications to Ant Design message API

Steps to Confirm

1. Visit the System inventory test datasets page for Cookie House PostgreSQL Database in the Vercel deploy (https://fides-plus-nightly-git-gill-eng-2513migrate-test-d0eebf-ethyca.vercel.app/systems/configure/cookie_house_postgresql_database/test-datasets)
2. Verify the dataset editor section displays correctly with the dropdown, refresh, and save buttons
3. Verify the test runner section displays correctly with policy selector and run/stop buttons
4. Run a test and verify success/error messages display using Ant Design message notifications
5. Verify test logs display correctly with proper color coding
6. Confirm all layout, spacing, and styling matches the Ant Design system

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
• UX feedback:
  • No UX review needed
• Followup issues:
  • 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.

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	Feb 10, 2026 5:27pm

1 Skipped Deployment

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

[greptile-apps]

Greptile Overview

Greptile Summary

This PR successfully migrates the test datasets page from Chakra UI to Ant Design components, aligning with the ongoing design system migration effort.

Key changes:

• Replaced Chakra layout components (VStack, HStack, Stack, Box) with Ant Design equivalents (Flex, Card, Space)
• Migrated toast notifications from useChakraToast to Ant Design's useMessage API
• Updated color tokens from Chakra's color system to Ant Design CSS variables (e.g., var(--ant-color-error))
• Converted typography components to Ant Design's Typography.Title
• Replaced Chakra Textarea with Ant Design's Input.TextArea

Issues found:

• Duplicate useEffect hook in DatasetEditorSection.tsx (lines 84-88 and 130-134) that should be removed

Confidence Score: 4/5

• Safe to merge after fixing the duplicate useEffect hook
• The migration is well-executed and follows the established patterns for Ant Design migration. One duplicate useEffect needs to be removed to prevent unnecessary re-renders.
• clients/admin-ui/src/features/test-datasets/DatasetEditorSection.tsx needs the duplicate useEffect removed

Important Files Changed

Filename	Overview
clients/admin-ui/src/features/test-datasets/DatasetEditorSection.tsx	Migrated from Chakra to Ant Design with duplicate useEffect hook
clients/admin-ui/src/features/test-datasets/TestLogsSection.tsx	Clean migration to Ant Design using CSS variables
clients/admin-ui/src/features/test-datasets/TestRunnerSection.tsx	Successfully migrated toast notifications to useMessage API

[greptile-apps]

_{3 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (1)

clients/admin-ui/src/features/test-datasets/DatasetEditorSection.tsx
Duplicate useEffect - this same effect exists again at lines 130-134

  useEffect(() => {
    if (reachability) {
      dispatch(setReachability(reachability.reachable));
    }
  }, [reachability, dispatch]);

[speaker-ender]

Looks good!
Left a comment about using inline styles vs tw classes that applies in multiple places but not a blocker.