feat: add policy file to the file viewer

Author: kemuru

web/src/components/DisputePreview/Policies.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { Link } from "react-router-dom";
+
 import PaperclipIcon from "svgs/icons/paperclip.svg";
 import PolicyIcon from "svgs/icons/policy.svg";
 
@@ -59,6 +61,12 @@ const LinkContainer = styled.div`
   display: flex;
   gap: ${responsiveSize(16, 24)};
   flex-wrap: wrap;
+  align-items: center;
+`;
+
+const StyledLink = styled(Link)`
+  display: flex;
+  gap: 4px;
 `;
 
 type Attachment = {
@@ -83,10 +91,10 @@ export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attac
           </StyledA>
         ) : null}
         {isUndefined(disputePolicyURI) ? null : (
-          <StyledA href={getIpfsUrl(disputePolicyURI)} target="_blank" rel="noreferrer">
+          <StyledLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
             <StyledPolicyIcon />
             Dispute Policy
-          </StyledA>
+          </StyledLink>
         )}
         {isUndefined(courtId) ? null : (
           <StyledA href={`#/courts/${courtId}/purpose?section=description`}>

web/src/pages/Cases/AttachmentDisplay/Header.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useLocation, useParams } from "react-router-dom";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -57,16 +57,23 @@ const StyledButton = styled(Button)`
 `;
 
 const Header: React.FC = () => {
-  const { id } = useParams();
   const navigate = useNavigate();
+  const { id } = useParams();
+  const location = useLocation();
+
+  const handleReturn = () => {
+    navigate(-1);
+  };
+
+  const title = location.pathname.includes("policy") ? `Policy File - Case #${id}` : "Attachment File";
 
   return (
     <Container>
       <TitleContainer>
         <StyledPaperClip />
-        <Title>Attachment File</Title>{" "}
+        <Title>{title}</Title>
       </TitleContainer>
-      <StyledButton text="Return" Icon={Arrow} onClick={() => navigate(`/cases/${id}/evidence`)} />
+      <StyledButton text="Return" Icon={Arrow} onClick={handleReturn} />
     </Container>
   );
 };

web/src/pages/Cases/AttachmentDisplay/index.tsx

@@ -37,7 +37,7 @@ const StyledNewTabIcon = styled(NewTabIcon)`
   }
 `;
 
-const EvidenceAttachmentDisplay: React.FC = () => {
+const AttachmentDisplay: React.FC = () => {
   const [searchParams] = useSearchParams();
 
   const url = searchParams.get("url");
@@ -64,4 +64,4 @@ const EvidenceAttachmentDisplay: React.FC = () => {
   );
 };
 
-export default EvidenceAttachmentDisplay;
+export default AttachmentDisplay;

web/src/pages/Cases/index.tsx

@@ -5,7 +5,7 @@ import { Routes, Route } from "react-router-dom";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-import EvidenceAttachmentDisplay from "./AttachmentDisplay";
+import AttachmentDisplay from "./AttachmentDisplay";
 import CaseDetails from "./CaseDetails";
 import CasesFetcher from "./CasesFetcher";
 
@@ -21,7 +21,8 @@ const Cases: React.FC = () => (
   <Container>
     <Routes>
       <Route path="/display/:page/:order/:filter" element={<CasesFetcher />} />
-      <Route path="/:id/evidence/attachment/*" element={<EvidenceAttachmentDisplay />} />
+      <Route path="/:id/evidence/attachment/*" element={<AttachmentDisplay />} />
+      <Route path="/:id/overview/policy/attachment/*" element={<AttachmentDisplay />} />
       <Route path="/:id/*" element={<CaseDetails />} />
     </Routes>
   </Container>