Skip to content

Commit b24b181

Browse files
thatblindgeyethatblindgeye
authored
chore(deps): Allowed support for React19 (#93)
* chore(deps): Allowed support for React19 * Updated build failures
1 parent aa22d20 commit b24b181

35 files changed

+171
-191
lines changed

‎.eslintrc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"plugin:react/recommended",
1010
"plugin:react-hooks/recommended",
1111
"plugin:@typescript-eslint/recommended",
12+
"plugin:react/jsx-runtime",
1213
"prettier"
1314
],
1415
"overrides": [

‎packages/module/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@
4545
"xterm-addon-fit": "^0.8.0"
4646
},
4747
"peerDependencies": {
48-
"react": "^17 || ^18",
49-
"react-dom": "^17 || ^18"
48+
"react": "^17 || ^18 || ^19",
49+
"react-dom": "^17 || ^18 || ^19"
5050
},
5151
"devDependencies": {
5252
"@patternfly/documentation-framework": "6.0.0-alpha.108",

‎packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ sourceLink: https://github.com/patternfly/react-console
1010
### Note
1111
React console lives in its own package at [`@patternfly/react-console`](https://www.npmjs.com/package/@patternfly/react-console)
1212

13+
import { useState, useRef, useEffect, useCallback, createRef } from 'react';
1314
import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
1415
import { SerialConsoleCustom } from './SerialConsoleCustom.jsx';
1516
import { debounce } from '@patternfly/react-core';
@@ -19,20 +20,20 @@ import '@patternfly/react-console/dist/css/xterm.css';
1920

2021
### Basic Usage
2122
```js isFullscreen
22-
import React from 'react';
23+
import { useState, useRef, useCallback, createRef } from 'react';
2324
import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
2425
import { SerialConsoleCustom } from './SerialConsoleCustom.jsx';
2526
import { debounce } from '@patternfly/react-core';
2627

2728
AccessConsolesVariants = () => {
28-
const [status, setStatus] = React.useState('disconnected');
29-
const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;
30-
const onConnect = React.useCallback(() => {
29+
const [status, setStatus] = useState('disconnected');
30+
const setConnected = useRef(debounce(() => setStatus('connected'), 3000)).current;
31+
const onConnect = useCallback(() => {
3132
setStatus('loading');
3233
setConnected();
3334
}, [setConnected])
34-
const onDisconnect = React.useCallback(() => setStatus('disconnected'), [])
35-
const ref = React.createRef();
35+
const onDisconnect = useCallback(() => setStatus('disconnected'), [])
36+
const ref = createRef();
3637

3738
return (
3839
<AccessConsoles preselectedType="SerialConsole">

‎packages/module/patternfly-docs/content/extensions/react-console/examples/SerialConsoleCustom.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React from 'react';
1+
import { useState, useRef, createRef } from 'react';
22
import { debounce } from '@patternfly/react-core';
33
import { SerialConsole } from '@patternfly/react-console';
44

55
export const SerialConsoleCustom = () => {
6-
const [status, setStatus] = React.useState('disconnected');
7-
const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;
8-
const ref2 = React.createRef();
6+
const [status, setStatus] = useState('disconnected');
7+
const setConnected = useRef(debounce(() => setStatus('connected'), 3000)).current;
8+
const ref2 = createRef();
99

1010
return (
1111
<SerialConsole

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3+
import { useState, useRef, useEffect, useCallback, createRef } from 'react';
34
import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
45
import { SerialConsoleCustom } from '../../../content/extensions/react-console/examples/./SerialConsoleCustom.jsx';
56
import { debounce } from '@patternfly/react-core';
@@ -352,6 +353,11 @@ const pageData = {
352353
]
353354
};
354355
pageData.liveContext = {
356+
useState,
357+
useRef,
358+
useEffect,
359+
useCallback,
360+
createRef,
355361
AccessConsoles,
356362
SerialConsole,
357363
VncConsole,
@@ -362,7 +368,7 @@ pageData.liveContext = {
362368
pageData.relativeImports = "import { SerialConsoleCustom } from 'content/extensions/react-console/examples/./SerialConsoleCustom.jsx';"
363369
pageData.examples = {
364370
'Basic Usage': props =>
365-
<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,"className":""}}>
371+
<Example {...pageData} {...props} thumbnail={srcImportbasicusage} {...{"code":"import { useState, useRef, useCallback, createRef } 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] = useState('disconnected');\n const setConnected = useRef(debounce(() => setStatus('connected'), 3000)).current;\n const onConnect = useCallback(() => {\n setStatus('loading');\n setConnected();\n }, [setConnected])\n const onDisconnect = useCallback(() => setStatus('disconnected'), [])\n const ref = 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,"className":""}}>
366372

367373
</Example>
368374
};
@@ -372,7 +378,7 @@ const Component = () => (
372378
<AutoLinkHeader {...{"id":"note","headingLevel":"h3","className":"ws-title ws-h3"}}>
373379
{`Note`}
374380
</AutoLinkHeader>
375-
<p {...{"className":"pf-v6-c-content--p ws-p "}}>
381+
<p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
376382
{`React console lives in its own package at `}
377383
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-console","className":""}}>
378384
<code {...{"className":"ws-code "}}>

‎packages/module/patternfly-docs/pages/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
12
import React from 'react';
23
import { Title, PageSection } from '@patternfly/react-core';
34

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import React from 'react';
2-
31
import { render, screen } from '@testing-library/react';
42
import userEvent from '@testing-library/user-event';
53

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import {useState, Children, Fragment } from 'react';
22
import {
33
MenuToggle,
44
MenuToggleElement,
@@ -72,15 +72,15 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
7272
[VNC_CONSOLE_TYPE]: textVncConsole,
7373
[DESKTOP_VIEWER_CONSOLE_TYPE]: textDesktopViewerConsole
7474
};
75-
const [type, setType] = React.useState(
75+
const [type, setType] = useState(
7676
preselectedType !== NONE_TYPE ? { value: preselectedType, toString: () => typeMap[preselectedType] } : null
7777
);
78-
const [isOpen, setIsOpen] = React.useState(false);
78+
const [isOpen, setIsOpen] = useState(false);
7979

8080
const getConsoleForType = (type: any) =>
81-
React.Children.map(children as React.ReactElement[], (child: any) => {
81+
Children.map(children as React.ReactElement[], (child: any) => {
8282
if (getChildTypeName(child) === type.value) {
83-
return <React.Fragment key={getChildTypeName(child)}>{child}</React.Fragment>;
83+
return <Fragment key={getChildTypeName(child)}>{child}</Fragment>;
8484
} else {
8585
return null;
8686
}
@@ -113,7 +113,7 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
113113
};
114114
const selectOptions: any[] = [];
115115

116-
React.Children.toArray(children as React.ReactElement[]).forEach((child: any) => {
116+
Children.toArray(children as React.ReactElement[]).forEach((child: any) => {
117117
if (isChildOfType(child, VNC_CONSOLE_TYPE)) {
118118
selectOptions.push(
119119
<SelectOption
@@ -155,7 +155,7 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
155155
});
156156
return (
157157
<div className={styles.console}>
158-
{React.Children.toArray(children).length > 1 && (
158+
{Children.toArray(children).length > 1 && (
159159
<div className={styles.consoleActions}>
160160
<Select
161161
aria-label={textSelectConsoleType}

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,6 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
8787
class="consoleActionsSerial-0-2-4"
8888
>
8989
<button
90-
aria-disabled="false"
9190
class="pf-v6-c-button pf-m-secondary"
9291
data-ouia-component-id="OUIA-Generated-Button-secondary-1"
9392
data-ouia-component-type="PF6/Button"
@@ -101,7 +100,6 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
101100
</span>
102101
</button>
103102
<button
104-
aria-disabled="false"
105103
class="pf-v6-c-button pf-m-secondary"
106104
data-ouia-component-id="OUIA-Generated-Button-secondary-2"
107105
data-ouia-component-type="PF6/Button"

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import { useState } from 'react';
22
import { Button, ExpandableSection } from '@patternfly/react-core';
33

44
import { constants } from '../common/constants';
@@ -76,8 +76,8 @@ export const ConnectWithRemoteViewer: React.FunctionComponent<ConnectWithRemoteV
7676
textMoreRDPInfo = 'Remote Desktop Details',
7777
textMoreRDPInfoContent = ''
7878
}: ConnectWithRemoteViewerProps) => {
79-
const [isExpandedDefault, setIsExpandedDefault] = React.useState(false);
80-
const [isExpandedRDP, setIsExpandedRDP] = React.useState(false);
79+
const [isExpandedDefault, setIsExpandedDefault] = useState(false);
80+
const [isExpandedRDP, setIsExpandedRDP] = useState(false);
8181

8282
const _console = spice || vnc; // strictly prefer spice over vnc
8383

0 commit comments

Comments
 (0)