Merge branch 'next' into some-tweaks

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 === 'edgedb'}
+		<EdgeDb />
 	{/if}
 </span>

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

@@ -12,6 +12,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 { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
@@ -36,8 +37,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') {
@@ -190,6 +193,8 @@
 			<Redis bind:database />
 		{:else if database.type === 'couchdb'}
 			<CouchDb {database} />
+		{:else if database.type === 'edgedb'}
+			<EdgeDB {database} />
 		{/if}
 		<div class="flex flex-col space-y-3 mt-5">
 			<div>

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+	export let database: any;
+	import { status } from '$lib/store';
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
+</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 Password <Explainer
+				explanation="Could be changed while the database is running."
+			/></label
+		>
+		<CopyPasswordField
+			readonly
+			disabled
+			placeholder="Generated automatically after start"
+			isPasswordField
+			id="rootUserPassword"
+			name="rootUserPassword"
+			value={database.rootUserPassword}
+		/>
+	</div>
+</div>

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

@@ -0,0 +1,186 @@
+<script lang="ts">
+	export let name = '';
+	export let value = '';
+	export let isBuildSecret = false;
+	export let isNewSecret = false;
+	export let isPRMRSecret = false;
+	export let PRMRSecret: any = {};
+
+	if (isPRMRSecret) value = PRMRSecret.value;
+
+	import { page } from '$app/stores';
+	import { del } from '$lib/api';
+	import { errorNotification } from '$lib/common';
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { addToast } from '$lib/store';
+	import { t } from '$lib/translations';
+	import { createEventDispatcher } from 'svelte';
+	import { saveSecret } from './utils';
+
+	const dispatch = createEventDispatcher();
+	const { id } = $page.params;
+	async function removeSecret() {
+		try {
+			await del(`/databases/${id}/secrets`, { name });
+			dispatch('refresh');
+			if (isNewSecret) {
+				name = '';
+				value = '';
+				isBuildSecret = false;
+			}
+			addToast({
+				message: 'Secret removed.',
+				type: 'success'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+
+	async function createSecret(isNew: any) {
+		try {
+			if (!name || !value) return;
+			await saveSecret({
+				isNew,
+				name,
+				value,
+				isBuildSecret,
+				isPRMRSecret,
+				isNewSecret,
+				databaseId: id
+			});
+			if (isNewSecret) {
+				name = '';
+				value = '';
+				isBuildSecret = false;
+				addToast({
+					message: 'Secret added.',
+					type: 'success'
+				});
+			} else {
+				addToast({
+				message: 'Secret updated.',
+				type: 'success'
+			});
+			}
+			dispatch('refresh');
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+
+	async function setSecretValue() {
+		if (!isPRMRSecret) {
+			isBuildSecret = !isBuildSecret;
+			if (!isNewSecret) {
+				await saveSecret({
+					isNew: isNewSecret,
+					name,
+					value,
+					isBuildSecret,
+					isPRMRSecret,
+					isNewSecret,
+					databaseId: id
+				});
+				addToast({
+					message: 'Secret updated.',
+					type: 'success'
+				});
+			}
+		}
+	}
+</script>
+
+<td>
+	<input
+		id={isNewSecret ? 'secretName' : 'secretNameNew'}
+		bind:value={name}
+		required
+		placeholder="EXAMPLE_VARIABLE"
+		readonly={!isNewSecret}
+		class:bg-transparent={!isNewSecret}
+		class:cursor-not-allowed={!isNewSecret}
+	/>
+</td>
+<td>
+	<CopyPasswordField
+		id={isNewSecret ? 'secretValue' : 'secretValueNew'}
+		name={isNewSecret ? 'secretValue' : 'secretValueNew'}
+		isPasswordField={true}
+		bind:value
+		required
+		placeholder="J$#@UIO%HO#$U%H"
+	/>
+</td>
+<td class="text-center">
+	<button
+		on:click={setSecretValue}
+		aria-pressed="false"
+		class="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
+		class:bg-green-600={isBuildSecret}
+		class:bg-stone-700={!isBuildSecret}
+		class:opacity-50={isPRMRSecret}
+		class:cursor-not-allowed={isPRMRSecret}
+		class:cursor-pointer={!isPRMRSecret}
+	>
+		<span class="sr-only">Need during buildtime?</span>
+		<span
+			class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
+			class:translate-x-5={isBuildSecret}
+			class:translate-x-0={!isBuildSecret}
+		>
+			<span
+				class=" absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
+				class:opacity-0={isBuildSecret}
+				class:opacity-100={!isBuildSecret}
+				aria-hidden="true"
+			>
+				<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
+					<path
+						d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</span>
+			<span
+				class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
+				aria-hidden="true"
+				class:opacity-100={isBuildSecret}
+				class:opacity-0={!isBuildSecret}
+			>
+				<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
+					<path
+						d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+					/>
+				</svg>
+			</span>
+		</span>
+	</button>
+</td>
+<td>
+	{#if isNewSecret}
+		<div class="flex items-center justify-center">
+			<button class="btn bg-databases btn-sm" on:click={() => createSecret(true)}
+				>{$t('forms.add')}</button
+			>
+		</div>
+	{:else}
+		<div class="flex flex-row justify-center space-x-2">
+			<div class="flex items-center justify-center">
+				<button class="btn bg-databases btn-sm" on:click={() => createSecret(false)}
+					>{$t('forms.set')}</button
+				>
+			</div>
+			{#if !isPRMRSecret}
+				<div class="flex justify-center items-end">
+					<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeSecret}
+						>{$t('forms.remove')}</button
+					>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</td>

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

@@ -58,7 +58,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
-	import { appSession, status, disabledButton } from '$lib/store';
+	import { appSession, status, isDeploymentEnabled } from '$lib/store';
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
@@ -68,7 +68,7 @@ import DatabaseLinks from './_DatabaseLinks.svelte';
 	let statusInterval: any = false;
 	let forceDelete = false;
 
-	$disabledButton = !$appSession.isAdmin;
+	$isDeploymentEnabled = !$appSession.isAdmin;
 
 	async function deleteDatabase(force: boolean) {
 		const sure = confirm(`Are you sure you would like to delete '${database.name}'?`);
@@ -76,7 +76,7 @@ import DatabaseLinks from './_DatabaseLinks.svelte';
 			$status.database.initialLoading = true;
 			try {
 				await del(`/databases/${database.id}`, { id: database.id, force });
-				return await goto('/databases');
+				return await goto('/', { replaceState: true });
 			} catch (error) {
 				return errorNotification(error);
 			} finally {
@@ -88,12 +88,15 @@ import DatabaseLinks from './_DatabaseLinks.svelte';
 		const sure = confirm($t('database.confirm_stop', { name: database.name }));
 		if (sure) {
 			$status.database.initialLoading = true;
+			$status.database.loading = true;
 			try {
 				await post(`/databases/${database.id}/stop`, {});
 			} catch (error) {
 				return errorNotification(error);
 			} finally {
 				$status.database.initialLoading = false;
+				$status.database.loading = false;
+				await getStatus();
 			}
 		}
 	}

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

@@ -31,6 +31,7 @@
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
+  
 	import { goto } from '$app/navigation';
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
@@ -55,7 +56,7 @@
 		<div class="p-2">
 			<form on:submit|preventDefault={() => handleSubmit(type.name)}>
 				<button type="submit" class="box-selection relative text-xl font-bold hover:bg-purple-700">
-					<DatabaseIcons type={type.name} isAbsolute={true} />
+          <DatabaseIcons type={type.name} isAbsolute={true} />
 					{type.fancyName}
 				</button>
 			</form>

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

@@ -0,0 +1,109 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ fetch, params, stuff, url }) => {
+		try {
+			const response = await get(`/databases/${params.id}/secrets`);
+			return {
+				props: {
+					database: stuff.database,
+					...response
+				}
+			};
+		} catch (error) {
+			return {
+				status: 500,
+				error: new Error(`Could not load ${url}`)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let secrets: any;
+	export let database: any;
+	import pLimit from 'p-limit';
+	import Secret from './_Secret.svelte';
+	import { page } from '$app/stores';
+	import { t } from '$lib/translations';
+	import { get } from '$lib/api';
+	import { saveSecret } from './utils';
+	import { addToast } from '$lib/store';
+
+	const limit = pLimit(1);
+	const { id } = $page.params;
+
+	let batchSecrets = '';
+	async function refreshSecrets() {
+		const data = await get(`/databases/${id}/secrets`);
+		secrets = [...data.secrets];
+	}
+	async function getValues(e: any) {
+		e.preventDefault();
+		const eachValuePair = batchSecrets.split('\n');
+		const batchSecretsPairs = eachValuePair
+			.filter((secret) => !secret.startsWith('#') && secret)
+			.map((secret) => {
+				const [name, ...rest] = secret.split('=');
+				const value = rest.join('=');
+				const cleanValue = value?.replaceAll('"', '') || '';
+				return {
+					name,
+					value: cleanValue,
+					isNew: !secrets.find((secret: any) => name === secret.name)
+				};
+			});
+
+		await Promise.all(
+			batchSecretsPairs.map(({ name, value, isNew }) =>
+				limit(() => saveSecret({ name, value, databaseId: id, isNew }))
+			)
+		);
+		batchSecrets = '';
+		await refreshSecrets();
+		addToast({
+			message: 'Secrets saved.',
+			type: 'success'
+		});
+	}
+</script>
+
+<div class="flex items-center space-x-2 p-5 px-6 font-bold">
+	<div class="-mb-5 flex-col">
+		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">Secrets</div>
+		<span class="text-xs">{database.name}</span>
+	</div>
+</div>
+<div class="mx-auto max-w-6xl px-6 pt-4">
+	<table class="mx-auto border-separate text-left">
+		<thead>
+			<tr class="h-12">
+				<th scope="col">{$t('forms.name')}</th>
+				<th scope="col">{$t('forms.value')}</th>
+				<th scope="col" class="w-64 text-center">Need during buildtime?</th>
+				<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each secrets as secret}
+				{#key secret.id}
+					<tr>
+						<Secret
+							name={secret.name}
+							value={secret.value}
+							isBuildSecret={secret.isBuildSecret}
+							on:refresh={refreshSecrets}
+						/>
+					</tr>
+				{/key}
+			{/each}
+			<tr>
+				<Secret isNewSecret on:refresh={refreshSecrets} />
+			</tr>
+		</tbody>
+	</table>
+	<h2 class="title my-6 font-bold">Paste .env file</h2>
+	<form on:submit|preventDefault={getValues} class="mb-12 w-full">
+		<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
+		<button class="btn btn-sm bg-databases" type="submit">Batch add secrets</button>
+	</form>
+</div>

apps/ui/src/routes/databases/[id]/utils.ts

@@ -0,0 +1,42 @@
+import { post } from '$lib/api';
+import { t } from '$lib/translations';
+import { errorNotification } from '$lib/common';
+
+type Props = {
+	isNew: boolean;
+	name: string;
+	value: string;
+	isBuildSecret?: boolean;
+	isPRMRSecret?: boolean;
+	isNewSecret?: boolean;
+	databaseId: string;
+};
+
+export async function saveSecret({
+	isNew,
+	name,
+	value,
+	isBuildSecret,
+	isPRMRSecret,
+	isNewSecret,
+	databaseId
+}: Props): Promise<void> {
+	if (!name) return errorNotification(`${t.get('forms.name')} ${t.get('forms.is_required')}`);
+	if (!value) return errorNotification(`${t.get('forms.value')} ${t.get('forms.is_required')}`);
+	try {
+		await post(`/databases/${databaseId}/secrets`, {
+			name,
+			value,
+			isBuildSecret,
+			isPRMRSecret,
+			isNew: isNew || false
+		});
+		if (isNewSecret) {
+			name = '';
+			value = '';
+			isBuildSecret = false;
+		}
+	} catch (error) {
+		throw error
+	}
+}

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

@@ -0,0 +1,124 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async () => {
+		try {
+			const response = await get(`/databases`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let databases: any = [];
+	import { get, post } from '$lib/api';
+	import { t } from '$lib/translations';
+	import { appSession } from '$lib/store';
+	import { goto } from '$app/navigation';
+	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
+
+	async function newDatabase() {
+		const { id } = await post('/databases/new', {});
+		return await goto(`/databases/${id}`, { replaceState: true });
+	}
+
+	const ownDatabases = databases.filter((database: any) => {
+		if (database.teams[0].id === $appSession.teamId) {
+			return database;
+		}
+	});
+	const otherDatabases = databases.filter((database: any) => {
+		if (database.teams[0].id !== $appSession.teamId) {
+			return database;
+		}
+	});
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
+	{#if $appSession.isAdmin}
+		<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+		</button>
+	{/if}
+</div>
+
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+	{#if !databases || ownDatabases.length === 0}
+		<div class="flex-col">
+			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
+		</div>
+	{/if}
+	{#if ownDatabases.length > 0 || otherDatabases.length > 0}
+		<div class="flex flex-col">
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each ownDatabases as database}
+					<a href="/databases/{database.id}" class="p-2 no-underline">
+						<div class="box-selection group relative hover:bg-purple-600">
+							<DatabaseIcons type={database.type} isAbsolute={true} />
+							<div class="truncate text-center text-xl font-bold">
+								{database.name}
+							</div>
+							{#if $appSession.teamId === '0' && otherDatabases.length > 0}
+								<div class="truncate text-center">{database.teams[0].name}</div>
+							{/if}
+							{#if database.destinationDocker?.name}
+								<div class="truncate text-center">{database.destinationDocker.name}</div>
+							{/if}
+							{#if !database.type}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									{$t('application.configuration.configuration_missing')}
+								</div>
+							{/if}
+						</div>
+					</a>
+				{/each}
+			</div>
+			{#if otherDatabases.length > 0 && $appSession.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Databases</div>
+				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+					{#each otherDatabases as database}
+						<a href="/databases/{database.id}" class="p-2 no-underline">
+							<div class="box-selection group relative hover:bg-purple-600">
+								<DatabaseIcons type={database.type} isAbsolute={true} />
+								<div class="truncate text-center text-xl font-bold">
+									{database.name}
+								</div>
+								{#if $appSession.teamId === '0'}
+									<div class="truncate text-center">{database.teams[0].name}</div>
+								{/if}
+								{#if !database.type}
+									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+										Configuration missing
+									</div>
+								{:else}
+									<div class="text-center truncate">{database.type}</div>
+								{/if}
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -1,126 +1,4 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async () => {
-		try {
-			const response = await get(`/databases`);
-			return {
-				props: {
-					...response
-				}
-			};
-		} catch (error: any) {
-			return {
-				status: 500,
-				error: new Error(error)
-			};
-		}
-	};
-</script>
-
 <script lang="ts">
-	export let databases: any = [];
-	import { get, post } from '$lib/api';
-	import { t } from '$lib/translations';
-	import { appSession } from '$lib/store';
 	import { goto } from '$app/navigation';
-	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
-
-	async function newDatabase() {
-		const { id } = await post('/databases/new', {});
-		return await goto(`/databases/${id}`, { replaceState: true });
-	}
-
-	const ownDatabases = databases.filter((database: any) => {
-		if (database.teams[0].id === $appSession.teamId) {
-			return database;
-		}
-	});
-	const otherDatabases = databases.filter((database: any) => {
-		if (database.teams[0].id !== $appSession.teamId) {
-			return database;
-		}
-	});
+	goto('/');
 </script>
-
-<nav
-	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
->
-	<h1 class="mr-4 text-2xl font-bold">{$t('index.databases')}</h1>
-	{#if $appSession.isAdmin}
-	<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
-		<svg
-			class="h-6 w-6"
-			xmlns="http://www.w3.org/2000/svg"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-			><path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-			/></svg
-		>
-	</button>
-	{/if}
-</nav>
-<br />
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
-	{#if !databases || ownDatabases.length === 0}
-		<div class="flex-col">
-			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
-		</div>
-	{/if}
-	{#if ownDatabases.length > 0 || otherDatabases.length > 0}
-		<div class="flex flex-col">
-			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-				{#each ownDatabases as database}
-					<a href="/databases/{database.id}" class="p-2 no-underline">
-						<div class="box-selection group relative hover:bg-purple-600">
-							<DatabaseIcons type={database.type} isAbsolute={true} />
-							<div class="truncate text-center text-xl font-bold">
-								{database.name}
-							</div>
-							{#if $appSession.teamId === '0' && otherDatabases.length > 0}
-								<div class="truncate text-center">{database.teams[0].name}</div>
-							{/if}
-							{#if database.destinationDocker?.name}
-								<div class="truncate text-center">{database.destinationDocker.name}</div>
-							{/if}
-							{#if !database.type}
-								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-									{$t('application.configuration.configuration_missing')}
-								</div>
-							{/if}
-						</div>
-					</a>
-				{/each}
-			</div>
-			{#if otherDatabases.length > 0 && $appSession.teamId === '0'}
-				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Databases</div>
-				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-					{#each otherDatabases as database}
-						<a href="/databases/{database.id}" class="p-2 no-underline">
-							<div class="box-selection group relative hover:bg-purple-600">
-								<DatabaseIcons type={database.type} isAbsolute={true} />
-								<div class="truncate text-center text-xl font-bold">
-									{database.name}
-								</div>
-								{#if $appSession.teamId === '0'}
-									<div class="truncate text-center">{database.teams[0].name}</div>
-								{/if}
-								{#if !database.type}
-									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-										Configuration missing
-									</div>
-								{:else}
-									<div class="text-center truncate">{database.type}</div>
-								{/if}
-							</div>
-						</a>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>