From a02fe7a2450e33a460458a4c05eac412fc865a62 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 3 Apr 2025 13:13:18 +0200
Subject: [PATCH] fix: project status modal links don't work (#9693)

Fixes a bug where project status modal links wouldn't work.

The reason they didn't work is because we modified the query params on
modal close, and because we manually close the modal when you click a
link (because otherwise it'd stay open when you navigated to other
project pages), we inadverdently reset the URL.

I'm not entirely sure why setting the search params would modify the URL
itself, but I'm guessing that's related to the implementation.

One way to solve this is to indicate whether we're closing the modal
because a link was clicked or not, and only modify the query params if
that is not the case.
---
 frontend/src/component/project/Project/Project.tsx    | 11 ++++++-----
 .../Project/ProjectStatus/ProjectStatusModal.tsx      | 10 +++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 72658d1860..db0abf5668 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -126,20 +126,21 @@ const ProjectStatus = () => {
     const [projectStatusOpen, setProjectStatusOpen] = useState(
         searchParams.has('project-status'),
     );
-    const toggleStatusModal = (open: boolean) => () => {
+    const toggleStatusModal = (open: boolean, clickedLink?: boolean) => {
         if (open) {
             searchParams.set('project-status', '');
-        } else {
+            setSearchParams(searchParams);
+        } else if (!clickedLink) {
             searchParams.delete('project-status');
+            setSearchParams(searchParams);
         }
-        setSearchParams(searchParams);
         setProjectStatusOpen(open);
     };
 
     return (
         <>
             <ProjectStatusButton
-                onClick={toggleStatusModal(true)}
+                onClick={() => toggleStatusModal(true)}
                 startIcon={<ProjectStatusSvgWithMargin />}
                 data-loading-project
             >
@@ -147,7 +148,7 @@ const ProjectStatus = () => {
             </ProjectStatusButton>
             <ProjectStatusModal
                 open={projectStatusOpen}
-                close={toggleStatusModal(false)}
+                close={(clickedLink) => toggleStatusModal(false, clickedLink)}
             />
         </>
     );
diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
index 018636264f..3b510d1e5b 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
@@ -124,7 +124,7 @@ const FeedbackButton = styled(Button)(({ theme }) => ({
 
 type Props = {
     open: boolean;
-    close: () => void;
+    close: (clickedLink?: boolean) => void;
 };
 
 export const ProjectStatusModal = ({ open, close }: Props) => {
@@ -143,11 +143,11 @@ export const ProjectStatusModal = ({ open, close }: Props) => {
     return (
         <DynamicSidebarModal
             open={open}
-            onClose={close}
+            onClose={() => close(false)}
             label='Project status'
             onClick={(e: React.SyntheticEvent) => {
                 if (e.target instanceof HTMLAnchorElement) {
-                    close();
+                    close(true);
                 }
             }}
         >
@@ -188,7 +188,7 @@ export const ProjectStatusModal = ({ open, close }: Props) => {
                                 variant='text'
                                 onClick={() => {
                                     createFeedbackContext();
-                                    close();
+                                    close(false);
                                 }}
                                 size='small'
                             >
@@ -197,7 +197,7 @@ export const ProjectStatusModal = ({ open, close }: Props) => {
                         </p>
                     </FeedbackContainer>
 
-                    <Button variant='outlined' onClick={close}>
+                    <Button variant='outlined' onClick={() => close(false)}>
                         Close
                     </Button>
                 </CloseRow>