WebConsole: update dependencies, update test snapshots (#1732)

* Update dependencies
* Update playwright tests
Signed-off-by: George <bulakh.96@gmail.com>

.arg

@@ -1,2 +1,2 @@
 # File used by earthly
-PLAYWRIGHT_SNAPSHOTS_COMMIT=7d79666084879aa002dde16df01c6b69b28f77ab
+PLAYWRIGHT_SNAPSHOTS_COMMIT=6d7a9e13a28a4a95a92ef5ca3acba864ed399ee5

.devcontainer/Dockerfile

@@ -26,7 +26,8 @@ RUN apt-get update && \
    libssl-dev \
    libsasl2-dev \
    ca-certificates \
-   gnupg
+   gnupg \
+   protobuf-compiler
 
 ## Setup Java and Python
 

Earthfile

@@ -531,7 +531,7 @@ all-tests:
     BUILD +openapi-checker
     BUILD +test-sql
     BUILD +integration-tests
-    #BUILD +ui-playwright-tests
+    # BUILD +ui-playwright-tests
     BUILD +test-docker-compose
     # BUILD +test-docker-compose-stable
     BUILD +test-debezium-mysql

docs/contributors/dev-flow.md

@@ -8,7 +8,7 @@ Spin up the Devcontainer, e.g. by opening the Feldera repository in VS Code with
 
 On your first launch you might need to change the ownership of the files:
 ```bash
-sudo chown -R user /workspaces/dbsp
+sudo chown -R user /workspaces/feldera
 ```
 
 Build the SQL Compiler:

web-console/.github/workflows/playwright.yml

@@ -19,7 +19,7 @@ jobs:
       run: yarn playwright install --with-deps
     - name: Run Playwright tests
       run: yarn playwright test
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v4
       if: always()
       with:
         name: playwright-report

web-console/next.config.js

@@ -1,5 +1,5 @@
 
-const UnpluginIcons = require("unplugin-icons/webpack")
+const { default: UnpluginIcons } = require("unplugin-icons/webpack")
 const { FileSystemIconLoader } = require("unplugin-icons/loaders")
 
 /** @type {import("next").NextConfig} */
@@ -36,7 +36,7 @@ module.exports = {
       ],
     })
     config.plugins.push(
-      require('unplugin-icons/webpack')({
+      UnpluginIcons({
         compiler: 'jsx',
         jsx: 'react',
       }),

web-console/package.json

@@ -25,7 +25,7 @@
     "generate-openapi": "openapi --input ../openapi.json --output ./src/lib/services/manager && yarn format",
     "build-openapi": "cd .. && cargo run --bin pipeline-manager -- --dump-openapi",
     "test": "PLAYWRIGHT_API_ORIGIN=http://localhost:8080/ PLAYWRIGHT_APP_ORIGIN=http://localhost:8080/ DISPLAY= yarn playwright test",
-    "test:ui": "PLAYWRIGHT_API_ORIGIN=http://localhost:8080/ PLAYWRIGHT_APP_ORIGIN=http://localhost:8080/ DISPLAY= yarn playwright test --ui-port=0",
+    "test:ui": "PLAYWRIGHT_API_ORIGIN=http://localhost:8080/ PLAYWRIGHT_APP_ORIGIN=http://localhost:8080/ DISPLAY= yarn playwright test --ui-host=0.0.0.0",
     "test:report": "yarn playwright show-report",
     "test:prepare": "git clone --depth 1 https://github.com/feldera/playwright-snapshots.git"
   },
@@ -37,94 +37,94 @@
   ],
   "devDependencies": {
     "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^8.0.2",
-    "@hookform/resolvers": "^3.2.0",
-    "@iconify-json/bx": "^1.1.7",
+    "@emotion/styled": "^11.11.5",
+    "@faker-js/faker": "^8.4.1",
+    "@hookform/resolvers": "^3.3.4",
+    "@iconify-json/bx": "^1.1.10",
     "@iconify-json/bxl": "^1.1.10",
-    "@iconify-json/mdi": "^1.1.64",
+    "@iconify-json/mdi": "^1.1.66",
     "@iconify-json/svg-spinners": "^1.1.2",
-    "@iconify-json/tabler": "^1.1.106",
-    "@mantine/hooks": ">=7.6.1 <7.7.1 || ^7.7.2",
-    "@monaco-editor/react": "^4.5.1",
-    "@mui/base": "^5.0.0-beta.38",
-    "@mui/icons-material": "^5.15.12",
-    "@mui/lab": "^5.0.0-alpha.167",
-    "@mui/material": "^5.15.12",
-    "@mui/system": "^5.15.12",
-    "@mui/x-data-grid-pro": "^6.19.6",
-    "@mui/x-date-pickers-pro": "^6.19.6",
-    "@playwright/test": "^1.42.1",
+    "@iconify-json/tabler": "^1.1.111",
+    "@mantine/hooks": "^7.9.1",
+    "@monaco-editor/react": "^4.6.0",
+    "@mui/base": "^5.0.0-beta.44",
+    "@mui/icons-material": "^5.15.17",
+    "@mui/lab": "^5.0.0-alpha.170",
+    "@mui/material": "^5.15.17",
+    "@mui/system": "^5.15.15",
+    "@mui/x-data-grid-pro": "^7.3.2",
+    "@mui/x-date-pickers-pro": "^7.3.2",
+    "@playwright/experimental-ct-react": "^1.44.0",
+    "@playwright/test": "^1.44.0",
     "@popperjs/core": "^2.11.8",
-    "@react-oauth/google": "^0.11.1",
+    "@react-oauth/google": "^0.12.1",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
-    "@tanstack/react-query": "^5.25.0",
-    "@types/diff": "^5.0.3",
-    "@types/node": "^20.11.25",
-    "@types/nprogress": "^0.2.0",
-    "@types/papaparse": "^5.3.7",
-    "@types/react": "^18.2.64",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "ahooks": "^3.7.10",
-    "ajv": "^8.12.0",
-    "apexcharts": "^3.46.0",
+    "@tanstack/react-query": "^5.35.1",
+    "@types/diff": "^5.2.1",
+    "@types/node": "^20.12.11",
+    "@types/nprogress": "^0.2.3",
+    "@types/papaparse": "^5.3.14",
+    "@types/react": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
+    "ahooks": "^3.7.11",
+    "ajv": "^8.13.0",
+    "apexcharts": "^3.49.0",
     "apexcharts-clevision": "^3.28.5",
     "array-join": "^3.1.1",
     "bignumber.js": "^9.1.2",
-    "clsx": "^2.0.0",
-    "csv-parse": "^5.4.0",
+    "clsx": "^2.1.1",
+    "csv-parse": "^5.5.5",
     "d3-format": "^3.1.0",
     "d3-random": "^3.0.1",
-    "dayjs": "^1.11.9",
-    "diff": "^5.1.0",
+    "dayjs": "^1.11.11",
+    "diff": "^5.2.0",
     "encoding": "^0.1.13",
-    "eslint": "^8.46.0",
-    "eslint-config-next": "^14.1.3",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.3",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-typescript": "^3.6.0",
-    "eslint-plugin-import": "^2.28.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-next": "^0.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.34.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "jwt-decode": "^4.0.0",
-    "mdi-material-ui": "^7.7.0",
-    "monaco-editor": "^0.44.0",
+    "mdi-material-ui": "^7.9.1",
+    "monaco-editor": "^0.48.0",
     "new-github-issue-url": "^1.0.0",
-    "next": "^14.0.2",
-    "next13-progressbar": "^1.0.3",
+    "next": "^14.2.3",
+    "next13-progressbar": "^1.2.1",
     "nprogress": "^0.2.0",
     "numerable": "^0.3.15",
     "papaparse": "^5.4.1",
-    "postcss": "^8.4.35",
-    "prettier": "^3.1.0",
-    "react": "^18.2.0",
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
-    "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.10",
-    "react-hook-form": "^7.51.0",
-    "react-hook-form-mui": "^6.6.1",
-    "react-keyed-flatten-children": "^2.2.1",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
+    "react-hook-form": "^7.51.4",
+    "react-hook-form-mui": "^7.0.0",
+    "react-keyed-flatten-children": "^3.0.0",
     "react-markdown": "^9.0.1",
     "react-perfect-scrollbar": "^1.5.8",
     "react-popper": "^2.3.0",
-    "react-redux": "^8.1.2",
-    "reactflow": "^11.10.4",
-    "tiny-invariant": "^1.3.1",
+    "reactflow": "^11.11.3",
+    "tiny-invariant": "^1.3.3",
     "true-json-bigint": "^1.0.1",
-    "ts-pattern": "^5.0.8",
-    "typescript": "^5.4.2",
-    "unplugin-icons": "^0.17.4",
+    "ts-pattern": "^5.1.1",
+    "typescript": "^5.4.5",
+    "unplugin-icons": "^0.19.0",
     "use-debounce": "^10.0.0",
-    "valibot": "^0.20.1",
-    "yaml": "^2.3.1",
-    "yup": "^1.2.0",
-    "zustand": "^4.4.1"
+    "valibot": "^0.30.0",
+    "vite": "^5.2.11",
+    "yaml": "^2.4.2",
+    "zustand": "^4.5.2"
   }
 }

web-console/src/app/(root)/(authenticated)/(app)/services/list/page.tsx

@@ -77,8 +77,9 @@ const ServiceList = () => {
     {
       field: 'type',
       headerName: 'Type',
-      valueGetter: params => {
-        return params.row.config_type
+      display: 'flex',
+      valueGetter: (_, row) => {
+        return row.config_type
       },
       renderCell: row => {
         return <Chip label={row.row.config_type} sx={{ borderRadius: 1 }} />
@@ -89,31 +90,29 @@ const ServiceList = () => {
       headerName: 'Name',
       maxWidth: 180,
       flex: 1,
-      valueGetter: params => {
-        return params.row.name
-      }
+      display: 'flex'
     },
     {
       field: 'service',
       headerName: 'Service',
       maxWidth: 250,
       flex: 1,
-      valueGetter: params => {
-        return getServiceConfigThumb(params.row)
+      display: 'flex',
+      valueGetter: (_, row) => {
+        return getServiceConfigThumb(row)
       }
     },
     {
       field: 'description',
       headerName: 'Description',
       flex: 1,
-      valueGetter: params => {
-        return params.row.description
-      }
+      display: 'flex'
     },
     {
       field: 'actions',
       headerName: 'Actions',
       width: 120,
+      display: 'flex',
       renderCell: ServiceActions
     }
   ]

web-console/src/app/(root)/layout.tsx

@@ -12,7 +12,7 @@ import ThemeComponent from 'src/@core/theme/ThemeComponent'
 import { useTheme } from '@mui/material/styles'
 import { LocalizationProvider } from '@mui/x-date-pickers'
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
-import { LicenseInfo } from '@mui/x-license-pro'
+import { LicenseInfo } from '@mui/x-license'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 import EmotionRootStyleRegistry from './EmotionRootStyleRegistry'

web-console/src/lib/components/analytics/TableSqlPrograms.tsx

@@ -107,27 +107,14 @@ export const TableSqlPrograms = () => {
   // Table columns
   const columns: GridColDef[] = [
     {
-      field: 'program_id',
-      headerName: 'ID',
-      renderCell: (params: GridRenderCellParams) => {
-        const { row } = params
-
-        return (
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-              <Typography noWrap variant='body2' sx={{ color: 'text.primary', fontWeight: 600 }}>
-                {row.program_id}
-              </Typography>
-            </Box>
-          </Box>
-        )
-      }
+      field: 'program_id'
     },
     {
       flex: 0.3,
       minWidth: 150,
       field: 'name',
       headerName: 'Name',
+      display: 'flex',
       renderCell: (params: GridRenderCellParams) => (
         <Typography variant='body2' sx={{ color: 'text.primary' }} data-testid={`box-program-name-${params.row.name}`}>
           {params.row.name}
@@ -150,6 +137,7 @@ export const TableSqlPrograms = () => {
       flex: 0.45,
       field: 'description',
       headerName: 'Description',
+      display: 'flex',
       renderCell: (params: GridRenderCellParams) => (
         <Typography
           variant='body2'
@@ -165,6 +153,7 @@ export const TableSqlPrograms = () => {
       flex: 0.15,
       field: 'status',
       headerName: 'Status',
+      display: 'flex',
       renderCell: (params: GridRenderCellParams) => {
         const { tooltip, ...statusChipProps } = getStatusChipProps(params.row.status)
         return (
@@ -179,6 +168,7 @@ export const TableSqlPrograms = () => {
       sortable: false,
       field: 'actions',
       headerName: 'Actions',
+      display: 'flex',
       renderCell: (params: GridRenderCellParams<ProgramDescr>) => {
         return (
           <Box data-testid={'box-program-actions-' + params.row.name}>