feat: enhance error notifications when uploading malformed or malware…

…d file (hl-1267) (#2973) * feat(shared): add parameter to configure auto dismiss time * feat(applicant): more detailed notification when uploading an unsupported file * chore: keep compose.benefit-backend.yml clear from frontends frontends are now run on system level
City-of-Helsinki · May 7, 2024 · cd61403 · cd61403
1 parent d9d188f
commit cd61403
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 52 deletions.
diff --git a/backend/benefit/applications/api/v1/serializers/attachment.py b/backend/benefit/applications/api/v1/serializers/attachment.py
@@ -139,5 +139,8 @@ def _scan_with_clamav(self, file):
             log.error(f"File '{fie.file_name}' infected, viruses: {fie.viruses}")
             translation_text = _("File is infected with")
             raise serializers.ValidationError(
-                f'{translation_text} {", ".join(fie.viruses)}'
+                {
+                    "non_field_errors": f'{translation_text} {", ".join(fie.viruses)}',
+                    "key": "malware",
+                },
             )
diff --git a/compose.benefit-backend.yml b/compose.benefit-backend.yml
@@ -34,49 +34,11 @@ services:
     depends_on:
       - postgres
     container_name: benefit-backend
-
-  applicant:
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile-localdevelopment
-      target: development
-      args:
-        PORT: 3000
-        PROJECT: benefit
-        FOLDER: applicant
-    platform: linux/amd64
-    volumes:
-      - ./frontend:/app
-      - /app/node_modules
-      - /app/.next
-    env_file:
-      - .env.benefit-applicant
-    container_name: benefit-applicant
-
-  handler:
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile-localdevelopment
-      target: development
-      args:
-        PORT: 3100
-        PROJECT: benefit
-        FOLDER: handler
-    platform: linux/amd64
-    volumes:
-      - ./frontend:/app
-      - /app/node_modules
-      - /app/.next
-    env_file:
-      - .env.benefit-handler
-    container_name: benefit-handler
 
   local-proxy:
     depends_on:
       - postgres
       - backend
-      - applicant
-      - handler
     build:
       context: ./localdevelopment/benefit/nginx
     container_name: benefit-local-proxy
@@ -95,7 +57,7 @@ services:
     container_name: benefit-mailhog
     networks:
       - default
-  
+
   clamav:
     image: clamav/clamav:latest
     container_name: benefit-clamav
@@ -122,7 +84,15 @@ services:
       - "8080:8080"
     depends_on:
       - clamav
-    command: ["/usr/wait-for-it.sh", "clamav:3310", "--timeout=30", "--", "node", "src/app.js"]
+    command:
+      [
+        "/usr/wait-for-it.sh",
+        "clamav:3310",
+        "--timeout=30",
+        "--",
+        "node",
+        "src/app.js",
+      ]
     volumes:
       - ./backend/docker/arm/tools/wait-for-it.sh:/usr/wait-for-it.sh
     networks:

diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json
@@ -710,7 +710,8 @@
     "attachments": {
       "title": "Error occurred",
       "tooBig": "The attachemnt size is too big.",
-      "fileType": "The attachment file type is not allowed."
+      "fileType": "The attachment file type is not allowed.",
+      "malformed": "The file you uploaded is not supported. Please check that the file format is correct and that its size does not exceed the maximum allowed size."
     },
     "notFound": {
       "title": "Sorry, the page you were looking for was not found.",

diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json
@@ -710,7 +710,8 @@
     "attachments": {
       "title": "Tapahtui virhe",
       "tooBig": "Liite on liian suuri.",
-      "fileType": "Liite on väärässä muodossa."
+      "fileType": "Liite on väärässä muodossa.",
+      "malformed": "Lataamasi tiedosto on viallinen. Tarkistathan että tiedostomuoto on oikea eikä sen koko ylitä sallittua maksimikokoa."
     },
     "notFound": {
       "title": "Pahoittelut, sivua ei löytynyt.",

diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json
@@ -710,7 +710,8 @@
     "attachments": {
       "title": "Ett fel uppstod",
       "tooBig": "Storleken på bilagan är för stor.",
-      "fileType": "Typen av bilaga är inte tillåten."
+      "fileType": "Typen av bilaga är inte tillåten.",
+      "malformed": "Bilagan stöds inte. Se till att filformatet är korrekt och att dess storlek inte överstiger den maximalt tillåtna storleken."
     },
     "notFound": {
       "title": "Tyvärr hittas inte sidan du sökte.",

diff --git a/...src/components/applications/forms/application/step3/attachmentsList/useAttachmentsList.ts b/...src/components/applications/forms/application/step3/attachmentsList/useAttachmentsList.ts
@@ -38,22 +38,46 @@ const useAttachmentsList = (): ExtendedComponentProps => {
     mutate: uploadAttachment,
     isLoading: isUploading,
     isError: isUploadingError,
-    error: uploadError
+    error: uploadError,
   } = useUploadAttachmentQuery();
 
-  const [error, setError] = React.useState<ErrorResponse | null>( uploadError);
-  
+  const [error, setError] = React.useState<ErrorResponse | null>(uploadError);
+
   React.useEffect(() => {
     if (isUploadingError) {
       setError(uploadError);
     }
   }, [isUploadingError, uploadError]);
 
   React.useEffect(() => {
-    if (error?.response?.status === 400) {
-      showErrorToast(t(`common:malware.errorTitle`), error?.response?.data?.non_field_errors[0]);
+    if (error && !error?.response?.data) {
+      showErrorToast(
+        t('common:error.generic.label'),
+        t('common:error.generic.text')
+      );
+      return;
     }
-    else if (isRemovingError) {
+    if (error?.response?.status >= 400) {
+      const backendValidationError =
+        error?.response?.data?.non_field_errors?.at(0);
+      const malwareError =
+        error?.response?.data?.key?.includes('malware') || false;
+      if (backendValidationError && malwareError) {
+        showErrorToast(
+          t(`common:error.malware.errorTitle`),
+          error?.response?.data?.non_field_errors[0],
+          320_000
+        );
+      } else if (backendValidationError) {
+        showErrorToast(
+          t(`common:error.generic.label`),
+          `${error?.response?.data?.non_field_errors[0]}. ${t(
+            'common:error.attachments.malformed'
+          )}`,
+          30_000
+        );
+      }
+    } else if (isRemovingError) {
       showErrorToast(
         t(`common:delete.errorTitle`),
         t(`common:delete.errorMessage`)

diff --git a/frontend/shared/src/components/toast/show-error-toast.ts b/frontend/shared/src/components/toast/show-error-toast.ts
@@ -1,8 +1,12 @@
 import Toast from 'shared/components/toast/Toast';
 
-const showErrorToast = (title: string, message: string): void =>
+const showErrorToast = (
+  title: string,
+  message: string,
+  autoDismissTime = 5000
+): void =>
   void Toast({
-    autoDismissTime: 5000,
+    autoDismissTime,
     type: 'error',
     labelText: title,
     text: message,