Moved preview environments to it's own tab

dashboard/src/main/home/Home.tsx

@@ -467,6 +467,7 @@ class Home extends Component<PropsType, StateType> {
                 "/jobs",
                 "/env-groups",
                 "/databases",
+                "/preview-environments",
               ]}
               render={() => {
                 let { currentCluster } = this.context;

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -38,6 +38,14 @@ const LazyDatabasesRoutes = loadable(() => import("./databases/routes.tsx"), {
   fallback: <Loading />,
 });
 
+const LazyPreviewEnvironmentsRoutes = loadable(
+  // @ts-ignore
+  () => import("./preview-environments/routes.tsx"),
+  {
+    fallback: <Loading />,
+  }
+);
+
 type PropsType = RouteComponentProps &
   WithAuthProps & {
     currentCluster: ClusterType;
@@ -270,24 +278,6 @@ class ClusterDashboard extends Component<PropsType, StateType> {
     );
   };
 
-  // renderContents = () => {
-  //   let { currentCluster, setSidebar, currentView } = this.props;
-  //   if (currentView === "env-groups") {
-  //     return <EnvGroupDashboard currentCluster={this.props.currentCluster} />;
-  //   }
-
-  //   return (
-  //     <>
-  //       <DashboardHeader
-  //         image={currentView === "jobs" ? monojob : monoweb}
-  //         title={currentView}
-  //         description={this.getDescription(currentView)}
-  //       />
-  //       {this.renderBody()}
-  //     </>
-  //   );
-  // };
-
   render() {
     let { currentView } = this.props;
     let { setSidebar } = this.props;
@@ -335,9 +325,11 @@ class ClusterDashboard extends Component<PropsType, StateType> {
           resource=""
           verb={["get", "list"]}
         >
-          {/* {this.renderContents()} */}
           <EnvGroupDashboard currentCluster={this.props.currentCluster} />
         </GuardedRoute>
+        <Route path={"/preview-environments"}>
+          <LazyPreviewEnvironmentsRoutes />
+        </Route>
         <Route path={"/databases"}>
           <LazyDatabasesRoutes />
         </Route>

dashboard/src/main/home/cluster-dashboard/dashboard/Dashboard.tsx

@@ -12,23 +12,16 @@ import ClusterSettings from "./ClusterSettings";
 import useAuth from "shared/auth/useAuth";
 import Metrics from "./Metrics";
 import EventsTab from "./events/EventsTab";
-import EnvironmentList from "./preview-environments/EnvironmentList";
+import EnvironmentList from "../preview-environments/EnvironmentList";
 import { useLocation } from "react-router";
 import { getQueryParam } from "shared/routing";
 
-type TabEnum =
-  | "preview_environments"
-  | "nodes"
-  | "settings"
-  | "namespaces"
-  | "metrics"
-  | "events";
+type TabEnum = "nodes" | "settings" | "namespaces" | "metrics" | "events";
 
 const tabOptions: {
   label: string;
   value: TabEnum;
 }[] = [
-  { label: "Preview Environments", value: "preview_environments" },
   { label: "Nodes", value: "nodes" },
   { label: "Events", value: "events" },
   { label: "Metrics", value: "metrics" },
@@ -38,9 +31,7 @@ const tabOptions: {
 
 export const Dashboard: React.FunctionComponent = () => {
   const { currentProject } = useContext(Context);
-  const [currentTab, setCurrentTab] = useState<TabEnum>(() =>
-    currentProject.preview_envs_enabled ? "preview_environments" : "nodes"
-  );
+  const [currentTab, setCurrentTab] = useState<TabEnum>("nodes");
   const [currentTabOptions, setCurrentTabOptions] = useState(tabOptions);
   const [isAuthorized] = useAuth();
   const location = useLocation();
@@ -48,11 +39,6 @@ export const Dashboard: React.FunctionComponent = () => {
   const context = useContext(Context);
   const renderTab = () => {
     switch (currentTab) {
-      case "preview_environments":
-        if (currentProject.preview_envs_enabled) {
-          return <EnvironmentList />;
-        }
-        return <NodeList />;
       case "events":
         return <EventsTab />;
       case "settings":
@@ -70,10 +56,6 @@ export const Dashboard: React.FunctionComponent = () => {
   useEffect(() => {
     setCurrentTabOptions(
       tabOptions.filter((option) => {
-        if (option.value === "preview_environments") {
-          return currentProject.preview_envs_enabled;
-        }
-
         if (option.value === "settings") {
           return isAuthorized("cluster", "", ["get", "delete"]);
         }

dashboard/src/main/home/cluster-dashboard/dashboard/Routes.tsx

@@ -3,7 +3,6 @@ import { Redirect, Route, Switch, useRouteMatch } from "react-router";
 import { Context } from "shared/Context";
 import { Dashboard } from "./Dashboard";
 import ExpandedNodeView from "./node-view/ExpandedNodeView";
-import EnvironmentDetail from "./preview-environments/EnvironmentDetail";
 
 export const Routes = () => {
   const { url } = useRouteMatch();
@@ -14,15 +13,6 @@ export const Routes = () => {
         <Route path={`${url}/node-view/:nodeId`}>
           <ExpandedNodeView />
         </Route>
-        <Route
-          path={`${url}/pr-env-detail/:namespace`}
-          render={() => {
-            if (currentProject.preview_envs_enabled) {
-              return <EnvironmentDetail />;
-            }
-            return <Redirect to={`${url}/`} />;
-          }}
-        ></Route>
         <Route path={`${url}/`}>
           <Dashboard />
         </Route>

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import styled, { keyframes } from "styled-components";
-import { Environment, PRDeployment } from "../EnvironmentList";
+import { Environment, PRDeployment } from "./EnvironmentList";
 import pr_icon from "assets/pull_request_icon.svg";
 import { integrationList } from "shared/common";
 import { useRouteMatch } from "react-router";

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

@@ -9,7 +9,7 @@ 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 ChartList from "../chart/ChartList";
 import github from "assets/github-white.png";
 import { integrationList } from "shared/common";
 import { capitalize } from "shared/string_utils";
@@ -163,7 +163,8 @@ const GHALink = styled(DynamicLink)`
     margin-right: 9px;
     margin-left: 5px;
 
-    :text-decoration: none;
+    text-decoration: none;
+
     :hover {
       text-decoration: underline;
       color: white;

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

@@ -12,7 +12,7 @@ import ConnectNewRepo from "./components/ConnectNewRepo";
 import Loading from "components/Loading";
 
 import _, { flatMapDepth } from "lodash";
-import EnvironmentCard from "./components/EnvironmentCard";
+import EnvironmentCard from "./EnvironmentCard";
 
 export type PRDeployment = {
   id: number;

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

@@ -0,0 +1,110 @@
+import TabSelector from "components/TabSelector";
+import TitleSection from "components/TitleSection";
+import React, { useContext, useState } from "react";
+import { Context } from "shared/Context";
+import styled from "styled-components";
+import EnvironmentList from "./EnvironmentList";
+
+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>
+  </>
+);
+
+type TabEnum = "repositories" | "pull_requests";
+
+const PreviewEnvironmentsHome = () => {
+  const { currentCluster, currentProject } = useContext(Context);
+
+  const [currentTab, setCurrentTab] = useState<TabEnum>("repositories");
+
+  return (
+    <>
+      <Header />
+      <TabSelector
+        options={[
+          {
+            label: "Linked Repositories",
+            value: "repositories",
+            component: () => {
+              return <> Repoooos </>;
+            },
+          },
+          {
+            label: "Pull requests",
+            value: "pull_requests",
+            component: <EnvironmentList />,
+          },
+        ]}
+        currentTab={currentTab}
+        setCurrentTab={(value: TabEnum) => setCurrentTab(value)}
+      />
+    </>
+  );
+};
+
+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 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

@@ -0,0 +1,29 @@
+import React, { useContext } from "react";
+import { Redirect, Route, Switch, useRouteMatch } from "react-router";
+import { Context } from "shared/Context";
+import EnvironmentDetail from "./EnvironmentDetail";
+import PreviewEnvironmentsHome from "./PreviewEnvironmentsHome";
+
+export const Routes = () => {
+  const { url } = useRouteMatch();
+  const { currentProject } = useContext(Context);
+
+  // if (!currentProject?.preview_envs_enabled) {
+  //   return <Redirect to={`/`} />;
+  // }
+
+  return (
+    <>
+      <Switch>
+        <Route path={`${url}/details/:namespace`}>
+          <EnvironmentDetail />
+        </Route>
+        <Route path={`${url}/`}>
+          <PreviewEnvironmentsHome />
+        </Route>
+      </Switch>
+    </>
+  );
+};
+
+export default Routes;

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -172,6 +172,7 @@ class Sidebar extends Component<PropsType, StateType> {
                 Databases
               </NavButton>
             )}
+          <NavButton to="/preview-environments"> Prev envs</NavButton>
         </>
       );
     }

dashboard/src/shared/routing.tsx

@@ -12,7 +12,8 @@ export type PorterUrl =
   | "env-groups"
   | "jobs"
   | "onboarding"
-  | "databases";
+  | "databases"
+  | "preview-environments";
 
 export const PorterUrls = [
   "dashboard",
@@ -27,6 +28,7 @@ export const PorterUrls = [
   "jobs",
   "onboarding",
   "databases",
+  "preview-environments",
 ];
 
 // TODO: consolidate with pushFiltered