From 7783c40ce6e2fc11332aed0c704c92049df60f2b Mon Sep 17 00:00:00 2001 From: Feroze Mohideen Date: Thu, 9 May 2024 09:58:05 -0400 Subject: [PATCH 1/3] unblock datastores tab on sandbox --- .../database-dashboard/DatabaseDashboard.tsx | 23 ++----------------- dashboard/src/main/home/sidebar/Sidebar.tsx | 9 ++++++-- 2 files changed, 9 insertions(+), 23 deletions(-) diff --git a/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx b/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx index 881e8977eb..ea55546504 100644 --- a/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx +++ b/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx @@ -82,25 +82,6 @@ const DatabaseDashboard: React.FC = () => { }, [datastores, searchValue, typeFilter, engineFilter]); const renderContents = (): JSX.Element => { - if (currentProject?.sandbox_enabled) { - return ( - - Datastores are coming soon to the Porter Cloud - - - You can also eject to your own cloud account to start using managed - datastores immediately. - - - - - - - ); - } - if (!currentProject?.db_enabled) { return ( @@ -343,8 +324,8 @@ export const DatastoreList: React.FC<{ return ( { - await onClick(datastore); + onClick={() => { + void onClick(datastore); }} > diff --git a/dashboard/src/main/home/sidebar/Sidebar.tsx b/dashboard/src/main/home/sidebar/Sidebar.tsx index f7fc2592b6..c252b4f154 100644 --- a/dashboard/src/main/home/sidebar/Sidebar.tsx +++ b/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 { Datastores - {(currentProject.sandbox_enabled || - !currentProject.db_enabled) && } + {match(currentProject) + .with({ sandbox_enabled: true }, () => NEW) + .with({ db_enabled: false }, () => ( + + )) + .otherwise(() => null)} {this.props.isAuthorized("settings", "", [ From ee8e28917a8dc5bc189af006c3ccf52dc2370162 Mon Sep 17 00:00:00 2001 From: Feroze Mohideen Date: Thu, 9 May 2024 10:07:57 -0400 Subject: [PATCH 2/3] remove engine from dashboard filter --- .../database-dashboard/DatabaseDashboard.tsx | 80 ++++--------------- 1 file changed, 14 insertions(+), 66 deletions(-) diff --git a/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx b/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx index ea55546504..a78d3c45a6 100644 --- a/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx +++ b/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 ( <> - { if ( value === "all" || value === "POSTGRES" || - value === "AURORA-POSTGRES" || value === "REDIS" ) { - setEngineFilter(value); + setTypeFilter(value); } }} prefix={ - + - Engine + Type } + width="350px" /> - + { From 568d91235ebed4f1509b5ec73775814d8d3a646e Mon Sep 17 00:00:00 2001 From: Feroze Mohideen Date: Thu, 9 May 2024 10:09:08 -0400 Subject: [PATCH 3/3] remove unused file --- .../main/home/database-dashboard/icons.tsx | 36 ------------------- 1 file changed, 36 deletions(-) delete mode 100644 dashboard/src/main/home/database-dashboard/icons.tsx diff --git a/dashboard/src/main/home/database-dashboard/icons.tsx b/dashboard/src/main/home/database-dashboard/icons.tsx deleted file mode 100644 index aae773a47d..0000000000 --- a/dashboard/src/main/home/database-dashboard/icons.tsx +++ /dev/null @@ -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 = { - [DATASTORE_TYPE_ELASTICACHE.name]: awsElasticache, - [DATASTORE_TYPE_RDS.name]: awsRDS, -}; - -const engineIcons: Record = { - [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; -};