fix: location url for services and apps

apps/ui/src/lib/store.ts

@@ -44,7 +44,7 @@ export const status: Writable<any> = writable({
         initialLoading: true,
         loading: false,
         isRunning: false
-    }, 
+    },
     database: {
         initialLoading: true,
         loading: false,
@@ -57,3 +57,17 @@ export const features = readable({
     beta: window.localStorage.getItem('beta') === 'true',
     latestVersion: window.localStorage.getItem('latestVersion')
 });
+
+export const location: Writable<null | string> = writable(null)
+export const setLocation = (resource: any) => {
+    console.log(GITPOD_WORKSPACE_URL)
+    if (GITPOD_WORKSPACE_URL && resource.exposePort) {
+        const { href } = new URL(GITPOD_WORKSPACE_URL);
+        const newURL = href
+            .replace('https://', `https://${resource.exposePort}-`)
+            .replace(/\/$/, '');
+        location.set(newURL)
+    } else {
+        location.set(resource.fqdn)
+    }
+}

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

@@ -62,12 +62,13 @@
 	import { toast } from '@zerodevx/svelte-toast';
 	import { onDestroy, onMount } from 'svelte';
 	import { t } from '$lib/translations';
-	import { appSession, disabledButton, status } from '$lib/store';
+	import { appSession, disabledButton, status, location, setLocation } from '$lib/store';
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
 	import Loading from '$lib/components/Loading.svelte';
 
 	let loading = false;
 	let statusInterval: any;
+
 	$disabledButton =
 		!$appSession.isAdmin ||
 		!application.fqdn ||
@@ -75,14 +76,7 @@
 		!application.repository ||
 		!application.destinationDocker ||
 		!application.buildPack;
-	let location = application.fqdn || null;
-	if (GITPOD_WORKSPACE_URL && application.exposePort) {
-		const { href } = new URL(GITPOD_WORKSPACE_URL);
-		const newURL = href
-			.replace('https://', `https://${application.exposePort}-`)
-			.replace(/\/$/, '');
-		location = newURL;
-	}
+
 	const { id } = $page.params;
 
 	async function handleDeploySubmit() {
@@ -134,9 +128,12 @@
 	}
 	onDestroy(() => {
 		$status.application.initialLoading = true;
+		$location = null;
 		clearInterval(statusInterval);
 	});
 	onMount(async () => {
+		setLocation(application);
+
 		$status.application.isRunning = false;
 		$status.application.isExited = false;
 		$status.application.loading = false;
@@ -155,9 +152,9 @@
 	{#if loading}
 		<Loading fullscreen cover />
 	{:else}
-		{#if location}
+		{#if $location}
 			<a
-				href={location}
+				href={$location}
 				target="_blank"
 				class="icons tooltip-bottom flex items-center bg-transparent text-sm"
 				><svg
@@ -177,7 +174,7 @@
 				</svg></a
 			>
 		{/if}
-	
+
 		<div class="border border-coolgray-500 h-8" />
 		{#if $status.application.isExited}
 			<a

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

@@ -35,7 +35,7 @@
 	import { get, post } from '$lib/api';
 	import cuid from 'cuid';
 	import { browser } from '$app/env';
-	import { appSession, disabledButton, status } from '$lib/store';
+	import { appSession, disabledButton, setLocation, status } from '$lib/store';
 	import { t } from '$lib/translations';
 	import { errorNotification, getDomain, notNodeDeployments, staticDeployments } from '$lib/common';
 	import Setting from './_Setting.svelte';
@@ -169,6 +169,7 @@
 				exposePort: application.exposePort
 			});
 			await post(`/applications/${id}`, { ...application });
+			setLocation(application)
 			$disabledButton = false;
 			forceSave = false;
 			return toast.push('Configurations saved.');
@@ -329,7 +330,6 @@
 			<div class="mt-2 grid grid-cols-2 items-center">
 				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 				<input
-					readonly={!isDisabled}
 					name="name"
 					id="name"
 					bind:value={application.name}

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

@@ -13,7 +13,7 @@
 	import { get, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
 	import { t } from '$lib/translations';
-	import { appSession, disabledButton, status } from '$lib/store';
+	import { appSession, disabledButton, status, location, setLocation } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
 	import Setting from '$lib/components/Setting.svelte';
@@ -45,6 +45,7 @@
 				exposePort: service.exposePort
 			});
 			await post(`/services/${id}`, { ...service });
+			setLocation(service)
 			$disabledButton = false;
 			toast.push('Configuration saved.');
 		} catch (error) {

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

@@ -61,9 +61,8 @@
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
-	import { appSession, disabledButton, status } from '$lib/store';
+	import { appSession, disabledButton, status, location, setLocation } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
-	import ServiceLinks from './_ServiceLinks.svelte';
 	const { id } = $page.params;
 
 	export let service: any;
@@ -78,13 +77,6 @@
 	let loading = false;
 	let statusInterval: any;
 
-	let location = service.fqdn || null;
-	if (GITPOD_WORKSPACE_URL && service.exposePort) {
-		const { href } = new URL(GITPOD_WORKSPACE_URL);
-		const newURL = href.replace('https://', `https://${service.exposePort}-`).replace(/\/$/, '');
-		location = newURL;
-	}
-
 	async function deleteService() {
 		const sure = confirm($t('application.confirm_to_delete', { name: service.name }));
 		if (sure) {
@@ -135,9 +127,11 @@
 	}
 	onDestroy(() => {
 		$status.service.initialLoading = true;
+		$location = null;
 		clearInterval(statusInterval);
 	});
 	onMount(async () => {
+		setLocation(service);
 		$status.service.isRunning = false;
 		$status.service.loading = false;
 		if (service.type && service.destinationDockerId && service.version && service.fqdn) {
@@ -156,9 +150,9 @@
 		<Loading fullscreen cover />
 	{:else}
 		{#if service.type && service.destinationDockerId && service.version}
-			{#if location}
+			{#if $location}
 				<a
-					href={location}
+					href={$location}
 					target="_blank"
 					class="icons tooltip-bottom flex items-center bg-transparent text-sm"
 					><svg
@@ -177,8 +171,8 @@
 						<polyline points="15 4 20 4 20 9" />
 					</svg></a
 				>
+				<div class="border border-stone-700 h-8" />
 			{/if}
-			<div class="border border-stone-700 h-8" />
 			{#if $status.service.initialLoading}
 				<button
 					class="icons tooltip-bottom flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"