feat: change time based feedback to button (#6837)

![image](https://github.com/Unleash/unleash/assets/964450/34070916-880d-41b6-809a-4046e3a1312f)
Unleash · Apr 15, 2024 · 9aee1a7 · 9aee1a7
1 parent e10ad72
commit 9aee1a7
Showing 1 changed file with 33 additions and 0 deletions.
diff --git a/...aginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader.tsx b/...aginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader.tsx
@@ -1,6 +1,7 @@
 import { type ReactNode, type VFC, useState } from 'react';
 import {
     Box,
+    Button,
     IconButton,
     Tooltip,
     useMediaQuery,
@@ -22,6 +23,8 @@ import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog';
 import type { FeatureSchema } from 'openapi';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import ReviewsOutlined from '@mui/icons-material/ReviewsOutlined';
+import { useFeedback } from '../../../../feedbackNew/useFeedback';
 
 interface IProjectFeatureTogglesHeaderProps {
     isLoading?: boolean;
@@ -56,6 +59,10 @@ export const ProjectFeatureTogglesHeader: VFC<
     const [showExportDialog, setShowExportDialog] = useState(false);
     const navigate = useNavigate();
     const { trackEvent } = usePlausibleTracker();
+    const projectOverviewRefactorFeedback = useUiFlag(
+        'projectOverviewRefactorFeedback',
+    );
+    const { openFeedback } = useFeedback('newProjectOverview', 'automatic');
     const handleSearch = (query: string) => {
         onChangeSearchQuery?.(query);
         trackEvent('search-bar', {
@@ -66,6 +73,16 @@ export const ProjectFeatureTogglesHeader: VFC<
         });
     };
 
+    const createFeedbackContext = () => {
+        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?',
+        });
+    };
+
     return (
         <Box
             ref={headerLoadingRef}
@@ -145,6 +162,22 @@ export const ProjectFeatureTogglesHeader: VFC<
                                 </>
                             }
                         />
+                        <ConditionallyRender
+                            condition={
+                                projectOverviewRefactorFeedback &&
+                                !isSmallScreen
+                            }
+                            show={
+                                <Button
+                                    startIcon={<ReviewsOutlined />}
+                                    onClick={createFeedbackContext}
+                                    variant='outlined'
+                                    data-loading
+                                >
+                                    Provide feedback
+                                </Button>
+                            }
+                        />
                         <StyledResponsiveButton
                             onClick={() =>
                                 navigate(getCreateTogglePath(projectId))