Insights UI improvements (#6433)

- improved page header
- added help text to health and metrics
- updated style for flag stats widget
- fixed users widget shadow

frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx

@@ -49,7 +49,7 @@ export const ExecutiveDashboard: VFC = () => {
     const stateConfig = {
         projects: withDefault(ArrayParam, [allOption.id]),
     };
-    const [state, setState] = usePersistentTableState(`insights`, stateConfig);
+    const [state, setState] = usePersistentTableState('insights', stateConfig);
     const setProjects = (projects: string[]) => {
         setState({ projects });
     };
@@ -79,7 +79,7 @@ export const ExecutiveDashboard: VFC = () => {
                             selectedProjects={projects}
                             onChange={setProjects}
                             dataTestId={'DASHBOARD_PROJECT_SELECT'}
-                            sx={{ flex: 1, maxWidth: '360px' }}
+                            sx={{ flex: 1, maxWidth: '360px', width: '100%' }}
                         />
                     }
                 />
@@ -157,7 +157,10 @@ export const ExecutiveDashboard: VFC = () => {
                         </ChartWidget>
                     }
                 />
-                <Widget title='Average health'>
+                <Widget
+                    title='Average health'
+                    tooltip='Average health is a percentage of flags that are not stale nor potencially stale.'
+                >
                     <HealthStats
                         value={summary.averageHealth}
                         healthy={summary.active}
@@ -185,7 +188,10 @@ export const ExecutiveDashboard: VFC = () => {
                     <TimeToProductionChart projectFlagTrends={projectsData} />
                 </ChartWidget> */}
             </StyledGrid>
-            <Widget title='Metrics'>
+            <Widget
+                title='Metrics'
+                tooltip='Summary of all flag evaluations reported by SDKs.'
+            >
                 <MetricsSummaryChart metricsSummaryTrends={metricsData} />
             </Widget>
         </>

frontend/src/component/executiveDashboard/components/DashboardHeader/DashboardHeader.tsx

@@ -2,17 +2,57 @@ import { ReactNode, VFC } from 'react';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { useFeedback } from 'component/feedbackNew/useFeedback';
 import { ReviewsOutlined } from '@mui/icons-material';
-import { Button, Typography } from '@mui/material';
+import {
+    Button,
+    Typography,
+    styled,
+    useMediaQuery,
+    useTheme,
+} from '@mui/material';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { Badge } from 'component/common/Badge/Badge';
 import { ShareLink } from './ShareLink/ShareLink';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 type DashboardHeaderProps = {
     actions?: ReactNode;
 };
 
+const StyledActionsContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    [theme.breakpoints.down('md')]: {
+        flexDirection: 'column',
+        gap: theme.spacing(1),
+    },
+}));
+
+const StyledActionButtons = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+}));
+
+const StyledExternalActionsContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    width: 300,
+    [theme.breakpoints.down('md')]: {
+        width: '100%',
+    },
+}));
+
+const StyledActionsSmallScreen = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    gap: theme.spacing(1),
+    marginTop: theme.spacing(2),
+}));
+
 export const DashboardHeader: VFC<DashboardHeaderProps> = ({ actions }) => {
     const showInactiveUsers = useUiFlag('showInactiveUsers');
+    const theme = useTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
 
     const { openFeedback } = useFeedback(
         'insights',
@@ -29,33 +69,53 @@ export const DashboardHeader: VFC<DashboardHeaderProps> = ({ actions }) => {
     };
 
     return (
-        <PageHeader
-            titleElement={
-                <Typography
-                    variant='h1'
-                    component='div'
-                    sx={(theme) => ({
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: theme.spacing(1),
-                    })}
-                >
-                    <span>Insights</span> <Badge color='success'>Beta</Badge>
-                </Typography>
-            }
-            actions={
-                <>
-                    {actions}
-                    <ShareLink />
-                    <Button
-                        startIcon={<ReviewsOutlined />}
-                        variant='outlined'
-                        onClick={createFeedbackContext}
+        <>
+            <PageHeader
+                titleElement={
+                    <Typography
+                        variant='h1'
+                        component='div'
+                        sx={(theme) => ({
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: theme.spacing(1),
+                        })}
                     >
-                        Provide feedback
-                    </Button>
-                </>
-            }
-        />
+                        <span>Insights</span>{' '}
+                        <Badge color='success'>Beta</Badge>
+                    </Typography>
+                }
+                actions={
+                    <StyledActionsContainer>
+                        <ConditionallyRender
+                            condition={!isSmallScreen}
+                            show={
+                                <StyledExternalActionsContainer>
+                                    {actions}
+                                </StyledExternalActionsContainer>
+                            }
+                        />
+                        <StyledActionButtons>
+                            <ShareLink />
+                            <Button
+                                startIcon={<ReviewsOutlined />}
+                                variant='outlined'
+                                onClick={createFeedbackContext}
+                            >
+                                Provide feedback
+                            </Button>
+                        </StyledActionButtons>
+                    </StyledActionsContainer>
+                }
+            />
+            <ConditionallyRender
+                condition={isSmallScreen}
+                show={
+                    <StyledActionsSmallScreen>
+                        {actions}
+                    </StyledActionsSmallScreen>
+                }
+            />
+        </>
     );
 };

frontend/src/component/executiveDashboard/componentsStat/FlagStats/FlagStats.tsx

@@ -33,9 +33,9 @@ const StyledRingContent = styled(Box)(({ theme }) => ({
 
 const StyledInsightsContainer = styled(Box)(({ theme }) => ({
     marginTop: theme.spacing(4),
-    padding: theme.spacing(1.5),
+    padding: theme.spacing(1.5, 2),
     background: theme.palette.background.elevation2,
-    borderRadius: `${theme.shape.borderRadius}px`,
+    borderRadius: `${theme.shape.borderRadiusMedium}px`,
     display: 'flex',
     alignItems: 'center',
 }));
@@ -43,6 +43,7 @@ const StyledInsightsContainer = styled(Box)(({ theme }) => ({
 const StyledHeaderContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
+    marginBottom: theme.spacing(0.5),
 }));
 
 const StyledTextContainer = styled(Box)(({ theme }) => ({

frontend/src/component/executiveDashboard/componentsStat/UserStats/UserStats.tsx

@@ -13,22 +13,23 @@ const StyledUserContainer = styled(Box)(({ theme }) => ({
 
 const StyledUserBox = styled(Box)(({ theme }) => ({
     borderRadius: `${theme.shape.borderRadiusExtraLarge}px`,
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.background.alternative,
     maxWidth: 300,
     padding: theme.spacing(2),
-    marginBottom: theme.spacing(3),
+    margin: `0 auto ${theme.spacing(3)}`,
     position: 'relative',
     zIndex: 2,
 }));
 
 const StyledCustomShadow = styled(Box)(({ theme }) => ({
-    width: '220px',
+    maxWidth: 270,
     height: '54px',
     backgroundColor: 'rgba(108, 101, 229, 0.30)',
     position: 'absolute',
     margin: '0 auto',
     top: '45px',
     left: '15px',
+    right: '15px',
     borderRadius: `${theme.shape.borderRadiusExtraLarge}px`,
     zIndex: 1,
 }));