diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index d3b5f03c6..8d6eac6cc 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", @@ -1625,50 +1639,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" @@ -1879,6 +1966,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/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/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/compress/CompressSettings.tsx b/frontend/src/components/tools/compress/CompressSettings.tsx index 28035bfe3..412962704 100644 --- a/frontend/src/components/tools/compress/CompressSettings.tsx +++ b/frontend/src/components/tools/compress/CompressSettings.tsx @@ -1,7 +1,8 @@ import React, { useState } from "react"; -import { Button, Stack, Text, NumberInput, Select, Divider } from "@mantine/core"; +import { Stack, Text, NumberInput, Select, Divider } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { CompressParameters } from "../../../hooks/tools/compress/useCompressParameters"; +import ButtonSelector from "../../shared/ButtonSelector"; interface CompressSettingsProps { parameters: CompressParameters; @@ -18,33 +19,16 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C {/* Compression Method */} - - Compression Method -
- - -
- + onParameterChange('compressionMethod', value)} + options={[ + { value: 'quality', label: t('compress.method.quality', 'Quality') }, + { value: 'filesize', label: t('compress.method.filesize', 'File Size') }, + ]} + disabled={disabled} + /> {/* Quality Adjustment */} {parameters.compressionMethod === 'quality' && ( 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.")} + + + +