Updated routes to contain connect new repo

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

@@ -0,0 +1,7 @@
+import React from "react";
+
+const EnvironmentsList = () => {
+  return <div>EnvironmentsList</div>;
+};
+
+export default EnvironmentsList;

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

@@ -1,49 +1,103 @@
+import Loading from "components/Loading";
 import TabSelector from "components/TabSelector";
-import TitleSection from "components/TitleSection";
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
+import api from "shared/api";
 import { Context } from "shared/Context";
 import styled from "styled-components";
+import ButtonEnablePREnvironments from "./components/ButtonEnablePREnvironments";
+import { PreviewEnvironmentsHeader } from "./components/PreviewEnvironmentsHeader";
 import DeploymentList from "./DeploymentList";
-
-const Header = () => (
-  <>
-    <TitleSection>
-      <DashboardIcon>
-        <i className="material-icons">device_hub</i>
-      </DashboardIcon>
-      Preview environments
-    </TitleSection>
-    <InfoSection>
-      <TopRow>
-        <InfoLabel>
-          <i className="material-icons">info</i> Info
-        </InfoLabel>
-      </TopRow>
-      <Description>
-        Create preview environments for your pull requests
-      </Description>
-    </InfoSection>
-  </>
-);
+import EnvironmentsList from "./EnvironmentsList";
 
 type TabEnum = "repositories" | "pull_requests";
 
 const PreviewEnvironmentsHome = () => {
   const { currentCluster, currentProject } = useContext(Context);
 
+  const [isEnabled, setIsEnabled] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
   const [currentTab, setCurrentTab] = useState<TabEnum>("repositories");
 
+  useEffect(() => {
+    let isSubscribed = true;
+    api
+      .listEnvironments(
+        "<token>",
+        {},
+        {
+          project_id: currentProject?.id,
+          cluster_id: currentCluster?.id,
+        }
+      )
+      .then(({ data }) => {
+        if (isSubscribed) {
+          setIsEnabled(true);
+        }
+
+        if (!Array.isArray(data)) {
+          throw Error("Data is not an array");
+        }
+
+        setIsEnabled(!!data.length);
+      })
+
+      .catch((err) => {
+        console.error(err);
+        if (isSubscribed) {
+          setHasError(true);
+        }
+      })
+      .finally(() => {
+        if (isSubscribed) {
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      isSubscribed = false;
+    };
+  }, [currentCluster, currentProject]);
+
+  if (isLoading) {
+    return (
+      <Placeholder>
+        <Loading />
+      </Placeholder>
+    );
+  }
+
+  if (hasError) {
+    return <Placeholder>Something went wrong, please try again</Placeholder>;
+  }
+
+  if (!isEnabled) {
+    return (
+      <>
+        <PreviewEnvironmentsHeader />
+        <LineBreak />
+        <Placeholder>
+          <Title>Preview environments are not enabled on this cluster</Title>
+          <Subtitle>
+            In order to use preview environments, you must enable preview
+            environments on this cluster.
+          </Subtitle>
+          <ButtonEnablePREnvironments />
+        </Placeholder>
+      </>
+    );
+  }
+
   return (
     <>
-      <Header />
+      <PreviewEnvironmentsHeader />
       <TabSelector
         options={[
           {
             label: "Linked Repositories",
             value: "repositories",
-            component: () => {
-              return <> Repoooos </>;
-            },
+            component: <EnvironmentsList />,
           },
           {
             label: "Pull requests",
@@ -60,51 +114,43 @@ const PreviewEnvironmentsHome = () => {
 
 export default PreviewEnvironmentsHome;
 
-const DashboardIcon = styled.div`
-  height: 45px;
-  min-width: 45px;
-  width: 45px;
-  border-radius: 5px;
-  margin-right: 17px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #676c7c;
-  border: 2px solid #8e94aa;
-  > i {
-    font-size: 22px;
-  }
-`;
-
-const TopRow = styled.div`
-  display: flex;
-  align-items: center;
+const LineBreak = styled.div`
+  width: calc(100% - 0px);
+  height: 2px;
+  background: #ffffff20;
+  margin: 10px 0px 35px;
 `;
 
-const Description = styled.div`
-  color: #aaaabb;
-  margin-top: 13px;
-  margin-left: 2px;
+const Placeholder = styled.div`
+  padding: 30px;
+  margin-top: 35px;
+  padding-bottom: 40px;
   font-size: 13px;
-`;
-
-const InfoLabel = styled.div`
-  width: 72px;
-  height: 20px;
+  color: #ffffff44;
+  min-height: 400px;
+  height: 50vh;
+  background: #ffffff11;
+  border-radius: 8px;
+  width: 100%;
   display: flex;
   align-items: center;
-  color: #7a838f;
-  font-size: 13px;
+  justify-content: center;
+  flex-direction: column;
+
   > i {
-    color: #8b949f;
     font-size: 18px;
-    margin-right: 5px;
+    margin-right: 8px;
   }
 `;
 
-const InfoSection = styled.div`
-  margin-top: 36px;
-  font-family: "Work Sans", sans-serif;
-  margin-left: 0px;
-  margin-bottom: 35px;
+const Title = styled.div`
+  font-weight: 500;
+  color: #aaaabb;
+  font-size: 16px;
+  margin-bottom: 15px;
+  width: 50%;
+`;
+
+const Subtitle = styled.div`
+  width: 50%;
 `;

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

@@ -69,8 +69,7 @@ const ButtonEnablePREnvironments = () => {
       };
     }
     return {
-      to:
-        "/cluster-dashboard?selected_tab=preview_environments&action=connect-repo",
+      to: "/preview-environments/connect-repo",
     };
   };
 

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

@@ -12,6 +12,7 @@ import api from "shared/api";
 import { Context } from "shared/Context";
 import { useRouting } from "shared/routing";
 import { Environment } from "../DeploymentList";
+import { PreviewEnvironmentsHeader } from "./PreviewEnvironmentsHeader";
 
 const ConnectNewRepo: React.FC = () => {
   const { currentProject, currentCluster, setCurrentError } = useContext(
@@ -78,9 +79,7 @@ const ConnectNewRepo: React.FC = () => {
       )
       .then(() => {
         setStatus("successful");
-        pushFiltered(`${url}`, [], {
-          selected_tab: "preview_environments",
-        });
+        pushFiltered(`/preview-environments`, []);
       })
       .catch((err) => {
         err = JSON.stringify(err);
@@ -90,9 +89,11 @@ const ConnectNewRepo: React.FC = () => {
   };
 
   return (
-    <div>
+    <>
+      <PreviewEnvironmentsHeader />
+      <LineBreak />
       <ControlRow>
-        <BackButton to={`${url}?selected_tab=preview_environments`}>
+        <BackButton to={`/preview-environments`}>
           <i className="material-icons">close</i>
         </BackButton>
         <Title>Enable Preview Environments</Title>
@@ -129,12 +130,19 @@ const ConnectNewRepo: React.FC = () => {
           statusPosition={"left"}
         ></SaveButton>
       </ActionContainer>
-    </div>
+    </>
   );
 };
 
 export default ConnectNewRepo;
 
+const LineBreak = styled.div`
+  width: calc(100% - 0px);
+  height: 2px;
+  background: #ffffff20;
+  margin: 10px 0px 35px;
+`;
+
 const ControlRow = styled.div`
   display: flex;
   margin-left: auto;

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

@@ -0,0 +1,73 @@
+import React from "react";
+import TitleSection from "components/TitleSection";
+import styled from "styled-components";
+
+export const PreviewEnvironmentsHeader = () => (
+  <>
+    <TitleSection>
+      <DashboardIcon>
+        <i className="material-icons">device_hub</i>
+      </DashboardIcon>
+      Preview environments
+    </TitleSection>
+    <InfoSection>
+      <TopRow>
+        <InfoLabel>
+          <i className="material-icons">info</i> Info
+        </InfoLabel>
+      </TopRow>
+      <Description>
+        Create preview environments for your pull requests
+      </Description>
+    </InfoSection>
+  </>
+);
+
+const DashboardIcon = styled.div`
+  height: 45px;
+  min-width: 45px;
+  width: 45px;
+  border-radius: 5px;
+  margin-right: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #676c7c;
+  border: 2px solid #8e94aa;
+  > i {
+    font-size: 22px;
+  }
+`;
+
+const TopRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Description = styled.div`
+  color: #aaaabb;
+  margin-top: 13px;
+  margin-left: 2px;
+  font-size: 13px;
+`;
+
+const InfoLabel = styled.div`
+  width: 72px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  color: #7a838f;
+  font-size: 13px;
+  > i {
+    color: #8b949f;
+    font-size: 18px;
+    margin-right: 5px;
+  }
+`;
+
+const InfoSection = styled.div`
+  margin-top: 36px;
+  font-family: "Work Sans", sans-serif;
+  margin-left: 0px;
+  margin-bottom: 35px;
+`;

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

@@ -1,6 +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 EnvironmentDetail from "./EnvironmentDetail";
 import PreviewEnvironmentsHome from "./PreviewEnvironmentsHome";
 
@@ -15,10 +16,13 @@ export const Routes = () => {
   return (
     <>
       <Switch>
+        <Route path={`${url}/connect-repo`}>
+          <ConnectNewRepo />
+        </Route>
         <Route path={`${url}/details/:namespace`}>
           <EnvironmentDetail />
         </Route>
-        <Route path={`${url}/`}>
+        <Route path={`${url}/:selected_tab?`}>
           <PreviewEnvironmentsHome />
         </Route>
       </Switch>