refactor: Fix Langflow Counts file to Match Astra-UI#10852
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis pull request refactors the langflow-counts component by replacing outer div wrappers with unstyled Button components in two ShadTooltip sections. The change improves semantic HTML and click handling for GitHub and Discord links while preserving functionality and adding null-safety for the discord count display. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 error, 1 warning, 1 inconclusive)
✅ Passed checks (4 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
| <div className="hit-area-hover group relative items-center rounded-md px-2 py-1 text-muted-foreground flex"> | ||
| <FaDiscord className="h-4 w-4" /> | ||
| <span className="text-xs font-semibold pl-2"> | ||
| {formatNumber(discordCount || 0)} |
There was a problem hiding this comment.
Better to show nothing than 0
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
Codecov Report❌ Patch coverage is
❌ Your patch status has failed because the patch coverage (0.00%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #10852 +/- ##
==========================================
+ Coverage 32.50% 32.52% +0.02%
==========================================
Files 1370 1370
Lines 63494 63451 -43
Branches 9391 9380 -11
==========================================
+ Hits 20636 20637 +1
+ Misses 41819 41774 -45
- Partials 1039 1040 +1
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
src/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx}: Use React 18 with TypeScript for frontend development
Use Zustand for state management
Files:
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
src/frontend/src/**/*.{tsx,jsx,css,scss}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Use Tailwind CSS for styling
Files:
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
src/frontend/src/components/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/components/**/*.{tsx,jsx}: Use React Flow for flow graph visualization with Node, Edge, Controls, and Background components
Use the cn() utility function for combining Tailwind CSS classes in components
Use TypeScript interfaces for defining component props in React components
Files:
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
src/frontend/src/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{tsx,jsx}: Implement dark mode support using the useDarkMode hook and dark store
Use Lucide React for icon components in the application
Files:
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
🧠 Learnings (6)
📚 Learning: 2025-06-16T11:14:04.200Z
Learnt from: dolfim-ibm
Repo: langflow-ai/langflow PR: 8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses `React.PropsWithChildren<{}>` as the prop type for all icon components using forwardRef, rather than `React.SVGProps<SVGSVGElement>`. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
Applied to files:
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
📚 Learning: 2025-11-24T19:46:45.790Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/components/**/*.{tsx,jsx} : Use React Flow for flow graph visualization with Node, Edge, Controls, and Background components
Applied to files:
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
📚 Learning: 2025-11-24T19:46:45.790Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/**/*.{tsx,jsx} : Implement dark mode support using the useDarkMode hook and dark store
Applied to files:
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
📚 Learning: 2025-11-24T19:46:45.790Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/**/*.{tsx,jsx} : Use Lucide React for icon components in the application
Applied to files:
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
📚 Learning: 2025-11-24T19:46:57.920Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-11-24T19:46:57.920Z
Learning: Applies to src/frontend/src/icons/*/*.{jsx,js} : In SVG components, use the `isDark` prop to switch between light and dark color schemes (e.g., `fill={props.isDark ? "#ffffff" : "#0A0A0A"}`). The `isDark` prop should be passed from the icon wrapper component.
Applied to files:
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
📚 Learning: 2025-06-23T12:46:52.420Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop and adjusting colors accordingly.
Applied to files:
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
🧬 Code graph analysis (1)
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx (3)
src/frontend/src/components/ui/button.tsx (1)
Button(137-137)src/frontend/src/constants/constants.ts (2)
GITHUB_URL(984-984)DISCORD_URL(983-983)src/frontend/src/utils/utils.ts (1)
formatNumber(888-898)
⏰ 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). (15)
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 12/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 11/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 9/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 13/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 10/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 8/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 7/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 6/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 1/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 4/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 5/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 2/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 3/13
- GitHub Check: Test Docker Images / Test docker images
- GitHub Check: Test Starter Templates
🔇 Additional comments (1)
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx (1)
3-3: LGTM! Button import added correctly.The import follows the project's component import patterns and is necessary for the accessibility improvements.
| <Button | ||
| unstyled | ||
| onClick={() => window.open(GITHUB_URL, "_blank")} | ||
| className="hit-area-hover flex items-center gap-2 rounded-md p-1 text-muted-foreground" | ||
| > | ||
| <FaGithub className="h-4 w-4" /> | ||
| <span className="text-xs font-semibold">{formatNumber(stars)}</span> | ||
| </div> | ||
| <div className="hit-area-hover group relative items-center rounded-md px-2 py-1 text-muted-foreground flex"> | ||
| <FaGithub className="h-4 w-4" /> | ||
| <span className="text-xs font-semibold pl-2"> | ||
| {formatNumber(stars)} | ||
| </span> | ||
| </div> | ||
| </Button> |
There was a problem hiding this comment.
Remove redundant inner div wrapper.
The Button and inner div have duplicate styling classes (hit-area-hover, flex, items-center, rounded-md, text-muted-foreground), creating unnecessary DOM nesting and applying padding twice (Button's p-1 + inner div's px-2 py-1). The inner div appears to be the old clickable div preserved inside the new Button wrapper.
Apply this diff to remove the redundant wrapper:
<Button
unstyled
onClick={() => window.open(GITHUB_URL, "_blank")}
- className="hit-area-hover flex items-center gap-2 rounded-md p-1 text-muted-foreground"
+ className="hit-area-hover flex items-center gap-2 rounded-md px-2 py-1 text-muted-foreground"
>
- <div className="hit-area-hover group relative items-center rounded-md px-2 py-1 text-muted-foreground flex">
- <FaGithub className="h-4 w-4" />
- <span className="text-xs font-semibold pl-2">
- {formatNumber(stars)}
- </span>
- </div>
+ <FaGithub className="h-4 w-4" />
+ <span className="text-xs font-semibold pl-2">
+ {formatNumber(stars)}
+ </span>
</Button>🤖 Prompt for AI Agents
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
lines 19-30: remove the redundant inner div wrapper and consolidate duplicate
classes onto the Button; delete the inner <div> and place the FaGithub icon and
the <span> directly as Button children, merge/adjust styling so Button keeps the
intended layout/spacing (replace or combine p-1 with the inner div’s px-2 py-1
if needed) and keep the existing classes that are unique (e.g., group or
hit-area-hover) only once on the Button to avoid double padding and extra DOM
nesting.
| <Button | ||
| unstyled | ||
| onClick={() => window.open(DISCORD_URL, "_blank")} | ||
| className="hit-area-hover flex items-center gap-2 rounded-md p-1 text-muted-foreground" | ||
| > | ||
| <FaDiscord className="h-4 w-4" /> | ||
| <span className="text-xs font-semibold"> | ||
| {formatNumber(discordCount)} | ||
| </span> | ||
| </div> | ||
| <div className="hit-area-hover group relative items-center rounded-md px-2 py-1 text-muted-foreground flex"> | ||
| <FaDiscord className="h-4 w-4" /> | ||
| <span className="text-xs font-semibold pl-2"> | ||
| {formatNumber(discordCount || 0)} | ||
| </span> | ||
| </div> | ||
| </Button> |
There was a problem hiding this comment.
Remove redundant inner div wrapper and address "show 0" concern.
Same structural issue as the GitHub section - duplicate styling classes create unnecessary DOM nesting and double padding.
Additionally, line 46's discordCount || 0 conflicts with a past review comment suggesting not to display "0" when the count is unavailable. Consider either:
- Not rendering this section when
discordCountis unavailable - Showing a placeholder like "—" or loading state
Apply this diff to remove the redundant wrapper:
<Button
unstyled
onClick={() => window.open(DISCORD_URL, "_blank")}
- className="hit-area-hover flex items-center gap-2 rounded-md p-1 text-muted-foreground"
+ className="hit-area-hover flex items-center gap-2 rounded-md px-2 py-1 text-muted-foreground"
>
- <div className="hit-area-hover group relative items-center rounded-md px-2 py-1 text-muted-foreground flex">
- <FaDiscord className="h-4 w-4" />
- <span className="text-xs font-semibold pl-2">
- {formatNumber(discordCount || 0)}
- </span>
- </div>
+ <FaDiscord className="h-4 w-4" />
+ <span className="text-xs font-semibold pl-2">
+ {discordCount ? formatNumber(discordCount) : "—"}
+ </span>
</Button>Note: The example above shows "—" as a placeholder when count is unavailable, but you may prefer to hide the entire section conditionally.
🤖 Prompt for AI Agents
In
src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
around lines 38 to 49, remove the redundant inner div wrapper (merge its classes
into the Button) to eliminate duplicate styling/padding and extra DOM nesting,
and change the count rendering so it does not show "0" when the value is
unavailable: either conditionally render the entire Button only when
discordCount is not null/undefined, or render a placeholder like "—" instead of
using discordCount || 0 (e.g. use discordCount !== undefined && discordCount !==
null ? formatNumber(discordCount) : "—"); ensure any necessary
accessibility/role and the FaDiscord icon remain intact.
deon-sanchez
changed the title
deon-sanchez
added
refactor
github-actions
Bot
added
refactor
github-actions
Bot
added
refactor
2 participants
This pull request refactors the clickable areas for GitHub stars and Discord member counts in the
LangflowCountscomponent to improve accessibility and consistency by replacing rawdivelements with the reusableButtoncomponent.UI consistency and accessibility improvements:
divelements for GitHub and Discord links with theButtoncomponent, using theunstyledprop to preserve custom styling.Buttoncomponent from@/components/ui/button.Minor enhancements:
0if the value is undefined, preventing potential rendering issues.Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.