Skip to content

Commit a49a59c

Browse files
starpitstarpit
committed
run ui page refinements
Signed-off-by: Nick Mitchell <[email protected]>
1 parent 342c385 commit a49a59c

File tree

4 files changed

+151
-54
lines changed

4 files changed

+151
-54
lines changed

‎pdl-live-react/package-lock.json‎

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

‎pdl-live-react/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"start": "npm run tauri dev"
2424
},
2525
"dependencies": {
26+
"@patternfly/react-code-editor": "^6.1.0",
2627
"@patternfly/react-core": "^6.1.0",
2728
"@tauri-apps/api": "^2.3.0",
2829
"@tauri-apps/plugin-cli": "^2.2.0",

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import "../view/term/RunTerminal.css";
2+
3+
.pdl-run-page-section {
4+
.pdl-run-split-item-card-header,
5+
.pdl-run-split-item-card-body {
6+
padding-inline-start: 0;
7+
padding-right: 0;
8+
}
9+
}

‎pdl-live-react/src/page/Run.tsx‎

Lines changed: 69 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,35 @@ import { invoke } from "@tauri-apps/api/core"
33
import { Terminal } from "@xterm/xterm"
44
import { FitAddon } from "@xterm/addon-fit"
55
import { ClipboardAddon } from "@xterm/addon-clipboard"
6+
import { CodeEditor, Language } from "@patternfly/react-code-editor"
67
import {
78
Button,
8-
Panel,
9-
PanelHeader,
10-
PanelMain,
11-
PanelMainBody,
9+
Card,
10+
CardBody,
11+
CardHeader,
12+
CardTitle,
1213
PageSection,
13-
Split,
14-
SplitItem,
15-
TextArea,
14+
Flex,
15+
FlexItem,
1616
Toolbar,
17+
ToolbarContent,
1718
ToolbarItem,
1819
} from "@patternfly/react-core"
1920

2021
import Page from "./Page"
21-
import "../view/term/RunTerminal.css"
22+
import "./Run.css"
2223

24+
const initialInput = `text:
25+
- text:
26+
- '{"key": "value"}'
27+
parser: json
28+
def: foo
29+
- \${ foo.key }`
2330
export default function Run() {
24-
const [input, setInput] = useState("")
25-
const [error, setError] = useState(false)
31+
const [input, setInput] = useState(initialInput)
32+
const [_error, setError] = useState(false)
2633

27-
const ref = createRef<HTMLDivElement>()
34+
const xtermRef = createRef<HTMLDivElement>()
2835
const [term, setTerm] = useState<null | Terminal>(null)
2936

3037
// Why a two-stage useEffect? Otherwise: cannot read properties of
@@ -34,7 +41,6 @@ export default function Run() {
3441
const term = new Terminal({
3542
fontFamily:
3643
'"Red Hat Mono", RedHatMono, "Courier New", Courier, monospace',
37-
fontSize: 12,
3844
convertEol: true,
3945
})
4046
setTerm(term)
@@ -46,80 +52,89 @@ export default function Run() {
4652
}, [])
4753

4854
useEffect(() => {
49-
if (term && ref.current) {
55+
if (term && xtermRef.current) {
5056
const fitAddon = new FitAddon()
5157
term.loadAddon(fitAddon)
5258
const clipboardAddon = new ClipboardAddon()
5359
term.loadAddon(clipboardAddon)
5460

55-
term.open(ref.current)
61+
term.open(xtermRef.current)
5662
fitAddon.fit()
5763
// term.focus()
5864

5965
// for debugging:
6066
// term.writeln(`Running ${cmd} ${args.join(" ")}`)
6167
}
62-
}, [term, ref])
68+
}, [term, xtermRef])
6369

6470
const run = async () => {
6571
try {
72+
term?.reset()
6673
const result = await invoke("run_pdl_program", {
6774
program: input,
6875
debug: false,
6976
})
70-
term.write(result)
71-
console.error(result)
77+
term?.write(String(result))
78+
console.error(true)
7279
} catch (err) {
73-
term.write(err)
80+
term?.write(String(err))
7481
setError(true)
7582
}
7683
}
7784

7885
return (
7986
<Page breadcrumb1="Run">
80-
<PageSection>
81-
<Split hasGutter>
82-
<SplitItem isFilled>
83-
<Panel>
84-
<PanelHeader>Program</PanelHeader>
85-
<PanelMain>
86-
<PanelMainBody>
87-
<TextArea
87+
<PageSection className="pdl-run-page-section">
88+
<Flex>
89+
<FlexItem flex={{ default: "flex_1" }}>
90+
<Card isPlain>
91+
<CardHeader className="pdl-run-split-item-card-header">
92+
<CardTitle>Program</CardTitle>
93+
</CardHeader>
94+
<CardBody className="pdl-run-split-item-card-body">
95+
<div style={{ height: "600px" }}>
96+
<CodeEditor
97+
onEditorDidMount={(editor, _monaco) => {
98+
editor.layout()
99+
}}
100+
options={{ fontSize: 16 }}
88101
aria-label="text area to provide PDL program source"
89-
validated={!!error ? "error" : undefined}
90-
value={input}
91-
style={{ height: "600px" }}
92-
onChange={(_event, value) => {
93-
setError(null)
102+
code={initialInput}
103+
isDarkTheme
104+
isFullHeight
105+
language={Language.yaml}
106+
onChange={(value) => {
107+
setError(false)
94108
setInput(value)
95-
term.clear()
96109
}}
97110
/>
98-
</PanelMainBody>
99-
</PanelMain>
100-
</Panel>
101-
</SplitItem>
111+
</div>
112+
</CardBody>
113+
</Card>
114+
</FlexItem>
102115

103-
<SplitItem>
104-
<Panel>
105-
<PanelHeader>Output</PanelHeader>
106-
<PanelMain>
107-
<PanelMainBody>
108-
<div
109-
className="pdl-run-terminal"
110-
ref={ref}
111-
style={{ height: "600px" }}
112-
/>
113-
</PanelMainBody>
114-
</PanelMain>
115-
</Panel>
116-
</SplitItem>
117-
</Split>
116+
<FlexItem flex={{ default: "flex_1" }}>
117+
<Card isPlain>
118+
<CardHeader className="pdl-run-split-item-card-header">
119+
<CardTitle>Output</CardTitle>
120+
</CardHeader>
121+
<CardBody className="pdl-run-split-item-card-body">
122+
<div
123+
className="pdl-run-terminal"
124+
ref={xtermRef}
125+
style={{ height: "600px" }}
126+
/>
127+
</CardBody>
128+
</Card>
129+
</FlexItem>
130+
</Flex>
118131

119132
<Toolbar>
120-
<ToolbarItem>
121-
<Button onClick={run}>Run</Button>
122-
</ToolbarItem>
133+
<ToolbarContent>
134+
<ToolbarItem>
135+
<Button onClick={run}>Run</Button>
136+
</ToolbarItem>
137+
</ToolbarContent>
123138
</Toolbar>
124139
</PageSection>
125140
</Page>

0 commit comments

Comments
 (0)