From 1fa56d2af718b6e56e1a3bdbdc07e09cf7f7fa2d Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Mon, 20 Jan 2025 14:41:05 +0000
Subject: [PATCH] feat(ImportFlowDialog): improve error management

---
 packages/web/src/components/ImportFlowDialog/index.jsx | 7 +++++--
 packages/web/src/helpers/errors.js                     | 6 ++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/ImportFlowDialog/index.jsx b/packages/web/src/components/ImportFlowDialog/index.jsx
index c99f35b3..4fd7f884 100644
--- a/packages/web/src/components/ImportFlowDialog/index.jsx
+++ b/packages/web/src/components/ImportFlowDialog/index.jsx
@@ -16,6 +16,7 @@ import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import FileUploadInput from 'components/FileUploadInput';
 import useImportFlow from 'hooks/useImportFlow';
+import { getUnifiedErrorMessage } from 'helpers/errors';
 
 function ImportFlowDialog(props) {
   const { open = true, 'data-test': dataTest = 'import-flow-dialog' } = props;
@@ -99,7 +100,7 @@ function ImportFlowDialog(props) {
         </DialogContentText>
       </DialogContent>
 
-      <DialogActions>
+      <DialogActions sx={{ mb: 1 }}>
         <Button
           variant="outlined"
           onClick={onClose}
@@ -131,8 +132,10 @@ function ImportFlowDialog(props) {
         <Alert
           data-test="import-flow-dialog-generic-error-alert"
           severity="error"
+          sx={{ whiteSpace: 'pre-line' }}
         >
-          {error.data || formatMessage('genericError')}
+          {getUnifiedErrorMessage(error.response.data.errors) ||
+            formatMessage('genericError')}
         </Alert>
       )}
 
diff --git a/packages/web/src/helpers/errors.js b/packages/web/src/helpers/errors.js
index a872a8b6..856ee9d6 100644
--- a/packages/web/src/helpers/errors.js
+++ b/packages/web/src/helpers/errors.js
@@ -27,3 +27,9 @@ export const getFieldErrorMessage = ({ fieldName, error }) => {
 
   return '';
 };
+
+export const getUnifiedErrorMessage = (errors) => {
+  return Object.values(errors)
+    .flatMap((error) => error)
+    .join('\n\r');
+};