Add auto process option to fix issue #272 and fix formatting #273#299
Merged
Conversation
✅ Deploy Preview for freedevtool ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an “Auto process / Auto format” switch to multiple tools so users can disable automatic processing while typing (improving responsiveness for heavy inputs) and standardizes formatter toggles to a Switch+Label pattern.
Changes:
- Introduces per-tool
autoProcess/autoFormatstate gates around existing “process-on-change” effects across many tools. - Adds a consistent Switch+Label + Tooltip control in the action bar, with
data-testid="auto-process-switch"for e2e targeting. - Updates Playwright e2e tests to explicitly disable auto-processing when validating manual-button workflows.
Reviewed changes
Copilot reviewed 26 out of 26 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/e2e/tools/json-yaml-converter.spec.ts | Updates e2e coverage to disable auto-process before testing manual conversion behavior. |
| tests/e2e/tools/base64.spec.ts | Updates e2e coverage to disable auto-process for manual decode error-path validation. |
| client/src/pages/tools/yaml-formatter.tsx | Adds auto-format toggle to gate formatting effect and UI control in action bar. |
| client/src/pages/tools/url-to-json.tsx | Adds auto-process toggle to gate parsing on input change and adds UI control in action bar. |
| client/src/pages/tools/url-encoder.tsx | Adds auto-process toggle to gate encoding-on-change and adds UI control in action bar. |
| client/src/pages/tools/typescript-formatter.tsx | Adds auto-format toggle to gate formatting-on-change and adds UI control in action bar. |
| client/src/pages/tools/tls-decoder.tsx | Adds auto-process toggle to gate decode-on-change and adds UI control in action bar. |
| client/src/pages/tools/text-split.tsx | Adds auto-process toggle to gate splitting-on-change and adds UI control in action bar. |
| client/src/pages/tools/text-sort.tsx | Adds auto-process toggle to gate sorting-on-change and adds UI control in action bar. |
| client/src/pages/tools/text-diff.tsx | Adds auto-process toggle to gate diff calculation on change and adds UI control in action bar. |
| client/src/pages/tools/search-replace.tsx | Adds auto-process toggle to gate processing-on-change and adds UI control in action bar. |
| client/src/pages/tools/qr-generator.tsx | Adds auto-process toggle to gate auto-generation effect and adds UI control in action bar. |
| client/src/pages/tools/number-base-converter.tsx | Adds auto-process toggle to gate conversion-on-change and adds UI control in action bar. |
| client/src/pages/tools/markdown-formatter.tsx | Adds auto-format toggle to gate formatting effect and adds UI control in action bar. |
| client/src/pages/tools/jwt-decoder.tsx | Adds auto-process toggle to gate decode-on-change and adds UI control in action bar. |
| client/src/pages/tools/jsonc-formatter.tsx | Adds auto-format toggle to gate formatting effect and adds UI control in action bar. |
| client/src/pages/tools/json-yaml-converter.tsx | Adds auto-process toggle and effect gating for JSON→YAML auto-conversion plus UI control. |
| client/src/pages/tools/json-formatter.tsx | Adds auto-format toggle to gate formatting effect and adds UI control in action bar. |
| client/src/pages/tools/html-formatter.tsx | Adds auto-format toggle to gate formatting effect and adds UI control in action bar. |
| client/src/pages/tools/graphql-formatter.tsx | Adds auto-format toggle to gate formatting effect and adds UI control in action bar. |
| client/src/pages/tools/csv-to-json.tsx | Adds auto-process toggle to gate CSV parsing-on-change and adds UI control in action bar. |
| client/src/pages/tools/css-formatter.tsx | Adds auto-format toggle to gate formatting effect and adds UI control in action bar. |
| client/src/pages/tools/color-palette-generator.tsx | Adjusts select trigger width (formatting/layout tweak). |
| client/src/pages/tools/cbor-encoder.tsx | Adds auto-process toggle and auto-encode effect plus UI control in action bar. |
| client/src/pages/tools/base64-encoder.tsx | Adds auto-process toggle and auto-encode effect plus UI control in action bar. |
| client/src/pages/tools/barcode-generator.tsx | Adds auto-process toggle to gate generation-on-change and adds UI control in action bar. |
Comment on lines
34
to
38
| const [input, setInput] = useState(DEFAULT_JSON); | ||
| const [output, setOutput] = useState(""); | ||
| const [error, setError] = useState<string | null>(null); | ||
| const [autoFormat, setAutoFormat] = useState(true); | ||
| const { theme } = useTheme(); |
Comment on lines
34
to
40
| const [text, setText] = useState(DEFAULT_TEXT_SPLIT); | ||
| const [delimiter, setDelimiter] = useState(","); | ||
| const [removeEmpty, setRemoveEmpty] = useState(true); | ||
| const [trimWhitespace, setTrimWhitespace] = useState(true); | ||
| const [splitResult, setSplitResult] = useState<string[]>([]); | ||
| const [autoProcess, setAutoProcess] = useState(true); | ||
| const { theme } = useTheme(); |
Comment on lines
33
to
39
| export default function Base64Encoder() { | ||
| const tool = getToolByPath("/tools/base64"); | ||
| const [plainText, setPlainText] = useState(DEFAULT_BASE64); | ||
| const [encodedText, setEncodedText] = useState(DEFAULT_BASE64_ENCODED); | ||
| const [error, setError] = useState<string | null>(null); | ||
| const [autoProcess, setAutoProcess] = useState(true); | ||
| const { theme } = useTheme(); |
Comment on lines
38
to
44
| const tool = getToolByPath("/tools/url-to-json"); | ||
| const [inputUrl, setInputUrl] = useState(DEFAULT_URL_TO_JSON); | ||
| const [urlComponents, setUrlComponents] = useState<URLComponents>({}); | ||
| const [jsonOutput, setJsonOutput] = useState(""); | ||
| const [error, setError] = useState(""); | ||
| const [autoProcess, setAutoProcess] = useState(true); | ||
| const { toast } = useToast(); |
Comment on lines
160
to
166
| const [qrType, setQrType] = useState<QRType>("url"); | ||
| const [qrSize, setQrSize] = useState(300); | ||
| const [qrUrl, setQrUrl] = useState(""); | ||
| const [svgData, setSvgData] = useState(""); | ||
| const [error, setError] = useState(""); | ||
| const [autoProcess, setAutoProcess] = useState(true); | ||
|
|
Comment on lines
67
to
74
| const [inputNumber, setInputNumber] = useState("42"); | ||
| const [inputBase, setInputBase] = useState(10); | ||
| const [outputBases, setOutputBases] = useState<number[]>([2, 8, 16]); | ||
| const [customBase, setCustomBase] = useState(""); | ||
| const [results, setResults] = useState<ConversionResult[]>([]); | ||
| const [error, setError] = useState(""); | ||
| const [autoProcess, setAutoProcess] = useState(true); | ||
| const { toast } = useToast(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds an Auto process switch to 24 tools so users can decide whether the tool runs automatically as they type or only when they click the action button manually. Helps with #272
Fix formatting issue in #273
Fix checkboxes they should all appear as switch element #271