Merge pull request #2013 from kleros/fix/file-viewer-return-button-link

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

Author: alcercu

web/src/components/DisputePreview/Policies.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { useParams } from "react-router-dom";
+
 import PaperclipIcon from "svgs/icons/paperclip.svg";
 import PolicyIcon from "svgs/icons/policy.svg";
 
@@ -67,17 +69,23 @@ interface IPolicies {
 }
 
 export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attachment }) => {
+  const { id } = useParams();
+
   return (
     <Container>
       <StyledP>Policy documents:</StyledP>
       {!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
-        <StyledInternalLink to={`/attachment/?title=${"Case Policy"}&url=${getIpfsUrl(attachment.uri)}`}>
+        <StyledInternalLink
+          to={`/attachment/?disputeId=${id}&title=${"Case Policy"}&url=${getIpfsUrl(attachment.uri)}`}
+        >
           <StyledPaperclipIcon />
           {attachment.label ?? "Attachment"}
         </StyledInternalLink>
       ) : null}
       {isUndefined(disputePolicyURI) ? null : (
-        <StyledInternalLink to={`/attachment/?title=${"Dispute Policy"}&url=${getIpfsUrl(disputePolicyURI)}`}>
+        <StyledInternalLink
+          to={`/attachment/?disputeId=${id}&title=${"Dispute Policy"}&url=${getIpfsUrl(disputePolicyURI)}`}
+        >
           <StyledPolicyIcon />
           Dispute Policy
         </StyledInternalLink>

web/src/components/EvidenceCard.tsx

@@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
 
 import Identicon from "react-identicons";
 import ReactMarkdown from "react-markdown";
+import { useParams } from "react-router-dom";
 
 import { Card } from "@kleros/ui-components-library";
 
@@ -224,6 +225,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
   fileURI,
 }) => {
   const profileLink = `/profile/1/desc/all?address=${sender}`;
+  const { id } = useParams();
 
   const transactionExplorerLink = useMemo(() => {
     return getTxnExplorerLink(transactionHash ?? "");
@@ -258,7 +260,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
         </BottomLeftContent>
         {fileURI && fileURI !== "-" ? (
           <FileLinkContainer>
-            <StyledInternalLink to={`/attachment/?title=${"Evidence File"}&url=${getIpfsUrl(fileURI)}`}>
+            <StyledInternalLink to={`/attachment/?disputeId=${id}&title=${"Evidence File"}&url=${getIpfsUrl(fileURI)}`}>
               <AttachmentIcon />
               <AttachedFileText />
             </StyledInternalLink>

web/src/pages/AttachmentDisplay/Header.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -66,9 +66,20 @@ const StyledButton = styled(Button)`
 
 const Header: React.FC<{ title: string }> = ({ title }) => {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const disputeId = searchParams.get("disputeId");
+  const attachmentTitle = searchParams.get("title");
 
   const handleReturn = () => {
-    navigate(-1);
+    if (attachmentTitle === "Evidence File") {
+      navigate(`/cases/${disputeId}/evidence`);
+    } else if (attachmentTitle === "Case Policy" || attachmentTitle === "Dispute Policy") {
+      navigate(`/cases/${disputeId}/overview`);
+    } else if (attachmentTitle === "Policy File") {
+      navigate(`/resolver/policy`);
+    } else {
+      navigate("/");
+    }
   };
 
   return (