feat: insights feedback (#6345)

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

@@ -0,0 +1,52 @@
+import { VFC } from 'react';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { useFeedback } from 'component/feedbackNew/useFeedback';
+import { ReviewsOutlined } from '@mui/icons-material';
+import { Badge, Button, Typography } from '@mui/material';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+
+export const DashboardHeader: VFC = () => {
+    const showInactiveUsers = useUiFlag('showInactiveUsers');
+
+    const { openFeedback } = useFeedback(
+        'insights',
+        'automatic',
+        showInactiveUsers ? 'withInactiveUsers' : 'withoutInactiveUsers',
+    );
+
+    const createFeedbackContext = () => {
+        openFeedback({
+            title: 'How easy was it to use insights?',
+            positiveLabel: 'What do you like most about insights?',
+            areasForImprovementsLabel: 'What should be improved in insights?',
+        });
+    };
+
+    return (
+        <PageHeader
+            titleElement={
+                <Typography
+                    variant='h1'
+                    component='div'
+                    sx={(theme) => ({
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: theme.spacing(1),
+                    })}
+                >
+                    <span>Insights</span> <Badge color='warning'>Beta</Badge>
+                </Typography>
+            }
+            actions={
+                <Button
+                    startIcon={<ReviewsOutlined />}
+                    variant='outlined'
+                    onClick={createFeedbackContext}
+                    size='small'
+                >
+                    Provide feedback
+                </Button>
+            }
+        />
+    );
+};

frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx

@@ -25,6 +25,7 @@ import {
 } from 'openapi';
 import { HealthStats } from './HealthStats/HealthStats';
 import { Badge } from 'component/common/Badge/Badge';
+import { DashboardHeader } from './DashboardHeader/DashboardHeader';
 
 const StyledGrid = styled(Box)(({ theme }) => ({
     display: 'grid',
@@ -127,22 +128,7 @@ export const ExecutiveDashboard: VFC = () => {
     return (
         <>
             <Box sx={(theme) => ({ paddingBottom: theme.spacing(4) })}>
-                <PageHeader
+                <DashboardHeader />
-                    titleElement={
-                        <Typography
-                            variant='h1'
-                            component='div'
-                            sx={(theme) => ({
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: theme.spacing(1),
-                            })}
-                        >
-                            <span>Insights</span>{' '}
-                            <Badge color='warning'>Beta</Badge>
-                        </Typography>
-                    }
-                />
             </Box>
             <StyledGrid sx={{ gridTemplateColumns }}>
                 <Widget title='Total users' order={1}>

frontend/src/hooks/useSubmittedFeedback.ts

@@ -1,6 +1,6 @@
 import { createLocalStorage } from '../utils/createLocalStorage';
 
-export type IFeedbackCategory = 'search' | 'newStrategyForm';
+export type IFeedbackCategory = 'search' | 'newStrategyForm' | 'insights';
 
 export const useUserSubmittedFeedback = (category: IFeedbackCategory) => {
     const key = `unleash-userSubmittedFeedback:${category}`;