preview disabled tabs (#4235)

Author: jusrhee

dashboard/src/assets/lock.svg

@@ -580,8 +580,7 @@ const Home: React.FC<Props> = (props) => {
                   path={"/project-settings"}
                   render={() => <GuardedProjectSettings />}
                 />
-                {currentProject?.validate_apply_v2 &&
-                currentProject.preview_envs_enabled ? (
+                {currentProject?.validate_apply_v2 && (
                   <>
                     <Route exact path="/preview-environments/configure">
                       <SetupApp />
@@ -602,7 +601,7 @@ const Home: React.FC<Props> = (props) => {
                       <PreviewEnvs />
                     </Route>
                   </>
-                ) : null}
+                )}
                 <Route path={"*"} render={() => <LaunchWrapper />} />
               </Switch>
             </ViewWrapper>

dashboard/src/main/home/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import styled from "styled-components";
 import { match } from "ts-pattern";
 
@@ -12,17 +12,22 @@ import PullRequestIcon from "assets/pull_request_icon.svg";
 import DashboardHeader from "../../DashboardHeader";
 import { ConfigurableAppList } from "./ConfigurableAppList";
 import PreviewEnvGrid from "./PreviewEnvGrid";
+import { Context } from "shared/Context";
+import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
+import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
+import Text from "components/porter/Text";
 
 const tabs = ["environments", "config"] as const;
 export type ValidTab = (typeof tabs)[number];
 
 const PreviewEnvs: React.FC = () => {
+  const { currentProject, currentCluster } = useContext(Context);
   const [tab, setTab] = useState<ValidTab>("environments");
 
   const { deploymentTargetList, isDeploymentTargetListLoading } =
     useDeploymentTargetList({ preview: true });
 
-  const renderContents = (): JSX.Element => {
+  const renderTab = (): JSX.Element => {
     if (isDeploymentTargetListLoading) {
       return <Loading offset="-150px" />;
     }
@@ -38,30 +43,69 @@ const PreviewEnvs: React.FC = () => {
       .exhaustive();
   };
 
+  const renderContents = (): JSX.Element => {
+    if (currentCluster?.status === "UPDATING_UNAVAILABLE") {
+      return <ClusterProvisioningPlaceholder />;
+    }
+
+    if (currentProject?.sandbox_enabled) {
+      return (
+        <DashboardPlaceholder>
+          <Text size={16}>Preview apps are not enabled for sandbox users</Text>
+          <Spacer y={0.5} />
+
+          <Text color={"helper"}>
+            Eject to your own cloud account to enable preview apps.
+          </Text>
+        </DashboardPlaceholder>
+      );
+    }
+
+    if (!currentProject?.db_enabled) {
+      return (
+        <DashboardPlaceholder>
+          <Text size={16}>Preview apps are not enabled for this project</Text>
+          <Spacer y={0.5} />
+
+          <Text color={"helper"}>
+            Reach out to [email protected] to enable preview apps on your project.
+          </Text>
+        </DashboardPlaceholder>
+      );
+    }
+
+    return (
+      <>
+        <TabSelector
+          noBuffer
+          options={[
+            { label: "Existing Previews", value: "environments" },
+            { label: "Preview Templates", value: "config" },
+          ]}
+          currentTab={tab}
+          setCurrentTab={(tab: string) => {
+            if (tab === "environments") {
+              setTab("environments");
+              return;
+            }
+            setTab("config");
+          }}
+        />
+        <Spacer y={1} />
+        {renderTab()}
+      </>
+    )
+  }
+
   return (
     <StyledAppDashboard>
       <DashboardHeader
         image={PullRequestIcon}
-        title="Preview Apps"
+        title="Preview apps"
+        capitalize={false}
         description="Preview apps are created for each pull request. They are automatically deleted when the pull request is closed."
         disableLineBreak
       />
-      <TabSelector
-        noBuffer
-        options={[
-          { label: "Existing Previews", value: "environments" },
-          { label: "Preview Templates", value: "config" },
-        ]}
-        currentTab={tab}
-        setCurrentTab={(tab: string) => {
-          if (tab === "environments") {
-            setTab("environments");
-            return;
-          }
-          setTab("config");
-        }}
-      />
-      <Spacer y={1} />
       {renderContents()}
       <Spacer y={5} />
     </StyledAppDashboard>

dashboard/src/main/home/cluster-dashboard/preview-environments/v2/PreviewEnvs.tsx

@@ -14,6 +14,8 @@ import { ConfigSelectors } from "./ConfigSelectors";
 import { ProfileHeader } from "./ProfileHeader";
 import { SOC2CostConsent } from "./SOC2CostConsent";
 import { VendorChecksList } from "./VendorChecksList";
+import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
+import Text from "components/porter/Text";
 
 const ComplianceDashboard: React.FC = () => {
   const { currentProject, currentCluster } = useContext(Context);
@@ -38,6 +40,24 @@ const ComplianceDashboard: React.FC = () => {
         />
         {currentCluster?.status === "UPDATING_UNAVAILABLE" ? (
           <ClusterProvisioningPlaceholder />
+        ) : currentProject?.sandbox_enabled ? (
+          <DashboardPlaceholder>
+            <Text size={16}>Compliance is not enabled for sandbox users</Text>
+            <Spacer y={0.5} />
+  
+            <Text color={"helper"}>
+              Eject to your own cloud account to enable the Compliance dashboard.
+            </Text>
+          </DashboardPlaceholder>
+        ) : !currentProject?.soc2_controls_enabled ? (
+          <DashboardPlaceholder>
+            <Text size={16}>Compliance is not enabled for this project</Text>
+            <Spacer y={0.5} />
+  
+            <Text color={"helper"}>
+              Reach out to [email protected] to enable the Compliance dashboard on your project.
+            </Text>
+          </DashboardPlaceholder>
         ) : (
           <>
             <ConfigSelectors />

dashboard/src/main/home/compliance-dashboard/ComplianceDashboard.tsx

@@ -37,7 +37,7 @@ import { getDatastoreIcon, getEngineIcon } from "./icons";
 import EngineTag from "./tags/EngineTag";
 
 const DatabaseDashboard: React.FC = () => {
-  const { currentCluster } = useContext(Context);
+  const { currentProject, currentCluster } = useContext(Context);
   const { clusters, isLoading: isLoadingClusters } = useClusterList();
 
   const [searchValue, setSearchValue] = useState("");
@@ -111,6 +111,32 @@ const DatabaseDashboard: React.FC = () => {
       return <ClusterProvisioningPlaceholder />;
     }
 
+    if (currentProject?.sandbox_enabled) {
+      return (
+        <DashboardPlaceholder>
+          <Text size={16}>Databases are not enabled for sandbox users</Text>
+          <Spacer y={0.5} />
+
+          <Text color={"helper"}>
+            Eject to your own cloud account to enable managed databases.
+          </Text>
+        </DashboardPlaceholder>
+      );
+    }
+
+    if (!currentProject?.db_enabled) {
+      return (
+        <DashboardPlaceholder>
+          <Text size={16}>Databases are not enabled for this project</Text>
+          <Spacer y={0.5} />
+
+          <Text color={"helper"}>
+            Reach out to [email protected] to enable managed databases on your project.
+          </Text>
+        </DashboardPlaceholder>
+      );
+    }
+
     if (datastores.length === 0) {
       return (
         <DashboardPlaceholder>

dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx

@@ -27,6 +27,8 @@ import { withAuth, type WithAuthProps } from "shared/auth/AuthorizationHoc";
 import SidebarLink from "./SidebarLink";
 import { overrideInfraTabEnabled } from "utils/infrastructure";
 import ClusterListContainer from "./ClusterListContainer";
+import lock from "assets/lock.svg";
+import Image from "components/porter/Image";
 
 type PropsType = RouteComponentProps &
   WithAuthProps & {
@@ -286,15 +288,19 @@ class Sidebar extends Component<PropsType, StateType> {
               <Img src={applications} />
               Applications
             </NavButton>
-            {currentProject.db_enabled && (
-              <NavButton
-                path="/datastores"
-                active={window.location.pathname.startsWith("/apps")}
-              >
-                <Img src={database} />
-                Datastores
-              </NavButton>
-            )}
+            <NavButton
+              path="/datastores"
+              active={window.location.pathname.startsWith("/apps")}
+            >
+              <Img src={database} />
+              Datastores
+              {(currentProject.sandbox_enabled || !currentProject.db_enabled) && (
+                <Container row>
+                  <Spacer inline width="15px" />
+                  <Image size={15} src={lock} />
+                </Container>
+              )}
+            </NavButton>
             <NavButton
               path="/addons"
               active={window.location.pathname.startsWith("/addons")}
@@ -325,21 +331,29 @@ class Sidebar extends Component<PropsType, StateType> {
                 </NavButton>
               )}
 
-            {currentProject.preview_envs_enabled && (
-              <NavButton path="/preview-environments">
-                <Img src={pr_icon} />
-                Preview apps
-              </NavButton>
+            <NavButton path="/preview-environments">
+              <Img src={pr_icon} />
+              Preview apps
+              {(currentProject.sandbox_enabled || !currentProject.preview_envs_enabled) && (
+              <Container row>
+                <Spacer inline width="15px" />
+                <Image size={15} src={lock} />
+              </Container>
             )}
+            </NavButton>
 
-            {currentProject?.soc2_controls_enabled && (
-              <NavButton 
-                path="/compliance"
-              >
-                <Img src={compliance} />
-                Compliance
-              </NavButton>
-            )}
+            <NavButton 
+              path="/compliance"
+            >
+              <Img src={compliance} />
+              Compliance
+              {(currentProject.sandbox_enabled || !currentProject.soc2_controls_enabled) && (
+                <Container row>
+                  <Spacer inline width="15px" />
+                  <Image size={15} src={lock} />
+                </Container>
+              )}
+            </NavButton>
 
             {this.props.isAuthorized("integrations", "", [
               "get",

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

@@ -333,6 +333,7 @@ export type ProjectType = {
   validate_apply_v2: boolean;
   managed_deployment_targets_enabled: boolean;
   aws_ack_auth_enabled: boolean;
+  sandbox_enabled: boolean;
   roles: Array<{
     id: number;
     kind: string;

dashboard/src/shared/types.tsx

@@ -1523,8 +1523,6 @@ github.com/pmezard/go-difflib v0.0.0-20151028094244-d8ed2627bdf0/go.mod h1:iKH77
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/polyfloyd/go-errorlint v0.0.0-20210722154253-910bb7978349/go.mod h1:wi9BfjxjF/bwiZ701TzmfKu6UKC357IOAtNr0Td0Lvw=
-github.com/porter-dev/api-contracts v0.2.97 h1:JXxg/b0R8hL2IurJAnSakRRSHx4zT9ZQDCqe1gvR0Uc=
-github.com/porter-dev/api-contracts v0.2.97/go.mod h1:fX6JmP5QuzxDLvqP3evFOTXjI4dHxsG0+VKNTjImZU8=
 github.com/porter-dev/api-contracts v0.2.98 h1:bfOmR9SfspEDkO72TF+YewGKvIpW9ZhcC6Nzpt1I9EI=
 github.com/porter-dev/api-contracts v0.2.98/go.mod h1:fX6JmP5QuzxDLvqP3evFOTXjI4dHxsG0+VKNTjImZU8=
 github.com/porter-dev/switchboard v0.0.3 h1:dBuYkiVLa5Ce7059d6qTe9a1C2XEORFEanhbtV92R+M=