Add FlowIconText component for UI v2 migration

[tomerqodo]

Benchmark PR from agentic-review-benchmarks#9

Summary by CodeRabbit

• New Features
  • Introduced FlowIconText component that displays flow names with icons, enabling quick navigation to flow detail pages.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

A new FlowIconText React component is introduced with Storybook story setup. The component fetches flow details via Suspense-enabled queries and renders a link with an icon and flow name. Routing and React Query context is provided through Storybook decorators for development and testing purposes.

Changes

Cohort / File(s)	Summary
Component Implementation ui-v2/src/components/flows/flow-icon-text/flow-icon-text.tsx	Introduces FlowIconText component that fetches flow details using useSuspenseQuery and renders a link with an icon. Component composition splits wrapper (with Suspense) and implementation layer for data-driven rendering.
Story & Exports ui-v2/src/components/flows/flow-icon-text/flow-icon-text.stories.tsx, ui-v2/src/components/flows/flow-icon-text/index.ts	Adds Storybook story with Meta configuration providing React Query client and test router context via decorators. Index file re-exports FlowIconText for external consumption.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A component hops into view,
FlowIconText, fresh and new!
Queries dance, links take flight,
Icons and text shining bright! ✨
Stories tell how it all works,
What delightful code work!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is minimal and lacks required sections from the template. It provides only a link to the source benchmark PR without covering overview, issue references, testing, or docstrings.	Add an overview section describing the changes, reference related issues with 'closes' if applicable, confirm unit tests are included, and verify docstrings are present on new functions/classes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a new FlowIconText component for UI v2 migration, which matches the primary objective of the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

🧹 Recent nitpick comments

ui-v2/src/components/flows/flow-icon-text/flow-icon-text.tsx (1)

12-17: Add a Suspense fallback to avoid blank render during loading.

A small loading UI improves perceived performance and prevents an empty gap while the query suspends.

♻️ Proposed change

 export const FlowIconText = ({ flowId }: FlowIconTextProps) => {
 	return (
-		<Suspense>
+		<Suspense fallback={<span className="text-xs text-muted-foreground">Loading…</span>}>
 			<FlowIconTextImplementation flowId={flowId} />
 		</Suspense>
 	);
 };

ui-v2/src/components/flows/flow-icon-text/flow-icon-text.stories.tsx (1)

12-33: Use the same QueryClient for router context and provider.

This avoids split caches and inconsistent defaults between router loaders (if added later) and hooks.

♻️ Proposed change

-const createTestRouter = (flowId: string) => {
+const createTestRouter = (flowId: string, queryClient: QueryClient) => {
 	const rootRoute = createRootRoute({
 		component: () => (
 			<Suspense fallback={<div>Loading...</div>}>
 				<FlowIconText flowId={flowId} />
 			</Suspense>
 		),
 	});

 	return createRouter({
 		routeTree: rootRoute,
 		history: createMemoryHistory({ initialEntries: ["/"] }),
-		context: { queryClient: new QueryClient() },
+		context: { queryClient },
 	});
 };

-		(_Story, context) => {
-			const router = createTestRouter(context.args.flowId ?? "flow-123");
+		(_Story, context) => {
+			const router = createTestRouter(context.args.flowId ?? "flow-123", queryClient);
 			return (
 				<QueryClientProvider client={queryClient}>
 					<RouterProvider router={router} />
 				</QueryClientProvider>
 			);
 		},

Also applies to: 40-45

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 579c17b and d7af125.

📒 Files selected for processing (3)

• ui-v2/src/components/flows/flow-icon-text/flow-icon-text.stories.tsx
• ui-v2/src/components/flows/flow-icon-text/flow-icon-text.tsx
• ui-v2/src/components/flows/flow-icon-text/index.ts

🧰 Additional context used

🧬 Code graph analysis (1)

ui-v2/src/components/flows/flow-icon-text/flow-icon-text.tsx (2)

ui-v2/src/api/flows/index.ts (1)

• buildFLowDetailsQuery (136-148)

ui-v2/src/components/ui/icons/icon.tsx (1)

• Icon (8-11)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Test

🔇 Additional comments (3)

ui-v2/src/components/flows/flow-icon-text/flow-icon-text.tsx (1)

20-31: Nice, clean data-to-UI flow.

ui-v2/src/components/flows/flow-icon-text/index.ts (1)

1-1: LGTM — clean re-export.

ui-v2/src/components/flows/flow-icon-text/flow-icon-text.stories.tsx (1)

36-57: Story setup looks solid and clear.

Also applies to: 62-66

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}