();
+ const watchClusterId = watch("clusterId", 0);
+ const watchEngine = watch("engine", "UNKNOWN");
+
+ const { updateDatastoreButtonProps } = useDatastoreFormContext();
+
+ const availableEngines: BlockSelectOption[] = useMemo(() => {
+ return [
+ DATASTORE_ENGINE_POSTGRES,
+ {
+ ...DATASTORE_ENGINE_REDIS,
+ disabledOpts: {
+ tooltipText: "Coming soon!",
+ },
+ },
+ ];
+ }, [watchClusterId]);
+
+ const availableHostTypes: BlockSelectOption[] = useMemo(() => {
+ const options = [DATASTORE_TEMPLATE_NEON].filter(
+ (t) => t.highLevelType.name === watchEngine
+ );
+ return options;
+ }, [watchEngine]);
+
+ useEffect(() => {
+ if (clusters.length > 0) {
+ setValue("clusterId", clusters[0].id);
+ }
+ }, [JSON.stringify(clusters)]);
+
+ return (
+
+
+
+ }
+ title={"Create a new datastore"}
+ capitalize={false}
+ disableLineBreak
+ />
+
+
+ Datastore type
+
+ (
+ e.name === value
+ )}
+ setOption={(opt) => {
+ onChange(opt.name);
+ setValue("workloadType", "unspecified");
+ setTemplate(undefined);
+ setCurrentStep(1);
+ }}
+ />
+ )}
+ />
+ ,
+ <>
+ Datastore name
+ {watchEngine !== "UNKNOWN" && (
+ <>
+
+
+ Lowercase letters, numbers, and "-" only.
+
+
+ {
+ setValue("name", e.target.value);
+ setCurrentStep(Math.max(2, currentStep));
+ }}
+ />
+ {clusters.length > 1 && (
+ <>
+
+
+ activeValue={watchClusterId.toString()}
+ width="300px"
+ options={clusters.map((c) => ({
+ value: c.id.toString(),
+ label: c.vanity_name,
+ key: c.id.toString(),
+ }))}
+ setActiveValue={(value: string) => {
+ setValue("clusterId", parseInt(value));
+ setValue("workloadType", "unspecified");
+ setCurrentStep(2);
+ }}
+ label={"Cluster"}
+ />
+
+ )}
+
+ )}
+ ,
+ <>
+ Hosting option
+ {currentStep >= 2 && (
+ <>
+
+ a.name === template?.name
+ )}
+ setOption={(opt) => {
+ const templateMatch = SUPPORTED_DATASTORE_TEMPLATES.find(
+ (t) => t.name === opt.name
+ );
+ if (!templateMatch) {
+ return;
+ }
+ setTemplate(templateMatch);
+ match(templateMatch).with(
+ {
+ name: DATASTORE_TEMPLATE_NEON.name,
+ },
+ () => {
+ setValue("config.type", "neon");
+ }
+ );
+ setCurrentStep(4);
+ }}
+ />
+
+ )}
+ ,
+ <>
+ Create datastore instance
+
+
+ ,
+ ].filter(valueExists)}
+ currentStep={currentStep}
+ />
+
+
+ );
+};
+
+export default SandboxDatastoreForm;
+
+const Div = styled.div`
+ width: 100%;
+ max-width: 900px;
+`;
+
+const StyledConfigureTemplate = styled.div`
+ height: 100%;
+`;
+
+const DarkMatter = styled.div`
+ width: 100%;
+ margin-top: -5px;
+`;
+
+const Icon = styled.img`
+ margin-right: 15px;
+ height: 30px;
+ animation: floatIn 0.5s;
+ animation-fill-mode: forwards;
+
+ @keyframes floatIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0px);
+ }
+ }
+`;
diff --git a/dashboard/src/main/home/database-dashboard/tabs/PublicDatastoreConnectTab.tsx b/dashboard/src/main/home/database-dashboard/tabs/PublicDatastoreConnectTab.tsx
index c3fc68f828..2c301b5b43 100644
--- a/dashboard/src/main/home/database-dashboard/tabs/PublicDatastoreConnectTab.tsx
+++ b/dashboard/src/main/home/database-dashboard/tabs/PublicDatastoreConnectTab.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React from "react";
import styled from "styled-components";
import Banner from "components/porter/Banner";
@@ -7,17 +7,12 @@ import ShowIntercomButton from "components/porter/ShowIntercomButton";
import Spacer from "components/porter/Spacer";
import Text from "components/porter/Text";
-import { Context } from "shared/Context";
-
import { useDatastoreContext } from "../DatabaseContextProvider";
-import ConnectAppsModal from "../shared/ConnectAppsModal";
import ConnectionInfo from "../shared/ConnectionInfo";
// use this for external datastores that are publicly exposed like neon, upstash, etc.
const PublicDatastoreConnectTab: React.FC = () => {
const { datastore } = useDatastoreContext();
- const { currentProject } = useContext(Context);
- const [showConnectAppsModal, setShowConnectAppsModal] = useState(false);
if (datastore.credential.host === "") {
return (
@@ -60,26 +55,6 @@ const PublicDatastoreConnectTab: React.FC = () => {
The datastore client of your application should use these credentials
to create a connection.{" "}
- {!currentProject?.sandbox_enabled && (
- <>
-
- {
- setShowConnectAppsModal(true);
- }}
- >
- add
- Inject these credentials into an app
-
- {showConnectAppsModal && (
- {
- setShowConnectAppsModal(false);
- }}
- />
- )}
-
- )}
);
@@ -93,34 +68,3 @@ const ConnectTabContainer = styled.div`
display: flex;
flex-direction: row;
`;
-
-const ConnectAppButton = styled.div`
- color: #aaaabb;
- background: ${({ theme }) => theme.fg};
- border: 1px solid #494b4f;
- :hover {
- border: 1px solid #7a7b80;
- color: white;
- }
- display: flex;
- align-items: center;
- border-radius: 5px;
- height: 40px;
- font-size: 13px;
- width: 100%;
- padding-left: 10px;
- cursor: pointer;
- .add-icon {
- width: 30px;
- font-size: 20px;
- }
-`;
-
-const I = styled.i`
- color: white;
- font-size: 14px;
- display: flex;
- align-items: center;
- margin-right: 7px;
- justify-content: center;
-`;