Distributed workloads popover fix (opendatahub-io#3472)

ppadti · Nov 19, 2024 · 3ba248d · 3ba248d
1 parent a2e37f7
commit 3ba248d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/...istributedWorkloads/global/projectMetrics/GlobalDistributedWorkloadsProjectMetricsTab.tsx b/...istributedWorkloads/global/projectMetrics/GlobalDistributedWorkloadsProjectMetricsTab.tsx
@@ -5,12 +5,18 @@ import { TopResourceConsumingWorkloads } from './sections/TopResourceConsumingWo
 import { WorkloadResourceMetricsTable } from './sections/WorkloadResourceMetricsTable';
 import { DWSectionCard } from './sections/DWSectionCard';
 
+const PopoverContent = () => (
+  <>
+    In this section, <strong>all projects</strong> refers to all of the projects that share the
+    specified resource. You might not have access to all of these projects.
+  </>
+);
 const GlobalDistributedWorkloadsProjectMetricsTab: React.FC = () => (
   <Stack hasGutter>
     <StackItem data-testid="dw-requested-resources">
       <DWSectionCard
         title="Requested resources"
-        helpTooltip="In this section, all projects refers to all of the projects that share the specified resource. You might not have access to all of these projects."
+        helpTooltip={<PopoverContent />}
         content={<RequestedResources />}
       />
     </StackItem>

diff --git a/frontend/src/pages/distributedWorkloads/global/projectMetrics/sections/DWSectionCard.tsx b/frontend/src/pages/distributedWorkloads/global/projectMetrics/sections/DWSectionCard.tsx
@@ -1,17 +1,26 @@
 import * as React from 'react';
-import { Card, CardTitle, CardHeader, Divider } from '@patternfly/react-core';
-import DashboardHelpTooltip from '~/concepts/dashboard/DashboardHelpTooltip';
+import { Card, CardTitle, CardHeader, Divider, Popover } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
 
 export const DWSectionCard: React.FC<{
   title: string;
-  helpTooltip?: string;
+  helpTooltip?: React.ReactNode;
   hasDivider?: boolean;
   content: React.ReactNode;
 }> = ({ title, hasDivider = true, helpTooltip, content }) => (
   <Card isFullHeight>
     <CardHeader>
       <CardTitle>
-        {title} {helpTooltip ? <DashboardHelpTooltip content={helpTooltip} /> : null}
+        {title}
+        {helpTooltip ? (
+          <Popover bodyContent={helpTooltip}>
+            <DashboardPopupIconButton
+              icon={<OutlinedQuestionCircleIcon />}
+              aria-label="More info"
+            />
+          </Popover>
+        ) : null}
       </CardTitle>
     </CardHeader>
     {hasDivider && <Divider />}