Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🌱 1241 replace deprecated pf dropdown #1375

Merged
merged 11 commits into from
Sep 26, 2023
Merged

🌱 1241 replace deprecated pf dropdown #1375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0cd7185
chore: 1241 replace deprecated pf dropdowns
gitdallas Sep 13, 2023
84c2557
replace deprecated dropdown in menuactions
gitdallas Sep 18, 2023
19dc2be
replace deprecated dropdown in bulkselector
gitdallas Sep 18, 2023
b3d7eda
replace deprecated dropdown in filtertoolbar
gitdallas Sep 18, 2023
a93d4cf
replace deprecated dropdown in mobiledropdown
gitdallas Sep 18, 2023
fcf3f16
replace deprecated dropdown in ssomenu
gitdallas Sep 19, 2023
724c723
replace deprecated dropdown in manage-imports
gitdallas Sep 19, 2023
18a4a8d
update snaps for dropdown deprecation refactor
gitdallas Sep 19, 2023
c257821
self close tag
gitdallas Sep 25, 2023
a57dcd4
Merge branch 'main' into chore/1241-replace-deprecated-pf-dropdown
gitdallas Sep 25, 2023
ec0abce
Merge branch 'main' into chore/1241-replace-deprecated-pf-dropdown
gitdallas Sep 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 35 additions & 33 deletions client/src/app/components/FilterToolbar/FilterToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import * as React from "react";
import {
Dropdown,
DropdownItem,
DropdownGroup,
DropdownList,
MenuToggle,
SelectOptionProps,
ToolbarToggleGroup,
ToolbarItem,
} from "@patternfly/react-core";
import {
Dropdown,
DropdownItem,
DropdownGroup,
DropdownToggle,
} from "@patternfly/react-core/deprecated";
import FilterIcon from "@patternfly/react-icons/dist/esm/icons/filter-icon";

import { FilterControl } from "./FilterControl";
Expand All @@ -29,7 +28,7 @@ export interface OptionPropsWithKey extends SelectOptionProps {

export interface IBasicFilterCategory<
TItem, // The actual API objects we're filtering
TFilterCategoryKey extends string // Unique identifiers for each filter category (inferred from key properties if possible)
TFilterCategoryKey extends string, // Unique identifiers for each filter category (inferred from key properties if possible)
> {
key: TFilterCategoryKey; // For use in the filterValues state object. Must be unique per category.
title: string;
Expand All @@ -42,7 +41,7 @@ export interface IBasicFilterCategory<

export interface IMultiselectFilterCategory<
TItem,
TFilterCategoryKey extends string
TFilterCategoryKey extends string,
> extends IBasicFilterCategory<TItem, TFilterCategoryKey> {
selectOptions: OptionPropsWithKey[];
placeholderText?: string;
Expand Down Expand Up @@ -70,7 +69,7 @@ export type IFilterValues<TFilterCategoryKey extends string> = Partial<

export const getFilterLogicOperator = <
TItem,
TFilterCategoryKey extends string
TFilterCategoryKey extends string,
>(
filterCategory?: FilterCategory<TItem, TFilterCategoryKey>,
defaultOperator: "AND" | "OR" = "OR"
Expand Down Expand Up @@ -131,24 +130,26 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
);

const renderDropdownItems = () => {
if (!!filterGroups.length) {
if (filterGroups.length) {
return filterGroups.map((filterGroup) => (
<DropdownGroup label={filterGroup} key={filterGroup}>
{filterCategories
.filter(
(filterCategory) => filterCategory.filterGroup === filterGroup
)
.map((filterCategory) => {
return (
<DropdownItem
id={`filter-category-${filterCategory.key}`}
key={filterCategory.key}
onClick={() => onCategorySelect(filterCategory)}
>
{filterCategory.title}
</DropdownItem>
);
})}
<DropdownList>
{filterCategories
.filter(
(filterCategory) => filterCategory.filterGroup === filterGroup
)
.map((filterCategory) => {
return (
<DropdownItem
id={`filter-category-${filterCategory.key}`}
key={filterCategory.key}
onClick={() => onCategorySelect(filterCategory)}
>
{filterCategory.title}
</DropdownItem>
);
})}
</DropdownList>
</DropdownGroup>
));
} else {
Expand Down Expand Up @@ -177,21 +178,22 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
{!showFiltersSideBySide && (
<ToolbarItem>
<Dropdown
isGrouped={!!filterGroups.length}
toggle={
<DropdownToggle
toggle={(toggleRef) => (
<MenuToggle
id="filtered-by"
onToggle={() =>
ref={toggleRef}
onClick={() =>
setIsCategoryDropdownOpen(!isCategoryDropdownOpen)
}
isDisabled={isDisabled}
>
<FilterIcon /> {currentFilterCategory?.title}
</DropdownToggle>
}
</MenuToggle>
)}
isOpen={isCategoryDropdownOpen}
dropdownItems={renderDropdownItems()}
/>
>
{renderDropdownItems()}
</Dropdown>
</ToolbarItem>
)}

Expand Down
36 changes: 26 additions & 10 deletions client/src/app/components/KebabDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,43 @@
import React, { useState } from "react";

import { Dropdown, KebabToggle } from "@patternfly/react-core/deprecated";
import {
Dropdown,
DropdownList,
MenuToggle,
MenuToggleElement,
} from "@patternfly/react-core";
import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";

export interface IKebabDropdownProps {
dropdownItems?: React.ReactNode[];
ariaLabel?: string;
}

export const KebabDropdown: React.FC<IKebabDropdownProps> = ({
dropdownItems,
ariaLabel,
}) => {
const [isOpen, setIsOpen] = useState(false);

const onKebabToggle = (isOpen: boolean) => {
setIsOpen(isOpen);
};

return (
<Dropdown
toggle={<KebabToggle onToggle={(_, isOpen) => onKebabToggle(isOpen)} />}
popperProps={{ position: "right" }}
isOpen={isOpen}
isPlain
position="right"
dropdownItems={dropdownItems}
/>
onOpenChange={(isOpen) => setIsOpen(isOpen)}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
isExpanded={isOpen}
onClick={() => setIsOpen(!isOpen)}
variant="plain"
aria-label={ariaLabel || "Table toolbar actions kebab toggle"}
isDisabled={!dropdownItems || dropdownItems.length === 0}
>
<EllipsisVIcon aria-hidden="true" />
</MenuToggle>
)}
>
<DropdownList>{dropdownItems}</DropdownList>
</Dropdown>
);
};
39 changes: 21 additions & 18 deletions client/src/app/components/MenuActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import React, { useState } from "react";
import {
Dropdown,
DropdownItem,
DropdownToggle,
} from "@patternfly/react-core/deprecated";
import CaretDownIcon from "@patternfly/react-icons/dist/esm/icons/caret-down-icon";
DropdownList,
MenuToggle,
} from "@patternfly/react-core";

export interface MenuActionsProps {
actions: { label: string; callback: () => void }[];
Expand All @@ -17,23 +17,26 @@ export const MenuActions: React.FC<MenuActionsProps> = ({ actions }) => {
<Dropdown
isOpen={isOpen}
onSelect={() => {
setIsOpen(!isOpen);
setIsOpen(false);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems counterintuitive to me.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when a selection is made, we want to close the dropdown

Copy link
Member

@ibolton336 ibolton336 Sep 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just struck me as odd that there are no other actions involved in the select handler other than closing the dropdown. I think this component may be deprecated.

Copy link
Collaborator Author

@gitdallas gitdallas Sep 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the dropdown items have their own. i suppose this is part of being composable and having more flexibility. could make the dropdown item have an onclick with () => setIsOpen(false); item.callback();, but then would have to pass the args too instead of just putting item.callback in there. it's nice that it can be handled by the dropdown for all selections.

Copy link
Member

@ibolton336 ibolton336 Sep 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 - After looking into this, seems that there are never any menuActions passed to the PageHeader component. I think this is a leftover component that just never got deleted.

}}
toggle={
<DropdownToggle
onToggle={(_, isOpen) => {
setIsOpen(isOpen);
}}
toggleIndicator={CaretDownIcon}
toggle={(toggleRef) => (
<MenuToggle
ref={toggleRef}
onClick={() => setIsOpen(!isOpen)}
isExpanded={isOpen}
>
Actions
</DropdownToggle>
}
dropdownItems={actions.map((element, index) => (
<DropdownItem key={index} component="button" onClick={element.callback}>
{element.label}
</DropdownItem>
))}
/>
</MenuToggle>
)}
shouldFocusToggleOnSelect
>
<DropdownList>
{actions.map((item, index) => (
<DropdownItem key={index} onClick={item.callback}>
{item.label}
</DropdownItem>
))}
</DropdownList>
</Dropdown>
);
};
2 changes: 1 addition & 1 deletion client/src/app/components/TargetCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
EmptyStateVariant,
Card,
CardBody,
DropdownItem,
Text,
Flex,
FlexItem,
Expand All @@ -17,7 +18,6 @@ import {
PanelMainBody,
Panel,
} from "@patternfly/react-core";
import { DropdownItem } from "@patternfly/react-core/deprecated";
import {
Select,
SelectOption,
Expand Down
60 changes: 32 additions & 28 deletions client/src/app/components/ToolbarBulkSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Button, PaginationProps, ToolbarItem } from "@patternfly/react-core";
import {
Button,
Dropdown,
DropdownItem,
DropdownToggle,
DropdownToggleCheckbox,
} from "@patternfly/react-core/deprecated";
DropdownList,
MenuToggle,
MenuToggleCheckbox,
PaginationProps,
ToolbarItem,
} from "@patternfly/react-core";

import AngleDownIcon from "@patternfly/react-icons/dist/esm/icons/angle-down-icon";
import AngleRightIcon from "@patternfly/react-icons/dist/esm/icons/angle-right-icon";
Expand Down Expand Up @@ -67,7 +70,6 @@ export const ToolbarBulkSelector = <T,>({
}
return state;
};
const [bulkSelectOpen, setBulkSelectOpen] = React.useState(false);
const handleSelectAll = (checked: boolean) => {
onSelectAll(!!checked);
};
Expand Down Expand Up @@ -113,31 +115,33 @@ export const ToolbarBulkSelector = <T,>({
{isExpandable && <ToolbarItem>{collapseAllBtn()}</ToolbarItem>}
<ToolbarItem>
<Dropdown
toggle={
<DropdownToggle
splitButtonItems={[
<DropdownToggleCheckbox
id="bulk-selected-items-checkbox"
key="bulk-select-checkbox"
aria-label="Select all"
onChange={() => {
if (getBulkSelectState() !== false) {
onSelectAll(false);
} else {
onSelectAll(true);
}
}}
isChecked={getBulkSelectState()}
/>,
]}
onToggle={(_, isOpen) => {
setBulkSelectOpen(isOpen);
isOpen={isOpen}
toggle={(toggleRef) => (
<MenuToggle
ref={toggleRef}
onClick={() => setIsOpen(!isOpen)}
splitButtonOptions={{
items: [
<MenuToggleCheckbox
id="bulk-selected-items-checkbox"
key="bulk-select-checkbox"
aria-label="Select all"
onChange={() => {
if (getBulkSelectState() !== false) {
onSelectAll(false);
} else {
onSelectAll(true);
}
}}
isChecked={getBulkSelectState()}
/>,
],
}}
/>
}
isOpen={bulkSelectOpen}
dropdownItems={dropdownItems}
></Dropdown>
)}
>
<DropdownList>{dropdownItems}</DropdownList>
</Dropdown>
</ToolbarItem>
</>
);
Expand Down
Loading