Skip to content

Commit f4df613

Browse files
fileformatfileformat
committed
Tweaks to results display, Postgresql URL fix, RZ link in navbar
1 parent 7365fb2 commit f4df613

File tree

8 files changed

+59
-66
lines changed

8 files changed

+59
-66
lines changed

‎package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"dependencies": {
33
"@popperjs/core": "^2.11.8",
4-
"@regexplanet/common": "npm:@jsr/regexplanet__common@^1.2.0",
4+
"@regexplanet/common": "npm:@jsr/regexplanet__common@^1.2.1",
55
"bootstrap": "^5.3.3",
66
"fetch-jsonp": "^1.3.0",
77
"next": "^14.2.14",

‎src/app/advanced/[engine]/index.html/OptionsInput.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,23 @@ export default function OptionsInput({ engine, options: optionsOrNull }: OptionI
2323
const optionValue = getBackendValue(option);
2424

2525
return (
26-
<div className="form-check" key={option.code}>
27-
<input className="form-check-input" type="checkbox" id={`option-${option.code}`} name="option" value={optionValue} defaultChecked={options.includes(option.code)} />
26+
<div className="form-check" key={option.code}>
27+
<input className="form-check-input" type="checkbox" id={`option-${option.code}`} name="option" value={optionValue} defaultChecked={options.includes(option.code)} />
2828
<label className="form-check-label" htmlFor={`option-${option.code}`}>{option.description} (<code>{option.code}</code>)</label>
29-
</div>
30-
)});
29+
</div>
30+
)
31+
});
3132

3233
return (
33-
<div className="mb-3">
34+
<div className="">
35+
<details>
36+
<summary>
3437
<label className="form-label">Options <small><a href="options.html" target="_new">Help<PiArrowSquareOut className="ms-2" /></a></small></label>
35-
<div className="row ms-1">
38+
</summary>
39+
<div className="row ms-3 mb-3">
3640
{optionCheckboxes}
3741
</div>
42+
</details>
3843
</div>
3944
);
4045
}

‎src/app/advanced/[engine]/index.html/TestForm.tsx

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,35 @@ import { TestResults } from '@/components/TestResults';
44
import { RegexEngine } from '@/engines/RegexEngine';
55
import OptionsInput from './OptionsInput';
66
import { runTest as runBrowserTest, type TestInput, type TestOutput } from '@regexplanet/common';
7+
78
type TestFormProps = {
89
engine: RegexEngine;
910
testUrl?: string; // override for use during engine development
1011
testInput: TestInput;
1112
}
1213

14+
function setTestInput(testInput: TestInput) {
15+
const searchParams = new URLSearchParams();
16+
searchParams.set('regex', testInput.regex);
17+
searchParams.set('replacement', testInput.replacement);
18+
testInput.options.forEach(option => searchParams.append('option', option));
19+
testInput.inputs.forEach(input => searchParams.append('input', input));
20+
21+
const url = new URL(window.location.href);
22+
url.search = searchParams.toString();
23+
window.history.pushState({}, '', url.toString());
24+
}
25+
1326
async function runTest(test_url:string, testInput: TestInput): Promise<TestOutput> {
1427

28+
console.log("running test", testInput);
29+
if (!testInput || !testInput.regex) {
30+
return {
31+
success: false,
32+
message: "Please enter a regular expression to test",
33+
};
34+
}
35+
1536
if (test_url === 'javascript:runBrowserTest') {
1637
return runBrowserTest(testInput);
1738
}
@@ -42,16 +63,20 @@ async function runTest(test_url:string, testInput: TestInput): Promise<TestOutpu
4263

4364
export default function TestForm(props: TestFormProps) {
4465
const [testOutput, setTestOutput] = useState<TestOutput | null>();
45-
const [testInput, setTestInput] = useState<TestInput>(props.testInput);
66+
//const [testInput, setTestInput] = useState<TestInput>(props.testInput);
67+
const testInput = props.testInput;
4668

4769
const inputRows = testInput.inputs.map((input, index) => (
4870
<div className="mb-2" key={`ikey${index}`}>
49-
{index <= 0 ? <label htmlFor={`row${index}`} className="col-sm-2 col-form-label">Inputs</label> : <></> }
5071
<input type="text" className="form-control" id={`input${index}`} name="input" defaultValue={input} />
5172
</div>
5273
));
5374
console.log("render", testInput.inputs);
5475

76+
const onClearResults = () => {
77+
setTestOutput(null);
78+
};
79+
5580
const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
5681
event.preventDefault();
5782
const form = event.currentTarget;
@@ -60,9 +85,11 @@ export default function TestForm(props: TestFormProps) {
6085
const testUrl = props.testUrl || props.engine.test_url;
6186
console.log(testUrl, localInput);
6287
setTestInput(localInput);
63-
setTestOutput(null);
88+
setTestOutput({ success: true, message: "Loading..."});
6489
if (testUrl) {
65-
setTestOutput(await runTest(testUrl, localInput));
90+
const newTestOutput = await runTest(testUrl, localInput);
91+
console.log("newTestOutput", newTestOutput);
92+
setTestOutput(newTestOutput);
6693
}
6794
};
6895

@@ -107,10 +134,6 @@ export default function TestForm(props: TestFormProps) {
107134
{
108135
props.testUrl ? <div className="alert alert-warning">Testing against {props.testUrl}!</div> : <></>
109136
}
110-
{(testInput.regex ?
111-
(testOutput ? <TestResults testOutput={testOutput} /> : <><h2>Results</h2><p>Loading...</p></>)
112-
: <></>)
113-
}
114137
<h2>Expression to test</h2>
115138
<form method="get" action="index.html" onSubmit={onSubmit}>
116139
{ props.testUrl ? <input type="hidden" name="testurl" value={props.testUrl} /> : <></> }
@@ -124,6 +147,11 @@ export default function TestForm(props: TestFormProps) {
124147
</div>
125148
{ props.engine.options.length > 0 ? <OptionsInput engine={props.engine} options={testInput.options} /> : <></> }
126149
<button type="submit" className="btn btn-primary">Test</button>
150+
{
151+
(testOutput ? <TestResults onClear={onClearResults} testOutput={testOutput} /> : <></>)
152+
153+
}
154+
<h2 className="pt-3">Inputs</h2>
127155
{inputRows}
128156
<button type="submit" className="btn btn-primary">Test</button>
129157
<button className="ms-3 btn btn-outline-primary" onClick={onMoreInputs}>More inputs</button>
@@ -141,5 +169,5 @@ function formDataToTestInput(engineHandle:string, formData: FormData): TestInput
141169
options: formData.getAll('option') as string[],
142170
inputs: formData.getAll('input') as string[]
143171
};
144-
return retVal;;
172+
return retVal;
145173
}

‎src/app/advanced/[engine]/index.html/page.tsx

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { getEngine } from '@/engines';
33
import { ShareLinks } from '@/components/ShareLinks';
44
import { notFound } from 'next/navigation';
55
import TestForm from './TestForm';
6-
//import { testRegexAction } from './testRegexAction';
7-
//import OptionsInput from './OptionsInput';
86
import { type TestInput } from '@regexplanet/common';
97
import { HelpButton } from '@/components/HelpButton';
108
import { cleanupSearchParam } from '@/functions/cleanupSearchParam';
@@ -69,43 +67,4 @@ export default function Page({
6967
<TestForm engine={engine} testUrl={cleanupSearchParam(searchParams["testurl"])} testInput={testInput} />
7068
</>
7169
);
72-
/*
73-
const testRegexEngineAction = testRegexAction.bind(null, engine.handle);
74-
75-
const inputs = ["", "", "", "", ""];
76-
77-
const inputRows = inputs.map((input, index) => (
78-
<div className="mb-2" key={`key${index}`}>
79-
{index <= 0 ? <label htmlFor={`row${index}`} className="col-sm-2 col-form-label">Inputs</label> : <></>}
80-
<input type="text" className="form-control" id={`input${index}`} name="input" defaultValue={input} />
81-
</div>
82-
));
83-
84-
return (
85-
<>
86-
<div className="d-flex justify-content-between align-items-center">
87-
<h1>{engine.short_name} Regular Expression Test Page</h1>
88-
<a className="btn btn-success" href={engine.help_url} target="_blank">{engine.help_label}</a>
89-
</div>
90-
<ShareLinks url={`https://regexplanet.com/advanced/${engine.handle}/index.html`} text={`Test your ${engine.short_name} regular expression`} />
91-
<hr />
92-
{flash}
93-
<h2>Expression to test</h2>
94-
<form method="post" action={testRegexEngineAction}>
95-
<div className="mb-3">
96-
<label htmlFor="regex" className="form-label">Regular Expression</label>
97-
<input type="text" className="form-control" id="regex" name="regex" />
98-
</div>
99-
<div className="mb-3">
100-
<label htmlFor="replacement" className="form-label">Replacement</label>
101-
<input type="text" className="form-control" id="replacement" name="replacement" />
102-
</div>
103-
{engine.options.length > 0 ? <OptionsInput engine={engine} options={[]} /> : <></>}
104-
<button type="submit" className="btn btn-primary">Test</button>
105-
{inputRows}
106-
<button type="submit" className="btn btn-primary">Test</button>
107-
</form>
108-
</>
109-
);
110-
*/
11170
}

‎src/components/Navbar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { PiBlueprint, PiBlueprintBold, PiCloudCheck, PiCloudCheckBold, PiPlay, P
99

1010
const links = [
1111
{ link: '/', label: 'Testing', startsWith: '/advanced/', icon: <PiPlay />, icon_bold: <PiPlayBold /> },
12-
{ link: 'https://www.regex.zone/patterns/', label: 'Patterns', startsWith: '/patterns/', icon: <PiBlueprint />, icon_bold: <PiBlueprintBold /> },
12+
{ link: 'https://www.regex.zone/patterns/', label: 'Patterns', startsWith: '/patterns/', icon: <PiBlueprint />, icon_bold: <PiBlueprintBold /> },
1313
{
1414
link: '/status.html', label: 'Status', startsWith: '/status.html', icon: <PiCloudCheck />, icon_bold: <PiCloudCheckBold />
1515
},

‎src/components/TestResults.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import { type TestOutput } from "@regexplanet/common";
22

33
type props = {
44
testOutput: TestOutput;
5+
onClear: () => void;
56
};
67

7-
export function TestResults({ testOutput }: props) {
8+
export function TestResults({ onClear, testOutput }: props) {
89

910
const messageClass = testOutput.success ? "alert alert-info" : "alert alert-danger";
1011
return (
1112
<>
12-
<h2>Results</h2>
13+
<h2 className="pt-3">Results <button className="btn btn-outline-primary btn-sm" onClick={onClear}>Clear</button></h2>
1314
{ testOutput.message ? <div className={messageClass}>{testOutput.message}</div> : <></>}
1415
{ testOutput.html ? <div dangerouslySetInnerHTML={{ __html: testOutput.html }} /> : <></> }
1516
<hr/>

‎src/engines/postgresql.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,6 @@ export const postgresql: RegexEngine = {
5555
],
5656
short_name: "PostgreSQL",
5757
source_url: "https://github.com/regexplanet/regexplanet-postgresql",
58-
status_url: "https://regexplanet-postgresql.gcr.regexplanet.com/status.json",
59-
test_url: "https://regexplanet-postgresql.gcr.regexplanet.com/test.json",
58+
status_url: "https://postgresql.gcr.regexplanet.com/status.json",
59+
test_url: "https://postgresql.gcr.regexplanet.com/test.json",
6060
};

0 commit comments

Comments
 (0)