From 7d45f6c074d2fdc3ac6bc3712bdb8778f77061dc Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Thu, 29 Feb 2024 21:14:31 +0100
Subject: [PATCH] persistent projects url

---
 .../executiveDashboard/ExecutiveDashboard.tsx   | 17 +++++++++++++----
 .../components/ProjectSelect/ProjectSelect.tsx  |  4 +++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx b/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
index 54af9c0516..91f8f3bab1 100644
--- a/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
+++ b/frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
@@ -25,6 +25,8 @@ import { ProjectHealthChart } from './componentsChart/ProjectHealthChart/Project
 import { TimeToProductionChart } from './componentsChart/TimeToProductionChart/TimeToProductionChart';
 import { MetricsSummaryChart } from './componentsChart/MetricsSummaryChart/MetricsSummaryChart';
 import { UsersPerProjectChart } from './componentsChart/UsersPerProjectChart/UsersPerProjectChart';
+import { ArrayParam, withDefault } from 'use-query-params';
+import { usePersistentTableState } from 'hooks/usePersistentTableState';
 
 const StyledGrid = styled(Box)(({ theme }) => ({
     display: 'grid',
@@ -46,7 +48,16 @@ const ChartWidget = styled(Widget)(({ theme }) => ({
 
 export const ExecutiveDashboard: VFC = () => {
     const { executiveDashboardData, loading, error } = useExecutiveDashboard();
-    const [projects, setProjects] = useState([allOption.id]);
+    const stateConfig = {
+        projects: withDefault(ArrayParam, [allOption.id]),
+    };
+    const [state, setState] = usePersistentTableState(`insights`, stateConfig);
+    const setProjects = (projects: string[]) => {
+        setState({ projects });
+    };
+    const projects = state.projects
+        ? (state.projects.filter(Boolean) as string[])
+        : [];
     const showAllProjects = projects[0] === allOption.id;
     const projectsData = useFilteredTrends(
         executiveDashboardData.projectFlagTrends,
@@ -139,9 +150,7 @@ export const ExecutiveDashboard: VFC = () => {
                 </Widget>
                 <ChartWidget
                     title={
-                        showAllProjects
-                            ? 'Healthy flags'
-                            : 'Health per project'
+                        showAllProjects ? 'Healthy flags' : 'Health per project'
                     }
                 >
                     <ProjectHealthChart
diff --git a/frontend/src/component/executiveDashboard/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/component/executiveDashboard/components/ProjectSelect/ProjectSelect.tsx
index 14a2e2fdfa..2f1b280e1e 100644
--- a/frontend/src/component/executiveDashboard/components/ProjectSelect/ProjectSelect.tsx
+++ b/frontend/src/component/executiveDashboard/components/ProjectSelect/ProjectSelect.tsx
@@ -12,7 +12,9 @@ export const allOption = { label: 'ALL', id: '*' };
 
 interface IProjectSelectProps {
     selectedProjects: string[];
-    onChange: Dispatch<SetStateAction<string[]>>;
+    onChange:
+        | Dispatch<SetStateAction<string[]>>
+        | ((projects: string[]) => void);
 }
 
 export const ProjectSelect: VFC<IProjectSelectProps> = ({