From 493f8e8a5b2058c954fff085d4b42010846d45b2 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Mon, 4 Mar 2024 13:45:57 +0200
Subject: [PATCH] feat: application overview feedback (#6416)

![image](https://github.com/Unleash/unleash/assets/964450/e8b85b7f-2c8b-42d2-9c6e-3f6ae9e27413)
---
 .../application/ApplicationOverview.tsx       | 67 ++++++++++++++-----
 frontend/src/hooks/useSubmittedFeedback.ts    |  6 +-
 2 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/frontend/src/component/application/ApplicationOverview.tsx b/frontend/src/component/application/ApplicationOverview.tsx
index 693cce55c47b..efdde37c2595 100644
--- a/frontend/src/component/application/ApplicationOverview.tsx
+++ b/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,29 +59,52 @@ 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>
-                    <ProjectContainer>
-                        Projects using this application
-                        {data.projects.map((project) => (
-                            <Badge
-                                sx={{ cursor: 'pointer' }}
-                                key={project}
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    navigate(`/projects/${project}`);
-                                }}
-                                color='secondary'
-                                icon={<TopicOutlinedIcon />}
-                            >
-                                {project}
-                            </Badge>
-                        ))}
-                    </ProjectContainer>
+                    <ApplicationHeader>
+                        <ProjectContainer>
+                            Projects using this application
+                            {data.projects.map((project) => (
+                                <Badge
+                                    sx={{ cursor: 'pointer' }}
+                                    key={project}
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        navigate(`/projects/${project}`);
+                                    }}
+                                    color='secondary'
+                                    icon={<TopicOutlinedIcon />}
+                                >
+                                    {project}
+                                </Badge>
+                            ))}
+                        </ProjectContainer>
+                        <Button
+                            startIcon={<ReviewsOutlined />}
+                            variant='outlined'
+                            onClick={createFeedbackContext}
+                            size='small'
+                        >
+                            Provide feedback
+                        </Button>
+                    </ApplicationHeader>
+
                     <StyledDivider />
                     <ApplicationIssues application={data} />
                     <ApplicationChart data={data} />
diff --git a/frontend/src/hooks/useSubmittedFeedback.ts b/frontend/src/hooks/useSubmittedFeedback.ts
index d1a7268f1e95..169f6c80c9d4 100644
--- a/frontend/src/hooks/useSubmittedFeedback.ts
+++ b/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}`;