Adds ORCID claiming button to search results#509
Adds ORCID claiming button to search results#509codycooperross wants to merge 1 commit intomasterfrom
Conversation
WalkthroughIntroduces a conditional Claim button for DataCite DOIs based on user session and metadata visibility, adjusts header layout to accommodate the button, shortens description truncation from 2500 to 350 characters, moves footer placement, and adds a visual divider via new SCSS class. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant W as WorkMetadata.tsx
participant S as Session
participant C as Claim
U->>W: Navigate to work page
W->>S: Fetch current user/session
S-->>W: Return user (or null)
W->>W: Evaluate shouldDisplayOrcidButton (user && !hideMetadata && DOI && agency==DataCite)
alt Button shown
W->>C: Render Claim button with doi_id
else No button
W->>W: Render full-width header
end
W->>U: Render metadata, truncated description (350), footer, divider
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/components/WorkMetadata/WorkMetadata.module.scss (1)
9-12: Use theme-aware border color for better consistency (and dark mode).Hard-coding rgb(205,210,213) may clash with Bootstrap themes. Prefer the Bootstrap border color variable so the divider adapts to light/dark themes.
Apply this diff:
.divider { - border-bottom: 1px solid rgb(205, 210, 213); + border-bottom: 1px solid var(--bs-border-color); margin-top: 1.5rem; }src/components/WorkMetadata/WorkMetadata.tsx (3)
199-201: Confirm product intent for aggressive description truncation (350 chars).This is a big reduction and may hide useful context in search results. If intentional, all good; otherwise consider a slightly higher limit (e.g., 600–800) for readability.
295-311: Use react-bootstrap grid and responsive columns; avoid inline styles.Using Row/Col improves consistency, and responsive widths prevent cramped layouts on small screens. Inline font-size isn’t necessary here.
Apply this diff:
- {!hideTitle && ( - <div className='row'> - <div - className={`col-${shouldDisplayOrcidButton ? '9' : '12'}`} - > + {!hideTitle && ( + <Row> + <Col xs={12} lg={shouldDisplayOrcidButton ? 9 : 12}> {title()} {includeMetricsDisplay && <MetricsDisplay counts={{ citations: metadata.citationCount, views: metadata.viewCount, downloads: metadata.downloadCount }} />} {!hideMetadataInTable && creators()} {metadataTag()} - </div> + </Col> {shouldDisplayOrcidButton && ( - <div className="col-3" style={{ fontSize: '1rem'}}> + <Col xs={12} lg={3}> <Claim doi_id={metadata.doi} /> - </div> + </Col> )} - </div> + </Row> )}
332-334: Add separator semantics and verify footer grid nesting.
- Add role/aria to the decorative divider for a11y clarity.
- footer() returns a Col; here it’s rendered inside another Col without an intervening Row, which violates Bootstrap grid nesting and can cause layout quirks.
Apply this diff for the divider:
- {!hideMetadataInTable && <div className={styles.divider}/>} + {!hideMetadataInTable && <div className={styles.divider} role="separator" aria-hidden="true" />}If you’d like to fix the grid nesting, consider changing footer() to return a simple div instead of a Col. Example (outside the changed hunk):
// replace the current footer() body const footer = () => { return ( <div className="panel-footer"> <a href={handleUrl} className={styles.doiLink}> <i className="ai ai-doi"></i> {handleUrl} </a> </div> ) }Alternatively, wrap the current footer() output in a Row at the call site and remove the inner Col in footer().
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/components/WorkMetadata/WorkMetadata.module.scss(1 hunks)src/components/WorkMetadata/WorkMetadata.tsx(5 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/WorkMetadata/WorkMetadata.tsx (3)
src/utils/session.ts (1)
session(10-32)src/components/Claim/Claim.tsx (2)
Claim(34-178)cache(40-63)src/data/types.ts (1)
Claim(146-153)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: test / cypress (4)
- GitHub Check: test / cypress (1)
- GitHub Check: test / cypress (2)
- GitHub Check: test / cypress (3)
- GitHub Check: test / cypress (5)
🔇 Additional comments (1)
src/components/WorkMetadata/WorkMetadata.tsx (1)
23-25: LGTM: targeted imports to support the Claim flow.Importing Claim and session here keeps the work-scoped logic local and avoids loading the Claim UI unless needed later.
| const user = session() | ||
| const claim = metadata.claims ? metadata.claims[0] : null | ||
| const shouldDisplayOrcidButton = user && !hideMetadataInTable && metadata.doi && metadata.registrationAgency.id === 'datacite' | ||
|
|
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Guard session() for SSR and consider sync decode to avoid always-null user.
Calling session() at render can break on the server (Cookies/window not available) and, as implemented, verify() with a callback likely returns before setting user, yielding null. This can hide the button unintentionally.
Minimal guard in this component:
- const user = session()
+ const user = typeof window !== 'undefined' ? session() : null
- const shouldDisplayOrcidButton = user && !hideMetadataInTable && metadata.doi && metadata.registrationAgency.id === 'datacite'
+ const shouldDisplayOrcidButton =
+ !!user &&
+ !hideMetadataInTable &&
+ !!metadata.doi &&
+ metadata.registrationAgency?.id === 'datacite'If session() is using asynchronous verification, please switch to a synchronous decode/verify (no callback) or a lightweight decode (e.g., jwt-decode) on the client. I can open a follow-up PR to adjust session() accordingly.
Run this script to confirm the async verify pattern in session.ts:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "session() implementation:"
rg -n -A5 -B8 $'export\\s+const\\s+session\\s*=\\s*\\(' src/utils/session.ts
echo
echo "Check for async JsonWebToken.verify callback usage:"
rg -n -C2 'JsonWebToken\\.verify\\s*\\(.*\\,\\s*.*\\,\\s*\\{[^}]*\\}\\s*,\\s*[^)]*\\)' src/utils/session.ts || trueLength of output: 970
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Displaying full session() implementation in src/utils/session.ts:"
sed -n '1,200p' src/utils/session.tsLength of output: 970
Ensure session() is synchronous and guard against SSR to correctly display the ORCID button
The current session() implementation uses JsonWebToken.verify with a callback, so it always returns null (the callback runs after return). Additionally, calling session() during SSR may throw if window/cookies aren’t available.
• src/utils/session.ts
- Replace the async callback pattern with a synchronous verify or lightweight decode.
- Example refactor:
export const session = (): User => {
if (!JWT_KEY) return null
const sessionCookie = Cookies.getJSON('_datacite')
const token = sessionCookie?.authenticated?.access_token
if (!token) return null
- let user: any = null
- function setUser(error: any, payload: any) {
- if (error) {
- console.log('JWT verification error: ' + error.message)
- return
- }
-
- user = payload
- }
-
- JsonWebToken.verify(token, JWT_KEY, { algorithms: ['RS256'] }, setUser)
-
- return user as User
+ try {
+ return JsonWebToken.verify(token, JWT_KEY, { algorithms: ['RS256'] }) as User
+ } catch (err) {
+ console.error('JWT verification error:', err)
+ return null
+ }
}• src/components/WorkMetadata/WorkMetadata.tsx
- Guard client‐only calls and tighten null checks:
- const user = session()
+ const user = typeof window !== 'undefined' ? session() : null
- const shouldDisplayOrcidButton = user && !hideMetadataInTable && metadata.doi && metadata.registrationAgency.id === 'datacite'
+ const shouldDisplayOrcidButton =
+ Boolean(user) &&
+ !hideMetadataInTable &&
+ Boolean(metadata.doi) &&
+ metadata.registrationAgency?.id === 'datacite'Let me know if you’d like assistance wiring up a React hook or using jwt-decode for a lighter client‐side implementation.
📝 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 user = session() | |
| const claim = metadata.claims ? metadata.claims[0] : null | |
| const shouldDisplayOrcidButton = user && !hideMetadataInTable && metadata.doi && metadata.registrationAgency.id === 'datacite' | |
| const user = typeof window !== 'undefined' ? session() : null | |
| const claim = metadata.claims ? metadata.claims[0] : null | |
| const shouldDisplayOrcidButton = | |
| Boolean(user) && | |
| !hideMetadataInTable && | |
| Boolean(metadata.doi) && | |
| metadata.registrationAgency?.id === 'datacite' |
🤖 Prompt for AI Agents
In src/components/WorkMetadata/WorkMetadata.tsx around lines 141 to 144, the
call to session() is currently returning null because the session helper uses an
async callback verify and is also unsafe during SSR; replace the session
implementation in src/utils/session.ts with a synchronous token decode/verify
(for example use jwt-decode or a synchronous verify call) so session() returns
the user immediately, and in this file guard the client-only call by checking
typeof window !== 'undefined' before invoking session(), and tighten the
ORCID-button condition to ensure metadata.registrationAgency exists and has id
=== 'datacite' and metadata.doi is present and user is non-null so the
shouldDisplayOrcidButton is computed safely on the client.
1 participant
Purpose
closes: Add github issue that originated this PR
Approach
Open Questions and Pre-Merge TODOs
Learning
Types of changes
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Reviewer, please remember our guidelines:
Summary by CodeRabbit
New Features
Style
UX