Skip to content

Commit

Permalink
Merge pull request #1430 from sgratch/migrate-deprecated-Dropdown-to-…
Browse files Browse the repository at this point in the history
…pf5-and-fix-few-bugs

Migrate deprecated Dropdown component to PF5 and remove ActionServiceDropdown
  • Loading branch information
sgratch authored Jan 23, 2025
2 parents bbb2a04 + ae59fb0 commit 976bb83
Show file tree
Hide file tree
Showing 19 changed files with 471 additions and 355 deletions.

This file was deleted.

3 changes: 0 additions & 3 deletions packages/common/src/components/ActionServiceDropdown/index.ts

This file was deleted.

1 change: 0 additions & 1 deletion packages/common/src/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// @index(['./*', /__/g], f => `export * from '${f.path}';`)
export * from './ActionServiceDropdown';
export * from './ExternalLink';
export * from './Filter';
export * from './FilterGroup';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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;
};
Original file line number Diff line number Diff line change
@@ -1,54 +1,67 @@
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';

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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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>,
];
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';

Expand All @@ -27,6 +34,7 @@ const hideFromViewDropdownOption = (onHide: () => void, t) => {

return hasHideAction ? (
<DropdownItem
value={0}
key="action"
component="button"
description={t(
Expand All @@ -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 (
Expand Down
Loading

0 comments on commit 976bb83

Please sign in to comment.