run ui page refinements

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/package-lock.json

@@ -23,6 +23,7 @@
     "start": "npm run tauri dev"
   },
   "dependencies": {
+    "@patternfly/react-code-editor": "^6.1.0",
     "@patternfly/react-core": "^6.1.0",
     "@tauri-apps/api": "^2.3.0",
     "@tauri-apps/plugin-cli": "^2.2.0",

pdl-live-react/package.json

@@ -0,0 +1,9 @@
+@import "../view/term/RunTerminal.css";
+
+.pdl-run-page-section {
+  .pdl-run-split-item-card-header,
+  .pdl-run-split-item-card-body {
+    padding-inline-start: 0;
+    padding-right: 0;
+  }
+}

pdl-live-react/src/page/Run.css

@@ -3,25 +3,32 @@ import { invoke } from "@tauri-apps/api/core"
 import { Terminal } from "@xterm/xterm"
 import { FitAddon } from "@xterm/addon-fit"
 import { ClipboardAddon } from "@xterm/addon-clipboard"
+import { CodeEditor, Language } from "@patternfly/react-code-editor"
 import {
   Button,
-  Panel,
-  PanelHeader,
-  PanelMain,
-  PanelMainBody,
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
   PageSection,
-  Split,
-  SplitItem,
+  Flex,
+  FlexItem,
   TextArea,
   Toolbar,
+  ToolbarContent,
   ToolbarItem,
 } from "@patternfly/react-core"
 
 import Page from "./Page"
-import "../view/term/RunTerminal.css"
+import "./Run.css"
 
 export default function Run() {
-  const [input, setInput] = useState("")
+  const [input, setInput] = useState(`text:
+  - text:
+      - '{"key": "value"}'
+    parser: json
+    def: foo
+  - \${ foo.key }`)
   const [error, setError] = useState(false)
 
   const ref = createRef<HTMLDivElement>()
@@ -34,7 +41,6 @@ export default function Run() {
     const term = new Terminal({
       fontFamily:
         '"Red Hat Mono", RedHatMono, "Courier New", Courier, monospace',
-      fontSize: 12,
       convertEol: true,
     })
     setTerm(term)
@@ -77,49 +83,55 @@ export default function Run() {
 
   return (
     <Page breadcrumb1="Run">
-      <PageSection>
-        <Split hasGutter>
-          <SplitItem isFilled>
-            <Panel>
-              <PanelHeader>Program</PanelHeader>
-              <PanelMain>
-                <PanelMainBody>
-                  <TextArea
+      <PageSection className="pdl-run-page-section">
+        <Flex>
+          <FlexItem flex={{ default: "flex_1" }}>
+            <Card isPlain>
+              <CardHeader className="pdl-run-split-item-card-header">
+                <CardTitle>Program</CardTitle>
+              </CardHeader>
+              <CardBody className="pdl-run-split-item-card-body">
+                <div style={{ height: "600px" }}>
+                  <CodeEditor
+                    options={{ fontSize: 16 }}
                     aria-label="text area to provide PDL program source"
-                    validated={!!error ? "error" : undefined}
-                    value={input}
-                    style={{ height: "600px" }}
-                    onChange={(_event, value) => {
+                    code={input}
+                    isDarkTheme
+                    isFullHeight
+                    language="yaml"
+                    onChange={(value) => {
                       setError(null)
                       setInput(value)
                       term.clear()
                     }}
                   />
-                </PanelMainBody>
-              </PanelMain>
-            </Panel>
-          </SplitItem>
+                </div>
+              </CardBody>
+            </Card>
+          </FlexItem>
 
-          <SplitItem>
-            <Panel>
-              <PanelHeader>Output</PanelHeader>
-              <PanelMain>
-                <PanelMainBody>
-                  <div
-                    className="pdl-run-terminal"
-                    ref={ref}
-                    style={{ height: "600px" }}
-                  />
-                </PanelMainBody>
-              </PanelMain>
-            </Panel>
-          </SplitItem>
-        </Split>
+          <FlexItem flex={{ default: "flex_1" }}>
+            <Card isPlain>
+              <CardHeader className="pdl-run-split-item-card-header">
+                <CardTitle>Output</CardTitle>
+              </CardHeader>
+              <CardBody className="pdl-run-split-item-card-body">
+                <div
+                  className="pdl-run-terminal"
+                  ref={ref}
+                  style={{ height: "600px" }}
+                />
+              </CardBody>
+            </Card>
+          </FlexItem>
+        </Flex>
 
         <Toolbar>
-          <ToolbarItem>
-            <Button onClick={run}>Run</Button>
-          </ToolbarItem>
+          <ToolbarContent>
+            <ToolbarItem>
+              <Button onClick={run}>Run</Button>
+            </ToolbarItem>
+          </ToolbarContent>
         </Toolbar>
       </PageSection>
     </Page>