feat(v5): Update to import pf v5 alphas and release a v5 alpha

.github/workflows/check-pr.yml

@@ -3,6 +3,7 @@ on:
   pull_request:
     branches:
       - main
+      - v4
 jobs:
   call-build-lint-test-workflow:
     uses: ./.github/workflows/build-lint-test.yml

.github/workflows/release.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - main
+      - v4
 jobs:
   call-build-lint-test-workflow:
     uses: ./.github/workflows/build-lint-test.yml

jest.config.js

@@ -10,10 +10,11 @@ module.exports = {
   transform: {
     '^.+\\.[jt]sx?$': 'babel-jest'
   },
-  transformIgnorePatterns: ['node_modules/(?!@novnc)'],
+  transformIgnorePatterns: ['node_modules/(?!@novnc|@patternfly)'],
   setupFilesAfterEnv: ['<rootDir>/testSetup.ts'],
   moduleNameMapper: {
     '\\.(css|less)$': '<rootDir>/styleMock.js'
   },
-  testEnvironment: 'jsdom'
+  testEnvironment: 'jsdom',
+  dryRun: true
 };

packages/module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-console",
-  "version": "4.93.38",
+  "version": "5.0.0-alpha.0",
   "description": "This package provides VncConsole, SerialConsole and DesktopViewer React components to be used alongside patternfly-react to access virtual machine or server consoles.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -29,12 +29,13 @@
   },
   "homepage": "https://github.com/patternfly/react-console/#readme",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "alpha"
   },
   "dependencies": {
     "@novnc/novnc": "^1.3.0",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-styles": "^4.92.6",
+    "@patternfly/react-core": "^5.0.0-alpha.50",
+    "@patternfly/react-styles": "^5.0.0-alpha.5",
     "@spice-project/spice-html5": "^0.2.1",
     "file-saver": "^1.3.8",
     "xterm": "^4.8.1",
@@ -45,10 +46,10 @@
     "react-dom": "^16.8 || ^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^1.8.1",
-    "@patternfly/patternfly": "^4.224.2",
-    "@patternfly/react-table": "^4.112.39",
-    "@patternfly/react-code-editor": "^4.82.113",
+    "@patternfly/documentation-framework": "^2.0.0-alpha.12",
+    "@patternfly/patternfly": "^5.0.0-alpha.37",
+    "@patternfly/react-table": "^5.0.0-alpha.51",
+    "@patternfly/react-code-editor": "^5.0.0-alpha.51",
     "rimraf": "^2.6.2",
     "@patternfly/patternfly-a11y": "^4.3.1",
     "serve": "^14.1.2"

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

@@ -14,7 +14,6 @@ const pageData = {
   "section": "extensions",
   "subsection": "",
   "source": "react",
-  "tabName": null,
   "slug": "/extensions/react-console/react",
   "sourceLink": "https://github.com/patternfly/react-console",
   "relPath": "packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md",

packages/module/patternfly-docs/generated/index.js

@@ -7,7 +7,6 @@ module.exports = {
     section: "extensions",
     subsection: "",
     source: "react",
-    tabName: null,
     Component: () => import(/* webpackChunkName: "extensions/react-console/react/index" */ './extensions/react-console/react')
   }
 };

packages/module/release.config.js

@@ -1,6 +1,9 @@
 
 module.exports = {
-  branches: [{ name: 'main', channel: 'prerelease' }],
+  branches: [
+    { name: 'v4', channel: 'prerelease' },
+    { name: 'main', channel: 'alpha', prerelease: 'alpha' }
+  ],
   analyzeCommits: {
     preset: 'angular'
   },
@@ -10,5 +13,6 @@ module.exports = {
     '@semantic-release/github',
     '@semantic-release/npm'
   ],
-  tagFormat: 'v${version}'
+  tagFormat: 'v${version}',
+  dryRun: true
 };

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

@@ -69,7 +69,7 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
       }
     });
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 

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

@@ -129,22 +129,22 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
           <div
             class="pf-c-empty-state__icon"
           >
-            <span
+            <svg
+              aria-hidden="false"
               aria-label="Contents"
               aria-valuetext="Loading..."
               class="pf-c-spinner pf-m-xl"
               role="progressbar"
+              viewBox="0 0 100 100"
             >
-              <span
-                class="pf-c-spinner__clipper"
-              />
-              <span
-                class="pf-c-spinner__lead-ball"
+              <circle
+                class="pf-c-spinner__path"
+                cx="50"
+                cy="50"
+                fill="none"
+                r="45"
               />
-              <span
-                class="pf-c-spinner__tail-ball"
-              />
-            </span>
+            </svg>
           </div>
           <div
             class="pf-c-empty-state__body"

packages/module/src/components/SerialConsole/SerialConsole.tsx

@@ -117,7 +117,7 @@ const SerialConsoleBase: React.FunctionComponent<SerialConsoleProps> = ({
     default:
       terminal = (
         <EmptyState>
-          <EmptyStateIcon variant="container" component={Spinner} />
+          <EmptyStateIcon  icon={Spinner} />
           <EmptyStateBody>{textLoading}</EmptyStateBody>
         </EmptyState>
       );

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

@@ -70,22 +70,22 @@ exports[`SerialConsole in the LOADING state 1`] = `
         <div
           class="pf-c-empty-state__icon"
         >
-          <span
+          <svg
+            aria-hidden="false"
             aria-label="Contents"
             aria-valuetext="Loading..."
             class="pf-c-spinner pf-m-xl"
             role="progressbar"
+            viewBox="0 0 100 100"
           >
-            <span
-              class="pf-c-spinner__clipper"
-            />
-            <span
-              class="pf-c-spinner__lead-ball"
-            />
-            <span
-              class="pf-c-spinner__tail-ball"
-            />
-          </span>
+            <circle
+              class="pf-c-spinner__path"
+              cx="50"
+              cy="50"
+              fill="none"
+              r="45"
+            />
+          </svg>
         </div>
         <div
           class="pf-c-empty-state__body"

packages/module/src/components/SpiceConsole/SpiceActions.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';
+import {
+	Dropdown as DropdownDeprecated,
+	DropdownItem as DropdownItemDeprecated,
+	DropdownToggle as DropdownToggleDeprecated
+} from '@patternfly/react-core/deprecated';
 
 export interface SpiceActionsProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback for when Ctrl+Alt+Delete item is selected */
@@ -17,17 +21,17 @@ export const SpiceActions: React.FunctionComponent<SpiceActionsProps> = ({
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
-    <Dropdown
+    <DropdownDeprecated
       id="console-send-shortcut"
       onSelect={() => {
         setIsOpen(!isOpen);
         onCtrlAltDel();
       }}
       isOpen={isOpen}
       toggle={
-        <DropdownToggle onToggle={isDropdownOpen => setIsOpen(isDropdownOpen)}>{textSendShortcut}</DropdownToggle>
+        <DropdownToggleDeprecated onToggle={(_event, isDropdownOpen) => setIsOpen(isDropdownOpen)}>{textSendShortcut}</DropdownToggleDeprecated>
       }
-      dropdownItems={[<DropdownItem key="ctrl-alt-delete">{textCtrlAltDel}</DropdownItem>]}
+      dropdownItems={[<DropdownItemDeprecated key="ctrl-alt-delete">{textCtrlAltDel}</DropdownItemDeprecated>]}
     />
   );
 };

packages/module/src/components/VncConsole/VncActions.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
-import { Dropdown, DropdownItem, DropdownToggle, Button, ButtonVariant } from '@patternfly/react-core';
+import {
+	Button,
+	ButtonVariant
+} from '@patternfly/react-core';
+import {
+	Dropdown as DropdownDeprecated,
+	DropdownItem as DropdownItemDeprecated,
+	DropdownToggle as DropdownToggleDeprecated
+} from '@patternfly/react-core/deprecated';
 
 import styles from '@patternfly/react-styles/css/components/Consoles/VncConsole';
 
@@ -27,19 +35,19 @@ export const VncActions: React.FunctionComponent<VncActionProps> = ({
   const toolbar = (
     <div className={css(styles.consoleActionsVnc)}>
       {additionalButtons}
-      <Dropdown
+      <DropdownDeprecated
         id="pf-c-console__send-shortcut"
         onSelect={() => setIsOpen(false)}
         toggle={
-          <DropdownToggle id="pf-c-console__actions-vnc-toggle-id" onToggle={() => setIsOpen(!isOpen)}>
+          <DropdownToggleDeprecated id="pf-c-console__actions-vnc-toggle-id" onToggle={() => setIsOpen(!isOpen)}>
             {textSendShortcut}
-          </DropdownToggle>
+          </DropdownToggleDeprecated>
         }
         isOpen={isOpen}
         dropdownItems={[
-          <DropdownItem onClick={onCtrlAltDel} key="ctrl-alt-delete">
+          <DropdownItemDeprecated onClick={onCtrlAltDel} key="ctrl-alt-delete">
             {textCtrlAltDel}
-          </DropdownItem>
+          </DropdownItemDeprecated>
         ]}
       />
       <Button variant={ButtonVariant.secondary} onClick={onDisconnect}>

packages/module/src/components/VncConsole/VncConsole.tsx

@@ -230,7 +230,7 @@ export const VncConsole: React.FunctionComponent<VncConsoleProps> = ({
     default:
       emptyState = (
         <EmptyState>
-          <EmptyStateIcon variant="container" component={Spinner} />
+          <EmptyStateIcon  icon={Spinner} />
           <EmptyStateBody>{textConnecting}</EmptyStateBody>
         </EmptyState>
       );

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

@@ -15,22 +15,22 @@ exports[`placeholder render test 1`] = `
           <div
             class="pf-c-empty-state__icon"
           >
-            <span
+            <svg
+              aria-hidden="false"
               aria-label="Contents"
               aria-valuetext="Loading..."
               class="pf-c-spinner pf-m-xl"
               role="progressbar"
+              viewBox="0 0 100 100"
             >
-              <span
-                class="pf-c-spinner__clipper"
+              <circle
+                class="pf-c-spinner__path"
+                cx="50"
+                cy="50"
+                fill="none"
+                r="45"
               />
-              <span
-                class="pf-c-spinner__lead-ball"
-              />
-              <span
-                class="pf-c-spinner__tail-ball"
-              />
-            </span>
+            </svg>
           </div>
           <div
             class="pf-c-empty-state__body"