feat: Able to change service version/tag

src/routes/databases/[id]/configuration/type.json.ts

@@ -1,6 +1,7 @@
 import { getUserDetails } from '$lib/common';
+import { supportedDatabaseTypesAndVersions } from '$lib/components/common';
 import * as db from '$lib/database';
-import { ErrorHandler, supportedDatabaseTypesAndVersions } from '$lib/database';
+import { ErrorHandler } from '$lib/database';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const get: RequestHandler = async (event) => {

src/routes/databases/[id]/configuration/version.json.ts

@@ -1,6 +1,7 @@
 import { getUserDetails } from '$lib/common';
+import { supportedDatabaseTypesAndVersions } from '$lib/components/common';
 import * as db from '$lib/database';
-import { ErrorHandler, supportedDatabaseTypesAndVersions } from '$lib/database';
+import { ErrorHandler } from '$lib/database';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const get: RequestHandler = async (event) => {

src/routes/services/[id]/_Services/_Services.svelte

@@ -92,7 +92,22 @@
 					/>
 				</div>
 			</div>
-
+			<div class="grid grid-cols-2 items-center px-10">
+				<label for="buildPack" class="text-base font-bold text-stone-100">Version / Tag</label>
+				<a
+					href={$session.isAdmin
+						? `/services/${id}/configuration/version?from=/services/${id}`
+						: ''}
+					class="no-underline"
+				>
+					<input
+						value={service.version}
+						id="service"
+						disabled
+						class="cursor-pointer hover:bg-coolgray-500"
+					/></a
+				>
+			</div>
 			<div class="grid grid-cols-2 items-center px-10">
 				<label for="destination" class="text-base font-bold text-stone-100">Destination</label>
 				<div>

src/routes/services/[id]/configuration/type.json.ts

@@ -1,6 +1,7 @@
 import { getUserDetails } from '$lib/common';
+import { supportedServiceTypesAndVersions } from '$lib/components/common';
 import * as db from '$lib/database';
-import { ErrorHandler, supportedServiceTypesAndVersions } from '$lib/database';
+import { ErrorHandler } from '$lib/database';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const get: RequestHandler = async (event) => {

src/routes/services/[id]/configuration/version.json.ts

@@ -1,6 +1,7 @@
 import { getUserDetails } from '$lib/common';
+import { supportedServiceTypesAndVersions } from '$lib/components/common';
 import * as db from '$lib/database';
-import { ErrorHandler, supportedServiceTypesAndVersions } from '$lib/database';
+import { ErrorHandler } from '$lib/database';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const get: RequestHandler = async (event) => {
@@ -14,6 +15,7 @@ export const get: RequestHandler = async (event) => {
 		return {
 			status: 200,
 			body: {
+				type,
 				versions: supportedServiceTypesAndVersions.find((name) => name.name === type).versions
 			}
 		};

src/routes/services/[id]/configuration/version.svelte

@@ -31,11 +31,16 @@
 	import { errorNotification } from '$lib/form';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
+	import { supportedServiceTypesAndVersions } from '$lib/components/common';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
 
 	export let versions;
+	export let type;
+	let recommendedVersion = supportedServiceTypesAndVersions.find(
+		({ name }) => name === type
+	)?.recommendedVersion;
 	async function handleSubmit(version) {
 		try {
 			await post(`/services/${id}/configuration/version.json`, { version });
@@ -49,13 +54,26 @@
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">Select a Service version</div>
 </div>
-
+{#if from}
+	<div class="pb-10 text-center">
+		Warning: you are about to change the version of this service.<br />This could cause problem
+		after you restart the service,
+		<span class="font-bold text-pink-600">like losing your data, incompatibility issues, etc</span
+		>.<br />Only do if you know what you are doing.
+	</div>
+{/if}
 <div class="flex flex-wrap justify-center">
 	{#each versions as version}
 		<div class="p-2">
 			<form on:submit|preventDefault={() => handleSubmit(version)}>
-				<button type="submit" class="box-selection text-xl font-bold hover:bg-pink-600"
-					>{version}</button
+				<button
+					type="submit"
+					class:bg-pink-500={recommendedVersion === version}
+					class="box-selection relative flex text-xl font-bold hover:bg-pink-600"
+					>{version}
+					{#if recommendedVersion === version}
+						<span class="absolute bottom-0 pb-2 text-xs">recommended</span>
+					{/if}</button
 				>
 			</form>
 		</div>