Skip to content

Code Review Bench PR #20030 - Add FlowIconText component for UI v2 migration#9

Open
tomerqodo wants to merge 3 commits intobase_pr_20030_20260125_2650from
corrupted_pr_20030_20260125_2650
Open

Code Review Bench PR #20030 - Add FlowIconText component for UI v2 migration#9
tomerqodo wants to merge 3 commits intobase_pr_20030_20260125_2650from
corrupted_pr_20030_20260125_2650

Conversation

@tomerqodo
Copy link

Code Review Bench PR PrefectHQ#20030

Original PR Title: Add FlowIconText component for UI v2 migration
Original PR Description: Adds a new FlowIconText component that displays a flow's icon and name as a clickable link, fetching flow data by ID. This component is intended for use cases where you want to show just the icon + name without the "Flow" label prefix (unlike the existing FlowLink component).

The implementation follows the established Suspense pattern used in similar link components like FlowLink and DeploymentLink.

Files added:

  • flow-icon-text.tsx - Main component with Suspense wrapper and Skeleton fallback
  • flow-icon-text.stories.tsx - Storybook stories with RouterProvider decorator for proper rendering
  • flow-icon-text.test.tsx - Unit tests using MSW for API mocking
  • index.ts - Export file

Storybook preview:

FlowIconText Storybook

Checklist

  • This pull request references any related issue by including "closes <link to issue>"
    • closes OSS-7467
  • If this pull request adds new functionality, it includes unit tests that cover the changes
  • If this pull request removes docs files, it includes redirect settings in mint.json.
  • If this pull request adds functions or classes, it includes helpful docstrings.

Link to Devin run: https://app.devin.ai/sessions/e2ff116e69b643d9a58e05343a5fc69a
Requested by: alex.s@prefect.io (@desertaxle)
Original PR URL: PrefectHQ#20030

devin-ai-integration bot and others added 3 commits January 25, 2026 12:10
Create a new FlowIconText component that displays a flow's icon and name
as a clickable link, fetching flow data by ID. This component follows the
existing Suspense pattern used in similar link components like FlowLink
and DeploymentLink.

Files added:
- flow-icon-text.tsx: Main component with Suspense wrapper
- flow-icon-text.stories.tsx: Storybook stories
- flow-icon-text.test.tsx: Unit tests
- index.ts: Export file

Co-Authored-By: alex.s@prefect.io <ajstreed1@gmail.com>
Add RouterProvider decorator to the Storybook story so the component
renders correctly in Storybook. The Link component from TanStack Router
requires a router context to function properly.

Co-Authored-By: alex.s@prefect.io <ajstreed1@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant