update v6 alphas (#54)

* update v6 alphas

* update node version in gh workflows

.github/workflows/build-lint-test.yml

@@ -16,14 +16,14 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
         with:
           path: |
-           node_modules
-           **/node_modules
+            node_modules
+            **/node_modules
           key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
         if: steps.yarn-cache.outputs.cache-hit != 'true'
@@ -52,14 +52,14 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
         with:
           path: |
-           node_modules
-           **/node_modules
+            node_modules
+            **/node_modules
           key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
         if: steps.yarn-cache.outputs.cache-hit != 'true'
@@ -89,15 +89,15 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
         with:
           path: |
-           node_modules
-           **/node_modules
-           ~/.cache/Cypress
+            node_modules
+            **/node_modules
+            ~/.cache/Cypress
           key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
         if: steps.yarn-cache.outputs.cache-hit != 'true'
@@ -130,15 +130,15 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
         with:
           path: |
-           node_modules
-           **/node_modules
-           ~/.cache/Cypress
+            node_modules
+            **/node_modules
+            ~/.cache/Cypress
           key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
         if: steps.yarn-cache.outputs.cache-hit != 'true'

.github/workflows/build.yml

@@ -32,14 +32,14 @@ jobs:
         if: steps.setup-cache.outputs.cache-hit != 'true'
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
         with:
           path: |
-           node_modules
-           **/node_modules
+            node_modules
+            **/node_modules
           key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
         if: steps.yarn-cache.outputs.cache-hit != 'true'
@@ -52,4 +52,4 @@ jobs:
           key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }}
       - name: Build dist
         run: yarn build
-        if: steps.dist.outputs.cache-hit != 'true'
+        if: steps.dist.outputs.cache-hit != 'true'

.github/workflows/release.yml

@@ -17,15 +17,15 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
         with:
           path: |
-           node_modules
-           **/node_modules
-           ~/.cache/Cypress
+            node_modules
+            **/node_modules
+            ~/.cache/Cypress
           key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
       - run: yarn install --frozen-lockfile
         if: steps.yarn-cache.outputs.cache-hit != 'true'

package.json

@@ -9,8 +9,9 @@
   ],
   "scripts": {
     "build": "yarn workspace @patternfly/react-console build",
+    "build:watch": "npm run build:watch -w @patternfly/react-console",
     "build:docs": "yarn workspace @patternfly/react-console docs:build",
-    "start": "yarn build && concurrently --kill-others \"yarn workspace @patternfly/react-console docs:develop\"",
+    "start": "concurrently --kill-others \"npm run build:watch\" \"npm run docs:develop -w @patternfly/react-console\"",
     "serve:docs": "yarn workspace @patternfly/react-console docs:serve",
     "clean": "yarn workspace @patternfly/react-console clean",
     "lint:js": "node --max-old-space-size=4096 node_modules/.bin/eslint packages --ext js,jsx,ts,tsx --cache",

packages/module/package.json

@@ -6,6 +6,7 @@
   "module": "dist/esm/index.js",
   "scripts": {
     "build": "yarn build:esm && yarn build:cjs",
+    "build:watch": "npm run build:esm -- --watch",
     "build:esm": "tsc --build --verbose ./tsconfig.json",
     "build:cjs": "tsc --build --verbose ./tsconfig.cjs.json",
     "clean": "rimraf dist",
@@ -34,8 +35,8 @@
   },
   "dependencies": {
     "@novnc/novnc": "^1.3.0",
-    "@patternfly/react-core": "^6.0.0-alpha.1",
-    "@patternfly/react-styles": "^6.0.0-alpha.1",
+    "@patternfly/react-core": "6.0.0-alpha.50",
+    "@patternfly/react-styles": "6.0.0-alpha.19",
     "@spice-project/spice-html5": "^0.2.1",
     "file-saver": "^1.3.8",
     "xterm": "^4.8.1",
@@ -46,14 +47,13 @@
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^5.0.15",
-    "@patternfly/patternfly": "^6.0.0-alpha.9",
+    "@patternfly/documentation-framework": "6.0.0-alpha.20",
+    "@patternfly/patternfly": "6.0.0-alpha.117",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/react-code-editor": "^6.0.0-alpha.1",
-    "@patternfly/react-table": "^6.0.0-alpha.1",
+    "@patternfly/react-code-editor": "6.0.0-alpha.50",
+    "@patternfly/react-table": "6.0.0-alpha.50",
     "rimraf": "^2.6.2",
     "serve": "^14.1.2",
-    "react-monaco-editor": "^0.51.0",
     "monaco-editor": "^0.34.1"
   }
 }

packages/module/patternfly-docs/generated/extensions/react-console/react.js

@@ -14,6 +14,7 @@ const pageData = {
   "section": "extensions",
   "subsection": "",
   "deprecated": false,
+  "template": false,
   "beta": true,
   "demo": false,
   "newImplementationLink": false,
@@ -362,9 +363,7 @@ pageData.liveContext = {
   SerialConsoleCustom,
   debounce
 };
-pageData.relativeImports = {
-
-};
+pageData.relativeImports = "import { SerialConsoleCustom } from 'content/extensions/react-console/examples/./SerialConsoleCustom.jsx';"
 pageData.examples = {
   'Basic Usage': props => 
     <Example {...pageData} {...props} thumbnail={srcImportbasicusage} {...{"code":"import React from 'react';\nimport { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';\nimport { SerialConsoleCustom } from './SerialConsoleCustom.jsx';\nimport { debounce } from '@patternfly/react-core';\n\nAccessConsolesVariants = () => {\n  const [status, setStatus] = React.useState('disconnected');\n  const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;\n  const onConnect = React.useCallback(() => {\n    setStatus('loading');\n    setConnected();\n  }, [setConnected])\n  const onDisconnect = React.useCallback(() => setStatus('disconnected'), [])\n  const ref = React.createRef();\n\n  return (\n    <AccessConsoles preselectedType=\"SerialConsole\">\n      <VncConsole host=\"localhost\" port=\"9090\" encrypt shared />\n      <SerialConsole\n        onConnect={onConnect}\n        status={status}\n        onDisconnect={onDisconnect}\n        onData={data => {\n          ref.current.onDataReceived(data);\n        }}\n        ref={ref}\n      />\n      <SerialConsoleCustom type='Serial Console pty2' />\n      <DesktopViewer spice={{ address: '127.0.0.1', port: '5900' }} vnc={{ address: '127.0.0.1', port: '5901' }} />\n    </AccessConsoles>\n  );\n};","title":"Basic Usage","lang":"js","isFullscreen":true}}>

packages/module/src/components/AccessConsoles/AccessConsoles.tsx

@@ -70,7 +70,7 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
-      id="pf-v5-c-console__type-selector"
+      id="pf-v6-c-console__type-selector"
       onClick={onToggleClick}
       aria-label="Console type toggle"
       isExpanded={isOpen}

packages/module/src/components/AccessConsoles/__snapshots__/AccessConsoles.test.tsx.snap

@@ -3,47 +3,44 @@
 exports[`AccessConsoles Empty 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-console"
+    class="pf-v6-c-console"
   />
 </DocumentFragment>
 `;
 
 exports[`AccessConsoles with DesktopViewer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-console"
+    class="pf-v6-c-console"
   />
 </DocumentFragment>
 `;
 
 exports[`AccessConsoles with SerialConsole and VncConsole as children 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-console"
+    class="pf-v6-c-console"
   >
     <div
-      class="pf-v5-c-console__actions"
+      class="pf-v6-c-console__actions"
     >
       <button
         aria-expanded="false"
         aria-label="Console type toggle"
-        class="pf-v5-c-menu-toggle"
-        id="pf-v5-c-console__type-selector"
+        class="pf-v6-c-menu-toggle"
+        id="pf-v6-c-console__type-selector"
         style="width: 100%;"
         type="button"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        />
-        <span
-          class="pf-v5-c-menu-toggle__controls"
+          class="pf-v6-c-menu-toggle__controls"
         >
           <span
-            class="pf-v5-c-menu-toggle__toggle-icon"
+            class="pf-v6-c-menu-toggle__toggle-icon"
           >
             <svg
               aria-hidden="true"
-              class="pf-v5-svg"
+              class="pf-v6-svg"
               fill="currentColor"
               height="1em"
               role="img"
@@ -65,30 +62,30 @@ exports[`AccessConsoles with SerialConsole and VncConsole as children 1`] = `
 exports[`AccessConsoles with SerialConsole as a single child 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-console"
+    class="pf-v6-c-console"
   />
 </DocumentFragment>
 `;
 
 exports[`AccessConsoles with VncConsole as a single child 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-console"
+    class="pf-v6-c-console"
   />
 </DocumentFragment>
 `;
 
 exports[`AccessConsoles with preselected SerialConsole 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-console"
+    class="pf-v6-c-console"
   >
     <div
-      class="pf-v5-c-console__actions-serial"
+      class="pf-v6-c-console__actions-serial"
     >
       <button
         aria-disabled="false"
-        class="pf-v5-c-button pf-m-secondary"
+        class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-1"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
@@ -98,7 +95,7 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
       </button>
       <button
         aria-disabled="false"
-        class="pf-v5-c-button pf-m-secondary"
+        class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-2"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
@@ -108,42 +105,46 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
       </button>
     </div>
     <div
-      class="pf-v5-c-console__serial"
+      class="pf-v6-c-console__serial"
     >
       <div
-        class="pf-v5-c-empty-state"
+        class="pf-v6-c-empty-state"
       >
         <div
-          class="pf-v5-c-empty-state__content"
+          class="pf-v6-c-empty-state__content"
         >
           <div
-            class="pf-v5-c-empty-state__header"
+            class="pf-v6-c-empty-state__header"
           >
             <div
-              class="pf-v5-c-empty-state__icon"
+              class="pf-v6-c-empty-state__icon"
             >
               <svg
                 aria-hidden="false"
                 aria-label="Contents"
                 aria-valuetext="Loading..."
-                class="pf-v5-c-spinner pf-m-xl"
+                class="pf-v6-c-spinner pf-m-xl"
                 role="progressbar"
                 viewBox="0 0 100 100"
               >
                 <circle
-                  class="pf-v5-c-spinner__path"
+                  class="pf-v6-c-spinner__path"
                   cx="50"
                   cy="50"
                   fill="none"
                   r="45"
                 />
               </svg>
             </div>
-          </div>
-          <div
-            class="pf-v5-c-empty-state__body"
-          >
-            Loading ...
+            <div
+              class="pf-v6-c-empty-state__title"
+            >
+              <h1
+                class="pf-v6-c-empty-state__title-text"
+              >
+                Loading ...
+              </h1>
+            </div>
           </div>
         </div>
       </div>
@@ -155,7 +156,7 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
 exports[`AccessConsoles with wrapped SerialConsole as a child 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-console"
+    class="pf-v6-c-console"
   >
     <p>
       Serial console text

packages/module/src/components/DesktopViewer/ConnectWithRemoteViewer.tsx

@@ -97,13 +97,13 @@ export const ConnectWithRemoteViewer: React.FunctionComponent<ConnectWithRemoteV
   // RDP button is rendered only if the protocol is available
   // If none of Spice or VNC is available, the .vv button is disabled (but rendered)
   return (
-    <div className="pf-v5-c-console__remote-viewer">
-      <div className="pf-v5-c-console__remote-viewer-launch">
-        <Button className="pf-v5-c-console__remote-viewer-launch-vv" onClick={onClickVV} isDisabled={!_console}>
+    <div className="pf-v6-c-console__remote-viewer">
+      <div className="pf-v6-c-console__remote-viewer-launch">
+        <Button className="pf-v6-c-console__remote-viewer-launch-vv" onClick={onClickVV} isDisabled={!_console}>
           {textConnectWithRemoteViewer}
         </Button>
         {!!rdp && (
-          <Button onClick={onClickRDP} className="pf-v5-c-console__remote-viewer-launch-rdp">
+          <Button onClick={onClickRDP} className="pf-v6-c-console__remote-viewer-launch-rdp">
             {textConnectWithRDP}
           </Button>
         )}

packages/module/src/components/DesktopViewer/ManualConnection.tsx

@@ -61,7 +61,7 @@ export const ManualConnection: React.FunctionComponent<ManualConnectionProps> =
   const rdpAddress = rdp && rdp.address !== address ? rdp.address : null;
 
   return (
-    <div className="pf-v5-c-console__manual-connection">
+    <div className="pf-v6-c-console__manual-connection">
       <Title headingLevel="h2" size="3xl">
         {textManualConnection}
       </Title>