package updates + tags selector

apps/ui/package.json

@@ -14,39 +14,39 @@
 		"format": "prettier --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
-		"@floating-ui/dom": "1.0.1",
-		"@playwright/test": "1.25.1",
+		"@floating-ui/dom": "1.0.3",
+		"@playwright/test": "1.27.1",
 		"@popperjs/core": "2.11.6",
 		"@sveltejs/kit": "1.0.0-next.405",
 		"@types/js-cookie": "3.0.2",
-		"@typescript-eslint/eslint-plugin": "5.36.1",
-		"@typescript-eslint/parser": "5.36.1",
-		"autoprefixer": "10.4.8",
-		"classnames": "2.3.1",
-		"eslint": "8.23.0",
+		"@typescript-eslint/eslint-plugin": "5.41.0",
+		"@typescript-eslint/parser": "5.41.0",
+		"autoprefixer": "10.4.12",
+		"classnames": "2.3.2",
+		"eslint": "8.26.0",
 		"eslint-config-prettier": "8.5.0",
 		"eslint-plugin-svelte3": "4.0.0",
-		"flowbite": "1.5.2",
-		"flowbite-svelte": "0.26.2",
-		"postcss": "8.4.16",
+		"flowbite": "1.5.3",
+		"flowbite-svelte": "0.27.11",
+		"postcss": "8.4.18",
 		"prettier": "2.7.1",
-		"prettier-plugin-svelte": "2.7.0",
-		"svelte": "3.50.0",
-		"svelte-check": "2.9.0",
+		"prettier-plugin-svelte": "2.8.0",
+		"svelte": "3.52.0",
+		"svelte-check": "2.9.2",
 		"svelte-preprocess": "4.10.7",
-		"tailwindcss": "3.1.8",
+		"tailwindcss": "3.2.1",
 		"tailwindcss-scrollbar": "0.1.0",
 		"tslib": "2.4.0",
-		"typescript": "4.8.2",
-		"vite": "3.1.0"
+		"typescript": "4.8.4",
+		"vite": "3.2.0"
 	},
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/adapter-static": "1.0.0-next.39",
+		"@sveltejs/adapter-static": "1.0.0-next.46",
 		"@tailwindcss/typography": "^0.5.7",
 		"cuid": "2.1.8",
-		"daisyui": "2.24.2",
-		"dayjs": "1.11.5",
+		"daisyui": "2.33.0",
+		"dayjs": "1.11.6",
 		"js-cookie": "3.0.1",
 		"js-yaml": "4.1.0",
 		"p-limit": "4.0.0",

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

@@ -13,7 +13,7 @@
 		try {
 			let readOnly = false;
 			const response = await get(`/services/${params.id}`);
-			const { service, settings, template } = await response;
+			const { service, settings, template, tags } = await response;
 			if (!service || Object.entries(service).length === 0) {
 				return {
 					status: 302,
@@ -43,7 +43,8 @@
 					service,
 					template,
 					readOnly,
-					settings
+					settings,
+					tags
 				}
 			};
 		} catch (error) {

apps/ui/src/routes/services/[id]/index.svelte

@@ -10,6 +10,7 @@
 <script lang="ts">
 	export let service: any;
 	export let template: any;
+	export let tags: any;
 	import cuid from 'cuid';
 	import { onMount } from 'svelte';
 	import { browser } from '$app/env';
@@ -33,6 +34,7 @@
 	import Explainer from '$lib/components/Explainer.svelte';
 	import ServiceStatus from '$lib/components/ServiceStatus.svelte';
 	import { saveForm } from './utils';
+	import Select from 'svelte-select';
 
 	const { id } = $page.params;
 	$: isDisabled =
@@ -53,6 +55,9 @@
 	let isNonWWWDomainOK = false;
 	let isWWWDomainOK = false;
 
+	function containerClass() {
+		return 'text-white bg-transparent font-thin px-0 w-full border border-dashed border-coolgray-200';
+	}
 	async function isDNSValid(domain: any, isWWW: any) {
 		try {
 			await get(`/services/${id}/check?domain=${domain}`);
@@ -166,6 +171,9 @@
 			loading.cleanup = false;
 		}
 	}
+	async function selectTag(event: any) {
+		service.version = event.detail.value;
+	}
 	onMount(async () => {
 		if (browser && window.location.hostname === 'demo.coolify.io' && !service.fqdn) {
 			service.fqdn = `http://${cuid()}.demo.coolify.io`;
@@ -250,19 +258,19 @@
 			</div>
 			<div class="grid grid-cols-2 items-center">
 				<label for="version">Version / Tag</label>
-				<a
-					href={isDisabled ? `/services/${id}/configuration/version?from=/services/${id}` : ''}
-					class="no-underline"
-				>
-					<input
-						class="w-full"
+				<div class="custom-select-wrapper w-full">
+					<Select
+						form="saveForm"
+						containerClasses={isDisabled && containerClass()}
+						{isDisabled}
+						id="version"
+						showIndicator={!isDisabled}
+						items={[...tags.tags]}
+						on:select={selectTag}
 						value={service.version}
-						id="service"
-						readonly={isDisabled}
-						disabled={isDisabled}
-						class:cursor-pointer={!$status.service.isRunning}
-					/></a
-				>
+						isClearable={false}
+					/>
+				</div>
 			</div>
 			<div class="grid grid-cols-2 items-center">
 				<label for="destination">{$t('application.destination')}</label>
@@ -439,8 +447,8 @@
 												bind:value={variable.value}
 												form="saveForm"
 											>
-												<option value="true">true</option>
-												<option value="false"> false</option>
+												<option value="true">enabled</option>
+												<option value="false">disabled</option>
 											</select>
 										{:else}
 											<select

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

@@ -43,7 +43,7 @@ export async function saveSecret({
 
 export async function saveForm(formData: any, service: any) {
 	const settings = service.serviceSetting.map((setting: { name: string }) => setting.name);
-	const baseCoolifySetting = ['name', 'fqdn', 'exposePort'];
+	const baseCoolifySetting = ['name', 'fqdn', 'exposePort', 'version'];
 	for (let field of formData) {
 		const [key, value] = field;
 		service.serviceSetting = service.serviceSetting.map((setting: any) => {
@@ -61,6 +61,9 @@ export async function saveForm(formData: any, service: any) {
 				isNew: true
 			});
 		}
+		if (baseCoolifySetting.includes(key)) {
+			service[key] = value;
+		}
 	}
 	await post(`/services/${service.id}`, { ...service });
 	const { service: reloadedService } = await get(`/services/${service.id}`);