diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx index 12e4a0739a..1fb5fc40d9 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx @@ -1,12 +1,7 @@ import * as React from 'react'; import { useNavigate } from 'react-router-dom'; -import { - Dropdown, - DropdownItem, - DropdownSeparator, - DropdownToggle, -} from '@patternfly/react-core/deprecated'; +import { Divider, Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core'; import { usePipelinesAPI } from '~/concepts/pipelines/context'; import PipelineVersionImportModal from '~/concepts/pipelines/content/import/PipelineVersionImportModal'; @@ -45,99 +40,111 @@ const PipelineDetailsActions: React.FC = ({ return ( <> setOpen(isOpenChange)} + shouldFocusToggleOnSelect onSelect={() => setOpen(false)} - menuAppendTo={getDashboardMainContainer} - toggle={ - setOpen(!open)}> + popperProps={{ appendTo: getDashboardMainContainer, position: 'right' }} + toggle={(toggleRef) => ( + setOpen(!open)} + isExpanded={open} + > Actions - - } + + )} isOpen={open} - position="right" - dropdownItems={[ - setIsVersionImportModalOpen(true)}> - Upload new version - , - , - - navigate( - pipelineVersionCreateRunRoute( - namespace, - pipeline?.pipeline_id, - pipelineVersion?.pipeline_version_id, - ), - { - state: { lastPipeline: pipeline, lastVersion: pipelineVersion }, - }, - ) - } - > - Create run - , - - navigate( - pipelineVersionCreateRecurringRunRoute( - namespace, - pipeline?.pipeline_id, - pipelineVersion?.pipeline_version_id, - ), - { - state: { lastPipeline: pipeline, lastVersion: pipelineVersion }, - }, - ) - } - > - Create schedule - , - ...(pipeline && pipelineVersion - ? [ - , - - navigate( - pipelineVersionRunsRoute( - namespace, - pipeline.pipeline_id, - pipelineVersion.pipeline_version_id, - ), - ) - } - > - View runs - , - - navigate( - pipelineVersionRecurringRunsRoute( - namespace, - pipeline.pipeline_id, - pipelineVersion.pipeline_version_id, - ), - ) - } - > - View schedules - , - ] - : []), - - , - onDelete()}> - Delete pipeline version - , - ]} - /> + > + + {[ + setIsVersionImportModalOpen(true)}> + Upload new version + , + , + + navigate( + pipelineVersionCreateRunRoute( + namespace, + pipeline?.pipeline_id, + pipelineVersion?.pipeline_version_id, + ), + { + state: { lastPipeline: pipeline, lastVersion: pipelineVersion }, + }, + ) + } + > + Create run + , + + navigate( + pipelineVersionCreateRecurringRunRoute( + namespace, + pipeline?.pipeline_id, + pipelineVersion?.pipeline_version_id, + ), + { + state: { lastPipeline: pipeline, lastVersion: pipelineVersion }, + }, + ) + } + > + Create schedule + , + ...(pipeline && pipelineVersion + ? [ + , + + navigate( + pipelineVersionRunsRoute( + namespace, + pipeline.pipeline_id, + pipelineVersion.pipeline_version_id, + ), + { + state: { lastVersion: pipelineVersion }, + }, + ) + } + > + View runs + , + + navigate( + pipelineVersionRecurringRunsRoute( + namespace, + pipeline.pipeline_id, + pipelineVersion.pipeline_version_id, + ), + ) + } + > + View schedules + , + ] + : []), + , + onDelete()}> + Delete pipeline version + , + ]} + + {isVersionImportModalOpen && ( setOpen(false)} - menuAppendTo={getDashboardMainContainer} - toggle={ - setOpen(!open)}> + onOpenChange={(isOpenChange) => setOpen(isOpenChange)} + shouldFocusToggleOnSelect + toggle={(toggleRef) => ( + setOpen(!open)} + isExpanded={open} + > Actions - - } + + )} isOpen={open} - position="right" - dropdownItems={ - !recurringRun + popperProps={{ position: 'right', appendTo: getDashboardMainContainer() }} + > + + {!recurringRun ? [] : [ ...(isPipelineSupported @@ -113,15 +121,15 @@ const PipelineRecurringRunDetailsActions: React.FC Duplicate , - , + , ] : []), onDelete()}> Delete , - ] - } - /> + ]} + + ); }; diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsActions.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsActions.tsx index 2ab3222b31..30439d8df6 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsActions.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsActions.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; -import { Tooltip } from '@patternfly/react-core'; import { + Tooltip, + Divider, Dropdown, DropdownItem, - DropdownSeparator, - DropdownToggle, -} from '@patternfly/react-core/deprecated'; + MenuToggle, + DropdownList, +} from '@patternfly/react-core'; + import { useNavigate, useParams } from 'react-router-dom'; import { usePipelinesAPI } from '~/concepts/pipelines/context'; import useNotification from '~/utilities/useNotification'; @@ -56,18 +58,26 @@ const PipelineRunDetailsActions: React.FC = ({ return ( setOpen(isOpenChange)} + shouldFocusToggleOnSelect onSelect={() => setOpen(false)} - menuAppendTo={getDashboardMainContainer} - toggle={ - setOpen(!open)}> + toggle={(toggleRef) => ( + setOpen(!open)} + isExpanded={open} + > Actions - - } + + )} isOpen={open} - position="right" - dropdownItems={ - !run + popperProps={{ position: 'right', appendTo: getDashboardMainContainer() }} + > + + {!run ? [] : [ ...(isPipelineSupported @@ -147,7 +157,7 @@ const PipelineRunDetailsActions: React.FC = ({ ) : ( ), - , + , ] : []), !isRunActive ? ( @@ -159,9 +169,9 @@ const PipelineRunDetailsActions: React.FC = ({ onArchive()}>Archive ), - ] - } - /> + ]} + + ); }; diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/DownloadDropdown.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/DownloadDropdown.tsx index c1b5fb63b3..afa6ab7bed 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/DownloadDropdown.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/DownloadDropdown.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated'; +import { Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core'; import { DownloadIcon } from '@patternfly/react-icons'; type DownloadDropdownProps = { @@ -17,22 +17,27 @@ const DownloadDropdown: React.FC = ({ return ( setIsDownloadDropdownOpen(isOpenChange)} + shouldFocusToggleOnSelect + toggle={(toggleRef) => ( + setIsDownloadDropdownOpen(!isDownloadDropdownOpen)} + onClick={() => setIsDownloadDropdownOpen(!isDownloadDropdownOpen)} + isExpanded={isDownloadDropdownOpen} > - - } + + )} isOpen={isDownloadDropdownOpen} - dropdownItems={[ + > + = ({ onClick={onDownload} > Download current step log - , + Download all step logs - , - ]} - /> + + + ); }; export default DownloadDropdown; diff --git a/frontend/src/concepts/pipelines/content/tables/PipelineFilterBar.tsx b/frontend/src/concepts/pipelines/content/tables/PipelineFilterBar.tsx index 81c57a2034..19533a328e 100644 --- a/frontend/src/concepts/pipelines/content/tables/PipelineFilterBar.tsx +++ b/frontend/src/concepts/pipelines/content/tables/PipelineFilterBar.tsx @@ -5,8 +5,11 @@ import { ToolbarItem, ToolbarChip, Tooltip, + Dropdown, + DropdownItem, + MenuToggle, + DropdownList, } from '@patternfly/react-core'; -import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated'; import { FilterIcon } from '@patternfly/react-icons'; import { FilterOptions } from '~/concepts/pipelines/content/tables/usePipelineFilter'; @@ -54,28 +57,39 @@ export function FilterToolbar({ setOpen(!open)}> + onOpenChange={(isOpenChange) => setOpen(isOpenChange)} + shouldFocusToggleOnSelect + toggle={(toggleRef) => ( + setOpen(!open)} + isExpanded={open} + > <> {filterOptions[currentFilterType]} - - } + + )} isOpen={open} - dropdownItems={keys.map((filterKey) => ( - { - setOpen(false); - setCurrentFilterType(filterKey); - }} - > - {filterOptions[filterKey]} - - ))} - data-testid={`${testId}-dropdown`} - /> + > + + {keys.map((filterKey) => ( + { + setOpen(false); + setCurrentFilterType(filterKey); + }} + > + {filterOptions[filterKey]} + + ))} + + = ({ const selector = ( setDropdownOpen(isOpenChange)} + shouldFocusToggleOnSelect + toggle={(toggleRef) => ( + setDropdownOpen(!dropdownOpen)} - toggleVariant={primary ? 'primary' : undefined} + ref={toggleRef} aria-label={`Project: ${toggleLabel}`} + variant={primary ? 'primary' : undefined} + onClick={() => setDropdownOpen(!dropdownOpen)} + isExpanded={dropdownOpen} + data-testid="project-selector-dropdown" > {toggleLabel} - - } + + )} isOpen={dropdownOpen} - dropdownItems={[ - ...(selectAllProjects - ? [ - { - setDropdownOpen(false); - onSelection(''); - updatePreferredProject(null); - }} - > - All projects - , - ] - : []), - ...filteredProjects.map((project) => ( - { - setDropdownOpen(false); - onSelection(project.metadata.name); - }} - > - {getDisplayNameFromK8sResource(project)} - - )), - ]} - data-testid="project-selector-dropdown" - /> + > + + {[ + ...(selectAllProjects + ? [ + { + setDropdownOpen(false); + onSelection(''); + updatePreferredProject(null); + }} + > + All projects + , + ] + : []), + ...filteredProjects.map((project) => ( + { + setDropdownOpen(false); + onSelection(project.metadata.name); + }} + > + {getDisplayNameFromK8sResource(project)} + + )), + ]} + + ); if (showTitle) { return (