feat(frontend): upgrade RJSF to v6 and implement new FormRenderer system #11677
Conversation
github-project-automation
bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
WalkthroughThis PR reorganizes the InputRenderer component architecture, extracting and refactoring form rendering logic from Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ 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 |
|
Thank you for your contribution! Your PR appears to implement RJSF v6 theme features and upgrade the form rendering capabilities. However, there are a few issues that need to be addressed before this can be merged: Required Changes
Your changes look promising - implementing the RJSF v6 features with custom array handling and improved UI. Once the above items are addressed, this PR will be ready for another review. |
Abhi1992002
changed the title
|
Thank you for your work on upgrading RJSF and implementing the new FormRenderer2 system! Before we can merge this PR, there are several items that need to be addressed: PR Format Issues
Missing Test PlanPlease provide a specific test plan that explains how you've verified these changes work correctly. Since this is a significant frontend change to form rendering, your test plan should cover different form scenarios to ensure backward compatibility and proper functionality. Once you've addressed these items, we'll be happy to review your PR again. The code changes themselves look reasonable for the scope, but we need the proper documentation to proceed with the review process. |
|
Thanks for submitting this PR with the comprehensive library upgrade and new form rendering system! Here's some feedback to get this ready for merging: Title FormatThe PR title needs to follow conventional commit format. Please update it to include a type and scope, for example: Checklist CompletionYou've provided a good test plan with specific items, but they're not checked off yet. Please either:
The implementation looks solid - I can see you've created a comprehensive new form rendering system with support for anyOf schemas, array fields, and improved node handles. Once the above items are addressed, this should be ready for review and merging. |
|
Thank you for this comprehensive PR to upgrade RJSF and implement the new form rendering system. The changes look well-structured and the new form renderer implementation seems thorough. However, there are a couple of items that need to be addressed before this can be merged:
The changes themselves look solid and well-organized. I particularly like how you've:
Once the testing is completed and the title is updated, this PR should be ready for another review. |
|
Thank you for this comprehensive PR upgrading RJSF to v6 and implementing the new FormRenderer2 system. I appreciate the detailed breakdown of changes in your description. Before we can merge this PR, there are a couple of items that need to be addressed:
The changes themselves look well-structured - I like how you've organized the new form rendering system with clear separation of components and concerns. The migration from NodeHandle to separate InputNodeHandle and OutputNodeHandle components is a good architectural improvement. Once you've addressed the checklist and title format issues, we should be good to proceed with this PR. |
|
Thank you for your detailed PR with a clear description of the changes involved in upgrading RJSF to v6 and implementing the new FormRenderer2 system. Before this PR can be merged, there are two issues that need to be addressed:
The code changes themselves look well-structured and align with what you've described in the PR description. The organization of the new form renderer components with separation of concerns (array fields, error handling, etc.) is good. Once you've completed the test plan and updated the PR title, this should be ready for review again. |
|
Thank you for your detailed PR! You've put significant work into upgrading RJSF and implementing a new form rendering system. Here are some issues that need to be addressed before this can be merged:
Your changes look technically sound, with a clean implementation of the new form renderer system and proper dependency management. The code is well-organized with a modular approach to form components. Once you address these two issues, this PR should be ready for review again. |
|
Thank you for your PR to upgrade RJSF to v6 and implement the new FormRenderer2 system. Here's what needs to be addressed before this can be merged: Required Changes
Additional NotesThe implementation itself looks comprehensive and well-structured. I particularly like how you've:
Once you've addressed the checklist and title format, this PR should be ready for merging. |
|
Thank you for the detailed PR to upgrade RJSF to v6 and implement the new FormRenderer2 system. The implementation looks well-structured with modular components and clean separation of concerns. However, there are a couple of issues that need to be addressed before this can be merged:
Also, a few observations about the code:
Once you've addressed these items, the PR will be ready for another review. |
|
Thank you for your PR implementing the RJSF v6 upgrade and the new FormRenderer2 system. The changes look comprehensive and well-structured, but there are a couple of items that need to be addressed before we can merge this PR:
Additionally, I noticed a console.log statement in the InputNodeHandle component that should be removed before merging: console.log("handleId", handleId);Once these items are addressed, the PR should be ready for merging. The changes look well-implemented, and the migration to the new form renderer system seems thorough. |
|
Thanks for the detailed PR! The implementation of the new FormRenderer2 system looks solid and well-organized. A few things to address before merging:
The changes themselves look good, especially the modular approach to the form renderer system and the improved node handle implementation. The separation of InputNodeHandle and OutputNodeHandle is a nice improvement for better code organization. |
|
Thank you for the detailed PR description and comprehensive implementation of the RJSF v6 upgrade. Before this can be merged, a few issues need to be addressed:
Once these items are addressed, this PR should be ready for review and potential merge. The implementation looks comprehensive and well-structured. |
|
Thank you for the detailed PR! Your implementation of the new FormRenderer2 system looks well-structured. Here are some suggestions to get this PR ready for merging: Title FormatPlease update your PR title to follow the conventional commit format. It should include a type and scope, for example: ChecklistYour test plan is defined but not checked off. Please complete the testing according to the plan and mark the checkboxes as completed:
Technical Observations
Once you've updated the title format and completed the checklist, this PR should be ready for review. |
|
Thank you for this comprehensive PR that upgrades the RJSF library and implements the new FormRenderer2 system. The changes look well-structured and the implementation appears thorough. However, there are a couple of items that need to be addressed before merging:
The implementation itself looks good - I particularly like the modular approach with the new input-renderer-2 directory structure and the separation of input/output node handles for better component design. The enhanced form field templates and support for more complex schemas (like anyOf) will improve the user experience significantly. |
|
Thanks for this detailed PR to upgrade RJSF and implement the new form rendering system! The changes look well-structured with a clear separation of concerns in the new architecture. A few things to address before we can merge:
Overall, this looks like a substantial improvement to the form rendering system with better separation of field types and improved handle connection detection. Please complete the checklist items so we can proceed with merging. |
|
Thank you for this well-documented PR implementing the RJSF v6 upgrade and new FormRenderer2 system. Your description is thorough and explains the changes clearly. There are two issues that need to be addressed before this PR can be merged:
The implementation itself looks solid - you've systematically upgraded the dependencies, created a new modular form rendering system, and migrated the necessary components. The attention to detail in handling the edge cases (like anyOf schemas and array field handling) is particularly good. Once you've addressed these two issues, this PR should be ready for approval. |
|
Thanks for this substantial upgrade to the form rendering system! This looks like a well-organized implementation that will improve our form handling capabilities. I have a couple of items that need to be addressed before we can merge this PR:
The code changes themselves look well-structured. I appreciate how you've modularized the new form renderer system and carefully handled the migration from the old system. The separation of input and output node handles is also a nice improvement. Once you've addressed these two items, we can proceed with the merge. |
|
Thank you for this detailed PR! The implementation looks solid, but there are a couple of things to address before this can be merged:
Once these items are addressed, this PR should be ready for another review. The implementation itself looks well-structured and the documentation of changes is excellent. |
|
Thanks for this PR to upgrade RJSF and implement the new FormRenderer2 system. The changes look comprehensive and well-structured. Before we can merge this, there are a couple of items that need to be addressed:
The changes themselves look good - I can see you've done a thorough job with the upgrade and implementation. The new component structure seems more modular and the handle improvements should make connections more reliable. The work to support anyOf schemas with type selectors is particularly valuable. Once you address the checklist and title format, this should be ready for review. |
|
Thanks for this thorough PR that upgrades RJSF to v6 and implements the new FormRenderer2 system. The changes look well-structured and comprehensive. However, I have a few concerns before we can merge this: Required Changes
The changes themselves look well-implemented, with a good separation of concerns in the new form renderer system. I particularly like the modular approach with separate components for different field types. Once you've addressed these items, we should be good to proceed with the review process. |
|
Thank you for your comprehensive PR implementing the new FormRenderer2 system and upgrading RJSF to v6! The changes look well-structured with a thoughtful implementation of the new form rendering architecture. However, there are a couple of issues that need to be addressed before this PR can be merged:
The actual changes look solid and well-implemented. I particularly like how you've separated the form rendering logic into more modular components and improved the node handle system. Once you address the above issues, this PR should be ready for another review. |
|
Thank you for submitting this PR to upgrade RJSF to v6 and implement the new FormRenderer2 system. The changes look thorough and well-structured. Here are a few items that need addressing before this can be merged:
Overall, this is a substantial improvement that will enhance form handling in the platform. The separation of input and output node handles and the implementation of the new form renderer system with better support for complex schemas (anyOf, arrays) are valuable additions. I particularly like how you've created a more modular approach with the new FormRenderer2 system. |
|
Thank you for your detailed PR! This looks like a significant upgrade to the form rendering system. I have a couple of items that need to be addressed before this can be merged:
Once these two items are addressed, this PR should be ready for review. The changes themselves look well-structured with a clear migration path from the old FormRenderer to the new FormRenderer2 system. Great work on this substantial improvement to the form rendering system! |
Abhi1992002
requested review from
0ubbe
and removed request for
Swiftyos and
majdyz
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: 5
Note
Due to the large number of review comments, Critical severity comments were prioritized as inline comments.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/DateTimeInput/DateTimeWidget.tsx (1)
22-22: Remove unsafe type assertion.The
as anytype assertion bypasses TypeScript's type safety. TheDateTimeInputcomponent should accept the calculatedinputSizevalue, or you should use a proper type guard.🔎 Verify DateTimeInput's size prop type
#!/bin/bash # Description: Check the DateTimeInput component's size prop type definition ast-grep --pattern $'export $_ DateTimeInput = ($$$) => { $$$ }' rg -A 10 'type.*DateTimeInputProps|interface.*DateTimeInputProps' --type=ts --type=tsxautogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/DateInput/DateWidget.tsx (1)
4-34: Use function declaration instead of arrow function for component.The component uses an arrow function assignment (
export const DateWidget = (props: WidgetProps) => { ... }), which violates the guideline: "Use function declarations (not arrow functions) for components and handlers in frontend."As per coding guidelines, components should use function declarations.
🔎 Recommended fix: Convert to function declaration
-export const DateWidget = (props: WidgetProps) => { +export function DateWidget(props: WidgetProps) { const { value, onChange, disabled, readonly, placeholder, autofocus, id, formContext, } = props; const { size = "small" } = formContext || {}; // Determine input size based on context const inputSize = size === "large" ? "default" : "small"; return ( <DateInput size={inputSize as any} id={id} hideLabel={true} label={""} value={value} onChange={onChange} placeholder={placeholder} disabled={disabled} readonly={readonly} autoFocus={autofocus} /> ); -}; +}autogpt_platform/frontend/src/app/(platform)/auth/integrations/oauth_callback/route.ts (1)
12-12: Remove console.debug statements.These debug logging statements should be removed before merge, as multiple reviewers have flagged debug/logging statements throughout the PR for removal.
🔎 Suggested cleanup
- console.debug("OAuth callback received:", { code, state }); - const message: OAuthPopupResultMessage =- console.debug("Sending message to opener:", message); - // Return a response with the message as JSON and a script to close the windowAlso applies to: 23-23
🤖 Fix all issues with AI Agents
In @autogpt_platform/frontend/package.json:
- Around line 55-57: Update the @rjsf/validator-ajv8 dependency to v6 to match
@rjsf/core and @rjsf/utils: change the version string for "@rjsf/validator-ajv8"
in package.json from "5.24.13" to the compatible v6 release (e.g., "6.x.x"),
then run pnpm install to refresh the lockfile and ensure all rjsf packages are
aligned.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/AnyOfField.tsx:
- Line 9: The component AnyOfField is defined as an arrow function; change it to
a function declaration to follow project coding guidelines by replacing the
arrow export const AnyOfField = (props: FieldProps) => { ... } with an exported
function declaration export function AnyOfField(props: FieldProps) { ... } and
keep the same props type, return value and internal logic (no other behavior
changes).
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/components/AnyOfFieldTitle.tsx:
- Line 21: The component AnyOfFieldTitle is declared as a const arrow function;
update it to a named function declaration to follow coding guidelines. Replace
"export const AnyOfFieldTitle = (props: customFieldProps) => { ... }" with a
function declaration "export function AnyOfFieldTitle(props: customFieldProps) {
... }", keeping the same props type, body, and exported name so references to
AnyOfFieldTitle remain unchanged.
- Line 52: Rename the typo'd local variable shoudlShowType to shouldShowType in
the AnyOfFieldTitle component and update all its usages in that file (e.g.,
where shoudlShowType is read to conditionally render the type label); ensure the
new identifier is referenced consistently and adjust imports/exports if any.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/useAnyOfField.ts:
- Line 66: Remove the debug console.log in useAnyOfField (the statement logging
"handlePrefix", handlePrefix) — delete that line from the useAnyOfField.ts file
and ensure no other stray console.log debug statements remain in the same module
or related functions before merging.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/index.ts:
- Around line 1-7: Delete this barrel index.ts that re-exports
ArrayFieldTemplate, ArrayFieldItemTemplate, ArraySchemaField, ArrayItemProvider
and useIsArrayItem; remove the file and update all import sites that currently
import from the directory (e.g., import { ArrayFieldTemplate } from "./array")
to import directly from the implementation modules (e.g.,
"./ArrayFieldTemplate", "./ArrayFieldItemTemplate", "./ArraySchemaField", and
"./context/array-item-context") so each consumer imports the specific symbol
directly instead of via the barrel.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/ObjectFieldTemplate.tsx:
- Around line 72-73: Replace the constant conditional that always evaluates to
optionalDataControl in the JSX prop (currently written as true ?
optionalDataControl : undefined) with the intended runtime flag
showOptionalDataControlInTitle so the prop becomes conditional on that variable;
update the prop expression for optionalDataControl in ObjectFieldTemplate (the
component rendering that prop) to use showOptionalDataControlInTitle ?
optionalDataControl : undefined.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/OptionalDataControlsTemplate.tsx:
- Line 2: Replace the lucide-react icon import with the Phosphor Icons
equivalent: remove the import of PlusCircle from "lucide-react" and import the
matching Phosphor icon (e.g., PlusCircle or Plus from "@phosphor-icons/react")
wherever PlusCircle is used in OptionalDataControlsTemplate; update any prop
names if necessary to match Phosphor's API so the component uses the
project-standard @phosphor-icons/react icon component instead of lucide-react.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx:
- Around line 38-39: The call to isInputConnected(nodeId, handleId) can receive
undefined because uiOptions.handleId may be missing; update
WrapIfAdditionalTemplate.tsx to guard handleId before use (e.g., check if
handleId is truthy or pass a safe fallback like '' via handleId ?? '') so that
cleanUpHandleId() always receives a string; locate the variables nodeId and
handleId and the isInputConnected(...) invocation and apply the same
null-check/fallback pattern used in AnyOfFieldTitle.tsx and FieldTemplate.tsx.
- Around line 61-67: In handleBlur (the React.FocusEvent handler), replace the
loose equality check e.target.value == "" with a strict equality e.target.value
=== "" so the empty-string branch reliably triggers; leave calls to
onRemoveProperty() and onKeyRenameBlur(e) unchanged.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/buttons/IconButton.tsx:
- Line 8: The IconButton component currently imports ChevronDown, ChevronUp, and
Copy from lucide-react; update the imports to use Phosphor icons instead by
replacing ChevronDown with CaretDown, ChevronUp with CaretUp, and Copy with Copy
from @phosphor-icons/react, then update all usages inside IconButton (and any
exported constants inside that file) to render the Phosphor components
(CaretDown, CaretUp, Copy) with the same props/props spread as before so
behavior and styling remain unchanged.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/DescriptionField.tsx:
- Line 17: In the DescriptionField component update the div that currently has
className="0 inline w-fit" (the element with id={id}) to remove the stray "0"
and use a valid Tailwind class string such as "inline w-fit" (or "inline-block
w-fit" if block-like behavior is desired); locate the div in
DescriptionField.tsx and replace the className accordingly.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/errors/ErrorList.tsx:
- Line 2: Replace the lucide-react import and usage with the Phosphor Icons
equivalent: change the import of AlertCircle from "lucide-react" to import {
WarningCircle } from "@phosphor-icons/react", then replace any usage of the
AlertCircle component in ErrorList (e.g., JSX on line 15) with <WarningCircle />
preserving existing props (className, size, weight) or map lucide props to
Phosphor equivalents so styling remains consistent.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/errors/index.ts:
- Line 1: Delete the barrel re-export file index.ts that exports ErrorList and
replace all imports that reference the barrel with direct imports to the
ErrorList component; search for imports that reference the errors directory (or
import from .../errors) and change them to import ErrorList directly from
ErrorList (e.g., import ErrorList from ".../errors/ErrorList"), then remove the
now-unused index.ts file and run a quick TypeScript build to ensure no broken
imports remain.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/FieldTemplate.tsx:
- Around line 110-124: The description rendering uses rawDescription in the
condition but outputs description, causing mismatches; change the conditional to
check description instead of rawDescription and, for consistency with
ObjectFieldTemplate, replace the inline span with the DescriptionFieldTemplate
component (use DescriptionFieldTemplate with appropriate props) alongside
TitleFieldTemplate, ensuring the guard uses shouldDisplayLabel && description.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/index.ts:
- Around line 1-3: Delete the barrel file index.ts that re-exports
FieldTemplate, TitleField, and DescriptionField; remove the exports
"FieldTemplate", "TitleField", and "DescriptionField" from the frontend and
update all import sites that reference the directory barrel (imports that pull
from ".../standard") to import each component directly from its file (e.g.,
import FieldTemplate from ".../standard/FieldTemplate", import TitleField from
".../standard/TitleField", import DescriptionField from
".../standard/DescriptionField"); ensure no other code relies on the index.ts
re-export and remove the now-unused index.ts file.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/CheckboxInput/index.ts:
- Line 1: Remove the barrel re-export in the CheckboxInput index.ts that exports
CheckboxWidget and delete this index file; update all consumers to import
CheckboxWidget directly from the implementation module (CheckBoxWidget) instead
of from the directory barrel (i.e., replace imports that reference the
CheckboxInput folder with imports that reference CheckBoxWidget).
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/DateInput/index.ts:
- Line 1: The file index.ts is a forbidden barrel re-export that exposes
DateWidget; remove this re-export by deleting the index.ts that contains "export
{ DateWidget } from './DateWidget'"; then update all usage sites that import
DateWidget from the directory (e.g., import { DateWidget } from '.../DateInput')
to import directly from the implementation file (import { DateWidget } from
'.../DateInput/DateWidget'), ensuring no other index.ts re-exports remain for
this component.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/DateTimeInput/index.ts:
- Line 1: Remove the barrel re-export file that exports DateTimeWidget; delete
this index.ts and update all import sites to import the component directly from
"./DateTimeWidget" (replace any occurrences of importing from the directory path
that relied on the index.ts with direct imports of DateTimeWidget). Ensure no
other barrel-style index.ts files remain for this component and run the project
build/tests to confirm no broken imports referencing the removed file.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/FileInput/index.ts:
- Line 1: Delete the barrel re-export index.ts that only exports FileWidget and
update all consumers to import the FileWidget symbol directly from its
FileWidget source module (replace any imports that reference the directory
barrel with direct imports of the FileWidget module), ensuring no index.ts
re-exports remain for this widget.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/SelectInput/index.ts:
- Line 1: Delete the barrel file index.ts that re-exports SelectWidget (the
export line "export { SelectWidget } from \"./SelectWidget\";") and update all
consumers to import SelectWidget directly from the implementation module (change
imports from ".../SelectInput" to ".../SelectInput/SelectWidget"); ensure no
other re-exports remain in the SelectInput folder and run a project-wide
search/replace for imports referencing the SelectInput directory to fix any
broken imports.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/SelectInput/SelectWidget.tsx:
- Line 16: The SelectWidget component is defined as an arrow function; change it
to a function declaration to follow the guideline. Replace "export const
SelectWidget = (props: WidgetProps) => { ... }" with an exported function
declaration "export function SelectWidget(props: WidgetProps) { ... }",
preserving all props handling, return JSX, and any default exports/imports that
reference SelectWidget so behavior and type annotations remain unchanged. Ensure
the component name and WidgetProps type are unchanged and run type checks.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/TextInput/index.ts:
- Around line 1-2: Remove the barrel export: delete the index.ts that re-exports
TextWidget and InputExpanderModal, then update all import sites that currently
import from the TextInput folder root to import the components directly (use
TextWidget from the TextWidget module and InputExpanderModal from
TextInputExpanderModal). Search for any imports like `.../TextInput` and replace
them with explicit paths to the respective modules so no index re-exports are
used.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/TextInput/TextWidget.tsx:
- Around line 50-54: The htmlType for InputType.INTEGER in TextWidget.tsx is set
to the invalid value "account"; change that htmlType to "number" so the input
uses a numeric HTML input and aligns with the handleChange conversion
(InputType.INTEGER, htmlType property, and handleChange: (v: string) => (v ===
"" ? undefined : Number(v)) should all refer to a numeric input).
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/TimeInput/index.ts:
- Line 1: Remove the barrel re-export index.ts that exposes TimeWidget; delete
the file
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/TimeInput/index.ts
and update all consumers to import TimeWidget directly from ./TimeWidget (e.g.,
change any imports from ".../TimeInput" to ".../TimeInput/TimeWidget"), ensuring
no other index.ts re-exports remain in the frontend path.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/components/CredentialFieldTitle.tsx:
- Around line 37-42: The component reads hard-coded values non-reactively via
useNodeStore.getState().getHardCodedValues(nodeId), so updates won't trigger
re-renders; change that to use the hook with a selector (e.g., call
useNodeStore(state => state.getHardCodedValues(nodeId))) and use that reactive
value when calling getCredentialProviderFromSchema in CredentialFieldTitle
(retain schema as BlockIOCredentialsSubSchema and the
toDisplayName/getCredentialProviderFromSchema usage) so credentialProvider
updates when hardcoded values change.
- Around line 44-46: The component CredentialFieldTitle incorrectly uses the
imported global uiSchema instead of its passed-in prop; update the call to
updateUiOption to pass the uiOptions prop (uiOptions) rather than the global
uiSchema so the component respects the passed-in UI schema and matches other
renderers; locate the updateUiOption call in CredentialFieldTitle and replace
the uiSchema argument with uiOptions.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/GoogleDrivePickerField/GoogleDrivePickerField.tsx:
- Around line 5-21: The component GoogleDrivePickerField is declared as a const
arrow function but should be a function declaration per frontend guidelines;
replace the const export (export const GoogleDrivePickerField = (props:
FieldProps) => { ... }) with an exported function declaration (export function
GoogleDrivePickerField(props: FieldProps) { ... }), preserving the body logic
and the usage of schema, uiSchema, onChange, fieldPathId, formData, uiOptions,
config and the GoogleDrivePickerInput props (value, onChange calling
onChange(value, fieldPathId.path), className, showRemoveButton).
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/docs/HEIRARCHY.md:
- Line 1: The file name contains a typo: rename the markdown file from
HEIRARCHY.md to HIERARCHY.md and update any references to it (imports, README
links, documentation indexes, or components that import this doc) so they point
to the new filename; ensure version control preserves the rename (git mv) to
avoid duplicate files and update any CI/docs config that lists the old filename.
In @autogpt_platform/frontend/src/components/renderers/InputRenderer/index.ts:
- Around line 1-3: Delete this barrel index.ts that re-exports FormRenderer,
Form (from registry) and ExtendedFormContextType; remove any references to
"@/components/renderers/InputRenderer" in consumers and update their imports to
the concrete modules: import { FormRenderer } from
"@/components/renderers/InputRenderer/FormRenderer"; import Form from
"@/components/renderers/InputRenderer/registry"; import type {
ExtendedFormContextType } from "@/components/renderers/InputRenderer/types";
finally commit the deleted index.ts so no re-exports remain.
In
@autogpt_platform/frontend/src/components/renderers/InputRenderer/registry/index.ts:
- Around line 1-10: This file is a forbidden barrel re-export; remove this
index.ts and stop re-exporting default and generateForm (from "./Form"),
generateBaseFields / generateBaseTemplates / generateBaseWidgets (from
"../base/base-registry"), and generateCustomFields / findCustomFieldId (from
"../custom/custom-registry"); instead update all consumers to import those
symbols directly from their source modules ("./Form", "../base/base-registry",
"../custom/custom-registry") and delete this registry/index.ts to comply with
the frontend guideline forbidding barrel files.
🟠 Major comments (19)
autogpt_platform/frontend/package.json-55-57 (1)
55-57: Upgrade @rjsf/validator-ajv8 to v6 to match core and utils.The @rjsf/validator-ajv8 package remains at version 5.24.13 while @rjsf/core and @rjsf/utils have been upgraded to 6.1.2. This version mismatch between packages in the same library family can cause type incompatibilities, runtime errors, and unexpected behavior.
🔎 Proposed fix
"@rjsf/core": "6.1.2", "@rjsf/utils": "6.1.2", - "@rjsf/validator-ajv8": "5.24.13", + "@rjsf/validator-ajv8": "6.1.2",After applying this change, run
pnpm installto update the lockfile.autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/SelectInput/SelectWidget.tsx-16-16 (1)
16-16: Convert to function declaration to follow coding guidelines.This component uses an arrow function pattern, which violates the guideline: "Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas."
As per coding guidelines, frontend components should use function declarations.
🔎 Proposed refactor
-export const SelectWidget = (props: WidgetProps) => { +export function SelectWidget(props: WidgetProps) { const { options, value,autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/FileInput/index.ts-1-1 (1)
1-1: Remove barrel file - violates frontend coding guidelines.This index.ts re-export violates the explicit guideline: "No barrel files or index.ts re-exports in frontend". Components should be imported directly from their source files (e.g.,
from "./FileWidget") rather than through barrel exports.Based on learnings, frontend code should avoid index.ts re-export patterns.
🔎 Recommended fix
Delete this file and update imports throughout the codebase to reference FileWidget directly:
-export { FileWidget } from "./FileWidget";Update consumer imports:
// Instead of: import { FileWidget } from "@/components/renderers/InputRenderer/base/standard/widgets/FileInput"; // Use: import { FileWidget } from "@/components/renderers/InputRenderer/base/standard/widgets/FileInput/FileWidget";Committable suggestion skipped: line range outside the PR's diff.
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/buttons/IconButton.tsx-8-8 (1)
8-8: Use only Phosphor Icons as per coding guidelines.The code imports icons from both
lucide-react(ChevronDown, ChevronUp, Copy) and@phosphor-icons/react(TrashIcon). According to the coding guidelines: "Only use Phosphor Icons (@phosphor-icons/react) for icon components in frontend."As per coding guidelines, replace Lucide icons with their Phosphor equivalents:
ChevronDown→CaretDownfrom @phosphor-icons/reactChevronUp→CaretUpfrom @phosphor-icons/reactCopy→Copyfrom @phosphor-icons/react🔎 Proposed fix
import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString, } from "@rjsf/utils"; -import { ChevronDown, ChevronUp, Copy } from "lucide-react"; import type { VariantProps } from "class-variance-authority"; import { Button } from "@/components/atoms/Button/Button"; import { extendedButtonVariants } from "@/components/atoms/Button/helpers"; -import { TrashIcon } from "@phosphor-icons/react"; +import { TrashIcon, CaretDown, CaretUp, Copy } from "@phosphor-icons/react"; import { cn } from "@/lib/utils"; import { Text } from "@/components/atoms/Text/Text";Then update the icon usage in each component accordingly.
Also applies to: 13-13
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/DateTimeInput/index.ts-1-1 (1)
1-1: Remove barrel file – violates frontend coding guidelines.This
index.tsre-export violates the explicit guideline: "No barrel files or index.ts re-exports in frontend." Components should be imported directly from their source files (e.g.,from "./DateTimeWidget").As per coding guidelines, barrel files are prohibited in the frontend codebase.
🔎 Recommended fix: Remove this file and update imports
Delete this
index.tsfile and update all imports to reference the component directly:-import { DateTimeWidget } from "@/components/renderers/InputRenderer/base/standard/widgets/DateTimeInput" +import { DateTimeWidget } from "@/components/renderers/InputRenderer/base/standard/widgets/DateTimeInput/DateTimeWidget"Committable suggestion skipped: line range outside the PR's diff.
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/TimeInput/index.ts-1-1 (1)
1-1: Remove barrel file - violates frontend coding guidelines.This index.ts re-export violates the coding guideline: "No barrel files or index.ts re-exports in frontend" (applies to
autogpt_platform/frontend/src/**/*.{ts,tsx}). Components should import directly from./TimeWidget.tsxinstead.Based on coding guidelines.
🔎 Recommended fix
Delete this file and update all imports to reference
./TimeWidgetdirectly:-export { TimeWidget } from "./TimeWidget";Update consuming code to import directly:
// Instead of: import { TimeWidget } from ".../TimeInput"; // Use: import { TimeWidget } from ".../TimeInput/TimeWidget";autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/CheckboxInput/index.ts-1-1 (1)
1-1: Remove barrel file - violates frontend coding guidelines.This index.ts re-export violates the coding guideline: "No barrel files or index.ts re-exports in frontend" (applies to
autogpt_platform/frontend/src/**/*.{ts,tsx}). Components should import directly from./CheckBoxWidget.tsxinstead.Based on coding guidelines and learnings.
🔎 Recommended fix
Delete this file and update all imports to reference
./CheckBoxWidgetdirectly:-export { CheckboxWidget } from "./CheckBoxWidget";Update consuming code to import directly:
// Instead of: import { CheckboxWidget } from ".../CheckboxInput"; // Use: import { CheckboxWidget } from ".../CheckboxInput/CheckBoxWidget";Committable suggestion skipped: line range outside the PR's diff.
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/SelectInput/index.ts-1-1 (1)
1-1: Remove barrel file - violates frontend coding guidelines.This index.ts re-export violates the coding guideline: "No barrel files or index.ts re-exports in frontend" (applies to
autogpt_platform/frontend/src/**/*.{ts,tsx}). Components should import directly from./SelectWidget.tsxinstead.Based on coding guidelines and learnings.
🔎 Recommended fix
Delete this file and update all imports to reference
./SelectWidgetdirectly:-export { SelectWidget } from "./SelectWidget";Update consuming code to import directly:
// Instead of: import { SelectWidget } from ".../SelectInput"; // Use: import { SelectWidget } from ".../SelectInput/SelectWidget";autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/DateInput/index.ts-1-1 (1)
1-1: Remove barrel file - violates coding guidelines.This index.ts re-export violates the project's coding guideline: "No barrel files or index.ts re-exports in frontend." Import
DateWidgetdirectly from./DateWidgetat usage sites instead.As per coding guidelines, barrel files and index.ts re-exports are not allowed in the frontend codebase.
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/TextInput/index.ts-1-2 (1)
1-2: Remove barrel file; violates coding guidelines.This index.ts file re-exports components, which violates the project's coding guidelines. Import these components directly at their usage sites instead.
Based on learnings, no barrel files or index.ts re-exports should be used in the frontend codebase.
🔎 Recommended approach
Delete this file and update all imports to reference the components directly:
// Instead of: import TextWidget from ".../TextInput"; import { InputExpanderModal } from ".../TextInput"; // Use: import TextWidget from ".../TextInput/TextWidget"; import { InputExpanderModal } from ".../TextInput/TextInputExpanderModal";autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/index.ts-1-3 (1)
1-3: Remove barrel file; violates coding guidelines.This index.ts file re-exports components, which violates the project's coding guidelines. Import these components directly at their usage sites instead.
Based on learnings, no barrel files or index.ts re-exports should be used in the frontend codebase.
🔎 Recommended approach
Delete this file and update all imports to reference the components directly:
// Instead of: import { FieldTemplate, TitleField } from ".../standard"; // Use: import FieldTemplate from ".../standard/FieldTemplate"; import TitleField from ".../standard/TitleField";autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/GoogleDrivePickerField/GoogleDrivePickerField.tsx-5-21 (1)
5-21: Use function declaration instead of const expression.The component uses a const arrow function expression, but the coding guidelines require function declarations for components.
Based on coding guidelines, use function declarations (not arrow functions) for components and handlers in frontend.
🔎 Proposed refactor
-export const GoogleDrivePickerField = (props: FieldProps) => { +export function GoogleDrivePickerField(props: FieldProps) { const { schema, uiSchema, onChange, fieldPathId, formData } = props; const uiOptions = getUiOptions(uiSchema); const config: GoogleDrivePickerConfig = schema.google_drive_picker_config; return ( <div> <GoogleDrivePickerInput config={config} value={formData} onChange={(value) => onChange(value, fieldPathId.path)} className={uiOptions.className} showRemoveButton={true} /> </div> ); -}; +}autogpt_platform/frontend/src/components/renderers/InputRenderer/index.ts-1-3 (1)
1-3: Remove barrel file - violates frontend coding guidelines.This index.ts file is a barrel file that re-exports components, which directly violates the coding guidelines: "No barrel files or index.ts re-exports in frontend".
Instead of using this barrel file, consumers should import directly from the source files:
./FormRendererfor FormRenderer./registryfor Form./typesfor ExtendedFormContextTypeBarrel files can lead to circular dependencies, slower build times, and make the module graph harder to understand.
Based on coding guidelines: "No barrel files or index.ts re-exports in frontend"
Migration path for consumers
Update imports in consuming files from:
import { FormRenderer, Form, ExtendedFormContextType } from "@/components/renderers/InputRenderer";To:
import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer"; import Form from "@/components/renderers/InputRenderer/registry"; import type { ExtendedFormContextType } from "@/components/renderers/InputRenderer/types";Then delete this index.ts file.
autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/components/CredentialFieldTitle.tsx-37-42 (1)
37-42: Non-reactive store access will not trigger re-renders.Using
useNodeStore.getState()directly in the component body is not reactive. IfhardcodedValueschange, this component will not re-render. Use the hook with a selector instead.🔎 Suggested fix
+import { useShallow } from "zustand/react/shallow"; + export const CredentialFieldTitle = (props: { // ... }) => { const { registry, uiOptions, schema, fieldPathId } = props; const { nodeId } = registry.formContext; + const hardcodedValues = useNodeStore( + useShallow((state) => (nodeId ? state.getHardCodedValues(nodeId) : {})), + ); + // ... const credentialProvider = toDisplayName( getCredentialProviderFromSchema( - useNodeStore.getState().getHardCodedValues(nodeId), + hardcodedValues, schema as BlockIOCredentialsSubSchema, ) ?? "", );autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/components/CredentialFieldTitle.tsx-44-46 (1)
44-46: Use the passeduiOptionsprop instead of the globaluiSchemaimport.The
updateUiOptionfunction safely spreads objects and doesn't mutate the original. However,CredentialFieldTitlereceives auiOptionsprop but ignores it by using the global importeduiSchemainstead. This breaks the component's interface and differs from the pattern in other renderers (FieldTemplate, ArraySchemaField, AnyOfField, etc.), which all use their passeduiSchemaprop. Change line 44 to:const updatedUiSchema = updateUiOption(uiOptions, { showHandles: false, });autogpt_platform/frontend/src/components/renderers/InputRenderer/registry/index.ts-1-10 (1)
1-10: Remove barrel file - violates frontend coding guidelines.This index.ts file re-exports from multiple modules, creating a barrel file pattern. The frontend codebase explicitly prohibits this pattern.
Consumers should import directly from the source modules instead:
./Form../base/base-registry../custom/custom-registryBased on coding guidelines and learnings: "No barrel files or index.ts re-exports in frontend"
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/OptionalDataControlsTemplate.tsx-2-2 (1)
2-2: Use Phosphor Icons instead of lucide-react.The codebase standard requires Phosphor Icons (
@phosphor-icons/react) for all icon components in the frontend.🔎 Proposed fix
-import { PlusCircle } from "lucide-react"; +import { PlusCircle } from "@phosphor-icons/react";Based on coding guidelines: "Only use Phosphor Icons (@phosphor-icons/react) for icon components in frontend; never use other icon libraries"
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/AnyOfField.tsx-9-9 (1)
9-9: Use function declaration instead of arrow function for components.The component is defined using an arrow function, which violates the coding guidelines.
As per coding guidelines, use function declarations for components and handlers, reserving arrow functions only for small inline lambdas (map, filter, etc.).
🔎 Proposed fix
-export const AnyOfField = (props: FieldProps) => { +export default function AnyOfField(props: FieldProps) {autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/components/AnyOfFieldTitle.tsx-21-21 (1)
21-21: Use function declaration instead of arrow function for components.The component uses a const arrow function, but coding guidelines require function declarations for components.
🔎 Proposed fix
-export const AnyOfFieldTitle = (props: customFieldProps) => { +export function AnyOfFieldTitle(props: customFieldProps) {As per coding guidelines, use function declarations for components and handlers, reserving arrow functions only for small inline lambdas.
🟡 Minor comments (10)
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/errors/index.ts-1-1 (1)
1-1: Remove barrel export file—use direct imports instead.This index.ts re-export violates the project's coding guideline: "No barrel files or index.ts re-exports in frontend." Consumers should import ErrorList directly from
./ErrorList.tsxinstead of through this barrel file.Based on learnings, barrel files should not be used in the frontend codebase.
🔎 Recommended fix
Remove this file entirely and update all imports to reference
ErrorList.tsxdirectly:-export { default as ErrorList } from "./ErrorList";Then update consumers to import directly:
import ErrorList from "@/components/renderers/InputRenderer/base/standard/errors/ErrorList";Committable suggestion skipped: line range outside the PR's diff.
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/errors/ErrorList.tsx-2-2 (1)
2-2: Use Phosphor Icons instead of lucide-react.The project coding guidelines specify: "Only use Phosphor Icons (@phosphor-icons/react) for icon components in frontend." Replace
AlertCirclefrom lucide-react with the equivalent Phosphor icon.As per coding guidelines, all frontend icon components should use the Phosphor Icons library for consistency.
🔎 Proposed fix
-import { AlertCircle } from "lucide-react"; +import { WarningCircle } from "@phosphor-icons/react";Then update the icon usage on line 15:
- <AlertCircle className="h-4 w-4" /> + <WarningCircle className="h-4 w-4" />Committable suggestion skipped: line range outside the PR's diff.
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/DescriptionField.tsx-17-17 (1)
17-17: Fix suspicious className value.The className contains
"0 inline w-fit"where the leading0appears to be a typo or invalid value. This should be removed or replaced with a valid Tailwind CSS class.🔎 Proposed fix
- <div id={id} className="0 inline w-fit"> + <div id={id} className="inline w-fit">autogpt_platform/frontend/src/components/renderers/InputRenderer/docs/HEIRARCHY.md-1-1 (1)
1-1: Typo in filename: "HEIRARCHY" → "HIERARCHY".The filename contains a spelling error. Consider renaming:
HEIRARCHY.md → HIERARCHY.mdautogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/TitleField.tsx-31-33 (1)
31-33: Potential undefinedhandleIdpassed toInputNodeHandle.
uiOptions.handleIdmay beundefinedwhen this component renders, butInputNodeHandleexpectshandleId: string. This could cause runtime issues or type errors when the handle ID is not set in uiOptions.🔎 Suggested fix
- {showHandle !== false && ( - <InputNodeHandle handleId={uiOptions.handleId} nodeId={nodeId} /> + {showHandle !== false && uiOptions.handleId && ( + <InputNodeHandle handleId={uiOptions.handleId as string} nodeId={nodeId} /> )}autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/FieldTemplate.tsx-110-124 (1)
110-124: Fix inconsistent conditional check in description rendering.Line 122 checks
rawDescriptionbut renders{description}, which creates a logic error: ifrawDescriptionis truthy butdescriptionis empty, it renders an empty span. The condition should checkdescriptioninstead. Additionally, for consistency with ObjectFieldTemplate's approach, consider using the DescriptionFieldTemplate component instead of inline span rendering.{shouldDisplayLabel && description && <span>{description}</span>}autogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx-61-67 (1)
61-67: Use strict equality for empty string check.Using loose equality (
==) can lead to unexpected coercion. Prefer strict equality (===).🔎 Proposed fix
const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => { - if (e.target.value == "") { + if (e.target.value === "") { onRemoveProperty(); } else { onKeyRenameBlur(e); } };autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/useAnyOfField.ts-66-66 (1)
66-66: Remove debug console.log statement.This console.log should be removed before merge, as explicitly requested in the PR review comments.
🔎 Proposed fix
const handlePrefix = cleanUpHandleId(field_id); - console.log("handlePrefix", handlePrefix); useEdgeStoreautogpt_platform/frontend/src/components/renderers/InputRenderer/base/object/ObjectFieldTemplate.tsx-72-73 (1)
72-73: Fix constant condition - likely intended to useshowOptionalDataControlInTitle.The static analyzer correctly flags
true ? optionalDataControl : undefinedas a constant condition that always evaluates tooptionalDataControl. Based on line 43 and line 87, you likely meant to useshowOptionalDataControlInTitle:🔎 Proposed fix
- optionalDataControl={true ? optionalDataControl : undefined} + optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/components/AnyOfFieldTitle.tsx-52-52 (1)
52-52: Fix typo in variable name.The variable name
shoudlShowTypecontains a typo and should beshouldShowType.🔎 Proposed fix
- const shoudlShowType = isHandleConnected || (isOptional && type); + const shouldShowType = isHandleConnected || (isOptional && type);And update the usage on line 64:
- {shoudlShowType && ( + {shouldShowType && (Committable suggestion skipped: line range outside the PR's diff.
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/index.ts
Show resolved
Hide resolved
...orm/frontend/src/components/renderers/InputRenderer/base/object/WrapIfAdditionalTemplate.tsx
Show resolved
Hide resolved
...latform/frontend/src/components/renderers/InputRenderer/base/standard/buttons/IconButton.tsx
Show resolved
Hide resolved
autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/buttons/index.ts
Show resolved
Hide resolved
...ontend/src/components/renderers/InputRenderer/base/standard/widgets/TextInput/TextWidget.tsx
Show resolved
Hide resolved
github-project-automation
bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
github-project-automation
bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
3 participants
Fixes #11686
Changes 🏗️
This PR upgrades the React JSON Schema Form (RJSF) library from v5 to v6 and introduces a complete rewrite of the form rendering system with improved architecture and new features.
Core Library Updates
@rjsf/corefrom 5.24.13 to 6.1.2@rjsf/utilsfrom 5.24.13 to 6.1.2@radix-ui/react-slider1.3.6 for new slider componentsNew Form Renderer Architecture
AnyOfFieldcomponent with type selector for union typesArrayFieldTemplate,ArrayFieldItemTemplate, andArraySchemaFieldwith context providerObjectFieldTemplatewith better support for additional properties viaWrapIfAdditionalTemplateTitleField,DescriptionField, andFieldTemplatewith improved stylingNode Handle System Refactor
NodeHandleintoInputNodeHandleandOutputNodeHandlefor better separation of concernshelpers.tswith newgenerateHandleIdFromTitleIdfunctionEdge Store Improvements
removeEdgesByHandlePrefixmethod for bulk edge removalisInputConnectedwith handle ID cleanupupdateEdgeBeadsto only update when changes occurapplyEdgeChangesNode Store Enhancements
syncHardcodedValuesWithHandleIdsmethod to maintain consistency between form data and handle connectionsparseHandleIdToPathandensurePathExistsDraft Recovery Improvements
calculateDraftDiffto show what changedformatDiffSummaryto display changes in a readable format (e.g., "+2/-1 blocks, +3 connections")UI/UX Enhancements
Output Handler Updates
Migration & Cleanup
RunInputDialogto use new FormRendererFormCreatorto use new FormRendererinput-renderertoInputRenderertype="button"to buttons to prevent form submissionChecklist 📋
For code changes:
Summary by CodeRabbit
New Features
Bug Fixes
Dependencies
✏️ Tip: You can customize this high-level summary in your review settings.