From 9a122575681f131d58db4901a5e9ffacce0e6b49 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 28 Feb 2024 11:22:31 +0100
Subject: [PATCH] feat: info icon instances for 2 days (#6373)

---
 .../application/ApplicationChart.tsx          | 14 +++++-
 .../component/common/HelpIcon/HelpIcon.tsx    | 46 ++++++++++---------
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/frontend/src/component/application/ApplicationChart.tsx b/frontend/src/component/application/ApplicationChart.tsx
index d28437521a..6ac6c612b2 100644
--- a/frontend/src/component/application/ApplicationChart.tsx
+++ b/frontend/src/component/application/ApplicationChart.tsx
@@ -6,6 +6,7 @@ import { FC, useLayoutEffect, useRef, useState } from 'react';
 import { ApplicationOverviewSchema } from '../../openapi';
 import { useRequiredPathParam } from '../../hooks/useRequiredPathParam';
 import { WarningAmberRounded } from '@mui/icons-material';
+import { HelpIcon } from '../common/HelpIcon/HelpIcon';
 
 const StyledTable = styled('table')(({ theme }) => ({
     fontSize: theme.fontSizes.smallerBody,
@@ -196,7 +197,18 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => {
                                 <StyledTable>
                                     <tbody>
                                         <tr>
-                                            <StyledCell>Instances:</StyledCell>
+                                            <StyledCell
+                                                sx={{ display: 'flex' }}
+                                            >
+                                                Instances:{' '}
+                                                <HelpIcon
+                                                    size={
+                                                        theme.fontSizes
+                                                            .smallBody
+                                                    }
+                                                    tooltip='Active instances in the last 2 days'
+                                                />
+                                            </StyledCell>
                                             <StyledCell>
                                                 {environment.instanceCount}
                                             </StyledCell>
diff --git a/frontend/src/component/common/HelpIcon/HelpIcon.tsx b/frontend/src/component/common/HelpIcon/HelpIcon.tsx
index f87599eee3..f4abcad436 100644
--- a/frontend/src/component/common/HelpIcon/HelpIcon.tsx
+++ b/frontend/src/component/common/HelpIcon/HelpIcon.tsx
@@ -2,31 +2,34 @@ import { styled, Tooltip, TooltipProps } from '@mui/material';
 import { HelpOutline } from '@mui/icons-material';
 import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 
-const StyledContainer = styled('span')(({ theme }) => ({
-    display: 'inline-grid',
-    alignItems: 'center',
-    outline: 0,
-    cursor: 'pointer',
-    '&:is(:focus-visible, :active) > *, &:hover > *': {
-        outlineStyle: 'solid',
-        outlineWidth: 2,
-        outlineOffset: 0,
-        outlineColor: theme.palette.primary.main,
-        borderRadius: '100%',
-        color: theme.palette.primary.main,
-    },
-    '& svg': {
-        fontSize: theme.fontSizes.mainHeader,
-        color: theme.palette.action.active,
-        marginLeft: theme.spacing(0.5),
-    },
-}));
+const StyledContainer = styled('span')<{ size: string | undefined }>(
+    ({ theme, size }) => ({
+        display: 'inline-grid',
+        alignItems: 'center',
+        outline: 0,
+        cursor: 'pointer',
+        '&:is(:focus-visible, :active) > *, &:hover > *': {
+            outlineStyle: 'solid',
+            outlineWidth: 2,
+            outlineOffset: 0,
+            outlineColor: theme.palette.primary.main,
+            borderRadius: '100%',
+            color: theme.palette.primary.main,
+        },
+        '& svg': {
+            fontSize: size || theme.fontSizes.mainHeader,
+            color: theme.palette.action.active,
+            marginLeft: theme.spacing(0.5),
+        },
+    }),
+);
 
 interface IHelpIconProps {
     tooltip: React.ReactNode;
     htmlTooltip?: boolean;
     placement?: TooltipProps['placement'];
     children?: React.ReactNode;
+    size?: string;
 }
 
 export const HelpIcon = ({
@@ -34,11 +37,12 @@ export const HelpIcon = ({
     htmlTooltip,
     placement,
     children,
+    size,
 }: IHelpIconProps) => {
     if (htmlTooltip) {
         return (
             <HtmlTooltip title={tooltip} placement={placement} arrow>
-                <StyledContainer tabIndex={0} aria-label='Help'>
+                <StyledContainer size={size} tabIndex={0} aria-label='Help'>
                     {children ?? <HelpOutline />}
                 </StyledContainer>
             </HtmlTooltip>
@@ -47,7 +51,7 @@ export const HelpIcon = ({
 
     return (
         <Tooltip title={tooltip} placement={placement} arrow>
-            <StyledContainer tabIndex={0} aria-label='Help'>
+            <StyledContainer size={size} tabIndex={0} aria-label='Help'>
                 {children ?? <HelpOutline />}
             </StyledContainer>
         </Tooltip>