feat(frontend): enhance CredentialsInput and CredentialRow components with variant support #11753
Conversation
… with variant support ### Changes 🏗️ - Added a `variant` prop to `CredentialsInput`, `CredentialRow`, and `CredentialsSelect` components to support different styling contexts (default and node). - Updated rendering logic in `CredentialRow` to apply compact styling when the variant is set to "node". - Adjusted `CredentialsSelect` to conditionally apply styles based on the variant prop. ### Impact These changes improve the flexibility and usability of the credentials input components, allowing for better integration in different UI contexts. ### Checklist 📋 - [x] Verified that components render correctly with both variants. - [x] Ensured that styling changes do not affect existing functionality.
github-project-automation
bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
WalkthroughThe PR introduces an optional Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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 |
This stack of pull requests is managed by Graphite. Learn more about stacking. |
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsx (2)
1-1: Legacy import violates coding guidelines.
IconKeyis imported from@/components/__legacy__/ui/icons, but the coding guidelines state: "Never usesrc/components/__legacy__/*". Consider migrating to a Phosphor Icons equivalent.♻️ Suggested fix using Phosphor Icons
-import { IconKey } from "@/components/__legacy__/ui/icons"; +import { Key } from "@phosphor-icons/react";Then update usage at line 73:
- <IconKey className="h-5 w-5 shrink-0 text-zinc-800" /> + <Key className="h-5 w-5 shrink-0 text-zinc-800" weight="fill" />
55-61: Consider extracting the className logic for readability.The four-level nested ternary is functional but harder to scan. A small helper or
cn()with explicit conditions could improve clarity.♻️ Optional: Simplify with explicit conditions
className={cn( "flex items-center gap-3 rounded-medium border border-zinc-200 bg-white p-3 transition-colors", - asSelectTrigger && isNodeVariant - ? "min-w-0 flex-1 overflow-hidden border-0 bg-transparent" - : asSelectTrigger - ? "border-0 bg-transparent" - : readOnly - ? "w-fit" - : "", + asSelectTrigger && "border-0 bg-transparent", + asSelectTrigger && isNodeVariant && "min-w-0 flex-1 overflow-hidden", + !asSelectTrigger && readOnly && "w-fit", )}autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsx (1)
1-7: Legacy import violates coding guidelines.
Select,SelectContent,SelectItem,SelectTrigger, andSelectValueare imported from@/components/__legacy__/ui/select. The coding guidelines state to never usesrc/components/__legacy__/*. Consider migrating to design system components fromsrc/components/.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsx
🧰 Additional context used
📓 Path-based instructions (10)
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: Always run pnpm install before frontend development, then use pnpm dev to start development server on port 3000
For frontend code formatting and linting, always run pnpm formatIf adding protected frontend routes, update
frontend/lib/supabase/middleware.ts
autogpt_platform/frontend/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/for data fetching in frontend
Use function declarations (not arrow functions) for components and handlers in frontend
Only use Phosphor Icons in frontend; never use other icon libraries
Never usesrc/components/__legacy__/*or deprecatedBackendAPIin frontend
Files:
autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx
autogpt_platform/frontend/**/*.{ts,tsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Node.js 21+ with pnpm package manager for frontend development
Files:
autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx
autogpt_platform/frontend/src/components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/components/**/*.tsx: Separate frontend component render logic from data/behavior. Structure: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts. Small components (3-4 lines) can be inline. Render-only components can be direct files without folders
Use Tailwind CSS utilities only for styling in frontend. Use design system components from src/components/ (atoms, molecules, organisms). Never use src/components/legacy/*
Only use Phosphor Icons (@phosphor-icons/react) for icon components in frontend
Prefer design tokens over hardcoded values in frontend styling
Files:
autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from @/app/api/generated/endpoints/ (generated via Orval from backend OpenAPI spec). Pattern: use{Method}{Version}{OperationName} (e.g., useGetV2ListLibraryAgents). Regenerate with: pnpm generate:api. Never use deprecated BackendAPI or src/lib/autogpt-server-api/*
Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas (map, filter, etc.)
Use PascalCase for components, camelCase with use prefix for hooks
No barrel files or index.ts re-exports in frontend
For frontend render errors, use component. For mutation errors, display with toast notifications. For manual exceptions, use Sentry.captureException()
Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Files:
autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx
autogpt_platform/frontend/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Format frontend code using
pnpm format
Files:
autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx
autogpt_platform/frontend/**
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/**: Install frontend dependencies usingpnpm iinstead of npm
Generate API client from OpenAPI spec usingpnpm generate:api
Regenerate API client hooks usingpnpm generate:apiwhen OpenAPI spec changes
Files:
autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx
autogpt_platform/frontend/src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/src/components/**/*.{ts,tsx}: Separate render logic from data/behavior in components
Structure frontend components asComponentName/ComponentName.tsxplususeComponentName.tshook plushelpers.tsfile
Files:
autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use design system components from
src/components/(atoms, molecules, organisms) in frontend
Files:
autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx
autogpt_platform/frontend/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use only Tailwind CSS for styling in frontend, with design tokens and Phosphor Icons
Files:
autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx
autogpt_platform/frontend/src/app/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Create frontend pages in
src/app/(platform)/feature-name/page.tsxwith correspondingusePageName.tshook and localcomponents/subfolder
Files:
autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx
🧬 Code graph analysis (1)
autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsx (2)
autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/helpers.ts (4)
providerIcons(14-56)fallbackIcon(12-12)getCredentialDisplayName(92-99)MASKED_KEY_LENGTH(102-102)autogpt_platform/frontend/src/components/atoms/Text/Text.tsx (1)
Text(15-35)
⏰ 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). (4)
- GitHub Check: Seer Code Review
- GitHub Check: types
- GitHub Check: test
- GitHub Check: Check PR Status
🔇 Additional comments (10)
autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsx (2)
33-49: LGTM!The variant prop is well-documented with JSDoc, the default value is sensible, and the
isNodeVariantderived flag improves readability throughout the component.
91-98: LGTM!The conditional rendering correctly hides the masked key display in the compact node variant trigger context, preserving it elsewhere. This aligns with the PR's goal of compact styling for nodes.
autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsx (2)
91-92: LGTM!The
variant="node"andclassName="w-full"props are correctly applied to enable compact styling for credential selection within the node builder context.
4-6: Verify if type imports fromautogpt-server-apiare permitted.The coding guidelines state to never use
src/lib/autogpt-server-api/*. This file importsBlockIOCredentialsSubSchemaandCredentialsMetaInputfrom this path. Please verify whether type imports are exempt from this guideline or if these should be migrated to generated types.autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx (3)
39-52: LGTM!The variant prop is correctly typed and defaulted, maintaining consistency with the child components.
128-128: LGTM!The variant prop is correctly propagated to
CredentialsSelect.
130-154: Variant prop not passed toCredentialRowin single-credential branch.When there's only one credential and it's required (or in read-only mode), the
CredentialRowrendered directly here doesn't receive thevariantprop. This means node-variant styling won't apply in this scenario.If this is intentional (different display for single credentials), no action needed. If node styling should apply universally, add the prop:
🔧 Potential fix if variant should propagate
<CredentialRow key={credential.id} credential={credential} provider={provider} displayName={displayName} onSelect={() => handleCredentialSelect(credential.id)} onDelete={() => handleDeleteCredential({ id: credential.id, title: getCredentialDisplayName( credential, displayName, ), }) } readOnly={readOnly} + variant={variant} />autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsx (3)
30-43: LGTM!The variant prop is well-documented and consistently defaulted, matching the pattern used in sibling components.
66-70: LGTM!The conditional
overflow-hiddenclass for the node variant is correctly applied using thecnutility, and integrates cleanly with existing trigger styling.
87-87: LGTM!The variant prop is correctly propagated to
CredentialRow, completing the prop drilling chain fromCredentialsInputthrough to the leaf component.
github-project-automation
bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
github-project-automation
bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
2 participants
Changes 🏗️
variantprop toCredentialsInputcomponent with options "default" or "node"CredentialRowcomponentCredentialsFieldcomponent with appropriate stylingBefore
After
Checklist 📋
For code changes:
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.