From a78e6c61323a30f4b8b5b7bce2c3cff4bf695bd1 Mon Sep 17 00:00:00 2001 From: Mehul Jariwala Date: Mon, 31 Aug 2026 12:09:13 +0530 Subject: [PATCH] fix(Toolbar): add log viewer overflow menu Assisted-by: OpenAI Codex --- packages/react-core/src/demos/Toolbar.md | 3 +- .../Toolbar/ConsoleLogViewerToolbar.tsx | 162 ++++++++---------- .../console-log-viewer-toolbar-demo.png | Bin 19122 -> 17832 bytes 3 files changed, 77 insertions(+), 88 deletions(-) diff --git a/packages/react-core/src/demos/Toolbar.md b/packages/react-core/src/demos/Toolbar.md index 65d0050bbe4..2c5b73e2b47 100644 --- a/packages/react-core/src/demos/Toolbar.md +++ b/packages/react-core/src/demos/Toolbar.md @@ -7,8 +7,7 @@ import { Fragment, useState } from 'react'; import RhUiPauseFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pause-fill-icon'; import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon'; import RhUiExpandIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-expand-icon'; -import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon'; -import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon'; +import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon'; import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon'; import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon'; import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon'; diff --git a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx index 34e1cd1befc..90367a56e24 100644 --- a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx +++ b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx @@ -17,15 +17,19 @@ import { Dropdown, DropdownItem, DropdownList, - MenuFooter + MenuFooter, + OverflowMenu, + OverflowMenuContent, + OverflowMenuControl, + OverflowMenuDropdownItem, + OverflowMenuItem } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; import RhUiPauseFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pause-fill-icon'; import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon'; import RhUiExpandIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-expand-icon'; -import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon'; import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon'; -import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon'; +import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon'; export const ConsoleLogViewerToolbar: React.FC = () => { const firstOptions = { @@ -46,9 +50,8 @@ export const ConsoleLogViewerToolbar: React.FC = () => { const [searchResultsCount, setSearchResultsCount] = useState(3); const [currentSearchResult, setCurrentSearchResult] = useState(1); const [externalExpanded, setExternalExpanded] = useState(false); - const [externalExpandedMobile, setExternalExpandedMobile] = useState(false); const [downloadExpanded, setDownloadExpanded] = useState(false); - const [downloadExpandedMobile, setDownloadExpandedMobile] = useState(false); + const [overflowExpanded, setOverflowExpanded] = useState(false); const [mobileView, setMobileView] = useState(window.innerWidth >= 1450 ? false : true); const onContainerToggle = () => { @@ -85,32 +88,24 @@ export const ConsoleLogViewerToolbar: React.FC = () => { setExternalExpanded((prevState) => !prevState); }; - const onExternalToggleMobile = () => { - setExternalExpandedMobile((prevState) => !prevState); - }; - const onExternalSelect = () => { setExternalExpanded(false); }; - const onExternalSelectMobile = () => { - setExternalExpandedMobile(false); - }; - const onDownloadToggle = () => { setDownloadExpanded((prevState) => !prevState); }; - const onDownloadToggleMobile = () => { - setDownloadExpandedMobile((prevState) => !prevState); - }; - const onDownloadSelect = () => { setDownloadExpanded(false); }; - const onDownloadSelectMobile = () => { - setDownloadExpandedMobile(false); + const onOverflowToggle = () => { + setOverflowExpanded((prevState) => !prevState); + }; + + const onOverflowSelect = () => { + setOverflowExpanded(false); }; const onExternalClick = (_event: React.MouseEvent) => { @@ -209,6 +204,26 @@ export const ConsoleLogViewerToolbar: React.FC = () => { ); + const overflowDropdownItems = ( + <> + + External logs 1 + + + External logs 2 + + + External logs 3 + + + Current container logs + + + All container logs + + + ); + const optionSelectItems = ( <> @@ -384,90 +399,65 @@ export const ConsoleLogViewerToolbar: React.FC = () => { ); - const rightAlignedItemsDesktop = ( - - - setExternalExpanded(isOpen)} - onSelect={onExternalSelect} - toggle={(toggleRef) => ( - - External logs - - )} - > - {externalDropdownItems} - - - - setDownloadExpanded(isOpen)} - onSelect={onDownloadSelect} - toggle={(toggleRef) => ( - - Download - - )} - > - {downloadDropdownItems} - - - - ); - - const rightAlignedItemsMobile = ( - - - External logs}> + const overflowMenu = ( + + + setExternalExpandedMobile(isOpen)} - onSelect={onExternalSelectMobile} + isOpen={externalExpanded} + onOpenChange={(isOpen) => setExternalExpanded(isOpen)} + onSelect={onExternalSelect} toggle={(toggleRef) => ( - } - aria-label="External logs" - /> + + External logs + )} > {externalDropdownItems} - - - - Download}> + + setDownloadExpandedMobile(isOpen)} - onSelect={onDownloadSelectMobile} - popperProps={{ position: 'right' }} + isOpen={downloadExpanded} + onOpenChange={(isOpen) => setDownloadExpanded(isOpen)} + onSelect={onDownloadSelect} toggle={(toggleRef) => ( - } - aria-label="Download" - /> + + Download + )} > {downloadDropdownItems} - - - + + + + setOverflowExpanded(isOpen)} + onSelect={onOverflowSelect} + popperProps={{ position: 'right' }} + toggle={(toggleRef) => ( + } + /> + )} + > + {overflowDropdownItems} + + + ); const rightAlignedItems = ( {LogsSearchInput} - {rightAlignedItemsDesktop} - {rightAlignedItemsMobile} + {overflowMenu} Expand}>