@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.2

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@@ -27,7 +27,6 @@ import {
   InputGroup,
   InputGroupItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   Stack,
   StackItem,
@@ -40,7 +39,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
@@ -421,7 +420,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-page-layout-default-nav">
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <Text component="h1">Main title</Text>
           <Text component="p">
@@ -431,7 +430,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
         </TextContent>
       </PageSection>
       <Divider component="div" />
-      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+      <PageSection padding={{ default: 'noPadding' }}>
         <Drawer isExpanded={isDrawerExpanded}>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -27,7 +27,6 @@ import {
   InputGroup,
   InputGroupItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   Stack,
   StackItem,
@@ -40,7 +39,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
@@ -421,7 +420,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <Text component="h1">Main title</Text>
           <Text component="p">
@@ -431,7 +430,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
         </TextContent>
       </PageSection>
       <Divider component="div" />
-      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+      <PageSection padding={{ default: 'noPadding' }}>
         <Drawer isExpanded={isDrawerExpanded} isInline>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import {
   PageSection,
   TextContent,
@@ -8,7 +8,6 @@ import {
   Card,
   CardBody,
   CardTitle,
-  PageSectionVariants,
   Modal,
   ModalVariant,
   Tab,
@@ -82,7 +81,7 @@ export const ModalTabs: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <DashboardWrapper mainContainerId="main-content-card-view-default-nav">
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Projects</Text>
             <Text component="p">Click any project card to view Tabs within Modals.</Text>

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -16,7 +16,8 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 
 export const NestedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
@@ -108,7 +109,7 @@ export const NestedTabs: React.FunctionComponent = () => {
         </Card>
       </GridItem>
       <GridItem xl={4} md={6}>
-        <Flex direction={{ default: 'column' }} className="pf-v5-u-h-100">
+        <Flex direction={{ default: 'column' }} className={sizing.h_100}>
           <FlexItem flex={{ default: 'flex_1' }}>
             <Card isFullHeight>
               <CardHeader>

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -17,7 +17,7 @@ import {
   TitleSizes,
   CardTitle
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const NestedUnindentedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(1);
@@ -127,7 +127,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type="tabs" isWidthLimited variant="light">
+      <PageSection type="tabs" isWidthLimited>
         <Tabs
           activeKey={activeTabKey}
           onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
@@ -140,7 +140,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
           <Tab eventKey={3} title={<TabTitleText>Support</TabTitleText>} tabContentId={`tabContent${3}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited variant="light">
+      <PageSection isWidthLimited>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>What's new panel</TabContentBody>
         </TabContent>

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -24,7 +24,6 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   ProgressSize,
   Tabs,
@@ -50,13 +49,14 @@ import {
   CustomActionsToggleProps
 } from '@patternfly/react-table';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import { KeyTypes } from '../../../helpers';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 interface Repository {
   name: string;
@@ -191,7 +191,7 @@ export const TablesAndTabs = () => {
           </MenuToggle>
         </ToolbarItem>
         <OverflowMenu breakpoint="md">
-          <OverflowMenuContent className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+          <OverflowMenuContent className={`${display.displayNone} ${display.displayBlockOnLg}`}>
             <OverflowMenuGroup groupType="button" isPersistent>
               <OverflowMenuItem isPersistent>
                 <Button variant="primary">Generate</Button>
@@ -390,12 +390,12 @@ export const TablesAndTabs = () => {
   return (
     <DashboardWrapper>
       <React.Fragment>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <Title headingLevel="h1" size="2xl">
             Nodes
           </Title>
         </PageSection>
-        <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+        <PageSection padding={{ default: 'noPadding' }}>
           {toolbar}
           <Divider />
           {tabContent}

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -0,0 +1,492 @@
+import React from 'react';
+import {
+  Badge,
+  Button,
+  MenuToggle,
+  SearchInput,
+  Select,
+  SelectList,
+  SelectOption,
+  PageSection,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  ToolbarToggleGroup,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuFooter
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+export const ConsoleLogViewerToolbar: React.FC = () => {
+  const firstOptions = {
+    'container-sample-1': { type: 'C' },
+    'container-sample-2': { type: 'D' },
+    'container-sample-3': { type: 'E' }
+  };
+
+  const [containerExpanded, setContainerExpanded] = React.useState(false);
+  const [containerExpandedMobile, setContainerExpandedMobile] = React.useState(false);
+  const [containerSelected, setContainerSelected] = React.useState(Object.keys(firstOptions)[0]);
+  const [optionExpanded, setOptionExpanded] = React.useState(false);
+  const [optionExpandedMobile, setOptionExpandedMobile] = React.useState(false);
+  const [isPaused, setIsPaused] = React.useState(false);
+  const [firstSwitchChecked, setFirstSwitchChecked] = React.useState(true);
+  const [secondSwitchChecked, setSecondSwitchChecked] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [searchResultsCount, setSearchResultsCount] = React.useState(3);
+  const [currentSearchResult, setCurrentSearchResult] = React.useState(1);
+  const [externalExpanded, setExternalExpanded] = React.useState(false);
+  const [externalExpandedMobile, setExternalExpandedMobile] = React.useState(false);
+  const [downloadExpanded, setDownloadExpanded] = React.useState(false);
+  const [downloadExpandedMobile, setDownloadExpandedMobile] = React.useState(false);
+  const [mobileView, setMobileView] = React.useState(window.innerWidth >= 1450 ? false : true);
+
+  const onContainerToggle = () => {
+    setContainerExpanded((prevState) => !prevState);
+  };
+
+  const onContainerToggleMobile = () => {
+    setContainerExpandedMobile((prevState) => !prevState);
+  };
+
+  const onContainerSelect = (_event: React.MouseEvent | undefined, selection: string | number | undefined) => {
+    setContainerSelected(selection as string);
+    setContainerExpanded(false);
+  };
+
+  const onContainerSelectMobile = (_event: React.MouseEvent | undefined, selection: string | number | undefined) => {
+    setContainerSelected(selection as string);
+    setContainerExpandedMobile(false);
+  };
+
+  const onOptionSelect = (_event: React.MouseEvent | undefined) => {};
+
+  const onOptionSelectMobile = (_event: React.MouseEvent | undefined) => {};
+
+  const onOptionToggle = () => {
+    setOptionExpanded((prevState) => !prevState);
+  };
+
+  const onOptionToggleMobile = () => {
+    setOptionExpandedMobile((prevState) => !prevState);
+  };
+
+  const onExternalToggle = () => {
+    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 onExternalClick = (_event: React.MouseEvent<HTMLButtonElement>) => {
+    // eslint-disable-next-line no-console
+    console.log('External logs opened!');
+  };
+
+  const onDownloadClick = (_event: React.MouseEvent<HTMLButtonElement>) => {
+    // eslint-disable-next-line no-console
+    console.log('Download action clicked!');
+  };
+
+  const pauseOrStart = (_event: React.MouseEvent<HTMLButtonElement>) => {
+    setIsPaused((prevState) => !prevState);
+  };
+
+  const handleFirstSwitchChange = () => {
+    setFirstSwitchChecked((prevState) => !prevState);
+  };
+
+  const handleSecondSwitchChange = () => {
+    setSecondSwitchChecked((prevState) => !prevState);
+  };
+
+  const onClearLogs = () => {
+    setOptionExpanded(false);
+    // eslint-disable-next-line no-console
+    console.log('Logs cleared!');
+  };
+
+  const onClearLogsMobile = () => {
+    setOptionExpandedMobile(false);
+    // eslint-disable-next-line no-console
+    console.log('Logs cleared!');
+  };
+
+  const onSearchChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setSearchValue(value);
+    setSearchResultsCount(3);
+  };
+
+  const onSearchClear = (_event: React.SyntheticEvent<HTMLButtonElement, Event>) => {
+    setSearchValue('');
+    setSearchResultsCount(0);
+    setCurrentSearchResult(1);
+  };
+
+  const onSearchNext = (_event: React.SyntheticEvent<HTMLButtonElement, Event>) => {
+    setCurrentSearchResult((prevState) => {
+      const newCurrentResult = prevState + 1;
+
+      return newCurrentResult <= searchResultsCount ? newCurrentResult : searchResultsCount;
+    });
+  };
+
+  const onSearchPrevious = (_event: React.SyntheticEvent<HTMLButtonElement, Event>) => {
+    setCurrentSearchResult((prevState) => {
+      const newCurrentResult = prevState - 1;
+      return newCurrentResult > 0 ? newCurrentResult : 1;
+    });
+  };
+
+  const onPageResize = (
+    _event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>,
+    { windowSize }: { windowSize: number }
+  ) => {
+    if (windowSize >= 1450) {
+      setMobileView(false);
+    } else {
+      setMobileView(true);
+    }
+  };
+
+  const externalDropdownItems = (
+    <>
+      <DropdownItem key="action-1" onClick={onExternalClick}>
+        External logs 1
+      </DropdownItem>
+      <DropdownItem key="action-2" onClick={onExternalClick}>
+        External logs 2
+      </DropdownItem>
+      <DropdownItem key="action-3" onClick={onExternalClick}>
+        External logs 3
+      </DropdownItem>
+    </>
+  );
+
+  const downloadDropdownItems = (
+    <>
+      <DropdownItem key="action-4" onClick={onDownloadClick}>
+        Current container logs
+      </DropdownItem>
+      <DropdownItem key="action-5" onClick={onDownloadClick}>
+        All container logs
+      </DropdownItem>
+    </>
+  );
+
+  const optionSelectItems = (
+    <>
+      <SelectOption key="switch-1" hasCheckbox isSelected={firstSwitchChecked} onClick={handleFirstSwitchChange}>
+        Display timestamp
+      </SelectOption>
+      <SelectOption key="switch-2" hasCheckbox isSelected={secondSwitchChecked} onClick={handleSecondSwitchChange}>
+        Wrap lines
+      </SelectOption>
+    </>
+  );
+
+  const selectDropdownContent = (
+    <>
+      <SelectList>
+        {Object.entries(firstOptions).map(([value, { type }]) => (
+          <SelectOption key={value} hasCheckbox value={value} isSelected={containerSelected === value}>
+            <Badge key={value}>{type}</Badge>
+            {` ${value}`}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </>
+  );
+
+  const clearLogsFooter = (type: string) => (
+    <MenuFooter key="clear-log" onClick={type === 'mobile' ? onClearLogsMobile : onClearLogs}>
+      <Button variant="link" isInline>
+        Clear logs
+      </Button>
+    </MenuFooter>
+  );
+
+  const selectToggleContent = ({ showText }: { showText: boolean }) => {
+    if (!containerSelected) {
+      return 'Select';
+    }
+    return (
+      <React.Fragment>
+        <Badge>{firstOptions[containerSelected].type}</Badge>
+        {showText && ` ${containerSelected}`}
+      </React.Fragment>
+    );
+  };
+
+  const LogsSearchInput = (
+    <ToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
+      <ToolbarItem>
+        <SearchInput
+          placeholder="Search logs"
+          value={searchValue}
+          onChange={onSearchChange}
+          onClear={onSearchClear}
+          resultsCount={`${currentSearchResult} / ${searchResultsCount}`}
+          onNextClick={onSearchNext}
+          onPreviousClick={onSearchPrevious}
+        />
+      </ToolbarItem>
+    </ToolbarToggleGroup>
+  );
+
+  const leftAlignedItemsDesktop = (
+    <React.Fragment>
+      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
+        <Select
+          role="menu"
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={onContainerToggle}
+              isExpanded={containerExpanded}
+              style={{ width: '250px' }}
+            >
+              {selectToggleContent({ showText: true })}
+            </MenuToggle>
+          )}
+          onSelect={onContainerSelect}
+          onOpenChange={(isOpen) => setContainerExpanded(isOpen)}
+          selected={containerSelected}
+          isOpen={containerExpanded}
+        >
+          {selectDropdownContent}
+        </Select>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
+        <Select
+          isOpen={optionExpanded}
+          role="menu"
+          onOpenChange={(isOpen) => setOptionExpanded(isOpen)}
+          onOpenChangeKeys={['Escape']}
+          onSelect={onOptionSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle ref={toggleRef} isExpanded={optionExpanded} onClick={onOptionToggle} icon={<CogIcon />}>
+              Options
+            </MenuToggle>
+          )}
+        >
+          <SelectList>{optionSelectItems}</SelectList>
+          {clearLogsFooter('desktop')}
+        </Select>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
+        <Button variant={isPaused ? 'plain' : 'link'} onClick={pauseOrStart}>
+          {isPaused ? <PlayIcon /> : <PauseIcon />}
+          {isPaused ? ` Resume Log` : ` Pause Log`}
+        </Button>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const leftAlignedItemsMobile = (
+    <React.Fragment>
+      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
+        <Tooltip position="top" content={<div>Select container</div>}>
+          <Select
+            role="menu"
+            toggle={(toggleRef) => (
+              <MenuToggle ref={toggleRef} onClick={onContainerToggleMobile} isExpanded={containerExpandedMobile}>
+                {selectToggleContent({ showText: false })}
+              </MenuToggle>
+            )}
+            onSelect={onContainerSelectMobile}
+            onOpenChange={(isOpen) => setContainerExpandedMobile(isOpen)}
+            selected={containerSelected}
+            isOpen={containerExpandedMobile}
+          >
+            {selectDropdownContent}
+          </Select>
+        </Tooltip>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
+        <Tooltip position="top" content={<div>Options</div>}>
+          <Select
+            role="menu"
+            isOpen={optionExpandedMobile}
+            onOpenChange={(isOpen) => setOptionExpandedMobile(isOpen)}
+            onOpenChangeKeys={['Escape']}
+            onSelect={onOptionSelectMobile}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                isExpanded={optionExpandedMobile}
+                onClick={onOptionToggleMobile}
+                icon={<CogIcon />}
+                aria-label="Options"
+              />
+            )}
+          >
+            <SelectList>{optionSelectItems}</SelectList>
+            {clearLogsFooter('mobile')}
+          </Select>
+        </Tooltip>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
+        <Tooltip position="top" content={<div>{isPaused ? 'Resume log' : 'Pause log'}</div>}>
+          <Button variant="plain" onClick={pauseOrStart} aria-label={isPaused ? 'Play' : 'Paused'}>
+            {isPaused ? <PlayIcon /> : <PauseIcon />}
+          </Button>
+        </Tooltip>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const leftAlignedItems = (
+    <React.Fragment>
+      {leftAlignedItemsDesktop}
+      {leftAlignedItemsMobile}
+    </React.Fragment>
+  );
+
+  const rightAlignedItemsDesktop = (
+    <React.Fragment>
+      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
+        <Dropdown
+          isOpen={externalExpanded}
+          onOpenChange={(isOpen) => setExternalExpanded(isOpen)}
+          onSelect={onExternalSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle ref={toggleRef} isExpanded={externalExpanded} onClick={onExternalToggle}>
+              External logs
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>{externalDropdownItems}</DropdownList>
+        </Dropdown>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
+        <Dropdown
+          isOpen={downloadExpanded}
+          onOpenChange={(isOpen) => setDownloadExpanded(isOpen)}
+          onSelect={onDownloadSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle ref={toggleRef} isExpanded={downloadExpanded} onClick={onDownloadToggle}>
+              Download
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>{downloadDropdownItems}</DropdownList>
+        </Dropdown>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const rightAlignedItemsMobile = (
+    <React.Fragment>
+      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
+        <Tooltip position="top" content={<div>External logs</div>}>
+          <Dropdown
+            isOpen={externalExpandedMobile}
+            onOpenChange={(isOpen) => setExternalExpandedMobile(isOpen)}
+            onSelect={onExternalSelectMobile}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                isExpanded={externalExpandedMobile}
+                onClick={onExternalToggleMobile}
+                icon={<ExternalLinkAltIcon />}
+                aria-label="External logs"
+              />
+            )}
+          >
+            <DropdownList>{externalDropdownItems}</DropdownList>
+          </Dropdown>
+        </Tooltip>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
+        <Tooltip position="top" content={<div>Download</div>}>
+          <Dropdown
+            isOpen={downloadExpandedMobile}
+            onOpenChange={(isOpen) => setDownloadExpandedMobile(isOpen)}
+            onSelect={onDownloadSelectMobile}
+            popperProps={{ position: 'right' }}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                isExpanded={downloadExpandedMobile}
+                onClick={onDownloadToggleMobile}
+                icon={<DownloadIcon />}
+                aria-label="Download"
+              />
+            )}
+          >
+            <DropdownList>{downloadDropdownItems}</DropdownList>
+          </Dropdown>
+        </Tooltip>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const rightAlignedItems = (
+    <React.Fragment>
+      <ToolbarItem>{LogsSearchInput}</ToolbarItem>
+      {rightAlignedItemsDesktop}
+      {rightAlignedItemsMobile}
+      <ToolbarItem>
+        <Tooltip position="top" content={<div>Expand</div>}>
+          <Button variant="plain" aria-label="expand">
+            <ExpandIcon />
+          </Button>
+        </Tooltip>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const items = (
+    <React.Fragment>
+      <ToolbarGroup align={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
+      <ToolbarGroup align={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper sidebarNavOpen={!mobileView} onPageResize={onPageResize}>
+      <PageSection>
+        <Toolbar id="log-viewer-toolbar" inset={{ default: 'insetNone' }}>
+          <ToolbarContent>{items}</ToolbarContent>
+        </Toolbar>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};