first steps with ui

apps/ui/src/lib/components/svg/databases/EdgeDB.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<svg
+	class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-16 w-16' : 'mx-auto w-12 h-12'}
+	width="88"
+	fill="#b3b3b3"
+	height="101"
+	viewBox="0 -15 88 101"
+	><path
+		class="pageNav_logoBar__2v4ah"
+		style="transform-origin:center 35.5px"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M55.1436 71H58.1436V0H55.1436V71Z"
+	/><path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M74.5362 35.3047C74.5362 41.3776 72.1013 42.4662 69.3799 42.4662H63.5935V28.1432H69.3799C72.1013 28.1432 74.5362 29.2318 74.5362 35.3047V35.3047ZM71.5862 35.3047C71.5862 31.0651 70.2971 30.8646 68.4352 30.8646H66.6305V39.7448H68.4352C70.2971 39.7448 71.5862 39.5443 71.5862 35.3047V35.3047ZM40.9348 42.4662V28.1432H50.0442V30.8646H43.9713V33.7865H48.5546V36.4792H43.9713V39.7448H50.0442V42.4662H40.9348ZM80.6092 36.1068V39.7448H83.13C84.7055 39.7448 85.1066 38.7135 85.1066 37.9401C85.1066 37.3385 84.8201 36.1068 82.6717 36.1068H80.6092ZM80.6092 30.8646V33.5859H82.6717C83.8462 33.5859 84.5337 33.0703 84.5337 32.2109C84.5337 31.3516 83.8462 30.8646 82.6717 30.8646H80.6092ZM77.5732 28.1432H83.4169C86.482 28.1432 87.3987 30.2917 87.3987 31.8385C87.3987 33.2708 86.482 34.3021 85.8518 34.5885C87.6851 35.4766 88.0002 37.2813 88.0002 38.1979C88.0002 39.401 87.3987 42.4662 83.4169 42.4662H77.5732V28.1432ZM23.4899 35.3047C23.4899 41.3776 21.055 42.4662 18.3337 42.4662H12.5472V28.1432H18.3337C21.055 28.1432 23.4899 29.2318 23.4899 35.3047V35.3047ZM32.4272 39.8594C33.974 39.8594 34.7761 39.3438 35.0626 39V37.4245H32.599V34.9609H37.4975V40.6615C37.0678 41.3203 34.7188 42.6094 32.5704 42.6094C29.047 42.6094 26.0678 41.2344 26.0678 35.1615C26.0678 29.0885 29.0756 28 31.797 28C36.0652 28 37.1251 30.2344 37.4688 32.2109L34.948 32.7839C34.8048 31.8672 34.0027 30.7214 32.1694 30.7214C30.3074 30.7214 29.0183 30.9219 29.0183 35.1615C29.0183 39.401 30.3647 39.8594 32.4272 39.8594V39.8594ZM20.539 35.3047C20.539 31.0651 19.2499 30.8646 17.3879 30.8646H15.5833V39.7448H17.3879C19.2499 39.7448 20.539 39.5443 20.539 35.3047V35.3047ZM0 42.4662V28.1432H9.10938V30.8646H3.03646V33.7865H7.61979V36.4792H3.03646V39.7448H9.10938V42.4662H0Z"
+	/></svg
+>

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' || 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}