Merge branch 'main' into exposePort

src/routes/applications/[id]/configuration/buildpack.svelte

@@ -81,6 +81,9 @@
 				);
 				const indexHtml = files.find((file) => file.name === 'index.html' && file.type === 'blob');
 				const indexPHP = files.find((file) => file.name === 'index.php' && file.type === 'blob');
+				const composerPHP = files.find(
+					(file) => file.name === 'composer.json' && file.type === 'blob'
+				);
 
 				if (yarnLock) packageManager = 'yarn';
 				if (pnpmLock) packageManager = 'pnpm';
@@ -103,7 +106,7 @@
 					foundConfig = findBuildPack('python');
 				} else if (indexHtml) {
 					foundConfig = findBuildPack('static', packageManager);
-				} else if (indexPHP) {
+				} else if (indexPHP || composerPHP) {
 					foundConfig = findBuildPack('php');
 				} else {
 					foundConfig = findBuildPack('node', packageManager);
@@ -127,6 +130,9 @@
 				);
 				const indexHtml = files.find((file) => file.name === 'index.html' && file.type === 'file');
 				const indexPHP = files.find((file) => file.name === 'index.php' && file.type === 'file');
+				const composerPHP = files.find(
+					(file) => file.name === 'composer.json' && file.type === 'file'
+				);
 
 				if (yarnLock) packageManager = 'yarn';
 				if (pnpmLock) packageManager = 'pnpm';
@@ -146,7 +152,7 @@
 					foundConfig = findBuildPack('python');
 				} else if (indexHtml) {
 					foundConfig = findBuildPack('static', packageManager);
-				} else if (indexPHP) {
+				} else if (indexPHP || composerPHP) {
 					foundConfig = findBuildPack('php');
 				} else {
 					foundConfig = findBuildPack('node', packageManager);

src/routes/applications/[id]/configuration/destination.svelte

@@ -29,7 +29,7 @@
 <script lang="ts">
 	import type Prisma from '@prisma/client';
 
-	import { page } from '$app/stores';
+	import { page, session } from '$app/stores';
 	import { errorNotification } from '$lib/form';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
@@ -39,6 +39,16 @@
 
 	export let destinations: Prisma.DestinationDocker[];
 
+	const ownDestinations = destinations.filter((destination) => {
+		if (destination.teams[0].id === $session.teamId) {
+			return destination;
+		}
+	});
+	const otherDestinations = destinations.filter((destination) => {
+		if (destination.teams[0].id !== $session.teamId) {
+			return destination;
+		}
+	});
 	async function handleSubmit(destinationId) {
 		try {
 			await post(`/applications/${id}/configuration/destination.json`, { destinationId });
@@ -52,8 +62,8 @@
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">Configure Destination</div>
 </div>
-<div class="flex justify-center">
-	{#if !destinations || destinations.length === 0}
+<div class="flex flex-col justify-center">
+	{#if !destinations || ownDestinations.length === 0}
 		<div class="flex-col">
 			<div class="pb-2">No configurable Destination found</div>
 			<div class="flex justify-center">
@@ -75,8 +85,23 @@
 			</div>
 		</div>
 	{:else}
-		<div class="flex flex-wrap justify-center">
-			{#each destinations as destination}
+		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+			{#each ownDestinations as destination}
+				<div class="p-2">
+					<form on:submit|preventDefault={() => handleSubmit(destination.id)}>
+						<button type="submit" class="box-selection hover:bg-sky-700 font-bold">
+							<div class="font-bold text-xl text-center truncate">{destination.name}</div>
+							<div class="text-center truncate">{destination.network}</div>
+						</button>
+					</form>
+				</div>
+			{/each}
+		</div>
+		{#if otherDestinations.length > 0 && $session.teamId === '0'}
+			<div class="px-6 pb-5 pt-10 text-xl font-bold">Other Destinations</div>
+		{/if}
+		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+			{#each otherDestinations as destination}
 				<div class="p-2">
 					<form on:submit|preventDefault={() => handleSubmit(destination.id)}>
 						<button type="submit" class="box-selection hover:bg-sky-700 font-bold">

src/routes/applications/[id]/configuration/source.svelte

@@ -29,7 +29,7 @@
 <script lang="ts">
 	import type Prisma from '@prisma/client';
 
-	import { page } from '$app/stores';
+	import { page, session } from '$app/stores';
 	import { errorNotification } from '$lib/form';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
@@ -46,6 +46,17 @@
 			(source.type === 'github' && source.githubAppId && source.githubApp.installationId) ||
 			(source.type === 'gitlab' && source.gitlabAppId)
 	);
+	const ownSources = filteredSources.filter((source) => {
+		if (source.teams[0].id === $session.teamId) {
+			return source;
+		}
+	});
+	const otherSources = filteredSources.filter((source) => {
+		if (source.teams[0].id !== $session.teamId) {
+			return source;
+		}
+	});
+
 	async function handleSubmit(gitSourceId) {
 		try {
 			await post(`/applications/${id}/configuration/source.json`, { gitSourceId });
@@ -54,17 +65,21 @@
 			return errorNotification(error);
 		}
 	}
+	async function newSource() {
+		const { id } = await post('/sources/new', {});
+		return await goto(`/sources/${id}`, { replaceState: true });
+	}
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">Select a Git Source</div>
 </div>
 <div class="flex flex-col justify-center">
-	{#if !filteredSources || filteredSources.length === 0}
+	{#if !filteredSources || ownSources.length === 0}
 		<div class="flex-col">
-			<div class="pb-2">No configurable Git Source found</div>
+			<div class="pb-2 text-center">No configurable Git Source found</div>
 			<div class="flex justify-center">
-				<a href="/new/source" sveltekit:prefetch class="add-icon bg-orange-600 hover:bg-orange-500">
+				<button on:click={newSource} class="add-icon bg-orange-600 hover:bg-orange-500">
 					<svg
 						class="w-6"
 						xmlns="http://www.w3.org/2000/svg"
@@ -78,12 +93,39 @@
 							d="M12 6v6m0 0v6m0-6h6m-6 0H6"
 						/></svg
 					>
-				</a>
+				</button>
 			</div>
 		</div>
 	{:else}
-		<div class="flex flex-wrap justify-center">
-			{#each filteredSources as source}
+		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+			{#each ownSources as source}
+				<div class="p-2">
+					<form on:submit|preventDefault={() => handleSubmit(source.id)}>
+						<button
+							disabled={source.gitlabApp && !source.gitlabAppId}
+							type="submit"
+							class="disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group"
+							class:border-red-500={source.gitlabApp && !source.gitlabAppId}
+							class:border-0={source.gitlabApp && !source.gitlabAppId}
+							class:border-l-4={source.gitlabApp && !source.gitlabAppId}
+						>
+							<div class="font-bold text-xl text-center truncate">{source.name}</div>
+							{#if source.gitlabApp && !source.gitlabAppId}
+								<div class="font-bold text-center truncate text-red-500 group-hover:text-white">
+									Configuration missing
+								</div>
+							{/if}
+						</button>
+					</form>
+				</div>
+			{/each}
+		</div>
+
+		{#if otherSources.length > 0 && $session.teamId === '0'}
+			<div class="px-6 pb-5 pt-10 text-xl font-bold">Other Sources</div>
+		{/if}
+		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+			{#each otherSources as source}
 				<div class="p-2">
 					<form on:submit|preventDefault={() => handleSubmit(source.id)}>
 						<button

src/routes/applications/[id]/delete.json.ts

@@ -14,6 +14,7 @@ export const del: RequestHandler = async (event) => {
 			status: 200
 		};
 	} catch (error) {
+		console.log(error);
 		return ErrorHandler(error);
 	}
 };

src/routes/applications/_Application.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-	export let application;
-	import Rust from '$lib/components/svg/applications/Rust.svelte';
-	import Nodejs from '$lib/components/svg/applications/Nodejs.svelte';
-	import React from '$lib/components/svg/applications/React.svelte';
-	import Svelte from '$lib/components/svg/applications/Svelte.svelte';
-	import Vuejs from '$lib/components/svg/applications/Vuejs.svelte';
-	import PHP from '$lib/components/svg/applications/PHP.svelte';
-	import Python from '$lib/components/svg/applications/Python.svelte';
-	import Static from '$lib/components/svg/applications/Static.svelte';
-	import Nestjs from '$lib/components/svg/applications/Nestjs.svelte';
-	import Nuxtjs from '$lib/components/svg/applications/Nuxtjs.svelte';
-	import Nextjs from '$lib/components/svg/applications/Nextjs.svelte';
-	import Gatsby from '$lib/components/svg/applications/Gatsby.svelte';
-	import Docker from '$lib/components/svg/applications/Docker.svelte';
-	import Astro from '$lib/components/svg/applications/Astro.svelte';
-	import Eleventy from '$lib/components/svg/applications/Eleventy.svelte';
-
-	const buildPack = application?.buildPack?.toLowerCase();
-</script>
-
-<a href="/applications/{application.id}" class="w-96 p-2 no-underline">
-	<div class="box-selection group relative hover:bg-green-600">
-		{#if buildPack === 'rust'}
-			<Rust />
-		{:else if buildPack === 'node'}
-			<Nodejs />
-		{:else if buildPack === 'react'}
-			<React />
-		{:else if buildPack === 'svelte'}
-			<Svelte />
-		{:else if buildPack === 'vuejs'}
-			<Vuejs />
-		{:else if buildPack === 'php'}
-			<PHP />
-		{:else if buildPack === 'python'}
-			<Python />
-		{:else if buildPack === 'static'}
-			<Static />
-		{:else if buildPack === 'nestjs'}
-			<Nestjs />
-		{:else if buildPack === 'nuxtjs'}
-			<Nuxtjs />
-		{:else if buildPack === 'nextjs'}
-			<Nextjs />
-		{:else if buildPack === 'gatsby'}
-			<Gatsby />
-		{:else if buildPack === 'docker'}
-			<Docker />
-		{:else if buildPack === 'astro'}
-			<Astro />
-		{:else if buildPack === 'eleventy'}
-			<Eleventy />
-		{/if}
-
-		<div class="truncate text-center text-xl font-bold">{application.name}</div>
-		{#if application.fqdn}
-			<div class="truncate text-center">{application.fqdn}</div>
-		{/if}
-		{#if !application.gitSourceId || !application.destinationDockerId}
-			<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-				Configuration missing
-			</div>
-		{/if}
-	</div>
-</a>

src/routes/applications/index.svelte

@@ -1,13 +1,40 @@
 <script lang="ts">
 	export let applications: Array<Application>;
 	import { session } from '$app/stores';
-	import Application from './_Application.svelte';
 	import { post } from '$lib/api';
 	import { goto } from '$app/navigation';
+
+	import Rust from '$lib/components/svg/applications/Rust.svelte';
+	import Nodejs from '$lib/components/svg/applications/Nodejs.svelte';
+	import React from '$lib/components/svg/applications/React.svelte';
+	import Svelte from '$lib/components/svg/applications/Svelte.svelte';
+	import Vuejs from '$lib/components/svg/applications/Vuejs.svelte';
+	import PHP from '$lib/components/svg/applications/PHP.svelte';
+	import Python from '$lib/components/svg/applications/Python.svelte';
+	import Static from '$lib/components/svg/applications/Static.svelte';
+	import Nestjs from '$lib/components/svg/applications/Nestjs.svelte';
+	import Nuxtjs from '$lib/components/svg/applications/Nuxtjs.svelte';
+	import Nextjs from '$lib/components/svg/applications/Nextjs.svelte';
+	import Gatsby from '$lib/components/svg/applications/Gatsby.svelte';
+	import Docker from '$lib/components/svg/applications/Docker.svelte';
+	import Astro from '$lib/components/svg/applications/Astro.svelte';
+	import Eleventy from '$lib/components/svg/applications/Eleventy.svelte';
+	import { getDomain } from '$lib/components/common';
+
 	async function newApplication() {
 		const { id } = await post('/applications/new', {});
 		return await goto(`/applications/${id}`, { replaceState: true });
 	}
+	const ownApplications = applications.filter((application) => {
+		if (application.teams[0].id === $session.teamId) {
+			return application;
+		}
+	});
+	const otherApplications = applications.filter((application) => {
+		if (application.teams[0].id !== $session.teamId) {
+			return application;
+		}
+	});
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
@@ -30,14 +57,125 @@
 		</div>
 	{/if}
 </div>
-<div class="flex flex-wrap justify-center">
-	{#if !applications || applications.length === 0}
+<div class="flex flex-col flex-wrap justify-center">
+	{#if !applications || ownApplications.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">No applications found</div>
 		</div>
-	{:else}
-		{#each applications as application}
-			<Application {application} />
-		{/each}
+	{/if}
+	{#if ownApplications.length > 0 || otherApplications.length > 0}
+		<div class="flex flex-col">
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each ownApplications as application}
+					<a href="/applications/{application.id}" class="w-96 p-2 no-underline">
+						<div class="box-selection group relative hover:bg-green-600">
+							{#if application.buildPack}
+								{#if application.buildPack.toLowerCase() === 'rust'}
+									<Rust />
+								{:else if application.buildPack.toLowerCase() === 'node'}
+									<Nodejs />
+								{:else if application.buildPack.toLowerCase() === 'react'}
+									<React />
+								{:else if application.buildPack.toLowerCase() === 'svelte'}
+									<Svelte />
+								{:else if application.buildPack.toLowerCase() === 'vuejs'}
+									<Vuejs />
+								{:else if application.buildPack.toLowerCase() === 'php'}
+									<PHP />
+								{:else if application.buildPack.toLowerCase() === 'python'}
+									<Python />
+								{:else if application.buildPack.toLowerCase() === 'static'}
+									<Static />
+								{:else if application.buildPack.toLowerCase() === 'nestjs'}
+									<Nestjs />
+								{:else if application.buildPack.toLowerCase() === 'nuxtjs'}
+									<Nuxtjs />
+								{:else if application.buildPack.toLowerCase() === 'nextjs'}
+									<Nextjs />
+								{:else if application.buildPack.toLowerCase() === 'gatsby'}
+									<Gatsby />
+								{:else if application.buildPack.toLowerCase() === 'docker'}
+									<Docker />
+								{:else if application.buildPack.toLowerCase() === 'astro'}
+									<Astro />
+								{:else if application.buildPack.toLowerCase() === 'eleventy'}
+									<Eleventy />
+								{/if}
+							{/if}
+
+							<div class="truncate text-center text-xl font-bold">{application.name}</div>
+							{#if $session.teamId === '0' && otherApplications.length > 0}
+								<div class="truncate text-center">Team {application.teams[0].name}</div>
+							{/if}
+							{#if application.fqdn}
+								<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
+							{/if}
+							{#if !application.gitSourceId || !application.destinationDockerId || !application.fqdn}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									Configuration missing
+								</div>
+							{/if}
+						</div>
+					</a>
+				{/each}
+			</div>
+			{#if otherApplications.length > 0 && $session.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-xl font-bold">Other Applications</div>
+				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+					{#each otherApplications as application}
+						<a href="/applications/{application.id}" class="w-96 p-2 no-underline">
+							<div class="box-selection group relative hover:bg-green-600">
+								{#if application.buildPack}
+									{#if application.buildPack.toLowerCase() === 'rust'}
+										<Rust />
+									{:else if application.buildPack.toLowerCase() === 'node'}
+										<Nodejs />
+									{:else if application.buildPack.toLowerCase() === 'react'}
+										<React />
+									{:else if application.buildPack.toLowerCase() === 'svelte'}
+										<Svelte />
+									{:else if application.buildPack.toLowerCase() === 'vuejs'}
+										<Vuejs />
+									{:else if application.buildPack.toLowerCase() === 'php'}
+										<PHP />
+									{:else if application.buildPack.toLowerCase() === 'python'}
+										<Python />
+									{:else if application.buildPack.toLowerCase() === 'static'}
+										<Static />
+									{:else if application.buildPack.toLowerCase() === 'nestjs'}
+										<Nestjs />
+									{:else if application.buildPack.toLowerCase() === 'nuxtjs'}
+										<Nuxtjs />
+									{:else if application.buildPack.toLowerCase() === 'nextjs'}
+										<Nextjs />
+									{:else if application.buildPack.toLowerCase() === 'gatsby'}
+										<Gatsby />
+									{:else if application.buildPack.toLowerCase() === 'docker'}
+										<Docker />
+									{:else if application.buildPack.toLowerCase() === 'astro'}
+										<Astro />
+									{:else if application.buildPack.toLowerCase() === 'eleventy'}
+										<Eleventy />
+									{/if}
+								{/if}
+
+								<div class="truncate text-center text-xl font-bold">{application.name}</div>
+								{#if $session.teamId === '0'}
+									<div class="truncate text-center">Team {application.teams[0].name}</div>
+								{/if}
+								{#if application.fqdn}
+									<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
+								{/if}
+								{#if !application.gitSourceId || !application.destinationDockerId || !application.fqdn}
+									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+										Configuration missing
+									</div>
+								{/if}
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
 	{/if}
 </div>