update sandbox sidebar (#4431)

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

@@ -53,10 +53,11 @@ const PreviewEnvs: React.FC = () => {
     if (currentProject?.sandbox_enabled) {
       return (
         <DashboardPlaceholder>
-          <Text size={16}>Preview apps are not enabled for sandbox users</Text>
+          <Text size={16}>Preview apps are coming soon for sandbox users</Text>
           <Spacer y={0.5} />
           <Text color={"helper"}>
-            Eject to your own cloud account to enable preview apps.
+            You can also eject to your own cloud account to start using preview
+            apps.
           </Text>
           <Spacer y={1} />
           <ShowIntercomButton

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

@@ -2,7 +2,10 @@ import React, { useContext, useState } from "react";
 import styled from "styled-components";
 
 import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
+import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
+import ShowIntercomButton from "components/porter/ShowIntercomButton";
 import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
 import DashboardHeader from "main/home/cluster-dashboard/DashboardHeader";
 
 import { Context } from "shared/Context";
@@ -14,9 +17,6 @@ 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";
-import ShowIntercomButton from "components/porter/ShowIntercomButton";
 
 const ComplianceDashboard: React.FC = () => {
   const { currentProject, currentCluster } = useContext(Context);
@@ -43,10 +43,14 @@ const ComplianceDashboard: React.FC = () => {
           <ClusterProvisioningPlaceholder />
         ) : currentProject?.sandbox_enabled ? (
           <DashboardPlaceholder>
-            <Text size={16}>Compliance is not enabled for sandbox users</Text>
+            <Text size={16}>
+              Managed SOC 2 and HIPAA compliance are not enabled for sandbox
+              users
+            </Text>
             <Spacer y={0.5} />
             <Text color={"helper"}>
-              Eject to your own cloud account to enable the Compliance dashboard.
+              Eject to your own cloud account to enable the Compliance
+              dashboard.
             </Text>
             <Spacer y={1} />
             <ShowIntercomButton
@@ -62,7 +66,8 @@ const ComplianceDashboard: React.FC = () => {
             <Text size={16}>Compliance is not enabled for this project</Text>
             <Spacer y={0.5} />
             <Text color={"helper"}>
-            Reach out to the Porter team to enable the compliance dashboard on your project.
+              Reach out to the Porter team to enable the compliance dashboard on
+              your project.
             </Text>
             <Spacer y={1} />
             <ShowIntercomButton

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

@@ -87,10 +87,11 @@ const DatabaseDashboard: React.FC = () => {
     if (currentProject?.sandbox_enabled) {
       return (
         <DashboardPlaceholder>
-          <Text size={16}>Databases are not enabled for sandbox users</Text>
+          <Text size={16}>Datastores are coming soon for sandbox users</Text>
           <Spacer y={0.5} />
           <Text color={"helper"}>
-            Eject to your own cloud account to enable managed databases.
+            You can also eject to your own cloud account to start using managed
+            datastores.
           </Text>
           <Spacer y={1} />
           <ShowIntercomButton

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

@@ -314,77 +314,69 @@ class Sidebar extends Component<PropsType, StateType> {
                   <Img src={database} />
                   Datastores
                 </Container>
-                {(currentProject.sandbox_enabled ||
-                  !currentProject.db_enabled) && <Image size={15} src={lock} />}
               </Container>
             </NavButton>
-            <NavButton
-              path="/addons"
-              active={window.location.pathname.startsWith("/addons")}
-            >
-              <Container row spaced style={{ width: "100%" }}>
-                <Container row>
-                  <Img src={addOns} />
-                  Add-ons
+            {!currentProject.sandbox_enabled && (
+              <NavButton
+                path="/addons"
+                active={window.location.pathname.startsWith("/addons")}
+              >
+                <Container row spaced style={{ width: "100%" }}>
+                  <Container row>
+                    <Img src={addOns} />
+                    Add-ons
+                  </Container>
                 </Container>
-                {currentProject.sandbox_enabled && (
-                  <Image size={15} src={lock} />
-                )}
-              </Container>
-            </NavButton>
+              </NavButton>
+            )}
 
-            <NavButton
-              path={envGroupPath(currentProject, "")}
-              active={window.location.pathname.startsWith(
-                envGroupPath(currentProject, "")
-              )}
-            >
-              <Container row spaced style={{ width: "100%" }}>
-                <Container row>
-                  <Img src={sliders} />
-                  Env groups
-                </Container>
-                {currentProject.sandbox_enabled && (
-                  <Image size={15} src={lock} />
+            {!currentProject.sandbox_enabled && (
+              <NavButton
+                path={envGroupPath(currentProject, "")}
+                active={window.location.pathname.startsWith(
+                  envGroupPath(currentProject, "")
                 )}
-              </Container>
-            </NavButton>
-            <NavButton
-              path={
-                currentProject?.simplified_view_enabled &&
-                currentProject?.capi_provisioner_enabled
-                  ? "/infrastructure"
-                  : "/cluster-dashboard"
-              }
-              active={window.location.pathname.startsWith(
-                currentProject?.simplified_view_enabled &&
-                  currentProject?.capi_provisioner_enabled
-                  ? "/infrastructure"
-                  : "/cluster-dashboard"
-              )}
-            >
-              <Container row spaced style={{ width: "100%" }}>
-                <Container row>
-                  <Img src={infra} />
-                  Infrastructure
+              >
+                <Container row spaced style={{ width: "100%" }}>
+                  <Container row>
+                    <Img src={sliders} />
+                    Env groups
+                  </Container>
                 </Container>
-                {currentProject.sandbox_enabled && (
-                  <Image size={15} src={lock} />
+              </NavButton>
+            )}
+
+            {!currentProject.sandbox_enabled && (
+              <NavButton
+                path={
+                  currentProject?.simplified_view_enabled &&
+                  currentProject?.capi_provisioner_enabled
+                    ? "/infrastructure"
+                    : "/cluster-dashboard"
+                }
+                active={window.location.pathname.startsWith(
+                  currentProject?.simplified_view_enabled &&
+                    currentProject?.capi_provisioner_enabled
+                    ? "/infrastructure"
+                    : "/cluster-dashboard"
                 )}
-              </Container>
-            </NavButton>
+              >
+                <Container row spaced style={{ width: "100%" }}>
+                  <Container row>
+                    <Img src={infra} />
+                    Infrastructure
+                  </Container>
+                </Container>
+              </NavButton>
+            )}
+
             <NavButton path="/preview-environments">
               <Container row spaced style={{ width: "100%" }}>
                 <Container row>
                   <Img src={pr_icon} />
                   Preview apps
                 </Container>
-                {currentProject.sandbox_enabled ||
-                !currentProject.preview_envs_enabled ? (
-                  <Image size={15} src={lock} />
-                ) : (
-                  <Badge>Beta</Badge>
-                )}
+                {!currentProject.preview_envs_enabled && <Badge>Beta</Badge>}
               </Container>
             </NavButton>