-
Notifications
You must be signed in to change notification settings - Fork 8.2k
feat: updated Composio Github icon #10764
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: updated Composio Github icon #10764
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 WalkthroughAdds a new GitHub Composio icon component with SVG rendering, ref-forwarding wrapper, lazy-loading registration, and backend component icon reference update. No logic changes; primarily configuration and UI component additions. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touchesImportant Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional. ❌ Failed checks (1 error, 2 warnings)
✅ 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 |
|
Hi! I'm I would like to apply some automated changes to this pull request, but it looks like I don't have the necessary permissions to do so. To get this pull request into a mergeable state, please do one of the following two things:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/frontend/src/icons/GithubComposio/github.svgis excluded by!**/*.svg
📒 Files selected for processing (4)
src/frontend/src/icons/GithubComposio/github.jsx(1 hunks)src/frontend/src/icons/GithubComposio/index.tsx(1 hunks)src/frontend/src/icons/lazyIconImports.ts(1 hunks)src/lfx/src/lfx/components/composio/github.amrom.workers.devposio.py(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
src/frontend/src/**/*.{tsx,jsx,css,scss}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Use Tailwind CSS for styling
Files:
src/frontend/src/icons/GithubComposio/github.jsxsrc/frontend/src/icons/GithubComposio/index.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/icons/GithubComposio/github.jsxsrc/frontend/src/icons/GithubComposio/index.tsx
src/frontend/src/icons/*/*.{jsx,js}
📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)
src/frontend/src/icons/*/*.{jsx,js}: Create icon components insrc/frontend/src/icons/IconName/directories. Add an SVG as a React component (e.g.,IconName.jsx) that exports a functional component.
In SVG components, use theisDarkprop to switch between light and dark color schemes (e.g.,fill={props.isDark ? "#ffffff" : "#0A0A0A"}). TheisDarkprop should be passed from the icon wrapper component.
Files:
src/frontend/src/icons/GithubComposio/github.jsx
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/icons/GithubComposio/index.tsxsrc/frontend/src/icons/lazyIconImports.ts
src/frontend/src/icons/*/index.tsx
📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)
Create an
index.tsxfor each icon that exports the icon usingforwardRefand properly types it asReact.ForwardRefExoticComponent<React.PropsWithChildren<{}> & React.RefAttributes<SVGSVGElement>>.
Files:
src/frontend/src/icons/GithubComposio/index.tsx
src/frontend/src/icons/lazyIconImports.ts
📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)
Add icon entries to the
lazyIconsMappingobject insrc/frontend/src/icons/lazyIconImports.ts. The key must match the backend icon name exactly (case-sensitive) and use dynamic imports:IconName: () => import("@/icons/IconName").then((mod) => ({ default: mod.IconNameIcon })).
Files:
src/frontend/src/icons/lazyIconImports.ts
🧠 Learnings (13)
📓 Common learnings
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: When implementing a new component icon in Langflow, ensure the icon name is clear, recognizable, and used consistently across both backend (Python 'icon' attribute) and frontend (React/TypeScript mapping).
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} : Create icon components in `src/frontend/src/icons/IconName/` directories. Add an SVG as a React component (e.g., `IconName.jsx`) that exports a functional component.
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
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/*/index.tsx : Create an `index.tsx` for each icon that exports the icon using `forwardRef` and properly types it as `React.ForwardRefExoticComponent<React.PropsWithChildren<{}> & React.RefAttributes<SVGSVGElement>>`.
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/.
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
📚 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} : Create icon components in `src/frontend/src/icons/IconName/` directories. Add an SVG as a React component (e.g., `IconName.jsx`) that exports a functional component.
Applied to files:
src/frontend/src/icons/GithubComposio/github.jsxsrc/frontend/src/icons/GithubComposio/index.tsxsrc/frontend/src/icons/lazyIconImports.ts
📚 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/*/index.tsx : Create an `index.tsx` for each icon that exports the icon using `forwardRef` and properly types it as `React.ForwardRefExoticComponent<React.PropsWithChildren<{}> & React.RefAttributes<SVGSVGElement>>`.
Applied to files:
src/frontend/src/icons/GithubComposio/github.jsxsrc/frontend/src/icons/GithubComposio/index.tsxsrc/frontend/src/icons/lazyIconImports.ts
📚 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/icons/GithubComposio/github.jsxsrc/frontend/src/icons/GithubComposio/index.tsxsrc/frontend/src/icons/lazyIconImports.ts
📚 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/icons/GithubComposio/github.jsxsrc/frontend/src/icons/GithubComposio/index.tsx
📚 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/icons/GithubComposio/github.jsxsrc/frontend/src/icons/GithubComposio/index.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: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Applied to files:
src/frontend/src/icons/GithubComposio/github.jsxsrc/frontend/src/icons/GithubComposio/index.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/icons/GithubComposio/github.jsxsrc/frontend/src/icons/GithubComposio/index.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: When implementing a new component icon in Langflow, ensure the icon name is clear, recognizable, and used consistently across both backend (Python 'icon' attribute) and frontend (React/TypeScript mapping).
Applied to files:
src/frontend/src/icons/GithubComposio/github.jsxsrc/lfx/src/lfx/components/composio/github.amrom.workers.devposio.py
📚 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/icons/GithubComposio/github.jsxsrc/frontend/src/icons/GithubComposio/index.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 TypeScript interfaces for defining component props in React components
Applied to files:
src/frontend/src/icons/GithubComposio/index.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/backend/**/*component*.py : In Python component classes, set the `icon` attribute to a string matching the desired icon name (e.g., `icon = "AstraDB"`). The string must match the frontend icon mapping exactly (case-sensitive).
Applied to files:
src/lfx/src/lfx/components/composio/github.amrom.workers.devposio.py
📚 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/lazyIconImports.ts : Add icon entries to the `lazyIconsMapping` object in `src/frontend/src/icons/lazyIconImports.ts`. The key must match the backend icon name exactly (case-sensitive) and use dynamic imports: `IconName: () => import("@/icons/IconName").then((mod) => ({ default: mod.IconNameIcon }))`.
Applied to files:
src/frontend/src/icons/lazyIconImports.ts
⏰ 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). (16)
- GitHub Check: Test Docker Images / Test docker images
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 5
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 4
- GitHub Check: Run Backend Tests / Integration Tests - Python 3.10
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 1
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 2
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 3
- GitHub Check: Lint Backend / Run Mypy (3.11)
- GitHub Check: Run Backend Tests / LFX Tests - Python 3.10
- GitHub Check: Lint Backend / Run Mypy (3.10)
- GitHub Check: Run Frontend Unit Tests / Frontend Jest Unit Tests
- GitHub Check: Lint Backend / Run Mypy (3.12)
- GitHub Check: Lint Backend / Run Mypy (3.13)
- GitHub Check: Run Frontend Tests / Determine Test Suites and Shard Distribution
- GitHub Check: Test Starter Templates
- GitHub Check: Update Component Index
🔇 Additional comments (3)
src/lfx/src/lfx/components/composio/github.amrom.workers.devposio.py (1)
6-6: Backend icon name now matches frontend mappingUpdating
iconto"GithubComposio"aligns this component with the new frontend icon key and lazy-mapping entry; this is consistent with the icon naming rules.Based on learnings, this keeps backend
iconin sync with the frontend mapping.src/frontend/src/icons/lazyIconImports.ts (1)
203-206: Lazy icon mapping forGithubComposiois correctly wiredThe new
GithubComposioentry uses the expected dynamic import pattern and points tomod.GithubIcon, matching the export from the icon’sindex.tsxand the backendiconstring.As per coding guidelines, the key matches the backend icon name and uses the standard lazy import shape.
src/frontend/src/icons/GithubComposio/index.tsx (1)
1-9: Icon wrapper matches forwardRef + typing conventions
GithubIconfollows the standard icon wrapper pattern:forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>and simple passthrough to the SVG component, so refs and props (includingisDark) are forwarded correctly.Based on learnings, this aligns with the established
index.tsxicon wrapper structure.
| const Icon = (props) => ( | ||
| <svg | ||
| version="1.1" | ||
| id="Layer_1" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| xmlnsXlink="http://www.w3.org/1999/xlink" | ||
| x="0px" | ||
| y="0px" | ||
| viewBox="250 250 500 500" | ||
| style={{ enableBackground: "new 0 0 1000 1000" }} | ||
| xmlSpace="preserve" | ||
| {...props} | ||
| > | ||
| <rect | ||
| x="0" | ||
| y="0" | ||
| width="1000" | ||
| height="1000" | ||
| rx="100" | ||
| ry="100" | ||
| fill="#111011" | ||
| /> | ||
| <g> | ||
| <path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| fill="#FFFFFF" | ||
| d="M500,322.5c-100.5,0-182,81.5-182,182c0,80.4,52.1,148.6,124.5,172.7c9.1,1.7,12.4-3.9,12.4-8.8 | ||
| c0-4.3-0.2-18.7-0.2-33.9c-50.6,11-61.3-21.5-61.3-21.5c-8.3-21-20.2-26.6-20.2-26.6c-16.5-11.3,1.2-11.1,1.2-11.1 | ||
| c18.3,1.3,27.9,18.8,27.9,18.8c16.2,27.8,42.6,19.8,53,15.1c1.6-11.8,6.3-19.8,11.6-24.3c-40.4-4.6-82.9-20.2-82.9-89.9 | ||
| c0-19.9,7.1-36.1,18.8-48.8c-1.9-4.6-8.1-23.1,1.8-48.2c0,0,15.3-4.9,50.1,18.7c14.5-4,30.1-6.1,45.6-6.1c15.5,0.1,31,2.1,45.6,6.1 | ||
| c34.7-23.5,50-18.7,50-18.7c9.9,25.1,3.7,43.6,1.8,48.2c11.7,12.7,18.7,29,18.7,48.8c0,69.9-42.6,85.3-83.1,89.8 | ||
| c6.5,5.6,12.3,16.7,12.3,33.7c0,24.3-0.2,43.9-0.2,49.9c0,4.8,3.3,10.5,12.5,8.7C629.9,653.1,682,584.9,682,504.5 | ||
| C682,404,600.5,322.5,500,322.5z" | ||
| /> | ||
| <path | ||
| fill="#FFFFFF" | ||
| d="M386.9,583.8c-0.4,0.9-1.8,1.2-3.1,0.6c-1.3-0.6-2.1-1.8-1.6-2.7c0.4-0.9,1.8-1.2,3.1-0.6 | ||
| C386.6,581.6,387.4,582.9,386.9,583.8L386.9,583.8z M384.7,582.1" | ||
| /> | ||
| <path | ||
| fill="#FFFFFF" | ||
| d="M394.3,592c-0.9,0.8-2.6,0.4-3.7-0.8c-1.2-1.3-1.4-3-0.5-3.8c0.9-0.8,2.5-0.4,3.7,0.8 | ||
| C395,589.5,395.2,591.2,394.3,592L394.3,592z M392.6,590.2" | ||
| /> | ||
| <path | ||
| fill="#FFFFFF" | ||
| d="M401.5,602.5c-1.1,0.8-2.9,0.1-4.1-1.6c-1.1-1.6-1.1-3.6,0-4.3c1.1-0.8,2.9-0.1,4.1,1.5 | ||
| C402.6,599.8,402.6,601.7,401.5,602.5L401.5,602.5z M401.5,602.5" | ||
| /> | ||
| <path | ||
| fill="#FFFFFF" | ||
| d="M411.3,612.6c-1,1.1-3.1,0.8-4.7-0.7c-1.6-1.5-2-3.5-1-4.6c1-1.1,3.1-0.8,4.7,0.7 | ||
| C411.9,609.4,412.4,611.5,411.3,612.6L411.3,612.6z M411.3,612.6" | ||
| /> | ||
| <path | ||
| fill="#FFFFFF" | ||
| d="M424.9,618.5c-0.4,1.4-2.5,2.1-4.5,1.5c-2.1-0.6-3.4-2.3-3-3.7c0.4-1.4,2.5-2.1,4.6-1.5 | ||
| C424,615.4,425.3,617.1,424.9,618.5L424.9,618.5z M424.9,618.5" | ||
| /> | ||
| <path | ||
| fill="#FFFFFF" | ||
| d="M439.8,619.6c0.1,1.5-1.7,2.7-3.9,2.8c-2.2,0.1-3.9-1.2-4-2.6c0-1.5,1.7-2.7,3.9-2.8 | ||
| C438,616.9,439.8,618.1,439.8,619.6L439.8,619.6z M439.8,619.6" | ||
| /> | ||
| <path | ||
| fill="#FFFFFF" | ||
| d="M453.6,617.2c0.3,1.5-1.2,3-3.4,3.4c-2.1,0.4-4.1-0.5-4.3-2c-0.3-1.5,1.3-3,3.4-3.4 | ||
| C451.4,614.9,453.4,615.7,453.6,617.2L453.6,617.2z M453.6,617.2" | ||
| /> | ||
| </g> | ||
| </svg> | ||
| ); | ||
|
|
||
| export default Icon; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion | 🟠 Major
Use isDark prop to drive SVG colors for dark‑mode support
The SVG currently hardcodes fill colors and ignores props.isDark, so the icon does not actually react to theme changes as required by the icon/dark‑mode guidelines. Please wire the fills to isDark so the logo adapts between light and dark schemes. For example:
-const Icon = (props) => (
+const Icon = (props) => (
<svg
@@
- <rect
+ <rect
x="0"
y="0"
width="1000"
height="1000"
rx="100"
ry="100"
- fill="#111011"
+ fill={props.isDark ? "#ffffff" : "#111011"}
/>
@@
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- fill="#FFFFFF"
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
- <path
- fill="#FFFFFF"
+ <path
+ fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
- <path
- fill="#FFFFFF"
+ <path
+ fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
- <path
- fill="#FFFFFF"
+ <path
+ fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
- <path
- fill="#FFFFFF"
+ <path
+ fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
- <path
- fill="#FFFFFF"
+ <path
+ fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}(Adjust exact colors as needed to match your design, but please base them on props.isDark.)
Based on learnings, SVG icon components should consume an isDark prop to switch between light and dark color schemes.
🤖 Prompt for AI Agents
In src/frontend/src/icons/GithubComposio/github.jsx lines 1-75, the SVG fills
are hardcoded and ignore props.isDark; update the component to derive fill
colors from props.isDark (e.g., const bg = props.isDark ? darkBgColor :
lightBgColor; const fg = props.isDark ? darkFgColor : lightFgColor) and replace
the hardcoded fill="#111011" on the rect and fill="#FFFFFF" on the paths with
these variables (use sensible defaults when isDark is undefined), ensuring you
continue to spread {...props} and do not remove existing attributes like viewBox
or style.
edwinjosechittilappilly
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
feat: updated Composio Github component Co-authored-by: Edwin Jose <[email protected]>
TL;DR: Updated Github Component's icon to support DarkTheme.
Backend:
langflow/src/lfx/src/lfx/components/composioFrontend:
langflow/src/frontend/src/iconsand lazyIconImportslangflow/src/frontend/src/icons/lazyIconImports.tsSummary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.