feat: Custom code: add connection switcher - #765
Open
tamalchowdhury wants to merge 6 commits into
Open
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
WalkthroughThe documentation adds connection switching guidance and page-context reference. It also updates custom UI linking, page structure, localization, logo field names, and CSP-safe asset guidance. ChangesCustom UI documentation
Estimated code review effort: 3 (Moderate) | ~25 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/content/docs/design/customize-with-code/switch-connection.mdx (1)
51-82: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueOmit the login hint attribute when empty in JSX.
The aside below mentions to "Omit the attribute if nothing has been entered yet." In React/JSX, passing an empty string (
"") to a data attribute will render it in the DOM asdata-kinde-change-connection-login-hint="". To truly omit the attribute, the value needs to evaluate toundefined.Consider updating the JSX to pass
enteredEmail || undefinedso the attribute is omitted when the variable is an empty string.♻️ Proposed fix
- data-kinde-change-connection-login-hint={enteredEmail} + data-kinde-change-connection-login-hint={enteredEmail || undefined}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/content/docs/design/customize-with-code/switch-connection.mdx` around lines 51 - 82, Update the data-kinde-change-connection-login-hint attribute in the Page component to evaluate to undefined when enteredEmail is empty, such as by using the existing enteredEmail value with a falsy fallback, so React omits the attribute while preserving non-empty login hints.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/content/docs/design/customize-with-code/switch-connection.mdx`:
- Around line 51-82: Update the data-kinde-change-connection-login-hint
attribute in the Page component to evaluate to undefined when enteredEmail is
empty, such as by using the existing enteredEmail value with a falsy fallback,
so React omits the attribute while preserving non-empty login hints.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 558d9c58-6811-47e0-a5a1-23c238b3389c
📒 Files selected for processing (3)
src/content/docs/design/customize-with-code/custom-ui-examples.mdxsrc/content/docs/design/customize-with-code/switch-connection.mdxsrc/content/docs/design/customize-with-code/understand-page-design.mdx
Deploying kinde-docs-preview with
|
| Latest commit: |
3a2c99e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://adfcc62c.kinde-docs-preview.pages.dev |
| Branch Preview URL: | https://tamal-new-custom-ui-switch-j.kinde-docs-preview.pages.dev |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/content/docs/design/customize-with-code/manage-design-assets.mdx (1)
78-86: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winFix unclosed JSX tag and property casing.
In JSX, void HTML elements like
<source>must be self-closed, and standard React attributes should be camelCased (e.g.,srcSetinstead ofsrcset). Updating this prevents compilation errors for developers copying this snippet.🐛 Proposed fix
<source media="(prefers-color-scheme: dark)" - srcset={getDarkModeLogoUrl()} - > + srcSet={getDarkModeLogoUrl()} + /> <img src={getLogoUrl()} alt={event.context.widget.content.logo_alt} />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/content/docs/design/customize-with-code/manage-design-assets.mdx` around lines 78 - 86, Update the JSX in the picture markup by self-closing the source element and changing its srcset attribute to the camelCase srcSet form; leave the existing getDarkModeLogoUrl, getLogoUrl, and image content unchanged.
🧹 Nitpick comments (3)
src/content/docs/design/customize-with-code/understand-page-design.mdx (3)
236-237: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove duplicate page entries.
The
(register)and(login)pages are already listed just above this under the "Common pages" heading. Consider removing them here to avoid repetition.♻️ Proposed fix
### Authentication Pages involved in initiating authentication flows. -- `(register)` - The sign-up page. -- `(login)` - The sign-in page. - `(sso_home_realm)` - Displayed when a user selects **Continue with SSO** to choose their identity provider.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/content/docs/design/customize-with-code/understand-page-design.mdx` around lines 236 - 237, Remove the duplicate `(register)` and `(login)` page entries from the current page list in understand-page-design.mdx, keeping their existing entries under the “Common pages” heading unchanged.
319-326: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAdd missing hyphen separators.
Consider adding hyphens after the property names to maintain formatting consistency throughout the document.
♻️ Proposed fix
-- `domains` contains relevant domain info - - `kindeDomain` your domain on Kinde, e.g. `https://example.kinde.com` -- `widget` contains data generated from the widget - - `content` an object containing page content - translated and with placeholders replaced - - `page_title` the title of the page, commonly used in the `<title>` tag for the browser tab - - `heading` the main heading for the page - - `description` the page description - - `logo_alt` the alt text for your company logo +- `domains` - contains relevant domain info + - `kindeDomain` - your domain on Kinde, e.g. `https://example.kinde.com` +- `widget` - contains data generated from the widget + - `content` - an object containing page content - translated and with placeholders replaced + - `page_title` - the title of the page, commonly used in the `<title>` tag for the browser tab + - `heading` - the main heading for the page + - `description` - the page description + - `logo_alt` - the alt text for your company logo🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/content/docs/design/customize-with-code/understand-page-design.mdx` around lines 319 - 326, Update the property descriptions in the widget content documentation by adding hyphen separators after each property name—page_title, heading, description, and logo_alt—matching the existing list formatting used throughout the document.
304-304: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAdd missing hyphen separator.
Consider adding a hyphen after the property name to remain consistent with the formatting used in the rest of the file.
♻️ Proposed fix
-- `authUrlParams` contains useful info from the authorization request URL +- `authUrlParams` - contains useful info from the authorization request URL🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/content/docs/design/customize-with-code/understand-page-design.mdx` at line 304, Update the `authUrlParams` list item in the page design documentation to add the missing hyphen separator after the property name, matching the formatting of surrounding list entries.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/content/docs/design/content-customization/set-language-for-pages.mdx`:
- Line 100: Update the img src expression in the documentation snippet to use a
quoted string placeholder instead of the JSX-like <img_url> token, while
preserving the existing content.logo_alt alt text.
---
Outside diff comments:
In `@src/content/docs/design/customize-with-code/manage-design-assets.mdx`:
- Around line 78-86: Update the JSX in the picture markup by self-closing the
source element and changing its srcset attribute to the camelCase srcSet form;
leave the existing getDarkModeLogoUrl, getLogoUrl, and image content unchanged.
---
Nitpick comments:
In `@src/content/docs/design/customize-with-code/understand-page-design.mdx`:
- Around line 236-237: Remove the duplicate `(register)` and `(login)` page
entries from the current page list in understand-page-design.mdx, keeping their
existing entries under the “Common pages” heading unchanged.
- Around line 319-326: Update the property descriptions in the widget content
documentation by adding hyphen separators after each property name—page_title,
heading, description, and logo_alt—matching the existing list formatting used
throughout the document.
- Line 304: Update the `authUrlParams` list item in the page design
documentation to add the missing hyphen separator after the property name,
matching the formatting of surrounding list entries.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: b7df49dd-f0e5-4652-9b43-05a45731ebd4
📒 Files selected for processing (3)
src/content/docs/design/content-customization/set-language-for-pages.mdxsrc/content/docs/design/customize-with-code/manage-design-assets.mdxsrc/content/docs/design/customize-with-code/understand-page-design.mdx
tamalchowdhury
changed the title
pesickaa
approved these changes
Jul 30, 2026
dtoxvanilla1991
left a comment
dtoxvanilla1991
left a comment
Contributor
There was a problem hiding this comment.
Please have a look at 2 below 📓
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds a new doc page for the connection switcher feature for the custom page. It also updates the reference to sibling pages.
Summary by CodeRabbit