feat: feedback for project overview (#6712)

frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenProgress/LastSeenProgress.tsx

@@ -29,7 +29,7 @@ export const LastSeenProgress = ({ yes, no }: ILastSeenProgressProps) => {
         return <Box />;
     }
 
-    const progress = (yes / (yes + no)) * 100;
+    const progress = Math.round((yes / (yes + no)) * 100);
     return (
         <ProgressContainer>
             <Box sx={{ position: 'relative' }}>

frontend/src/component/project/Project/ProjectOverview.tsx

@@ -1,4 +1,4 @@
-import { type FC, useEffect } from 'react';
+import { type FC, useEffect, useState } from 'react';
 import { Box, styled } from '@mui/material';
 import ProjectInfo from './ProjectInfo/ProjectInfo';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
@@ -11,6 +11,7 @@ import { usePageTitle } from 'hooks/usePageTitle';
 import { useLastViewedProject } from 'hooks/useLastViewedProject';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { ProjectOverviewChangeRequests } from './ProjectOverviewChangeRequests';
+import { useFeedback } from '../../feedbackNew/useFeedback';
 import { OldProjectFeatureToggles } from './PaginatedProjectFeatureToggles/OldProjectFeatureToggles';
 
 const refreshInterval = 15 * 1000;
@@ -99,6 +100,31 @@ const OldProjectOverview: FC<{
     );
 };
 
+const useDelayedFeedbackPrompt = () => {
+    const { openFeedback, hasSubmittedFeedback } = useFeedback(
+        'newProjectOverview',
+        'manual',
+    );
+
+    const [seenFeedback, setSeenFeedback] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (!seenFeedback && !hasSubmittedFeedback) {
+                openFeedback({
+                    title: 'How easy was it to work with the project overview in Unleash?',
+                    positiveLabel:
+                        'What do you like most about the updated project overview?',
+                    areasForImprovementsLabel:
+                        'What improvements are needed in the project overview?',
+                });
+                setSeenFeedback(true);
+            }
+        }, 30000);
+
+        return () => clearTimeout(timer);
+    }, [hasSubmittedFeedback, openFeedback, seenFeedback]);
+};
+
 const NewProjectOverview: FC<{
     storageKey?: string;
 }> = ({ storageKey = 'project-overview-v2' }) => {
@@ -108,6 +134,7 @@ const NewProjectOverview: FC<{
     const { project } = useProjectOverview(projectId, {
         refreshInterval,
     });
+    useDelayedFeedbackPrompt();
 
     usePageTitle(`Project overview – ${projectName}`);
     const { setLastViewed } = useLastViewedProject();

frontend/src/hooks/useSubmittedFeedback.ts

@@ -4,7 +4,8 @@ export type IFeedbackCategory =
     | 'search'
     | 'newStrategyForm'
     | 'insights'
-    | 'applicationOverview';
+    | 'applicationOverview'
+    | 'newProjectOverview';
 
 export const useUserSubmittedFeedback = (category: IFeedbackCategory) => {
     const key = `unleash-userSubmittedFeedback:${category}`;