unblock datastores tab on sandbox (#4627)

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

@@ -25,14 +25,13 @@ import { useDatastoreList } from "lib/hooks/useDatabaseList";
 import { Context } from "shared/Context";
 import { search } from "shared/search";
 import { readableDate } from "shared/string_utils";
-import engine from "assets/computer-chip.svg";
 import databaseGrad from "assets/database-grad.svg";
 import grid from "assets/grid.png";
 import list from "assets/list.png";
 import notFound from "assets/not-found.png";
 import time from "assets/time.png";
 
-import { getDatastoreIcon, getEngineIcon } from "./icons";
+import { DATASTORE_ENGINE_POSTGRES, DATASTORE_ENGINE_REDIS } from "./constants";
 import EngineTag from "./tags/EngineTag";
 
 const DatabaseDashboard: React.FC = () => {
@@ -40,12 +39,9 @@ const DatabaseDashboard: React.FC = () => {
 
   const [searchValue, setSearchValue] = useState("");
   const [view, setView] = useState<"grid" | "list">("grid");
-  const [typeFilter, setTypeFilter] = useState<"all" | "RDS" | "ELASTICACHE">(
+  const [typeFilter, setTypeFilter] = useState<"all" | "POSTGRES" | "REDIS">(
     "all"
   );
-  const [engineFilter, setEngineFilter] = useState<
-    "all" | "POSTGRES" | "AURORA-POSTGRES" | "REDIS"
-  >("all");
   const history = useHistory();
 
   const { datastores, isLoading } = useDatastoreList({
@@ -65,42 +61,14 @@ const DatabaseDashboard: React.FC = () => {
         if (typeFilter === "all") {
           return true;
         }
-        return datastore.type === typeFilter;
+        return datastore.template.highLevelType.name === typeFilter;
       }
     );
 
-    const filteredByEngine = filteredByDatastoreType.filter(
-      (datastore: ClientDatastore) => {
-        if (engineFilter === "all") {
-          return true;
-        }
-        return datastore.template.engine.name === engineFilter;
-      }
-    );
-
-    return filteredByEngine;
-  }, [datastores, searchValue, typeFilter, engineFilter]);
+    return filteredByDatastoreType;
+  }, [datastores, searchValue, typeFilter]);
 
   const renderContents = (): JSX.Element => {
-    if (currentProject?.sandbox_enabled) {
-      return (
-        <DashboardPlaceholder>
-          <Text size={16}>Datastores are coming soon to the Porter Cloud</Text>
-          <Spacer y={0.5} />
-          <Text color={"helper"}>
-            You can also eject to your own cloud account to start using managed
-            datastores immediately.
-          </Text>
-          <Spacer y={1} />
-          <PorterLink to="https://docs.porter.run/other/eject">
-            <Button alt height="35px">
-              Eject to AWS, Azure, or GCP
-            </Button>
-          </PorterLink>
-        </DashboardPlaceholder>
-      );
-    }
-
     if (!currentProject?.db_enabled) {
       return (
         <DashboardPlaceholder>
@@ -153,79 +121,40 @@ const DatabaseDashboard: React.FC = () => {
     return (
       <>
         <Container row spaced>
-          <Select
-            options={[
-              { value: "all", label: "All" },
-              {
-                value: "RDS",
-                label: "RDS",
-                icon: getDatastoreIcon("RDS"),
-              },
-              {
-                value: "ELASTICACHE",
-                label: "Elasticache",
-                icon: getDatastoreIcon("ELASTICACHE"),
-              },
-            ]}
-            value={typeFilter}
-            setValue={(value) => {
-              if (
-                value === "all" ||
-                value === "RDS" ||
-                value === "ELASTICACHE"
-              ) {
-                setTypeFilter(value);
-                setEngineFilter("all");
-              }
-            }}
-            prefix={
-              <Container row>
-                <Image src={databaseGrad} size={15} opacity={0.6} />
-                <Spacer inline x={0.5} />
-                Type
-              </Container>
-            }
-          />
-          <Spacer inline x={1} />
           <Select
             options={[
               { value: "all", label: "All" },
               {
                 value: "POSTGRES",
-                label: "PostgreSQL",
-                icon: getEngineIcon("POSTGRES"),
-              },
-              {
-                value: "AURORA-POSTGRES",
-                label: "Aurora PostgreSQL",
-                icon: getEngineIcon("POSTGRES"),
+                label: "Postgres",
+                icon: DATASTORE_ENGINE_POSTGRES.icon,
               },
               {
                 value: "REDIS",
                 label: "Redis",
-                icon: getEngineIcon("REDIS"),
+                icon: DATASTORE_ENGINE_REDIS.icon,
               },
             ]}
-            value={engineFilter}
+            value={typeFilter}
             setValue={(value) => {
               if (
                 value === "all" ||
                 value === "POSTGRES" ||
-                value === "AURORA-POSTGRES" ||
                 value === "REDIS"
               ) {
-                setEngineFilter(value);
+                setTypeFilter(value);
               }
             }}
             prefix={
               <Container row>
-                <Image src={engine} size={15} opacity={0.6} />
+                <Image src={databaseGrad} size={15} opacity={0.6} />
                 <Spacer inline x={0.5} />
-                Engine
+                Type
               </Container>
             }
+            width="350px"
           />
-          <Spacer inline x={2} />
+          <Spacer inline x={1} />
           <SearchBar
             value={searchValue}
             setValue={(x) => {
@@ -343,8 +272,8 @@ export const DatastoreList: React.FC<{
         return (
           <Row
             key={i}
-            onClick={async () => {
-              await onClick(datastore);
+            onClick={() => {
+              void onClick(datastore);
             }}
           >
             <Container row spaced>

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

@@ -1,36 +0,0 @@
-import {
-  DATASTORE_TYPE_ELASTICACHE,
-  DATASTORE_TYPE_RDS,
-} from "lib/databases/types";
-
-import awsRDS from "assets/amazon-rds.png";
-import awsElasticache from "assets/aws-elasticache.png";
-import engine from "assets/computer-chip.svg";
-import database from "assets/database.svg";
-import postgresql from "assets/postgresql.svg";
-import redis from "assets/redis.svg";
-
-import {
-  DATASTORE_ENGINE_AURORA_POSTGRES,
-  DATASTORE_ENGINE_POSTGRES,
-  DATASTORE_ENGINE_REDIS,
-} from "./constants";
-
-const datastoreIcons: Record<string, string> = {
-  [DATASTORE_TYPE_ELASTICACHE.name]: awsElasticache,
-  [DATASTORE_TYPE_RDS.name]: awsRDS,
-};
-
-const engineIcons: Record<string, string> = {
-  [DATASTORE_ENGINE_POSTGRES.name]: postgresql,
-  [DATASTORE_ENGINE_AURORA_POSTGRES.name]: postgresql,
-  [DATASTORE_ENGINE_REDIS.name]: redis,
-};
-
-export const getDatastoreIcon = (datastoreType: string): string => {
-  return datastoreIcons[datastoreType] ?? database;
-};
-
-export const getEngineIcon = (engineName: string): string => {
-  return engineIcons[engineName] ?? engine;
-};

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

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { withRouter, type RouteComponentProps } from "react-router";
 import styled from "styled-components";
+import { match } from "ts-pattern";
 
 import Container from "components/porter/Container";
 import Image from "components/porter/Image";
@@ -203,8 +204,12 @@ class Sidebar extends Component<PropsType, StateType> {
                   <Img src={database} />
                   Datastores
                 </Container>
-                {(currentProject.sandbox_enabled ||
-                  !currentProject.db_enabled) && <Image size={15} src={lock} />}
+                {match(currentProject)
+                  .with({ sandbox_enabled: true }, () => <Badge>NEW</Badge>)
+                  .with({ db_enabled: false }, () => (
+                    <Image size={15} src={lock}></Image>
+                  ))
+                  .otherwise(() => null)}
               </Container>
             </NavButton>
             {this.props.isAuthorized("settings", "", [