Tweaks to results display, Postgresql URL fix, RZ link in navbar

fileformat · fileformat · commit f4df613dafc4 · 2024-10-26T16:30:12.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@regexplanet/common": "npm:@jsr/regexplanet__common@^1.2.0",
+    "@regexplanet/common": "npm:@jsr/regexplanet__common@^1.2.1",
     "bootstrap": "^5.3.3",
     "fetch-jsonp": "^1.3.0",
     "next": "^14.2.14",
diff --git a/src/app/advanced/[engine]/index.html/OptionsInput.tsx b/src/app/advanced/[engine]/index.html/OptionsInput.tsx
@@ -23,18 +23,23 @@ export default function OptionsInput({ engine, options: optionsOrNull }: OptionI
         const optionValue = getBackendValue(option);
 
         return (
-        <div className="form-check" key={option.code}>
-            <input className="form-check-input" type="checkbox" id={`option-${option.code}`} name="option" value={optionValue} defaultChecked={options.includes(option.code)} />
+            <div className="form-check" key={option.code}>
+                <input className="form-check-input" type="checkbox" id={`option-${option.code}`} name="option" value={optionValue} defaultChecked={options.includes(option.code)} />
                 <label className="form-check-label" htmlFor={`option-${option.code}`}>{option.description} (<code>{option.code}</code>)</label>
-        </div>
-    )});
+            </div>
+        )
+    });
 
     return (
-        <div className="mb-3">
+        <div className="">
+            <details>
+                <summary>
             <label className="form-label">Options <small><a href="options.html" target="_new">Help<PiArrowSquareOut className="ms-2" /></a></small></label>
-            <div className="row ms-1">
+                </summary>
+            <div className="row ms-3 mb-3">
                 {optionCheckboxes}
             </div>
+            </details>
         </div>
     );
 }
diff --git a/src/app/advanced/[engine]/index.html/TestForm.tsx b/src/app/advanced/[engine]/index.html/TestForm.tsx
@@ -4,14 +4,35 @@ import { TestResults } from '@/components/TestResults';
 import { RegexEngine } from '@/engines/RegexEngine';
 import OptionsInput from './OptionsInput';
 import { runTest as runBrowserTest, type TestInput, type TestOutput } from '@regexplanet/common';
+
 type TestFormProps = {
     engine: RegexEngine;
     testUrl?: string;       // override for use during engine development
     testInput: TestInput;
 }
 
+function setTestInput(testInput: TestInput) {
+    const searchParams = new URLSearchParams();
+    searchParams.set('regex', testInput.regex);
+    searchParams.set('replacement', testInput.replacement);
+    testInput.options.forEach(option => searchParams.append('option', option));
+    testInput.inputs.forEach(input => searchParams.append('input', input));
+
+    const url = new URL(window.location.href);
+    url.search = searchParams.toString();
+    window.history.pushState({}, '', url.toString());
+}
+
 async function runTest(test_url:string, testInput: TestInput): Promise<TestOutput> {
 
+    console.log("running test", testInput);
+    if (!testInput || !testInput.regex) {
+        return {
+            success: false,
+            message: "Please enter a regular expression to test",
+        };
+    }
+
     if (test_url === 'javascript:runBrowserTest') {
         return runBrowserTest(testInput);
     }
@@ -42,16 +63,20 @@ async function runTest(test_url:string, testInput: TestInput): Promise<TestOutpu
 
 export default function TestForm(props: TestFormProps) {
     const [testOutput, setTestOutput] = useState<TestOutput | null>();
-    const [testInput, setTestInput] = useState<TestInput>(props.testInput);
+    //const [testInput, setTestInput] = useState<TestInput>(props.testInput);
+    const testInput = props.testInput;
 
     const inputRows = testInput.inputs.map((input, index) => (
         <div className="mb-2" key={`ikey${index}`}>
-            {index <= 0 ? <label htmlFor={`row${index}`} className="col-sm-2 col-form-label">Inputs</label> : <></> }
             <input type="text" className="form-control" id={`input${index}`} name="input" defaultValue={input} />
         </div>
     ));
     console.log("render", testInput.inputs);
 
+    const onClearResults = () => {
+        setTestOutput(null);
+    };
+
     const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         const form = event.currentTarget;
@@ -60,9 +85,11 @@ export default function TestForm(props: TestFormProps) {
         const testUrl = props.testUrl || props.engine.test_url;
         console.log(testUrl, localInput);
         setTestInput(localInput);
-        setTestOutput(null);
+        setTestOutput({ success: true, message: "Loading..."});
         if (testUrl) {
-            setTestOutput(await runTest(testUrl, localInput));
+            const newTestOutput = await runTest(testUrl, localInput);
+            console.log("newTestOutput", newTestOutput);
+            setTestOutput(newTestOutput);
         }
     };
 
@@ -107,10 +134,6 @@ export default function TestForm(props: TestFormProps) {
             {
                 props.testUrl ? <div className="alert alert-warning">Testing against {props.testUrl}!</div> : <></>
             }
-            {(testInput.regex ?
-                (testOutput ? <TestResults testOutput={testOutput} /> : <><h2>Results</h2><p>Loading...</p></>)
-                : <></>)
-            }
             <h2>Expression to test</h2>
             <form method="get" action="index.html" onSubmit={onSubmit}>
                 { props.testUrl ? <input type="hidden" name="testurl" value={props.testUrl} /> : <></> }
@@ -124,6 +147,11 @@ export default function TestForm(props: TestFormProps) {
                 </div>
                 { props.engine.options.length > 0 ? <OptionsInput engine={props.engine} options={testInput.options} /> : <></> }
                 <button type="submit" className="btn btn-primary">Test</button>
+                {
+                    (testOutput ? <TestResults onClear={onClearResults} testOutput={testOutput} /> : <></>)
+                    
+                }
+                <h2 className="pt-3">Inputs</h2>
                 {inputRows}
                 <button type="submit" className="btn btn-primary">Test</button>
                 <button className="ms-3 btn btn-outline-primary" onClick={onMoreInputs}>More inputs</button>
@@ -141,5 +169,5 @@ function formDataToTestInput(engineHandle:string, formData: FormData): TestInput
         options: formData.getAll('option') as string[],
         inputs: formData.getAll('input') as string[]
     };
-    return retVal;;
+    return retVal;
 }
diff --git a/src/app/advanced/[engine]/index.html/page.tsx b/src/app/advanced/[engine]/index.html/page.tsx
@@ -3,8 +3,6 @@ import { getEngine } from '@/engines';
 import { ShareLinks } from '@/components/ShareLinks';
 import { notFound } from 'next/navigation';
 import TestForm from './TestForm';
-//import { testRegexAction } from './testRegexAction';
-//import OptionsInput from './OptionsInput';
 import { type TestInput } from '@regexplanet/common';
 import { HelpButton } from '@/components/HelpButton';
 import { cleanupSearchParam } from '@/functions/cleanupSearchParam';
@@ -69,43 +67,4 @@ export default function Page({
             <TestForm engine={engine} testUrl={cleanupSearchParam(searchParams["testurl"])} testInput={testInput} />
         </>
     );
-    /*
-    const testRegexEngineAction = testRegexAction.bind(null, engine.handle);
-
-    const inputs = ["", "", "", "", ""];
-
-    const inputRows = inputs.map((input, index) => (
-        <div className="mb-2" key={`key${index}`}>
-            {index <= 0 ? <label htmlFor={`row${index}`} className="col-sm-2 col-form-label">Inputs</label> : <></>}
-            <input type="text" className="form-control" id={`input${index}`} name="input" defaultValue={input} />
-        </div>
-    ));
-
-    return (
-        <>
-            <div className="d-flex justify-content-between align-items-center">
-                <h1>{engine.short_name} Regular Expression Test Page</h1>
-                <a className="btn btn-success" href={engine.help_url} target="_blank">{engine.help_label}</a>
-            </div>
-            <ShareLinks url={`https://regexplanet.com/advanced/${engine.handle}/index.html`} text={`Test your ${engine.short_name} regular expression`} />
-            <hr />
-            {flash}
-            <h2>Expression to test</h2>
-            <form method="post" action={testRegexEngineAction}>
-                <div className="mb-3">
-                    <label htmlFor="regex" className="form-label">Regular Expression</label>
-                    <input type="text" className="form-control" id="regex" name="regex" />
-                </div>
-                <div className="mb-3">
-                    <label htmlFor="replacement" className="form-label">Replacement</label>
-                    <input type="text" className="form-control" id="replacement" name="replacement" />
-                </div>
-                {engine.options.length > 0 ? <OptionsInput engine={engine} options={[]} /> : <></>}
-                <button type="submit" className="btn btn-primary">Test</button>
-                {inputRows}
-                <button type="submit" className="btn btn-primary">Test</button>
-            </form>
-        </>
-    );
-    */
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -9,7 +9,7 @@ import { PiBlueprint, PiBlueprintBold, PiCloudCheck, PiCloudCheckBold, PiPlay, P
 
 const links = [
     { link: '/', label: 'Testing', startsWith: '/advanced/', icon: <PiPlay />, icon_bold: <PiPlayBold /> },
-    { link: 'https://www.regex.zone/patterns/', label: 'Patterns', startsWith: '/patterns/', icon: <PiBlueprint />, icon_bold: <PiBlueprintBold /> }, 
+    { link: 'https://www.regex.zone/patterns/', label: 'Patterns', startsWith: '/patterns/', icon: <PiBlueprint />, icon_bold: <PiBlueprintBold /> },
     {
         link: '/status.html', label: 'Status', startsWith: '/status.html', icon: <PiCloudCheck />, icon_bold: <PiCloudCheckBold />
     },
diff --git a/src/components/TestResults.tsx b/src/components/TestResults.tsx
@@ -2,14 +2,15 @@ import { type TestOutput } from "@regexplanet/common";
 
 type props = {
     testOutput: TestOutput;
+    onClear: () => void;
 };
 
-export function TestResults({ testOutput }: props) {
+export function TestResults({ onClear, testOutput }: props) {
 
     const messageClass = testOutput.success ? "alert alert-info" : "alert alert-danger";
     return (
         <>
-            <h2>Results</h2>
+            <h2 className="pt-3">Results <button className="btn btn-outline-primary btn-sm" onClick={onClear}>Clear</button></h2>
             { testOutput.message ? <div className={messageClass}>{testOutput.message}</div> : <></>}
             { testOutput.html ? <div dangerouslySetInnerHTML={{ __html: testOutput.html }} /> : <></> }
             <hr/>
diff --git a/src/engines/postgresql.ts b/src/engines/postgresql.ts
@@ -55,6 +55,6 @@ export const postgresql: RegexEngine = {
   ],
   short_name: "PostgreSQL",
   source_url: "https://github.com/regexplanet/regexplanet-postgresql",
-  status_url: "https://regexplanet-postgresql.gcr.regexplanet.com/status.json",
-  test_url: "https://regexplanet-postgresql.gcr.regexplanet.com/test.json",
+  status_url: "https://postgresql.gcr.regexplanet.com/status.json",
+  test_url: "https://postgresql.gcr.regexplanet.com/test.json",
 };

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"dependencies": {`
`3`	`3`	`"@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",`
`5`	`5`	`"bootstrap": "^5.3.3",`
`6`	`6`	`"fetch-jsonp": "^1.3.0",`
`7`	`7`	`"next": "^14.2.14",`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ import { PiBlueprint, PiBlueprintBold, PiCloudCheck, PiCloudCheckBold, PiPlay, P`
`9`	`9`
`10`	`10`	`const links = [`
`11`	`11`	`{ 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 /> },`
`13`	`13`	`{`
`14`	`14`	`link: '/status.html', label: 'Status', startsWith: '/status.html', icon: <PiCloudCheck />, icon_bold: <PiCloudCheckBold />`
`15`	`15`	`},`