feat: application overview feedback (#6416)

![image](https://github.com/Unleash/unleash/assets/964450/e8b85b7f-2c8b-42d2-9c6e-3f6ae9e27413)

frontend/src/component/application/ApplicationOverview.tsx

@@ -1,6 +1,6 @@
 import { usePageTitle } from 'hooks/usePageTitle';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert, Box, Divider, styled } from '@mui/material';
+import { Alert, Box, Button, Divider, styled } from '@mui/material';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useApplicationOverview } from 'hooks/api/getters/useApplicationOverview/useApplicationOverview';
 import { ApplicationIssues } from './ApplicationIssues/ApplicationIssues';
@@ -10,6 +10,8 @@ import { Badge } from '../common/Badge/Badge';
 import { useNavigate } from 'react-router-dom';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { useEffect } from 'react';
+import { useFeedback } from '../feedbackNew/useFeedback';
+import { ReviewsOutlined } from '@mui/icons-material';
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
     marginTop: theme.spacing(2),
@@ -33,6 +35,12 @@ const ProjectContainer = styled(Box)(({ theme }) => ({
     alignSelf: 'stretch',
 }));
 
+const ApplicationHeader = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignSelf: 'stretch',
+}));
+
 const useTracking = () => {
     const { trackEvent } = usePlausibleTracker();
     useEffect(() => {
@@ -51,12 +59,25 @@ const ApplicationOverview = () => {
     const navigate = useNavigate();
     const { data, loading } = useApplicationOverview(applicationName);
 
+    const { openFeedback } = useFeedback('applicationOverview', 'automatic');
+
+    const createFeedbackContext = () => {
+        openFeedback({
+            title: 'How easy was it to use the application overview page?',
+            positiveLabel:
+                'What do you like most about the new application overview page?',
+            areasForImprovementsLabel:
+                'What should be improved on the application overview page?',
+        });
+    };
+
     return (
         <ConditionallyRender
             condition={!loading && data.environments.length === 0}
             show={<Alert severity='warning'>No data available.</Alert>}
             elseShow={
                 <ApplicationContainer>
+                    <ApplicationHeader>
                         <ProjectContainer>
                             Projects using this application
                             {data.projects.map((project) => (
@@ -74,6 +95,16 @@ const ApplicationOverview = () => {
                                 </Badge>
                             ))}
                         </ProjectContainer>
+                        <Button
+                            startIcon={<ReviewsOutlined />}
+                            variant='outlined'
+                            onClick={createFeedbackContext}
+                            size='small'
+                        >
+                            Provide feedback
+                        </Button>
+                    </ApplicationHeader>
+
                     <StyledDivider />
                     <ApplicationIssues application={data} />
                     <ApplicationChart data={data} />

frontend/src/hooks/useSubmittedFeedback.ts

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