From 3d5008fe637d2a70203180c76f363db894748555 Mon Sep 17 00:00:00 2001
From: yolossn <sannagaraj@microsoft.com>
Date: Tue, 6 Aug 2024 14:11:28 +0530
Subject: [PATCH] opencost: Fix the Details View Header Action

the header action was breaking the app and it
is fixed now.

Signed-off-by: yolossn <sannagaraj@microsoft.com>
---
 opencost/src/__snapshots__/details.stories.storyshot |  8 ++++----
 opencost/src/detail.tsx                              |  2 +-
 opencost/src/index.tsx                               | 10 +++++++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/opencost/src/__snapshots__/details.stories.storyshot b/opencost/src/__snapshots__/details.stories.storyshot
index 53b997a..2ca73ff 100644
--- 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
index 52e8d4c..53ad3ed 100644
--- 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
index 1b5f6a2..eec8454 100644
--- 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>