Merge branch 'nafees/preview-apps-initial-cli' of https://github.com/porter-dev/porter into nafees/preview-apps-initial-cli

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

@@ -5,13 +5,14 @@ import TitleSection from "components/TitleSection";
 import pr_icon from "assets/pull_request_icon.svg";
 import { useRouteMatch, useLocation } from "react-router";
 import DynamicLink from "components/DynamicLink";
-import { capitalize, PRDeployment, Environment } from "./EnvironmentList";
+import { PRDeployment, Environment } from "./EnvironmentList";
 import Loading from "components/Loading";
 import { Context } from "shared/Context";
 import api from "shared/api";
 import ChartList from "../../chart/ChartList";
 import github from "assets/github-white.png";
 import { integrationList } from "shared/common";
+import { capitalize } from "./components/EnvironmentCard";
 
 const EnvironmentDetail = () => {
   const { params } = useRouteMatch<{ namespace: string }>();

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

@@ -52,6 +52,16 @@ const EnvironmentList = () => {
   const location = useLocation();
   const history = useHistory();
 
+  const getPRDeploymentList = () =>
+    api.getPRDeploymentList(
+      "<token>",
+      {},
+      {
+        project_id: currentProject.id,
+        cluster_id: currentCluster.id,
+      }
+    );
+
   useEffect(() => {
     let isSubscribed = true;
     api
@@ -83,19 +93,11 @@ const EnvironmentList = () => {
     return () => {
       isSubscribed = false;
     };
-  }, []);
+  }, [currentProject, currentCluster]);
 
   useEffect(() => {
     let isSubscribed = true;
-    api
-      .getPRDeploymentList(
-        "<token>",
-        {},
-        {
-          project_id: currentProject.id,
-          cluster_id: currentCluster.id,
-        }
-      )
+    getPRDeploymentList()
       .then(({ data }) => {
         if (!isSubscribed) {
           return;
@@ -129,6 +131,22 @@ const EnvironmentList = () => {
     }
   }, [location.search, history]);
 
+  const handleRefresh = () => {
+    setIsLoading(true);
+    getPRDeploymentList()
+      .then(({ data }) => {
+        if (!Array.isArray(data)) {
+          throw Error("Data is not an array");
+        }
+        setEnvironmentList(data);
+      })
+      .catch((err) => {
+        setHasError(true);
+        console.error(err);
+      })
+      .finally(() => setIsLoading(false));
+  };
+
   if (showConnectRepoFlow) {
     return (
       <Container>
@@ -181,14 +199,20 @@ const EnvironmentList = () => {
         >
           <i className="material-icons">add</i> Add Repository
         </Button>
-        <SettingsButton
-          onClick={() => {
-            setCurrentModal("PreviewEnvSettingsModal", {});
-          }}
-        >
-          <i className="material-icons-outlined">settings</i>
-          Configure
-        </SettingsButton>
+
+        <ActionsWrapper>
+          <RefreshButton color={"#7d7d81"} onClick={handleRefresh}>
+            <i className="material-icons">refresh</i>
+          </RefreshButton>
+          <SettingsButton
+            onClick={() => {
+              setCurrentModal("PreviewEnvSettingsModal", {});
+            }}
+          >
+            <i className="material-icons-outlined">settings</i>
+            Configure
+          </SettingsButton>
+        </ActionsWrapper>
         {/* <Settings >
           <SettingsIcon src={settings} />
           <SettingsText>
@@ -203,6 +227,29 @@ const EnvironmentList = () => {
 
 export default EnvironmentList;
 
+const ActionsWrapper = styled.div`
+  display: flex;
+`;
+
+const RefreshButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(props: { color: string }) => props.color};
+  cursor: pointer;
+  border: none;
+  background: none;
+  border-radius: 50%;
+  margin-right: 10px;
+  > i {
+    font-size: 20px;
+  }
+  :hover {
+    background-color: rgb(97 98 102 / 44%);
+    color: white;
+  }
+`;
+
 const SettingsButton = styled.div`
   font-size: 12px;
   padding: 8px 10px;