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 <[email protected]>
RedHatInsights · Apr 26, 2024 · e17bbd1 · e17bbd1
1 parent 9f6dc03
commit e17bbd1
Showing 1 changed file with 39 additions and 15 deletions.
diff --git 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 }) => (
-  <ToggleGroup aria-label="Inventory content toggle">
-    <ToggleGroupItem
-      icon={<DesktopIcon />}
-      aria-label="Hybrid inventory"
-      isSelected={mainContent === pageContents.hybridInventory.key}
-      onChange={() => changeMainContent(pageContents.hybridInventory.key)}
-    />
-    <ToggleGroupItem
-      icon={<FontAwesomeImageIcon />}
-      aria-label="Bifrost"
-      isSelected={mainContent === pageContents.bifrost.key}
-      onChange={() => changeMainContent(pageContents.bifrost.key)}
-    />
-  </ToggleGroup>
+  <Split hasGutter>
+    <SplitItem>
+      <TextContent>
+        <Text style={{ paddingTop: '5px' }} component={TextVariants.h4}>
+          View by
+        </Text>
+      </TextContent>
+    </SplitItem>
+    <SplitItem>
+      <ToggleGroup aria-label="Inventory content toggle">
+        <Tooltip content="View by systems" position="top-end">
+          <ToggleGroupItem
+            icon={<DesktopIcon />}
+            aria-label="Hybrid inventory"
+            isSelected={mainContent === pageContents.hybridInventory.key}
+            onChange={() => changeMainContent(pageContents.hybridInventory.key)}
+          />
+        </Tooltip>
+        <Tooltip content="View by images" position="top-end">
+          <ToggleGroupItem
+            icon={<FontAwesomeImageIcon />}
+            aria-label="Bifrost"
+            isSelected={mainContent === pageContents.bifrost.key}
+            onChange={() => changeMainContent(pageContents.bifrost.key)}
+          />
+        </Tooltip>
+      </ToggleGroup>
+    </SplitItem>
+  </Split>
 );
 
 const InventoryPageHeader = (toggleProps) => {