From 50e681d15fe43be1a76c24bc229153f51a2fa64f Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Fri, 22 Dec 2023 08:27:50 +0100
Subject: [PATCH] feat: checks custom domains before delete satellite

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>
---
 src/frontend/src/lib/api/satellites.api.ts    |   4 +-
 .../CanisterDeleteWizard.svelte}              | 157 +++++++++---------
 .../src/lib/components/hosting/Hosting.svelte |  16 +-
 .../modals/OrbiterDeleteModal.svelte          |   7 +-
 .../modals/SatelliteDeleteModal.svelte        |  40 ++++-
 .../satellites/SatelliteActions.svelte        |  41 ++++-
 src/frontend/src/lib/i18n/en.json             |   1 +
 src/frontend/src/lib/i18n/zh-cn.json          |   1 +
 .../src/lib/services/hosting.services.ts      |  28 +++-
 src/frontend/src/lib/types/custom-domain.ts   |   4 +
 src/frontend/src/lib/types/i18n.d.ts          |   1 +
 src/frontend/src/lib/types/modal.ts           |  12 +-
 12 files changed, 199 insertions(+), 113 deletions(-)
 rename src/frontend/src/lib/components/{modals/CanisterDeleteModal.svelte => canister/CanisterDeleteWizard.svelte} (62%)

diff --git a/src/frontend/src/lib/api/satellites.api.ts b/src/frontend/src/lib/api/satellites.api.ts
index acb65b8c4f..72518d71a9 100644
--- a/src/frontend/src/lib/api/satellites.api.ts
+++ b/src/frontend/src/lib/api/satellites.api.ts
@@ -1,6 +1,5 @@
 import type { Controller } from '$declarations/mission_control/mission_control.did';
 import type {
-	CustomDomain,
 	DelDoc as DelRule,
 	Doc,
 	ListResults as ListAssets,
@@ -11,6 +10,7 @@ import type {
 } from '$declarations/satellite/satellite.did';
 import type { MemoryText, PermissionText } from '$lib/constants/rules.constants';
 import { MemoryHeap } from '$lib/constants/rules.constants';
+import type { CustomDomains } from '$lib/types/custom-domain';
 import type { OptionIdentity } from '$lib/types/itentity';
 import type { ListParams } from '$lib/types/list';
 import { getSatelliteActor } from '$lib/utils/actor.juno.utils';
@@ -175,7 +175,7 @@ export const listCustomDomains = async ({
 }: {
 	satelliteId: Principal;
 	identity: OptionIdentity;
-}): Promise<[string, CustomDomain][]> => {
+}): Promise<CustomDomains> => {
 	const actor = await getSatelliteActor({ satelliteId, identity });
 	return actor.list_custom_domains();
 };
diff --git a/src/frontend/src/lib/components/modals/CanisterDeleteModal.svelte b/src/frontend/src/lib/components/canister/CanisterDeleteWizard.svelte
similarity index 62%
rename from src/frontend/src/lib/components/modals/CanisterDeleteModal.svelte
rename to src/frontend/src/lib/components/canister/CanisterDeleteWizard.svelte
index dfd5c8c737..0a476e7e67 100644
--- a/src/frontend/src/lib/components/modals/CanisterDeleteModal.svelte
+++ b/src/frontend/src/lib/components/canister/CanisterDeleteWizard.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { i18n } from '$lib/stores/i18n.store';
 	import SpinnerModal from '$lib/components/ui/SpinnerModal.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { isBusy, wizardBusy } from '$lib/stores/busy.store';
 	import Value from '$lib/components/ui/Value.svelte';
@@ -14,7 +13,7 @@
 	import { loadSatellites } from '$lib/services/satellites.services';
 	import { goto } from '$app/navigation';
 	import type { Principal } from '@dfinity/principal';
-	import {ONE_TRILLION, DEFAULT_TCYCLES_TO_RETAIN_ON_DELETION} from '$lib/constants/constants';
+	import { ONE_TRILLION, DEFAULT_TCYCLES_TO_RETAIN_ON_DELETION } from '$lib/constants/constants';
 	import { i18nCapitalize, i18nFormat } from '$lib/utils/i18n.utils';
 	import { formatTCycles } from '$lib/utils/cycles.utils';
 
@@ -111,87 +110,85 @@
 	};
 </script>
 
-<Modal on:junoClose>
-	{#if steps === 'in_progress'}
-		<SpinnerModal>
-			<p>{$i18n.canisters.delete_in_progress}</p>
-		</SpinnerModal>
-	{:else}
-		<form on:submit|preventDefault={onSubmit}>
-			<h2>
-				{@html i18nFormat($i18n.canisters.delete_title, [
+{#if steps === 'in_progress'}
+	<SpinnerModal>
+		<p>{$i18n.canisters.delete_in_progress}</p>
+	</SpinnerModal>
+{:else}
+	<form on:submit|preventDefault={onSubmit}>
+		<h2>
+			{@html i18nFormat($i18n.canisters.delete_title, [
+				{
+					placeholder: '{0}',
+					value: segment.replace('_', ' ')
+				}
+			])}
+		</h2>
+
+		<p>
+			{@html i18nFormat($i18n.canisters.delete_explanation, [
+				{
+					placeholder: '{0}',
+					value: segment.replace('_', ' ')
+				},
+				{
+					placeholder: '{1}',
+					value: segment.replace('_', ' ')
+				}
+			])}
+		</p>
+
+		<p>
+			{@html i18nFormat($i18n.canisters.delete_customization, [
+				{
+					placeholder: '{0}',
+					value: segment.replace('_', ' ')
+				},
+				{
+					placeholder: '{1}',
+					value: formatTCycles(currentCycles)
+				}
+			])}
+		</p>
+
+		<Value ref="cycles">
+			<svelte:fragment slot="label">{$i18n.canisters.cycles_to_retain}</svelte:fragment>
+
+			<Input
+				name="cycles"
+				inputType="icp"
+				required
+				bind:value={tCycles}
+				placeholder={$i18n.canisters.amount}
+			/>
+		</Value>
+
+		<p>
+			<small
+				>{@html i18nFormat($i18n.canisters.cycles_to_transfer, [
 					{
 						placeholder: '{0}',
-						value: segment.replace('_', ' ')
+						value: formatTCycles(cyclesToDeposit)
 					}
-				])}
-			</h2>
-
-			<p>
-				{@html i18nFormat($i18n.canisters.delete_explanation, [
-					{
-						placeholder: '{0}',
-						value: segment.replace('_', ' ')
-					},
-					{
-						placeholder: '{1}',
-						value: segment.replace('_', ' ')
-					}
-				])}
-			</p>
-
-			<p>
-				{@html i18nFormat($i18n.canisters.delete_customization, [
-					{
-						placeholder: '{0}',
-						value: segment.replace('_', ' ')
-					},
-					{
-						placeholder: '{1}',
-						value: formatTCycles(currentCycles)
-					}
-				])}
-			</p>
-
-			<Value ref="cycles">
-				<svelte:fragment slot="label">{$i18n.canisters.cycles_to_retain}</svelte:fragment>
-
-				<Input
-					name="cycles"
-					inputType="icp"
-					required
-					bind:value={tCycles}
-					placeholder={$i18n.canisters.amount}
-				/>
-			</Value>
-
-			<p>
-				<small
-					>{@html i18nFormat($i18n.canisters.cycles_to_transfer, [
-						{
-							placeholder: '{0}',
-							value: formatTCycles(cyclesToDeposit)
-						}
-					])}</small
-				>
-			</p>
-
-			<p class="warning">
-				<IconWarning />
-				{@html i18nFormat($i18n.canisters.delete_info, [
-					{
-						placeholder: '{0}',
-						value: segment.replace('_', ' ')
-					}
-				])}
-			</p>
-
-			<button type="submit" class="submit" disabled={$isBusy || !validConfirm}>
-				{$i18n.core.delete}
-			</button>
-		</form>
-	{/if}
-</Modal>
+				])}</small
+			>
+		</p>
+
+		<p class="warning">
+			<IconWarning />
+			{@html i18nFormat($i18n.canisters.delete_info, [
+				{
+					placeholder: '{0}',
+					value: segment.replace('_', ' ')
+				}
+			])}
+		</p>
+
+		<button type="submit" class="submit" disabled={$isBusy || !validConfirm}>
+			{$i18n.core.delete}
+		</button>
+	</form>
+{/if}
 
 <style lang="scss">
 	.warning {
diff --git a/src/frontend/src/lib/components/hosting/Hosting.svelte b/src/frontend/src/lib/components/hosting/Hosting.svelte
index 761394c877..4ae649e763 100644
--- a/src/frontend/src/lib/components/hosting/Hosting.svelte
+++ b/src/frontend/src/lib/components/hosting/Hosting.svelte
@@ -4,7 +4,6 @@
 	import CustomDomain from '$lib/components/hosting/CustomDomain.svelte';
 	import AddCustomDomain from '$lib/components/hosting/AddCustomDomain.svelte';
 	import { onMount } from 'svelte';
-	import { toasts } from '$lib/stores/toasts.store';
 	import type { CustomDomain as CustomDomainType } from '$declarations/satellite/satellite.did';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { listCustomDomains } from '$lib/services/hosting.services';
@@ -19,16 +18,11 @@
 	let customDomains: [string, CustomDomainType][] = [];
 
 	const list = async () => {
-		try {
-			customDomains = await listCustomDomains({
-				satelliteId: satellite.satellite_id
-			});
-		} catch (err: unknown) {
-			toasts.error({
-				text: $i18n.errors.hosting_loading_errors,
-				detail: err
-			});
-		}
+		const { customDomains: domains } = await listCustomDomains({
+			satelliteId: satellite.satellite_id
+		});
+
+		customDomains = domains ?? [];
 	};
 
 	onMount(list);
diff --git a/src/frontend/src/lib/components/modals/OrbiterDeleteModal.svelte b/src/frontend/src/lib/components/modals/OrbiterDeleteModal.svelte
index 1dc0926707..d448101ffc 100644
--- a/src/frontend/src/lib/components/modals/OrbiterDeleteModal.svelte
+++ b/src/frontend/src/lib/components/modals/OrbiterDeleteModal.svelte
@@ -2,10 +2,11 @@
 	import type { JunoModalCycles, JunoModalDetail } from '$lib/types/modal';
 	import { deleteOrbiter } from '$lib/api/mission-control.api';
 	import type { Principal } from '@dfinity/principal';
-	import CanisterDeleteModal from '$lib/components/modals/CanisterDeleteModal.svelte';
+	import CanisterDeleteWizard from '$lib/components/canister/CanisterDeleteWizard.svelte';
 	import { nonNullish } from '@dfinity/utils';
 	import { orbiterStore } from '$lib/stores/orbiter.store';
 	import { authStore } from '$lib/stores/auth.store';
+	import Modal from '$lib/components/ui/Modal.svelte';
 
 	export let detail: JunoModalDetail;
 
@@ -23,5 +24,7 @@
 </script>
 
 {#if nonNullish($orbiterStore)}
-	<CanisterDeleteModal {deleteFn} {currentCycles} on:junoClose segment="analytics" />
+	<Modal on:junoClose>
+		<CanisterDeleteWizard {deleteFn} {currentCycles} on:junoClose segment="analytics" />
+	</Modal>
 {/if}
diff --git a/src/frontend/src/lib/components/modals/SatelliteDeleteModal.svelte b/src/frontend/src/lib/components/modals/SatelliteDeleteModal.svelte
index 2a53c23f7d..6a81c2faaf 100644
--- a/src/frontend/src/lib/components/modals/SatelliteDeleteModal.svelte
+++ b/src/frontend/src/lib/components/modals/SatelliteDeleteModal.svelte
@@ -1,17 +1,27 @@
 <script lang="ts">
-	import type { JunoModalCyclesSatelliteDetail, JunoModalDetail } from '$lib/types/modal';
+	import type { JunoModalDeleteSatelliteDetail, JunoModalDetail } from '$lib/types/modal';
 	import type { Satellite } from '$declarations/mission_control/mission_control.did';
 	import { deleteSatellite } from '$lib/api/mission-control.api';
 	import type { Principal } from '@dfinity/principal';
-	import CanisterDeleteModal from '$lib/components/modals/CanisterDeleteModal.svelte';
+	import CanisterDeleteWizard from '$lib/components/canister/CanisterDeleteWizard.svelte';
 	import { authStore } from '$lib/stores/auth.store';
+	import type { CustomDomains } from '$lib/types/custom-domain';
+	import Modal from '$lib/components/ui/Modal.svelte';
+	import { i18nFormat } from '$lib/utils/i18n.utils';
+	import { i18n } from '$lib/stores/i18n.store';
+	import { createEventDispatcher } from 'svelte';
 
 	export let detail: JunoModalDetail;
 
 	let satellite: Satellite;
 	let currentCycles: bigint;
+	let customDomains: CustomDomains;
 
-	$: ({ satellite, cycles: currentCycles } = detail as JunoModalCyclesSatelliteDetail);
+	$: ({
+		satellite,
+		cycles: currentCycles,
+		customDomains
+	} = detail as JunoModalDeleteSatelliteDetail);
 
 	let deleteFn: (params: { missionControlId: Principal; cyclesToDeposit: bigint }) => Promise<void>;
 	$: deleteFn = async (params: { missionControlId: Principal; cyclesToDeposit: bigint }) =>
@@ -20,6 +30,28 @@
 			satelliteId: satellite.satellite_id,
 			identity: $authStore.identity
 		});
+
+	const dispatch = createEventDispatcher();
+	const close = () => dispatch('junoClose');
 </script>
 
-<CanisterDeleteModal {deleteFn} {currentCycles} on:junoClose segment="satellite" />
+<Modal on:junoClose>
+	{#if customDomains.length > 0}
+		<h2>
+			{@html i18nFormat($i18n.canisters.delete_title, [
+				{
+					placeholder: '{0}',
+					value: 'satellite'
+				}
+			])}
+		</h2>
+
+		<p>
+			{$i18n.canisters.delete_custom_domain}
+		</p>
+
+		<button on:click={close}>{$i18n.core.close}</button>
+	{:else}
+		<CanisterDeleteWizard {deleteFn} {currentCycles} on:junoClose segment="satellite" />
+	{/if}
+</Modal>
diff --git a/src/frontend/src/lib/components/satellites/SatelliteActions.svelte b/src/frontend/src/lib/components/satellites/SatelliteActions.svelte
index d51bcb509c..248ed2eca4 100644
--- a/src/frontend/src/lib/components/satellites/SatelliteActions.svelte
+++ b/src/frontend/src/lib/components/satellites/SatelliteActions.svelte
@@ -7,6 +7,8 @@
 	import { emit } from '$lib/utils/events.utils';
 	import CanisterTransferCycles from '$lib/components/canister/CanisterTransferCycles.svelte';
 	import CanisterDelete from '$lib/components/canister/CanisterDelete.svelte';
+	import { busy } from '$lib/stores/busy.store';
+	import { listCustomDomains } from '$lib/services/hosting.services';
 
 	export let satellite: Satellite;
 
@@ -25,13 +27,13 @@
 	let visible: boolean | undefined;
 	const close = () => (visible = false);
 
-	const onCanisterAction = (type: 'delete_satellite' | 'transfer_cycles_satellite') => {
+	const onTransferCycles = () => {
 		close();
 
 		emit({
 			message: 'junoModal',
 			detail: {
-				type,
+				type: 'transfer_cycles_satellite',
 				detail: {
 					satellite,
 					cycles: canister?.data?.canister?.cycles ?? 0n
@@ -39,6 +41,34 @@
 			}
 		});
 	};
+
+	const onDeleteSatellite = async () => {
+		close();
+
+		busy.start();
+
+		const { customDomains, success } = await listCustomDomains({
+			satelliteId: satellite.satellite_id
+		});
+
+		busy.stop();
+
+		if (!success) {
+			return;
+		}
+
+		emit({
+			message: 'junoModal',
+			detail: {
+				type: 'delete_satellite',
+				detail: {
+					satellite,
+					cycles: canister?.data?.canister?.cycles ?? 0n,
+					customDomains: customDomains ?? []
+				}
+			}
+		});
+	};
 </script>
 
 <svelte:window on:junoSyncCanister={({ detail: { canister } }) => onSyncCanister(canister)} />
@@ -46,12 +76,9 @@
 <Actions bind:visible>
 	<TopUp type="topup_satellite" {detail} on:junoTopUp={close} />
 
-	<CanisterTransferCycles
-		{canister}
-		on:click={() => onCanisterAction('transfer_cycles_satellite')}
-	/>
+	<CanisterTransferCycles {canister} on:click={onTransferCycles} />
 
 	<CanisterStopStart {canister} segment="satellite" on:junoStop={close} on:junoStart={close} />
 
-	<CanisterDelete {canister} on:click={() => onCanisterAction('delete_satellite')} />
+	<CanisterDelete {canister} on:click={onDeleteSatellite} />
 </Actions>
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index f214b96a0d..7d2595da13 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/src/frontend/src/lib/i18n/en.json
@@ -68,6 +68,7 @@
 		"delete_title": "Delete {0}",
 		"delete_explanation": "Cycles are necessary to delete the {0}, but the Internet Computer doesn't specify the exact amount required for this operation. Therefore, we recommend retaining 0.5 T Cycles on your {1} for this purpose.",
 		"delete_customization": "You have the flexibility to modify this value if needed. Your current {0} balance is {1} T Cycles. Any remaining cycles will be transferred to your mission control. ",
+		"delete_custom_domain": "To delete a satellite, you should first remove its custom domain. This ensures that no leftovers are retained in the boundary nodes configuration, in case you intend to reuse the domain name in the future.",
 		"cycles_to_retain": "T Cycles to retain",
 		"cycles_to_transfer": "{0} T Cycles will be transferred to your mission control.",
 		"delete_info": "Do you want to delete your {0}? This action is irreversible.",
diff --git a/src/frontend/src/lib/i18n/zh-cn.json b/src/frontend/src/lib/i18n/zh-cn.json
index d694ef142d..d869b7e904 100644
--- a/src/frontend/src/lib/i18n/zh-cn.json
+++ b/src/frontend/src/lib/i18n/zh-cn.json
@@ -68,6 +68,7 @@
 		"delete_title": "删除 {0}",
 		"delete_explanation": "Cycles are necessary to delete the {0}, but the Internet Computer doesn't specify the exact amount required for this operation. Therefore, we recommend retaining 0.5 T Cycles on your {1} for this purpose.",
 		"delete_customization": "你可以根据需要修改这个值. 您当前的 {0} 余额是 {1} T Cycles. 任何剩余的 cycles 会被转移到您的 mission control. ",
+		"delete_custom_domain": "To delete a satellite, you should first remove its custom domain. This ensures that no leftovers are retained in the boundary nodes configuration, in case you intend to reuse the domain name in the future.",
 		"cycles_to_retain": "T Cycles 保留 ",
 		"cycles_to_transfer": "{0} T Cycles 会被转移到您的 mission control.",
 		"delete_info": "你确定要删除你的 {0}? 这个操作是不可逆的.",
diff --git a/src/frontend/src/lib/services/hosting.services.ts b/src/frontend/src/lib/services/hosting.services.ts
index 6e055c0bf7..9a35fc9321 100644
--- a/src/frontend/src/lib/services/hosting.services.ts
+++ b/src/frontend/src/lib/services/hosting.services.ts
@@ -6,6 +6,9 @@ import {
 } from '$lib/api/satellites.api';
 import { deleteDomain, registerDomain } from '$lib/rest/bn.rest';
 import { authStore } from '$lib/stores/auth.store';
+import { i18n } from '$lib/stores/i18n.store';
+import { toasts } from '$lib/stores/toasts.store';
+import type { CustomDomains } from '$lib/types/custom-domain';
 import type { Principal } from '@dfinity/principal';
 import { fromNullable, nonNullish } from '@dfinity/utils';
 import { get } from 'svelte/store';
@@ -72,11 +75,24 @@ export const listCustomDomains = async ({
 	satelliteId
 }: {
 	satelliteId: Principal;
-}): Promise<[string, CustomDomain][]> => {
-	const identity = get(authStore).identity;
+}): Promise<{ success: boolean; customDomains?: CustomDomains }> => {
+	try {
+		const identity = get(authStore).identity;
 
-	return listCustomDomainsApi({
-		satelliteId,
-		identity
-	});
+		const customDomains = await listCustomDomainsApi({
+			satelliteId,
+			identity
+		});
+
+		return { success: true, customDomains };
+	} catch (err: unknown) {
+		const labels = get(i18n);
+
+		toasts.error({
+			text: labels.errors.hosting_loading_errors,
+			detail: err
+		});
+
+		return { success: false };
+	}
 };
diff --git a/src/frontend/src/lib/types/custom-domain.ts b/src/frontend/src/lib/types/custom-domain.ts
index 9446b52d23..8f9061d3a2 100644
--- a/src/frontend/src/lib/types/custom-domain.ts
+++ b/src/frontend/src/lib/types/custom-domain.ts
@@ -1,3 +1,7 @@
+import type { CustomDomain } from '$declarations/satellite/satellite.did';
+
+export type CustomDomains = [string, CustomDomain][];
+
 export interface CustomDomainDnsEntry {
 	type: 'TXT' | 'CNAME';
 	host?: string;
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index fa37281f89..78e224c621 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/src/frontend/src/lib/types/i18n.d.ts
@@ -72,6 +72,7 @@ interface I18nCanisters {
 	delete_title: string;
 	delete_explanation: string;
 	delete_customization: string;
+	delete_custom_domain: string;
 	cycles_to_retain: string;
 	cycles_to_transfer: string;
 	delete_info: string;
diff --git a/src/frontend/src/lib/types/modal.ts b/src/frontend/src/lib/types/modal.ts
index 0b59a0d463..867580a2c3 100644
--- a/src/frontend/src/lib/types/modal.ts
+++ b/src/frontend/src/lib/types/modal.ts
@@ -1,6 +1,7 @@
 import type { Satellite } from '$declarations/mission_control/mission_control.did';
 import type { MissionControlBalance } from '$lib/types/balance.types';
 import type { SetControllerParams } from '$lib/types/controllers';
+import type { CustomDomains } from '$lib/types/custom-domain';
 import type { Principal } from '@dfinity/principal';
 
 export interface JunoModalBalance {
@@ -39,8 +40,16 @@ export interface JunoModalCycles {
 	cycles: bigint;
 }
 
+export interface JunoModalCustomDomainsDetail {
+	customDomains: CustomDomains;
+}
+
 export type JunoModalCyclesSatelliteDetail = JunoModalCycles & JunoModalSatelliteDetail;
 
+export type JunoModalDeleteSatelliteDetail = JunoModalCycles &
+	JunoModalCustomDomainsDetail &
+	JunoModalSatelliteDetail;
+
 export interface JunoModalCreateControllerDetail {
 	add: (
 		params: {
@@ -60,7 +69,8 @@ export type JunoModalDetail =
 	| JunoModalCreateSegmentDetail
 	| JunoModalCustomDomainDetail
 	| JunoModalCreateControllerDetail
-	| JunoModalCyclesSatelliteDetail;
+	| JunoModalCyclesSatelliteDetail
+	| JunoModalDeleteSatelliteDetail;
 
 export interface JunoModal {
 	type: