Merge pull request #1847 from kleros/feat/upload-restrictions-message

feat(web): file-restrictions-message

Author: alcercu

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;

web/src/pages/Resolver/Policy/index.tsx

@@ -1,18 +1,21 @@
 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";
 
 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 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" />

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,28 @@ 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;
+  const typesString = restrictions.restriction.allowedMimeTypes
+    .map((type) => {
+      const [prefix, suffix] = type.split("/");
+      if (!suffix) return prefix ?? null;
+
+      return suffix === "*" ? prefix : suffix;
+    })
+    .join(", ");
+
+  return `Allowed file types: [${typesString}], Max allowed size: ${(restrictions.restriction.maxSize / (1024 * 1024)).toFixed(2)} MB.`;
+};