hide namespaces for capi

dashboard/src/components/porter/Spacer.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 type Props = {
   height?: string;
+  width?: string;
   y?: number;
   x?: number;
   inline?: boolean;
@@ -10,6 +11,7 @@ type Props = {
 
 const Spacer: React.FC<Props> = ({
   height,
+  width,
   y,
   x,
   inline,
@@ -31,7 +33,7 @@ const Spacer: React.FC<Props> = ({
   return (
     <StyledSpacer
       height={height || getCalcHeight()}
-      width={inline && getCalcWidth()}
+      width={inline && (width || getCalcWidth())}
     />
   );
 };

dashboard/src/main/home/cluster-dashboard/apps/AppDashboard.tsx

@@ -19,6 +19,7 @@ import DashboardHeader from "../DashboardHeader";
 import ChartList from "../chart/ChartList";
 import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
 import SortSelector from "../SortSelector";
+import Spacer from "components/porter/Spacer";
 
 type Props = RouteComponentProps & WithAuthProps & {
   currentView: PorterUrl;
@@ -37,7 +38,7 @@ const AppDashboard: React.FC<Props> = ({
   setSortType,
   ...props
 }) => {
-  const { currentCluster } = useContext(Context);
+  const { currentProject, currentCluster } = useContext(Context);
   const [selectedTag, setSelectedTag] = useState("none");
 
   return (
@@ -54,25 +55,28 @@ const AppDashboard: React.FC<Props> = ({
         <>
           <ControlRow>
             <FilterWrapper>
-              <NamespaceSelector
-                setNamespace={(x) => {
-                  setNamespace(x);
-                  pushQueryParams(props, {
-                    namespace: x || "ALL",
-                  });
-                }}
-                namespace={namespace}
+              <SortSelector
+                setSortType={setSortType}
+                sortType={sortType}
+                currentView={currentView}
               />
+              <Spacer inline width="10px" />
+              {!currentProject.capi_provisioner_enabled && (
+                <NamespaceSelector
+                  setNamespace={(x) => {
+                    setNamespace(x);
+                    pushQueryParams(props, {
+                      namespace: x || "ALL",
+                    });
+                  }}
+                  namespace={namespace}
+                />
+              )}
               <TagFilter
                 onSelect={setSelectedTag}
               />
             </FilterWrapper>
             <Flex>
-              <SortSelector
-                setSortType={setSortType}
-                sortType={sortType}
-                currentView={currentView}
-              />
               {props.isAuthorized(
                 "namespace", 
                 [], 
@@ -91,7 +95,7 @@ const AppDashboard: React.FC<Props> = ({
           <ChartList
             currentView={currentView}
             currentCluster={currentCluster}
-            namespace={namespace}
+            namespace={currentProject.capi_provisioner_enabled ? "default" : namespace}
             sortType={sortType}
             selectedTag={selectedTag}
           />

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupDashboard.tsx

@@ -17,6 +17,7 @@ import { RouteComponentProps, withRouter } from "react-router";
 import { getQueryParam, pushQueryParams, pushFiltered } from "shared/routing";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
 import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
+import Spacer from "components/porter/Spacer";
 
 type PropsType = RouteComponentProps &
   WithAuthProps & {
@@ -44,7 +45,7 @@ const EnvGroupDashboard = (props: PropsType) => {
       : "Newest",
   });
 
-  const { currentCluster } = useContext(Context);
+  const { currentProject } = useContext(Context);
 
   const setNamespace = (namespace: string) => {
     setState((state) => ({ ...state, namespace }));
@@ -100,17 +101,20 @@ const EnvGroupDashboard = (props: PropsType) => {
         <>
           <ControlRow hasMultipleChilds={isAuthorizedToAdd}>
             <SortFilterWrapper>
-              <NamespaceSelector
-                setNamespace={setNamespace}
-                namespace={state.namespace}
-              />
-            </SortFilterWrapper>
-            <Flex>
               <SortSelector
                 currentView="env-groups"
                 setSortType={setSortType}
                 sortType={state.sortType}
               />
+              <Spacer inline width="10px" />
+              {!currentProject.capi_provisioner_enabled && (
+                <NamespaceSelector
+                  setNamespace={setNamespace}
+                  namespace={state.namespace}
+                />
+              )}
+            </SortFilterWrapper>
+            <Flex>
               {isAuthorizedToAdd && (
                 <Button onClick={toggleCreateEnvMode}>
                   <i className="material-icons">add</i> Create env group
@@ -121,7 +125,7 @@ const EnvGroupDashboard = (props: PropsType) => {
 
           <EnvGroupList
             currentCluster={props.currentCluster}
-            namespace={state.namespace}
+            namespace={currentProject.capi_provisioner_enabled ? "default" : state.namespace}
             sortType={state.sortType}
             setExpandedEnvGroup={setExpandedEnvGroup}
           />

dashboard/src/main/home/cluster-dashboard/jobs/JobDashboard.tsx

@@ -36,7 +36,7 @@ const JobDashboard: React.FC<Props> = ({
   sortType,
   ...props
 }) => {
-  const { currentCluster } = useContext(Context);
+  const { currentProject, currentCluster } = useContext(Context);
   const [lastRunStatus, setLastRunStatus] = useState("all" as JobStatusType);
   const [showRuns, setShowRuns] = useState(false);
   const [selectedTag, setSelectedTag] = useState("none");
@@ -59,15 +59,17 @@ const JobDashboard: React.FC<Props> = ({
                 lastRunStatus={lastRunStatus}
                 setLastRunStatus={setLastRunStatus}
               />
-              <NamespaceSelector
-                setNamespace={(x) => {
-                  setNamespace(x);
-                  pushQueryParams(props, {
-                    namespace: x || "ALL",
-                  });
-                }}
-                namespace={namespace}
-              />
+              {!currentProject.capi_provisioner_enabled && (
+                <NamespaceSelector
+                  setNamespace={(x) => {
+                    setNamespace(x);
+                    pushQueryParams(props, {
+                      namespace: x || "ALL",
+                    });
+                  }}
+                  namespace={namespace}
+                />
+              )}
               <TagFilter
                 onSelect={setSelectedTag}
               />
@@ -115,7 +117,7 @@ const JobDashboard: React.FC<Props> = ({
               currentView={currentView}
               currentCluster={currentCluster}
               lastRunStatus={lastRunStatus}
-              namespace={namespace}
+              namespace={currentProject.capi_provisioner_enabled ? "default" : namespace}
               sortType={sortType}
               selectedTag={selectedTag}
             />

dashboard/src/main/home/launch/launch-flow/SettingsPage.tsx

@@ -134,9 +134,9 @@ class SettingsPage extends Component<PropsType, StateType> {
       } = this.props;
       return (
         <FadeWrapper>
-          <Heading>Additional settings</Heading>
+          <Heading>Application settings</Heading>
           <Helper>
-            Configure additional settings for this template. (Optional)
+            Configure application settings for this template. (Optional)
           </Helper>
           <PorterFormWrapper
             formData={form}
@@ -239,6 +239,7 @@ class SettingsPage extends Component<PropsType, StateType> {
 
   render() {
     let { selectedCluster } = this.state;
+    let { currentProject } = this.context;
 
     let { selectedNamespace, setSelectedNamespace } = this.props;
 
@@ -247,50 +248,53 @@ class SettingsPage extends Component<PropsType, StateType> {
         <StyledSettingsPage>
           {this.renderHeaderSection()}
           {this.props.isCloning && this.getNameInput()}
-
-          <Heading>Destination</Heading>
-          <Helper>
-            Specify the cluster and namespace you would like to deploy your
-            application to.
-          </Helper>
-          <ClusterSection>
-            <ClusterLabel>
-              <i className="material-icons">device_hub</i>Cluster
-            </ClusterLabel>
-            <Selector
-              activeValue={selectedCluster}
-              setActiveValue={(cluster: string) => {
-                this.context.setCurrentCluster(this.state.clusterMap[cluster]);
-                this.updateNamespaces(this.state.clusterMap[cluster].id);
-                this.setState({
-                  selectedCluster: cluster,
-                });
-              }}
-              options={this.state.clusterOptions}
-              width="250px"
-              dropdownWidth="335px"
-              closeOverlay={true}
-            />
-            <NamespaceLabel>
-              <i className="material-icons">view_list</i>Namespace
-            </NamespaceLabel>
-            <Selector
-              key={"namespace"}
-              refreshOptions={() => {
-                this.updateNamespaces(this.context.currentCluster.id);
-              }}
-              addButton={this.props.isAuthorized("namespace", "", [
-                "get",
-                "create",
-              ])}
-              activeValue={selectedNamespace}
-              setActiveValue={setSelectedNamespace}
-              options={this.state.namespaceOptions}
-              width="250px"
-              dropdownWidth="335px"
-              closeOverlay={true}
-            />
-          </ClusterSection>
+          {!currentProject.capi_provisioner_enabled && (
+            <>
+              <Heading>Destination</Heading>
+              <Helper>
+                Specify the cluster and namespace you would like to deploy your
+                application to.
+              </Helper>
+              <ClusterSection>
+                <ClusterLabel>
+                  <i className="material-icons">device_hub</i>Cluster
+                </ClusterLabel>
+                <Selector
+                  activeValue={selectedCluster}
+                  setActiveValue={(cluster: string) => {
+                    this.context.setCurrentCluster(this.state.clusterMap[cluster]);
+                    this.updateNamespaces(this.state.clusterMap[cluster].id);
+                    this.setState({
+                      selectedCluster: cluster,
+                    });
+                  }}
+                  options={this.state.clusterOptions}
+                  width="250px"
+                  dropdownWidth="335px"
+                  closeOverlay={true}
+                />
+                <NamespaceLabel>
+                  <i className="material-icons">view_list</i>Namespace
+                </NamespaceLabel>
+                <Selector
+                  key={"namespace"}
+                  refreshOptions={() => {
+                    this.updateNamespaces(this.context.currentCluster.id);
+                  }}
+                  addButton={this.props.isAuthorized("namespace", "", [
+                    "get",
+                    "create",
+                  ])}
+                  activeValue={selectedNamespace}
+                  setActiveValue={setSelectedNamespace}
+                  options={this.state.namespaceOptions}
+                  width="250px"
+                  dropdownWidth="335px"
+                  closeOverlay={true}
+                />
+              </ClusterSection>
+            </>
+          )}
           {this.renderSettingsRegion()}
           {this.props.fullActionConfig?.git_repo &&
             this.props.fullActionConfig?.kind === "github" && (

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

@@ -3,8 +3,8 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { ClusterType, ProjectType } from "shared/types";
 import { Tooltip } from "@material-ui/core";
-import settings from "assets/settings.svg";
 
+import settings from "assets/settings.svg";
 import monojob from "assets/monojob.png";
 import monoweb from "assets/monoweb.png";
 import sliders from "assets/sliders.svg";

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

@@ -6,6 +6,12 @@ import { pushFiltered } from "shared/routing";
 import { Context } from "shared/Context";
 import { ClusterType } from "shared/types";
 import { ClusterSection } from "./ClusterSection";
+import SidebarLink from "./SidebarLink";
+
+import settings from "assets/settings.svg";
+import monojob from "assets/monojob.png";
+import monoweb from "assets/monoweb.png";
+import sliders from "assets/sliders.svg";
 
 import { RouteComponentProps, withRouter } from "react-router";
 
@@ -137,7 +143,11 @@ class Clusters extends Component<PropsType, StateType> {
     let { clusters } = this.state;
     let { currentCluster, setCurrentCluster, currentProject } = this.context;
 
-    if (clusters.length > 0 && currentCluster) {
+    if (
+      clusters.length > 0 &&
+      currentCluster &&
+      !currentProject.capi_provisioner_enabled
+    ) {
       clusters.sort((a, b) => a.id - b.id);
 
       return clusters.map((cluster: ClusterType, i: number) => {
@@ -158,6 +168,76 @@ class Clusters extends Component<PropsType, StateType> {
           />
         );
       });
+    } else if (currentProject.capi_provisioner_enabled) {
+      const cluster = clusters[0];
+      return (
+        <>
+          <NavButton
+            path="/applications"
+            targetClusterName={cluster?.name}
+            active={
+              currentCluster?.id === cluster?.id &&
+              window.location.pathname.startsWith("/applications")
+            }
+          >
+            <Img src={monoweb} />
+            Applications
+          </NavButton>
+          <NavButton
+            path="/jobs"
+            targetClusterName={cluster?.name}
+            active={
+              currentCluster?.id === cluster?.id &&
+              window.location.pathname.startsWith("/jobs")
+            }
+          >
+            <Img src={monojob} />
+            Jobs
+          </NavButton>
+          <NavButton
+            path="/env-groups"
+            targetClusterName={cluster?.name}
+            active={
+              currentCluster?.id === cluster?.id &&
+              window.location.pathname.startsWith("/env-groups")
+            }
+          >
+            <Img src={sliders} />
+            Env groups
+          </NavButton>
+          {currentCluster?.preview_envs_enabled && (
+            <NavButton
+              path="/preview-environments"
+              targetClusterName={cluster?.name}
+              active={
+                currentCluster?.id === cluster.id &&
+                window.location.pathname.startsWith("/preview-environments")
+              }
+            >
+              <InlineSVGWrapper
+                id="Flat"
+                fill="#FFFFFF"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 256 256"
+              >
+                <path d="M103.99951,68a36,36,0,1,0-44,35.0929v49.8142a36,36,0,1,0,16,0V103.0929A36.05516,36.05516,0,0,0,103.99951,68Zm-56,0a20,20,0,1,1,20,20A20.0226,20.0226,0,0,1,47.99951,68Zm40,120a20,20,0,1,1-20-20A20.0226,20.0226,0,0,1,87.99951,188ZM196.002,152.907l-.00146-33.02563a55.63508,55.63508,0,0,0-16.40137-39.59619L155.31348,56h20.686a8,8,0,0,0,0-16h-40c-.02978,0-.05859.00415-.08838.00446-.2334.00256-.46631.01245-.69824.03527-.12891.01258-.25391.03632-.38086.05494-.13135.01928-.26318.03424-.39355.06-.14014.02778-.27686.06611-.41455.10114-.11475.02924-.23047.05426-.34424.08862-.13428.04059-.26367.0907-.395.13806-.11524.04151-.231.07929-.34473.12629-.12109.05011-.23681.10876-.35449.16455-.11914.05621-.23926.10907-.356.17144-.11133.0597-.21728.12757-.32519.1922-.11621.06928-.23389.13483-.34668.21051-.11719.07831-.227.16553-.33985.24976-.09668.07227-.1958.1394-.28955.21655-.18652.1529-.36426.31531-.53564.48413-.01612.01593-.03418.02918-.05029.04529-.02051.02051-.0376.04321-.05762.06391-.16358.16711-.32178.33941-.47022.52032-.083.10059-.15527.20648-.23193.31006-.07861.10571-.16064.20862-.23438.3183-.08056.12072-.15087.24591-.2246.36993-.05958.1-.12208.19757-.17725.30036-.06787.12591-.125.25531-.18506.384-.05078.1084-.10547.21466-.15137.32568-.05127.12463-.09326.25189-.13867.37848-.04248.11987-.08887.238-.126.36047-.03857.12775-.06738.25757-.09912.38678-.03125.124-.06591.24622-.0913.37244-.02979.15088-.04786.30328-.06934.45544-.01465.10645-.03516.21094-.0459.31867q-.03955.39752-.04.79706V88a8,8,0,0,0,16,0V67.31378l24.28516,24.28485a39.73874,39.73874,0,0,1,11.71582,28.28321l.00146,33.02533a36.00007,36.00007,0,1,0,16-.00019ZM188.00244,208a20,20,0,1,1,20-20A20.0226,20.0226,0,0,1,188.00244,208Z" />
+              </InlineSVGWrapper>
+              Preview envs
+            </NavButton>
+          )}
+          <NavButton
+            path={"/cluster-dashboard"}
+            targetClusterName={cluster?.name}
+            active={
+              currentCluster?.id === cluster?.id &&
+              window.location.pathname.startsWith("/cluster-dashboard")
+            }
+          >
+            <Img enlarge={true} src={settings} />
+            Infra settings
+          </NavButton>
+        </>
+      );
     }
 
     return (
@@ -180,6 +260,26 @@ Clusters.contextType = Context;
 
 export default withRouter(Clusters);
 
+const InlineSVGWrapper = styled.svg`
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+  padding-left: 0;
+
+  > path {
+    fill: #ffffff;
+  }
+`;
+
+const Img = styled.img<{ enlarge?: boolean }>`
+  padding: ${(props) => (props.enlarge ? "0 0 0 1px" : "4px")};
+  height: 22px;
+  width: 22px;
+  padding-top: 4px;
+  border-radius: 3px;
+  margin-right: 8px;
+`;
+
 const Plus = styled.div`
   margin-right: 10px;
   font-size: 15px;
@@ -205,3 +305,32 @@ const InitializeButton = styled.div`
     background: #ffffff22;
   }
 `;
+
+const NavButton = styled(SidebarLink)`
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  position: relative;
+  text-decoration: none;
+  height: 34px;
+  margin: 5px 15px;
+  padding: 0 30px 2px 8px;
+  font-size: 13px;
+  font-family: "Work Sans", sans-serif;
+  color: #ffffff;
+  cursor: ${(props: { disabled?: boolean }) =>
+    props.disabled ? "not-allowed" : "pointer"};
+
+  background: ${(props: any) => (props.active ? "#ffffff11" : "")};
+
+  :hover {
+    background: ${(props: any) => (props.active ? "#ffffff11" : "#ffffff08")};
+  }
+
+  > i {
+    font-size: 20px;
+    padding-top: 4px;
+    border-radius: 3px;
+    margin-right: 10px;
+  }
+`;

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

@@ -45,7 +45,7 @@ class ProjectSection extends Component<PropsType, StateType> {
   };
 
   renderOptionList = () => {
-    let { setCurrentProject } = this.context;
+    let { setCurrentProject, setCurrentCluster } = this.context;
     return this.props.projects.map((project: ProjectType, i: number) => {
       return (
         <Option
@@ -53,9 +53,10 @@ class ProjectSection extends Component<PropsType, StateType> {
           selected={project.name === this.props.currentProject.name}
           onClick={() => {
             this.setState({ expanded: false });
-            setCurrentProject(project, () =>
-              pushFiltered(this.props, "/dashboard", ["project_id"])
-            );
+            setCurrentCluster(null);
+            setCurrentProject(project, () => {
+              pushFiltered(this.props, "/dashboard", ["project_id"]);
+            });
           }}
         >
           <ProjectIcon>

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

@@ -150,7 +150,13 @@ class Sidebar extends Component<PropsType, StateType> {
 
           {this.context.hasFinishedOnboarding && (
             <>
-              <SidebarLabel>Clusters</SidebarLabel>
+              <SidebarLabel>
+                {currentProject.capi_provisioner_enabled ? (
+                  "Your team"
+                ) : (
+                  "Clusters"
+                )}
+              </SidebarLabel>
               <Clusters
                 setWelcome={this.props.setWelcome}
                 currentView={currentView}