From 5d36862ddb4d0d3d0aaa231b051b8380ddd4fc26 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 15 Nov 2024 09:51:00 +0100
Subject: [PATCH] feat: add project status feedback (#8764)

This PR adds the feedback component to the project status page. When you
open the feedback modal, we close the status sidebar. Exiting the
feedback modal takes you back to the project page.

As a bonus: fixes the background color of the health grid, which was a
little bit off.


![image](https://github.com/user-attachments/assets/6e7e61cb-75f4-44ac-9efd-632b40ccab51)


![image](https://github.com/user-attachments/assets/6e049719-cff3-4b85-8f02-e0174b515ab2)
---
 .../feedbackNew/FeedbackComponent.tsx         |  2 +-
 .../ProjectHealthGrid.styles.tsx              |  2 +-
 .../ProjectStatus/ProjectStatusModal.tsx      | 59 +++++++++++++++++--
 frontend/src/hooks/useSubmittedFeedback.ts    |  3 +-
 4 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/frontend/src/component/feedbackNew/FeedbackComponent.tsx b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
index 2a5c8d6bd4..96a6822501 100644
--- a/frontend/src/component/feedbackNew/FeedbackComponent.tsx
+++ b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
@@ -294,7 +294,7 @@ export const FeedbackComponent = ({
                             </Tooltip>
                             <StyledContent>
                                 <StyledTitle>
-                                    Help us to improve Unleash
+                                    Help us improve Unleash
                                 </StyledTitle>
                                 <StyledForm onSubmit={onSubmission}>
                                     <input
diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.styles.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.styles.tsx
index 2102a9ebb5..1cc5e10e43 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.styles.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.styles.tsx
@@ -1,7 +1,7 @@
 import { styled } from '@mui/material';
 
 export const HealthGridTile = styled('article')(({ theme }) => ({
-    backgroundColor: theme.palette.envAccordion.expanded,
+    backgroundColor: theme.palette.neutral.light,
     padding: theme.spacing(3),
     borderRadius: theme.shape.borderRadiusExtraLarge,
 }));
diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
index 4b15b31485..c55801df40 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
@@ -6,6 +6,8 @@ import { ProjectLifecycleSummary } from './ProjectLifecycleSummary';
 import type { FC } from 'react';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import { ProjectHealthGrid } from './ProjectHealthGrid';
+import { useFeedback } from 'component/feedbackNew/useFeedback';
+import FeedbackIcon from '@mui/icons-material/ChatOutlined';
 
 const ModalContentContainer = styled('section')(({ theme }) => ({
     minHeight: '100vh',
@@ -25,11 +27,6 @@ const WidgetContainer = styled('div')(({ theme }) => ({
     gap: theme.spacing(9),
 }));
 
-type Props = {
-    open: boolean;
-    close: () => void;
-};
-
 const LifecycleHeaderRow = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'end',
@@ -102,9 +99,43 @@ const CloseRow = styled('div')(({ theme }) => ({
     display: 'flex',
     justifyContent: 'flex-end',
     marginBlockStart: 'auto',
+    gap: theme.spacing(4),
 }));
 
+const FeedbackContainer = styled('div')(({ theme }) => ({
+    backgroundColor: theme.palette.neutral.light,
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    padding: theme.spacing(1, 2.5),
+    borderRadius: theme.shape.borderRadiusLarge,
+}));
+
+const FeedbackButton = styled(Button)(({ theme }) => ({
+    color: theme.palette.primary.main,
+    fontWeight: 'normal',
+    padding: 0,
+    textDecoration: 'underline',
+    verticalAlign: 'baseline',
+}));
+
+type Props = {
+    open: boolean;
+    close: () => void;
+};
+
 export const ProjectStatusModal = ({ open, close }: Props) => {
+    const { openFeedback } = useFeedback('projectStatus', 'manual');
+    const createFeedbackContext = () => {
+        openFeedback({
+            title: 'How easy was it to use the project status overview?',
+            positiveLabel:
+                'What do you like most about the project status overview?',
+            areasForImprovementsLabel:
+                'What should be improved on the project status overview?',
+        });
+    };
+
     return (
         <DynamicSidebarModal
             open={open}
@@ -141,6 +172,24 @@ export const ProjectStatusModal = ({ open, close }: Props) => {
                     </Row>
                 </WidgetContainer>
                 <CloseRow>
+                    <FeedbackContainer>
+                        <FeedbackIcon color='primary' />
+                        <p>
+                            Help us improve the project status overview; give us
+                            your{' '}
+                            <FeedbackButton
+                                variant='text'
+                                onClick={() => {
+                                    createFeedbackContext();
+                                    close();
+                                }}
+                                size='small'
+                            >
+                                feedback
+                            </FeedbackButton>
+                        </p>
+                    </FeedbackContainer>
+
                     <Button variant='outlined' onClick={close}>
                         Close
                     </Button>
diff --git a/frontend/src/hooks/useSubmittedFeedback.ts b/frontend/src/hooks/useSubmittedFeedback.ts
index 612e238d4a..605051513f 100644
--- a/frontend/src/hooks/useSubmittedFeedback.ts
+++ b/frontend/src/hooks/useSubmittedFeedback.ts
@@ -5,7 +5,8 @@ export type IFeedbackCategory =
     | 'insights'
     | 'applicationOverview'
     | 'newProjectOverview'
-    | 'signals';
+    | 'signals'
+    | 'projectStatus';
 
 export const useUserSubmittedFeedback = (category: IFeedbackCategory) => {
     const key = `unleash-userSubmittedFeedback:${category}`;