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]>

.github/workflows/build.yml

@@ -55,8 +55,8 @@ jobs:
         with:
           node-version: 22
       - name: Install dependencies
-        run: npm install
+        run: yarn
       - name: Generate pdl_ast.d.ts
         run: npx json2ts ../src/pdl/pdl-schema.json src/pdl_ast.d.ts --unreachableDefinitions
       - name: Build viewer
-        run: npm run build
+        run: yarn build

.github/workflows/viewer-tests.yml

@@ -0,0 +1,32 @@
+name: Viewer Tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+# cancel any prior runs for this workflow and this PR (or branch)
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  viewer:
+    name: Test PDL live viewer
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./pdl-live
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Test pdl-live viewer
+        run: yarn test

.gitignore

@@ -155,4 +155,10 @@ pdl-live/package-lock.json
 _site
 
 # Generated version
-src/pdl/_version.py
+src/pdl/_version.py
+
+# Emacs temps
+*~
+
+# Mac
+.DS_Store

pdl-live/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

pdl-live/README.md

@@ -1,24 +1,46 @@
-Install the dependencies:
-```
-npm install
-```
+# PDL Viewer
 
-Update the type definitions (if needed):
-```
-npx json2ts ../src/pdl/pdl-schema.json src/pdl_ast.d.ts --unreachableDefinitions
-```
+To get started, make sure you have a recent version of
+[NodeJS](https://nodejs.org/en/download) installed and
+[Yarn](https://classic.yarnpkg.com/lang/en/docs/install). On MacOS,
+these can be installed via `brew install node yarn`.
 
-Automatically format the code
-```
-npm run fix
+## Implementation Details
+
+The PDL Viewer uses [Vite](https://vite.dev/) for bundling,
+[React](https://react.dev/) for the UI,
+[PatternFly](https://www.patternfly.org/) for UI components, and is
+written in [TypeScript](https://www.typescriptlang.org/). The React
+components are written in [TSX](https://react.dev/learn/typescript)
+(the Typescript variant of JSX).
+
+## Development
+
+To install dependencies:
+```shell
+yarn
 ```
 
-Package the code:
+To start the watcher:
+```shell
+yarn dev
 ```
-npm run build
+
+Which will open up a local port which you can view in your favorite
+browser. Edits to any source files will result in quick and automatic
+updates to that running UI.
+
+## Tests
+
+There are currently only simple tests for: linting, formatting, and
+type checking. These can be run via:
+```shell
+yarn test
 ```
 
-Open the UI:
+## Production
+
+This will generate production bundles in `dist/`
+```shell
+yarn build
 ```
-open index.html
-```

pdl-live/demos/error.pdl

@@ -0,0 +1,25 @@
+description: Creating JSON Data
+defs:
+  data:
+    read: ./gen-data.yaml
+    parser: yaml
+    spec: { questions: [str], answers: [obj] }
+text:
+  - model: replicate/ibm-granite/granite-3.0-8b-instruct
+    def: model_output
+    spec: {name: str, age: int}
+    input:
+      text:
+      - for: 
+          question: ${ data.questions }
+          answer: ${ data.answers }
+        repeat: |
+            ${ question }
+            ${ answer }
+      - > 
+        Question: Create a JSON object with fields 'name' and 'age' 
+        and set them appropriately. Write the age in letters.
+    parser: yaml
+    parameters:
+      stop_sequences: "\n"
+      temperature: 0

pdl-live/demos/gen-data.yaml

@@ -0,0 +1,16 @@
+source_code: 
+  |
+  @SuppressWarnings("unchecked")
+  public static Map<String, String> deserializeOffsetMap(String lastSourceOffset) throws IOException {
+    Map<String, String> offsetMap;
+    if (lastSourceOffset == null || lastSourceOffset.isEmpty()) {    
+      offsetMap = new HashMap<>();  
+    } else {
+      offsetMap = JSON_MAPPER.readValue(lastSourceOffset, Map.class);  
+    }
+    return offsetMap;
+  }
+repo_info: 
+  repo: streamsets/datacollector
+  path: stagesupport/src/main/java/com/.../OffsetUtil.java
+  function_name: OffsetUtil.deserializeOffsetMap

pdl-live/eslint.config.js

@@ -0,0 +1,36 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist','test-results'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_",
+          "caughtErrorsIgnorePattern": "^_"
+        }
+      ],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)