From e17bbd1c8faf859a6663d40ff8394bbe6719df50 Mon Sep 17 00:00:00 2001 From: Michael Johnson Date: Fri, 26 Apr 2024 12:49:22 -0400 Subject: [PATCH] feat(RHINENG-9686): Add system table toggle details (#2180) * feat(RHINENG-9686): Add system table toggle details Add "View by" text to the left of system table toggle on the Systems table page header. Each toggle button should have tooltips. * feat: Split items --------- Co-authored-by: Michael Johnson --- .../InventoryPageHeader.js | 54 +++++++++++++------ 1 file changed, 39 insertions(+), 15 deletions(-) diff --git a/src/routes/InventoryComponents/InventoryPageHeader.js b/src/routes/InventoryComponents/InventoryPageHeader.js index 11caeb617..ca53a5df5 100644 --- a/src/routes/InventoryComponents/InventoryPageHeader.js +++ b/src/routes/InventoryComponents/InventoryPageHeader.js @@ -1,6 +1,15 @@ import React, { useContext } from 'react'; import PropTypes from 'prop-types'; -import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; +import { + Split, + SplitItem, + ToggleGroup, + ToggleGroupItem, + Text, + TextContent, + TextVariants, + Tooltip, +} from '@patternfly/react-core'; import { PageHeader, PageHeaderTitle, @@ -12,20 +21,35 @@ import { AccountStatContext } from '../../Routes'; import FontAwesomeImageIcon from '../../components/FontAwesomeImageIcon'; const InventoryContentToggle = ({ changeMainContent, mainContent }) => ( - - } - aria-label="Hybrid inventory" - isSelected={mainContent === pageContents.hybridInventory.key} - onChange={() => changeMainContent(pageContents.hybridInventory.key)} - /> - } - aria-label="Bifrost" - isSelected={mainContent === pageContents.bifrost.key} - onChange={() => changeMainContent(pageContents.bifrost.key)} - /> - + + + + + View by + + + + + + + } + aria-label="Hybrid inventory" + isSelected={mainContent === pageContents.hybridInventory.key} + onChange={() => changeMainContent(pageContents.hybridInventory.key)} + /> + + + } + aria-label="Bifrost" + isSelected={mainContent === pageContents.bifrost.key} + onChange={() => changeMainContent(pageContents.bifrost.key)} + /> + + + + ); const InventoryPageHeader = (toggleProps) => {