feat: Add CustomTermsLinks component to GeneralPage#8808
Merged
Conversation
…y custom terms links in the settings page.
Contributor
WalkthroughA new React component, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant GeneralPage
participant CustomTermsLinks
User->>GeneralPage: Render Settings GeneralPage
GeneralPage->>CustomTermsLinks: Render CustomTermsLinks
CustomTermsLinks-->>GeneralPage: Returns empty fragment
GeneralPage-->>User: Displays GeneralPage (with CustomTermsLinks placeholder)
✨ Finishing Touches
🧪 Generate Unit Tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
dosubot
Bot
added
the
size:XS
mfortman11
approved these changes
Jul 1, 2025
github-actions
Bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx (1)
13-13: GateCustomTermsLinksbehind a feature flag (or remove) until it shows real contentRight now
CustomTermsLinksis always rendered but does nothing. To avoid unnecessary re-renders and future merge conflicts, consider protecting it with a flag similar toENABLE_PROFILE_ICONS:-import { CustomTermsLinks } from "@/customization/components/custom-terms-links"; +import { CustomTermsLinks } from "@/customization/components/custom-terms-links"; +import { ENABLE_CUSTOM_TERMS } from "@/customization/feature-flags"; ... -{/* …other JSX… */} -<CustomTermsLinks /> +{ENABLE_CUSTOM_TERMS && <CustomTermsLinks />}That keeps the page clean until the component carries user-visible functionality.
Also applies to: 165-166
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/frontend/src/customization/components/custom-terms-links.tsx(1 hunks)src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`src/frontend/**/*.{ts,tsx}`: Use React 18 with TypeScript for all UI components and frontend logic.
src/frontend/**/*.{ts,tsx}: Use React 18 with TypeScript for all UI components and frontend logic.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/customization/components/custom-terms-links.tsxsrc/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
`src/frontend/**/*.{ts,tsx,js,jsx,css,scss}`: Use Tailwind CSS for styling all frontend components.
src/frontend/**/*.{ts,tsx,js,jsx,css,scss}: Use Tailwind CSS for styling all frontend components.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/customization/components/custom-terms-links.tsxsrc/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: langflow-ai/langflow#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.
src/frontend/src/customization/components/custom-terms-links.tsx (7)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.494Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: CR
PR: langflow-ai/langflow#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
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.494Z
Learning: Applies to src/frontend/src/components/**/*FlowGraph.tsx : Use React Flow for flow graph visualization components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.494Z
Learning: Applies to src/frontend/src/**/__tests__/**/*.test.{ts,tsx} : All frontend components must have associated tests using React Testing Library.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.494Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.836Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an `index.tsx` in your icon directory that exports your icon using `forwardRef` and passes the `isdark` prop.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.494Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in frontend components.
src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx (5)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.494Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.494Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.494Z
Learning: Applies to src/frontend/**/*.{ts,tsx,js,jsx,css,scss} : Use Tailwind CSS for styling all frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Error handling for API calls in React should be abstracted into custom hooks (e.g., useApi), which manage loading and error state and expose an execute function for invoking the API.
Learnt from: CR
PR: langflow-ai/langflow#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.
🧬 Code Graph Analysis (1)
src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx (1)
src/frontend/src/customization/components/custom-terms-links.tsx (1)
CustomTermsLinks(1-3)
Comment on lines
+1
to
+3
| export const CustomTermsLinks = () => { | ||
| return <></>; | ||
| }; |
Contributor
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
Component currently renders nothing – either implement a minimal stub UI or leave a clear TODO
CustomTermsLinks returns an empty fragment, so mounting it adds no visible value and can be confusing for future maintainers. If this is intentional, at least leave a comment/TODO; otherwise ship a minimal placeholder (e.g. a couple of Tailwind-styled links) so designers can iterate.
export const CustomTermsLinks = () => {
- return <></>;
+ // TODO: replace placeholder with real links to Terms & Conditions / Privacy Policy
+ return (
+ <div className="text-xs text-gray-500 dark:text-gray-400">
+ {/* Placeholder content */}
+ <a
+ href="/terms"
+ className="underline hover:no-underline focus:outline-none focus:ring"
+ >
+ Terms of Service
+ </a>
+ {" • "}
+ <a
+ href="/privacy"
+ className="underline hover:no-underline focus:outline-none focus:ring"
+ >
+ Privacy Policy
+ </a>
+ </div>
+ );
};Add placeholder UI or TODO to CustomTermsLinks component
The CustomTermsLinks component currently returns an empty fragment, which provides no visible output and can be confusing. Please add a minimal stub or a clear TODO so designers can iterate.
- File:
src/frontend/src/customization/components/custom-terms-links.tsx(lines 1–3)
Recommended change:
export const CustomTermsLinks = () => {
- return <></>;
+ // TODO: Replace this placeholder with real Terms & Conditions / Privacy Policy links
+ return (
+ <div className="text-xs text-gray-500 dark:text-gray-400">
+ <a
+ href="/terms"
+ className="underline hover:no-underline focus:outline-none focus:ring"
+ >
+ Terms of Service
+ </a>
+ {" • "}
+ <a
+ href="/privacy"
+ className="underline hover:no-underline focus:outline-none focus:ring"
+ >
+ Privacy Policy
+ </a>
+ </div>
+ );
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const CustomTermsLinks = () => { | |
| return <></>; | |
| }; | |
| export const CustomTermsLinks = () => { | |
| // TODO: Replace this placeholder with real Terms & Conditions / Privacy Policy links | |
| return ( | |
| <div className="text-xs text-gray-500 dark:text-gray-400"> | |
| <a | |
| href="/terms" | |
| className="underline hover:no-underline focus:outline-none focus:ring" | |
| > | |
| Terms of Service | |
| </a> | |
| {" • "} | |
| <a | |
| href="/privacy" | |
| className="underline hover:no-underline focus:outline-none focus:ring" | |
| > | |
| Privacy Policy | |
| </a> | |
| </div> | |
| ); | |
| }; |
🤖 Prompt for AI Agents
In src/frontend/src/customization/components/custom-terms-links.tsx lines 1 to
3, the CustomTermsLinks component returns an empty fragment, resulting in no
visible UI. Replace the empty fragment with a minimal placeholder element or a
clear TODO comment inside the returned JSX to indicate that this component is a
stub for future design iteration.
lucaseduoli
pushed a commit
that referenced
this pull request
Jul 1, 2025
✨ (frontend): add CustomTermsLinks component to GeneralPage to display custom terms links in the settings page.
Khurdhula-Harshavardhan
pushed a commit
to JigsawStack/langflow
that referenced
this pull request
Jul 1, 2025
✨ (frontend): add CustomTermsLinks component to GeneralPage to display custom terms links in the settings page.
ogabrielluiz
pushed a commit
that referenced
this pull request
Jul 2, 2025
✨ (frontend): add CustomTermsLinks component to GeneralPage to display custom terms links in the settings page.
jordanrfrazier
pushed a commit
that referenced
this pull request
Jul 3, 2025
✨ (frontend): add CustomTermsLinks component to GeneralPage to display custom terms links in the settings page.
ogabrielluiz
pushed a commit
that referenced
this pull request
Jul 3, 2025
✨ (frontend): add CustomTermsLinks component to GeneralPage to display custom terms links in the settings page.
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
2 participants
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.
This pull request introduces a new
CustomTermsLinkscomponent and integrates it into theGeneralPageof the settings section. The changes primarily focus on adding this new component and updating imports accordingly.Component Addition:
src/frontend/src/customization/components/custom-terms-links.tsx: Added a newCustomTermsLinkscomponent, which currently renders an empty fragment.Integration with
GeneralPage:src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx:CustomTermsLinkscomponent.CustomTermsLinkscomponent to the JSX structure ofGeneralPage.Summary by CodeRabbit