Merge branch 'trunk' into release-preparation-4.33.0

Author: diemol

.github/workflows/ci-grid-ui.yml

@@ -0,0 +1,38 @@
+name: CI - Grid UI
+
+on:
+  pull_request:
+    paths:
+      - 'javascript/grid-ui/**'
+  push:
+    branches:
+      - trunk
+    paths:
+      - 'javascript/grid-ui/**'
+  workflow_dispatch:
+  workflow_call:
+
+jobs:
+  grid-ui-tests:
+    runs-on: ubuntu-latest
+    name: Grid UI Component Tests
+    steps:
+      - name: Checkout source tree
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 50
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+          cache-dependency-path: 'javascript/grid-ui/package.json'
+
+      - name: Install dependencies
+        working-directory: javascript/grid-ui
+        run: npm install
+
+      - name: Run component tests
+        working-directory: javascript/grid-ui
+        run: npm test

common/extensions/BUILD.bazel

@@ -32,6 +32,9 @@ exports_files(
         "webextensions-selenium-example.xpi",
         "webextensions-selenium-example.zip",
         "webextensions-selenium-example-unsigned.zip",
+        "webextensions-selenium-example.crx",
+        "webextensions-selenium-example",
+        "webextensions-selenium-example-signed",
     ],
     visibility = [
         "//java/test/org/openqa/selenium/firefox:__pkg__",

javascript/grid-ui/jest.config.cjs

@@ -0,0 +1,41 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  testMatch: ['<rootDir>/src/tests/**/*.test.tsx'],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(js|jsx)$': 'ts-jest'
+  },
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': '<rootDir>/src/tests/__mocks__/styleMock.js',
+    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/src/tests/__mocks__/styleMock.js'
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!(pretty-ms|parse-ms)/)'
+  ],
+  setupFilesAfterEnv: [
+    '<rootDir>/src/setupTests.tsx',
+    '<rootDir>/src/tests/setup-jest.js'
+  ],
+  // Suppress act() warnings from Material-UI components
+  testEnvironmentOptions: {
+    suppressConsole: true
+  }
+};

javascript/grid-ui/package.json

@@ -27,7 +27,8 @@
     "source-map-explorer": "2.5.3"
   },
   "scripts": {
-    "build": "bazel build //javascript/grid-ui:bundle"
+    "build": "bazel build //javascript/grid-ui:bundle",
+    "test": "jest --config jest.config.cjs"
   },
   "homepage": "./ui",
   "browser": {
@@ -47,11 +48,13 @@
     ]
   },
   "devDependencies": {
-    "@babel/preset-react": "7.26.3",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "14.3.1",
     "@testing-library/user-event": "14.5.2",
     "esbuild": "0.24.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.3.4",
     "ts-standard": "12.0.2",
     "typescript": "5.7.2"
   },

javascript/grid-ui/src/components/Node/Node.tsx

@@ -15,15 +15,92 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { Box, Card, CardContent, Grid, Typography } from '@mui/material'
-import React from 'react'
+import { Box, Card, CardContent, Dialog, DialogActions, DialogContent, DialogTitle, Grid, IconButton, Typography, Button, keyframes, styled } from '@mui/material'
+import React, { useState, useRef } from 'react'
+import { Videocam as VideocamIcon } from '@mui/icons-material'
 import NodeDetailsDialog from './NodeDetailsDialog'
 import NodeLoad from './NodeLoad'
 import Stereotypes from './Stereotypes'
 import OsLogo from '../common/OsLogo'
+import LiveView from '../LiveView/LiveView'
+
+const pulse = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.7);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 0 5px rgba(25, 118, 210, 0);
+    transform: scale(1.05);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
+    transform: scale(1);
+  }
+`
+
+const LiveIconButton = styled(IconButton)(({ theme }) => ({
+  marginLeft: theme.spacing(1),
+  position: 'relative',
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    borderRadius: '50%',
+    animation: `${pulse} 2s infinite`,
+    zIndex: 0
+  }
+}))
+
+function getVncUrl(session, origin) {
+  try {
+    const parsed = JSON.parse(session.capabilities)
+    let vnc = parsed['se:vnc'] ?? ''
+    if (vnc.length > 0) {
+      try {
+        const url = new URL(origin)
+        const vncUrl = new URL(vnc)
+        url.pathname = vncUrl.pathname
+        url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
+        return url.href
+      } catch (error) {
+        console.log(error)
+        return ''
+      }
+    }
+    return ''
+  } catch (e) {
+    return ''
+  }
+}
 
 function Node (props) {
-  const { node } = props
+  const { node, sessions = [], origin } = props
+  const [liveViewSessionId, setLiveViewSessionId] = useState('')
+  const liveViewRef = useRef<{ disconnect: () => void }>(null)
+
+  const vncSession = sessions.find(session => {
+    try {
+      const capabilities = JSON.parse(session.capabilities)
+      return capabilities['se:vnc'] !== undefined && capabilities['se:vnc'] !== ''
+    } catch (e) {
+      return false
+    }
+  })
+
+  const handleLiveViewIconClick = () => {
+    if (vncSession) {
+      setLiveViewSessionId(vncSession.id)
+    }
+  }
+
+  const handleDialogClose = () => {
+    if (liveViewRef.current) {
+      liveViewRef.current.disconnect()
+    }
+    setLiveViewSessionId('')
+  }
   const getCardStyle = (status: string) => ({
     height: '100%',
     flexGrow: 1,
@@ -32,6 +109,7 @@ function Node (props) {
   })
 
   return (
+    <>
     <Card sx={getCardStyle(node.status)}>
       <CardContent sx={{ pl: 2, pr: 1 }}>
         <Grid
@@ -62,14 +140,54 @@ function Node (props) {
             </Typography>
           </Grid>
           <Grid item xs={12}>
+            <Box display="flex" alignItems="center">
             <Stereotypes stereotypes={node.slotStereotypes}/>
+              {vncSession && (
+                <LiveIconButton onClick={handleLiveViewIconClick} size='medium' color="primary">
+                  <VideocamIcon data-testid="VideocamIcon" />
+                </LiveIconButton>
+              )}
+            </Box>
           </Grid>
           <Grid item xs={12}>
             <NodeLoad node={node}/>
           </Grid>
         </Grid>
       </CardContent>
     </Card>
+    {vncSession && liveViewSessionId && (
+      <Dialog
+        onClose={handleDialogClose}
+        aria-labelledby='live-view-dialog'
+        open={liveViewSessionId === vncSession.id}
+        fullWidth
+        maxWidth='xl'
+        fullScreen
+      >
+        <DialogTitle id='live-view-dialog'>
+          <Typography gutterBottom component='span' sx={{ paddingX: '10px' }}>
+            <Box fontWeight='fontWeightBold' mr={1} display='inline'>
+              Node Session Live View
+            </Box>
+            {node.uri}
+          </Typography>
+        </DialogTitle>
+        <DialogContent dividers sx={{ height: '600px' }}>
+          <LiveView
+            ref={liveViewRef as any}
+            url={getVncUrl(vncSession, origin)}
+            scaleViewport
+            onClose={handleDialogClose}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleDialogClose} color='primary' variant='contained'>
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    )}
+    </>
   )
 }