From 5fbe7b602ccefaece6eac31f93ebe3b35444d161 Mon Sep 17 00:00:00 2001 From: Dallas Date: Tue, 26 Sep 2023 09:13:04 -0500 Subject: [PATCH] :seedling: 1241 replace deprecated pf dropdown (#1375) removed all instances of deprecated dropdown related imports (dropdown, dropdownItem, dropdownGroup, dropdownToggle, etc) closes #1241 --------- Signed-off-by: gitdallas --- .../FilterToolbar/FilterToolbar.tsx | 68 ++++++------ client/src/app/components/KebabDropdown.tsx | 36 +++++-- client/src/app/components/MenuActions.tsx | 39 +++---- client/src/app/components/TargetCard.tsx | 2 +- .../app/components/ToolbarBulkSelector.tsx | 60 ++++++----- .../__snapshots__/MenuActions.test.tsx.snap | 100 ++++++++++-------- .../__snapshots__/PageHeader.test.tsx.snap | 100 ++++++++++-------- .../app/layout/HeaderApp/MobileDropdown.tsx | 29 +---- client/src/app/layout/HeaderApp/SSOMenu.tsx | 27 ++--- .../__snapshots__/HeaderApp.test.tsx.snap | 74 ++++--------- .../manage-imports/manage-imports.tsx | 12 +-- 11 files changed, 266 insertions(+), 281 deletions(-) diff --git a/client/src/app/components/FilterToolbar/FilterToolbar.tsx b/client/src/app/components/FilterToolbar/FilterToolbar.tsx index 40985d504b..dc3f17f6c8 100644 --- a/client/src/app/components/FilterToolbar/FilterToolbar.tsx +++ b/client/src/app/components/FilterToolbar/FilterToolbar.tsx @@ -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"; @@ -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; @@ -42,7 +41,7 @@ export interface IBasicFilterCategory< export interface IMultiselectFilterCategory< TItem, - TFilterCategoryKey extends string + TFilterCategoryKey extends string, > extends IBasicFilterCategory { selectOptions: OptionPropsWithKey[]; placeholderText?: string; @@ -70,7 +69,7 @@ export type IFilterValues = Partial< export const getFilterLogicOperator = < TItem, - TFilterCategoryKey extends string + TFilterCategoryKey extends string, >( filterCategory?: FilterCategory, defaultOperator: "AND" | "OR" = "OR" @@ -131,24 +130,26 @@ export const FilterToolbar = ({ ); const renderDropdownItems = () => { - if (!!filterGroups.length) { + if (filterGroups.length) { return filterGroups.map((filterGroup) => ( - {filterCategories - .filter( - (filterCategory) => filterCategory.filterGroup === filterGroup - ) - .map((filterCategory) => { - return ( - onCategorySelect(filterCategory)} - > - {filterCategory.title} - - ); - })} + + {filterCategories + .filter( + (filterCategory) => filterCategory.filterGroup === filterGroup + ) + .map((filterCategory) => { + return ( + onCategorySelect(filterCategory)} + > + {filterCategory.title} + + ); + })} + )); } else { @@ -177,21 +178,22 @@ export const FilterToolbar = ({ {!showFiltersSideBySide && ( ( + + ref={toggleRef} + onClick={() => setIsCategoryDropdownOpen(!isCategoryDropdownOpen) } isDisabled={isDisabled} > {currentFilterCategory?.title} - - } + + )} isOpen={isCategoryDropdownOpen} - dropdownItems={renderDropdownItems()} - /> + > + {renderDropdownItems()} + )} diff --git a/client/src/app/components/KebabDropdown.tsx b/client/src/app/components/KebabDropdown.tsx index faa97fa18a..3224c6fe06 100644 --- a/client/src/app/components/KebabDropdown.tsx +++ b/client/src/app/components/KebabDropdown.tsx @@ -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 = ({ dropdownItems, + ariaLabel, }) => { const [isOpen, setIsOpen] = useState(false); - const onKebabToggle = (isOpen: boolean) => { - setIsOpen(isOpen); - }; - return ( onKebabToggle(isOpen)} />} + popperProps={{ position: "right" }} isOpen={isOpen} - isPlain - position="right" - dropdownItems={dropdownItems} - /> + onOpenChange={(isOpen) => setIsOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( + setIsOpen(!isOpen)} + variant="plain" + aria-label={ariaLabel || "Table toolbar actions kebab toggle"} + isDisabled={!dropdownItems || dropdownItems.length === 0} + > + + )} + > + {dropdownItems} + ); }; diff --git a/client/src/app/components/MenuActions.tsx b/client/src/app/components/MenuActions.tsx index fc7da90f53..3a40c86f9e 100644 --- a/client/src/app/components/MenuActions.tsx +++ b/client/src/app/components/MenuActions.tsx @@ -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 }[]; @@ -17,23 +17,26 @@ export const MenuActions: React.FC = ({ actions }) => { { - setIsOpen(!isOpen); + setIsOpen(false); }} - toggle={ - { - setIsOpen(isOpen); - }} - toggleIndicator={CaretDownIcon} + toggle={(toggleRef) => ( + setIsOpen(!isOpen)} + isExpanded={isOpen} > Actions - - } - dropdownItems={actions.map((element, index) => ( - - {element.label} - - ))} - /> + + )} + shouldFocusToggleOnSelect + > + + {actions.map((item, index) => ( + + {item.label} + + ))} + + ); }; diff --git a/client/src/app/components/TargetCard.tsx b/client/src/app/components/TargetCard.tsx index ce4d82570b..5044d0af22 100644 --- a/client/src/app/components/TargetCard.tsx +++ b/client/src/app/components/TargetCard.tsx @@ -6,6 +6,7 @@ import { EmptyStateVariant, Card, CardBody, + DropdownItem, Text, Flex, FlexItem, @@ -17,7 +18,6 @@ import { PanelMainBody, Panel, } from "@patternfly/react-core"; -import { DropdownItem } from "@patternfly/react-core/deprecated"; import { Select, SelectOption, diff --git a/client/src/app/components/ToolbarBulkSelector.tsx b/client/src/app/components/ToolbarBulkSelector.tsx index bd1822d2fe..ed3712f726 100644 --- a/client/src/app/components/ToolbarBulkSelector.tsx +++ b/client/src/app/components/ToolbarBulkSelector.tsx @@ -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"; @@ -67,7 +70,6 @@ export const ToolbarBulkSelector = ({ } return state; }; - const [bulkSelectOpen, setBulkSelectOpen] = React.useState(false); const handleSelectAll = (checked: boolean) => { onSelectAll(!!checked); }; @@ -113,31 +115,33 @@ export const ToolbarBulkSelector = ({ {isExpandable && {collapseAllBtn()}} { - if (getBulkSelectState() !== false) { - onSelectAll(false); - } else { - onSelectAll(true); - } - }} - isChecked={getBulkSelectState()} - />, - ]} - onToggle={(_, isOpen) => { - setBulkSelectOpen(isOpen); + isOpen={isOpen} + toggle={(toggleRef) => ( + setIsOpen(!isOpen)} + splitButtonOptions={{ + items: [ + { + if (getBulkSelectState() !== false) { + onSelectAll(false); + } else { + onSelectAll(true); + } + }} + isChecked={getBulkSelectState()} + />, + ], }} /> - } - isOpen={bulkSelectOpen} - dropdownItems={dropdownItems} - > + )} + > + {dropdownItems} + ); diff --git a/client/src/app/components/tests/__snapshots__/MenuActions.test.tsx.snap b/client/src/app/components/tests/__snapshots__/MenuActions.test.tsx.snap index 5fe62dc4a8..13f8df57e7 100644 --- a/client/src/app/components/tests/__snapshots__/MenuActions.test.tsx.snap +++ b/client/src/app/components/tests/__snapshots__/MenuActions.test.tsx.snap @@ -5,65 +5,73 @@ exports[`MenuActions Renders without crashing 1`] = ` "asFragment": [Function], "baseElement":
-
- -
-
- , - "container":
-
+ , + "container":
+
, "debug": [Function], "findAllByAltText": [Function], diff --git a/client/src/app/components/tests/__snapshots__/PageHeader.test.tsx.snap b/client/src/app/components/tests/__snapshots__/PageHeader.test.tsx.snap index 9ed3bc61e1..b5efda83a8 100644 --- a/client/src/app/components/tests/__snapshots__/PageHeader.test.tsx.snap +++ b/client/src/app/components/tests/__snapshots__/PageHeader.test.tsx.snap @@ -97,34 +97,38 @@ exports[`PageHeader Renders without crashing 1`] = `
- + +
@@ -290,34 +294,38 @@ exports[`PageHeader Renders without crashing 1`] = `
- + +
diff --git a/client/src/app/layout/HeaderApp/MobileDropdown.tsx b/client/src/app/layout/HeaderApp/MobileDropdown.tsx index 715b382181..acf6f77421 100644 --- a/client/src/app/layout/HeaderApp/MobileDropdown.tsx +++ b/client/src/app/layout/HeaderApp/MobileDropdown.tsx @@ -1,39 +1,20 @@ import React, { useState } from "react"; -import { - Dropdown, - DropdownItem, - KebabToggle, -} from "@patternfly/react-core/deprecated"; +import { DropdownItem } from "@patternfly/react-core"; import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon"; -import { AppAboutModal } from "../AppAboutModal"; +import { KebabDropdown } from "@app/components/KebabDropdown"; +import { AppAboutModal } from "@app/layout/AppAboutModal"; export const MobileDropdown: React.FC = () => { - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); const [isAboutModalOpen, setAboutModalOpen] = useState(false); - const onKebabDropdownToggle = (isOpen: boolean) => - setIsKebabDropdownOpen(isOpen); - - const onKebabDropdownSelect = () => { - setIsKebabDropdownOpen((current) => !current); - }; - const toggleAboutModal = () => { setAboutModalOpen((current) => !current); }; return ( <> - onKebabDropdownToggle(isOpen)} - /> - } - isOpen={isKebabDropdownOpen} + diff --git a/client/src/app/layout/HeaderApp/SSOMenu.tsx b/client/src/app/layout/HeaderApp/SSOMenu.tsx index d43b08d970..27f352c8d8 100644 --- a/client/src/app/layout/HeaderApp/SSOMenu.tsx +++ b/client/src/app/layout/HeaderApp/SSOMenu.tsx @@ -2,11 +2,13 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { useKeycloak } from "@react-keycloak/web"; import { + Dropdown, + MenuToggle, DropdownGroup, DropdownItem, + DropdownList, ToolbarItem, } from "@patternfly/react-core"; -import { Dropdown, DropdownToggle } from "@patternfly/react-core/deprecated"; import { isAuthRequired, LocalStorageKey } from "@app/Constants"; import { useHistory } from "react-router-dom"; @@ -35,19 +37,20 @@ export const SSOMenu: React.FC = () => { > ( + onDropdownToggle(isOpen)} + onClick={() => onDropdownToggle(!isDropdownOpen)} > {(keycloak?.idTokenParsed as any)["preferred_username"]} - - } - dropdownItems={[ - + + )} + > + + { > {t("actions.logout")} - , - ]} - /> + + + )} diff --git a/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap b/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap index 77df778eaf..880956053b 100644 --- a/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap +++ b/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap @@ -93,35 +93,16 @@ exports[`Test snapshot 1`] = `
- +
@@ -236,35 +217,16 @@ exports[`Test snapshot 1`] = `
- +
diff --git a/client/src/app/pages/applications/manage-imports/manage-imports.tsx b/client/src/app/pages/applications/manage-imports/manage-imports.tsx index 0f88325529..69a89f3dcd 100644 --- a/client/src/app/pages/applications/manage-imports/manage-imports.tsx +++ b/client/src/app/pages/applications/manage-imports/manage-imports.tsx @@ -4,13 +4,13 @@ import { useTranslation } from "react-i18next"; import { Button, ButtonVariant, + DropdownItem, Modal, PageSection, Popover, ToolbarGroup, ToolbarItem, } from "@patternfly/react-core"; -import { DropdownItem } from "@patternfly/react-core/deprecated"; import { cellWidth, IAction, @@ -350,12 +350,10 @@ export const ManageImports: React.FC = () => { dropdownItems={[ - {t("actions.downloadCsvTemplate")} - - } - />, + to="/template_application_import.csv" + > + {t("actions.downloadCsvTemplate")} + , ]} />