Fix: Add missing BaseUserDropdown props documentation for all affected versions (Product IS issue #26251) #5834
Conversation
…d versions (product-is#26251)
|
wso2-engineering-bot seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account. You have signed the CLA already but the status is still pending? Let us recheck it. |
WalkthroughDocumentation updates for UserDropdown components in Next.js and React SDKs, adding detailed BaseUserDropdown props table and MenuItem interface specifications to clarify component behavior and accepted properties. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~5 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
en/includes/sdks/nextjs/components/user-selfcare-components/user-dropdown.md (1)
53-61: Verify ifrenderDropdownprop should be added to Next.js UserDropdown documentation.The Next.js UserDropdown documentation is missing the
renderDropdownprop, which is documented in the React version (line 61). Clarify whether this prop is intentionally unsupported in the Next.js implementation or should be documented.Note:
onSignOutis already documented in the BaseUserDropdown table (line 75), which UserDropdown inherits from.
🤖 Fix all issues with AI agents
In
`@en/includes/sdks/nextjs/components/user-selfcare-components/user-dropdown.md`:
- Around line 62-80: The BaseUserDropdown props table duplicates several props
already documented for UserDropdown (notably menuItems, showTriggerLabel,
avatarSize, fallback) causing conflicting descriptions; consolidate the
documentation by merging the two tables into a single authoritative props table
for BaseUserDropdown (used by UserDropdown) or explicitly remove duplicated rows
from the BaseUserDropdown table and add a cross-reference note in the
UserDropdown section indicating that user/onManageProfile are auto-handled;
ensure the final table lists each prop once with consistent descriptions and
keep unique notes for props overridden/managed by UserDropdown (e.g., user,
onManageProfile).
In `@en/includes/sdks/react/components/user-selfcare-components/user-dropdown.md`:
- Around line 64-82: The docs duplicate several props between the UserDropdown
and BaseUserDropdown tables (e.g., menuItems, showTriggerLabel, avatarSize,
fallback, onSignOut); consolidate to avoid drift by making the first table only
list UserDropdown-specific props (children, renderTrigger, renderDropdown) and
add a one-line note like "Inherited props (user, avatarSize, menuItems,
showTriggerLabel, fallback, onSignOut, etc.) are documented in BaseUserDropdown
below" linking to the BaseUserDropdown section, or alternatively merge both
tables into a single comprehensive table with an extra column "Managed by
UserDropdown" to indicate which props are automatically handled by UserDropdown
(update entries for BaseUserDropdown and UserDropdown accordingly).
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
en/includes/sdks/nextjs/components/user-selfcare-components/user-dropdown.mden/includes/sdks/react/components/user-selfcare-components/user-dropdown.md
🔇 Additional comments (2)
en/includes/sdks/react/components/user-selfcare-components/user-dropdown.md (1)
83-93: Good addition of MenuItem interface documentation.This section clearly documents the MenuItem interface referenced by the
menuItemsprop, providing developers with the type information needed to construct custom menu items correctly. The structure is clear and complete.en/includes/sdks/nextjs/components/user-selfcare-components/user-dropdown.md (1)
81-90: Good addition of MenuItem interface documentation.This section provides clear type documentation for the MenuItem interface, consistent with the React SDK documentation. It will help developers construct custom menu items correctly.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| ### BaseUserDropdown props | ||
|
|
||
| The `UserDropdown` component internally uses the `BaseUserDropdown` component and accepts all its props except `user` and `onManageProfile`, which are handled automatically. The following table lists all available props from `BaseUserDropdown`: | ||
|
|
||
| | Prop | Type | Required | Description | | ||
| |-----------------------|---------------------------|----------|-------------| | ||
| | `attributeMapping` | `object` | ❌ | Mapping of component attribute names to identity provider field names. Supports `firstName`, `lastName`, `picture`, and `username` fields | | ||
| | `avatarSize` | `number` | ❌ | Size of the avatar in pixels | | ||
| | `className` | `string` | ❌ | CSS class name for the dropdown container | | ||
| | `fallback` | `ReactElement` | ❌ | Element to render when no user is signed in | | ||
| | `isLoading` | `boolean` | ❌ | Whether the user data is currently loading. Automatically managed by `UserDropdown` | | ||
| | `menuItems` | `MenuItem[]` | ❌ | Menu items to display in the dropdown | | ||
| | `onManageProfile` | `function` | ❌ | Callback function for manage profile action. Automatically managed by `UserDropdown` | | ||
| | `onSignOut` | `function` | ❌ | Callback function for sign out action | | ||
| | `portalId` | `string` | ❌ | The HTML element ID where the portal should be mounted | | ||
| | `showDropdownHeader` | `boolean` | ❌ | Show dropdown header with user information | | ||
| | `showTriggerLabel` | `boolean` | ❌ | Show user's display name next to avatar in the trigger button | | ||
| | `user` | `object` | ✅ | The user object containing profile information. Automatically provided by `UserDropdown` | | ||
|
|
There was a problem hiding this comment.
Address prop duplication between tables.
The BaseUserDropdown props table duplicates several props already documented in the initial props table (lines 53-61):
menuItems(lines 55, 73)showTriggerLabel(lines 56, 78) - with different descriptionsavatarSize(lines 57, 69) - with different descriptionsfallback(lines 58, 71)
This creates the same documentation issues identified in the React SDK file. The tables should be consolidated or clearly separated to avoid confusion and maintenance burden.
Refer to the review comment on the React file for recommended consolidation approaches.
🤖 Prompt for AI Agents
In `@en/includes/sdks/nextjs/components/user-selfcare-components/user-dropdown.md`
around lines 62 - 80, The BaseUserDropdown props table duplicates several props
already documented for UserDropdown (notably menuItems, showTriggerLabel,
avatarSize, fallback) causing conflicting descriptions; consolidate the
documentation by merging the two tables into a single authoritative props table
for BaseUserDropdown (used by UserDropdown) or explicitly remove duplicated rows
from the BaseUserDropdown table and add a cross-reference note in the
UserDropdown section indicating that user/onManageProfile are auto-handled;
ensure the final table lists each prop once with consistent descriptions and
keep unique notes for props overridden/managed by UserDropdown (e.g., user,
onManageProfile).
| ### BaseUserDropdown props | ||
|
|
||
| The `UserDropdown` component internally uses the `BaseUserDropdown` component and accepts all its props except `user` and `onManageProfile`, which are handled automatically. The following table lists all available props from `BaseUserDropdown`: | ||
|
|
||
| | Prop | Type | Required | Description | | ||
| |-----------------------|---------------------------|----------|-------------| | ||
| | `attributeMapping` | `object` | ❌ | Mapping of component attribute names to identity provider field names. Supports `firstName`, `lastName`, `picture`, and `username` fields | | ||
| | `avatarSize` | `number` | ❌ | Size of the avatar in pixels | | ||
| | `className` | `string` | ❌ | CSS class name for the dropdown container | | ||
| | `fallback` | `ReactElement` | ❌ | Element to render when no user is signed in | | ||
| | `isLoading` | `boolean` | ❌ | Whether the user data is currently loading. Automatically managed by `UserDropdown` | | ||
| | `menuItems` | `MenuItem[]` | ❌ | Menu items to display in the dropdown | | ||
| | `onManageProfile` | `function` | ❌ | Callback function for manage profile action. Automatically managed by `UserDropdown` | | ||
| | `onSignOut` | `function` | ❌ | Callback function for sign out action | | ||
| | `portalId` | `string` | ❌ | The HTML element ID where the portal should be mounted | | ||
| | `showDropdownHeader` | `boolean` | ❌ | Show dropdown header with user information | | ||
| | `showTriggerLabel` | `boolean` | ❌ | Show user's display name next to avatar in the trigger button | | ||
| | `user` | `object` | ✅ | The user object containing profile information. Automatically provided by `UserDropdown` | | ||
|
|
There was a problem hiding this comment.
Address prop duplication between tables.
The BaseUserDropdown props table duplicates several props already documented in the initial props table (lines 53-62):
menuItems(lines 55, 75)showTriggerLabel(lines 56, 80) - with different descriptionsavatarSize(lines 57, 71) - with different descriptionsfallback(lines 58, 73)onSignOut(lines 62, 77)
This duplication creates confusion about the source of each prop and risks documentation drift if one table is updated without the other.
Consider one of these approaches:
- Consolidate into a single table with a column indicating which props are automatically managed
- Remove duplicates from the first table and keep only UserDropdown-specific props (children, renderTrigger, renderDropdown)
- Add a clear note in the first table stating "See BaseUserDropdown props section below for inherited props"
📋 Recommended approach: Consolidate documentation
The first props table should focus exclusively on UserDropdown-specific props and rendering options:
## Props
-The `UserDropdown` component accepts all props from `BaseUserDropdown`, except `user` and `onManageProfile` (handled internally):
+The `UserDropdown` component accepts the following props for customization. For inherited props from `BaseUserDropdown`, see the [BaseUserDropdown props](`#baseuserdowndown-props`) section below.
| Prop | Type | Required | Description |
|------------------|-------------------------------|----------|-------------|
-| `menuItems` | `MenuItem[]` | ❌ | Custom menu items for the dropdown |
-| `showTriggerLabel` | `boolean` | ❌ | Show user's name next to avatar |
-| `avatarSize` | `number` | ❌ | Size of the avatar |
-| `fallback` | `ReactElement` | ❌ | Content to show when no user is signed in |
| `children` | `function` | ❌ | Render prop for full customization |
| `renderTrigger` | `function` | ❌ | Custom trigger button renderer |
| `renderDropdown` | `function` | ❌ | Custom dropdown content renderer |
-| `onSignOut` | `function` | ❌ | Callback after sign-out is triggered |Then keep all props (including the render-specific ones if they're actually inherited) in the comprehensive BaseUserDropdown props table.
🤖 Prompt for AI Agents
In `@en/includes/sdks/react/components/user-selfcare-components/user-dropdown.md`
around lines 64 - 82, The docs duplicate several props between the UserDropdown
and BaseUserDropdown tables (e.g., menuItems, showTriggerLabel, avatarSize,
fallback, onSignOut); consolidate to avoid drift by making the first table only
list UserDropdown-specific props (children, renderTrigger, renderDropdown) and
add a one-line note like "Inherited props (user, avatarSize, menuItems,
showTriggerLabel, fallback, onSignOut, etc.) are documented in BaseUserDropdown
below" linking to the BaseUserDropdown section, or alternatively merge both
tables into a single comprehensive table with an extra column "Managed by
UserDropdown" to indicate which props are automatically handled by UserDropdown
(update entries for BaseUserDropdown and UserDropdown accordingly).
This PR was automatically generated by Claude AI.
Affected Versions
This PR updates the shared include files that affect the following versions:
Changes Made
Added a new "BaseUserDropdown props" section to both React and Next.js UserDropdown component documentation that includes:
userandonManageProfileStyle Scope Verification
Microsoft Style Guidelines have been applied to the newly added content including:
Existing content style has been preserved and not modified.
Verification
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.