fix: allow return in case evidence was opened in new tab #2013

kemuru · 2025-05-28T15:40:25Z

PR-Codex overview

This PR focuses on enhancing the handling of evidence and policy attachments by incorporating disputeId into the URLs and improving navigation based on attachment titles.

Detailed summary

Added useParams to retrieve id in EvidenceCard, Policies, and Header components.
Updated StyledInternalLink in EvidenceCard to include disputeId in the URL.
Modified navigation logic in Header to direct users based on attachmentTitle.
Updated StyledInternalLink in Policies to include disputeId for policy attachments.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

New Features
- Evidence file links now include a dispute ID in their URLs for improved navigation context.
- The return button in the attachment header now redirects to specific pages based on the attachment type and dispute ID, enhancing navigation consistency.
- Links to dispute policies and attachments include dispute IDs to maintain context across pages.

netlify · 2025-05-28T15:40:30Z

❌ Deploy Preview for kleros-v2-university failed. Why did it fail? →

Name	Link
🔨 Latest commit	`dde0dc7`
🔍 Latest deploy log	https://app.netlify.com/projects/kleros-v2-university/deploys/68373756a869fa0008b86966

netlify · 2025-05-28T15:40:30Z

✅ Deploy Preview for kleros-v2-testnet ready!

Name	Link
🔨 Latest commit	`dde0dc7`
🔍 Latest deploy log	https://app.netlify.com/projects/kleros-v2-testnet/deploys/683737569ca83f00085e98f4
😎 Deploy Preview	https://deploy-preview-2013--kleros-v2-testnet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-05-28T15:40:31Z

✅ Deploy Preview for kleros-v2-neo ready!

Name	Link
🔨 Latest commit	`dde0dc7`
🔍 Latest deploy log	https://app.netlify.com/projects/kleros-v2-neo/deploys/68373756e4ab160008619e5c
😎 Deploy Preview	https://deploy-preview-2013--kleros-v2-neo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

coderabbitai · 2025-05-28T15:40:33Z

Walkthrough

The updates modify how route and query parameters are handled for evidence attachment links and navigation. The EvidenceCard and Policies components now include a disputeId query parameter in attachment links, extracted from the route. The Header component's return button now conditionally navigates based on the title query parameter, using disputeId for constructing target routes.

Changes

File(s)	Change Summary
web/src/components/EvidenceCard.tsx,	Use `useParams` to extract `id` from the route and append it as `disputeId` in attachment links.
web/src/components/DisputePreview/Policies.tsx	Use `useParams` to extract `id` and append as `disputeId` in attachment and dispute policy links.
web/src/pages/AttachmentDisplay/Header.tsx	Change return button navigation to conditional routes based on `title` query param, using `disputeId` from URL search parameters.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant EvidenceCard
    participant Policies
    participant Header
    participant Router

    User->>EvidenceCard: Clicks attachment link
    EvidenceCard->>Router: Navigate with disputeId, title, url

    User->>Policies: Clicks attachment or policy link
    Policies->>Router: Navigate with disputeId, title, url

    User->>Header: Clicks return button
    Header->>Router: Navigate based on title and disputeId query params

Suggested labels

Type: Bug :bug:, Package: Web

Suggested reviewers

alcercu

Poem

A rabbit hopped through code today,
Adding disputeId to guide the way.
Links now carry their rightful key,
And return paths flow more cleverly.
With every hop, the routes align—
Attachments and headers work just fine!
🐇✨

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e7a0759 and dde0dc7.

📒 Files selected for processing (2)

web/src/components/DisputePreview/Policies.tsx (2 hunks)
web/src/pages/AttachmentDisplay/Header.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

web/src/pages/AttachmentDisplay/Header.tsx

⏰ Context from checks skipped due to timeout of 90000ms (15)

GitHub Check: Redirect rules - kleros-v2-testnet
GitHub Check: Redirect rules - kleros-v2-testnet
GitHub Check: Header rules - kleros-v2-testnet
GitHub Check: Header rules - kleros-v2-testnet
GitHub Check: Pages changed - kleros-v2-testnet
GitHub Check: Pages changed - kleros-v2-testnet
GitHub Check: Redirect rules - kleros-v2-neo
GitHub Check: Redirect rules - kleros-v2-university
GitHub Check: Analyze (javascript)
GitHub Check: Header rules - kleros-v2-university
GitHub Check: SonarCloud
GitHub Check: contracts-testing
GitHub Check: Header rules - kleros-v2-neo
GitHub Check: Pages changed - kleros-v2-university
GitHub Check: Pages changed - kleros-v2-neo

🔇 Additional comments (3)

web/src/components/DisputePreview/Policies.tsx (3)

4-4: LGTM!

The import of useParams is correct and necessary for extracting the dispute ID from the URL parameters.

72-72: LGTM!

The useParams usage is correct and follows React Router conventions. The extracted id will be used to maintain dispute context in attachment URLs.

78-83:
✅ Verification successful

Verify handling of undefined dispute ID.

The addition of disputeId=${id} to the attachment URLs correctly maintains dispute context for proper return navigation. However, consider adding a safeguard in case the id parameter is undefined.

Also applies to: 86-91

🏁 Script executed:
#!/bin/bash
# Description: Check if there are any other usages of useParams in the codebase that handle undefined id values
# Expected: Find patterns of defensive programming around useParams usage

rg -A 5 -B 2 "useParams.*id" --type tsx --type ts
Length of output: 79

🏁 Script executed:
#!/bin/bash
# Description: Re-run search for useParams id usage across TS and TSX files using glob patterns
rg -A 5 -B 2 "useParams" -g "*.tsx" -g "*.ts"
Length of output: 55972

🏁 Script executed:
#!/bin/bash
# Inspect DisputePreview directory structure and Policies.tsx content
echo "Directory contents of DisputePreview:"
ls -R web/src/components/DisputePreview

echo -e "\nFirst 200 lines of Policies.tsx:"
sed -n '1,200p' web/src/components/DisputePreview/Policies.tsx

echo -e "\nSearch for where Policies is used in pages:"
rg "Policies" -n web/src/pages
Length of output: 3447
No additional undefined-guard needed for id
The id coming from React Router’s useParams is guaranteed by the route configuration wherever Policies is rendered, and none of the existing components defensively check for an undefined id. You can safely leave the URL interpolation as-is.

No changes required in web/src/components/DisputePreview/Policies.tsx.

✨ Finishing Touches

📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

netlify · 2025-05-28T15:42:52Z

✅ Deploy Preview for kleros-v2-testnet-devtools ready!

Name	Link
🔨 Latest commit	`dde0dc7`
🔍 Latest deploy log	https://app.netlify.com/projects/kleros-v2-testnet-devtools/deploys/683737567fcf1b0008ba9c1e
😎 Deploy Preview	https://deploy-preview-2013--kleros-v2-testnet-devtools.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e5cf1df and e7a0759.

📒 Files selected for processing (2)

web/src/components/EvidenceCard.tsx (3 hunks)
web/src/pages/AttachmentDisplay/Header.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (15)

GitHub Check: contracts-testing
GitHub Check: Redirect rules - kleros-v2-neo
GitHub Check: Redirect rules - kleros-v2-university
GitHub Check: Redirect rules - kleros-v2-testnet
GitHub Check: Redirect rules - kleros-v2-testnet
GitHub Check: Analyze (javascript)
GitHub Check: SonarCloud
GitHub Check: Header rules - kleros-v2-neo
GitHub Check: Header rules - kleros-v2-university
GitHub Check: Header rules - kleros-v2-testnet
GitHub Check: Header rules - kleros-v2-testnet
GitHub Check: Pages changed - kleros-v2-neo
GitHub Check: Pages changed - kleros-v2-university
GitHub Check: Pages changed - kleros-v2-testnet
GitHub Check: Pages changed - kleros-v2-testnet

🔇 Additional comments (5)

web/src/components/EvidenceCard.tsx (3)

6-6: LGTM: Import addition is appropriate.

The useParams hook import is correctly added to extract route parameters for the dispute ID.

228-228: LGTM: Route parameter extraction is correct.

Extracting the id parameter from the route is the appropriate way to get the dispute identifier for passing to the attachment link.

263-263: LGTM: Query parameter addition enables proper return navigation.

Adding the disputeId query parameter to the attachment URL ensures that the attachment page has the necessary context to navigate back to the correct evidence page, even when opened in a new tab.

web/src/pages/AttachmentDisplay/Header.tsx (2)

4-4: LGTM: Import addition is appropriate.

Adding useSearchParams to the import is correct for accessing URL query parameters.

69-70: LGTM: Search parameter extraction is correct.

Properly extracting the disputeId from search parameters to use for navigation.

web/src/pages/AttachmentDisplay/Header.tsx

codeclimate · 2025-05-28T16:20:03Z

Code Climate has analyzed commit dde0dc7 and detected 1 issue on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	1

View more on Code Climate.

sonarqubecloud · 2025-05-28T16:20:49Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

alcercu

lgtm

fix: allow return in case evidence was opened in new tab

e7a0759

kemuru requested a review from a team as a code owner May 28, 2025 15:40

kemuru requested a review from alcercu May 28, 2025 15:40

coderabbitai bot requested changes May 28, 2025

View reviewed changes

web/src/pages/AttachmentDisplay/Header.tsx Outdated Show resolved Hide resolved

coderabbitai bot previously approved these changes May 28, 2025

View reviewed changes

fix: few more links handling

dde0dc7

kemuru dismissed coderabbitai[bot]’s stale review via dde0dc7 May 28, 2025 16:18

coderabbitai bot approved these changes May 28, 2025

View reviewed changes

alcercu approved these changes May 28, 2025

View reviewed changes

alcercu enabled auto-merge May 28, 2025 16:22

alcercu merged commit 4e95c72 into dev May 28, 2025
19 of 26 checks passed

coderabbitai bot mentioned this pull request May 28, 2025

Release #2012

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: allow return in case evidence was opened in new tab #2013

fix: allow return in case evidence was opened in new tab #2013

kemuru commented May 28, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

netlify bot commented May 28, 2025 •

edited

Loading

Uh oh!

netlify bot commented May 28, 2025 •

edited

Loading

Uh oh!

netlify bot commented May 28, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented May 28, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

netlify bot commented May 28, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

codeclimate bot commented May 28, 2025

Uh oh!

sonarqubecloud bot commented May 28, 2025

Uh oh!

alcercu left a comment

Uh oh!

Uh oh!

Uh oh!

fix: allow return in case evidence was opened in new tab #2013

fix: allow return in case evidence was opened in new tab #2013

Conversation

kemuru commented May 28, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR-Codex overview

Detailed summary

Summary by CodeRabbit

Uh oh!

netlify bot commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for kleros-v2-university failed. Why did it fail? →

Uh oh!

netlify bot commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kleros-v2-testnet ready!

Uh oh!

netlify bot commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kleros-v2-neo ready!

Uh oh!

coderabbitai bot commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Suggested labels

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

netlify bot commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kleros-v2-testnet-devtools ready!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codeclimate bot commented May 28, 2025

Uh oh!

sonarqubecloud bot commented May 28, 2025

Quality Gate passed

Uh oh!

alcercu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kemuru commented May 28, 2025 •

edited by coderabbitai bot

Loading

netlify bot commented May 28, 2025 •

edited

Loading

netlify bot commented May 28, 2025 •

edited

Loading

netlify bot commented May 28, 2025 •

edited

Loading

coderabbitai bot commented May 28, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

netlify bot commented May 28, 2025 •

edited

Loading