feat: select base image for buildpacks

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

@@ -63,7 +63,8 @@ export const post: RequestHandler = async (event) => {
 		dockerFileLocation,
 		denoMainFile,
 		denoOptions,
-		baseImage
+		baseImage,
+		baseBuildImage
 	} = await event.request.json();
 	if (port) port = Number(port);
 	if (denoOptions) denoOptions = denoOptions.trim();
@@ -98,6 +99,7 @@ export const post: RequestHandler = async (event) => {
 			denoMainFile,
 			denoOptions,
 			baseImage,
+			baseBuildImage,
 			...defaultConfiguration
 		});
 		return { status: 201 };

src/routes/applications/[id]/index.svelte

@@ -33,6 +33,8 @@
 		gitlabApp: Prisma.GitlabApp;
 		gitSource: Prisma.GitSource;
 		destinationDocker: Prisma.DestinationDocker;
+		baseImages: Array<{ value: string; label: string }>;
+		baseBuildImages: Array<{ value: string; label: string }>;
 	};
 	export let isRunning;
 	import { page, session } from '$app/stores';
@@ -71,11 +73,14 @@
 			label: 'Gunicorn'
 		}
 	];
-
+	function containerClass() {
+		if (!$session.isAdmin || isRunning) {
+			return 'text-white border border-dashed border-coolgray-300 bg-transparent font-thin px-0';
+		}
+	}
 	if (browser && window.location.hostname === 'demo.coolify.io' && !application.fqdn) {
 		application.fqdn = `http://${cuid()}.demo.coolify.io`;
 	}
-
 	onMount(() => {
 		domainEl.focus();
 	});
@@ -138,6 +143,14 @@
 	async function selectWSGI(event) {
 		application.pythonWSGI = event.detail.value;
 	}
+	async function selectBaseImage(event) {
+		application.baseImage = event.detail.value;
+		await handleSubmit();
+	}
+	async function selectBaseBuildImage(event) {
+		application.baseBuildImage = event.detail.value;
+		await handleSubmit();
+	}
 </script>
 
 <div class="flex items-center space-x-2 p-5 px-6 font-bold">
@@ -310,14 +323,42 @@
 					/>
 				</div>
 			</div>
-			<div class="grid grid-cols-2 items-center pb-8">
+			<div class="grid grid-cols-2 items-center">
 				<label for="baseImage" class="text-base font-bold text-stone-100"
 					>{$t('application.base_image')}</label
 				>
-				<div class="no-underline">
-					<input value={application.baseImage} id="baseImage" disabled class="bg-transparent " />
+				<div class="custom-select-wrapper">
+					<Select
+						isDisabled={!$session.isAdmin || isRunning}
+						containerClasses={containerClass()}
+						id="baseImages"
+						showIndicator={!isRunning}
+						items={application.baseImages}
+						on:select={selectBaseImage}
+						value={application.baseImage}
+						isClearable={false}
+					/>
 				</div>
 			</div>
+			{#if application.buildCommand || application.buildPack === 'rust'}
+				<div class="grid grid-cols-2 items-center pb-8">
+					<label for="baseBuildImage" class="text-base font-bold text-stone-100"
+						>{$t('application.base_build_image')}</label
+					>
+					<div class="custom-select-wrapper">
+						<Select
+							isDisabled={!$session.isAdmin || isRunning}
+							containerClasses={containerClass()}
+							id="baseBuildImages"
+							showIndicator={!isRunning}
+							items={application.baseBuildImages}
+							on:select={selectBaseBuildImage}
+							value={application.baseBuildImage}
+							isClearable={false}
+						/>
+					</div>
+				</div>
+			{/if}
 		</div>
 		<div class="flex space-x-1 py-5 font-bold">
 			<div class="title">{$t('application.application')}</div>