Merge branch '291-displaying-a-prompt-message-when-uploading-wrong-format-of-overlay' into 'main'

Resolve "Displaying a prompt message when uploading wrong format of overlay"

See merge request !245

CHANGELOG

@@ -2,6 +2,8 @@ minerva-front (18.0.0~beta.4) stable; urgency=medium
   * Bugfix: source map for js was missing (#292)
   * Bugfix: sometimes project don't have link to disease or organism, this
     crashed listing of projects after log in (#290)
+  * Bugfix: show proper message when there is a problem with overlay data
+    instead error report form (#291)
 
  -- Piotr Gawron <piotr.gawron@uni.lu>  Wed, 02 Oct 2024 13:00:00 +0200
 

src/redux/overlays/overlays.thunks.ts

@@ -15,6 +15,7 @@ import { showToast } from '@/utils/showToast';
 import { ThunkConfig } from '@/types/store';
 import { BASE_API_URL } from '@/constants';
 import { getError } from '@/utils/error-report/getError';
+import axios from 'axios';
 import { apiPath } from '../apiPath';
 import {
   CHUNK_SIZE,
@@ -221,7 +222,12 @@ export const addOverlay = createAsyncThunk<undefined, AddOverlayArgs, ThunkConfi
 
       showToast({ type: 'success', message: USER_OVERLAY_ADD_SUCCESS_MESSAGE });
     } catch (error) {
-      return Promise.reject(getError({ error, prefix: USER_OVERLAY_ADD_ERROR_PREFIX }));
+      if (axios.isAxiosError(error) && error.code === 'ERR_BAD_REQUEST') {
+        const data = error.response?.data;
+        showToast({ type: 'error', message: data.reason, duration: 120000 });
+      } else {
+        return Promise.reject(getError({ error, prefix: USER_OVERLAY_ADD_ERROR_PREFIX }));
+      }
     }
   },
 );

src/shared/Toast/Toast.component.tsx

@@ -16,7 +16,7 @@ export const Toast = ({ type, message, onDismiss }: ToastArgs): React.ReactNode
   >
     <p
       className={twMerge(
-        'text-base font-bold ',
+        'h-full overflow-y-auto text-base font-bold',
         type === 'error' ? 'text-red-500' : 'text-green-500',
       )}
     >

src/utils/showToast.tsx

 import { toast } from 'sonner';
 import { Toast } from '@/shared/Toast';
 
+const DEFAULT_DURATION_MS = 5000;
+
 type ShowToastArgs = {
   type: 'success' | 'error';
   message: string;
+  duration?: number;
 };
 
 export const showToast = (args: ShowToastArgs): void => {
-  toast.custom(t => (
-    <Toast message={args.message} onDismiss={() => toast.dismiss(t)} type={args.type} />
-  ));
+  toast.custom(
+    t => <Toast message={args.message} onDismiss={() => toast.dismiss(t)} type={args.type} />,
+    { duration: args.duration ? args.duration : DEFAULT_DURATION_MS },
+  );
 };