Skip to content

Commit a78e6c6

Browse files
mehuljariwalamehuljariwala
committed
fix(Toolbar): add log viewer overflow menu
Assisted-by: OpenAI Codex
1 parent 60807bf commit a78e6c6

3 files changed

Lines changed: 77 additions & 88 deletions

File tree

‎packages/react-core/src/demos/Toolbar.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import { Fragment, useState } from 'react';
77
import RhUiPauseFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pause-fill-icon';
88
import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
99
import RhUiExpandIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-expand-icon';
10-
import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
11-
import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon';
10+
import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
1211
import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
1312
import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
1413
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';

‎packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx‎

Lines changed: 76 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,19 @@ import {
1717
Dropdown,
1818
DropdownItem,
1919
DropdownList,
20-
MenuFooter
20+
MenuFooter,
21+
OverflowMenu,
22+
OverflowMenuContent,
23+
OverflowMenuControl,
24+
OverflowMenuDropdownItem,
25+
OverflowMenuItem
2126
} from '@patternfly/react-core';
2227
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
2328
import RhUiPauseFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pause-fill-icon';
2429
import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
2530
import RhUiExpandIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-expand-icon';
26-
import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
2731
import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
28-
import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon';
32+
import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
2933

3034
export const ConsoleLogViewerToolbar: React.FC = () => {
3135
const firstOptions = {
@@ -46,9 +50,8 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
4650
const [searchResultsCount, setSearchResultsCount] = useState(3);
4751
const [currentSearchResult, setCurrentSearchResult] = useState(1);
4852
const [externalExpanded, setExternalExpanded] = useState(false);
49-
const [externalExpandedMobile, setExternalExpandedMobile] = useState(false);
5053
const [downloadExpanded, setDownloadExpanded] = useState(false);
51-
const [downloadExpandedMobile, setDownloadExpandedMobile] = useState(false);
54+
const [overflowExpanded, setOverflowExpanded] = useState(false);
5255
const [mobileView, setMobileView] = useState(window.innerWidth >= 1450 ? false : true);
5356

5457
const onContainerToggle = () => {
@@ -85,32 +88,24 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
8588
setExternalExpanded((prevState) => !prevState);
8689
};
8790

88-
const onExternalToggleMobile = () => {
89-
setExternalExpandedMobile((prevState) => !prevState);
90-
};
91-
9291
const onExternalSelect = () => {
9392
setExternalExpanded(false);
9493
};
9594

96-
const onExternalSelectMobile = () => {
97-
setExternalExpandedMobile(false);
98-
};
99-
10095
const onDownloadToggle = () => {
10196
setDownloadExpanded((prevState) => !prevState);
10297
};
10398

104-
const onDownloadToggleMobile = () => {
105-
setDownloadExpandedMobile((prevState) => !prevState);
106-
};
107-
10899
const onDownloadSelect = () => {
109100
setDownloadExpanded(false);
110101
};
111102

112-
const onDownloadSelectMobile = () => {
113-
setDownloadExpandedMobile(false);
103+
const onOverflowToggle = () => {
104+
setOverflowExpanded((prevState) => !prevState);
105+
};
106+
107+
const onOverflowSelect = () => {
108+
setOverflowExpanded(false);
114109
};
115110

116111
const onExternalClick = (_event: React.MouseEvent<HTMLButtonElement>) => {
@@ -209,6 +204,26 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
209204
</>
210205
);
211206

207+
const overflowDropdownItems = (
208+
<>
209+
<OverflowMenuDropdownItem itemId="external-1" onClick={onExternalClick}>
210+
External logs 1
211+
</OverflowMenuDropdownItem>
212+
<OverflowMenuDropdownItem itemId="external-2" onClick={onExternalClick}>
213+
External logs 2
214+
</OverflowMenuDropdownItem>
215+
<OverflowMenuDropdownItem itemId="external-3" onClick={onExternalClick}>
216+
External logs 3
217+
</OverflowMenuDropdownItem>
218+
<OverflowMenuDropdownItem itemId="download-current" onClick={onDownloadClick}>
219+
Current container logs
220+
</OverflowMenuDropdownItem>
221+
<OverflowMenuDropdownItem itemId="download-all" onClick={onDownloadClick}>
222+
All container logs
223+
</OverflowMenuDropdownItem>
224+
</>
225+
);
226+
212227
const optionSelectItems = (
213228
<>
214229
<SelectOption key="switch-1" hasCheckbox isSelected={firstSwitchChecked} onClick={handleFirstSwitchChange}>
@@ -384,90 +399,65 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
384399
</Fragment>
385400
);
386401

387-
const rightAlignedItemsDesktop = (
388-
<Fragment>
389-
<ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
390-
<Dropdown
391-
isOpen={externalExpanded}
392-
onOpenChange={(isOpen) => setExternalExpanded(isOpen)}
393-
onSelect={onExternalSelect}
394-
toggle={(toggleRef) => (
395-
<MenuToggle ref={toggleRef} isExpanded={externalExpanded} onClick={onExternalToggle}>
396-
External logs
397-
</MenuToggle>
398-
)}
399-
>
400-
<DropdownList>{externalDropdownItems}</DropdownList>
401-
</Dropdown>
402-
</ToolbarItem>
403-
<ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
404-
<Dropdown
405-
isOpen={downloadExpanded}
406-
onOpenChange={(isOpen) => setDownloadExpanded(isOpen)}
407-
onSelect={onDownloadSelect}
408-
toggle={(toggleRef) => (
409-
<MenuToggle ref={toggleRef} isExpanded={downloadExpanded} onClick={onDownloadToggle}>
410-
Download
411-
</MenuToggle>
412-
)}
413-
>
414-
<DropdownList>{downloadDropdownItems}</DropdownList>
415-
</Dropdown>
416-
</ToolbarItem>
417-
</Fragment>
418-
);
419-
420-
const rightAlignedItemsMobile = (
421-
<Fragment>
422-
<ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
423-
<Tooltip position="top" content={<div>External logs</div>}>
402+
const overflowMenu = (
403+
<OverflowMenu breakpoint="2xl">
404+
<OverflowMenuContent>
405+
<OverflowMenuItem>
424406
<Dropdown
425-
isOpen={externalExpandedMobile}
426-
onOpenChange={(isOpen) => setExternalExpandedMobile(isOpen)}
427-
onSelect={onExternalSelectMobile}
407+
isOpen={externalExpanded}
408+
onOpenChange={(isOpen) => setExternalExpanded(isOpen)}
409+
onSelect={onExternalSelect}
428410
toggle={(toggleRef) => (
429-
<MenuToggle
430-
ref={toggleRef}
431-
isExpanded={externalExpandedMobile}
432-
onClick={onExternalToggleMobile}
433-
icon={<RhMicronsExternalLinkIcon />}
434-
aria-label="External logs"
435-
/>
411+
<MenuToggle ref={toggleRef} isExpanded={externalExpanded} onClick={onExternalToggle}>
412+
External logs
413+
</MenuToggle>
436414
)}
437415
>
438416
<DropdownList>{externalDropdownItems}</DropdownList>
439417
</Dropdown>
440-
</Tooltip>
441-
</ToolbarItem>
442-
<ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
443-
<Tooltip position="top" content={<div>Download</div>}>
418+
</OverflowMenuItem>
419+
<OverflowMenuItem>
444420
<Dropdown
445-
isOpen={downloadExpandedMobile}
446-
onOpenChange={(isOpen) => setDownloadExpandedMobile(isOpen)}
447-
onSelect={onDownloadSelectMobile}
448-
popperProps={{ position: 'right' }}
421+
isOpen={downloadExpanded}
422+
onOpenChange={(isOpen) => setDownloadExpanded(isOpen)}
423+
onSelect={onDownloadSelect}
449424
toggle={(toggleRef) => (
450-
<MenuToggle
451-
ref={toggleRef}
452-
isExpanded={downloadExpandedMobile}
453-
onClick={onDownloadToggleMobile}
454-
icon={<RhUiDownloadIcon />}
455-
aria-label="Download"
456-
/>
425+
<MenuToggle ref={toggleRef} isExpanded={downloadExpanded} onClick={onDownloadToggle}>
426+
Download
427+
</MenuToggle>
457428
)}
458429
>
459430
<DropdownList>{downloadDropdownItems}</DropdownList>
460431
</Dropdown>
461-
</Tooltip>
462-
</ToolbarItem>
463-
</Fragment>
432+
</OverflowMenuItem>
433+
</OverflowMenuContent>
434+
<OverflowMenuControl>
435+
<Dropdown
436+
isOpen={overflowExpanded}
437+
onOpenChange={(isOpen) => setOverflowExpanded(isOpen)}
438+
onSelect={onOverflowSelect}
439+
popperProps={{ position: 'right' }}
440+
toggle={(toggleRef) => (
441+
<MenuToggle
442+
ref={toggleRef}
443+
aria-label="Log viewer actions"
444+
variant="plain"
445+
onClick={onOverflowToggle}
446+
isExpanded={overflowExpanded}
447+
icon={<RhUiEllipsisVerticalFillIcon />}
448+
/>
449+
)}
450+
>
451+
<DropdownList>{overflowDropdownItems}</DropdownList>
452+
</Dropdown>
453+
</OverflowMenuControl>
454+
</OverflowMenu>
464455
);
465456

466457
const rightAlignedItems = (
467458
<Fragment>
468459
<ToolbarItem>{LogsSearchInput}</ToolbarItem>
469-
{rightAlignedItemsDesktop}
470-
{rightAlignedItemsMobile}
460+
<ToolbarItem>{overflowMenu}</ToolbarItem>
471461
<ToolbarItem>
472462
<Tooltip position="top" content={<div>Expand</div>}>
473463
<Button variant="plain" aria-label="expand" icon={<RhUiExpandIcon />} />

‎packages/react-docs/patternfly-docs/generated/components/toolbar/react-demos/console-log-viewer-toolbar-demo.png‎

-1.26 KB
Loading

0 commit comments

Comments
 (0)