From 0aec9b3e0695f1dc490edbbe3547a4195c8aa74f Mon Sep 17 00:00:00 2001 From: Feroze Mohideen Date: Tue, 5 Mar 2024 09:45:06 -0500 Subject: [PATCH] properly hide env group and infra tabs for sandbox (#4373) --- .../main/home/env-dashboard/EnvDashboard.tsx | 183 ++++++++++-------- .../ClusterDashboard.tsx | 32 ++- 2 files changed, 128 insertions(+), 87 deletions(-) diff --git a/dashboard/src/main/home/env-dashboard/EnvDashboard.tsx b/dashboard/src/main/home/env-dashboard/EnvDashboard.tsx index 43fd8eeca1..02f5a61c2e 100644 --- a/dashboard/src/main/home/env-dashboard/EnvDashboard.tsx +++ b/dashboard/src/main/home/env-dashboard/EnvDashboard.tsx @@ -1,36 +1,37 @@ -import React, { useContext, useEffect, useState, useMemo } from "react"; +import React, { useContext, useEffect, useMemo, useState } from "react"; import _ from "lodash"; -import styled from "styled-components"; -import { Link } from "react-router-dom"; import { withRouter, type RouteComponentProps } from "react-router"; +import { Link } from "react-router-dom"; +import styled from "styled-components"; + +import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder"; +import Loading from "components/Loading"; +import Button from "components/porter/Button"; +import Container from "components/porter/Container"; +import DashboardPlaceholder from "components/porter/DashboardPlaceholder"; +import Fieldset from "components/porter/Fieldset"; +import Image from "components/porter/Image"; +import SearchBar from "components/porter/SearchBar"; +import ShowIntercomButton from "components/porter/ShowIntercomButton"; +import Spacer from "components/porter/Spacer"; +import Text from "components/porter/Text"; +import Toggle from "components/porter/Toggle"; +import DashboardHeader from "main/home/cluster-dashboard/DashboardHeader"; -import { Context } from "shared/Context"; import api from "shared/api"; +import { withAuth, type WithAuthProps } from "shared/auth/AuthorizationHoc"; +import { Context } from "shared/Context"; import { search } from "shared/search"; import { readableDate } from "shared/string_utils"; -import { withAuth, type WithAuthProps } from "shared/auth/AuthorizationHoc"; - +import doppler from "assets/doppler.png"; +import envGroupGrad from "assets/env-group-grad.svg"; import grid from "assets/grid.png"; +import key from "assets/key.svg"; import list from "assets/list.png"; import notFound from "assets/not-found.png"; import time from "assets/time.png"; -import key from "assets/key.svg"; -import doppler from "assets/doppler.png"; -import envGroupGrad from "assets/env-group-grad.svg"; -import DashboardHeader from "main/home/cluster-dashboard/DashboardHeader"; -import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder"; -import Spacer from "components/porter/Spacer"; -import Loading from "components/Loading"; -import DashboardPlaceholder from "components/porter/DashboardPlaceholder"; -import Text from "components/porter/Text"; -import Button from "components/porter/Button"; -import Container from "components/porter/Container"; -import Image from "components/porter/Image"; -import SearchBar from "components/porter/SearchBar"; -import Toggle from "components/porter/Toggle"; -import Fieldset from "components/porter/Fieldset"; -import {envGroupPath} from "../../../shared/util"; +import { envGroupPath } from "../../../shared/util"; type Props = RouteComponentProps & WithAuthProps; @@ -79,8 +80,30 @@ const EnvDashboard: React.FC = (props) => { }, [currentProject, currentCluster]); const renderContents = (): React.ReactNode => { + if (currentProject?.sandbox_enabled) { + return ( + + + Environment groups are not enabled for sandbox users + + + + Eject to your own cloud account to enable environment groups. + + + + Request ejection + + + ); + } + if (currentCluster?.status === "UPDATING_UNAVAILABLE") { - return + return ; } if (!isLoading && (!envGroups || envGroups.length === 0)) { @@ -88,13 +111,12 @@ const EnvDashboard: React.FC = (props) => { No environment groups found - Get started by creating an environment group. + + Get started by creating an environment group. + - - ) + ); } const isAuthorizedToAdd = props.isAuthorized("env_group", "", [ @@ -124,25 +146,17 @@ const EnvDashboard: React.FC = (props) => { + ), - value: "grid" + value: "grid", }, - { + { label: ( - + ), - value: "list" + value: "list", }, ]} active={view} @@ -157,9 +171,7 @@ const EnvDashboard: React.FC = (props) => { {isAuthorizedToAdd && ( - @@ -170,11 +182,7 @@ const EnvDashboard: React.FC = (props) => { {!isLoading && filteredEnvGroups.length === 0 ? (
- + No matching environment groups were found. @@ -185,46 +193,48 @@ const EnvDashboard: React.FC = (props) => { ) : view === "grid" ? ( - {(filteredEnvGroups ?? []).map( - (envGroup, i: number) => { - return ( - - - - - {envGroup.name} - - - - - - {readableDate(envGroup.created_at)} - - - - ); - } - )} + {(filteredEnvGroups ?? []).map((envGroup, i: number) => { + return ( + + + + + {envGroup.name} + + + + + + {readableDate(envGroup.created_at)} + + + + ); + })} ) : ( {(filteredEnvGroups ?? []).map((envGroup: any, i: number) => { return ( - + - - + + {envGroup.name} - + {readableDate(envGroup.created_at)} @@ -254,12 +264,13 @@ const EnvDashboard: React.FC = (props) => { export default withRouter(withAuth(EnvDashboard)); -const Row = styled(Link) <{ isAtBottom?: boolean }>` +const Row = styled(Link)<{ isAtBottom?: boolean }>` cursor: pointer; display: block; padding: 15px; - border-bottom: ${props => props.isAtBottom ? "none" : "1px solid #494b4f"}; - background: ${props => props.theme.clickable.bg}; + border-bottom: ${(props) => + props.isAtBottom ? "none" : "1px solid #494b4f"}; + background: ${(props) => props.theme.clickable.bg}; position: relative; border: 1px solid #494b4f; border-radius: 5px; @@ -278,10 +289,10 @@ const Block = styled(Link)` justify-content: space-between; cursor: pointer; padding: 20px; - color: ${props => props.theme.text.primary}; + color: ${(props) => props.theme.text.primary}; position: relative; border-radius: 5px; - background: ${props => props.theme.clickable.bg}; + background: ${(props) => props.theme.clickable.bg}; border: 1px solid #494b4f; transition: all 0.2s; :hover { @@ -328,4 +339,4 @@ const DashboardWrapper = styled.div` opacity: 1; } } -`; \ No newline at end of file +`; diff --git a/dashboard/src/main/home/infrastructure-dashboard/ClusterDashboard.tsx b/dashboard/src/main/home/infrastructure-dashboard/ClusterDashboard.tsx index 3ce2477fa0..dfb3f714f8 100644 --- a/dashboard/src/main/home/infrastructure-dashboard/ClusterDashboard.tsx +++ b/dashboard/src/main/home/infrastructure-dashboard/ClusterDashboard.tsx @@ -6,12 +6,14 @@ import styled from "styled-components"; import Loading from "components/Loading"; import Button from "components/porter/Button"; import Container from "components/porter/Container"; +import DashboardPlaceholder from "components/porter/DashboardPlaceholder"; import Fieldset from "components/porter/Fieldset"; import Icon from "components/porter/Icon"; import Image from "components/porter/Image"; import PorterLink from "components/porter/Link"; import SearchBar from "components/porter/SearchBar"; import Select from "components/porter/Select"; +import ShowIntercomButton from "components/porter/ShowIntercomButton"; import Spacer from "components/porter/Spacer"; import StatusDot from "components/porter/StatusDot"; import Tag from "components/porter/Tag"; @@ -46,7 +48,7 @@ const ClusterDashboard: React.FC = () => { >("all"); const { clusters, isLoading } = useClusterList(); - const { user } = useContext(Context); + const { user, currentProject } = useContext(Context); const filteredClusters = useMemo(() => { const filteredBySearch = search(clusters, searchValue, { @@ -68,6 +70,34 @@ const ClusterDashboard: React.FC = () => { return filteredByProvider; }, [clusters, searchValue, providerFilter]); + if (currentProject?.sandbox_enabled) { + return ( + + + + Infrastructure is not enabled for sandbox users + + + Eject to your own cloud account to enable infrastructure. + + + + Request ejection + + + + ); + } + return (