Global locks (#4236)

dashboard/src/components/porter/DashboardPlaceholder.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
-import placeholder from "assets/placeholder.png";
+import placeholder from "assets/placeholder.svg";
 
 type Props = {
   children: React.ReactNode;

dashboard/src/components/porter/ShowIntercomButton.tsx

@@ -4,14 +4,16 @@ import { useIntercom } from "lib/hooks/useIntercom";
 
 import chat from "assets/chat.svg";
 
-import Button from "./Button";
+import Button, { type ButtonProps } from "./Button";
 
-type Props = {
+type Props = Omit<ButtonProps, "children"> & {
   message: string;
+  children?: React.ReactNode;
 };
-const ShowIntercomButton: React.FC<Props> = ({ message }) => {
-  const { showIntercomWithMessage } = useIntercom();
 
+const ShowIntercomButton: React.FC<Props> = (props) => {
+  const { showIntercomWithMessage } = useIntercom();
+  const { message, children } = props;
   return (
     <Button
       onClick={() => {
@@ -20,9 +22,10 @@ const ShowIntercomButton: React.FC<Props> = ({ message }) => {
           delaySeconds: 0,
         });
       }}
+      {...props}
     >
       <img src={chat} style={{ width: "15px", marginRight: "10px" }} />
-      Talk to support
+      {children || "Talk to support"}
     </Button>
   );
 };

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

@@ -16,6 +16,7 @@ import { Context } from "shared/Context";
 import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
 import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
 import Text from "components/porter/Text";
+import ShowIntercomButton from "components/porter/ShowIntercomButton";
 
 const tabs = ["environments", "config"] as const;
 export type ValidTab = (typeof tabs)[number];
@@ -53,23 +54,37 @@ const PreviewEnvs: React.FC = () => {
         <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>
+          <Spacer y={1} />
+          <ShowIntercomButton
+            alt
+            message="I would like to eject to my own cloud account"
+            height="35px"
+          >
+            Request ejection
+          </ShowIntercomButton>
         </DashboardPlaceholder>
       );
     }
 
-    if (!currentProject?.db_enabled) {
+    if (!currentProject?.preview_envs_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 support@porter.run to enable preview apps on your project.
+            Reach out to the Porter team to enable preview apps on your project.
           </Text>
+          <Spacer y={1} />
+          <ShowIntercomButton
+            alt
+            message="I would like to enable preview apps on my project"
+            height="35px"
+          >
+            Request to enable
+          </ShowIntercomButton>
         </DashboardPlaceholder>
       );
     }

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

@@ -16,6 +16,7 @@ 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);
@@ -44,19 +45,33 @@ const ComplianceDashboard: React.FC = () => {
           <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>
+            <Spacer y={1} />
+            <ShowIntercomButton
+              alt
+              message="I would like to eject to my own cloud account"
+              height="35px"
+            >
+              Request ejection
+            </ShowIntercomButton>
           </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 support@porter.run 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
+              alt
+              message="I would like to enable the compliance dashboard on my project"
+              height="35px"
+            >
+              Request to enable
+            </ShowIntercomButton>
           </DashboardPlaceholder>
         ) : (
           <>

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

@@ -116,10 +116,17 @@ const DatabaseDashboard: React.FC = () => {
         <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>
+          <Spacer y={1} />
+          <ShowIntercomButton
+            alt
+            message="I would like to eject to my own cloud account"
+            height="35px"
+          >
+            Request ejection
+          </ShowIntercomButton>
         </DashboardPlaceholder>
       );
     }
@@ -127,12 +134,19 @@ const DatabaseDashboard: React.FC = () => {
     if (!currentProject?.db_enabled) {
       return (
         <DashboardPlaceholder>
-          <Text size={16}>Databases are not enabled for this project</Text>
+          <Text size={16}>Datastores are not enabled for this project</Text>
           <Spacer y={0.5} />
-
           <Text color={"helper"}>
-            Reach out to support@porter.run to enable managed databases on your project.
+            Reach out to the Porter team to enable managed datastores on your project.
           </Text>
+          <Spacer y={1} />
+          <ShowIntercomButton
+            alt
+            message="I would like to enable managed datastores on my project"
+            height="35px"
+          >
+            Request to enable
+          </ShowIntercomButton>
         </DashboardPlaceholder>
       );
     }