From 19908c6b11f00713e3c47681e47a729b62fa3e05 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Thu, 23 Jan 2025 17:30:43 +0530
Subject: [PATCH 1/3] feat(web): file-restrictions-message

---
 .../Evidence/SubmitEvidenceModal.tsx          | 14 +++++++++----
 web/src/pages/Resolver/Policy/index.tsx       | 21 ++++++++++++-------
 web/src/utils/index.ts                        | 19 +++++++++++++++++
 3 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx b/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx
index d8056574a..12916f302 100644
--- a/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx
+++ b/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx
@@ -4,13 +4,13 @@ import styled from "styled-components";
 import Modal from "react-modal";
 import { useWalletClient, usePublicClient, useConfig } from "wagmi";
 
-import { useAtlasProvider, Roles } from "@kleros/kleros-app";
+import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { Textarea, Button, FileUploader } from "@kleros/ui-components-library";
 
 import { simulateEvidenceModuleSubmitEvidence } from "hooks/contracts/generated";
 import { wrapWithToast, errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
-import { isEmpty } from "src/utils";
+import { getFileUploaderMsg, isEmpty } from "src/utils";
 
 import EnsureAuth from "components/EnsureAuth";
 import { EnsureChain } from "components/EnsureChain";
@@ -43,6 +43,7 @@ const StyledTextArea = styled(Textarea)`
 
 const StyledFileUploader = styled(FileUploader)`
   width: 100%;
+  margin-bottom: 50px;
 `;
 
 const ButtonArea = styled.div`
@@ -62,7 +63,7 @@ const SubmitEvidenceModal: React.FC<{
   const [isSending, setIsSending] = useState(false);
   const [message, setMessage] = useState("");
   const [file, setFile] = useState<File>();
-  const { uploadFile } = useAtlasProvider();
+  const { uploadFile, roleRestrictions } = useAtlasProvider();
 
   const isDisabled = useMemo(() => isSending || isEmpty(message), [isSending, message]);
 
@@ -98,7 +99,11 @@ const SubmitEvidenceModal: React.FC<{
         onChange={(e) => setMessage(e.target.value)}
         placeholder="Your Arguments"
       />
-      <StyledFileUploader callback={(file: File) => setFile(file)} />
+      <StyledFileUploader
+        callback={(file: File) => setFile(file)}
+        msg={getFileUploaderMsg(Roles.Evidence, roleRestrictions)}
+        variant="info"
+      />
       <ButtonArea>
         <Button variant="secondary" disabled={isSending} text="Return" onClick={close} />
         <EnsureChain>
@@ -120,6 +125,7 @@ const constructEvidence = async (
   if (file) {
     infoToast("Uploading to IPFS");
     fileURI = await uploadFile(file, Roles.Evidence).catch((err) => {
+      // eslint-disable-next-line no-console
       console.log(err);
       errorToast(`Upload failed: ${err?.message}`);
       return null;
diff --git a/web/src/pages/Resolver/Policy/index.tsx b/web/src/pages/Resolver/Policy/index.tsx
index cee5bd0b8..584a94279 100644
--- a/web/src/pages/Resolver/Policy/index.tsx
+++ b/web/src/pages/Resolver/Policy/index.tsx
@@ -1,10 +1,14 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { useAtlasProvider, Roles } from "@kleros/kleros-app";
 import { FileUploader } from "@kleros/ui-components-library";
 
-import { useAtlasProvider, Roles } from "@kleros/kleros-app";
 import { useNewDisputeContext } from "context/NewDisputeContext";
+import useIsDesktop from "hooks/useIsDesktop";
+import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
+
+import { getFileUploaderMsg } from "src/utils";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
@@ -12,7 +16,6 @@ import { responsiveSize } from "styles/responsiveSize";
 import Header from "pages/Resolver/Header";
 
 import NavigationButtons from "../NavigationButtons";
-import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
 const Container = styled.div`
   display: flex;
@@ -38,19 +41,23 @@ const StyledLabel = styled.label`
 
 const StyledFileUploader = styled(FileUploader)`
   width: 84vw;
-  margin-bottom: ${responsiveSize(52, 32)};
+  margin-bottom: ${responsiveSize(150, 72)};
 
   ${landscapeStyle(
     () => css`
       width: ${responsiveSize(442, 700, 900)};
     `
   )}
+  small {
+    white-space: pre-line;
+    text-align: start;
+  }
 `;
 
 const Policy: React.FC = () => {
   const { disputeData, setDisputeData, setIsPolicyUploading } = useNewDisputeContext();
-  const { uploadFile } = useAtlasProvider();
-
+  const { uploadFile, roleRestrictions } = useAtlasProvider();
+  const isDesktop = useIsDesktop();
   const handleFileUpload = (file: File) => {
     setIsPolicyUploading(true);
     infoToast("Uploading Policy to IPFS");
@@ -78,8 +85,8 @@ const Policy: React.FC = () => {
       </StyledLabel>
       <StyledFileUploader
         callback={handleFileUpload}
-        variant="info"
-        msg="You can attach additional information as a PDF file. Important: the above description must reference the relevant parts of the file content."
+        variant={isDesktop ? "info" : undefined}
+        msg={`You can attach additional information as a PDF file. Important: the above description must reference the relevant parts of the file content.\n${getFileUploaderMsg(Roles.Policy, roleRestrictions)}`}
       />
 
       <NavigationButtons prevRoute="/resolver/notable-persons" nextRoute="/resolver/preview" />
diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts
index 0bd973663..9cc7a9bcc 100644
--- a/web/src/utils/index.ts
+++ b/web/src/utils/index.ts
@@ -1,3 +1,5 @@
+import { Roles } from "@kleros/kleros-app";
+
 import { DEFAULT_CHAIN, getChain } from "consts/chains";
 
 export const isUndefined = (maybeObject: any): maybeObject is undefined | null =>
@@ -10,3 +12,20 @@ export const isEmpty = (str: string): boolean => str.trim() === "";
 
 export const getTxnExplorerLink = (hash: string) =>
   `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/tx/${hash}`;
+
+type Role = {
+  name: string;
+  restriction: {
+    maxSize: number;
+    allowedMimeTypes: string[];
+  };
+};
+
+export const getFileUploaderMsg = (role: Roles, roleRestrictions?: Role[]) => {
+  if (!roleRestrictions) return;
+  const restrictions = roleRestrictions.find((supportedRoles) => Roles[supportedRoles.name] === role);
+
+  if (!restrictions) return;
+
+  return `Allowed file types: [${restrictions.restriction.allowedMimeTypes.map((type) => type.split("/")?.[1] ?? null).join(", ")}], Max allowed size: ${(restrictions.restriction.maxSize / (1024 * 1024)).toFixed(2)} MB.`;
+};

From c813e76fa4b6c47d281742ca9ac45c80e9163046 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Thu, 23 Jan 2025 19:15:05 +0530
Subject: [PATCH 2/3] refactor(web): update-message-creator-function

---
 web/src/utils/index.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts
index 9cc7a9bcc..df47d9aac 100644
--- a/web/src/utils/index.ts
+++ b/web/src/utils/index.ts
@@ -27,5 +27,12 @@ export const getFileUploaderMsg = (role: Roles, roleRestrictions?: Role[]) => {
 
   if (!restrictions) return;
 
-  return `Allowed file types: [${restrictions.restriction.allowedMimeTypes.map((type) => type.split("/")?.[1] ?? null).join(", ")}], Max allowed size: ${(restrictions.restriction.maxSize / (1024 * 1024)).toFixed(2)} MB.`;
+  return `Allowed file types: [ ${restrictions.restriction.allowedMimeTypes
+    .map((type) => {
+      const [prefix, suffix] = type.split("/");
+      if (!suffix) return prefix ?? null;
+
+      return suffix === "*" ? prefix : suffix;
+    })
+    .join(", ")} ], Max allowed size: ${(restrictions.restriction.maxSize / (1024 * 1024)).toFixed(2)} MB.`;
 };

From 73b1551eb9f01a71e52a6290c6ffa46b3a3e4cd0 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Fri, 24 Jan 2025 14:13:44 +0530
Subject: [PATCH 3/3] refactor(web): feedback-addressing

---
 web/src/pages/Resolver/Policy/index.tsx | 2 +-
 web/src/utils/index.ts                  | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/Resolver/Policy/index.tsx b/web/src/pages/Resolver/Policy/index.tsx
index 584a94279..66c8b5888 100644
--- a/web/src/pages/Resolver/Policy/index.tsx
+++ b/web/src/pages/Resolver/Policy/index.tsx
@@ -86,7 +86,7 @@ const Policy: React.FC = () => {
       <StyledFileUploader
         callback={handleFileUpload}
         variant={isDesktop ? "info" : undefined}
-        msg={`You can attach additional information as a PDF file. Important: the above description must reference the relevant parts of the file content.\n${getFileUploaderMsg(Roles.Policy, roleRestrictions)}`}
+        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)}`}
       />
 
       <NavigationButtons prevRoute="/resolver/notable-persons" nextRoute="/resolver/preview" />
diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts
index df47d9aac..dcb9872f4 100644
--- a/web/src/utils/index.ts
+++ b/web/src/utils/index.ts
@@ -26,13 +26,14 @@ export const getFileUploaderMsg = (role: Roles, roleRestrictions?: Role[]) => {
   const restrictions = roleRestrictions.find((supportedRoles) => Roles[supportedRoles.name] === role);
 
   if (!restrictions) return;
-
-  return `Allowed file types: [ ${restrictions.restriction.allowedMimeTypes
+  const typesString = restrictions.restriction.allowedMimeTypes
     .map((type) => {
       const [prefix, suffix] = type.split("/");
       if (!suffix) return prefix ?? null;
 
       return suffix === "*" ? prefix : suffix;
     })
-    .join(", ")} ], Max allowed size: ${(restrictions.restriction.maxSize / (1024 * 1024)).toFixed(2)} MB.`;
+    .join(", ");
+
+  return `Allowed file types: [${typesString}], Max allowed size: ${(restrictions.restriction.maxSize / (1024 * 1024)).toFixed(2)} MB.`;
 };