Skip to content

Conversation

@speaker-ender
Copy link
Contributor

@speaker-ender speaker-ender commented Dec 18, 2025

Ticket ENG-1647

Description Of Changes

Adds the Activity tab to monitor screens so that users can view activity specific to a monitor they are working on.

Code Changes

  • Refactoring the page structure and tab navigation for the Action-Center to contain a shared layout.
  • Creating a pattern for page navigation via tabs
  • Removing some complexity from filtering

Steps to Confirm

  1. Visit the Helios V2 action center
  2. Navigate to a datastore monitor tree view
  3. Confirm that the Activity tab is visible
  4. Confirm that navigating to the Activity tab only displays values specific to the monitor being viewed
  5. Verify that no regressions on the existing Activity tab

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
Copy link

vercel bot commented Dec 18, 2025

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

Project Deployment Review Updated (UTC)
fides-plus-nightly Ready Ready Preview, Comment Jan 6, 2026 3:01pm
1 Skipped Deployment
Project Deployment Review Updated (UTC)
fides-privacy-center Ignored Ignored Jan 6, 2026 3:01pm

fix: title for tests

wip: more refactoring

refactor: page structure

fix: minor style issues

refactor: page based

wip: still standardizing

wip: further refactors

refactor: filter related changes

linting and other fixes

fix: type issue

fix: broken imports

chore: update changelog

fix: more imports
@speaker-ender speaker-ender force-pushed the feat/activity-tab-on-schema-explorer--ENG-1647--refactor branch from 1ef20e5 to f507531 Compare January 6, 2026 14:55
@speaker-ender speaker-ender marked this pull request as ready for review January 6, 2026 15:04
@speaker-ender speaker-ender requested a review from a team as a code owner January 6, 2026 15:04
@speaker-ender speaker-ender requested review from lucanovera and removed request for a team January 6, 2026 15:04
@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 6, 2026

Greptile Summary

Refactored action center to support tab-based navigation and added monitor-scoped activity views.

Key changes:

  • Created shared ActionCenterLayout component with tab navigation for both root and monitor-specific views
  • Added new "Activity" tab at root level (/action-center/activity) and monitor level (/action-center/datastore/[monitorId]/activity)
  • Extracted MonitorList component from page with search and pagination
  • Refactored ActionCenterFields from Next.js page to component accepting monitorId prop
  • Simplified filter logic in useFilters by removing useEffect and using default values directly in query state
  • Created reusable useMenuNavigation hook for generic menu-based navigation with route configuration
  • Built InProgressMonitorTasksList component that accepts optional monitorId filter for scoped activity views

Issues:

  • MonitorList uses local state for search instead of the existing useSearch hook, breaking URL state synchronization pattern used elsewhere

Confidence Score: 4/5

  • Safe to merge with minor style improvements recommended
  • Well-structured refactoring with good separation of concerns and reusable patterns. The PR exceeds size guidelines (19 files, 755 total line changes vs 15 files/500 lines limit per rule 32b2f192-9cdf-48f0-be68-5c0eaa04fc70), but changes are cohesive. Minor inconsistency with search state management pattern in MonitorList component.
  • Pay attention to MonitorList.tsx - should use useSearch hook for consistency

Important Files Changed

Filename Overview
clients/admin-ui/src/features/data-discovery-and-detection/action-center/ActionCenterLayout.tsx New shared layout component for action center with tab navigation - clean implementation
clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useActionCenterNavigation.tsx Custom hook for action center tab navigation with feature flag support
clients/admin-ui/src/features/data-discovery-and-detection/action-center/components/InProgressMonitorTasksList.tsx Activity list component with filtering and pagination - accepts optional monitorId filter
clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx Refactored to component accepting monitorId prop instead of Next.js page with router access
clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorList.tsx Extracted monitor list component from page with search and pagination - has minor issue with search state management

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

19 files reviewed, 3 comments

Edit Code Review Agent Settings | Greptile


return (
<Flex className="h-[calc(100%-48px)] overflow-hidden" gap="middle" vertical>
<Flex className="justify-between ">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: update onChange to use updateSearch from useSearch hook

If switching to useSearch hook, update this to use updateSearch instead of setSearchQuery

Suggested change
<Flex className="justify-between ">
<DebouncedSearchInput value={searchQuery} onChange={updateSearch} />

Context Used: Rule from dashboard - Use the existing useSearch hook for search functionality to maintain URL state synchronization ins... (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

another miss

Comment on lines +127 to +128
hidden={!!filters?.monitorId}
value={filters?.monitorId ?? searchQuery ?? ""}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: search input hidden but still shows monitorId as value when filtered

When filters?.monitorId is provided, the search input is hidden but still displays the monitorId as its value. Consider passing undefined or empty string when hidden for consistency

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is intentional for the moment

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm also not sure why we need to show a hidden input with a value?

flags: { webMonitor: webMonitorEnabled, heliosV2: heliosV2Enabled },
} = useFeatures();
const { paginationProps, pageIndex, pageSize, resetPagination } =
useAntPagination();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: use useSearch hook instead of local state for search

This component uses local useState for search, but the existing useSearch hook should be used to maintain URL state synchronization (as done in other components like InProgressMonitorTasksList)

Suggested change
useAntPagination();
const { searchQuery, updateSearch } = useSearch();

Context Used: Rule from dashboard - Use the existing useSearch hook for search functionality to maintain URL state synchronization ins... (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrong line. Also was existing code. Trying to reduce the amount of changes in a single pr

Copy link
Contributor

@lucanovera lucanovera left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new menu / page routing code looks good. I see the Activity tab but it's got no results on it. Can you include instructions for how to see results in there or a link to the preview where it has results?

defaultKey?: Exclude<keyof R, symbol | number>;
}

const useMenuNavigation = <
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for implementing this as a generic we can reuse. That will be useful when refactoring old tabs with hashes for pages and menus.

Comment on lines +127 to +128
hidden={!!filters?.monitorId}
value={filters?.monitorId ?? searchQuery ?? ""}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm also not sure why we need to show a hidden input with a value?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants