Fix Project Selection during refresh and switching (#3525)

dashboard/src/main/home/Home.tsx

@@ -134,15 +134,35 @@ const Home: React.FC<Props> = (props) => {
       } else if (projectList.length > 0 && !currentProject) {
         setProjects(projectList);
 
-        id = id ?? Number(localStorage.getItem("currentProject"));
-        const foundProjectListEntry = projectList.find(
-          (item: ProjectListType) => item.id === id
-        );
+        let foundProject = null;
+        if (id) {
+          projectList.forEach((project: ProjectListType, i: number) => {
+            if (project.id === id) {
+              foundProject = project;
+            }
+          });
 
-        const project = await api
-          .getProject("<token>", {}, { id: foundProjectListEntry?.id || projectList[0].id })
-          .then((res) => res.data as ProjectType);
-        setCurrentProject(project);
+          const project = await api
+            .getProject("<token>", {}, { id: projectList[0].id })
+            .then((res) => res.data as ProjectType);
+
+          setCurrentProject(foundProject || project);
+        }
+        if (!foundProject) {
+          projectList.forEach((project: ProjectListType, i: number) => {
+            if (
+              project.id.toString() ===
+              localStorage.getItem("currentProject")
+            ) {
+              foundProject = project;
+            }
+          });
+          const project = await api
+            .getProject("<token>", {}, { id: projectList[0].id })
+            .then((res) => res.data as ProjectType);
+
+          setCurrentProject(foundProject || project);
+        }
       }
     } catch (error) {
       console.log(error);
@@ -183,7 +203,7 @@ const Home: React.FC<Props> = (props) => {
       } else {
         setHasFinishedOnboarding(true);
       }
-    } catch (error) {}
+    } catch (error) { }
   };
 
   useEffect(() => {
@@ -457,17 +477,17 @@ const Home: React.FC<Props> = (props) => {
               overrideInfraTabEnabled({
                 projectID: currentProject?.id,
               })) && (
-              <Route
-                path="/infrastructure"
-                render={() => {
-                  return (
-                    <DashboardWrapper>
-                      <InfrastructureRouter />
-                    </DashboardWrapper>
-                  );
-                }}
-              />
-            )}
+                <Route
+                  path="/infrastructure"
+                  render={() => {
+                    return (
+                      <DashboardWrapper>
+                        <InfrastructureRouter />
+                      </DashboardWrapper>
+                    );
+                  }}
+                />
+              )}
             <Route
               path="/dashboard"
               render={() => {

dashboard/src/main/home/sidebar/ProjectButton.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import gradient from "assets/gradient.png";
 
 import { Context } from "shared/Context";
-import { ProjectType } from "shared/types";
+import { ProjectListType, ProjectType } from "shared/types";
 import { pushFiltered } from "shared/routing";
 import { RouteComponentProps, withRouter } from "react-router";
 import Icon from "components/porter/Icon";
@@ -13,14 +13,14 @@ import ProjectSelectionModal from "./ProjectSelectionModal";
 
 type PropsType = RouteComponentProps & {
   currentProject: ProjectType;
-  projects: ProjectType[];
+  projects: ProjectListType[];
 };
 
 const ProjectButton: React.FC<PropsType> = (props) => {
   const [expanded, setExpanded] = useState(false);
   const wrapperRef = useRef<any>(null);
   const context = useContext(Context);
-  const [showGHAModal, setShowGHAModal] = useState<boolean>(false);
+  const [showModal, setShowModal] = useState<boolean>(false);
 
   const { user } = context;
 
@@ -51,17 +51,17 @@ const ProjectButton: React.FC<PropsType> = (props) => {
   if (currentProject) {
     return (
       <StyledProjectSection ref={wrapperRef}>
-        {showGHAModal && currentProject != null && (
+        {showModal && currentProject != null && (
           <ProjectSelectionModal
             currentProject={props.currentProject}
             projects={props.projects}
-            closeModal={() => setShowGHAModal(false)}
+            closeModal={() => setShowModal(false)}
           />
         )}
         <MainSelector
           projectsLength={props.projects.length}
           isPorterUser={user.isPorterUser}
-          onClick={() => (props.projects.length > 1 || user.isPorterUser) && setShowGHAModal(true)} >
+          onClick={() => (props.projects.length > 1 || user.isPorterUser) && setShowModal(true)} >
           <ProjectIcon>
             <ProjectImage src={gradient} />
             <Letter>{currentProject.name[0].toUpperCase()}</Letter>

dashboard/src/main/home/sidebar/ProjectButtonContainer.tsx

@@ -1,27 +0,0 @@
-import React, { Component } from "react";
-
-import { Context } from "shared/Context";
-import ProjectButton from "./ProjectButton";
-
-type PropsType = {};
-
-type StateType = {};
-
-// Props in context to project section to trigger update on context change
-export default class ProjectButtonContianer extends Component<
-  PropsType,
-  StateType
-> {
-  state = {};
-
-  render() {
-    return (
-      <ProjectButton
-        currentProject={this.context.currentProject}
-        projects={this.context.projects}
-      />
-    );
-  }
-}
-
-ProjectButtonContianer.contextType = Context;

dashboard/src/main/home/sidebar/ProjectSelectionModal.tsx

@@ -17,7 +17,7 @@ import Container from "components/porter/Container";
 
 type Props = RouteComponentProps & {
   closeModal: () => void;
-  projects: ProjectType[];
+  projects: ProjectListType[];
   currentProject: ProjectType;
 }
 
@@ -103,9 +103,7 @@ const ProjectSelectionModal: React.FC<Props> = ({
             const clusters_list = await updateClusterList(project.id);
             if (clusters_list?.length > 0) {
               setCurrentCluster(clusters_list[0]);
-              setCurrentProject(project, () => {
-                pushFiltered(props, "/dashboard", ["project_id"]);
-              });
+              pushFiltered(props, "/dashboard", ["project_id"]);
             } else {
               setCurrentProject(project, () => {
                 pushFiltered(props, "/dashboard", ["project_id"]);

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -23,8 +23,6 @@ import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
 import SidebarLink from "./SidebarLink";
 import { overrideInfraTabEnabled } from "utils/infrastructure";
 import ClusterListContainer from "./ClusterListContainer";
-import ProjectButtonContainer from "./ProjectButtonContainer";
-import ProjectButtonContianer from "./ProjectButtonContainer";
 
 type PropsType = RouteComponentProps &
   WithAuthProps & {