diff --git a/frontend/src/components/tools/redact/AutomaticRedactSettings.tsx b/frontend/src/components/tools/redact/AutomaticRedactSettings.tsx deleted file mode 100644 index 1cac3ff05..000000000 --- a/frontend/src/components/tools/redact/AutomaticRedactSettings.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { Stack, Divider, Text, NumberInput, Group, ColorInput } from "@mantine/core"; -import { useTranslation } from "react-i18next"; -import { RedactParameters } from "../../../hooks/tools/redact/useRedactParameters"; -import WordsToRedactInput from "./WordsToRedactInput"; - -interface AutomaticRedactSettingsProps { - parameters: RedactParameters; - onParameterChange: (key: K, value: RedactParameters[K]) => void; - disabled?: boolean; -} - -const AutomaticRedactSettings = ({ parameters, onParameterChange, disabled = false }: AutomaticRedactSettingsProps) => { - const { t } = useTranslation(); - - return ( - - - - {/* Words to Redact */} - onParameterChange('wordsToRedact', words)} - disabled={disabled} - /> - - - - {/* Redaction Settings */} - - - {t('redact.auto.settings', 'Redaction Settings')} - - - {/* Box Color */} - - {t('redact.auto.colorLabel', 'Box Colour')} - onParameterChange('redactColor', value)} - disabled={disabled} - size="sm" - /> - - - {/* Box Padding */} - - {t('redact.auto.paddingLabel', 'Box Padding')} - onParameterChange('customPadding', typeof value === 'number' ? value : 0.1)} - min={0} - max={10} - step={0.1} - disabled={disabled} - size="sm" - placeholder="0.1" - /> - - - {/* Use Regex */} - - - {/* Whole Word Search */} - - - {/* Convert PDF to PDF-Image */} - - - - ); -}; - -export default AutomaticRedactSettings; diff --git a/frontend/src/components/tools/redact/RedactAdvancedStep.tsx b/frontend/src/components/tools/redact/RedactAdvancedSettings.tsx similarity index 68% rename from frontend/src/components/tools/redact/RedactAdvancedStep.tsx rename to frontend/src/components/tools/redact/RedactAdvancedSettings.tsx index 8c9ab493e..7a68b3d5d 100644 --- a/frontend/src/components/tools/redact/RedactAdvancedStep.tsx +++ b/frontend/src/components/tools/redact/RedactAdvancedSettings.tsx @@ -1,32 +1,33 @@ -import { Stack, Text, NumberInput, ColorInput } from '@mantine/core'; -import { useTranslation } from 'react-i18next'; -import { RedactParameters } from '../../../hooks/tools/redact/useRedactParameters'; +import { Stack, Text, NumberInput, ColorInput } from "@mantine/core"; +import { useTranslation } from "react-i18next"; +import { RedactParameters } from "../../../hooks/tools/redact/useRedactParameters"; -interface RedactAdvancedStepProps { +interface RedactAdvancedSettingsProps { parameters: RedactParameters; onParameterChange: (key: K, value: RedactParameters[K]) => void; disabled?: boolean; } -export default function RedactAdvancedStep({ parameters, onParameterChange, disabled }: RedactAdvancedStepProps) { +const RedactAdvancedSettings = ({ parameters, onParameterChange, disabled = false }: RedactAdvancedSettingsProps) => { const { t } = useTranslation(); return ( {/* Box Color */} - {t('redact.advanced.colorLabel', 'Box Color')} + {t('redact.auto.colorLabel', 'Box Colour')} onParameterChange('redactColor', value)} disabled={disabled} size="sm" + format="hex" /> {/* Box Padding */} - {t('redact.advanced.paddingLabel', 'Box Padding')} + {t('redact.auto.paddingLabel', 'Box Padding')} onParameterChange('customPadding', typeof value === 'number' ? value : 0.1)} @@ -47,7 +48,7 @@ export default function RedactAdvancedStep({ parameters, onParameterChange, disa onChange={(e) => onParameterChange('useRegex', e.target.checked)} disabled={disabled} /> - {t('redact.advanced.useRegexLabel', 'Use Regex')} + {t('redact.auto.useRegexLabel', 'Use Regex')} {/* Whole Word Search */} @@ -58,7 +59,7 @@ export default function RedactAdvancedStep({ parameters, onParameterChange, disa onChange={(e) => onParameterChange('wholeWordSearch', e.target.checked)} disabled={disabled} /> - {t('redact.advanced.wholeWordSearchLabel', 'Whole Word Search')} + {t('redact.auto.wholeWordSearchLabel', 'Whole Word Search')} {/* Convert PDF to PDF-Image */} @@ -69,8 +70,10 @@ export default function RedactAdvancedStep({ parameters, onParameterChange, disa onChange={(e) => onParameterChange('convertPDFToImage', e.target.checked)} disabled={disabled} /> - {t('redact.advanced.convertPDFToImageLabel', 'Convert PDF to PDF-Image (Used to remove text behind the box)')} + {t('redact.auto.convertPDFToImageLabel', 'Convert PDF to PDF-Image (Used to remove text behind the box)')} ); -} +}; + +export default RedactAdvancedSettings; diff --git a/frontend/src/components/tools/redact/RedactModeStep.tsx b/frontend/src/components/tools/redact/RedactModeStep.tsx deleted file mode 100644 index ec98b56a0..000000000 --- a/frontend/src/components/tools/redact/RedactModeStep.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Stack } from '@mantine/core'; -import { RedactParameters } from '../../../hooks/tools/redact/useRedactParameters'; -import RedactModeSelector from './RedactModeSelector'; - -interface RedactModeStepProps { - parameters: RedactParameters; - onParameterChange: (key: K, value: RedactParameters[K]) => void; - disabled?: boolean; -} - -export default function RedactModeStep({ parameters, onParameterChange, disabled }: RedactModeStepProps) { - return ( - - onParameterChange('mode', mode)} - disabled={disabled} - /> - - ); -} diff --git a/frontend/src/components/tools/redact/RedactSettings.tsx b/frontend/src/components/tools/redact/RedactSettings.tsx deleted file mode 100644 index 7ebc3354b..000000000 --- a/frontend/src/components/tools/redact/RedactSettings.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Stack } from "@mantine/core"; -import { RedactParameters } from "../../../hooks/tools/redact/useRedactParameters"; -import RedactModeSelector from "./RedactModeSelector"; -import AutomaticRedactSettings from "./AutomaticRedactSettings"; - -interface RedactSettingsProps { - parameters: RedactParameters; - onParameterChange: (key: K, value: RedactParameters[K]) => void; - disabled?: boolean; -} - -const RedactSettings = ({ parameters, onParameterChange, disabled = false }: RedactSettingsProps) => { - return ( - - onParameterChange('mode', mode)} - disabled={disabled} - /> - - {parameters.mode === 'automatic' && ( - - )} - - {parameters.mode === 'manual' && ( -
- Manual redaction interface will be available here when implemented. -
- )} -
- ); -}; - -export default RedactSettings; diff --git a/frontend/src/components/tools/redact/RedactSingleStepSettings.tsx b/frontend/src/components/tools/redact/RedactSingleStepSettings.tsx new file mode 100644 index 000000000..71e48596a --- /dev/null +++ b/frontend/src/components/tools/redact/RedactSingleStepSettings.tsx @@ -0,0 +1,61 @@ +import { Stack, Divider } from "@mantine/core"; +import { RedactParameters } from "../../../hooks/tools/redact/useRedactParameters"; +import RedactModeSelector from "./RedactModeSelector"; +import WordsToRedactInput from "./WordsToRedactInput"; +import RedactAdvancedSettings from "./RedactAdvancedSettings"; + +interface RedactSingleStepSettingsProps { + parameters: RedactParameters; + onParameterChange: (key: K, value: RedactParameters[K]) => void; + disabled?: boolean; +} + +const RedactSingleStepSettings = ({ parameters, onParameterChange, disabled = false }: RedactSingleStepSettingsProps) => { + return ( + + {/* Mode Selection */} + onParameterChange('mode', mode)} + disabled={disabled} + /> + + {/* Automatic Mode Settings */} + {parameters.mode === 'automatic' && ( + <> + + + {/* Words to Redact */} + onParameterChange('wordsToRedact', words)} + disabled={disabled} + /> + + + + {/* Advanced Settings */} + + + )} + + {/* Manual Mode Placeholder */} + {parameters.mode === 'manual' && ( + <> + + +
+ Manual redaction interface will be available here when implemented. +
+
+ + )} +
+ ); +}; + +export default RedactSingleStepSettings; diff --git a/frontend/src/components/tools/redact/RedactWordsStep.tsx b/frontend/src/components/tools/redact/RedactWordsStep.tsx deleted file mode 100644 index 6de3c3350..000000000 --- a/frontend/src/components/tools/redact/RedactWordsStep.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Stack } from '@mantine/core'; -import { RedactParameters } from '../../../hooks/tools/redact/useRedactParameters'; -import WordsToRedactInput from './WordsToRedactInput'; - -interface RedactWordsStepProps { - parameters: RedactParameters; - onParameterChange: (key: K, value: RedactParameters[K]) => void; - disabled?: boolean; -} - -export default function RedactWordsStep({ parameters, onParameterChange, disabled }: RedactWordsStepProps) { - return ( - - onParameterChange('wordsToRedact', words)} - disabled={disabled} - /> - - ); -} diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx index f416bd66c..cf1ece3f1 100644 --- a/frontend/src/data/useTranslatedToolRegistry.tsx +++ b/frontend/src/data/useTranslatedToolRegistry.tsx @@ -45,7 +45,7 @@ import OCRSettings from "../components/tools/ocr/OCRSettings"; import ConvertSettings from "../components/tools/convert/ConvertSettings"; import ChangePermissionsSettings from "../components/tools/changePermissions/ChangePermissionsSettings"; import FlattenSettings from "../components/tools/flatten/FlattenSettings"; -import RedactSettings from "../components/tools/redact/RedactSettings"; +import RedactSingleStepSettings from "../components/tools/redact/RedactSingleStepSettings"; import Redact from "../tools/Redact"; import { ToolId } from "../types/toolId"; @@ -711,7 +711,7 @@ export function useFlatToolRegistry(): ToolRegistry { maxFiles: -1, endpoints: ["auto-redact"], operationConfig: redactOperationConfig, - settingsComponent: RedactSettings, + settingsComponent: RedactSingleStepSettings, }, }; diff --git a/frontend/src/tools/Redact.tsx b/frontend/src/tools/Redact.tsx index c902ce30a..03f36dc66 100644 --- a/frontend/src/tools/Redact.tsx +++ b/frontend/src/tools/Redact.tsx @@ -1,14 +1,14 @@ import { useTranslation } from "react-i18next"; import { useState } from "react"; import { createToolFlow } from "../components/tools/shared/createToolFlow"; -import RedactModeStep from "../components/tools/redact/RedactModeStep"; -import RedactWordsStep from "../components/tools/redact/RedactWordsStep"; -import RedactAdvancedStep from "../components/tools/redact/RedactAdvancedStep"; +import RedactModeSelector from "../components/tools/redact/RedactModeSelector"; import { useRedactParameters } from "../hooks/tools/redact/useRedactParameters"; import { useRedactOperation } from "../hooks/tools/redact/useRedactOperation"; import { useBaseTool } from "../hooks/tools/shared/useBaseTool"; import { BaseToolProps, ToolComponent } from "../types/tool"; import { useRedactModeTips, useRedactWordsTips, useRedactAdvancedTips } from "../components/tooltips/useRedactTips"; +import RedactAdvancedSettings from "../components/tools/redact/RedactAdvancedSettings"; +import WordsToRedactInput from "../components/tools/redact/WordsToRedactInput"; const Redact = (props: BaseToolProps) => { const { t } = useTranslation(); @@ -39,7 +39,59 @@ const Redact = (props: BaseToolProps) => { // Compute actual collapsed state based on results and user state const getActualCollapsedState = (userCollapsed: boolean) => { - return base.hasResults ? true : userCollapsed; // Force collapse when results are shown + return (!base.hasFiles || base.hasResults) ? true : userCollapsed; // Force collapse when results are shown + }; + + // Build conditional steps based on redaction mode + const buildSteps = () => { + const steps = [ + // Method selection step (always present) + { + title: t("redact.steps.method", "Method"), + isCollapsed: getActualCollapsedState(methodCollapsed), + onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setMethodCollapsed(!methodCollapsed), + tooltip: modeTips, + content: ( + base.params.updateParameter('mode', mode)} + disabled={base.endpointLoading} + /> + ), + } + ]; + + // Add mode-specific steps + if (base.params.parameters.mode === 'automatic') { + steps.push( + { + title: t("redact.steps.words", "Words to Redact"), + isCollapsed: getActualCollapsedState(wordsCollapsed), + onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setWordsCollapsed(!wordsCollapsed), + tooltip: wordsTips, + content: base.params.updateParameter('wordsToRedact', words)} + disabled={base.endpointLoading} + />, + }, + { + title: t("redact.steps.advanced", "Advanced Settings"), + isCollapsed: getActualCollapsedState(advancedCollapsed), + onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setAdvancedCollapsed(!advancedCollapsed), + tooltip: advancedTips, + content: , + }, + ); + } else if (base.params.parameters.mode === 'manual') { + // Manual mode steps would go here when implemented + } + + return steps; }; return createToolFlow({ @@ -47,47 +99,7 @@ const Redact = (props: BaseToolProps) => { selectedFiles: base.selectedFiles, isCollapsed: base.hasResults, }, - steps: [ - { - title: t("redact.steps.method", "Method"), - isCollapsed: getActualCollapsedState(methodCollapsed), - onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setMethodCollapsed(!methodCollapsed), - tooltip: modeTips, - content: ( - - ), - }, - { - title: t("redact.steps.words", "Words to Redact"), - isCollapsed: getActualCollapsedState(wordsCollapsed), - onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setWordsCollapsed(!wordsCollapsed), - tooltip: wordsTips, - content: ( - - ), - }, - { - title: t("redact.steps.advanced", "Advanced Settings"), - isCollapsed: getActualCollapsedState(advancedCollapsed), - onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setAdvancedCollapsed(!advancedCollapsed), - tooltip: advancedTips, - content: ( - - ), - }, - ], + steps: buildSteps(), executeButton: { text: t("redact.submit", "Redact"), isVisible: !base.hasResults,