account for multi cluster (#4202)

dashboard/src/components/porter/ShowIntercomButton.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { useIntercom } from "lib/hooks/useIntercom";
+
+import chat from "assets/chat.svg";
+
+import Button from "./Button";
+
+type Props = {
+  message: string;
+};
+const ShowIntercomButton: React.FC<Props> = ({ message }) => {
+  const { showIntercomWithMessage } = useIntercom();
+
+  return (
+    <Button
+      onClick={() => {
+        showIntercomWithMessage({
+          message,
+          delaySeconds: 0,
+        });
+      }}
+    >
+      <img src={chat} style={{ width: "15px", marginRight: "10px" }} />
+      Talk to support
+    </Button>
+  );
+};
+
+export default ShowIntercomButton;

dashboard/src/lib/hooks/useClusterList.ts

@@ -9,8 +9,14 @@ export const clusterValidator = z.object({
   id: z.number(),
   name: z.string(),
   vanity_name: z.string(),
+  cloud_provider: z.enum(["AWS", "GCP", "AZURE"]),
 });
 export type Cluster = z.infer<typeof clusterValidator>;
+export const isAWSCluster = (
+  cluster: Cluster
+): cluster is Cluster & { cloud_provider: "AWS" } => {
+  return cluster.cloud_provider === "AWS";
+};
 
 type TUseClusterList = {
   clusters: Array<z.infer<typeof clusterValidator>>;

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

@@ -13,12 +13,14 @@ 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 Text from "components/porter/Text";
 import Toggle from "components/porter/Toggle";
 import DashboardHeader from "main/home/cluster-dashboard/DashboardHeader";
 import { type ClientDatastore } from "lib/databases/types";
+import { isAWSCluster, useClusterList } from "lib/hooks/useClusterList";
 import { useDatastoreList } from "lib/hooks/useDatabaseList";
 
 import { Context } from "shared/Context";
@@ -36,6 +38,7 @@ import EngineTag from "./tags/EngineTag";
 
 const DatabaseDashboard: React.FC = () => {
   const { currentCluster } = useContext(Context);
+  const { clusters } = useClusterList();
 
   const [searchValue, setSearchValue] = useState("");
   const [view, setView] = useState<"grid" | "list">("grid");
@@ -78,6 +81,28 @@ const DatabaseDashboard: React.FC = () => {
   }, [datastores, searchValue, typeFilter, engineFilter]);
 
   const renderContents = (): JSX.Element => {
+    if (clusters.filter(isAWSCluster).length === 0) {
+      return (
+        <Fieldset>
+          <Text size={16}>Datastores are not supported for this project.</Text>
+          <Spacer y={0.5} />
+          <Text color="helper">
+            Datastores are only supported for projects with a provisioned AWS
+            cluster.
+          </Text>
+          <Spacer y={0.5} />
+          <Text color="helper">
+            To get started with datastores, you will need to create an AWS
+            cluster. Contact our team if you are interested in enabling
+            multi-cluster support.
+          </Text>
+          <Spacer y={0.5} />
+          <ShowIntercomButton
+            message={`I would like to enable multi-cluster support for my project.`}
+          />
+        </Fieldset>
+      );
+    }
     if (currentCluster?.status === "UPDATING_UNAVAILABLE") {
       return <ClusterProvisioningPlaceholder />;
     }

dashboard/src/main/home/database-dashboard/forms/DatabaseForm.tsx

@@ -13,7 +13,7 @@ import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import VerticalSteps from "components/porter/VerticalSteps";
 import { type DbFormData } from "lib/databases/types";
-import { useClusterList } from "lib/hooks/useClusterList";
+import { isAWSCluster, useClusterList } from "lib/hooks/useClusterList";
 import { useDatastoreList } from "lib/hooks/useDatabaseList";
 import { useDatastoreMethods } from "lib/hooks/useDatabaseMethods";
 import { useIntercom } from "lib/hooks/useIntercom";
@@ -38,6 +38,11 @@ const DatabaseForm: React.FC<Props> = ({
   const { clusters } = useClusterList();
   const { currentProject } = useContext(Context);
 
+  // only aws clusters supported right now
+  const awsClusters = useMemo(() => {
+    return clusters.filter(isAWSCluster);
+  }, [JSON.stringify(clusters)]);
+
   const {
     formState: { isSubmitting, errors, isValidating },
     handleSubmit,
@@ -84,10 +89,10 @@ const DatabaseForm: React.FC<Props> = ({
   }, [isSubmitting, submitErrorMessage, isValidating]);
 
   useEffect(() => {
-    if (clusters.length > 0) {
-      setValue("clusterId", clusters[0].id);
+    if (awsClusters.length > 0) {
+      setValue("clusterId", awsClusters[0].id);
     }
-  }, [JSON.stringify(clusters)]);
+  }, [JSON.stringify(awsClusters)]);
 
   return (
     <FormProvider {...form}>
@@ -115,7 +120,7 @@ const DatabaseForm: React.FC<Props> = ({
                   <Selector<string>
                     activeValue={chosenClusterId.toString()}
                     width="300px"
-                    options={clusters.map((c) => ({
+                    options={awsClusters.map((c) => ({
                       value: c.id.toString(),
                       label: c.vanity_name,
                       key: c.id.toString(),