refactor

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext, useState } from "react";
 import styled from "styled-components";
 import { match } from "ts-pattern";
 
@@ -7,15 +7,23 @@ import Icon from "components/porter/Icon";
 import Spacer from "components/porter/Spacer";
 import StatusDot from "components/porter/StatusDot";
 import Text from "components/porter/Text";
+import Tooltip from "components/porter/Tooltip";
 
+import { Context } from "shared/Context";
 import { readableDate } from "shared/string_utils";
+import trash from "assets/trash.png";
 
 import { useDatastoreContext } from "./DatabaseContextProvider";
+import { DeleteDatastoreModal } from "./tabs/SettingsTab";
 import EngineTag from "./tags/EngineTag";
 
 const DatabaseHeader: React.FC = () => {
   const { datastore } = useDatastoreContext();
 
+  const [showDeleteDatastoreModal, setShowDeleteDatastoreModal] =
+    useState(false);
+  const { user } = useContext(Context);
+
   return (
     <>
       <Container row style={{ width: "100%" }}>
@@ -28,6 +36,29 @@ const DatabaseHeader: React.FC = () => {
             <Container row>
               <EngineTag engine={datastore.template.engine} heightPixels={15} />
             </Container>
+            {user?.isPorterUser && (
+              <>
+                <Spacer inline x={1} />
+                <Tooltip
+                  content={
+                    <Text>
+                      Delete this datastore and all of its resources (only
+                      visible to Porter operators).
+                    </Text>
+                  }
+                  position={"right"}
+                >
+                  <div
+                    style={{ cursor: "pointer" }}
+                    onClick={() => {
+                      setShowDeleteDatastoreModal(true);
+                    }}
+                  >
+                    <Icon src={trash} height={"15px"} />
+                  </div>
+                </Tooltip>
+              </>
+            )}
           </Container>
           {match(datastore.status)
             .with("AVAILABLE", () => (
@@ -51,6 +82,13 @@ const DatabaseHeader: React.FC = () => {
         </div>
         <Spacer y={0.5} />
       </CreatedAtContainer>
+      {showDeleteDatastoreModal && (
+        <DeleteDatastoreModal
+          onClose={() => {
+            setShowDeleteDatastoreModal(false);
+          }}
+        />
+      )}
     </>
   );
 };

dashboard/src/main/home/database-dashboard/constants.ts

@@ -429,7 +429,7 @@ export const DATASTORE_TEMPLATE_UPSTASH: DatastoreTemplate = Object.freeze({
   supportedEngineVersions: [],
   icon: upstash as string,
   description:
-    "A fully managed serverless Postgres. Neon separates storage and compute to offer autoscaling, branching, and bottomless storage.",
+    "A fully managed, serverless data store optimized for Redis. Upstash separates storage and compute to deliver auto-scaling, on-demand databases, and per-request pricing with a focus on low latency and high availability.",
   disabled: true,
   instanceTiers: [],
   creationStateProgression: [

dashboard/src/main/home/database-dashboard/tabs/SettingsTab.tsx

@@ -22,7 +22,6 @@ const SettingsTab: React.FC = () => {
     useState(false);
 
   const { datastore } = useDatastoreContext();
-  const { deleteDatastore } = useDatastore();
 
   return (
     <div>
@@ -49,9 +48,6 @@ const SettingsTab: React.FC = () => {
           onClose={() => {
             setShowDeleteDatastoreModal(false);
           }}
-          onSubmit={async () => {
-            await deleteDatastore(datastore.name);
-          }}
         />
       )}
     </div>
@@ -61,15 +57,14 @@ const SettingsTab: React.FC = () => {
 export default SettingsTab;
 
 type DeleteDatastoreModalProps = {
-  onSubmit: () => Promise<void>;
   onClose: () => void;
 };
 
-const DeleteDatastoreModal: React.FC<DeleteDatastoreModalProps> = ({
-  onSubmit,
+export const DeleteDatastoreModal: React.FC<DeleteDatastoreModalProps> = ({
   onClose,
 }) => {
   const { datastore } = useDatastoreContext();
+  const { deleteDatastore } = useDatastore();
 
   const [inputtedDatastoreName, setInputtedDatastoreName] =
     useState<string>("");
@@ -79,7 +74,7 @@ const DeleteDatastoreModal: React.FC<DeleteDatastoreModalProps> = ({
   const confirmDeletion = async (): Promise<void> => {
     setIsSubmitting(true);
     try {
-      await onSubmit();
+      await deleteDatastore(datastore.name);
       onClose();
     } catch (err) {
       setDeleteDatastoreError(