Enhance UploadModal with error handling and new icon

- Added error message display in UploadModal for better user feedback.
- Introduced faCircleXmark icon for error indication.
- Updated UploadModal.scss for new error message styling.
- Adjusted UploadModal.tsx to render error state correctly.
- Added new error messages in English, Spanish, and French for file size and type validation.
- Included a new image asset for upload error representation.

Author: jkestering-modus

docs/assets/images/Upload_error size.png

@@ -7,6 +7,7 @@ import {
   faBuilding,
   faCalendar,
   faCircleInfo,
+  faCircleXmark,
   faEnvelope,
   faHouse,
   faLink,
@@ -53,6 +54,7 @@ export type IconName =
   | 'building'
   | 'calendar'
   | 'circleInfo'
+  | 'circleXmark'
   | 'comment'
   | 'envelope'
   | 'fileLines'
@@ -98,6 +100,7 @@ const solidIcons: Record<IconName, IconProp> = {
   building: faBuilding,
   calendar: faCalendar,
   circleInfo: faCircleInfo,
+  circleXmark: faCircleXmark,
   comment: faComment,
   envelope: faEnvelope,
   fileLines: faSolidFileLines,
@@ -130,7 +133,8 @@ const regularIcons: Partial<Record<IconName, IconProp>> = {
   comment: faRegularComment,
   fileLines: faRegularFileLines,
   user: faRegularUser,
-  bookmark: faRegularBookmark
+  bookmark: faRegularBookmark,
+  circleXmark: faCircleXmark,
 };
 
 /**

frontend/src/common/components/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 .upload-modal {
-  --height: 60vh;
+  --height: 65vh;
   --width: 100%;
   --border-radius: 1rem;
   --background: var(--ion-color-primary);
@@ -11,10 +11,26 @@
     border-radius: 1rem;
     overflow: hidden;
   }
+
+  &__error-message {
+    border: 1px solid var(--ion-color-danger);
+    border-radius: 0.5rem;
+    --background: rgba(var(--ion-color-danger-rgb), 0.2);
+    color: white;
+    width: 100%;
+
+    ion-label {
+      font-size: 0.875rem;
+    }
+  }
+
+  &__error-icon {
+    color: var(--ion-color-danger);
+  }
 
   @media (min-width: 768px) {
     --width: 28.125rem; // 450px
-    --height: 60vh; // Use viewport height instead of fixed pixels
+    --height: 65vh; // Use viewport height instead of fixed pixels
     --border-radius: 1rem; // Matching the image example
   }
 
@@ -55,7 +71,7 @@
     justify-content: center;
     flex: 1;
     text-align: center;
-    margin: 1rem;
+    margin: 0 1rem;
   }
 
   &__drop-area {
@@ -242,23 +258,7 @@
     text-align: center;
     margin: 1rem 0;
   }
-  
-  &__error-icon {
-    font-size: 4rem;
-    color: var(--ion-color-danger);
-  }
-  
-  &__error-message {
-    background-color: rgba(var(--ion-color-danger-rgb), 0.2);
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    color: white !important;
-    font-size: 0.875rem;
-    width: 100%;
-    max-width: 20rem;
-    margin: 0 auto 2rem !important;
-  }
-  
+
   &__close-btn, &__retry-btn {
     margin-top: 1rem;
     width: 100%;

frontend/src/common/components/Upload/UploadModal.scss

@@ -5,12 +5,16 @@ import {
   IonButton,
   IonIcon,
   IonProgressBar,
+  IonLabel,
+  IonItem
 } from '@ionic/react';
-import { closeOutline, cloudUploadOutline, alertCircleOutline, documentOutline, checkmarkOutline } from 'ionicons/icons';
+import { closeOutline, cloudUploadOutline, documentOutline, checkmarkOutline } from 'ionicons/icons';
 import { useTranslation } from 'react-i18next';
 import { UploadStatus, useFileUpload } from '../../hooks/useFileUpload';
 import { MedicalReport } from '../../models/medicalReport';
 import './UploadModal.scss';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleXmark } from '@fortawesome/free-regular-svg-icons';
 
 export interface UploadModalProps {
   isOpen: boolean;
@@ -103,6 +107,14 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
             {t('upload.imageSizeLimit')} / {t('upload.pdfSizeLimit')}
           </p>
         </div>
+        {error && 
+          <IonItem className='upload-modal__error-message'>
+            <div className='upload-modal__error-icon' slot='start'>
+              <FontAwesomeIcon icon={faCircleXmark} aria-hidden="true"/>
+            </div>
+            <IonLabel className="upload-modal__error-label ion-text-wrap">{error}</IonLabel>
+          </IonItem>
+        }
         <input
           type="file"
           ref={fileInputRef}
@@ -170,31 +182,6 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
     </div>
   );
 
-  const renderErrorState = () => (
-    <div className="upload-modal__error">
-      <IonIcon icon={alertCircleOutline} className="upload-modal__error-icon" />
-      <h2>{t('upload.uploadFailed')}</h2>
-      <p className="upload-modal__error-message">{error}</p>
-      <div className="upload-modal__buttons">
-        <IonButton 
-          expand="block" 
-          className="upload-modal__retry-btn"
-          onClick={reset}
-        >
-          {t('common.tryAgain')}
-        </IonButton>
-        <IonButton 
-          expand="block" 
-          fill="outline"
-          className="upload-modal__cancel-btn"
-          onClick={handleClose}
-        >
-          {t('common.cancel')}
-        </IonButton>
-      </div>
-    </div>
-  );
-
   const renderContent = () => {
     switch (status) {
       case UploadStatus.UPLOADING:
@@ -203,7 +190,7 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
       case UploadStatus.SUCCESS:
         return renderSuccessState();
       case UploadStatus.ERROR:
-        return renderErrorState();
+        return renderInitialState();
       case UploadStatus.IDLE:
       case UploadStatus.VALIDATING:
       default:

frontend/src/common/components/Upload/UploadModal.tsx

@@ -60,6 +60,10 @@ vi.mock('@ionic/react', () => ({
     <div data-testid={`ion-spinner-${name}`}>Loading...</div>,
   IonProgressBar: ({ value }: { value: number }) => 
     <div data-testid="ion-progress-bar" data-value={value}>Progress: {value * 100}%</div>,
+  IonItem: ({ children, className }: { children: React.ReactNode; className?: string }) =>
+    <div data-testid="ion-item" className={className}>{children}</div>,
+  IonLabel: ({ children, className }: { children: React.ReactNode; className?: string }) =>
+    <div data-testid="ion-label" className={className}>{children}</div>,
 }));
 
 // Mock the Ionicons
@@ -245,11 +249,8 @@ describe('UploadModal', () => {
     render(<UploadModal {...mockProps} />);
 
     // Check for error elements
-    expect(screen.getByText('upload.uploadFailed')).toBeInTheDocument();
     expect(screen.getByText('Something went wrong')).toBeInTheDocument();
-    expect(screen.getByText('common.tryAgain')).toBeInTheDocument();
-    expect(screen.getByText('common.cancel')).toBeInTheDocument();
-    expect(screen.getByTestId('ion-icon-error-icon')).toBeInTheDocument();
+    
   });
 
   test('opens the file picker when select file button is clicked', () => {
@@ -346,31 +347,6 @@ describe('UploadModal', () => {
     expect(cancelUploadMock).toHaveBeenCalled();
   });
 
-  test('calls reset when "Try Again" button is clicked in error state', () => {
-    const resetMock = vi.fn();
-    
-    (useFileUpload as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
-      file: null,
-      status: UploadStatus.ERROR,
-      progress: 0,
-      error: 'Something went wrong',
-      selectFile: vi.fn(),
-      uploadFile: vi.fn(),
-      reset: resetMock,
-      formatFileSize: vi.fn(),
-      cancelUpload: vi.fn(),
-    });
-    
-    render(<UploadModal {...mockProps} />);
-    
-    // Find and click the try again button
-    const tryAgainButton = screen.getByText('common.tryAgain');
-    fireEvent.click(tryAgainButton);
-    
-    // Check that reset was called
-    expect(resetMock).toHaveBeenCalled();
-  });
-  
   test('renders nothing when isOpen is false', () => {
     // Mock the hook before rendering the component
     (useFileUpload as unknown as ReturnType<typeof vi.fn>).mockReturnValue({

frontend/src/common/components/Upload/__tests__/UploadModal.test.tsx

@@ -23,8 +23,8 @@ class BedrockService {
   constructor() {
     // Check if we're in a test environment (Node.js environment with no window)
     this.isTestEnvironment = typeof window === 'undefined' || 
-                            process.env.NODE_ENV === 'test' || 
-                            !!process.env.VITEST;
+                            import.meta.env.MODE === 'test' || 
+                            import.meta.env.VITEST === 'true';
 
     // Only initialize the client in non-test environments or if explicitly required
     if (!this.isTestEnvironment) {

frontend/src/common/services/ai/bedrock.service.ts

@@ -44,7 +44,9 @@
     "error": {
       "noFile": "No file selected",
       "permissionDenied": "Permission denied",
-      "unknown": "An unknown error occurred"
+      "unknown": "An unknown error occurred",
+      "fileTooBig": "File is too large. Please upload a smaller file.",
+      "invalidType": "Invalid file type. Please upload a supported file type."
     }
   },
   "common": {

frontend/src/common/utils/i18n/resources/en/common.json

@@ -44,7 +44,9 @@
     "error": {
       "noFile": "Ningún archivo seleccionado",
       "permissionDenied": "Permiso denegado",
-      "unknown": "Se produjo un error desconocido"
+      "unknown": "Se produjo un error desconocido",
+      "fileTooBig": "El archivo es demasiado grande. Por favor, sube un archivo más pequeño.",
+      "invalidType": "Tipo de archivo no válido. Por favor, sube un tipo de archivo compatible."
     }
   },
   "common": {

frontend/src/common/utils/i18n/resources/es/common.json

@@ -44,7 +44,9 @@
     "error": {
       "noFile": "Aucun fichier sélectionné",
       "permissionDenied": "Permission refusée",
-      "unknown": "Une erreur inconnue s'est produite"
+      "unknown": "Une erreur inconnue s'est produite",
+      "fileTooBig": "Le fichier est trop volumineux. Veuillez télécharger un fichier plus petit.",
+      "invalidType": "Type de fichier non valide. Veuillez télécharger un type de fichier pris en charge."
     }
   },
   "common": {

frontend/src/common/utils/i18n/resources/fr/common.json

@@ -15,5 +15,12 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-primary-contrast-rgb: 255, 255, 255;
   --ion-color-primary-shade: #0049c7;
   --ion-color-primary-tint: #1a64e0;
+
+  --ion-color-danger: #FF9cb4;
+  --ion-color-danger-rgb: 233, 0, 0;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #c70000;
+  --ion-color-danger-tint: #e01a1a;
 
 }