feat(docs): auth dropdown selector #4870
Merged
Conversation
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
… separators Co-Authored-By: [email protected] <[email protected]>
- Add PLAYGROUND_SELECTED_AUTH_INDEX_ATOM to track active auth scheme - Revert PlaygroundAuthorizationFormCard to accept single auth instead of array - Update ExplorerContent to render separate card per auth with OR separators - Add UI controls (Use this method button) to select active auth scheme - Update all request building code to use selected auth instead of first auth: - useSendRequest.ts - PlaygroundCodeSnippetResolver - PlaygroundEndpoint - PlaygroundWebSocket - Handle OAuth referenced endpoint per-auth instead of just first auth - Each auth card now has independent open/closed state Co-Authored-By: [email protected] <[email protected]>
- Remove useAtom from PlaygroundAuthorizationFormCard (server-only) - Create PlaygroundAuthorizationFormCardSelectButton client component - Move auth selection logic to client component in PlaygroundAuthorizationFormCardRoot - Fixes Next.js lint error: client hooks in server-only file Co-Authored-By: [email protected] <[email protected]>
…ormCardSelectButton - Remove unused lang parameter to fix ESLint error - Update call site in PlaygroundAuthorizationFormCard to not pass lang Co-Authored-By: [email protected] <[email protected]>
- Format PlaygroundAuthorizationFormCardRoot with proper line breaks - Format ExplorerContent, resolver, PlaygroundEndpoint, PlaygroundWebSocket - Fixes biome format check errors in CI Co-Authored-By: [email protected] <[email protected]>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
...ages/fern-docs/bundle/src/components/playground/auth/PlaygroundAuthorizationFormCardRoot.tsx
Outdated
Show resolved
Hide resolved
…fy-text.tsx Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Additional Suggestion:
The React key is using the character position from the regex match (key={index}), which is an unstable identifier that violates React best practices for list rendering and can cause subtle bugs during re-renders.
View Details
📝 Patch Details
diff --git a/packages/fern-docs/bundle/src/components/playground/auth/linkify-text.tsx b/packages/fern-docs/bundle/src/components/playground/auth/linkify-text.tsx
index ecfef8766..992b053ba 100644
--- a/packages/fern-docs/bundle/src/components/playground/auth/linkify-text.tsx
+++ b/packages/fern-docs/bundle/src/components/playground/auth/linkify-text.tsx
@@ -15,6 +15,7 @@ export function linkifyText(text: string): ReactNode {
const parts: ReactNode[] = [];
let lastIndex = 0;
let match: RegExpExecArray | null;
+ let linkCounter = 0; // Counter for stable keys
// Reset the regex
URL_REGEX.lastIndex = 0;
@@ -32,7 +33,7 @@ export function linkifyText(text: string): ReactNode {
const href = url.startsWith("www.") ? `https://${url}` : url;
parts.push(
<a
- key={index}
+ key={linkCounter++}
href={href}
target="_blank"
rel="noopener noreferrer"
Analysis
Unstable React keys cause reconciliation issues in linkifyText function
What fails: linkifyText() in packages/fern-docs/bundle/src/components/playground/auth/linkify-text.tsx uses character positions as React keys (key={index}), which are unstable when text content changes
How to reproduce:
// Test with URLs at different positions:
linkifyText("Check out https://example.com and https://google.com") // keys: 10, 39
linkifyText("Here https://example.com and https://google.com") // keys: 5, 35
// Same URLs get different keys, violating React's reconciliation requirementsResult: Same URLs receive different React keys when text content changes, causing React to unnecessarily unmount/remount link elements instead of reusing them
Expected: React keys should be stable across re-renders per React documentation on keys - "Keys should be given to the elements inside the array to give the elements a stable identity"
packages/fern-docs/bundle/src/components/playground/auth/PlaygroundAuthSwitcher.tsx
Outdated
Show resolved
Hide resolved
fern-support
approved these changes
Nov 9, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
before: