Skip to content

Commit

Permalink
Remove deprecated v4 components, add v5 components (#48)
Browse files Browse the repository at this point in the history
* update deprecated components in react console

* fix tests
  • Loading branch information
jenny-s51 authored Oct 17, 2023
1 parent da97840 commit c93aabd
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 155 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,8 @@ describe('AccessConsoles', () => {
expect(screen.getByText('VNC console text')).toBeInTheDocument();

// Open dropdown and select "Serial console" option
await user.click(screen.getByRole('button', { name: 'Options menu' }));
await user.click(screen.getByText('Serial console', { selector: 'button' }));
await user.click(screen.getByRole('button', { name: 'Console type toggle' }));
await user.click(screen.getByText('Serial console'));

// VNC content is no longer visible, and loading contents of the Serial console are visible.
expect(screen.getByText(/Loading/)).toBeInTheDocument();
Expand Down
72 changes: 45 additions & 27 deletions packages/module/src/components/AccessConsoles/AccessConsoles.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { css } from '@patternfly/react-styles';
import { Select, SelectOption, SelectOptionObject, SelectVariant } from '@patternfly/react-core/deprecated';
import { Select, SelectOption, MenuToggle, MenuToggleElement, SelectList } from '@patternfly/react-core';

import { constants } from '../common/constants';

Expand Down Expand Up @@ -54,9 +54,7 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
[DESKTOP_VIEWER_CONSOLE_TYPE]: textDesktopViewerConsole
};
const [type, setType] = React.useState(
preselectedType !== NONE_TYPE
? ({ value: preselectedType, toString: () => typeMap[preselectedType] } as SelectOptionObject)
: null
preselectedType !== NONE_TYPE ? { value: preselectedType, toString: () => typeMap[preselectedType] } : null
);
const [isOpen, setIsOpen] = React.useState(false);

Expand All @@ -69,10 +67,31 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
}
});

const onToggle = (_event: any, isOpen: boolean) => {
setIsOpen(isOpen);
const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
id="pf-v5-c-console__type-selector"
onClick={onToggleClick}
aria-label="Console type toggle"
isExpanded={isOpen}
style={
{
width: '100%'
} as React.CSSProperties
}
>
{type.toString()}
</MenuToggle>
);

const onToggleClick = () => {
setIsOpen(!isOpen);
};

const onSelect = (_event: React.MouseEvent<Element, MouseEvent>, value: string | number) => {
setType(value as unknown as React.SetStateAction<{ value: string; toString: () => string }>);
setIsOpen(false);
};
const selectOptions: any[] = [];

React.Children.toArray(children as React.ReactElement[]).forEach((child: any) => {
Expand All @@ -81,33 +100,37 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
<SelectOption
key={VNC_CONSOLE_TYPE}
id={VNC_CONSOLE_TYPE}
value={{ value: VNC_CONSOLE_TYPE, toString: () => textVncConsole } as SelectOptionObject}
/>
value={{ value: VNC_CONSOLE_TYPE, toString: () => textVncConsole }}
>
{textVncConsole}
</SelectOption>
);
} else if (isChildOfType(child, SERIAL_CONSOLE_TYPE)) {
selectOptions.push(
<SelectOption
key={SERIAL_CONSOLE_TYPE}
id={SERIAL_CONSOLE_TYPE}
value={{ value: SERIAL_CONSOLE_TYPE, toString: () => textSerialConsole } as SelectOptionObject}
/>
value={{ value: SERIAL_CONSOLE_TYPE, toString: () => textSerialConsole }}
>
{textSerialConsole}
</SelectOption>
);
} else if (isChildOfType(child, DESKTOP_VIEWER_CONSOLE_TYPE)) {
selectOptions.push(
<SelectOption
key={DESKTOP_VIEWER_CONSOLE_TYPE}
id={DESKTOP_VIEWER_CONSOLE_TYPE}
value={{ value: DESKTOP_VIEWER_CONSOLE_TYPE, toString: () => textDesktopViewerConsole } as SelectOptionObject}
/>
value={{ value: DESKTOP_VIEWER_CONSOLE_TYPE, toString: () => textDesktopViewerConsole }}
>
{textDesktopViewerConsole}
</SelectOption>
);
} else {
const typeText = getChildTypeName(child);
selectOptions.push(
<SelectOption
key={typeText}
id={typeText}
value={{ value: typeText, toString: () => typeText } as SelectOptionObject}
/>
<SelectOption key={typeText} id={typeText} value={{ value: typeText, toString: () => typeText }}>
{typeText}
</SelectOption>
);
}
});
Expand All @@ -117,18 +140,13 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
<div className={css(styles.consoleActions)}>
<Select
aria-label={textSelectConsoleType}
placeholderText={textSelectConsoleType}
toggleId="pf-v5-c-console__type-selector"
variant={SelectVariant.single}
onSelect={(_, selection, __) => {
setType(selection as SelectOptionObject);
setIsOpen(false);
}}
selections={type}
toggle={toggle}
onSelect={onSelect}
isOpen={isOpen}
onToggle={onToggle}
selected={type}
onOpenChange={(isOpen) => setIsOpen(isOpen)}
>
{selectOptions}
<SelectList>{selectOptions}</SelectList>
</Select>
</div>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,32 +24,22 @@ exports[`AccessConsoles with SerialConsole and VncConsole as children 1`] = `
<div
class="pf-v5-c-console__actions"
>
<div
class="pf-v5-c-select"
data-ouia-component-id="OUIA-Generated-Select-single-1"
data-ouia-component-type="PF5/Select"
data-ouia-safe="true"
<button
aria-expanded="false"
aria-label="Console type toggle"
class="pf-v5-c-menu-toggle"
id="pf-v5-c-console__type-selector"
style="width: 100%;"
type="button"
>
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Options menu"
aria-labelledby=" pf-v5-c-console__type-selector"
class="pf-v5-c-select__toggle"
id="pf-v5-c-console__type-selector"
type="button"
<span
class="pf-v5-c-menu-toggle__text"
/>
<span
class="pf-v5-c-menu-toggle__controls"
>
<div
class="pf-v5-c-select__toggle-wrapper"
>
<span
class="pf-v5-c-select__toggle-text"
>
Select console type
</span>
</div>
<span
class="pf-v5-c-select__toggle-arrow"
class="pf-v5-c-menu-toggle__toggle-icon"
>
<svg
aria-hidden="true"
Expand All @@ -65,8 +55,8 @@ exports[`AccessConsoles with SerialConsole and VncConsole as children 1`] = `
/>
</svg>
</span>
</button>
</div>
</span>
</button>
</div>
</div>
</DocumentFragment>
Expand Down
38 changes: 23 additions & 15 deletions packages/module/src/components/SpiceConsole/SpiceActions.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import React from 'react';
import {
Dropdown as DropdownDeprecated,
DropdownItem as DropdownItemDeprecated,
DropdownToggle as DropdownToggleDeprecated
} from '@patternfly/react-core/deprecated';
import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';

export interface SpiceActionsProps extends React.HTMLProps<HTMLDivElement> {
/** Callback for when Ctrl+Alt+Delete item is selected */
Expand All @@ -20,19 +16,31 @@ export const SpiceActions: React.FunctionComponent<SpiceActionsProps> = ({
}: SpiceActionsProps) => {
const [isOpen, setIsOpen] = React.useState(false);

const onToggleClick = () => {
setIsOpen(!isOpen);
};

const onSelect = (_event: React.MouseEvent<Element, MouseEvent>, _value: string | number) => {
setIsOpen(false);
onCtrlAltDel();
};

return (
<DropdownDeprecated
<Dropdown
id="console-send-shortcut"
onSelect={() => {
setIsOpen(!isOpen);
onCtrlAltDel();
}}
onSelect={onSelect}
isOpen={isOpen}
toggle={
<DropdownToggleDeprecated onToggle={(_event, isDropdownOpen) => setIsOpen(isDropdownOpen)}>{textSendShortcut}</DropdownToggleDeprecated>
}
dropdownItems={[<DropdownItemDeprecated key="ctrl-alt-delete">{textCtrlAltDel}</DropdownItemDeprecated>]}
/>
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
{textSendShortcut}
</MenuToggle>
)}
>
<DropdownList>
<DropdownItem key="ctrl-alt-delete">{textCtrlAltDel}</DropdownItem>
</DropdownList>
</Dropdown>
);
};
SpiceActions.displayName = 'SpiceActions';
40 changes: 23 additions & 17 deletions packages/module/src/components/VncConsole/VncActions.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import React from 'react';
import { css } from '@patternfly/react-styles';
import { Button, ButtonVariant } from '@patternfly/react-core';
import {
Dropdown as DropdownDeprecated,
DropdownItem as DropdownItemDeprecated,
DropdownToggle as DropdownToggleDeprecated
} from '@patternfly/react-core/deprecated';
import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';

import styles from '@patternfly/react-styles/css/components/Consoles/VncConsole';

Expand All @@ -29,24 +25,34 @@ export const VncActions: React.FunctionComponent<VncActionProps> = ({
additionalButtons = []
}) => {
const [isOpen, setIsOpen] = React.useState(false);

const onToggleClick = () => {
setIsOpen(!isOpen);
};

const onSelect = (_event: React.MouseEvent<Element, MouseEvent>, _value: string | number) => {
setIsOpen(false);
};
const toolbar = (
<div className={css(styles.consoleActionsVnc)}>
{additionalButtons}
<DropdownDeprecated
<Dropdown
id="pf-v5-c-console__send-shortcut"
onSelect={() => setIsOpen(false)}
toggle={
<DropdownToggleDeprecated id="pf-v5-c-console__actions-vnc-toggle-id" onToggle={() => setIsOpen(!isOpen)}>
{textSendShortcut}
</DropdownToggleDeprecated>
}
isOpen={isOpen}
dropdownItems={[
<DropdownItemDeprecated onClick={onCtrlAltDel} key="ctrl-alt-delete">
onSelect={onSelect}
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
{textSendShortcut}
</MenuToggle>
)}
>
<DropdownList>
<DropdownItem onClick={onCtrlAltDel} key="ctrl-alt-delete">
{textCtrlAltDel}
</DropdownItemDeprecated>
]}
/>
</DropdownItem>
</DropdownList>
</Dropdown>
<Button variant={ButtonVariant.secondary} onClick={onDisconnect}>
{textDisconnect}
</Button>
Expand Down
Loading

0 comments on commit c93aabd

Please sign in to comment.