Merge pull request #71 from headlamp-k8s/fix_opencost_button

opencost: Fix the Details View Header Action
headlamp-k8s · Aug 7, 2024 · eb40521 · eb40521
2 parents fdf28ae + 3d5008f
commit eb40521
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/opencost/src/__snapshots__/details.stories.storyshot b/opencost/src/__snapshots__/details.stories.storyshot
@@ -9,7 +9,7 @@ exports[`Storyshots OpencostDetails Loading State 1`] = `
       class="MuiBox-root css-j1fy4m"
     >
       <div
-        id="cost"
+        id="opencost-plugin-cost-section"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 makeStyles-sectionHeader makeStyles-sectionHeader css-6ejd34-MuiGrid-root"
@@ -125,7 +125,7 @@ exports[`Storyshots OpencostDetails No Data 1`] = `
       class="MuiBox-root css-j1fy4m"
     >
       <div
-        id="cost"
+        id="opencost-plugin-cost-section"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 makeStyles-sectionHeader makeStyles-sectionHeader css-6ejd34-MuiGrid-root"
@@ -309,7 +309,7 @@ exports[`Storyshots OpencostDetails Not Installed 1`] = `
       class="MuiBox-root css-j1fy4m"
     >
       <div
-        id="cost"
+        id="opencost-plugin-cost-section"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 makeStyles-sectionHeader makeStyles-sectionHeader css-6ejd34-MuiGrid-root"
@@ -388,7 +388,7 @@ exports[`Storyshots OpencostDetails Week Data 1`] = `
       class="MuiBox-root css-j1fy4m"
     >
       <div
-        id="cost"
+        id="opencost-plugin-cost-section"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 makeStyles-sectionHeader makeStyles-sectionHeader css-6ejd34-MuiGrid-root"

diff --git a/opencost/src/detail.tsx b/opencost/src/detail.tsx
@@ -271,7 +271,7 @@ export function OpencostDetailSectionPure(props: OpencostDetailSectionPureProps)
     <Grid spacing={2}>
       <SectionBox
         title={
-          <div id="cost">
+          <div id="opencost-plugin-cost-section">
             <SectionHeader
               title="Cost"
               actions={[

diff --git a/opencost/src/index.tsx b/opencost/src/index.tsx
@@ -16,9 +16,17 @@ import { Settings } from './settings';
 import { getConfigStore, getDisplayCurrency, getDisplayTimespan, getServiceDetails } from './utils';
 
 function IconAction() {
+  const handleClick = event => {
+    event.preventDefault();
+    const targetElement = document.getElementById('opencost-plugin-cost-section');
+    if (targetElement) {
+      targetElement.scrollIntoView({ behavior: 'auto' });
+    }
+  };
+
   return (
     <Tooltip title={'Cost'}>
-      <IconButton href="#cost" aria-label={'Cost'} aria-haspopup="true">
+      <IconButton onClick={handleClick} aria-label={'Cost'} aria-haspopup="true">
         <Icon icon="mdi:cash-register" />
       </IconButton>
     </Tooltip>