Remove deprecated v4 components, add v5 components (#48)

* update deprecated components in react console * fix tests
patternfly · Oct 17, 2023 · c93aabd · c93aabd
1 parent da97840
commit c93aabd
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 155 deletions.
diff --git a/packages/module/src/components/AccessConsoles/AccessConsoles.test.tsx b/packages/module/src/components/AccessConsoles/AccessConsoles.test.tsx
@@ -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();

diff --git a/packages/module/src/components/AccessConsoles/AccessConsoles.tsx b/packages/module/src/components/AccessConsoles/AccessConsoles.tsx
@@ -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';
 
@@ -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);
 
@@ -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) => {
@@ -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>
       );
     }
   });
@@ -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>
       )}

diff --git a/packages/module/src/components/AccessConsoles/__snapshots__/AccessConsoles.test.tsx.snap b/packages/module/src/components/AccessConsoles/__snapshots__/AccessConsoles.test.tsx.snap
@@ -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"
@@ -65,8 +55,8 @@ exports[`AccessConsoles with SerialConsole and VncConsole as children 1`] = `
               />
             </svg>
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
   </div>
 </DocumentFragment>

diff --git a/packages/module/src/components/SpiceConsole/SpiceActions.tsx b/packages/module/src/components/SpiceConsole/SpiceActions.tsx
@@ -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 */
@@ -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';
diff --git a/packages/module/src/components/VncConsole/VncActions.tsx b/packages/module/src/components/VncConsole/VncActions.tsx
@@ -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';
 
@@ -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>