Add FlowIconText component for UI v2 migration#176
Conversation
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>
Review Summary by QodoAdd FlowIconText component for UI v2 migration
WalkthroughsDescription• Add FlowIconText component displaying flow icon and name • Component fetches flow data by ID using Suspense pattern • Includes Storybook stories with RouterProvider decorator • Provides unit tests and proper TypeScript exports Diagramflowchart LR
A["FlowIconText Component"] --> B["Suspense Wrapper"]
B --> C["FlowIconTextImplementation"]
C --> D["useSuspenseQuery"]
D --> E["buildFLowDetailsQuery"]
C --> F["Link to Flow Details"]
F --> G["Icon + Flow Name"]
File Changes1. ui-v2/src/components/flows/flow-icon-text/index.ts
|
Code Review by Qodo
1. Missing flow-icon-text.test.tsx
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
Comment on lines
+12
to
+18
| export const FlowIconText = ({ flowId }: FlowIconTextProps) => { | ||
| return ( | ||
| <Suspense> | ||
| <FlowIconTextImplementation flowId={flowId} /> | ||
| </Suspense> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
1. Missing flow-icon-text.test.tsx 📘 Rule violation ⛯ Reliability
A new React component flow-icon-text.tsx was added without a co-located flow-icon-text.test.tsx in the same directory. This reduces test discoverability and violates the required component/test co-location convention.
Agent Prompt
## Issue description
A new React component was added without a co-located `*.test.tsx` file in the same directory, violating the required test co-location convention.
## Issue Context
The component `FlowIconText` was introduced under `ui-v2/src/components/flows/flow-icon-text/`, but there is no `flow-icon-text.test.tsx` alongside it.
## Fix Focus Areas
- ui-v2/src/components/flows/flow-icon-text/flow-icon-text.tsx[12-18]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
+4
to
+6
| import { buildFLowDetailsQuery } from "@/api/flows"; | ||
| import { Icon } from "@/components/ui/icons"; | ||
| import { Skeleton } from "@/components/ui/skeleton"; |
There was a problem hiding this comment.
2. Unused skeleton import 🐞 Bug ✓ Correctness
FlowIconText imports Skeleton but never uses it; with noUnusedLocals enabled this causes a TypeScript compile error and breaks the ui-v2 build.
Agent Prompt
### Issue description
`FlowIconText` imports `Skeleton` but does not use it. With `noUnusedLocals: true`, this fails TypeScript compilation for ui-v2.
### Issue Context
The repo’s `ui-v2/tsconfig.app.json` enforces unused locals as errors.
### Fix Focus Areas
- ui-v2/src/components/flows/flow-icon-text/flow-icon-text.tsx[1-33]
- ui-v2/tsconfig.app.json[18-25]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
+12
to
+17
| export const FlowIconText = ({ flowId }: FlowIconTextProps) => { | ||
| return ( | ||
| <Suspense> | ||
| <FlowIconTextImplementation flowId={flowId} /> | ||
| </Suspense> | ||
| ); |
There was a problem hiding this comment.
3. Blank loading state 🐞 Bug ⛯ Reliability
FlowIconText wraps a suspenseful query in a Suspense boundary without a fallback, so it shows no placeholder while loading and diverges from the established FlowLink UX pattern.
Agent Prompt
### Issue description
`FlowIconText` wraps `useSuspenseQuery(...)` in `<Suspense>` without a fallback, resulting in an empty placeholder during loading and inconsistent behavior versus `FlowLink`.
### Issue Context
`FlowLink` is a highly similar component that uses a `Skeleton` fallback while fetching the same flow-details query.
### Fix Focus Areas
- ui-v2/src/components/flows/flow-icon-text/flow-icon-text.tsx[12-17]
- ui-v2/src/components/flows/flow-link.tsx[12-17]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Benchmark PR from agentic-review-benchmarks#9