Okta Monitor UX: logos, descriptions, type tags, Add→Approve

[Kelsey-Ethyca]

Summary

• BrandFetch logos: Enabled vendor logo resolution for infrastructure system list items (previously commented out behind ENG-2391). Shows logos from metadata vendor_logo_url, falls back to BrandFetch CDN via vendor_id/system name, then to a generic settings icon.
• System descriptions: Added display of item.description as secondary text below each system name in the infrastructure list, giving non-technical users context about what each system does.
• Monitor type tag: Added a tag (IDP / Web / Datastore) next to each monitor name in the activity center list, so users can quickly identify the integration type.
• Add → Approve: Changed all "Add" button labels and tooltips to "Approve" across individual action cells, bulk action menus, and tooltip messages — making it clearer that the action is approval, not creation.

Test plan

• Verify BrandFetch logos load correctly for known vendors in the Okta monitor system list
• Verify fallback to settings gear icon when no logo is available
• Verify system descriptions appear below system names when available
• Verify monitor type tags (IDP, Web, Datastore) appear on the activity center monitor list
• Verify "Approve" label appears on individual system action buttons
• Verify "Approve" label appears in bulk actions dropdown menus
• Verify tooltip messages reference "approve" instead of "add"

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Error		Feb 26, 2026 6:08pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Feb 26, 2026 6:08pm

[greptile-apps]

Greptile Summary

This PR enhances the Okta Monitor UX with four main improvements: vendor logos via BrandFetch, system descriptions, monitor type tags, and renaming "Add" to "Approve" throughout the UI.

Key Changes:

• Enabled BrandFetch logo integration for infrastructure systems with proper fallback hierarchy (metadata URL → BrandFetch CDN → settings icon)
• Added system descriptions as secondary text below system names for better context
• Added monitor type tags (Web/Datastore/IDP) to activity center for quick identification
• Consistently renamed all "Add" buttons and tooltips to "Approve" across individual actions, bulk actions, and error messages

Implementation Quality:

• Proper use of useMemo for logo URL computation with correct dependencies
• Safe conditional rendering for optional fields (item.description)
• Type-safe constant mapping for monitor type labels using Record<MONITOR_TYPES, string>
• Consistent accessibility updates with aria-labels matching button text

Confidence Score: 5/5

• This PR is safe to merge with no blocking issues
• The changes are straightforward UX improvements with proper type safety, safe rendering patterns, and consistent implementation across all affected files. The only minor style guide deviation (text-xs class) is an existing pattern used throughout the codebase.
• No files require special attention

Important Files Changed

Filename	Overview
clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorResult.tsx	Added monitor type tag labels (Web/Datastore/IDP) - clean implementation using proper constants
clients/admin-ui/src/features/data-discovery-and-detection/action-center/components/InfrastructureSystemListItem.tsx	Enabled logo rendering with BrandFetch fallback and added description display - proper use of memoization and safe rendering

_{Last reviewed commit: cac8faa}

[greptile-apps]

_{6 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

The text-xs tailwind class is used for font sizing. Per the frontend style guide, tailwind should only be used for layout and animation, not for typography sizing. Consider using Ant Design's Text component size prop or FidesUI palette/theme styling instead.

Context Used: Context from dashboard - Front-end developer rules (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!}