pass in git_installation_id for deployments

dashboard/src/main/home/cluster-dashboard/dashboard/preview-environments/EnvironmentDetail.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import backArrow from "assets/back_arrow.png";
 import TitleSection from "components/TitleSection";
 import pr_icon from "assets/pull_request_icon.svg";
-import { useRouteMatch } from "react-router";
+import { useRouteMatch, useLocation } from "react-router";
 import DynamicLink from "components/DynamicLink";
 import { capitalize, PRDeployment } from "./EnvironmentList";
 import Loading from "components/Loading";
@@ -25,9 +25,17 @@ const EnvironmentDetail = () => {
     Context
   );
 
+  const useQuery = () => {
+    const { search } = useLocation();
+  
+    return React.useMemo(() => new URLSearchParams(search), [search]);
+  }
+
   useEffect(() => {
+    let query = useQuery();
     let isSubscribed = true;
 
+    let git_installation_id = parseInt(query.get("git_installation_id"))
     api
     .getPRDeployment(
       "<token>",
@@ -37,6 +45,7 @@ const EnvironmentDetail = () => {
       {
         project_id: currentProject.id,
         cluster_id: currentCluster.id,
+        git_installation_id: git_installation_id
       }
     ).then(({ data }) => {
         if (!isSubscribed) {

dashboard/src/main/home/cluster-dashboard/dashboard/preview-environments/EnvironmentList.tsx

@@ -10,6 +10,7 @@ import ButtonEnablePREnvironments from "./components/ButtonEnablePREnvironments"
 import ConnectNewRepo from "./components/ConnectNewRepo";
 import Loading from "components/Loading";
 import pr_icon from "assets/pull_request_icon.svg";
+import _ from "lodash";
 
 export type PRDeployment = {
   id: number,
@@ -18,6 +19,7 @@ export type PRDeployment = {
   environment_id: number,
   pull_request_id: number,
   namespace: string,
+  git_installation_id?: number,
   gh_pr_name: string,
   gh_repo_owner: string,
   gh_repo_name: string,
@@ -73,7 +75,6 @@ const EnvironmentList = () => {
           if (!Array.isArray(data)) {
             throw Error("Data is not an array");
           }
-  
           setEnvironmentList(data);
         })
         .catch((err) => {
@@ -88,18 +89,20 @@ const EnvironmentList = () => {
         };  
     }, []);
 
-  useEffect(() => {
+  
+  const getDeployments = (git_installation_id: number) => {
     let isSubscribed = true;
-    // TODO: Replace get mock data by endpoint
-    api
+    return api
     .getPRDeploymentList(
       "<token>",
       {},
       {
         project_id: currentProject.id,
         cluster_id: currentCluster.id,
+        git_installation_id: git_installation_id,
       }
-    ).then(({ data }) => {
+    )
+    .then(({ data }) => {
         if (!isSubscribed) {
           return;
         }
@@ -108,25 +111,52 @@ const EnvironmentList = () => {
           throw Error("Data is not an array");
         }
 
-        setDeploymentList(data);
-      })
-      .catch((err) => {
-        console.error(err);
-        if (isSubscribed) {
-          setHasError(true);
-          setDeploymentList([]);
-        }
+        data = data.forEach((d) => {
+          d.git_installation_id = git_installation_id;
+        })
+
+        return Promise.resolve(data);
       })
-      .finally(() => {
-        if (isSubscribed) {
-          setIsLoading(false);
-        }
+    .catch((err) => {
+      console.error(err);
+      if (isSubscribed) {
+        // setHasError(true);
+        setDeploymentList([]);
+      }
+      return Promise.resolve([]);
+    })  
+  }
+
+  useEffect(() => {
+    let isSubscribed = true;
+
+    let gitInstallations = environmentList.map((e) => {
+      return e.git_installation_id
+    })
+
+    let uniqueIds = _.uniq(gitInstallations);
+
+    let promises = uniqueIds.map((git_installation_id) => {
+      return getDeployments(git_installation_id)
+    });
+
+    Promise.all(promises).then((data) => {      
+      let result:PRDeployment[] = []
+      data.forEach((d) => {
+        result.concat(d)
       });
+      setDeploymentList(result);
+    });
 
-      return () => {
-        isSubscribed = false;
-      };
-  }, []);
+
+    if (isSubscribed) {
+      setIsLoading(false);
+    }
+
+    return () => {
+      isSubscribed = false;
+    };
+  }, [environmentList]);
 
   useEffect(() => {
     const action = getQueryParam({ location }, "action");
@@ -169,8 +199,6 @@ const EnvironmentList = () => {
     );
   }
 
-
-
   let renderDeploymentList = () => {
     if (!deploymentList.length) {
       return (
@@ -217,7 +245,7 @@ const EnvironmentList = () => {
           </DataContainer>
           <Flex>
             <RowButton
-              to={`${currentUrl}/pr-env-detail/${d.namespace}`}
+              to={`${currentUrl}/pr-env-detail/${d.namespace}?git_installation_id=${d.git_installation_id}`}
               key={d.id}
             >
               <i className="material-icons-outlined">info</i>

dashboard/src/shared/api.tsx

@@ -331,11 +331,12 @@ const getPRDeploymentList = baseApi<
   {
     cluster_id: number;
     project_id: number;
+    git_installation_id: number;
   }
 >("GET", (pathParams) => {
-  const { cluster_id, project_id } = pathParams;
+  const { cluster_id, project_id, git_installation_id } = pathParams;
 
-  return `/api/projects/${project_id}/gitrepos/21414420/clusters/${cluster_id}/deployments`;
+  return `/api/projects/${project_id}/gitrepos/${git_installation_id}/clusters/${cluster_id}/deployments`;
 });
 
 const getPRDeployment = baseApi<
@@ -345,10 +346,11 @@ const getPRDeployment = baseApi<
   {
     cluster_id: number;
     project_id: number;
+    git_installation_id: number;
   }
 >("GET", (pathParams) => {
-  const { cluster_id, project_id } = pathParams;
-  return `/api/projects/${project_id}/gitrepos/21414420/clusters/${cluster_id}/deployment`;
+  const { cluster_id, project_id, git_installation_id } = pathParams;
+  return `/api/projects/${project_id}/gitrepos/${git_installation_id}/clusters/${cluster_id}/deployment`;
 });
 
 const getNotificationConfig = baseApi<