Refs #37994 - use icons for table column

Katello · Nov 13, 2024 · 366b67e · 366b67e
1 parent 777032d
commit 366b67e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/webpack/ForemanColumnExtensions/index.js b/webpack/ForemanColumnExtensions/index.js
@@ -22,21 +22,12 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
 import { ContentViewEnvironmentDisplay } from '../components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard';
 import { truncate } from '../utils/helpers';
+import RepoIcon from '../scenes/ContentViews/Details/Repositories/RepoIcon';
 
 const hostsIndexColumnExtensions = [
-  {
-    columnName: 'rhel_lifecycle_status',
-    title: __('RHEL Lifecycle status'),
-    wrapper: (hostDetails) => {
-      const rhelLifecycle = hostDetails?.rhel_lifecycle_status_label;
-      return rhelLifecycle || '—';
-    },
-    weight: 2000,
-    isSorted: true,
-  },
   {
     columnName: 'bootc_booted_image',
-    title: __('Image mode'),
+    title: <RepoIcon type="docker" customTooltip={__('Image mode / package mode')} />,
     wrapper: (hostDetails) => {
       const imageMode = hostDetails?.content_facet_attributes?.bootc_booted_image;
       const digest = hostDetails?.content_facet_attributes?.bootc_booted_digest;
@@ -64,15 +55,25 @@ const hostsIndexColumnExtensions = [
               }
             >
               <FlexItem>
-                <CheckIcon />
+                <RepoIcon type="docker" customTooltip={__('Image mode')} />
               </FlexItem>
             </Popover>
-            : '—'
+            : <span style={{ color: 'gray' }}><RepoIcon type="yum" customTooltip={__('Package mode')} /></span>
           }
         </Flex>
       );
     },
-    weight: 2050,
+    weight: 35, // between power status (0) and name (50)
+    isSorted: true,
+  },
+  {
+    columnName: 'rhel_lifecycle_status',
+    title: __('RHEL Lifecycle status'),
+    wrapper: (hostDetails) => {
+      const rhelLifecycle = hostDetails?.rhel_lifecycle_status_label;
+      return rhelLifecycle || '—';
+    },
+    weight: 2000,
     isSorted: true,
   },
   {

diff --git a/webpack/scenes/ContentViews/Details/Repositories/RepoIcon.js b/webpack/scenes/ContentViews/Details/Repositories/RepoIcon.js
@@ -3,7 +3,7 @@ import { Tooltip } from '@patternfly/react-core';
 import { BundleIcon, MiddlewareIcon, BoxIcon, CodeBranchIcon, FanIcon, TenantIcon, AnsibleTowerIcon } from '@patternfly/react-icons';
 import PropTypes from 'prop-types';
 
-const RepoIcon = ({ type }) => {
+const RepoIcon = ({ type, customTooltip }) => {
   const iconMap = {
     yum: BundleIcon,
     docker: MiddlewareIcon,
@@ -14,15 +14,17 @@ const RepoIcon = ({ type }) => {
   };
   const Icon = iconMap[type] || BoxIcon;
 
-  return <Tooltip content={<div>{type}</div>}><Icon aria-label={`${type}_type_icon`} /></Tooltip>;
+  return <Tooltip content={<div>{customTooltip ?? type}</div>}><Icon aria-label={`${type}_type_icon`} /></Tooltip>;
 };
 
 RepoIcon.propTypes = {
   type: PropTypes.string,
+  customTooltip: PropTypes.string,
 };
 
 RepoIcon.defaultProps = {
   type: '', // prevent errors if data isn't loaded yet
+  customTooltip: null,
 };
 
 export default RepoIcon;