From ae59fb0467d251023414071fd3fd93a38a3feedc Mon Sep 17 00:00:00 2001
From: Sharon Gratch <sgratch@redhat.com>
Date: Wed, 8 Jan 2025 03:44:19 +0200
Subject: [PATCH] Migrate deprecated Dropdown component to PF5 and remove
 ActionServiceDropdown

Reference: https://issues.redhat.com/browse/MTV-1051

- Migrate the deprecated Dropdown component to PF5 - see https://v5-archive.patternfly.org/components/menus/dropdown/react-deprecated
- Remove unused common component: ActionServiceDropdown
- Fix few bugs regarding the Dropdown component, e.g. changing the
  dropdown menu to be scrollable when needed, since otherwise part of the dropdown items are not reachable.

Signed-off-by: Sharon Gratch <sgratch@redhat.com>
---
 .../ActionServiceDropdown.tsx                 | 137 ------------------
 .../components/ActionServiceDropdown/index.ts |   3 -
 packages/common/src/components/index.ts       |   1 -
 .../FilterableSelect/FilterableSelect.tsx     |   2 +-
 .../components/actions/DropdownItemLink.tsx   |  30 ++--
 .../actions/NetworkMapActionsDropdown.tsx     |  71 +++++----
 .../NetworkMapActionsDropdownItems.tsx        |  19 ++-
 .../tabs/Details/cards/WelcomeCard.tsx        |  33 +++--
 .../Metrics/cards/MigrationsChartCard.tsx     |  68 +++++++--
 .../Metrics/cards/VmMigrationsChartCard.tsx   |  68 +++++++--
 .../Plans/actions/PlanActionsDropdown.tsx     |  61 ++++----
 .../actions/PlanActionsDropdownItems.tsx      |  12 +-
 .../create/components/SelectProvider.tsx      |   2 +-
 .../EditPlanTransferNetwork.tsx               |  65 +++++++--
 .../actions/ProviderActionsDropdown.tsx       |  63 +++++---
 .../actions/ProviderActionsDropdownItems.tsx  |  39 +++--
 .../EditProviderDefaultTransferNetwork.tsx    |  64 ++++++--
 .../actions/StorageMapActionsDropdown.tsx     |  69 +++++----
 .../StorageMapActionsDropdownItems.tsx        |  19 ++-
 19 files changed, 471 insertions(+), 355 deletions(-)
 delete mode 100644 packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx
 delete mode 100644 packages/common/src/components/ActionServiceDropdown/index.ts

diff --git a/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx b/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx
deleted file mode 100644
index 832cfff79..000000000
--- a/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { useHistory } from 'react-router';
-
-import { ActionService, ActionServiceProvider } from '@openshift-console/dynamic-plugin-sdk';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  KebabToggle,
-} from '@patternfly/react-core/deprecated';
-
-import { ToggleEventType } from '../../utils';
-
-export interface ActionServiceDropdownProps<T> {
-  /** The contextId of the `console.action/provider` extension to use */
-  contextId: string;
-
-  /** The kind of toggle to use for the resourceData actions. Default: `'kebab'` */
-  variant?: 'kebab' | 'dropdown';
-
-  /** Text to display when the variant is 'dropdown'. */
-  dropdownToggleText?: string;
-
-  /** The resource's namespace. */
-  namespace?: string;
-
-  /** Resource the actions will act upon. */
-  resourceData: T;
-
-  /** A list of actions to ignore and leave off the full set of actions for the entity. */
-  ignoreList?: string[];
-}
-
-/**
- * Use the `console.action/provider` defined extension provided to generate the set of
- * actions to provide for the given resource.  Use `ActionsAsDropdown` to render the
- * list actions generated by the service provider.
- */
-export function ActionServiceDropdown<T>({
-  contextId,
-  variant = 'kebab',
-  dropdownToggleText,
-  namespace,
-  resourceData,
-  ignoreList,
-}: ActionServiceDropdownProps<T>) {
-  const serviceProviderData = useMemo(
-    () => ({ [contextId]: { resourceData, namespace } }),
-    [contextId, resourceData, namespace],
-  );
-
-  return (
-    <ActionServiceProvider context={serviceProviderData}>
-      {(actionService: ActionService) => (
-        <ActionsAsDropdown
-          {...actionService}
-          variant={variant}
-          dropdownToggleText={dropdownToggleText}
-          ignoreList={ignoreList}
-        />
-      )}
-    </ActionServiceProvider>
-  );
-}
-ActionServiceDropdown.displayName = 'ActionServiceDropdown';
-
-const ActionsAsDropdown = ({
-  actions,
-  variant,
-  dropdownToggleText = '',
-  ignoreList = [],
-}: ActionService &
-  Pick<ActionServiceDropdownProps<object>, 'variant' | 'dropdownToggleText' | 'ignoreList'>) => {
-  const history = useHistory();
-  const [isActionMenuOpen, setIsActionMenuOpen] = useState(false);
-  const isPlain = variant === 'kebab';
-
-  const onToggle: (isExpanded: boolean, event: ToggleEventType) => void = (isExpanded) => {
-    setIsActionMenuOpen(isExpanded);
-  };
-
-  const toggle =
-    variant === 'kebab' ? (
-      <KebabToggle onToggle={(e, v) => onToggle(v, e)} />
-    ) : (
-      <DropdownToggle onToggle={(e, v) => onToggle(v, e)}>{dropdownToggleText}</DropdownToggle>
-    );
-
-  return (
-    <Dropdown
-      position="right"
-      onSelect={() => setIsActionMenuOpen(!isActionMenuOpen)}
-      toggle={toggle}
-      isOpen={isActionMenuOpen}
-      isPlain={isPlain}
-      dropdownItems={actions
-        .filter(({ id }) => !ignoreList?.includes(id))
-        .map(({ id, label, cta, disabled, disabledTooltip, tooltip }) => (
-          <DropdownItem
-            key={id}
-            onClick={typeof cta === 'function' ? cta : () => cta.href && history.push(cta.href)}
-            isAriaDisabled={disabled}
-            tooltip={disabled ? disabledTooltip : tooltip}
-          >
-            {label}
-          </DropdownItem>
-        ))}
-    />
-  );
-};
-
-export function withActionServiceContext<T>(
-  {
-    contextId,
-    variant,
-    dropdownToggleText,
-  }: Pick<ActionServiceDropdownProps<T>, 'contextId' | 'variant' | 'dropdownToggleText'>,
-  Component: typeof ActionServiceDropdown = ActionServiceDropdown,
-) {
-  function ActionServiceDropdownProviderHoc(
-    props: Pick<ActionServiceDropdownProps<T>, 'namespace' | 'resourceData' | 'ignoreList'>,
-  ) {
-    return (
-      <Component<T>
-        {...props}
-        contextId={contextId}
-        variant={variant}
-        dropdownToggleText={dropdownToggleText}
-      />
-    );
-  }
-
-  const componentName = Component['displayName'] || Component.name || 'Component';
-  ActionServiceDropdownProviderHoc.displayName = `withActionServiceContext(${componentName})`;
-
-  return ActionServiceDropdownProviderHoc;
-}
diff --git a/packages/common/src/components/ActionServiceDropdown/index.ts b/packages/common/src/components/ActionServiceDropdown/index.ts
deleted file mode 100644
index 35b90af15..000000000
--- a/packages/common/src/components/ActionServiceDropdown/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// @index(['./*', /__/g], f => `export * from '${f.path}';`)
-export * from './ActionServiceDropdown';
-// @endindex
diff --git a/packages/common/src/components/index.ts b/packages/common/src/components/index.ts
index 54b33dbf8..28db5f4a5 100644
--- a/packages/common/src/components/index.ts
+++ b/packages/common/src/components/index.ts
@@ -1,5 +1,4 @@
 // @index(['./*', /__/g], f => `export * from '${f.path}';`)
-export * from './ActionServiceDropdown';
 export * from './ExternalLink';
 export * from './Filter';
 export * from './FilterGroup';
diff --git a/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx b/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx
index 46b250d57..4a7e499bf 100644
--- a/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx
+++ b/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx
@@ -118,7 +118,7 @@ export const FilterableSelect: React.FunctionComponent<FilterableSelectProps> =
    * Toggles the open state of the select dropdown.
    */
   const onToggleClick = () => {
-    setIsOpen(!isOpen);
+    setIsOpen((isOpen) => !isOpen);
   };
 
   /**
diff --git a/packages/forklift-console-plugin/src/components/actions/DropdownItemLink.tsx b/packages/forklift-console-plugin/src/components/actions/DropdownItemLink.tsx
index bc4154e91..ae1a7a53a 100644
--- a/packages/forklift-console-plugin/src/components/actions/DropdownItemLink.tsx
+++ b/packages/forklift-console-plugin/src/components/actions/DropdownItemLink.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 
 /**
  * `DropdownItemLink` is a functional component that renders a dropdown item with a link.
@@ -13,23 +13,27 @@ import { DropdownItem } from '@patternfly/react-core/deprecated';
  *
  * @returns {React.ReactElement} The rendered JSX element.
  */
-export const DropdownItemLink = ({ key, href, description, children }: DropdownItemLinkProps) => {
+export const DropdownItemLink = ({
+  key,
+  value,
+  href,
+  description,
+  children,
+}: DropdownItemLinkProps) => {
   return (
-    <DropdownItem
-      key={key}
-      component={
-        <Link to={href} className="pf-c-dropdown__menu-item pf-m-description">
-          <div className="pf-c-dropdown__menu-item-main">{children}</div>
-          {description && <div className="pf-c-dropdown__menu-item-description">{description}</div>}
-        </Link>
-      }
-    />
+    <DropdownItem key={key} value={value}>
+      <Link to={href} className="pf-c-dropdown__menu-item pf-m-description">
+        <div className="pf-c-menu__list-item--Displays">{children}</div>
+        {description && <div className="pf-c-dropdown__menu-item-description">{description}</div>}
+      </Link>
+    </DropdownItem>
   );
 };
 
 export type DropdownItemLinkProps = {
   key: string;
+  value: number;
   href: string;
   description?: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 };
diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdown.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdown.tsx
index d1c5f73d3..5a40d97aa 100644
--- a/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdown.tsx
+++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdown.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
-import { useToggle } from 'src/modules/Providers/hooks';
+import React, { FC, Ref, useState } from 'react';
 import { ModalHOC } from 'src/modules/Providers/modals';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Flex, FlexItem } from '@patternfly/react-core';
 import {
   Dropdown,
-  DropdownPosition,
-  DropdownToggle,
-  KebabToggle,
-} from '@patternfly/react-core/deprecated';
+  DropdownList,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
 
 import { CellProps } from '../views/list/components';
 
@@ -17,38 +18,50 @@ import { NetworkMapActionsDropdownItems } from './NetworkMapActionsDropdownItems
 
 import './NetworkMapActionsDropdown.style.css';
 
-const NetworkMapActionsKebabDropdown_: React.FC<NetworkMapActionsDropdownProps> = ({
-  data,
-  isKebab,
-}) => {
+const NetworkMapActionsKebabDropdown_: FC<NetworkMapActionsDropdownProps> = ({ data, isKebab }) => {
   const { t } = useForkliftTranslation();
 
-  // Hook for managing the open/close state of the dropdown
-  const [isDropdownOpen, toggle] = useToggle();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen((isOpen) => !isOpen);
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _value: string | number | undefined,
+  ) => {
+    setIsOpen(false);
+  };
 
   // Returning the Dropdown component from PatternFly library
   return (
     <Dropdown
-      onSelect={toggle}
-      isOpen={isDropdownOpen}
-      isPlain
-      position={DropdownPosition.right}
       className={isKebab ? undefined : 'forklift-dropdown pf-c-menu-toggle'}
-      toggle={
-        isKebab ? (
-          <KebabToggle id="toggle-kebab" onToggle={toggle} />
-        ) : (
-          <DropdownToggle id="toggle-basic" onToggle={toggle}>
-            {t('Actions')}
-          </DropdownToggle>
-        )
-      }
-      dropdownItems={NetworkMapActionsDropdownItems({ data })}
-    />
+      isOpen={isOpen}
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      onSelect={onSelect}
+      toggle={(toggleRef: Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+          variant={isKebab ? 'plain' : 'default'}
+        >
+          {isKebab ? <EllipsisVIcon /> : t('Actions')}
+        </MenuToggle>
+      )}
+      shouldFocusToggleOnSelect
+      popperProps={{
+        position: 'right',
+      }}
+    >
+      <DropdownList>{NetworkMapActionsDropdownItems({ data })}</DropdownList>
+    </Dropdown>
   );
 };
 
-export const NetworkMapActionsDropdown: React.FC<NetworkMapActionsDropdownProps> = (props) => (
+export const NetworkMapActionsDropdown: FC<NetworkMapActionsDropdownProps> = (props) => (
   <ModalHOC>
     <Flex flex={{ default: 'flex_3' }} flexWrap={{ default: 'nowrap' }}>
       <FlexItem grow={{ default: 'grow' }}></FlexItem>
diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdownItems.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdownItems.tsx
index 3d203d136..82fa5ced7 100644
--- a/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdownItems.tsx
+++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdownItems.tsx
@@ -5,7 +5,7 @@ import { getResourceUrl } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { NetworkMapModel, NetworkMapModelRef } from '@kubev2v/types';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 
 import { NetworkMapData } from '../utils';
 
@@ -26,10 +26,19 @@ export const NetworkMapActionsDropdownItems = ({ data }: NetworkMapActionsDropdo
   };
 
   return [
-    <DropdownItemLink key="EditNetworkMapping" href={networkMapURL}>
-      {t('Edit NetworkMap')}
-    </DropdownItemLink>,
-    <DropdownItem key="delete" isDisabled={!data?.permissions?.canDelete} onClick={onClick}>
+    <DropdownItemLink
+      value={0}
+      key="EditNetworkMapping"
+      href={networkMapURL}
+      description={t('Edit NetworkMap')}
+    />,
+
+    <DropdownItem
+      value={1}
+      key="delete"
+      isDisabled={!data?.permissions?.canDelete}
+      onClick={onClick}
+    >
       {t('Delete NetworkMap')}
     </DropdownItem>,
   ];
diff --git a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/WelcomeCard.tsx b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/WelcomeCard.tsx
index 941d84a9d..17277c078 100644
--- a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/WelcomeCard.tsx
+++ b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/WelcomeCard.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, Ref, useState } from 'react';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { V1beta1ForkliftController } from '@kubev2v/types';
@@ -11,7 +11,14 @@ import {
   SplitItem,
   Text,
 } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
 
 import automationIcon from '../../../../../images/automation.svg';
 
@@ -27,6 +34,7 @@ const hideFromViewDropdownOption = (onHide: () => void, t) => {
 
   return hasHideAction ? (
     <DropdownItem
+      value={0}
       key="action"
       component="button"
       description={t(
@@ -45,19 +53,26 @@ const hideFromViewDropdownOption = (onHide: () => void, t) => {
 
 export const OverviewCard: FC<OverviewCardProps> = ({ onHide }) => {
   const { t } = useForkliftTranslation();
-  const [menuIsOpen, setMenuIsOpen] = React.useState(false);
-
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
   const actionDropdownItems = [hideFromViewDropdownOption(onHide, t)];
   const onToggle = () => setMenuIsOpen((open) => !open);
 
   const headerActions = (
     <Dropdown
       isOpen={menuIsOpen}
-      isPlain
-      toggle={<KebabToggle onToggle={onToggle} data-testid="actions" />}
-      position="right"
-      dropdownItems={actionDropdownItems}
-    />
+      onOpenChange={(menuIsOpen: boolean) => setMenuIsOpen(menuIsOpen)}
+      toggle={(toggleRef: Ref<MenuToggleElement>) => (
+        <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={menuIsOpen} variant={'plain'}>
+          {<EllipsisVIcon />}
+        </MenuToggle>
+      )}
+      shouldFocusFirstItemOnOpen={false}
+      popperProps={{
+        position: 'right',
+      }}
+    >
+      <DropdownList>{actionDropdownItems}</DropdownList>
+    </Dropdown>
   );
 
   return (
diff --git a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/MigrationsChartCard.tsx b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/MigrationsChartCard.tsx
index 819f7d469..8b5859aad 100644
--- a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/MigrationsChartCard.tsx
+++ b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/MigrationsChartCard.tsx
@@ -1,11 +1,22 @@
-import React, { useState } from 'react';
+import React, { FC, Ref, useState } from 'react';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { MigrationModelGroupVersionKind, V1beta1Migration } from '@kubev2v/types';
 import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
 import { Chart, ChartAxis, ChartBar, ChartGroup, ChartTooltip } from '@patternfly/react-charts';
-import { Card, CardBody, CardHeader, CardTitle, Flex } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
 import chart_color_blue_200 from '@patternfly/react-tokens/dist/esm/chart_color_blue_200';
 import chart_color_green_400 from '@patternfly/react-tokens/dist/esm/chart_color_green_400';
 import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
@@ -23,13 +34,24 @@ const toDataPointsForMigrations = (
   selectedTimeRange: TimeRangeOptions,
 ): MigrationDataPoint[] => toDataPoints(allMigrations.map(toTimestamp), selectedTimeRange);
 
-export const MigrationsChartCard: React.FC<MigrationsCardProps> = () => {
+export const MigrationsChartCard: FC<MigrationsCardProps> = () => {
   const { t } = useForkliftTranslation();
+
   const [isDropdownOpened, setIsDropdownOpened] = useState(false);
-  const onToggle = () => setIsDropdownOpened(!isDropdownOpened);
+
   const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRangeOptions>(
     TimeRangeOptions.Last7Days,
   );
+  const onToggleClick = () => {
+    setIsDropdownOpened((isDropdownOpened) => !isDropdownOpened);
+  };
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _value: string | number | undefined,
+  ) => {
+    setIsDropdownOpened(false);
+  };
+
   const [migrations] = useK8sWatchResource<V1beta1Migration[]>({
     groupVersionKind: MigrationModelGroupVersionKind,
     namespaced: true,
@@ -64,36 +86,54 @@ export const MigrationsChartCard: React.FC<MigrationsCardProps> = () => {
   );
 
   const handleTimeRangeSelectedFactory = (timeRange: TimeRangeOptions) => () => {
-    onToggle();
+    onToggleClick();
     setSelectedTimeRange(timeRange);
   };
 
   const headerActions = (
     <Dropdown
-      toggle={<KebabToggle onToggle={onToggle} />}
       isOpen={isDropdownOpened}
-      isPlain
-      dropdownItems={[
+      onOpenChange={setIsDropdownOpened}
+      onSelect={onSelect}
+      toggle={(toggleRef: Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={onToggleClick}
+          isExpanded={isDropdownOpened}
+          variant={'plain'}
+        >
+          <EllipsisVIcon />
+        </MenuToggle>
+      )}
+      shouldFocusFirstItemOnOpen={false}
+      popperProps={{
+        direction: 'down',
+      }}
+    >
+      <DropdownList>
         <DropdownItem
+          value={0}
           onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last7Days)}
           key="7days"
         >
           {t('7 days')}
-        </DropdownItem>,
+        </DropdownItem>
         <DropdownItem
+          value={1}
           onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last31Days)}
           key="31days"
         >
           {t('31 days')}
-        </DropdownItem>,
+        </DropdownItem>
         <DropdownItem
+          value={2}
           onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last24H)}
           key="24hours"
         >
           {t('24 hours')}
-        </DropdownItem>,
-      ]}
-    />
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
   );
 
   return (
diff --git a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/VmMigrationsChartCard.tsx b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/VmMigrationsChartCard.tsx
index fdccf6ab4..d68190c73 100644
--- a/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/VmMigrationsChartCard.tsx
+++ b/packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/VmMigrationsChartCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { FC, Ref, useState } from 'react';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import {
@@ -8,8 +8,19 @@ import {
 } from '@kubev2v/types';
 import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
 import { Chart, ChartAxis, ChartBar, ChartGroup, ChartTooltip } from '@patternfly/react-charts';
-import { Card, CardBody, CardHeader, CardTitle, Flex } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
 import chart_color_blue_200 from '@patternfly/react-tokens/dist/esm/chart_color_blue_200';
 import chart_color_green_400 from '@patternfly/react-tokens/dist/esm/chart_color_green_400';
 import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
@@ -27,10 +38,21 @@ const toDataPointsForVmMigrations = (
   selectedTimeRange: TimeRangeOptions,
 ): MigrationDataPoint[] => toDataPoints(allVmMigrations.map(toTimestamp), selectedTimeRange);
 
-export const VmMigrationsChartCard: React.FC<MigrationsCardProps> = () => {
+export const VmMigrationsChartCard: FC<MigrationsCardProps> = () => {
   const { t } = useForkliftTranslation();
   const [isDropdownOpened, setIsDropdownOpened] = useState(false);
-  const onToggle = () => setIsDropdownOpened(!isDropdownOpened);
+
+  const onToggleClick = () => {
+    setIsDropdownOpened((isDropdownOpened) => !isDropdownOpened);
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _value: string | number | undefined,
+  ) => {
+    setIsDropdownOpened(false);
+  };
+
   const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRangeOptions>(
     TimeRangeOptions.Last7Days,
   );
@@ -86,36 +108,54 @@ export const VmMigrationsChartCard: React.FC<MigrationsCardProps> = () => {
   );
 
   const handleTimeRangeSelectedFactory = (timeRange: TimeRangeOptions) => () => {
-    onToggle();
+    onToggleClick();
     setSelectedTimeRange(timeRange);
   };
 
   const headerActions = (
     <Dropdown
-      toggle={<KebabToggle onToggle={onToggle} />}
       isOpen={isDropdownOpened}
-      isPlain
-      dropdownItems={[
+      onOpenChange={setIsDropdownOpened}
+      onSelect={onSelect}
+      toggle={(toggleRef: Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={onToggleClick}
+          isExpanded={isDropdownOpened}
+          variant={'plain'}
+        >
+          <EllipsisVIcon />
+        </MenuToggle>
+      )}
+      shouldFocusFirstItemOnOpen={false}
+      popperProps={{
+        direction: 'down',
+      }}
+    >
+      <DropdownList>
         <DropdownItem
+          value={0}
           onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last7Days)}
           key="7days"
         >
           {t('7 days')}
-        </DropdownItem>,
+        </DropdownItem>
         <DropdownItem
+          value={1}
           onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last31Days)}
           key="31days"
         >
           {t('31 days')}
-        </DropdownItem>,
+        </DropdownItem>
         <DropdownItem
+          value={2}
           onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last24H)}
           key="24hours"
         >
           {t('24 hours')}
-        </DropdownItem>,
-      ]}
-    />
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
   );
 
   return (
diff --git a/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdown.tsx b/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdown.tsx
index 411efdf1d..766490b43 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdown.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdown.tsx
@@ -1,14 +1,9 @@
-import React from 'react';
-import { useToggle } from 'src/modules/Providers/hooks';
+import React, { Ref } from 'react';
 import { ModalHOC } from 'src/modules/Providers/modals';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import {
-  Dropdown,
-  DropdownPosition,
-  DropdownToggle,
-  KebabToggle,
-} from '@patternfly/react-core/deprecated';
+import { Dropdown, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
 
 import { CellProps } from '../views/list/components';
 
@@ -20,27 +15,43 @@ const PlanActionsKebabDropdown_: React.FC<PlanActionsDropdownProps> = ({ data, i
   const { t } = useForkliftTranslation();
 
   // Hook for managing the open/close state of the dropdown
-  const [isDropdownOpen, toggle] = useToggle();
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen((isOpen) => !isOpen);
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _value: string | number | undefined,
+  ) => {
+    setIsOpen(false);
+  };
 
   // Returning the Dropdown component from PatternFly library
   return (
     <Dropdown
-      onSelect={toggle}
-      isOpen={isDropdownOpen}
-      isPlain
-      position={DropdownPosition.right}
-      className={isKebab ? undefined : 'forklift-dropdown pf-c-menu-toggle'}
-      toggle={
-        isKebab ? (
-          <KebabToggle id="toggle-kebab" onToggle={toggle} />
-        ) : (
-          <DropdownToggle id="toggle-basic" onToggle={toggle}>
-            {t('Actions')}
-          </DropdownToggle>
-        )
-      }
-      dropdownItems={PlanActionsDropdownItems({ data })}
-    />
+      className={isKebab ? undefined : 'forklift-dropdown'}
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+      onSelect={onSelect}
+      toggle={(toggleRef: Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+          variant={isKebab ? 'plain' : 'default'}
+        >
+          {isKebab ? <EllipsisVIcon /> : t('Actions')}
+        </MenuToggle>
+      )}
+      shouldFocusToggleOnSelect
+      popperProps={{
+        position: 'right',
+      }}
+    >
+      <DropdownList>{PlanActionsDropdownItems({ data })}</DropdownList>
+    </Dropdown>
   );
 };
 
diff --git a/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdownItems.tsx b/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdownItems.tsx
index 541d95c15..49d52aef5 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdownItems.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdownItems.tsx
@@ -5,7 +5,7 @@ import { getResourceUrl } from 'src/modules/Providers/utils/helpers';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { PlanModel, PlanModelRef } from '@kubev2v/types';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 
 import {
   ArchiveModal,
@@ -68,15 +68,14 @@ export const PlanActionsDropdownItems = ({ data }: PlanActionsDropdownItemsProps
   };
 
   return [
-    <DropdownItemLink key="EditPlan" href={planURL}>
-      {t('Edit Plan')}
-    </DropdownItemLink>,
+    <DropdownItemLink value={0} key="EditPlan" href={planURL} description={t('Edit Plan')} />,
 
-    <DropdownItem key="start" isDisabled={!canStart} onClick={onClickPlanStart}>
+    <DropdownItem value={1} key="start" isDisabled={!canStart} onClick={onClickPlanStart}>
       {buttonStartLabel}
     </DropdownItem>,
 
     <DropdownItem
+      value={2}
       key="cutover"
       isDisabled={!isWarmAndExecuting || isArchived}
       onClick={onClickPlanCutover}
@@ -85,6 +84,7 @@ export const PlanActionsDropdownItems = ({ data }: PlanActionsDropdownItemsProps
     </DropdownItem>,
 
     <DropdownItem
+      value={3}
       key="duplicate"
       isDisabled={!data?.permissions?.canDelete}
       onClick={onClickDuplicate}
@@ -93,6 +93,7 @@ export const PlanActionsDropdownItems = ({ data }: PlanActionsDropdownItemsProps
     </DropdownItem>,
 
     <DropdownItem
+      value={4}
       key="archive"
       isDisabled={
         !data?.permissions?.canDelete || [PlanPhase.Archived, PlanPhase.Archiving].includes(phase)
@@ -103,6 +104,7 @@ export const PlanActionsDropdownItems = ({ data }: PlanActionsDropdownItemsProps
     </DropdownItem>,
 
     <DropdownItem
+      value={5}
       key="delete"
       isDisabled={!data?.permissions?.canDelete}
       onClick={onClickPlanDelete}
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SelectProvider.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SelectProvider.tsx
index c12abe8e0..8c6350ffc 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SelectProvider.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/create/components/SelectProvider.tsx
@@ -24,7 +24,7 @@ export const SelectProvider: React.FunctionComponent<SelectProviderProps> = ({
   const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
-    setIsOpen(!isOpen);
+    setIsOpen((isOpen) => !isOpen);
   };
 
   const providerTypesArray = Object.keys(providerTypes);
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanTransferNetwork/EditPlanTransferNetwork.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanTransferNetwork/EditPlanTransferNetwork.tsx
index 914ce1c26..255a3992f 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanTransferNetwork/EditPlanTransferNetwork.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/modals/EditPlanTransferNetwork/EditPlanTransferNetwork.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { useProviderInventory, useToggle } from 'src/modules/Providers/hooks';
+import React, { FC, Ref, useState } from 'react';
+import { useProviderInventory } from 'src/modules/Providers/hooks';
 import {
   EditModal,
   EditModalProps,
@@ -17,7 +17,13 @@ import {
   V1beta1Provider,
 } from '@kubev2v/types';
 import { K8sModel, k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 
 const onConfirm: OnConfirmHookType = async ({ resource, model, newValue }) => {
   const plan = resource as V1beta1Plan;
@@ -48,8 +54,20 @@ interface DropdownRendererProps {
 const OpenshiftNetworksInputFactory: ({ resource }) => ModalInputComponentType = ({ resource }) => {
   const provider = resource as V1beta1Provider;
 
-  const DropdownRenderer: React.FC<DropdownRendererProps> = ({ value, onChange }) => {
-    const [isOpen, onToggle] = useToggle(false);
+  const DropdownRenderer: FC<DropdownRendererProps> = ({ value, onChange }) => {
+    // Hook for managing the open/close state of the dropdown
+    const [isOpen, setIsOpen] = useState(false);
+
+    const onToggleClick = () => {
+      setIsOpen((isOpen) => !isOpen);
+    };
+
+    const onSelect = (
+      _event: React.MouseEvent<Element, MouseEvent> | undefined,
+      _value: string | number | undefined,
+    ) => {
+      setIsOpen(false);
+    };
 
     const { inventory: networks } = useProviderInventory<OpenShiftNetworkAttachmentDefinition[]>({
       provider,
@@ -67,6 +85,7 @@ const OpenshiftNetworksInputFactory: ({ resource }) => ModalInputComponentType =
 
     const dropdownItems = [
       <DropdownItem
+        value={0}
         key={''}
         description={'Use the providers default transfer network'}
         onClick={() => onChange('')}
@@ -74,7 +93,12 @@ const OpenshiftNetworksInputFactory: ({ resource }) => ModalInputComponentType =
         {'Providers default'}
       </DropdownItem>,
       ...(transferNetworks || []).map((n) => (
-        <DropdownItem key={getNetworkName(n)} description={n.namespace} onClick={() => onChange(n)}>
+        <DropdownItem
+          value={1}
+          key={getNetworkName(n)}
+          description={n.namespace}
+          onClick={() => onChange(n)}
+        >
           {n.name}
         </DropdownItem>
       )),
@@ -82,16 +106,27 @@ const OpenshiftNetworksInputFactory: ({ resource }) => ModalInputComponentType =
 
     return (
       <Dropdown
-        onSelect={onToggle}
-        toggle={
-          <DropdownToggle id="select network" onToggle={onToggle}>
-            {getNetworkName(value)}
-          </DropdownToggle>
-        }
         isOpen={isOpen}
-        dropdownItems={dropdownItems}
-        menuAppendTo="parent"
-      />
+        onOpenChange={setIsOpen}
+        onSelect={onSelect}
+        toggle={(toggleRef: Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            onClick={onToggleClick}
+            isExpanded={isOpen}
+            variant={'default'}
+          >
+            {getNetworkName(value)}
+          </MenuToggle>
+        )}
+        shouldFocusToggleOnSelect
+        popperProps={{
+          position: 'right',
+        }}
+        isScrollable={true}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
     );
   };
 
diff --git a/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdown.tsx b/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdown.tsx
index e4b10c725..76e3eff5a 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdown.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdown.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Flex, FlexItem } from '@patternfly/react-core';
 import {
   Dropdown,
-  DropdownPosition,
-  DropdownToggle,
-  KebabToggle,
-} from '@patternfly/react-core/deprecated';
+  DropdownList,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
 
-import { useToggle } from '../hooks';
 import { ModalHOC } from '../modals';
 import { CellProps } from '../views';
 
@@ -30,27 +31,43 @@ const ProviderActionsKebabDropdown_: React.FC<ProviderActionsDropdownProps> = ({
   const { t } = useForkliftTranslation();
 
   // Hook for managing the open/close state of the dropdown
-  const [isDropdownOpen, toggle] = useToggle();
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen((isOpen) => !isOpen);
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _value: string | number | undefined,
+  ) => {
+    setIsOpen(false);
+  };
 
   // Returning the Dropdown component from PatternFly library
   return (
     <Dropdown
-      onSelect={toggle}
-      isOpen={isDropdownOpen}
-      isPlain
-      position={DropdownPosition.right}
       className={isKebab ? undefined : 'forklift-dropdown pf-c-menu-toggle'}
-      toggle={
-        isKebab ? (
-          <KebabToggle id="toggle-kebab" onToggle={toggle} />
-        ) : (
-          <DropdownToggle id="toggle-basic" onToggle={toggle}>
-            {t('Actions')}
-          </DropdownToggle>
-        )
-      }
-      dropdownItems={ProviderActionsDropdownItems({ data })}
-    />
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+      onSelect={onSelect}
+      toggle={(toggleRef: Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+          variant={isKebab ? 'plain' : 'default'}
+        >
+          {isKebab ? <EllipsisVIcon /> : t('Actions')}
+        </MenuToggle>
+      )}
+      shouldFocusToggleOnSelect
+      popperProps={{
+        position: 'right',
+      }}
+    >
+      <DropdownList>{ProviderActionsDropdownItems({ data })}</DropdownList>
+    </Dropdown>
   );
 };
 
diff --git a/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdownItems.tsx b/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdownItems.tsx
index 28aade4d8..f0d1b0822 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdownItems.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/actions/ProviderActionsDropdownItems.tsx
@@ -3,7 +3,7 @@ import { DropdownItemLink } from 'src/components/actions/DropdownItemLink';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { ProviderModel, ProviderModelRef } from '@kubev2v/types';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 
 import { DeleteModal, useModal } from '../modals';
 import { getResourceUrl, ProviderData } from '../utils';
@@ -25,16 +25,33 @@ export const ProviderActionsDropdownItems = ({ data }: ProviderActionsDropdownIt
   };
 
   const dropdownItems = [
-    <DropdownItemLink key="EditProvider" href={providerURL}>
-      {t('Edit Provider')}
-    </DropdownItemLink>,
-    <DropdownItemLink key="EditCredentials" href={`${providerURL}/credentials`}>
-      {t('Edit Provider Credentials')}
-    </DropdownItemLink>,
-    <DropdownItemLink key="MigratePlan" href={`${providerURL}/vms`}>
-      {t('Migrate')}
-    </DropdownItemLink>,
-    <DropdownItem key="delete" isDisabled={!data?.permissions?.canDelete} onClick={onClick}>
+    <DropdownItemLink
+      value={0}
+      key="EditProvider"
+      href={providerURL}
+      description={t('Edit Provider')}
+    />,
+
+    <DropdownItemLink
+      value={1}
+      key="EditCredentials"
+      href={`${providerURL}/credentials`}
+      description={t('Edit Provider Credentials')}
+    />,
+
+    <DropdownItemLink
+      value={2}
+      key="MigratePlan"
+      href={`${providerURL}/vms`}
+      description={t('Migrate')}
+    />,
+
+    <DropdownItem
+      value={3}
+      key="delete"
+      isDisabled={!data?.permissions?.canDelete}
+      onClick={onClick}
+    >
       {t('Delete Provider')}
     </DropdownItem>,
   ];
diff --git a/packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderDefaultTransferNetwork/EditProviderDefaultTransferNetwork.tsx b/packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderDefaultTransferNetwork/EditProviderDefaultTransferNetwork.tsx
index a60881231..c524d14a5 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderDefaultTransferNetwork/EditProviderDefaultTransferNetwork.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderDefaultTransferNetwork/EditProviderDefaultTransferNetwork.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC, Ref, useState } from 'react';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import {
@@ -8,9 +8,15 @@ import {
   V1beta1Provider,
 } from '@kubev2v/types';
 import { K8sModel, k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-
-import { useProviderInventory, useToggle } from '../../hooks';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+
+import { useProviderInventory } from '../../hooks';
 import {
   EditModal,
   EditModalProps,
@@ -60,8 +66,21 @@ interface DropdownRendererProps {
 const OpenshiftNetworksInputFactory: ({ resource }) => ModalInputComponentType = ({
   resource: provider,
 }) => {
-  const DropdownRenderer: React.FC<DropdownRendererProps> = ({ value, onChange }) => {
-    const [isOpen, onToggle] = useToggle(false);
+  const DropdownRenderer: FC<DropdownRendererProps> = ({ value, onChange }) => {
+    // Hook for managing the open/close state of the dropdown
+    const [isOpen, setIsOpen] = useState(false);
+
+    const onToggleClick = () => {
+      setIsOpen((isOpen) => !isOpen);
+    };
+
+    const onSelect = (
+      _event: React.MouseEvent<Element, MouseEvent> | undefined,
+      _value: string | number | undefined,
+    ) => {
+      setIsOpen(false);
+    };
+
     const { inventory: networks } = useProviderInventory<OpenShiftNetworkAttachmentDefinition[]>({
       provider,
       // eslint-disable-next-line @cspell/spellchecker
@@ -72,7 +91,8 @@ const OpenshiftNetworksInputFactory: ({ resource }) => ModalInputComponentType =
 
     const dropdownItems = [
       <DropdownItem
-        key={'Pod network'}
+        value={0}
+        key="Pod network"
         description={'Default pod network'}
         onClick={() => onChange('')}
       >
@@ -80,6 +100,7 @@ const OpenshiftNetworksInputFactory: ({ resource }) => ModalInputComponentType =
       </DropdownItem>,
       ...(networks || []).map((n) => (
         <DropdownItem
+          value={1}
           key={n.name}
           description={n.namespace}
           onClick={() => onChange(`${n.namespace}/${n.name}`)}
@@ -91,16 +112,27 @@ const OpenshiftNetworksInputFactory: ({ resource }) => ModalInputComponentType =
 
     return (
       <Dropdown
-        onSelect={onToggle}
-        toggle={
-          <DropdownToggle id="select network" onToggle={onToggle}>
-            {name}
-          </DropdownToggle>
-        }
         isOpen={isOpen}
-        dropdownItems={dropdownItems}
-        menuAppendTo="parent"
-      />
+        onOpenChange={setIsOpen}
+        onSelect={onSelect}
+        toggle={(toggleRef: Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            onClick={onToggleClick}
+            isExpanded={isOpen}
+            variant={'default'}
+          >
+            {name}
+          </MenuToggle>
+        )}
+        shouldFocusToggleOnSelect
+        popperProps={{
+          position: 'right',
+        }}
+        isScrollable={true}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
     );
   };
 
diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdown.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdown.tsx
index 7051b67b6..647da2398 100644
--- a/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdown.tsx
+++ b/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdown.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
-import { useToggle } from 'src/modules/Providers/hooks';
+import React, { FC, Ref, useState } from 'react';
 import { ModalHOC } from 'src/modules/Providers/modals';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Flex, FlexItem } from '@patternfly/react-core';
 import {
   Dropdown,
-  DropdownPosition,
-  DropdownToggle,
-  KebabToggle,
-} from '@patternfly/react-core/deprecated';
+  DropdownList,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
 
 import { CellProps } from '../views/list/components';
 
@@ -17,34 +18,46 @@ import { StorageMapActionsDropdownItems } from './StorageMapActionsDropdownItems
 
 import './StorageMapActionsDropdown.style.css';
 
-const StorageMapActionsKebabDropdown_: React.FC<StorageMapActionsDropdownProps> = ({
-  data,
-  isKebab,
-}) => {
+const StorageMapActionsKebabDropdown_: FC<StorageMapActionsDropdownProps> = ({ data, isKebab }) => {
   const { t } = useForkliftTranslation();
 
-  // Hook for managing the open/close state of the dropdown
-  const [isDropdownOpen, toggle] = useToggle();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen((isOpen) => !isOpen);
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _value: string | number | undefined,
+  ) => {
+    setIsOpen(false);
+  };
 
   // Returning the Dropdown component from PatternFly library
   return (
     <Dropdown
-      onSelect={toggle}
-      isOpen={isDropdownOpen}
-      isPlain
-      position={DropdownPosition.right}
       className={isKebab ? undefined : 'forklift-dropdown pf-c-menu-toggle'}
-      toggle={
-        isKebab ? (
-          <KebabToggle id="toggle-kebab" onToggle={toggle} />
-        ) : (
-          <DropdownToggle id="toggle-basic" onToggle={toggle}>
-            {t('Actions')}
-          </DropdownToggle>
-        )
-      }
-      dropdownItems={StorageMapActionsDropdownItems({ data })}
-    />
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+      onSelect={onSelect}
+      toggle={(toggleRef: Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+          variant={isKebab ? 'plain' : 'default'}
+        >
+          {isKebab ? <EllipsisVIcon /> : t('Actions')}
+        </MenuToggle>
+      )}
+      shouldFocusToggleOnSelect
+      popperProps={{
+        position: 'right',
+      }}
+    >
+      <DropdownList>{StorageMapActionsDropdownItems({ data })}</DropdownList>
+    </Dropdown>
   );
 };
 
diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdownItems.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdownItems.tsx
index a34b43271..1ebbc8873 100644
--- a/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdownItems.tsx
+++ b/packages/forklift-console-plugin/src/modules/StorageMaps/actions/StorageMapActionsDropdownItems.tsx
@@ -5,7 +5,7 @@ import { getResourceUrl } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { StorageMapModel, StorageMapModelRef } from '@kubev2v/types';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 
 import { StorageMapData } from '../utils';
 
@@ -26,10 +26,19 @@ export const StorageMapActionsDropdownItems = ({ data }: StorageMapActionsDropdo
   };
 
   return [
-    <DropdownItemLink key="EditStorageMapping" href={StorageMapURL}>
-      {t('Edit StorageMap')}
-    </DropdownItemLink>,
-    <DropdownItem key="delete" isDisabled={!data?.permissions?.canDelete} onClick={onClick}>
+    <DropdownItemLink
+      value={0}
+      key="EditStorageMapping"
+      href={StorageMapURL}
+      description={t('Edit StorageMap')}
+    />,
+
+    <DropdownItem
+      value={1}
+      key="delete"
+      isDisabled={!data?.permissions?.canDelete}
+      onClick={onClick}
+    >
       {t('Delete StorageMap')}
     </DropdownItem>,
   ];