fix: link to "view more insights" from dashboard goes to status modal (#9684)

Updates the link from the project dashboard page to take you to the
project status modal instead of the old insights page.

We didn't have a way to auto-open the modal before, so I added a query
param to control it.

Author: thomasheartman

frontend/src/component/personalDashboard/ProjectSetupComplete.tsx

@@ -149,7 +149,7 @@ export const ProjectSetupComplete: FC<{
             />
 
             {projectHealthTrend !== 'unknown' && (
-                <Link to={`/projects/${project}/insights`}>
+                <Link to={`/projects/${project}?project-status`}>
                     View more insights
                 </Link>
             )}

frontend/src/component/project/Project/Project.tsx

@@ -32,7 +32,13 @@ import ProjectFlags from './ProjectFlags';
 import ProjectHealth from './ProjectHealth/ProjectHealth';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import {
+    Navigate,
+    Route,
+    Routes,
+    useLocation,
+    useSearchParams,
+} from 'react-router-dom';
 import { DeleteProjectDialogue } from './DeleteProject/DeleteProjectDialogue';
 import { ProjectLog } from './ProjectLog/ProjectLog';
 import { ChangeRequestOverview } from 'component/changeRequest/ChangeRequestOverview/ChangeRequestOverview';
@@ -116,19 +122,32 @@ const ProjectStatusSvgWithMargin = styled(ProjectStatusSvg)(({ theme }) => ({
 }));
 
 const ProjectStatus = () => {
-    const [projectStatusOpen, setProjectStatusOpen] = useState(false);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [projectStatusOpen, setProjectStatusOpen] = useState(
+        searchParams.has('project-status'),
+    );
+    const toggleStatusModal = (open: boolean) => () => {
+        if (open) {
+            searchParams.set('project-status', '');
+        } else {
+            searchParams.delete('project-status');
+        }
+        setSearchParams(searchParams);
+        setProjectStatusOpen(open);
+    };
+
     return (
         <>
             <ProjectStatusButton
-                onClick={() => setProjectStatusOpen(true)}
+                onClick={toggleStatusModal(true)}
                 startIcon={<ProjectStatusSvgWithMargin />}
                 data-loading-project
             >
                 Project status
             </ProjectStatusButton>
             <ProjectStatusModal
                 open={projectStatusOpen}
-                close={() => setProjectStatusOpen(false)}
+                close={toggleStatusModal(false)}
             />
         </>
     );