fix: UI + refactor

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

@@ -65,6 +65,7 @@
 	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	let statusInterval: any;
+	let forceDelete = false;
 	$disabledButton =
 		!$appSession.isAdmin ||
 		(!application.fqdn && !application.settings.isBot) ||
@@ -97,14 +98,17 @@
 		}
 	}
 
-	async function deleteApplication(name: string) {
+	async function deleteApplication(name: string, force: boolean) {
 		const sure = confirm($t('application.confirm_to_delete', { name }));
 		if (sure) {
 			$status.application.initialLoading = true;
 			try {
-				await del(`/applications/${id}`, { id });
+				await del(`/applications/${id}`, { id, force });
 				return await goto(`/applications`);
 			} catch (error) {
+				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/ssh-agent.pid`)) {
+					forceDelete = true;
+				}
 				return errorNotification(error);
 			} finally {
 				$status.application.initialLoading = false;
@@ -117,9 +121,9 @@
 			$status.application.loading = true;
 			await post(`/applications/${id}/restart`, {});
 			addToast({
-					type: 'success',
-					message: 'Restart successful.'
-				});
+				type: 'success',
+				message: 'Restart successful.'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -537,16 +541,29 @@
 	>
 	<div class="border border-coolgray-500 h-8" />
 
-	<button
-		id="delete"
-		on:click={() => deleteApplication(application.name)}
-		type="submit"
-		disabled={!$appSession.isAdmin}
-		class:hover:text-red-500={$appSession.isAdmin}
-		class="icons bg-transparent text-sm"
-	>
-		<DeleteIcon />
-	</button>
+	{#if forceDelete}
+		<button
+			on:click={() => deleteApplication(application.name, true)}
+			type="submit"
+			disabled={!$appSession.isAdmin}
+			class:bg-red-600={$appSession.isAdmin}
+			class:hover:bg-red-500={$appSession.isAdmin}
+			class="icons bg-transparent text-sm"
+		>
+			Force Delete
+		</button>
+	{:else}
+		<button
+			id="delete"
+			on:click={() => deleteApplication(application.name, false)}
+			type="submit"
+			disabled={!$appSession.isAdmin}
+			class:hover:text-red-500={$appSession.isAdmin}
+			class="icons bg-transparent text-sm"
+		>
+			<DeleteIcon />
+		</button>
+	{/if}
 </nav>
 <slot />
 

apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte

@@ -169,10 +169,6 @@
 			}
 		}
 	}
-	function selectBranch(event: any) {
-		selected.branch = event.detail;
-		isBranchAlreadyUsed();
-	}
 	async function loadBranches(page: number = 1) {
 		let perPage = 100;
 		//@ts-ignore
@@ -199,21 +195,22 @@
 		}
 	}
 
-	async function isBranchAlreadyUsed() {
+	async function isBranchAlreadyUsed(event) {
+		selected.branch = event.detail;
 		try {
-			const data = await get(
-				`/applications/${id}/configuration/repository?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
-			);
-			if (data.used) {
-				const sure = confirm($t('application.configuration.branch_already_in_use'));
-				if (sure) {
-					autodeploy = false;
-					showSave = true;
-					return true;
-				}
-				showSave = false;
-				return true;
-			}
+			// const data = await get(
+			// 	`/applications/${id}/configuration/repository?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
+			// );
+			// if (data.used) {
+			// 	const sure = confirm($t('application.configuration.branch_already_in_use'));
+			// 	if (sure) {
+			// 		autodeploy = false;
+			// 		showSave = true;
+			// 		return true;
+			// 	}
+			// 	showSave = false;
+			// 	return true;
+			// }
 			showSave = true;
 		} catch (error) {
 			return errorNotification(error);
@@ -227,9 +224,7 @@
 		}
 	}
 	async function setWebhook(url: any, webhookToken: any) {
-		const host = dev
-			? getWebhookUrl('gitlab')
-			: `${window.location.origin}/webhooks/gitlab/events`;
+		const host = dev ? getWebhookUrl('gitlab') : `${window.location.origin}/webhooks/gitlab/events`;
 		try {
 			await post(
 				url,
@@ -294,17 +289,15 @@
 			);
 			await post(updateDeployKeyIdUrl, { deployKeyId: id });
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}
 
 		try {
 			await setWebhook(webhookUrl, webhookToken);
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}
 
 		const url = `/applications/${id}/configuration/repository`;
@@ -317,11 +310,11 @@
 				autodeploy,
 				webhookToken
 			});
+			loading.save = false;
 			return await goto(from || `/applications/${id}/configuration/buildpack`);
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}
 	}
 	async function handleSubmit() {
@@ -396,7 +389,7 @@
 				showIndicator={!loading.branches}
 				isWaiting={loading.branches}
 				isDisabled={loading.branches || !selected.project}
-				on:select={selectBranch}
+				on:select={isBranchAlreadyUsed}
 				on:clear={() => {
 					showSave = false;
 					selected.branch = null;
@@ -425,7 +418,7 @@
 				configuration <a href={`/sources/${application.gitSource.id}`}>here.</a>
 			</div>
 			<button
-				class="w-40 bg-green-600"
+				class="btn btn-sm w-40 bg-green-600"
 				on:click|stopPropagation|preventDefault={() => window.location.reload()}
 			>
 				Try again

apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte

@@ -4,7 +4,6 @@
 	import { page } from '$app/stores';
 
 	import Select from 'svelte-select';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { goto } from '$app/navigation';
 	import { errorNotification } from '$lib/common';
 

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

@@ -32,7 +32,6 @@
 	import { errorNotification } from '$lib/common';
 	import { appSession } from '$lib/store';
 	import PublicRepository from './_PublicRepository.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import DocLink from '$lib/components/DocLink.svelte';
 
 	const { id } = $page.params;

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

@@ -526,7 +526,7 @@
 					disabled={$status.application.isRunning}
 				/>
 			</div>
-			<div class="grid grid-cols-2 items-center pb-8">
+			<div class="grid grid-cols-2 items-center">
 				<Setting
 					id="dualCerts"
 					dataTooltip={$t('forms.must_be_stopped_to_modify')}
@@ -539,15 +539,13 @@
 				/>
 			</div>
 			{#if !isBot}
-				<div class="grid grid-cols-2">
-					<div class="flex-col">
-						<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
-							>{$t('application.url_fqdn')}
-							<DocLink
-								explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
-							/>
-						</label>
-					</div>
+				<div class="grid grid-cols-2 items-center">
+					<label for="fqdn" class="text-base font-bold text-stone-100"
+						>{$t('application.url_fqdn')}
+						<DocLink
+							explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
+						/>
+					</label>
 					<div>
 						<input
 							readonly={isDisabled}
@@ -648,7 +646,10 @@
 			{/if}
 			{#if !staticDeployments.includes(application.buildPack)}
 				<div class="grid grid-cols-2 items-center">
-					<label for="port" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
+					<label for="port" class="text-base font-bold text-stone-100"
+						>{$t('forms.port')}
+						<DocLink explanation={'The port your application listens on.'} /></label
+					>
 					<input
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
@@ -657,7 +658,6 @@
 						bind:value={application.port}
 						placeholder="{$t('forms.default')}: 'python' ? '8000' : '3000'"
 					/>
-					<Explainer text={'The port your application listens on.'} />
 				</div>
 			{/if}
 			<div class="grid grid-cols-2 items-center">
@@ -676,7 +676,7 @@
 				/>
 			</div>
 			{#if !notNodeDeployments.includes(application.buildPack)}
-				<div class="grid grid-cols-2 items-center pt-4">
+				<div class="grid grid-cols-2 items-center">
 					<label for="installCommand" class="text-base font-bold text-stone-100"
 						>{$t('application.install_command')}</label
 					>

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

@@ -87,7 +87,9 @@
 </div>
 
 <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
-	
+	<div class="flex justify-center py-4 text-center">
+		<Explainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
+	</div>
 	<table class="mx-auto border-separate text-left">
 		<thead>
 			<tr class="h-12">
@@ -107,7 +109,4 @@
 			</tr>
 		</tbody>
 	</table>
-	<div class="flex justify-center py-4 text-center">
-		<Explainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
-	</div>
 </div>