Merge branch 'nico/preview-envs-frontend-improvements' into nafees/preview-env-new-endpoints

dashboard/src/main/home/cluster-dashboard/preview-environments/components/ConnectNewRepo.tsx → dashboard/src/main/home/cluster-dashboard/preview-environments/ConnectNewRepo.tsx

@@ -11,8 +11,8 @@ import styled from "styled-components";
 import api from "shared/api";
 import { Context } from "shared/Context";
 import { useRouting } from "shared/routing";
-import { Environment } from "../types";
-import { PreviewEnvironmentsHeader } from "./PreviewEnvironmentsHeader";
+import { Environment } from "./types";
+import { PreviewEnvironmentsHeader } from "./components/PreviewEnvironmentsHeader";
 import CheckboxRow from "components/form-components/CheckboxRow";
 
 const ConnectNewRepo: React.FC = () => {
@@ -71,7 +71,7 @@ const ConnectNewRepo: React.FC = () => {
       .createEnvironment(
         "<token>",
         {
-          name: "preview",
+          name: `preview`,
           mode: enableAutomaticDeployments ? "auto" : "manual",
         },
         {

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

@@ -19,7 +19,8 @@ type TabEnum = typeof AvailableTabs[number];
 const PreviewEnvironmentsHome = () => {
   const { currentCluster, currentProject } = useContext(Context);
 
-  const [isEnabled, setIsEnabled] = useState(false);
+  const [hasGHAccountsLinked, setHasGHAccountsLinked] = useState(false);
+  const [hasEnvironments, setHasEnvironments] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
   const [environments, setEnvironments] = useState([]);
@@ -29,45 +30,75 @@ const PreviewEnvironmentsHome = () => {
   const location = useLocation();
   const history = useHistory();
 
-  useEffect(() => {
-    let isSubscribed = true;
-    api
-      .listEnvironments(
+  const getAccounts = async () => {
+    try {
+      const res = await api.getGithubAccounts("<token>", {}, {});
+      if (res.status !== 200) {
+        throw new Error("Not authorized");
+      }
+
+      return res.data;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const getEnvironments = async () => {
+    try {
+      const { data } = await api.listEnvironments(
         "<token>",
         {},
         {
           project_id: currentProject?.id,
           cluster_id: currentCluster?.id,
         }
-      )
-      // mockRequest()
-      .then(({ data }) => {
-        if (isSubscribed) {
-          setIsEnabled(true);
-        }
+      );
 
-        if (!Array.isArray(data)) {
-          throw Error("Data is not an array");
-        }
+      return data;
+    } catch (error) {
+      throw error;
+    }
+  };
 
-        setIsEnabled(!!data.length);
-        setEnvironments(data);
-      })
+  const checkPreviewEnvironmentsEnabling = async (subscribeStauts: {
+    subscribed: boolean;
+  }) => {
+    try {
+      await getAccounts();
+
+      const envs = await getEnvironments();
+      // const envs = await mockRequest();
+
+      if (!subscribeStauts.subscribed) {
+        return;
+      }
+
+      if (!Array.isArray(envs)) {
+        setHasGHAccountsLinked(true);
+        return;
+      }
+
+      setHasGHAccountsLinked(true);
+      setHasEnvironments(true);
+      setEnvironments(envs);
+    } catch (error) {
+      setHasGHAccountsLinked(false);
+    }
+  };
 
-      .catch((err) => {
-        console.error(err);
-        if (isSubscribed) {
-          setHasError(true);
-        }
-      })
-      .finally(() => {
-        if (isSubscribed) {
-          setIsLoading(false);
-        }
-      });
+  useEffect(() => {
+    let subscribedStatus = { subscribed: true };
+
+    setIsLoading(true);
+
+    checkPreviewEnvironmentsEnabling(subscribedStatus).finally(() => {
+      if (subscribedStatus.subscribed) {
+        setIsLoading(false);
+      }
+    });
 
     return () => {
-      isSubscribed = false;
+      subscribedStatus.subscribed = false;
     };
   }, [currentCluster, currentProject]);
 
@@ -96,7 +127,24 @@ const PreviewEnvironmentsHome = () => {
     return <Placeholder>Something went wrong, please try again</Placeholder>;
   }
 
-  if (!isEnabled) {
+  if (!hasGHAccountsLinked) {
+    return (
+      <>
+        <PreviewEnvironmentsHeader />
+        <LineBreak />
+        <Placeholder>
+          <Title>There are no repositories linked</Title>
+          <Subtitle>
+            In order to use preview environments, you must install the porter
+            app in at least one repository.
+          </Subtitle>
+          <ButtonEnablePREnvironments />
+        </Placeholder>
+      </>
+    );
+  }
+
+  if (!hasEnvironments) {
     return (
       <>
         <PreviewEnvironmentsHeader />

dashboard/src/main/home/cluster-dashboard/preview-environments/components/ButtonEnablePREnvironments.tsx

@@ -80,6 +80,20 @@ const ButtonEnablePREnvironments = () => {
       </Container>
     );
   }
+
+  if (!hasGHAccountConnected) {
+    return (
+      <>
+        <Container>
+          <Button {...getButtonProps()}>
+            <img src={pr_icon} alt="Pull request icon" />
+            Connect repositories
+          </Button>
+        </Container>
+      </>
+    );
+  }
+
   return (
     <>
       <Container>

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

@@ -132,14 +132,23 @@ const EnvironmentCard = ({ environment, onDelete }: Props) => {
             </DynamicLink>
           </RepoName>
           <Status>
-            <StatusDot status={last_deployment_status} />
-            {capitalize(last_deployment_status || "")}
-
-            <Dot>•</Dot>
-            <span>
-              Pull {deployment_count > 1 ? "requests" : "request"} deployed:{" "}
-              {deployment_count}
-            </span>
+            {deployment_count > 0 ? (
+              <span>
+                Pull {deployment_count > 1 ? "requests" : "request"} deployed:{" "}
+                {deployment_count || 0}
+              </span>
+            ) : (
+              <span>
+                There is no pull request deployed for this environment
+              </span>
+            )}
+            {deployment_count > 0 ? (
+              <>
+                <Dot>•</Dot>
+                <StatusDot status={last_deployment_status} />
+                Last PR status was {capitalize(last_deployment_status || "")}
+              </>
+            ) : null}
           </Status>
         </DataContainer>
         <Options.Dropdown expandIcon="more_vert" shrinkIcon="more_vert">

dashboard/src/main/home/cluster-dashboard/preview-environments/mocks.ts

@@ -25,6 +25,8 @@ export const environments = [
     git_repo_owner: "jnfrati",
     git_repo_name: "porter-docs",
     name: "Preview",
+    deployment_count: 3,
+    last_deployment_status: "failed",
   },
   {
     id: 38,

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

@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 import { Redirect, Route, Switch, useRouteMatch } from "react-router";
 import { Context } from "shared/Context";
-import ConnectNewRepo from "./components/ConnectNewRepo";
+import ConnectNewRepo from "./ConnectNewRepo";
 import DeploymentDetail from "./deployments/DeploymentDetail";
 import PreviewEnvironmentsHome from "./PreviewEnvironmentsHome";