Move environments to top component to have the list on deployment list

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

@@ -17,6 +17,7 @@ const PreviewEnvironmentsHome = () => {
   const [isEnabled, setIsEnabled] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
+  const [environments, setEnvironments] = useState([]);
 
   const [currentTab, setCurrentTab] = useState<TabEnum>("repositories");
 
@@ -41,6 +42,7 @@ const PreviewEnvironmentsHome = () => {
         }
 
         setIsEnabled(!!data.length);
+        setEnvironments(data);
       })
 
       .catch((err) => {
@@ -97,12 +99,17 @@ const PreviewEnvironmentsHome = () => {
           {
             label: "Linked Repositories",
             value: "repositories",
-            component: <EnvironmentsList />,
+            component: (
+              <EnvironmentsList
+                environments={environments}
+                setEnvironments={setEnvironments}
+              />
+            ),
           },
           {
             label: "Pull requests",
             value: "pull_requests",
-            component: <DeploymentList />,
+            component: <DeploymentList environments={environments} />,
           },
         ]}
         currentTab={currentTab}

dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentList.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { Context } from "shared/Context";
 import api from "shared/api";
 import styled from "styled-components";
@@ -8,17 +8,15 @@ import Loading from "components/Loading";
 
 import _ from "lodash";
 import DeploymentCard from "./DeploymentCard";
-import { PRDeployment } from "../types";
+import { Environment, PRDeployment } from "../types";
 
-const DeploymentList = () => {
+const DeploymentList = ({ environments }: { environments: Environment[] }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
   const [deploymentList, setDeploymentList] = useState<PRDeployment[]>([]);
-  const [statusSelectorVal, setStatusSelectorVal] = useState<string>("active");
+  const [statusSelectorVal, setStatusSelectorVal] = useState<string>("all");
 
-  const { currentProject, currentCluster, setCurrentModal } = useContext(
-    Context
-  );
+  const { currentProject, currentCluster } = useContext(Context);
 
   const getPRDeploymentList = () => {
     return api.getPRDeploymentList(
@@ -74,6 +72,12 @@ const DeploymentList = () => {
     return <Placeholder>Error</Placeholder>;
   }
 
+  const filteredDeployments = useMemo(() => {
+    return deploymentList.filter((d) => {
+      return d.status === statusSelectorVal;
+    });
+  }, [statusSelectorVal]);
+
   const renderDeploymentList = () => {
     if (isLoading) {
       return (
@@ -92,7 +96,15 @@ const DeploymentList = () => {
       );
     }
 
-    return deploymentList.map((d) => {
+    if (!filteredDeployments.length) {
+      return (
+        <Placeholder>
+          No preview apps have been found with the given filter.
+        </Placeholder>
+      );
+    }
+
+    return filteredDeployments.map((d) => {
       return <DeploymentCard deployment={d} onDelete={handleRefresh} />;
     });
   };
@@ -109,6 +121,18 @@ const DeploymentList = () => {
               activeValue={statusSelectorVal}
               setActiveValue={setStatusSelectorVal}
               options={[
+                {
+                  value: "all",
+                  label: "All",
+                },
+                {
+                  value: "creating",
+                  label: "Creating",
+                },
+                {
+                  value: "failed",
+                  label: "Failed",
+                },
                 {
                   value: "active",
                   label: "Active",
@@ -124,15 +148,6 @@ const DeploymentList = () => {
               closeOverlay={true}
             />
           </StyledStatusSelector>
-
-          <SettingsButton
-            onClick={() => {
-              setCurrentModal("PreviewEnvSettingsModal", {});
-            }}
-          >
-            <i className="material-icons-outlined">settings</i>
-            Configure
-          </SettingsButton>
         </ActionsWrapper>
       </ControlRow>
       <EventsGrid>{renderDeploymentList()}</EventsGrid>

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

@@ -8,56 +8,14 @@ import { deployments, environments } from "../mocks";
 import { Environment } from "../types";
 import EnvironmentCard from "./EnvironmentCard";
 
-const EnvironmentsList = () => {
-  const { currentCluster, currentProject } = useContext(Context);
-  const [isLoading, setIsLoading] = useState(true);
-  const [hasError, setHasError] = useState(false);
-  const [environments, setEnvironments] = useState<Environment[]>([]);
-
-  useEffect(() => {
-    let isSubscribed = true;
-    api
-      .listEnvironments<Environment[]>(
-        "<token>",
-        {},
-        {
-          project_id: currentProject?.id,
-          cluster_id: currentCluster?.id,
-        }
-      )
-      .then(({ data }) => {
-        if (!isSubscribed) {
-          return;
-        }
-
-        if (!Array.isArray(data)) {
-          throw Error("Data is not an array");
-        }
-
-        setEnvironments(data);
-      })
-
-      .catch((err) => {
-        console.error(err);
-        if (isSubscribed) {
-          setHasError(true);
-        }
-      })
-      .finally(() => {
-        if (isSubscribed) {
-          setIsLoading(false);
-        }
-      });
-
-    return () => {
-      isSubscribed = false;
-    };
-  }, [currentCluster, currentProject]);
-
-  if (isLoading) {
-    return <Loading />;
-  }
+type Props = {
+  environments: Environment[];
+  setEnvironments: (
+    setFunction: (prev: Environment[]) => Environment[]
+  ) => void;
+};
 
+const EnvironmentsList = ({ environments, setEnvironments }: Props) => {
   const removeEnvironmentFromList = (deletedEnv: Environment) => {
     setEnvironments((prev) => {
       return prev.filter((env) => env.id === deletedEnv.id);