From 264aaa25f284409baf1a2d6367dafc4acc51be7a Mon Sep 17 00:00:00 2001
From: Valtteri Kantanen <valtteri.kantanen@iki.fi>
Date: Wed, 27 Nov 2024 18:13:51 +0200
Subject: [PATCH] [Frontend] Create TableHeaderWithTooltip component

---
 .../frontend/src/components/material/InfoBox/index.tsx |  2 +-
 .../src/components/material/TableHeaderWithTooltip.tsx | 10 ++++++++++
 .../frontend/src/components/material/Toggle/index.tsx  | 10 ++++++----
 3 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 services/frontend/src/components/material/TableHeaderWithTooltip.tsx

diff --git a/services/frontend/src/components/material/InfoBox/index.tsx b/services/frontend/src/components/material/InfoBox/index.tsx
index ff335d7b77..5e35a6748b 100644
--- a/services/frontend/src/components/material/InfoBox/index.tsx
+++ b/services/frontend/src/components/material/InfoBox/index.tsx
@@ -23,7 +23,7 @@ export const InfoBox = ({
       }
     >
       {mini ? (
-        <IconButton data-cy={`${cypress}InfoBoxButton`}>
+        <IconButton data-cy={`${cypress}InfoBoxButton`} sx={{ padding: 0 }}>
           <HelpOutline fontSize="small" />
         </IconButton>
       ) : (
diff --git a/services/frontend/src/components/material/TableHeaderWithTooltip.tsx b/services/frontend/src/components/material/TableHeaderWithTooltip.tsx
new file mode 100644
index 0000000000..a3b0d9954c
--- /dev/null
+++ b/services/frontend/src/components/material/TableHeaderWithTooltip.tsx
@@ -0,0 +1,10 @@
+import { Stack } from '@mui/material'
+
+import { InfoBox } from './InfoBox'
+
+export const TableHeaderWithTooltip = ({ header, tooltipText }: { header: string; tooltipText: string }) => (
+  <Stack direction="row" gap={1}>
+    <span style={{ whiteSpace: 'wrap', minWidth: '80px' }}>{header}</span>
+    <InfoBox content={tooltipText} mini />
+  </Stack>
+)
diff --git a/services/frontend/src/components/material/Toggle/index.tsx b/services/frontend/src/components/material/Toggle/index.tsx
index d79a40893e..1289d85a84 100644
--- a/services/frontend/src/components/material/Toggle/index.tsx
+++ b/services/frontend/src/components/material/Toggle/index.tsx
@@ -20,10 +20,12 @@ export const Toggle = ({
   infoBoxContent?: string
 }) => {
   return (
-    <Stack alignItems="center" direction="row">
-      <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{firstLabel}</Typography>
-      <Switch checked={value} data-cy={cypress} disabled={disabled} onChange={() => setValue(!value)} />
-      <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{secondLabel}</Typography>
+    <Stack alignItems="center" direction="row" gap={1}>
+      <Stack alignItems="center" direction="row">
+        <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{firstLabel}</Typography>
+        <Switch checked={value} data-cy={cypress} disabled={disabled} onChange={() => setValue(!value)} />
+        <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{secondLabel}</Typography>
+      </Stack>
       {infoBoxContent && <InfoBox content={infoBoxContent} mini />}
     </Stack>
   )