merge fixes

frontend/src/App.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { RainbowThemeProvider } from './components/shared/RainbowThemeProvider';
 import { FileContextProvider } from './contexts/FileContext';
 import { FilesModalProvider } from './contexts/FilesModalContext';
-import FileUploadModal from './components/shared/FileUploadModal';
 import HomePage from './pages/HomePage';
 
 // Import global styles
@@ -15,7 +14,6 @@ export default function App() {
       <FileContextProvider enableUrlSync={true} enablePersistence={true}>
         <FilesModalProvider>
           <HomePage />
-          <FileUploadModal />
         </FilesModalProvider>
       </FileContextProvider>
     </RainbowThemeProvider>

frontend/src/components/shared/FileUploadModal.tsx

@@ -2,10 +2,16 @@ import React from 'react';
 import { Modal } from '@mantine/core';
 import FileUploadSelector from './FileUploadSelector';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
+import { Tool } from '../../types/tool';
 
-const FileUploadModal: React.FC = () => {
+interface FileUploadModalProps {
+  selectedTool?: Tool | null;
+}
+
+const FileUploadModal: React.FC<FileUploadModalProps> = ({ selectedTool }) => {
   const { isFilesModalOpen, closeFilesModal, onFileSelect, onFilesSelect } = useFilesModalContext();
 
+
   return (
     <Modal
       opened={isFilesModalOpen}
@@ -18,9 +24,10 @@ const FileUploadModal: React.FC = () => {
         title="Upload Files"
         subtitle="Choose files from storage or upload new files"
         onFileSelect={onFileSelect}
-        onFilesSelect={onFilesSelect}
+        onFilesSelect={onFilesSelect}         
-        accept={["application/pdf"]}
+        accept={["*/*"]}
-        supportedExtensions={["pdf"]}
+        supportedExtensions={selectedTool?.supportedFormats || ["pdf"]}
+        data-testid="file-upload-modal"
       />
     </Modal>
   );

frontend/src/components/shared/QuickAccessBar.tsx

@@ -276,6 +276,7 @@ const QuickAccessBar = ({
                       onClick={config.onClick}
                       style={getButtonStyle(config)}
                       className={isButtonActive(config) ? 'activeIconScale' : ''}
+                      data-testid={`${config.id}-button`}
                     >
                       <span className="iconContainer">
                         {config.icon}
@@ -313,6 +314,7 @@ const QuickAccessBar = ({
                     onClick={config.onClick}
                     style={getButtonStyle(config)}
                     className={isButtonActive(config) ? 'activeIconScale' : ''}
+                    data-testid={`${config.id}-button`}
                   >
                     <span className="iconContainer">
                       {config.icon}

frontend/src/components/tools/convert/ConvertSettings.tsx

@@ -198,7 +198,7 @@ const ConvertSettings = ({
         </Text>
         <GroupedFormatDropdown
           name="convert-from-dropdown"
-          data-testid="from-format-dropdown"
+          data-testid="convert-from-dropdown"
           value={parameters.fromExtension}
           placeholder={t("convert.sourceFormatPlaceholder", "Source format")}
           options={enhancedFromOptions}
@@ -236,7 +236,7 @@ const ConvertSettings = ({
         ) : (
           <GroupedFormatDropdown
             name="convert-to-dropdown"
-            data-testid="to-format-dropdown"
+            data-testid="convert-to-dropdown"
             value={parameters.toExtension}
             placeholder={t("convert.targetFormatPlaceholder", "Target format")}
             options={enhancedToOptions}

frontend/src/pages/HomePage.tsx

@@ -18,6 +18,7 @@ import Viewer from "../components/viewer/Viewer";
 import ToolRenderer from "../components/tools/ToolRenderer";
 import QuickAccessBar from "../components/shared/QuickAccessBar";
 import LandingPage from "../components/shared/LandingPage";
+import FileUploadModal from "../components/shared/FileUploadModal";
 
 function HomePageContent() {
   const { t } = useTranslation();
@@ -35,6 +36,7 @@ function HomePageContent() {
     selectTool,
     clearToolSelection,
   } = useToolManagement();
+
   const [sidebarsVisible, setSidebarsVisible] = useState(true);
   const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
   const [readerMode, setReaderMode] = useState(false);
@@ -266,6 +268,9 @@ function HomePageContent() {
             )}
           </Box>
       </Box>
+
+      {/* Global Modals */}
+      <FileUploadModal selectedTool={selectedTool} />
     </Group>
   );
 }

frontend/src/tests/convert/ConvertE2E.spec.ts

@@ -127,6 +127,27 @@ const getExpectedExtension = (toFormat: string): string => {
   return extensionMap[toFormat] || '.pdf';
 };
 
+/**
+ * Helper function to upload files through the modal system
+ */
+async function uploadFileViaModal(page: Page, filePath: string) {
+  // Click the Files button in the QuickAccessBar to open the modal
+  await page.click('[data-testid="files-button"]');
+  
+  // Wait for the modal to open
+  await page.waitForSelector('.mantine-Modal-overlay', { state: 'visible' }, { timeout: 5000 });
+  //await page.waitForSelector('[data-testid="file-upload-modal"]', { timeout: 5000 });
+  
+  // Upload the file through the modal's file input
+  await page.setInputFiles('input[type="file"]', filePath);
+  
+  // Wait for the file to be processed and the modal to close
+  await page.waitForSelector('[data-testid="file-upload-modal"]', { state: 'hidden' });
+  
+  // Wait for the file thumbnail to appear in the main interface
+  await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+}
+
 /**
  * Generic test function for any conversion
  */
@@ -288,8 +309,8 @@ test.describe('Convert Tool E2E Tests', () => {
     // Wait for the page to load
     await page.waitForLoadState('networkidle');
     
-    // Wait for the file upload area to appear (shown when no active files)
+    // Wait for the QuickAccessBar to appear
-    await page.waitForSelector('[data-testid="file-dropzone"]', { timeout: 10000 });
+    await page.waitForSelector('[data-testid="files-button"]', { timeout: 10000 });
   });
 
   test.describe('Dynamic Conversion Tests', () => {
@@ -302,8 +323,7 @@ test.describe('Convert Tool E2E Tests', () => {
       test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
       
       const testFile = getTestFileForFormat(conversion.fromFormat);
-      await page.setInputFiles('input[type="file"]', testFile);
+      await uploadFileViaModal(page, testFile);
-      await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
       
       await testConversion(page, conversion);
     });
@@ -314,8 +334,7 @@ test.describe('Convert Tool E2E Tests', () => {
       test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
       
       const testFile = getTestFileForFormat(conversion.fromFormat);
-      await page.setInputFiles('input[type="file"]', testFile);
+      await uploadFileViaModal(page, testFile);
-      await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
       
       await testConversion(page, conversion);
     });
@@ -326,8 +345,7 @@ test.describe('Convert Tool E2E Tests', () => {
       test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
       
       const testFile = getTestFileForFormat(conversion.fromFormat);
-      await page.setInputFiles('input[type="file"]', testFile);
+      await uploadFileViaModal(page, testFile);
-      await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
       
       await testConversion(page, conversion);
     });
@@ -338,8 +356,7 @@ test.describe('Convert Tool E2E Tests', () => {
       test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
       
       const testFile = getTestFileForFormat(conversion.fromFormat);
-      await page.setInputFiles('input[type="file"]', testFile);
+      await uploadFileViaModal(page, testFile);
-      await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
       
       await testConversion(page, conversion);
     });
@@ -350,8 +367,7 @@ test.describe('Convert Tool E2E Tests', () => {
       test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
       
       const testFile = getTestFileForFormat(conversion.fromFormat);
-      await page.setInputFiles('input[type="file"]', testFile);
+      await uploadFileViaModal(page, testFile);
-      await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
       
       await testConversion(page, conversion);
     });
@@ -362,8 +378,7 @@ test.describe('Convert Tool E2E Tests', () => {
       test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
       
       const testFile = getTestFileForFormat(conversion.fromFormat);
-      await page.setInputFiles('input[type="file"]', testFile);
+      await uploadFileViaModal(page, testFile);
-      await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
       
       await testConversion(page, conversion);
     });
@@ -374,8 +389,7 @@ test.describe('Convert Tool E2E Tests', () => {
       test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
       
       const testFile = getTestFileForFormat(conversion.fromFormat);
-      await page.setInputFiles('input[type="file"]', testFile);
+      await uploadFileViaModal(page, testFile);
-      await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
       
       await testConversion(page, conversion);
     });
@@ -386,8 +400,7 @@ test.describe('Convert Tool E2E Tests', () => {
       test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
       
       const testFile = getTestFileForFormat(conversion.fromFormat);
-      await page.setInputFiles('input[type="file"]', testFile);
+      await uploadFileViaModal(page, testFile);
-      await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
       
       await testConversion(page, conversion);
     });
@@ -398,8 +411,7 @@ test.describe('Convert Tool E2E Tests', () => {
       test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
       
       const testFile = getTestFileForFormat(conversion.fromFormat);
-      await page.setInputFiles('input[type="file"]', testFile);
+      await uploadFileViaModal(page, testFile);
-      await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
       
       await testConversion(page, conversion);
     });
@@ -410,8 +422,7 @@ test.describe('Convert Tool E2E Tests', () => {
     // Test that disabled conversions don't appear in dropdowns when they shouldn't
     test('should not show conversion button when no valid conversions available', async ({ page }) => {
       // This test ensures the convert button is disabled when no valid conversion is possible
-      await page.setInputFiles('input[type="file"]', TEST_FILES.pdf);
+      await uploadFileViaModal(page, TEST_FILES.pdf);
-      await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
       
       // Click the Convert tool button
       await page.click('[data-testid="tool-convert"]');