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/pdl-live-react-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-react
+    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-react/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true

pdl-live-react/.gitignore

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

pdl-live-react/README.md

@@ -0,0 +1,46 @@
+# PDL Viewer
+
+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`.
+
+## 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
+```
+
+To start the watcher:
+```shell
+yarn dev
+```
+
+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
+```
+
+## Production
+
+This will generate production bundles in `dist/`
+```shell
+yarn build
+```

pdl-live-react/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: ollama/llama3.1:8b
+    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-react/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-react/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 },
+      ],
+    },
+  },
+)

pdl-live-react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/ai-governance--prompt.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PDL Viewer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

pdl-live-react/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "pdl-live",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently vite 'tsc --build --watch --noEmit'",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "format": "prettier --write 'tests/**/*.ts' 'src/**/*.{ts,tsx,css}'",
+    "preview": "vite preview",
+    "test:quality": "concurrently -n 'lint,types,formatting' 'yarn lint' 'tsc --build --noEmit' \"prettier --check 'tests/**/*.ts'  'src/**/*.{ts,tsx,css}'\"",
+    "test:ui": "yarn playwright test",
+    "test": "concurrently -n 'quality,playwright' 'yarn test:quality' 'yarn test:ui'"
+  },
+  "dependencies": {
+    "@patternfly/react-core": "^6.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.3",
+    "react-router-dom": "^7.1.2",
+    "react-syntax-highlighter": "^15.6.1",
+    "ts-pattern": "^5.6.0",
+    "yaml": "^2.7.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@playwright/test": "^1.49.1",
+    "@types/node": "22.10.5",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "json-schema-to-typescript": "^15.0.3",
+    "monaco-editor": "^0.52.2",
+    "prettier": "^3.4.2",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5",
+    "vite-plugin-checker": "^0.8.0",
+    "vite-plugin-svgr": "^4.3.0"
+  },
+  "prettier": {
+    "semi": false
+  },
+  "resolutions": {
+    "@types/react": "^18.3.18"
+  }
+}

pdl-live-react/playwright.config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'yarn dev',
+    timeout: 10*1000,
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+   },
+});