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

@@ -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)}
             />
         </>
     );

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>