diff --git a/frontend/package.json b/frontend/package.json index 6bacd4017..eb1b8ed39 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -53,16 +53,18 @@ }, "scripts": { "predev": "npm run generate-icons", - "dev": "npx tsc --noEmit && vite", + "dev": "npm run typecheck && vite", "prebuild": "npm run generate-icons", - "lint": "npx eslint", - "build": "npx tsc --noEmit && vite build", + "lint": "eslint", + "build": "npm run typecheck && vite build", "preview": "vite preview", "typecheck": "tsc --noEmit", + "check": "npm run typecheck && npm run lint && npm run test:run", "generate-licenses": "node scripts/generate-licenses.js", "generate-icons": "node scripts/generate-icons.js", "generate-icons:verbose": "node scripts/generate-icons.js --verbose", "test": "vitest", + "test:run": "vitest run", "test:watch": "vitest --watch", "test:coverage": "vitest --coverage", "test:e2e": "playwright test", diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index b8eb7e4c9..d82b23376 100644 --- a/frontend/public/locales/en-GB/translation.json +++ b/frontend/public/locales/en-GB/translation.json @@ -51,11 +51,11 @@ "filesSelected": "{{count}} files selected", "files": { "title": "Files", - "placeholder": "Select a PDF file in the main view to get started", "upload": "Upload", "uploadFiles": "Upload Files", "addFiles": "Add files", - "selectFromWorkbench": "Select files from the workbench or " + "selectFromWorkbench": "Select files from the workbench or ", + "selectMultipleFromWorkbench": "Select at least {{count}} files from the workbench or " }, "noFavourites": "No favourites added", "downloadComplete": "Download Complete", @@ -498,13 +498,9 @@ "title": "Show Javascript", "desc": "Searches and displays any JS injected into a PDF" }, - "autoRedact": { - "title": "Auto Redact", - "desc": "Auto Redacts(Blacks out) text in a PDF based on input text" - }, "redact": { - "title": "Manual Redaction", - "desc": "Redacts a PDF based on selected text, drawn shapes and/or selected page(s)" + "title": "Redact", + "desc": "Redacts (blacks out) a PDF based on selected text, drawn shapes and/or selected page(s)" }, "overlay-pdfs": { "title": "Overlay PDFs", @@ -648,11 +644,29 @@ "merge": { "tags": "merge,Page operations,Back end,server side", "title": "Merge", - "header": "Merge multiple PDFs (2+)", - "sortByName": "Sort by name", - "sortByDate": "Sort by date", - "removeCertSign": "Remove digital signature in the merged file?", - "submit": "Merge" + "removeDigitalSignature": "Remove digital signature in the merged file?", + "generateTableOfContents": "Generate table of contents in the merged file?", + "removeDigitalSignature.tooltip": { + "title": "Remove Digital Signature", + "description": "Digital signatures will be invalidated when merging files. Check this to remove them from the final merged PDF." + }, + "generateTableOfContents.tooltip": { + "title": "Generate Table of Contents", + "description": "Automatically creates a clickable table of contents in the merged PDF based on the original file names and page numbers." + }, + "submit": "Merge", + "sortBy": { + "description": "Files will be merged in the order they're selected. Drag to reorder or sort below.", + "label": "Sort By", + "filename": "File Name", + "dateModified": "Date Modified", + "ascending": "Ascending", + "descending": "Descending", + "sort": "Sort" + }, + "error": { + "failed": "An error occurred while merging the PDFs." + } }, "split": { "tags": "Page operations,divide,Multi Page,cut,server side", @@ -669,7 +683,76 @@ "8": "Document #6: Page 10" }, "splitPages": "Enter pages to split on:", - "submit": "Split" + "submit": "Split", + "error": { + "failed": "An error occurred while splitting the PDF." + }, + "method": { + "label": "Choose split method", + "placeholder": "Select how to split the PDF" + }, + "methods": { + "byPages": "Split at Page Numbers", + "bySections": "Split by Sections", + "bySize": "Split by File Size", + "byPageCount": "Split by Page Count", + "byDocCount": "Split by Document Count", + "byChapters": "Split by Chapters" + }, + "value": { + "fileSize": { + "label": "File Size", + "placeholder": "e.g. 10MB, 500KB" + }, + "pageCount": { + "label": "Pages per File", + "placeholder": "e.g. 5, 10" + }, + "docCount": { + "label": "Number of Files", + "placeholder": "e.g. 3, 5" + } + }, + "tooltip": { + "header": { + "title": "Split Methods Overview" + }, + "byPages": { + "title": "Split at Page Numbers", + "text": "Split your PDF at specific page numbers. Using 'n' splits after page n. Using 'n-m' splits before page n and after page m.", + "bullet1": "Single split points: 3,7 (splits after pages 3 and 7)", + "bullet2": "Range split points: 3-8 (splits before page 3 and after page 8)", + "bullet3": "Mixed: 2,5-10,15 (splits after page 2, before page 5, after page 10, and after page 15)" + }, + "bySections": { + "title": "Split by Grid Sections", + "text": "Divide each page into a grid of sections. Useful for splitting documents with multiple columns or extracting specific areas.", + "bullet1": "Horizontal: Number of rows to create", + "bullet2": "Vertical: Number of columns to create", + "bullet3": "Merge: Combine all sections into one PDF" + }, + "bySize": { + "title": "Split by File Size", + "text": "Create multiple PDFs that don't exceed a specified file size. Ideal for file size limitations or email attachments.", + "bullet1": "Use MB for larger files (e.g., 10MB)", + "bullet2": "Use KB for smaller files (e.g., 500KB)", + "bullet3": "System will split at page boundaries" + }, + "byCount": { + "title": "Split by Count", + "text": "Create multiple PDFs with a specific number of pages or documents each.", + "bullet1": "Page Count: Fixed number of pages per file", + "bullet2": "Document Count: Fixed number of output files", + "bullet3": "Useful for batch processing workflows" + }, + "byChapters": { + "title": "Split by Chapters", + "text": "Use PDF bookmarks to automatically split at chapter boundaries. Requires PDFs with bookmark structure.", + "bullet1": "Bookmark Level: Which level to split on (1=top level)", + "bullet2": "Include Metadata: Preserve document properties", + "bullet3": "Allow Duplicates: Handle repeated bookmark names" + } + } }, "rotate": { "tags": "server side", @@ -1454,7 +1537,6 @@ "submit": "Submit" }, "scalePages": { - "tags": "resize,modify,dimension,adapt", "title": "Adjust page-scale", "header": "Adjust page-scale", "pageSize": "Size of a page of the document.", @@ -1462,6 +1544,44 @@ "scaleFactor": "Zoom level (crop) of a page.", "submit": "Submit" }, + "adjustPageScale": { + "tags": "resize,modify,dimension,adapt", + "title": "Adjust Page Scale", + "header": "Adjust Page Scale", + "scaleFactor": { + "label": "Scale Factor" + }, + "pageSize": { + "label": "Target Page Size", + "keep": "Keep Original Size", + "letter": "Letter", + "legal": "Legal" + }, + "submit": "Adjust Page Scale", + "error": { + "failed": "An error occurred while adjusting the page scale." + }, + "tooltip": { + "header": { + "title": "Page Scale Settings Overview" + }, + "description": { + "title": "Description", + "text": "Adjust the size of PDF content and change the page dimensions." + }, + "scaleFactor": { + "title": "Scale Factor", + "text": "Controls how large or small the content appears on the page. Content is scaled and centred - if scaled content is larger than the page size, it may be cropped.", + "bullet1": "1.0 = Original size", + "bullet2": "0.5 = Half size (50% smaller)", + "bullet3": "2.0 = Double size (200% larger, may crop)" + }, + "pageSize": { + "title": "Target Page Size", + "text": "Sets the dimensions of the output PDF pages. 'Keep Original Size' maintains current dimensions, whilst other options resize to standard paper sizes." + } + } + }, "add-page-numbers": { "tags": "paginate,label,organize,index" }, @@ -1583,50 +1703,123 @@ "downloadJS": "Download Javascript", "submit": "Show" }, - "autoRedact": { - "tags": "Redact,Hide,black out,black,marker,hidden", - "title": "Auto Redact", - "header": "Auto Redact", - "colorLabel": "Colour", - "textsToRedactLabel": "Text to Redact (line-separated)", - "textsToRedactPlaceholder": "e.g. \\nConfidential \\nTop-Secret", - "useRegexLabel": "Use Regex", - "wholeWordSearchLabel": "Whole Word Search", - "customPaddingLabel": "Custom Extra Padding", - "convertPDFToImageLabel": "Convert PDF to PDF-Image (Used to remove text behind the box)", - "submitButton": "Submit" - }, "redact": { - "tags": "Redact,Hide,black out,black,marker,hidden,manual", - "title": "Manual Redaction", - "header": "Manual Redaction", + "tags": "Redact,Hide,black out,black,marker,hidden,auto redact,manual redact", + "title": "Redact", "submit": "Redact", - "textBasedRedaction": "Text based Redaction", - "pageBasedRedaction": "Page-based Redaction", - "convertPDFToImageLabel": "Convert PDF to PDF-Image (Used to remove text behind the box)", - "pageRedactionNumbers": { - "title": "Pages", - "placeholder": "(e.g. 1,2,8 or 4,7,12-16 or 2n-1)" + "error": { + "failed": "An error occurred while redacting the PDF." }, - "redactionColor": { - "title": "Redaction Color" + "modeSelector": { + "title": "Redaction Method", + "mode": "Mode", + "automatic": "Automatic", + "automaticDesc": "Redact text based on search terms", + "manual": "Manual", + "manualDesc": "Click and drag to redact specific areas", + "manualComingSoon": "Manual redaction coming soon" }, - "export": "Export", - "upload": "Upload", - "boxRedaction": "Box draw redaction", - "zoom": "Zoom", - "zoomIn": "Zoom in", - "zoomOut": "Zoom out", - "nextPage": "Next Page", - "previousPage": "Previous Page", - "toggleSidebar": "Toggle Sidebar", - "showThumbnails": "Show Thumbnails", - "showDocumentOutline": "Show Document Outline (double-click to expand/collapse all items)", - "showAttatchments": "Show Attachments", - "showLayers": "Show Layers (double-click to reset all layers to the default state)", - "colourPicker": "Colour Picker", - "findCurrentOutlineItem": "Find current outline item", - "applyChanges": "Apply Changes" + "auto": { + "header": "Auto Redact", + "settings": { + "title": "Redaction Settings", + "advancedTitle": "Advanced" + }, + "colorLabel": "Box Colour", + "wordsToRedact": { + "title": "Words to Redact", + "placeholder": "Enter a word", + "add": "Add", + "examples": "Examples: Confidential, Top-Secret" + }, + "useRegexLabel": "Use Regex", + "wholeWordSearchLabel": "Whole Word Search", + "customPaddingLabel": "Custom Extra Padding", + "convertPDFToImageLabel": "Convert PDF to PDF-Image" + }, + "tooltip": { + "mode": { + "header": { + "title": "Redaction Method" + }, + "automatic": { + "title": "Automatic Redaction", + "text": "Automatically finds and redacts specified text throughout the document. Perfect for removing consistent sensitive information like names, addresses, or confidential markers." + }, + "manual": { + "title": "Manual Redaction", + "text": "Click and drag to manually select specific areas to redact. Gives you precise control over what gets redacted. (Coming soon)" + } + }, + "words": { + "header": { + "title": "Words to Redact" + }, + "description": { + "title": "Text Matching", + "text": "Enter words or phrases to find and redact in your document. Each word will be searched for separately." + }, + "bullet1": "Add one word at a time", + "bullet2": "Press Enter or click 'Add Another' to add", + "bullet3": "Click × to remove words", + "examples": { + "title": "Common Examples", + "text": "Typical words to redact include: bank details, email addresses, or specific names." + } + }, + "advanced": { + "header": { + "title": "Advanced Redaction Settings" + }, + "color": { + "title": "Box Colour & Padding", + "text": "Customise the appearance of redaction boxes. Black is standard, but you can choose any colour. Padding adds extra space around the found text." + }, + "regex": { + "title": "Use Regex", + "text": "Enable regular expressions for advanced pattern matching. Useful for finding phone numbers, emails, or complex patterns.", + "bullet1": "Example: \\d{4}-\\d{2}-\\d{2} to match any dates in YYYY-MM-DD format", + "bullet2": "Use with caution - test thoroughly" + }, + "wholeWord": { + "title": "Whole Word Search", + "text": "Only match complete words, not partial matches. 'John' won't match 'Johnson' when enabled." + }, + "convert": { + "title": "Convert to PDF-Image", + "text": "Converts the PDF to an image-based PDF after redaction. This ensures text behind redaction boxes is completely removed and unrecoverable." + } + } + }, + "manual": { + "header": "Manual Redaction", + "textBasedRedaction": "Text-based Redaction", + "pageBasedRedaction": "Page-based Redaction", + "convertPDFToImageLabel": "Convert PDF to PDF-Image (Used to remove text behind the box)", + "pageRedactionNumbers": { + "title": "Pages", + "placeholder": "(e.g. 1,2,8 or 4,7,12-16 or 2n-1)" + }, + "redactionColor": { + "title": "Redaction Colour" + }, + "export": "Export", + "upload": "Upload", + "boxRedaction": "Box draw redaction", + "zoom": "Zoom", + "zoomIn": "Zoom in", + "zoomOut": "Zoom out", + "nextPage": "Next Page", + "previousPage": "Previous Page", + "toggleSidebar": "Toggle Sidebar", + "showThumbnails": "Show Thumbnails", + "showDocumentOutline": "Show Document Outline (double-click to expand/collapse all items)", + "showAttachments": "Show Attachments", + "showLayers": "Show Layers (double-click to reset all layers to the default state)", + "colourPicker": "Colour Picker", + "findCurrentOutlineItem": "Find current outline item", + "applyChanges": "Apply Changes" + } }, "tableExtraxt": { "tags": "CSV,Table Extraction,extract,convert" @@ -1837,6 +2030,11 @@ "title": "Compress", "desc": "Compress PDFs to reduce their file size.", "header": "Compress PDF", + "method": { + "title": "Compression Method", + "quality": "Quality", + "filesize": "File Size" + }, "credit": "This service uses qpdf for PDF Compress/Optimisation.", "grayscale": { "label": "Apply Grayscale for Compression" diff --git a/frontend/src/assets/3rdPartyLicenses.json b/frontend/src/assets/3rdPartyLicenses.json index 2f19f5db6..70aacd3b2 100644 --- a/frontend/src/assets/3rdPartyLicenses.json +++ b/frontend/src/assets/3rdPartyLicenses.json @@ -385,6 +385,13 @@ "moduleLicense": "MIT", "moduleLicenseUrl": "https://opensource.org/licenses/MIT" }, + { + "moduleName": "@posthog/core", + "moduleUrl": "https://github.com/PostHog/posthog-js", + "moduleVersion": "1.0.2", + "moduleLicense": "MIT", + "moduleLicenseUrl": "https://opensource.org/licenses/MIT" + }, { "moduleName": "@tailwindcss/node", "moduleUrl": "https://github.com/tailwindlabs/tailwindcss", @@ -742,6 +749,13 @@ "moduleLicense": "MIT", "moduleLicenseUrl": "https://opensource.org/licenses/MIT" }, + { + "moduleName": "core-js", + "moduleUrl": "https://github.com/zloirock/core-js", + "moduleVersion": "3.45.1", + "moduleLicense": "MIT", + "moduleLicenseUrl": "https://opensource.org/licenses/MIT" + }, { "moduleName": "core-util-is", "moduleUrl": "https://github.com/isaacs/core-util-is", @@ -924,6 +938,13 @@ "moduleLicense": "MIT", "moduleLicenseUrl": "https://opensource.org/licenses/MIT" }, + { + "moduleName": "fflate", + "moduleUrl": "https://github.com/101arrowz/fflate", + "moduleVersion": "0.4.8", + "moduleLicense": "MIT", + "moduleLicenseUrl": "https://opensource.org/licenses/MIT" + }, { "moduleName": "file-selector", "moduleUrl": "https://github.com/react-dropzone/file-selector", @@ -1533,6 +1554,20 @@ "moduleLicense": "MIT", "moduleLicenseUrl": "https://opensource.org/licenses/MIT" }, + { + "moduleName": "posthog-js", + "moduleUrl": "https://github.com/PostHog/posthog-js", + "moduleVersion": "1.261.0", + "moduleLicense": "MIT*", + "moduleLicenseUrl": "https://opensource.org/licenses/MIT" + }, + { + "moduleName": "preact", + "moduleUrl": "https://github.com/preactjs/preact", + "moduleVersion": "10.27.1", + "moduleLicense": "MIT", + "moduleLicenseUrl": "https://opensource.org/licenses/MIT" + }, { "moduleName": "pretty-format", "moduleUrl": "https://github.com/facebook/jest", @@ -1928,7 +1963,7 @@ { "moduleName": "typescript", "moduleUrl": "https://github.com/microsoft/TypeScript", - "moduleVersion": "5.8.3", + "moduleVersion": "5.9.2", "moduleLicense": "Apache-2.0", "moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0" }, @@ -1995,6 +2030,13 @@ "moduleLicense": "Apache-2.0", "moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0" }, + { + "moduleName": "web-vitals", + "moduleUrl": "https://github.com/GoogleChrome/web-vitals", + "moduleVersion": "4.2.4", + "moduleLicense": "Apache-2.0", + "moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0" + }, { "moduleName": "webidl-conversions", "moduleUrl": "https://github.com/jsdom/webidl-conversions", diff --git a/frontend/src/components/shared/ButtonSelector.test.tsx b/frontend/src/components/shared/ButtonSelector.test.tsx new file mode 100644 index 000000000..e3adf1def --- /dev/null +++ b/frontend/src/components/shared/ButtonSelector.test.tsx @@ -0,0 +1,216 @@ +import { describe, expect, test, vi, beforeEach } from 'vitest'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { MantineProvider } from '@mantine/core'; +import ButtonSelector from './ButtonSelector'; + +// Wrapper component to provide Mantine context +const TestWrapper = ({ children }: { children: React.ReactNode }) => ( + {children} +); + +describe('ButtonSelector', () => { + const mockOnChange = vi.fn(); + + beforeEach(() => { + vi.clearAllMocks(); + }); + + test('should render all options as buttons', () => { + const options = [ + { value: 'option1', label: 'Option 1' }, + { value: 'option2', label: 'Option 2' }, + ]; + + render( + + + + ); + + expect(screen.getByText('Test Label')).toBeInTheDocument(); + expect(screen.getByText('Option 1')).toBeInTheDocument(); + expect(screen.getByText('Option 2')).toBeInTheDocument(); + }); + + test('should highlight selected button with filled variant', () => { + const options = [ + { value: 'option1', label: 'Option 1' }, + { value: 'option2', label: 'Option 2' }, + ]; + + render( + + + + ); + + const selectedButton = screen.getByRole('button', { name: 'Option 1' }); + const unselectedButton = screen.getByRole('button', { name: 'Option 2' }); + + // Check data-variant attribute for filled/outline + expect(selectedButton).toHaveAttribute('data-variant', 'filled'); + expect(unselectedButton).toHaveAttribute('data-variant', 'outline'); + expect(screen.getByText('Selection Label')).toBeInTheDocument(); + }); + + test('should call onChange when button is clicked', () => { + const options = [ + { value: 'option1', label: 'Option 1' }, + { value: 'option2', label: 'Option 2' }, + ]; + + render( + + + + ); + + fireEvent.click(screen.getByRole('button', { name: 'Option 2' })); + + expect(mockOnChange).toHaveBeenCalledWith('option2'); + }); + + test('should handle undefined value (no selection)', () => { + const options = [ + { value: 'option1', label: 'Option 1' }, + { value: 'option2', label: 'Option 2' }, + ]; + + render( + + + + ); + + // Both buttons should be outlined when no value is selected + const button1 = screen.getByRole('button', { name: 'Option 1' }); + const button2 = screen.getByRole('button', { name: 'Option 2' }); + + expect(button1).toHaveAttribute('data-variant', 'outline'); + expect(button2).toHaveAttribute('data-variant', 'outline'); + }); + + test.each([ + { + description: 'disable buttons when disabled prop is true', + options: [ + { value: 'option1', label: 'Option 1' }, + { value: 'option2', label: 'Option 2' }, + ], + globalDisabled: true, + expectedStates: [true, true], + }, + { + description: 'disable individual options when option.disabled is true', + options: [ + { value: 'option1', label: 'Option 1' }, + { value: 'option2', label: 'Option 2', disabled: true }, + ], + globalDisabled: false, + expectedStates: [false, true], + }, + ])('should $description', ({ options, globalDisabled, expectedStates }) => { + render( + + + + ); + + options.forEach((option, index) => { + const button = screen.getByRole('button', { name: option.label }); + expect(button).toHaveProperty('disabled', expectedStates[index]); + }); + }); + + test('should not call onChange when disabled button is clicked', () => { + const options = [ + { value: 'option1', label: 'Option 1' }, + { value: 'option2', label: 'Option 2', disabled: true }, + ]; + + render( + + + + ); + + fireEvent.click(screen.getByRole('button', { name: 'Option 2' })); + + expect(mockOnChange).not.toHaveBeenCalled(); + }); + + test('should not apply fullWidth styling when fullWidth is false', () => { + const options = [ + { value: 'option1', label: 'Option 1' }, + { value: 'option2', label: 'Option 2' }, + ]; + + render( + + + + ); + + const button = screen.getByRole('button', { name: 'Option 1' }); + expect(button).not.toHaveStyle({ flex: '1' }); + expect(screen.getByText('Layout Label')).toBeInTheDocument(); + }); + + test('should not render label element when not provided', () => { + const options = [ + { value: 'option1', label: 'Option 1' }, + { value: 'option2', label: 'Option 2' }, + ]; + + const { container } = render( + + + + ); + + // Should render buttons + expect(screen.getByText('Option 1')).toBeInTheDocument(); + expect(screen.getByText('Option 2')).toBeInTheDocument(); + + // Stack should only contain the Group (buttons), no Text element for label + const stackElement = container.querySelector('[class*="mantine-Stack-root"]'); + expect(stackElement?.children).toHaveLength(1); // Only the Group, no label Text + }); +}); diff --git a/frontend/src/components/shared/ButtonSelector.tsx b/frontend/src/components/shared/ButtonSelector.tsx new file mode 100644 index 000000000..bc95134d6 --- /dev/null +++ b/frontend/src/components/shared/ButtonSelector.tsx @@ -0,0 +1,59 @@ +import { Button, Group, Stack, Text } from "@mantine/core"; + +export interface ButtonOption { + value: T; + label: string; + disabled?: boolean; +} + +interface ButtonSelectorProps { + value: T | undefined; + onChange: (value: T) => void; + options: ButtonOption[]; + label?: string; + disabled?: boolean; + fullWidth?: boolean; +} + +const ButtonSelector = ({ + value, + onChange, + options, + label = undefined, + disabled = false, + fullWidth = true, +}: ButtonSelectorProps) => { + return ( + + {/* Label (if it exists) */} + {label && {label}} + + {/* Buttons */} + + {options.map((option) => ( + + ))} + + + ); +}; + +export default ButtonSelector; diff --git a/frontend/src/components/tools/addPassword/AddPasswordSettings.tsx b/frontend/src/components/tools/addPassword/AddPasswordSettings.tsx index 36ef3ce01..beb8c432c 100644 --- a/frontend/src/components/tools/addPassword/AddPasswordSettings.tsx +++ b/frontend/src/components/tools/addPassword/AddPasswordSettings.tsx @@ -4,7 +4,7 @@ import { AddPasswordParameters } from "../../../hooks/tools/addPassword/useAddPa interface AddPasswordSettingsProps { parameters: AddPasswordParameters; - onParameterChange: (key: keyof AddPasswordParameters, value: any) => void; + onParameterChange: (key: K, value: AddPasswordParameters[K]) => void; disabled?: boolean; } diff --git a/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx b/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx index 04949c27c..2c7548df8 100644 --- a/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx +++ b/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx @@ -1,5 +1,5 @@ -import { Button, Stack } from "@mantine/core"; import { useTranslation } from "react-i18next"; +import ButtonSelector from "../../shared/ButtonSelector"; interface WatermarkTypeSettingsProps { watermarkType?: 'text' | 'image'; @@ -11,32 +11,21 @@ const WatermarkTypeSettings = ({ watermarkType, onWatermarkTypeChange, disabled const { t } = useTranslation(); return ( - -
- - -
- + ); }; diff --git a/frontend/src/components/tools/adjustPageScale/AdjustPageScaleSettings.test.tsx b/frontend/src/components/tools/adjustPageScale/AdjustPageScaleSettings.test.tsx new file mode 100644 index 000000000..d71655cdc --- /dev/null +++ b/frontend/src/components/tools/adjustPageScale/AdjustPageScaleSettings.test.tsx @@ -0,0 +1,64 @@ +import { describe, expect, test, vi, beforeEach } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import { MantineProvider } from '@mantine/core'; +import AdjustPageScaleSettings from './AdjustPageScaleSettings'; +import { AdjustPageScaleParameters, PageSize } from '../../../hooks/tools/adjustPageScale/useAdjustPageScaleParameters'; + +// Mock useTranslation with predictable return values +const mockT = vi.fn((key: string, fallback?: string) => fallback || `mock-${key}`); +vi.mock('react-i18next', () => ({ + useTranslation: () => ({ t: mockT }) +})); + +// Wrapper component to provide Mantine context +const TestWrapper = ({ children }: { children: React.ReactNode }) => ( + {children} +); + +describe('AdjustPageScaleSettings', () => { + const defaultParameters: AdjustPageScaleParameters = { + scaleFactor: 1.0, + pageSize: PageSize.KEEP, + }; + + const mockOnParameterChange = vi.fn(); + + beforeEach(() => { + vi.clearAllMocks(); + }); + + test('should render without crashing', () => { + render( + + + + ); + + // Basic render test - component renders without throwing + expect(screen.getByText('Scale Factor')).toBeInTheDocument(); + expect(screen.getByText('Target Page Size')).toBeInTheDocument(); + }); + + test('should render with custom parameters', () => { + const customParameters: AdjustPageScaleParameters = { + scaleFactor: 2.5, + pageSize: PageSize.A4, + }; + + render( + + + + ); + + // Component renders successfully with custom parameters + expect(screen.getByText('Scale Factor')).toBeInTheDocument(); + expect(screen.getByText('Target Page Size')).toBeInTheDocument(); + }); +}); diff --git a/frontend/src/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx b/frontend/src/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx new file mode 100644 index 000000000..9262bcba4 --- /dev/null +++ b/frontend/src/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx @@ -0,0 +1,55 @@ +import { Stack, NumberInput, Select } from "@mantine/core"; +import { useTranslation } from "react-i18next"; +import { AdjustPageScaleParameters, PageSize } from "../../../hooks/tools/adjustPageScale/useAdjustPageScaleParameters"; + +interface AdjustPageScaleSettingsProps { + parameters: AdjustPageScaleParameters; + onParameterChange: (key: K, value: AdjustPageScaleParameters[K]) => void; + disabled?: boolean; +} + +const AdjustPageScaleSettings = ({ parameters, onParameterChange, disabled = false }: AdjustPageScaleSettingsProps) => { + const { t } = useTranslation(); + + const pageSizeOptions = [ + { value: PageSize.KEEP, label: t('adjustPageScale.pageSize.keep', 'Keep Original Size') }, + { value: PageSize.A0, label: 'A0' }, + { value: PageSize.A1, label: 'A1' }, + { value: PageSize.A2, label: 'A2' }, + { value: PageSize.A3, label: 'A3' }, + { value: PageSize.A4, label: 'A4' }, + { value: PageSize.A5, label: 'A5' }, + { value: PageSize.A6, label: 'A6' }, + { value: PageSize.LETTER, label: t('adjustPageScale.pageSize.letter', 'Letter') }, + { value: PageSize.LEGAL, label: t('adjustPageScale.pageSize.legal', 'Legal') }, + ]; + + return ( + + onParameterChange('scaleFactor', typeof value === 'number' ? value : 1.0)} + min={0.1} + max={10.0} + step={0.1} + decimalScale={2} + disabled={disabled} + /> + + onParameterChange('pdfaOptions', { - ...parameters.pdfaOptions, - outputFormat: value || 'pdfa-1' + onChange={(value) => onParameterChange('pdfaOptions', { + ...parameters.pdfaOptions, + outputFormat: value || 'pdfa-1' })} data={pdfaFormatOptions} disabled={disabled || isChecking} @@ -58,4 +58,4 @@ const ConvertToPdfaSettings = ({ ); }; -export default ConvertToPdfaSettings; \ No newline at end of file +export default ConvertToPdfaSettings; diff --git a/frontend/src/components/tools/merge/MergeFileSorter.test.tsx b/frontend/src/components/tools/merge/MergeFileSorter.test.tsx new file mode 100644 index 000000000..302777261 --- /dev/null +++ b/frontend/src/components/tools/merge/MergeFileSorter.test.tsx @@ -0,0 +1,182 @@ +import { describe, expect, test, vi, beforeEach } from 'vitest'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { MantineProvider } from '@mantine/core'; +import MergeFileSorter from './MergeFileSorter'; + +// Mock useTranslation with predictable return values +const mockT = vi.fn((key: string) => `mock-${key}`); +vi.mock('react-i18next', () => ({ + useTranslation: () => ({ t: mockT }) +})); + +// Wrapper component to provide Mantine context +const TestWrapper = ({ children }: { children: React.ReactNode }) => ( + {children} +); + +describe('MergeFileSorter', () => { + const mockOnSortFiles = vi.fn(); + + beforeEach(() => { + vi.clearAllMocks(); + }); + + test('should render sort options dropdown, direction toggle, and sort button', () => { + render( + + + + ); + + // Should have a select dropdown (Mantine Select uses textbox role) + expect(screen.getByRole('textbox')).toBeInTheDocument(); + + // Should have direction toggle button + const buttons = screen.getAllByRole('button'); + expect(buttons).toHaveLength(2); // ActionIcon + Sort Button + + // Should have sort button with text + expect(screen.getByText('mock-merge.sortBy.sort')).toBeInTheDocument(); + }); + + test('should render description text', () => { + render( + + + + ); + + expect(screen.getByText('mock-merge.sortBy.description')).toBeInTheDocument(); + }); + + test('should have filename selected by default', () => { + render( + + + + ); + + const select = screen.getByRole('textbox'); + expect(select).toHaveValue('mock-merge.sortBy.filename'); + }); + + test('should show ascending direction by default', () => { + render( + + + + ); + + // Should show ascending arrow icon + const directionButton = screen.getAllByRole('button')[0]; + expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.ascending'); + }); + + test('should toggle direction when direction button is clicked', () => { + render( + + + + ); + + const directionButton = screen.getAllByRole('button')[0]; + + // Initially ascending + expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.ascending'); + + // Click to toggle to descending + fireEvent.click(directionButton); + expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.descending'); + + // Click again to toggle back to ascending + fireEvent.click(directionButton); + expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.ascending'); + }); + + test('should call onSortFiles with correct parameters when sort button is clicked', () => { + render( + + + + ); + + const sortButton = screen.getByText('mock-merge.sortBy.sort'); + fireEvent.click(sortButton); + + // Should be called with default values (filename, ascending) + expect(mockOnSortFiles).toHaveBeenCalledWith('filename', true); + }); + + test('should call onSortFiles with dateModified when dropdown is changed', () => { + render( + + + + ); + + // Open the dropdown by clicking on the current selected value + const currentSelection = screen.getByText('mock-merge.sortBy.filename'); + fireEvent.mouseDown(currentSelection); + + // Click on the dateModified option + const dateModifiedOption = screen.getByText('mock-merge.sortBy.dateModified'); + fireEvent.click(dateModifiedOption); + + const sortButton = screen.getByText('mock-merge.sortBy.sort'); + fireEvent.click(sortButton); + + expect(mockOnSortFiles).toHaveBeenCalledWith('dateModified', true); + }); + + test('should call onSortFiles with descending direction when toggled', () => { + render( + + + + ); + + const directionButton = screen.getAllByRole('button')[0]; + const sortButton = screen.getByText('mock-merge.sortBy.sort'); + + // Toggle to descending + fireEvent.click(directionButton); + + // Click sort + fireEvent.click(sortButton); + + expect(mockOnSortFiles).toHaveBeenCalledWith('filename', false); + }); + + test('should handle complex user interaction sequence', () => { + render( + + + + ); + + const directionButton = screen.getAllByRole('button')[0]; + const sortButton = screen.getByText('mock-merge.sortBy.sort'); + + // 1. Change to dateModified + const currentSelection = screen.getByText('mock-merge.sortBy.filename'); + fireEvent.mouseDown(currentSelection); + const dateModifiedOption = screen.getByText('mock-merge.sortBy.dateModified'); + fireEvent.click(dateModifiedOption); + + // 2. Toggle to descending + fireEvent.click(directionButton); + + // 3. Click sort + fireEvent.click(sortButton); + + expect(mockOnSortFiles).toHaveBeenCalledWith('dateModified', false); + + // 4. Toggle back to ascending + fireEvent.click(directionButton); + + // 5. Sort again + fireEvent.click(sortButton); + + expect(mockOnSortFiles).toHaveBeenCalledWith('dateModified', true); + }); +}); diff --git a/frontend/src/components/tools/merge/MergeFileSorter.tsx b/frontend/src/components/tools/merge/MergeFileSorter.tsx new file mode 100644 index 000000000..2b21afc64 --- /dev/null +++ b/frontend/src/components/tools/merge/MergeFileSorter.tsx @@ -0,0 +1,77 @@ +import React, { useState } from 'react'; +import { Group, Button, Text, ActionIcon, Stack, Select } from '@mantine/core'; +import { useTranslation } from 'react-i18next'; +import SortIcon from '@mui/icons-material/Sort'; +import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; +import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; + +interface MergeFileSorterProps { + onSortFiles: (sortType: 'filename' | 'dateModified', ascending: boolean) => void; + disabled?: boolean; +} + +const MergeFileSorter: React.FC = ({ + onSortFiles, + disabled = false, +}) => { + const { t } = useTranslation(); + const [sortType, setSortType] = useState<'filename' | 'dateModified'>('filename'); + const [ascending, setAscending] = useState(true); + + const sortOptions = [ + { value: 'filename', label: t('merge.sortBy.filename', 'File Name') }, + { value: 'dateModified', label: t('merge.sortBy.dateModified', 'Date Modified') }, + ]; + + const handleSort = () => { + onSortFiles(sortType, ascending); + }; + + const handleDirectionToggle = () => { + setAscending(!ascending); + }; + + return ( + + + {t('merge.sortBy.description', "Files will be merged in the order they're selected. Drag to reorder or sort below.")} + + + + v && onParameterChange('splitType', v)} - disabled={disabled} - data={[ - { value: SPLIT_TYPES.SIZE, label: t("split-by-size-or-count.type.size", "By Size") }, - { value: SPLIT_TYPES.PAGES, label: t("split-by-size-or-count.type.pageCount", "By Page Count") }, - { value: SPLIT_TYPES.DOCS, label: t("split-by-size-or-count.type.docCount", "By Document Count") }, - ]} - /> + const renderSplitValueForm = () => { + let label, placeholder; + + switch (parameters.method) { + case SPLIT_METHODS.BY_SIZE: + label = t("split.value.fileSize.label", "File Size"); + placeholder = t("split.value.fileSize.placeholder", "e.g. 10MB, 500KB"); + break; + case SPLIT_METHODS.BY_PAGE_COUNT: + label = t("split.value.pageCount.label", "Pages per File"); + placeholder = t("split.value.pageCount.placeholder", "e.g. 5, 10"); + break; + case SPLIT_METHODS.BY_DOC_COUNT: + label = t("split.value.docCount.label", "Number of Files"); + placeholder = t("split.value.docCount.placeholder", "e.g. 3, 5"); + break; + default: + label = t("split-by-size-or-count.value.label", "Split Value"); + placeholder = t("split-by-size-or-count.value.placeholder", "e.g. 10MB or 5 pages"); + } + + return ( onParameterChange('splitValue', e.target.value)} disabled={disabled} /> - - ); + ); + }; const renderByChaptersForm = () => ( @@ -106,26 +115,30 @@ const SplitSettings = ({ return ( - {/* Mode Selector */} + {/* Method Selector */}