feat(web): show-policy-once-uploaded-in-resolver

Author: tractorss

web/src/app.tsx

@@ -26,6 +26,7 @@ import Loader from "components/Loader";
 import Layout from "layout/index";
 
 import ErrorFallback from "./components/ErrorFallback";
+import AttachmentDisplay from "./pages/AttachmentDisplay";
 import { SentryRoutes } from "./utils/sentry";
 
 const App: React.FC = () => {
@@ -104,6 +105,14 @@ const App: React.FC = () => {
                             </Suspense>
                           }
                         />
+                        <Route
+                          path="attachment/*"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <AttachmentDisplay />
+                            </Suspense>
+                          }
+                        />
                         <Route path="*" element={<h1>Page not found</h1>} />
                       </Route>
                     </SentryRoutes>

web/src/components/DisputePreview/Policies.tsx

@@ -71,13 +71,13 @@ export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attac
     <Container>
       <StyledP>Policy documents:</StyledP>
       {!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
-        <StyledInternalLink to={`attachment/?url=${getIpfsUrl(attachment.uri)}`}>
+        <StyledInternalLink to={`/attachment/?title=${"Case Policy"}&&url=${getIpfsUrl(attachment.uri)}`}>
           <StyledPaperclipIcon />
           {attachment.label ?? "Attachment"}
         </StyledInternalLink>
       ) : null}
       {isUndefined(disputePolicyURI) ? null : (
-        <StyledInternalLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
+        <StyledInternalLink to={`/attachment/?title=${"Dispute Policy"}&&url=${getIpfsUrl(disputePolicyURI)}`}>
           <StyledPolicyIcon />
           Dispute Policy
         </StyledInternalLink>

web/src/components/EvidenceCard.tsx

@@ -258,7 +258,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
         </BottomLeftContent>
         {fileURI && fileURI !== "-" ? (
           <FileLinkContainer>
-            <StyledInternalLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
+            <StyledInternalLink to={`/attachment/?title=${"Evidence File"}&&url=${getIpfsUrl(fileURI)}`}>
               <AttachmentIcon />
               <AttachedFileText />
             </StyledInternalLink>

web/src/context/NewDisputeContext.tsx

@@ -112,7 +112,7 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
 
   useEffect(() => {
     // Cleanup function to clear local storage when user leaves the route
-    if (location.pathname.includes("/resolver")) return;
+    if (location.pathname.includes("/resolver") || location.pathname.includes("/attachment")) return;
 
     resetDisputeData();
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate, useLocation, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -64,24 +64,13 @@ const StyledButton = styled(Button)`
   }
 `;
 
-const Header: React.FC = () => {
+const Header: React.FC<{ title: string }> = ({ title }) => {
   const navigate = useNavigate();
-  const { id } = useParams();
-  const location = useLocation();
 
   const handleReturn = () => {
     navigate(-1);
   };
 
-  let title = "";
-  if (location.pathname.includes("policy")) {
-    title = `Policy - Case #${id}`;
-  } else if (location.pathname.includes("evidence")) {
-    title = "Attached File";
-  } else if (location.pathname.includes("attachment")) {
-    title = `Attachment - Case #${id}`;
-  }
-
   return (
     <Container>
       <TitleContainer>

web/src/pages/AttachmentDisplay/index.tsx

@@ -0,0 +1,83 @@
+import React, { lazy, Suspense } from "react";
+import styled from "styled-components";
+
+import { useSearchParams } from "react-router-dom";
+
+import NewTabIcon from "svgs/icons/new-tab.svg";
+
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
+
+import { ExternalLink } from "components/ExternalLink";
+import Loader from "components/Loader";
+
+import Header from "./Header";
+
+const FileViewer = lazy(() => import("components/FileViewer"));
+
+const Container = styled.div`
+  width: 100%;
+  background-color: ${({ theme }) => theme.lightBackground};
+  padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-bottom: calc(76px + (96 - 76) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  max-width: ${MAX_WIDTH_LANDSCAPE};
+  margin: 0 auto;
+`;
+
+const AttachmentContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const LoaderContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+const StyledExternalLink = styled(ExternalLink)`
+  display: flex;
+  align-items: center;
+  align-self: flex-end;
+  gap: 8px;
+`;
+
+const StyledNewTabIcon = styled(NewTabIcon)`
+  path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+const AttachmentDisplay: React.FC = () => {
+  const [searchParams] = useSearchParams();
+
+  const url = searchParams.get("url");
+  const title = searchParams.get("title") ?? "Attachment";
+  return (
+    <Container>
+      <AttachmentContainer>
+        <Header {...{ title }} />
+        {url ? (
+          <>
+            <StyledExternalLink to={url} rel="noreferrer" target="_blank">
+              Open in new tab <StyledNewTabIcon />
+            </StyledExternalLink>
+            <Suspense
+              fallback={
+                <LoaderContainer>
+                  <Loader width={"48px"} height={"48px"} />
+                </LoaderContainer>
+              }
+            >
+              <FileViewer url={url} />
+            </Suspense>
+          </>
+        ) : null}
+      </AttachmentContainer>
+    </Container>
+  );
+};
+
+export default AttachmentDisplay;

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

@@ -1,12 +1,11 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { Routes, Route } from "react-router-dom";
+
 import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
-import { Routes, Route } from "react-router-dom";
-
-import AttachmentDisplay from "./AttachmentDisplay";
 import CaseDetails from "./CaseDetails";
 import CasesFetcher from "./CasesFetcher";
 
@@ -28,9 +27,6 @@ const Cases: React.FC = () => (
   <Container>
     <Routes>
       <Route path="/display/:page/:order/:filter" element={<CasesFetcher />} />
-      <Route path="/:id/evidence/attachment/*" element={<AttachmentDisplay />} />
-      <Route path="/:id/overview/policy/attachment/*" element={<AttachmentDisplay />} />
-      <Route path="/:id/overview/attachment/*" element={<AttachmentDisplay />} />
       <Route path="/:id/*" element={<CaseDetails />} />
     </Routes>
   </Container>

web/src/pages/Cases/index.tsx

@@ -4,15 +4,20 @@ import styled, { css } from "styled-components";
 import { useAtlasProvider, Roles } from "@kleros/kleros-app";
 import { FileUploader } from "@kleros/ui-components-library";
 
+import PolicyIcon from "svgs/icons/policy.svg";
+
 import { useNewDisputeContext } from "context/NewDisputeContext";
 import useIsDesktop from "hooks/useIsDesktop";
+import { getIpfsUrl } from "utils/getIpfsUrl";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
-import { getFileUploaderMsg } from "src/utils";
+import { getFileUploaderMsg, isUndefined } from "src/utils";
 
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
+import { InternalLink } from "components/InternalLink";
 import Header from "pages/Resolver/Header";
 
 import NavigationButtons from "../NavigationButtons";
@@ -54,6 +59,25 @@ const StyledFileUploader = styled(FileUploader)`
   }
 `;
 
+const StyledPolicyIcon = styled(PolicyIcon)`
+  width: 16px;
+  fill: ${({ theme }) => theme.primaryBlue};
+`;
+
+const StyledInternalLink = styled(InternalLink)`
+  ${hoverShortTransitionTiming}
+  display: flex;
+  gap: 4px;
+  align-self: flex-start;
+  margin-bottom: 32px;
+  margin-top: 32px;
+  &:hover {
+    svg {
+      fill: ${({ theme }) => theme.secondaryBlue};
+    }
+  }
+`;
+
 const Policy: React.FC = () => {
   const { disputeData, setDisputeData, setIsPolicyUploading } = useNewDisputeContext();
   const { uploadFile, roleRestrictions } = useAtlasProvider();
@@ -83,12 +107,18 @@ const Policy: React.FC = () => {
         criteria, a contract stating the rights and duties of the parties, or any set of pre-defined rules that are
         relevant to jurors' decision-making.
       </StyledLabel>
+
       <StyledFileUploader
         callback={handleFileUpload}
         variant={isDesktop ? "info" : undefined}
         msg={`You can attach additional information here. Important: the above description must reference the relevant parts of the file content.\n${getFileUploaderMsg(Roles.Policy, roleRestrictions)}`}
       />
-
+      {!isUndefined(disputeData.policyURI) ? (
+        <StyledInternalLink to={`/attachment/?title=${"Policy File"}&&url=${getIpfsUrl(disputeData.policyURI)}`}>
+          <StyledPolicyIcon />
+          Inspect the uploaded policy
+        </StyledInternalLink>
+      ) : null}
       <NavigationButtons prevRoute="/resolver/notable-persons" nextRoute="/resolver/preview" />
     </Container>
   );