diff --git a/app/(deploy)/[workspace]/databases/database-new-form.tsx b/app/(deploy)/[workspace]/databases/database-new-form.tsx index df00c5f..b9a0c4b 100644 --- a/app/(deploy)/[workspace]/databases/database-new-form.tsx +++ b/app/(deploy)/[workspace]/databases/database-new-form.tsx @@ -1,18 +1,40 @@ 'use client'; import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; import { Progress } from '@/components/ui/progress'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'; import { useWorkspace } from '@/hooks/useWorkspace'; +import { deployDatabase } from '@/lib/deploy/database'; import { cn } from '@/lib/utils'; import { Plus } from 'lucide-react'; +import Image from 'next/image'; import { useState } from 'react'; interface DatabaseNewSteps { display: string; } +interface IDatabaseProvider { + id: string; + display: string; + image: { + alt: string; + src: string; + }; +} + +export interface IDatabaseConfig { + name: string; + provider: IDatabaseProvider; + user: { + username: string; + password: string; + }; +} + const steps: DatabaseNewSteps[] = [ { display: 'Database Type', @@ -20,15 +42,49 @@ const steps: DatabaseNewSteps[] = [ { display: 'Configuration', }, + { + display: 'Name & User', + }, { display: 'Review & Deploy', }, ]; +const databaseProviders: IDatabaseProvider[] = [ + { + id: 'vitess', + display: 'Vitess', + image: { + alt: 'Vitess', + src: '/vitess.png', + }, + }, + { + id: 'redis', + display: 'Redis', + image: { + alt: 'Redis', + src: '/redis.svg', + }, + }, +]; + export default function DatabaseNewForm() { const [open, setOpen] = useState(false); const [currentSteps, setCurrentSteps] = useState(1); + // TODO: Generate all data, but leave the user the choice to modify + const defaultDatabaseConfig: IDatabaseConfig = { + name: 'my-new-cool-db', + provider: databaseProviders[0], + user: { + username: 'my-new-super-user', + password: 'a-super-strong-generated-password', + }, + }; + + const [databaseConfig, setDatabaseConfig] = useState(defaultDatabaseConfig); + const { id } = useWorkspace(); return ( @@ -59,15 +115,80 @@ export default function DatabaseNewForm() { {currentSteps == 1 && (
- {/* -
- - -
- */} + { + setDatabaseConfig((prev) => ({ ...prev, provider: databaseProviders.filter((provider) => provider.id == id)[0] })); + }} + > + {databaseProviders.map((provider) => ( +
+ + +
+ ))} + +
+ )} + + {currentSteps == 2 && ( +
+

WIP for now 1CPU 2048Mb RAM

+

Storage 1 GB

+
+ )} + + {currentSteps == 3 && ( +
+ + { + setDatabaseConfig((prev) => ({ ...prev, name: e.target.value })); + }} + /> + + + { + setDatabaseConfig((prev) => ({ ...prev, user: { ...prev.user, username: e.target.value } })); + }} + /> + + + { + setDatabaseConfig((prev) => ({ ...prev, user: { ...prev.user, password: e.target.value } })); + }} + /> +
+
+ )} + + {currentSteps == 4 && ( +
+

Review your new database information :

+

Type : {databaseConfig.provider.display}

+

Name : {databaseConfig.name}

+

Username : {databaseConfig.user.username}

+

Password : {databaseConfig.user.password}

)} @@ -82,7 +203,14 @@ export default function DatabaseNewForm() { Back {currentSteps == steps.length ? ( - ) : ( diff --git a/components/ui/label.tsx b/components/ui/label.tsx new file mode 100644 index 0000000..5341821 --- /dev/null +++ b/components/ui/label.tsx @@ -0,0 +1,26 @@ +"use client" + +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const labelVariants = cva( + "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" +) + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, ...props }, ref) => ( + +)) +Label.displayName = LabelPrimitive.Root.displayName + +export { Label } diff --git a/lib/deploy/database.ts b/lib/deploy/database.ts new file mode 100644 index 0000000..35977bb --- /dev/null +++ b/lib/deploy/database.ts @@ -0,0 +1,16 @@ +"use server"; + +import { IDatabaseConfig } from "@/app/(deploy)/[workspace]/databases/database-new-form"; + +export async function deployDatabase(config: IDatabaseConfig) { + + return fetch("http://127.0.0.1:8080/databases", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(config), + }).then((res) => res.json()).catch((err) => { + console.error(err); + }); +} \ No newline at end of file diff --git a/lib/deploy/databases/database.ts b/lib/deploy/databases/database.ts deleted file mode 100644 index 8bcbc91..0000000 --- a/lib/deploy/databases/database.ts +++ /dev/null @@ -1,73 +0,0 @@ -import prisma from "@/lib/prisma"; -import { Database, DatabaseProvider } from "@prisma/client"; - -type DatabaseType = DatabaseProvider; - -export class CreateDatabase { - - private workspaceId: string; - private id: string; - public name: string; - public type: DatabaseType; - - public username: string; - private password: string; - private host: string | undefined; - private port: number | undefined; - - constructor(workspaceId: string, name: string, type: DatabaseType) { - this.id = "new-database-uuid"; // TODO: Generate UUID - this.username = "root"; // TODO: Generate random username - this.password = "toor"; // TODO: Generate random password - - this.workspaceId = workspaceId; - this.name = name; - this.type = type; - } - - // Deploying the database to the cluster - public async deploy(): Promise { - throw new Error("Not implemented"); - } - - // Saving the newly created database to the database - protected async save(): Promise { - // Checking if the connection details are provided - if(!this.host || !this.port) throw new MissingConnectionDetails(); - - const database = await prisma.database.create({ - data: { - id: this.id, - provider: this.type, - name: this.name, - workspaceId: this.workspaceId, - username: this.username, - password: this.password, - - host: this.host, - port: this.port - } - }); - - return database; - } - -} - -class DatabaseError extends Error { - constructor(message: string) { - super(message); - } -} - -export class SavingDatabaseError extends DatabaseError { - constructor() { - super("Error saving the database"); - } -} - -export class MissingConnectionDetails extends DatabaseError { - constructor() { - super("Missing connection details"); - } -} \ No newline at end of file diff --git a/lib/deploy/databases/index.ts b/lib/deploy/databases/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/lib/deploy/databases/vitess-database.ts b/lib/deploy/databases/vitess-database.ts deleted file mode 100644 index ae3b6fc..0000000 --- a/lib/deploy/databases/vitess-database.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Database } from "@prisma/client"; -import { CreateDatabase, SavingDatabaseError } from "./database"; - -export class CreateVitessDatabase extends CreateDatabase { - constructor(workspaceId: string, name: string) { - super(workspaceId, name, "VITESS"); - } - - public async deploy(): Promise { - try { - // Saving the database to the database - const database = await this.save(); - return database; - } catch (error) { - throw new SavingDatabaseError(); - } - } -} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0db9b76..08bfdc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-radio-group": "^1.1.3", @@ -915,6 +916,29 @@ } } }, + "node_modules/@radix-ui/react-label": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz", + "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-popover": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.7.tgz", diff --git a/package.json b/package.json index dc95fe5..ea01fd5 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-radio-group": "^1.1.3", diff --git a/public/redis.svg b/public/redis.svg new file mode 100644 index 0000000..ed31220 --- /dev/null +++ b/public/redis.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/public/vitess.png b/public/vitess.png new file mode 100644 index 0000000..8ab2912 Binary files /dev/null and b/public/vitess.png differ