Skip to content

Commit b3f4884

Browse files
starpitstarpit
committed
feat: port pdl-live to react+patternfly+vite
Also - updates the typescript source style to "no-semi" - switches from npm to yarn - adds github action test that invokes the pdl-live `yarn test` - `yarn test` currently tests: a) type checking; b) linting; c) formatting; d) basic playwright tests - `yarn test:quality` checks a-c - `yarn test:ui` checks d, using [playwright](https://playwright.dev/); see tests/*.ts Fixes #251 Signed-off-by: Nick Mitchell <[email protected]>
1 parent 8a1e543 commit b3f4884

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+9641
-1
lines changed

‎.github/workflows/pdl-live-react-tests.yml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: Viewer Tests
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
pull_request:
7+
branches: [ main ]
8+
9+
# cancel any prior runs for this workflow and this PR (or branch)
10+
concurrency:
11+
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
12+
cancel-in-progress: true
13+
14+
jobs:
15+
viewer:
16+
name: Test PDL live viewer
17+
runs-on: ubuntu-latest
18+
defaults:
19+
run:
20+
working-directory: ./pdl-live-react
21+
steps:
22+
- uses: actions/checkout@v4
23+
- name: Set up node
24+
uses: actions/setup-node@v4
25+
with:
26+
node-version: 22
27+
- name: Install dependencies
28+
run: yarn
29+
- name: Install Playwright Browsers
30+
run: yarn playwright install --with-deps
31+
- name: Test pdl-live viewer
32+
run: yarn test

‎.gitignore‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,4 +155,10 @@ pdl-live/package-lock.json
155155
_site
156156

157157
# Generated version
158-
src/pdl/_version.py
158+
src/pdl/_version.py
159+
160+
# Emacs temps
161+
*~
162+
163+
# Mac
164+
.DS_Store

‎pdl-live-react/.editorconfig‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
insert_final_newline = true

‎pdl-live-react/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
/test-results/
3+
/playwright-report/
4+
/blob-report/
5+
/playwright/.cache/

‎pdl-live-react/README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# PDL Viewer
2+
3+
To get started, make sure you have a recent version of
4+
[NodeJS](https://nodejs.org/en/download) installed and
5+
[Yarn](https://classic.yarnpkg.com/lang/en/docs/install). On MacOS,
6+
these can be installed via `brew install node yarn`.
7+
8+
## Implementation Details
9+
10+
The PDL Viewer uses [Vite](https://vite.dev/) for bundling,
11+
[React](https://react.dev/) for the UI,
12+
[PatternFly](https://www.patternfly.org/) for UI components, and is
13+
written in [TypeScript](https://www.typescriptlang.org/). The React
14+
components are written in [TSX](https://react.dev/learn/typescript)
15+
(the Typescript variant of JSX).
16+
17+
## Development
18+
19+
To install dependencies:
20+
```shell
21+
yarn
22+
```
23+
24+
To start the watcher:
25+
```shell
26+
yarn dev
27+
```
28+
29+
Which will open up a local port which you can view in your favorite
30+
browser. Edits to any source files will result in quick and automatic
31+
updates to that running UI.
32+
33+
## Tests
34+
35+
There are currently only simple tests for: linting, formatting, and
36+
type checking. These can be run via:
37+
```shell
38+
yarn test
39+
```
40+
41+
## Production
42+
43+
This will generate production bundles in `dist/`
44+
```shell
45+
yarn build
46+
```

‎pdl-live-react/demos/error.pdl‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
description: Creating JSON Data
2+
defs:
3+
data:
4+
read: ./gen-data.yaml
5+
parser: yaml
6+
spec: { questions: [str], answers: [obj] }
7+
text:
8+
- model: ollama/llama3.1:8b
9+
def: model_output
10+
spec: {name: str, age: int}
11+
input:
12+
text:
13+
- for:
14+
question: ${ data.questions }
15+
answer: ${ data.answers }
16+
repeat: |
17+
${ question }
18+
${ answer }
19+
- >
20+
Question: Create a JSON object with fields 'name' and 'age'
21+
and set them appropriately. Write the age in letters.
22+
parser: yaml
23+
parameters:
24+
stop_sequences: "\n"
25+
temperature: 0

‎pdl-live-react/demos/gen-data.yaml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
source_code:
2+
|
3+
@SuppressWarnings("unchecked")
4+
public static Map<String, String> deserializeOffsetMap(String lastSourceOffset) throws IOException {
5+
Map<String, String> offsetMap;
6+
if (lastSourceOffset == null || lastSourceOffset.isEmpty()) {
7+
offsetMap = new HashMap<>();
8+
} else {
9+
offsetMap = JSON_MAPPER.readValue(lastSourceOffset, Map.class);
10+
}
11+
return offsetMap;
12+
}
13+
repo_info:
14+
repo: streamsets/datacollector
15+
path: stagesupport/src/main/java/com/.../OffsetUtil.java
16+
function_name: OffsetUtil.deserializeOffsetMap

‎pdl-live-react/eslint.config.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist','test-results'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'@typescript-eslint/no-unused-vars': [
23+
'error',
24+
{
25+
"argsIgnorePattern": "^_",
26+
"varsIgnorePattern": "^_",
27+
"caughtErrorsIgnorePattern": "^_"
28+
}
29+
],
30+
'react-refresh/only-export-components': [
31+
'warn',
32+
{ allowConstantExport: true },
33+
],
34+
},
35+
},
36+
)

‎pdl-live-react/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/ai-governance--prompt.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>PDL Viewer</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎pdl-live-react/package.json‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "pdl-live",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "concurrently vite 'tsc --build --watch --noEmit'",
7+
"build": "tsc -b && vite build",
8+
"lint": "eslint .",
9+
"format": "prettier --write 'tests/**/*.ts' 'src/**/*.{ts,tsx,css}'",
10+
"preview": "vite preview",
11+
"test:quality": "concurrently -n 'lint,types,formatting' 'yarn lint' 'tsc --build --noEmit' \"prettier --check 'tests/**/*.ts' 'src/**/*.{ts,tsx,css}'\"",
12+
"test:ui": "yarn playwright test",
13+
"test": "concurrently -n 'quality,playwright' 'yarn test:quality' 'yarn test:ui'"
14+
},
15+
"dependencies": {
16+
"@patternfly/react-core": "^6.1.0",
17+
"react": "^18.3.1",
18+
"react-dom": "^18.3.1",
19+
"react-markdown": "^9.0.3",
20+
"react-router-dom": "^7.1.2",
21+
"react-syntax-highlighter": "^15.6.1",
22+
"ts-pattern": "^5.6.0",
23+
"yaml": "^2.7.0"
24+
},
25+
"devDependencies": {
26+
"@eslint/js": "^9.17.0",
27+
"@playwright/test": "^1.49.1",
28+
"@types/node": "22.10.5",
29+
"@types/react": "^18.3.18",
30+
"@types/react-dom": "^18.3.5",
31+
"@types/react-syntax-highlighter": "^15.5.13",
32+
"@vitejs/plugin-react": "^4.3.4",
33+
"concurrently": "^9.1.2",
34+
"eslint": "^9.17.0",
35+
"eslint-plugin-react-hooks": "^5.0.0",
36+
"eslint-plugin-react-refresh": "^0.4.16",
37+
"globals": "^15.14.0",
38+
"json-schema-to-typescript": "^15.0.3",
39+
"monaco-editor": "^0.52.2",
40+
"prettier": "^3.4.2",
41+
"typescript": "~5.6.2",
42+
"typescript-eslint": "^8.18.2",
43+
"vite": "^6.0.5",
44+
"vite-plugin-checker": "^0.8.0",
45+
"vite-plugin-svgr": "^4.3.0"
46+
},
47+
"prettier": {
48+
"semi": false
49+
},
50+
"resolutions": {
51+
"@types/react": "^18.3.18"
52+
}
53+
}

0 commit comments

Comments
 (0)