first steps with ui

apps/ui/src/routes/databases/[id]/_DatabaseLinks.svelte

@@ -3,6 +3,7 @@
 
 	import Clickhouse from '$lib/components/svg/databases/Clickhouse.svelte';
 	import CouchDb from '$lib/components/svg/databases/CouchDB.svelte';
+	import EdgeDb from '$lib/components/svg/databases/EdgeDB.svelte';
 	import MariaDb from '$lib/components/svg/databases/MariaDB.svelte';
 	import MongoDb from '$lib/components/svg/databases/MongoDB.svelte';
 	import MySql from '$lib/components/svg/databases/MySQL.svelte';
@@ -25,5 +26,7 @@
 		<PostgreSql />
 	{:else if database.type === 'redis'}
 		<Redis />
+	{:else if database.type === 'redis'}
+		<EdgeDb />
 	{/if}
 </span>

apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte

@@ -13,6 +13,7 @@
 	import PostgreSql from './_PostgreSQL.svelte';
 	import Redis from './_Redis.svelte';
 	import CouchDb from './_CouchDb.svelte';
+	import EdgeDB from './_EdgeDB.svelte';
 	import { post } from '$lib/api';
 	import { toast } from '@zerodevx/svelte-toast';
 	import { t } from '$lib/translations';
@@ -37,8 +38,10 @@
 		databaseDefault = database.defaultDatabase;
 		databaseDbUser = database.dbUser;
 		databaseDbUserPassword = database.dbUserPassword;
-		if (database.type === 'mongodb') {
-			databaseDefault = '?readPreference=primary&ssl=false';
+		if (database.type === 'mongodb' || database.type === 'edgedb') {
+			if (database.type === 'mongodb') {
+				databaseDefault = '?readPreference=primary&ssl=false';
+			}
 			databaseDbUser = database.rootUser;
 			databaseDbUserPassword = database.rootUserPassword;
 		} else if (database.type === 'redis') {
@@ -196,6 +199,8 @@
 				<Redis bind:database />
 			{:else if database.type === 'couchdb'}
 				<CouchDb {database} />
+			{:else if database.type === 'edgedb'}
+				<EdgeDB {database} />
 			{/if}
 			<div class="grid grid-cols-2 items-center px-10 pb-8">
 				<label for="url" class="text-base font-bold text-stone-100"

apps/ui/src/routes/databases/[id]/_Databases/_EdgeDB.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	export let database: any;
+	import { status } from '$lib/store';
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
+	import { t } from '$lib/translations';
+</script>
+
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">EdgeDB</div>
+</div>
+<div class="space-y-2 px-10">
+	<div class="grid grid-cols-2 items-center">
+		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
+			>{$t('database.default_database')}</label
+		>
+		<CopyPasswordField
+			required
+			readonly={database.defaultDatabase}
+			disabled={database.defaultDatabase}
+			placeholder="{$t('forms.eg')}: edgedb"
+			id="defaultDatabase"
+			name="defaultDatabase"
+			bind:value={database.defaultDatabase}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
+		<CopyPasswordField
+			readonly
+			disabled
+			placeholder={$t('forms.generated_automatically_after_start')}
+			id="rootUser"
+			name="rootUser"
+			value={database.rootUser}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center">
+		<label for="rootUser" class="text-base font-bold text-stone-100"
+			>Root (edgedb) User Password</label
+		>
+		<CopyPasswordField
+			disabled={!$status.database.isRunning}
+			readonly={!$status.database.isRunning}
+			placeholder="Generated automatically after start"
+			isPasswordField
+			id="rootUserPassword"
+			name="rootUserPassword"
+			bind:value={database.rootUserPassword}
+		/>
+		<Explainer text="Could be changed while the database is running." />
+	</div>
+</div>

apps/ui/src/routes/databases/[id]/configuration/type.svelte

@@ -39,6 +39,7 @@
 	import MySQL from '$lib/components/svg/databases/MySQL.svelte';
 	import PostgreSQL from '$lib/components/svg/databases/PostgreSQL.svelte';
 	import Redis from '$lib/components/svg/databases/Redis.svelte';
+	import EdgeDb from '$lib/components/svg/databases/EdgeDB.svelte';
 	import { goto } from '$app/navigation';
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
@@ -76,6 +77,8 @@
 						<PostgreSQL isAbsolute />
 					{:else if type.name === 'redis'}
 						<Redis isAbsolute />
+					{:else if type.name === 'edgedb'}
+						<EdgeDb isAbsolute />
 					{/if}{type.fancyName}
 				</button>
 			</form>

apps/ui/src/routes/databases/index.svelte

@@ -26,6 +26,7 @@
 	import MySQL from '$lib/components/svg/databases/MySQL.svelte';
 	import PostgreSQL from '$lib/components/svg/databases/PostgreSQL.svelte';
 	import Redis from '$lib/components/svg/databases/Redis.svelte';
+	import EdgeDb from '$lib/components/svg/databases/EdgeDB.svelte';
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { appSession } from '$lib/store';
@@ -93,6 +94,8 @@
 								<PostgreSQL isAbsolute />
 							{:else if database.type === 'redis'}
 								<Redis isAbsolute />
+							{:else if database.type === 'edgedb'}
+								<EdgeDb isAbsolute />
 							{/if}
 							<div class="truncate text-center text-xl font-bold">
 								{database.name}
@@ -129,6 +132,8 @@
 									<PostgreSQL isAbsolute />
 								{:else if database.type === 'redis'}
 									<Redis isAbsolute />
+								{:else if database.type === 'edgedb'}
+									<EdgeDb isAbsolute />
 								{/if}
 								<div class="truncate text-center text-xl font-bold">
 									{database.name}