remove engine from dashboard filter

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,21 +61,12 @@ 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?.db_enabled) {
@@ -134,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) => {