fix: Improve UI for Auth0 role editor view #554
Conversation
|
WalkthroughThis update migrates the Changes
Sequence Diagram(s)sequenceDiagram
participant Page as Page Component
participant UI as @halfdomelabs/ui-components
participant Form as react-hook-form Instance
Page->>UI: Render FormActionBar (pass form, disabled, onReset, children)
UI->>Form: Check formState (isDirty, isSubmitting)
UI->>UI: Determine disabled state and button visibility
Note right of UI: If no custom children, render default Reset and Save buttons
UI->>Form: On Reset button click, call form.reset()
UI->>Page: On Save (submit), propagate form submit event
sequenceDiagram
participant User as User
participant AuthEditor as AuthDefinitionEditor
participant RoleEditor as RoleEditorForm
participant RoleDialog as RoleDialog
User->>AuthEditor: Open Authentication Editor Page
AuthEditor->>RoleEditor: Render Role List
User->>RoleEditor: Click "Add Role" or "Edit"
RoleEditor->>RoleDialog: Open modal with role data
User->>RoleDialog: Fill form and submit
RoleDialog->>RoleEditor: onSave callback with role data
RoleEditor->>AuthEditor: Update form state
User->>AuthEditor: Submit main form (via FormActionBar)
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
🪧 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
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (4)
plugins/baseplate-plugin-auth/src/auth0/core/components/role-dialog.tsx (1)
74-87: Consider improving form field accessibility.While the current implementation is functional, consider adding
requiredattributes and more descriptive placeholders for better user experience.<InputFieldController label="Role Name" name="name" control={control} - placeholder="Enter role name" + placeholder="Enter role name (e.g., admin, user)" + required /> <InputFieldController label="Description" name="comment" control={control} - placeholder="Describe this role's purpose" + placeholder="Describe this role's purpose and permissions" + required />plugins/baseplate-plugin-auth/src/auth0/core/components/role-editor-form.tsx (1)
45-52: Prevent duplicate role names / ids when saving
handleSaveRolesilently appends a duplicate ifiddiffers butnameis equal, which can break downstream look-ups keyed by role name. Consider blocking duplicates or surfacing a validation error:function handleSaveRole(newRole: AuthRoleInput): void { - const existingIndex = roles.findIndex((role) => role.id === newRole.id); + const existingIndex = roles.findIndex((role) => role.id === newRole.id); + const nameClash = roles.some( + (role, idx) => idx !== existingIndex && role.name === newRole.name, + ); + + if (nameClash) { + // TODO: surface real form error instead of alert + toast.error(`Role "${newRole.name}" already exists`); + return; + } … }plugins/baseplate-plugin-auth/src/auth/core/components/auth-definition-editor.tsx (2)
38-39: Importing global CSS inside a leaf component may cause style duplication
import '#src/styles.css';within the component forces the stylesheet every time this module is bundled/SSR-rendered, which increases bundle size and can introduce ordering issues.
Prefer importing global styles once in the app entry (index.tsx/_app.tsx).
140-171: Minor: reduce repetition with a helper arrayThe four almost-identical
ModelComboboxFieldControllerblocks differ only by props. A small helper array would reduce 30+ lines and ease future maintenance.const modelFields = [ { label: 'User Model', name: 'modelRefs.user', desc: 'The main user model for authentication' }, { label: 'User Account Model', name: 'modelRefs.userAccount', desc: 'Model for user account credentials' }, { label: 'User Role Model', name: 'modelRefs.userRole', desc: 'Model for assigning roles to users' }, { label: 'User Session Model', name: 'modelRefs.userSession', desc: 'Model for managing user sessions' }, ]; … <div className="auth:grid …"> {modelFields.map((f) => ( <ModelComboboxFieldController key={f.name} label={f.label} name={f.name} control={control} canCreate description={f.desc} /> ))} </div>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Lite
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (24)
CLAUDE.md(2 hunks)packages/project-builder-web/src/components/FormActionBar/FormActionBar.tsx(0 hunks)packages/project-builder-web/src/components/index.ts(0 hunks)packages/project-builder-web/src/pages/data/enums/edit/edit.page.tsx(1 hunks)packages/project-builder-web/src/pages/data/models/edit/[id]/graphql.page.tsx(1 hunks)packages/project-builder-web/src/pages/data/models/edit/[id]/index.page.tsx(1 hunks)packages/project-builder-web/src/pages/data/models/edit/[id]/service.page.tsx(1 hunks)packages/project-builder-web/src/pages/plugins/PluginsLayout.tsx(2 hunks)packages/project-builder-web/src/pages/plugins/home.page.tsx(1 hunks)packages/project-builder-web/src/pages/plugins/plugin-config.page.tsx(1 hunks)packages/project-builder-web/src/pages/settings/project-settings.tsx(1 hunks)packages/project-builder-web/src/pages/settings/template-extractor.tsx(1 hunks)packages/project-builder-web/src/pages/settings/theme-builder.tsx(1 hunks)packages/ui-components/src/components/FormActionBar/FormActionBar.stories.tsx(1 hunks)packages/ui-components/src/components/FormActionBar/FormActionBar.tsx(1 hunks)packages/ui-components/src/components/index.ts(1 hunks)plugins/CLAUDE.md(1 hunks)plugins/baseplate-plugin-auth/package.json(1 hunks)plugins/baseplate-plugin-auth/src/auth/core/components/auth-definition-editor.tsx(3 hunks)plugins/baseplate-plugin-auth/src/auth0/core/components/auth-definition-editor.tsx(4 hunks)plugins/baseplate-plugin-auth/src/auth0/core/components/role-dialog.tsx(1 hunks)plugins/baseplate-plugin-auth/src/auth0/core/components/role-editor-form.tsx(1 hunks)plugins/baseplate-plugin-auth/src/roles/schema.ts(2 hunks)pnpm-workspace.yaml(1 hunks)
💤 Files with no reviewable changes (2)
- packages/project-builder-web/src/components/index.ts
- packages/project-builder-web/src/components/FormActionBar/FormActionBar.tsx
🧰 Additional context used
🧬 Code Graph Analysis (5)
plugins/baseplate-plugin-auth/src/roles/schema.ts (1)
packages/project-builder-lib/src/references/ref-builder.ts (1)
zEnt(732-755)
plugins/baseplate-plugin-auth/src/auth0/core/components/auth-definition-editor.tsx (5)
packages/project-builder-lib/src/web/hooks/useResettableForm.ts (1)
useResettableForm(10-47)plugins/baseplate-plugin-auth/src/auth0/core/schema/plugin-definition.ts (1)
auth0PluginDefinitionSchema(10-22)packages/project-builder-lib/src/web/components/ModelMergerResultAlert.tsx (1)
ModelMergerResultAlert(14-93)packages/project-builder-lib/src/web/components/ModelComboboxField.tsx (1)
ModelComboboxFieldController(111-111)packages/ui-components/src/components/FormActionBar/FormActionBar.tsx (1)
FormActionBar(95-95)
packages/ui-components/src/components/FormActionBar/FormActionBar.stories.tsx (3)
packages/ui-components/src/components/FormActionBar/FormActionBar.tsx (1)
FormActionBar(95-95)packages/ui-components/src/components/Button/Button.tsx (1)
Button(51-51)packages/ui-components/src/components/Label/Label.tsx (1)
Label(30-30)
plugins/baseplate-plugin-auth/src/auth/core/components/auth-definition-editor.tsx (6)
packages/project-builder-lib/src/web/hooks/useResettableForm.ts (1)
useResettableForm(10-47)plugins/baseplate-plugin-auth/src/auth/core/schema/plugin-definition.ts (1)
authPluginDefinitionSchema(10-34)packages/ui-components/src/components/Card/Card.tsx (5)
Card(111-111)CardHeader(116-116)CardTitle(117-117)CardDescription(114-114)CardContent(113-113)packages/project-builder-lib/src/web/components/ModelMergerResultAlert.tsx (1)
ModelMergerResultAlert(14-93)packages/project-builder-lib/src/web/components/ModelComboboxField.tsx (1)
ModelComboboxFieldController(111-111)packages/ui-components/src/components/FormActionBar/FormActionBar.tsx (1)
FormActionBar(95-95)
plugins/baseplate-plugin-auth/src/auth0/core/components/role-dialog.tsx (3)
plugins/baseplate-plugin-auth/src/roles/schema.ts (2)
AuthRoleInput(20-20)authRoleSchema(6-13)packages/ui-components/src/components/Dialog/Dialog.tsx (7)
Dialog(147-147)DialogTrigger(156-156)DialogContent(149-149)DialogHeader(152-152)DialogTitle(155-155)DialogDescription(150-150)DialogFooter(151-151)packages/ui-components/src/components/Button/Button.tsx (1)
Button(51-51)
🔇 Additional comments (35)
packages/project-builder-web/src/pages/plugins/home.page.tsx (1)
68-68: LGTM! Good UI consistency improvement.Adding padding to the main container improves the visual spacing and aligns with the broader UI consistency improvements across the plugin pages.
packages/project-builder-web/src/pages/plugins/PluginsLayout.tsx (2)
19-19: Good addition of error boundary import.Adding the ErrorBoundary import prepares for better error handling in the plugin layout.
61-65: Excellent improvements to layout robustness.These changes provide two key improvements:
- Fixed height calculation: Using
h-[calc(100vh-var(--topbar-height)-1px)]ensures consistent content area sizing- Error boundary protection: Wrapping the
OutletinErrorBoundaryprevents plugin errors from crashing the entire layoutBoth changes enhance the user experience and system robustness.
packages/project-builder-web/src/pages/plugins/plugin-config.page.tsx (1)
103-140: Excellent layout restructuring for improved scrolling behavior.The new layout structure provides significant UX improvements:
- Proper overflow handling: The outer container with
overflow-hiddenand inner container withoverflow-y-autocreates a proper scrolling area- Flexible height: Using
h-full flex-1ensures the content area takes available space- Consistent padding: Moving padding to the scrollable container (
p-4) maintains consistent spacing- Content organization: Moving the
Containercomponent inside the scrollable area ensures plugin content can scroll properlyThis restructuring addresses common layout issues with long plugin configuration forms while maintaining all existing functionality.
plugins/baseplate-plugin-auth/src/roles/schema.ts (2)
6-13: LGTM! Good schema export pattern.Exporting the
authRoleSchemaenables proper reuse across components while maintaining type safety.
20-20: LGTM! Proper input type extraction.The
AuthRoleInputtype correctly usesz.input<>to extract the input type from the schema, which is the recommended pattern for form inputs with Zod schemas.packages/project-builder-web/src/pages/data/models/edit/[id]/graphql.page.tsx (1)
5-5: LGTM! Clean import consolidation.The consolidation of imports from
@halfdomelabs/ui-componentsis a good refactoring that aligns with the component centralization strategy.pnpm-workspace.yaml (1)
24-29: LGTM! Appropriate native dependencies ignored.The addition of these packages to
ignoredBuiltDependenciesis correct practice:
@prisma/engines: Prisma's native database enginescpu-features: Native CPU feature detection libraryesbuild: Native JavaScript bundlerprotobufjs: Protocol buffer implementationssh2: SSH2 client with native componentsThese packages commonly cause build issues in workspace environments and should be ignored.
packages/ui-components/src/components/index.ts (1)
20-20: LGTM! Clean export addition for FormActionBar component.The export is properly placed in alphabetical order and follows the consistent pattern used by other component exports in the package.
packages/project-builder-web/src/pages/data/models/edit/[id]/service.page.tsx (1)
9-9: LGTM! Clean import migration to shared package.The FormActionBar import has been successfully moved from local components to the shared
@halfdomelabs/ui-componentspackage, maintaining consistency with other UI component imports.packages/project-builder-web/src/pages/settings/template-extractor.tsx (1)
14-14: LGTM! Consistent import migration pattern.The FormActionBar import change aligns with the systematic refactor to consolidate UI components in the shared package, with no impact on functionality.
packages/project-builder-web/src/pages/settings/theme-builder.tsx (1)
19-19: LGTM! Import successfully migrated to shared package.The FormActionBar import change follows the established migration pattern, maintaining functionality while consolidating to the shared UI components package.
packages/project-builder-web/src/pages/settings/project-settings.tsx (1)
10-10: LGTM! Migration completed successfully.The final FormActionBar import change completes the systematic migration to the shared package, maintaining consistency across all affected files.
packages/project-builder-web/src/pages/data/enums/edit/edit.page.tsx (2)
5-5: LGTM! Clean import migration to shared component library.The migration from local
FormActionBarto the shared@halfdomelabs/ui-componentspackage follows the established pattern described in the documentation updates.
7-7: Good cleanup of local component import.Removing
FormActionBarfrom the local components import is consistent with the migration to the external package.packages/project-builder-web/src/pages/data/models/edit/[id]/index.page.tsx (2)
10-10: Consistent migration to shared component library.The import change follows the same pattern as other files in this refactor, consolidating UI components from the shared package.
12-12: Proper cleanup of local component import.Correctly removes
FormActionBarfrom local imports while maintaining other necessary components likeErrorBoundary.plugins/CLAUDE.md (1)
1-46: Excellent documentation for plugin style isolation.This CSS naming convention documentation establishes a crucial architectural pattern that prevents style conflicts between plugins and the main application. The examples are comprehensive and the prefixing pattern (e.g.,
auth:,storage:) provides clear guidance for plugin developers.Key strengths:
- Clear examples with ✅/❌ patterns
- Covers utility function usage (
cn())- Addresses both simple and complex scenarios
- Establishes consistent isolation strategy
CLAUDE.md (3)
31-31: Good addition of nullish coalescing operator guidance.The preference for
??over||is a TypeScript best practice that prevents issues with falsy values like0,"", andfalse.
33-46: Comprehensive UI development guidelines that align with the refactoring.These guidelines establish important architectural standards:
- Component Library: Mandating
@halfdomelabs/ui-componentsaligns perfectly with theFormActionBarmigration in this PR- Styling: Tailwind-only approach with plugin prefixing matches the CSS conventions in
plugins/CLAUDE.md- Icons: Standardizing on
react-icons/mdprovides consistency across the codebaseThis documentation supports the broader component consolidation effort.
200-200: Reasonable adjustment to help threshold.Changing from "more than one cycle" to "more than two cycles" allows for reasonable iteration while still preventing excessive back-and-forth that could lead to degraded solutions.
plugins/baseplate-plugin-auth/src/auth0/core/components/auth-definition-editor.tsx (3)
20-28: LGTM! Clean migration to shared UI components.The import consolidation to use
@halfdomelabs/ui-componentsimproves consistency and reduces duplication across the codebase.
70-74: Good variable naming improvement.Renaming
formPropstoformaligns better with theFormActionBarAPI expectations and improves code readability.
125-170: Excellent UI structure improvements.The refactoring to use
SectionListcomponents provides better visual hierarchy and the grid layout for form fields improves usability. TheFormActionBarintegration maintains consistent form interactions across the application.plugins/baseplate-plugin-auth/src/auth0/core/components/role-dialog.tsx (2)
22-29: Well-designed component interface.The props interface provides good flexibility for both controlled and uncontrolled usage patterns, with clear separation of concerns.
61-64: Good event handling practice.Using
stopPropagation()prevents potential side effects from form submission bubbling up to parent components.packages/ui-components/src/components/FormActionBar/FormActionBar.tsx (3)
10-28: Excellent component interface design.The props interface provides great flexibility with proper TypeScript support and clear documentation. The
anytype forUseFormReturnis justified here since the component needs to work with any form structure.
48-58: Robust form state handling.The logic properly handles both form-controlled and manual disabled states, with sensible defaults and proper integration with react-hook-form's state management.
63-66: Good use of CSS custom properties.Using
--action-bar-heightCSS custom property allows for consistent spacing coordination with parent components, as seen in the auth editor's bottom margin.packages/ui-components/src/components/FormActionBar/FormActionBar.stories.tsx (4)
11-27: Excellent Storybook configuration.The metadata setup provides proper documentation support and the decorator ensures consistent presentation across all stories.
32-82: Comprehensive state coverage.The stories effectively demonstrate all key form states (default, clean, submitting, disabled) with appropriate mock form objects that accurately simulate react-hook-form behavior.
111-171: Outstanding interactive example.The interactive form story provides a realistic demonstration of the component's behavior with actual state management, async operations, and proper form handling patterns.
173-212: Valuable documentation story.The code example story effectively demonstrates real-world usage patterns and integration with react-hook-form, serving as both documentation and validation.
plugins/baseplate-plugin-auth/src/auth0/core/components/role-editor-form.tsx (1)
65-145: Overall implementation looks solidGood use of
useFieldArray, confirm dialog, and modal editing. The UX for built-in roles is clearly expressed and immutable, and IDs are generated centrally viaauthRoleEntityType.generateNewId().
👍 Nice refactor!plugins/baseplate-plugin-auth/src/auth/core/components/auth-definition-editor.tsx (1)
128-189: Great adoption of shared UI components and form hooksThe migration to
Card,FormActionBar, and grid layout significantly improves clarity and consistency.
The form wiring (useResettableForm,useBlockUnsavedChangesNavigate) is correct and side-effect free.
No further action required.
| "react": "catalog:", | ||
| "react-dom": "catalog:", | ||
| "react-hook-form": "7.56.3", | ||
| "react-icons": "5.5.0", |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify the react-icons package version for validity and security.
The addition of react-icons dependency supports the new UI components, but please ensure this version is current and secure.
🌐 Web query:
What is the latest version of react-icons package and are there any known security vulnerabilities in version 5.5.0?
💡 Result:
Latest Version of react-icons
The latest version of the react-icons package as of May 2025 is 5.5.0, published on February 19, 2025[2][10]. There are no more recent releases noted in official sources or on npm.
Known Security Vulnerabilities in Version 5.5.0
- According to Snyk, there are no direct security vulnerabilities reported for react-icons version 5.5.0[10].
- Additional scans from ReversingLabs for previous 5.x versions also indicate no known vulnerabilities or malware[9].
- No issues related to security are highlighted in GitHub releases or recent reviews[3][10].
Notable Bug in Version 5.5.0
While version 5.5.0 is free from reported security vulnerabilities, users have reported a significant functional bug: icons cannot be rendered as JSX components in this release, breaking typical usage in many React projects[6]. The error typically states:
'IoMdLock' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. Type 'undefined' is not assignable to type 'Element | null'. ts(2786)[6]
- The suggested workaround is to downgrade to version 5.4.0, which does not exhibit this problem[6].
Summary Table
| Version | Release Date | Security Vulnerabilities | Critical Bugs | Recommendation |
|---|---|---|---|---|
| 5.5.0 | Feb 19, 2025 | None reported[10] | Breaking JSX bug[6] | Use 5.4.0 or earlier if JSX is required |
Conclusion
- Latest version: 5.5.0[2][10]
- Security: No known vulnerabilities in version 5.5.0[10]
- Functional bug: Yes; icons may not work as JSX components in 5.5.0[6]
- Recommendation: Use 5.4.0 for stable JSX icon usage[6]
Citations:
- 1: https://lineicons.com/blog/react-icon-libraries
- 2: https://www.npmjs.com/package/react-icons
- 3: https://github.com/react-icons/react-icons/releases
- 4: https://hugeicons.com/blog/development/top-10-reactjs-icons
- 5: https://dev.to/vinishbhaskar/best-icon-libraries-28ce
- 6: [Bug]: Icons are not JSX components in react-icons v5.5.0 react-icons/react-icons#1029
- 7: https://security.snyk.io/package/npm/react/0.5.0
- 8: https://react-icons.github.io/react-icons/
- 9: https://secure.software/npm/packages/react-icons/5.1.0
- 10: https://security.snyk.io/package/npm/react-icons
Confirm react-icons version & address known JSX rendering bug
- Verified: [email protected] is the latest release (Feb 19 2025) with no reported security vulnerabilities.
- Caveat: Version 5.5.0 introduces a breaking JSX bug (see [Bug]: Icons are not JSX components in react-icons v5.5.0 react-icons/react-icons#1029) where icons may not render as valid React elements.
- Recommendation:
• Pin to a stable version (e.g."react-icons": "5.4.0") until the bug is resolved upstream
• Or thoroughly test each imported icon to ensure it renders without the TS2786 error and handle any undefined returns.
Please update plugins/baseplate-plugin-auth/package.json (line 44) accordingly to prevent runtime issues.
🤖 Prompt for AI Agents
In plugins/baseplate-plugin-auth/package.json at line 44, the react-icons
dependency is set to version 5.5.0, which has a known breaking bug causing JSX
rendering errors. To fix this, change the version to 5.4.0 to ensure stable icon
rendering and avoid runtime issues until the bug in 5.5.0 is resolved upstream.
| asChild, | ||
| children, | ||
| }: RoleDialogProps): React.JSX.Element { | ||
| const isEditing = role?.id !== ''; |
There was a problem hiding this comment.
Fix the edit mode detection logic.
The current logic role?.id !== '' will incorrectly identify roles with any non-empty ID as being in edit mode. This should check if the role exists and has a valid ID.
- const isEditing = role?.id !== '';
+ const isEditing = Boolean(role?.id);📝 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.
| const isEditing = role?.id !== ''; | |
| const isEditing = Boolean(role?.id); |
🤖 Prompt for AI Agents
In plugins/baseplate-plugin-auth/src/auth0/core/components/role-dialog.tsx at
line 39, the edit mode detection logic incorrectly treats any non-empty role ID
as editing. Update the condition to check that the role exists and that its ID
is a valid non-empty string, ensuring accurate detection of edit mode.
plugins/baseplate-plugin-auth/src/auth0/core/components/role-editor-form.tsx
Show resolved
Hide resolved
| {role.comment.trim() || ( | ||
| <span className="auth:text-muted-foreground"> | ||
| No description | ||
| </span> | ||
| )} | ||
| </RecordViewItem> |
There was a problem hiding this comment.
Guard against undefined comments before trimming
role.comment.trim() will throw a TypeError if comment is ever undefined (e.g. older configs, partial migrations, or future schema relaxations).
Defensive-code the access so the UI never crashes on a bad record.
-{role.comment.trim() || (
+{(role.comment ?? '').trim() || (📝 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.
| {role.comment.trim() || ( | |
| <span className="auth:text-muted-foreground"> | |
| No description | |
| </span> | |
| )} | |
| </RecordViewItem> | |
| {(role.comment ?? '').trim() || ( | |
| <span className="auth:text-muted-foreground"> | |
| No description | |
| </span> | |
| )} | |
| </RecordViewItem> |
🤖 Prompt for AI Agents
In plugins/baseplate-plugin-auth/src/auth0/core/components/role-editor-form.tsx
around lines 84 to 89, the code calls role.comment.trim() without checking if
role.comment is defined, which can cause a TypeError if comment is undefined.
Update the code to first verify that role.comment is a non-empty string before
calling trim(), for example by using a conditional check or optional chaining,
to prevent the UI from crashing on bad or incomplete data.
…age-for-auth0-plugin
kingston
deleted the
kingston/eng-706-revamp-auth-configuration-page-for-auth0-plugin
branch
Summary by CodeRabbit
New Features
Refactor
Bug Fixes
Chores
Documentation