refactor: improve feature sidebar tooltip placement (#1209)

* refactor: improve feature sidebar tooltip placement

* refactor: improve tooltip text

frontend/src/component/common/HelpIcon/HelpIcon.tsx

@@ -1,24 +1,19 @@
-import { Tooltip } from '@mui/material';
+import { Tooltip, TooltipProps } from '@mui/material';
 import { Info } from '@mui/icons-material';
 import { useStyles } from 'component/common/HelpIcon/HelpIcon.styles';
 import React from 'react';
 
 interface IHelpIconProps {
     tooltip: string;
-    style?: React.CSSProperties;
+    placement?: TooltipProps['placement'];
 }
 
-export const HelpIcon = ({ tooltip, style }: IHelpIconProps) => {
+export const HelpIcon = ({ tooltip, placement }: IHelpIconProps) => {
     const { classes: styles } = useStyles();
 
     return (
-        <Tooltip title={tooltip} arrow>
-            <span
-                className={styles.container}
-                style={style}
-                tabIndex={0}
-                aria-label="Help"
-            >
+        <Tooltip title={tooltip} placement={placement} arrow>
+            <span className={styles.container} tabIndex={0} aria-label="Help">
                 <Info className={styles.icon} />
             </span>
         </Tooltip>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.styles.ts

@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        borderRadius: theme.shape.borderRadiusLarge,
-        backgroundColor: '#fff',
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '1.5rem',
-        maxWidth: '350px',
-        minWidth: '350px',
-        marginRight: '1rem',
-        marginTop: '1rem',
-        [theme.breakpoints.down(1000)]: {
-            marginBottom: '1rem',
-            width: '100%',
-            maxWidth: 'none',
-            minWidth: 'auto',
-        },
-    },
-    header: {
-        fontSize: theme.fontSizes.bodySize,
-        fontWeight: 'normal',
-        margin: 0,
-        marginBottom: '0.5rem',
-    },
-}));

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx

@@ -1,14 +1,47 @@
-import { Tooltip } from '@mui/material';
 import { useState } from 'react';
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import EnvironmentStrategyDialog from 'component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog';
 import FeatureOverviewEnvSwitch from './FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch';
-import { useStyles } from './FeatureOverviewEnvSwitches.styles';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
+import { styled } from '@mui/material';
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusLarge,
+    backgroundColor: '#fff',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '1.5rem',
+    maxWidth: '350px',
+    minWidth: '350px',
+    marginRight: '1rem',
+    marginTop: '1rem',
+    [theme.breakpoints.down(1000)]: {
+        marginBottom: '1rem',
+        width: '100%',
+        maxWidth: 'none',
+        minWidth: 'auto',
+    },
+}));
+
+const StyledHeader = styled('h3')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    alignItems: 'center',
+    fontSize: theme.fontSizes.bodySize,
+    fontWeight: 'normal',
+    margin: 0,
+    marginBottom: '0.5rem',
+
+    // Make the help icon align with the text.
+    '& > :last-child': {
+        position: 'relative',
+        top: 1,
+    },
+}));
 
 const FeatureOverviewEnvSwitches = () => {
-    const { classes: styles } = useStyles();
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
     const { feature } = useFeature(projectId, featureId);
@@ -37,15 +70,14 @@ const FeatureOverviewEnvSwitches = () => {
     };
 
     return (
-        <div className={styles.container}>
-            <Tooltip
-                arrow
-                title="Environments can be switched off for a single toggle. Resulting in all calls towards the toggle to return false."
-            >
-                <h3 className={styles.header} data-loading>
-                    Feature toggle status
-                </h3>
-            </Tooltip>
+        <StyledContainer>
+            <StyledHeader data-loading>
+                Feature toggle status
+                <HelpIcon
+                    tooltip="When a feature is switched off in an environment, it will always return false. When switched on, it will return true or false depending on its strategies."
+                    placement="top"
+                />
+            </StyledHeader>
             {renderEnvironmentSwitches()}
             <EnvironmentStrategyDialog
                 open={showInfoBox}
@@ -54,7 +86,7 @@ const FeatureOverviewEnvSwitches = () => {
                 featureId={featureId}
                 environmentName={environmentName}
             />
-        </div>
+        </StyledContainer>
     );
 };