first pass for removing deprecated patternfly component

frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts

@@ -62,7 +62,7 @@ class ClusterStorageModal extends Modal {
   }
 
   shouldHavePVSizeSelectValue(name: string) {
-    this.findPVSizeSelectButton().findByRole('button', { name }).should('exist');
+    this.findPVSizeSelectButton().contains(name).should('exist');
     return this;
   }
 

frontend/src/__tests__/cypress/cypress/pages/pipelines/experiments.ts

@@ -122,7 +122,7 @@ class ExperimentsTable {
   }
 
   findActionsKebab() {
-    return cy.findByRole('button', { name: 'Actions' }).parent();
+    return cy.findByTestId('experiment-table-toolbar-actions').parent();
   }
 
   findRestoreExperimentButton() {

frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelinesSection.ts

@@ -24,11 +24,12 @@ class PipelinesSection {
   }
 
   findKebabActions() {
-    return this.find().findKebab(true);
+    return this.find().findByRole('button', { name: 'Pipeline server action kebab toggle' });
   }
 
   findKebabActionItem(name: string) {
-    return this.find().findKebabAction(name, true);
+    this.findKebabActions().click();
+    return cy.findByRole('menuitem', { name });
   }
 }
 

frontend/src/app/App.scss

@@ -27,7 +27,8 @@ body,
 
   // Decrease the height of toggles when in table rows so they align better with text
   // This requires decreasing the width and the size of the toggle as well
-  td, li {
+  td,
+  li {
     .pf-v5-c-switch__toggle {
       height: 18px;
       margin-top: -1px;
@@ -46,7 +47,6 @@ body,
 // specificity targeting form elements to override --pf-v5-global--FontSize--md
 .pf-v5-c-page,
 .pf-v5-c-modal-box {
-
   .pf-v5-c-app-launcher,
   .pf-v5-c-button,
   .pf-v5-c-dropdown,
@@ -73,7 +73,6 @@ body,
 // temp fix until https://github.com/patternfly/patternfly-react/issues/8028 is resolved
 // Remove this file and its uses after bumping to PF5
 .checkbox-radio-fix-body-width {
-
   .pf-v5-c-check__body,
   .pf-v5-c-radio__body {
     width: 100%;

frontend/src/app/AppLauncher.scss

@@ -0,0 +1,7 @@
+// giving a fixed width and height of the icon for app launcher
+.odh-app-launcher__dropdown-item {
+  .pf-v5-c-menu__item-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}

frontend/src/app/AppLauncher.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
 import {
-  ApplicationLauncher,
-  ApplicationLauncherGroup,
-  ApplicationLauncherItem,
-  ApplicationLauncherSeparator,
-} from '@patternfly/react-core/deprecated';
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+} from '@patternfly/react-core';
+import { ThIcon } from '@patternfly/react-icons';
 import openshiftLogo from '~/images/openshift.svg';
 import { useWatchConsoleLinks } from '~/utilities/useWatchConsoleLinks';
 import { ODH_PRODUCT_NAME } from '~/utilities/const';
 import { getOpenShiftConsoleServerURL } from '~/utilities/clusterUtils';
 import { useClusterInfo } from '~/redux/selectors/clusterInfo';
 import { ApplicationAction, Section } from '~/types';
 import { useAppContext } from './AppContext';
+import './AppLauncher.scss';
 
 const odhConsoleLinkName = 'rhodslink';
 
@@ -113,10 +117,6 @@ const AppLauncher: React.FC = () => {
     return sections.toSorted((a, b) => sectionSortValue(a) - sectionSortValue(b));
   }, [clusterBranding, clusterID, consoleLinks, disableClusterManager, serverURL]);
 
-  const onToggle = () => {
-    setIsOpen((prev) => !prev);
-  };
-
   const onSelect = () => {
     setIsOpen(false);
   };
@@ -127,42 +127,49 @@ const AppLauncher: React.FC = () => {
 
   const renderApplicationLauncherGroup = (section: Section, sectionIndex: number) => {
     const appItems = section.actions.map((action) => (
-      <ApplicationLauncherItem
+      <DropdownItem
+        className="odh-app-launcher__dropdown-item"
         data-testid="application-launcher-item"
+        isExternalLink
         key={action.label}
-        href={action.href}
-        isExternal
+        to={action.href}
         icon={action.image}
-        rel="noopener noreferrer"
-        target="_blank"
       >
         {action.label}
-      </ApplicationLauncherItem>
+      </DropdownItem>
     ));
-    if (sectionIndex < applicationSections.length - 1) {
-      appItems.push(<ApplicationLauncherSeparator key={`separator-${sectionIndex}`} />);
-    }
     return (
-      <ApplicationLauncherGroup
-        key={section.label}
-        label={section.label}
-        data-testid="application-launcher-group"
-      >
-        {appItems}
-      </ApplicationLauncherGroup>
+      <React.Fragment key={section.label}>
+        <DropdownGroup label={section.label} data-testid="application-launcher-group">
+          <DropdownList>{appItems}</DropdownList>
+        </DropdownGroup>
+        {sectionIndex < applicationSections.length - 1 && <Divider />}
+      </React.Fragment>
     );
   };
   return (
-    <ApplicationLauncher
-      data-testid="application-launcher"
+    <Dropdown
       aria-label="Application launcher"
+      popperProps={{ position: 'right' }}
+      onOpenChange={(isOpenChange) => setIsOpen(isOpenChange)}
       onSelect={onSelect}
-      onToggle={onToggle}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          ref={toggleRef}
+          aria-label="Application launcher"
+          variant="plain"
+          onClick={() => setIsOpen(!isOpen)}
+          isExpanded={isOpen}
+          style={{ width: 'auto' }}
+        >
+          <ThIcon />
+        </MenuToggle>
+      )}
       isOpen={isOpen}
-      items={applicationSections.map(renderApplicationLauncherGroup)}
-      position="right"
-      isGrouped
-    />
+      shouldFocusToggleOnSelect
+    >
+      {applicationSections.map(renderApplicationLauncherGroup)}
+    </Dropdown>
   );
 };
 

frontend/src/app/HeaderTools.tsx

@@ -7,13 +7,12 @@ import {
   ToolbarItem,
   Button,
   Tooltip,
-} from '@patternfly/react-core';
-import {
-  Dropdown,
-  DropdownPosition,
-  DropdownToggle,
+  MenuToggleElement,
+  MenuToggle,
   DropdownItem,
-} from '@patternfly/react-core/deprecated';
+  Dropdown,
+  DropdownList,
+} from '@patternfly/react-core';
 import { ExternalLinkAltIcon, QuestionCircleIcon } from '@patternfly/react-icons';
 import { COMMUNITY_LINK, DOC_LINK, SUPPORT_LINK, DEV_MODE, EXT_CLUSTER } from '~/utilities/const';
 import useNotification from '~/utilities/useNotification';
@@ -82,7 +81,7 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
       <DropdownItem
         key="documentation"
         onClick={handleHelpClick}
-        href={DOC_LINK}
+        to={DOC_LINK}
         target="_blank"
         rel="noopener noreferrer"
       >
@@ -95,7 +94,7 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
       <DropdownItem
         key="support"
         onClick={handleHelpClick}
-        href={SUPPORT_LINK}
+        to={SUPPORT_LINK}
         target="_blank"
         rel="noopener noreferrer"
       >
@@ -108,7 +107,7 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
       <DropdownItem
         key="community"
         onClick={handleHelpClick}
-        href={COMMUNITY_LINK}
+        to={COMMUNITY_LINK}
         target="_blank"
         rel="noopener noreferrer"
       >
@@ -122,7 +121,7 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
       <ToolbarContent>
         <ToolbarGroup variant="icon-button-group" align={{ default: 'alignRight' }}>
           {!dashboardConfig.spec.dashboardConfig.disableAppLauncher ? (
-            <ToolbarItem>
+            <ToolbarItem data-testid="application-launcher">
               <AppLauncher />
             </ToolbarItem>
           ) : null}
@@ -137,21 +136,24 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
           {helpMenuItems.length > 0 ? (
             <ToolbarItem>
               <Dropdown
-                isPlain
-                position={DropdownPosition.right}
-                toggle={
-                  <DropdownToggle
+                popperProps={{ position: 'right' }}
+                onOpenChange={(isOpen) => setHelpMenuOpen(isOpen)}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    variant="plain"
                     aria-label="Help items"
-                    toggleIndicator={null}
                     id="help-icon-toggle"
-                    onToggle={() => setHelpMenuOpen(!helpMenuOpen)}
+                    ref={toggleRef}
+                    onClick={() => setHelpMenuOpen(!helpMenuOpen)}
+                    isExpanded={helpMenuOpen}
                   >
                     <QuestionCircleIcon />
-                  </DropdownToggle>
-                }
+                  </MenuToggle>
+                )}
                 isOpen={helpMenuOpen}
-                dropdownItems={helpMenuItems}
-              />
+              >
+                <DropdownList>{helpMenuItems}</DropdownList>
+              </Dropdown>
             </ToolbarItem>
           ) : null}
         </ToolbarGroup>
@@ -175,16 +177,24 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
         )}
         <ToolbarItem>
           <Dropdown
-            isPlain
-            position={DropdownPosition.right}
-            toggle={
-              <DropdownToggle id="user-menu-toggle" onToggle={() => setUserMenuOpen(!userMenuOpen)}>
+            popperProps={{ position: 'right' }}
+            onOpenChange={(isOpen) => setUserMenuOpen(isOpen)}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                variant="plainText"
+                aria-label="User menu"
+                id="user-menu-toggle"
+                ref={toggleRef}
+                onClick={() => setUserMenuOpen(!userMenuOpen)}
+                isExpanded={userMenuOpen}
+              >
                 {userName}
-              </DropdownToggle>
-            }
+              </MenuToggle>
+            )}
             isOpen={userMenuOpen}
-            dropdownItems={userMenuItems}
-          />
+          >
+            <DropdownList>{userMenuItems}</DropdownList>
+          </Dropdown>
         </ToolbarItem>
       </ToolbarContent>
     </Toolbar>

frontend/src/components/OdhAppCard.tsx

@@ -9,9 +9,12 @@ import {
   CardFooter,
   CardHeader,
   Popover,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  DropdownList,
 } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { EllipsisVIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { OdhApplication } from '~/types';
 import { getLaunchStatus, launchQuickStart } from '~/utilities/quickStartUtils';
 import EnableModal from '~/pages/exploreApplication/EnableModal';
@@ -41,10 +44,6 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
   const { dashboardConfig } = useAppContext();
   const dispatch = useAppDispatch();
 
-  const onToggle = (value: boolean) => {
-    setIsOpen(value);
-  };
-
   const onOpenKebab = () => {
     setIsOpen(!isOpen);
   };
@@ -83,7 +82,7 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="docs" href={odhApp.spec.docsLink} target="_blank" rel="noopener noreferrer">
+    <DropdownItem key="docs" to={odhApp.spec.docsLink} target="_blank" rel="noopener noreferrer">
       View documentation <ExternalLinkAltIcon />
     </DropdownItem>,
   ];
@@ -187,12 +186,23 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
               {disabled ? disabledPopover : null}
               <Dropdown
                 onSelect={onOpenKebab}
-                toggle={<KebabToggle onToggle={(e, value: boolean) => onToggle(value)} />}
+                onOpenChange={(isOpened) => setIsOpen(isOpened)}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    variant="plain"
+                    aria-label="Actions"
+                    ref={toggleRef}
+                    onClick={() => setIsOpen(!isOpen)}
+                    isExpanded={isOpen}
+                  >
+                    <EllipsisVIcon />
+                  </MenuToggle>
+                )}
                 isOpen={isOpen}
-                isPlain
-                dropdownItems={dropdownItems}
-                position="right"
-              />
+                popperProps={{ position: 'right' }}
+              >
+                <DropdownList>{dropdownItems}</DropdownList>
+              </Dropdown>
             </>
           ),
           hasNoOffset: true,