diff --git a/packages/react-console/src/components/AccessConsoles/AccessConsoles.tsx b/packages/react-console/src/components/AccessConsoles/AccessConsoles.tsx index a5f1d19ac0f..53dc6696430 100644 --- a/packages/react-console/src/components/AccessConsoles/AccessConsoles.tsx +++ b/packages/react-console/src/components/AccessConsoles/AccessConsoles.tsx @@ -30,11 +30,11 @@ export interface AccessConsolesProps { children?: React.ReactElement[] | React.ReactNode; /** Placeholder text for the console selection */ textSelectConsoleType?: string; - /** The value for the Serial Console option */ + /** The value for the Serial Console option. This can be overriden by the type property of the child component */ textSerialConsole?: string; - /** The value for the VNC Console option */ + /** The value for the VNC Console option. This can be overriden by the type property of the child component */ textVncConsole?: string; - /** The value for the Desktop Viewer Console option */ + /** The value for the Desktop Viewer Console option. This can be overriden by the type property of the child component */ textDesktopViewerConsole?: string; /** Initial selection of the Select */ preselectedType?: string; // NONE_TYPE | SERIAL_CONSOLE_TYPE | VNC_CONSOLE_TYPE | DESKTOP_VIEWER_CONSOLE_TYPE; @@ -50,16 +50,11 @@ export const AccessConsoles: React.FunctionComponent = ({ }) => { const [type, setType] = React.useState(preselectedType); const [isOpen, setIsOpen] = React.useState(false); - - const isChildOfTypePresent = (type: string) => { - let found = false; - React.Children.forEach(children as React.ReactElement[], (child: any) => { - found = found || isChildOfType(child, type); - }); - - return found; + const typeMap = { + [textSerialConsole]: SERIAL_CONSOLE_TYPE, + [textVncConsole]: VNC_CONSOLE_TYPE, + [textDesktopViewerConsole]: DESKTOP_VIEWER_CONSOLE_TYPE }; - const getConsoleForType = (type: string) => React.Children.map(children as React.ReactElement[], (child: any) => { if (getChildTypeName(child) === type) { @@ -73,31 +68,26 @@ export const AccessConsoles: React.FunctionComponent = ({ setIsOpen(isOpen); }; - const items = { - [SERIAL_CONSOLE_TYPE]: textSerialConsole, - [VNC_CONSOLE_TYPE]: textVncConsole, - [DESKTOP_VIEWER_CONSOLE_TYPE]: textDesktopViewerConsole - }; - - const selectOptions = []; - if (isChildOfTypePresent(VNC_CONSOLE_TYPE)) { - selectOptions.push(); - } - if (isChildOfTypePresent(SERIAL_CONSOLE_TYPE)) { - selectOptions.push( - - ); - } - if (isChildOfTypePresent(DESKTOP_VIEWER_CONSOLE_TYPE)) { - selectOptions.push( - - ); - } + const selectOptions: any[] = []; + React.Children.toArray(children as React.ReactElement[]).forEach((child: any) => { + if (isChildOfType(child, VNC_CONSOLE_TYPE)) { + selectOptions.push(); + } else if (isChildOfType(child, SERIAL_CONSOLE_TYPE)) { + selectOptions.push(); + } else if (isChildOfType(child, DESKTOP_VIEWER_CONSOLE_TYPE)) { + selectOptions.push( + + ); + } else { + const typeText = getChildTypeName(child); + selectOptions.push(); + } + }); return (
{React.Children.toArray(children).length > 1 && ( @@ -108,10 +98,14 @@ export const AccessConsoles: React.FunctionComponent = ({ toggleId="pf-c-console__type-selector" variant={SelectVariant.single} onSelect={(_, selection, __) => { - setType(Object.keys(items).find(key => items[key] === selection)); + if ((selection as string) in typeMap) { + setType(typeMap[selection as string]); + } else { + setType(selection as string); + } setIsOpen(false); }} - selections={type !== NONE_TYPE ? items[type] : null} + selections={type !== NONE_TYPE ? type : null} isOpen={isOpen} onToggle={onToggle} > diff --git a/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsole.test.tsx b/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsole.test.tsx index 084b0cc2801..301a499d6eb 100644 --- a/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsole.test.tsx +++ b/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsole.test.tsx @@ -38,8 +38,8 @@ test('AccessConsoles with VncConsole as a single child', () => { test('AccessConsoles with SerialConsole and VncConsole as children', () => { const view = shallow( - + ); expect(view).toMatchSnapshot(); @@ -73,8 +73,8 @@ test('AccessConsoles with preselected SerialConsole', () => { test('AccessConsoles switching SerialConsole and VncConsole', () => { const wrapper = mount( - + ); diff --git a/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsole.test.tsx.snap b/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsole.test.tsx.snap index dfa058437fe..10efcb6d7c0 100644 --- a/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsole.test.tsx.snap +++ b/packages/react-console/src/components/AccessConsoles/__tests__/__snapshots__/AccessConsole.test.tsx.snap @@ -252,43 +252,14 @@ Array [ role="presentation" > , ] diff --git a/packages/react-console/src/components/AccessConsoles/examples/AccessConsoles.md b/packages/react-console/src/components/AccessConsoles/examples/AccessConsoles.md index f76075e69ca..66d90d2a0ff 100644 --- a/packages/react-console/src/components/AccessConsoles/examples/AccessConsoles.md +++ b/packages/react-console/src/components/AccessConsoles/examples/AccessConsoles.md @@ -10,6 +10,7 @@ beta: true AccessConsoles lives in its own package at [`@patternfly/react-console`](https://www.npmjs.com/package/@patternfly/react-console) import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console'; +import { SerialConsoleCustom } from './SerialConsoleCustom.jsx'; ## Examples @@ -17,6 +18,7 @@ import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patte ```js import React from 'react'; import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console'; +import { SerialConsoleCustom } from './SerialConsoleCustom.jsx'; AccessConsolesVariants = () => { const [status, setStatus] = React.useState('disconnected'); @@ -25,6 +27,7 @@ AccessConsolesVariants = () => { return ( + { setStatus('loading'); @@ -37,9 +40,10 @@ AccessConsolesVariants = () => { }} ref={ref} /> + - ); }; ``` + diff --git a/packages/react-console/src/components/AccessConsoles/examples/SerialConsoleCustom.jsx b/packages/react-console/src/components/AccessConsoles/examples/SerialConsoleCustom.jsx new file mode 100644 index 00000000000..2cd4962e942 --- /dev/null +++ b/packages/react-console/src/components/AccessConsoles/examples/SerialConsoleCustom.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { debounce } from '@patternfly/react-core'; +import { SerialConsole } from '@patternfly/react-console'; + +export const SerialConsoleCustom = () => { + const [status, setStatus] = React.useState('disconnected'); + const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current; + const ref2 = React.createRef(); + + return ( + { + setStatus('loading'); + setConnected(); + }} + onDisconnect={() => setStatus('disconnected')} + onData={data => { + ref2.current.onDataReceived(data); + }} + status={status} + ref={ref2} + /> + ); +}; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ConsolesDemo/ConsolesDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ConsolesDemo/ConsolesDemo.tsx index 409acbb8b49..5b48c1861af 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ConsolesDemo/ConsolesDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ConsolesDemo/ConsolesDemo.tsx @@ -11,6 +11,7 @@ export const ConsolesDemo: React.FC = () => { return (
+ { setStatus('loading'); @@ -30,3 +31,24 @@ export const ConsolesDemo: React.FC = () => { ); }; ConsolesDemo.displayName = 'ConsolesDemo'; + +const SerialConsoleCustom: React.FC<{ type: string; typeText: string }> = () => { + const [status, setStatus] = React.useState('disconnected'); + const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current; + const ref2 = React.createRef(); + + return ( + { + setStatus('loading'); + setConnected(); + }} + onDisconnect={() => setStatus('disconnected')} + onData={(data: string) => { + ref2.current.onDataReceived(data); + }} + status={status} + ref={ref2} + /> + ); +};