feat: option to delete orbiter (#320)

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>

src/frontend/src/lib/components/canister/CanisterDelete.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { i18n } from '$lib/stores/i18n.store';
+	import type { Canister } from '$lib/types/canister';
+	import { nonNullish } from '@dfinity/utils';
+	import IconDelete from '$lib/components/icons/IconDelete.svelte';
+	import { fade } from 'svelte/transition';
+	import { createEventDispatcher } from 'svelte';
+
+	export let canister: Canister | undefined = undefined;
+
+	const dispatch = createEventDispatcher();
+
+	const onDelete = () => dispatch('junoDelete');
+
+	let enabled = false;
+	$: enabled =
+		nonNullish(canister) && nonNullish(canister.data) && canister.data.status === 'running';
+</script>
+
+{#if enabled}
+	<div in:fade>
+		<button class="menu" on:click={onDelete}><IconDelete /> {$i18n.core.delete}</button>
+	</div>
+{/if}

src/frontend/src/lib/components/modals/CanisterDeleteModal.svelte

@@ -15,10 +15,10 @@
 	import { goto } from '$app/navigation';
 	import type { Principal } from '@dfinity/principal';
 	import { ONE_TRILLION } from '$lib/constants/constants';
-	import { i18nFormat } from '$lib/utils/i18n.utils';
+	import { i18nCapitalize, i18nFormat } from '$lib/utils/i18n.utils';
 	import { formatTCycles } from '$lib/utils/cycles.utils';
 
-	export let segment: 'satellite' | 'orbiter';
+	export let segment: 'satellite' | 'analytics';
 	export let currentCycles: bigint;
 	export let deleteFn: (params: {
 		missionControlId: Principal;
@@ -89,7 +89,16 @@
 
 			close();
 
-			toasts.success($i18n.satellites.delete_success);
+			toasts.success(
+				i18nCapitalize(
+					i18nFormat($i18n.canisters.delete_success, [
+						{
+							placeholder: '{0}',
+							value: segment
+						}
+					])
+				)
+			);
 		} catch (err: unknown) {
 			steps = 'error';
 

src/frontend/src/lib/components/modals/Modals.svelte

@@ -12,6 +12,7 @@
 	import OrbiterUpgradeModal from '$lib/components/modals/OrbiterUpgradeModal.svelte';
 	import OrbiterTopUpModal from '$lib/components/modals/OrbiterTopUpModal.svelte';
 	import SatelliteDeleteModal from '$lib/components/modals/SatelliteDeleteModal.svelte';
+	import OrbiterDeleteModal from '$lib/components/modals/OrbiterDeleteModal.svelte';
 
 	let modal: JunoModal | undefined = undefined;
 
@@ -63,3 +64,7 @@
 {#if modal?.type === 'delete_satellite' && nonNullish(modal.detail)}
 	<SatelliteDeleteModal on:junoClose={close} detail={modal.detail} />
 {/if}
+
+{#if modal?.type === 'delete_orbiter' && nonNullish(modal.detail)}
+	<OrbiterDeleteModal on:junoClose={close} detail={modal.detail} />
+{/if}

src/frontend/src/lib/components/modals/OrbiterDeleteModal.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { JunoModalDeleteOrbiterDetail, 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 { nonNullish } from '@dfinity/utils';
+	import { orbiterStore } from '$lib/stores/orbiter.store';
+
+	export let detail: JunoModalDetail;
+
+	let currentCycles: bigint;
+
+	$: ({ cycles: currentCycles } = detail as JunoModalDeleteOrbiterDetail);
+
+	let deleteFn: (params: {
+		missionControlId: Principal;
+		cycles_to_retain: bigint;
+	}) => Promise<void>;
+	$: deleteFn = async (params: { missionControlId: Principal; cycles_to_retain: bigint }) =>
+		deleteOrbiter({
+			...params,
+			orbiterId: $orbiterStore!.orbiter_id
+		});
+</script>
+
+{#if nonNullish($orbiterStore)}
+	<CanisterDeleteModal {deleteFn} {currentCycles} on:junoClose segment="analytics" />
+{/if}

src/frontend/src/lib/components/orbiter/OrbiterActions.svelte

@@ -4,6 +4,7 @@
 	import CanisterStopStart from '$lib/components/canister/CanisterStopStart.svelte';
 	import type { Orbiter } from '$declarations/mission_control/mission_control.did';
 	import type { Canister } from '$lib/types/canister';
+	import OrbiterDelete from '$lib/components/orbiter/OrbiterDelete.svelte';
 
 	export let orbiter: Orbiter;
 
@@ -27,4 +28,6 @@
 	<TopUp type="topup_orbiter" on:junoTopUp={close} />
 
 	<CanisterStopStart {canister} segment="orbiter" on:junoStop={close} on:junoStart={close} />
+
+	<OrbiterDelete {canister} on:junoDelete={close} />
 </Actions>

src/frontend/src/lib/components/orbiter/OrbiterDelete.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Orbiter } from '$declarations/mission_control/mission_control.did';
+	import type { Canister } from '$lib/types/canister';
+	import { emit } from '$lib/utils/events.utils';
+	import { createEventDispatcher } from 'svelte';
+	import CanisterDelete from '$lib/components/canister/CanisterDelete.svelte';
+
+	export let canister: Canister | undefined = undefined;
+
+	const dispatch = createEventDispatcher();
+
+	const onDelete = () => {
+		dispatch('junoDelete');
+
+		emit({
+			message: 'junoModal',
+			detail: {
+				type: 'delete_orbiter',
+				detail: {
+					cycles: canister?.data?.cycles ?? 0n
+				}
+			}
+		});
+	};
+</script>
+
+<CanisterDelete {canister} on:junoDelete={onDelete} />

src/frontend/src/lib/components/satellites/SatelliteDelete.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
-	import { i18n } from '$lib/stores/i18n.store';
 	import type { Satellite } from '$declarations/mission_control/mission_control.did';
 	import type { Canister } from '$lib/types/canister';
-	import { nonNullish } from '@dfinity/utils';
 	import { emit } from '$lib/utils/events.utils';
-	import IconDelete from '$lib/components/icons/IconDelete.svelte';
-	import { fade } from 'svelte/transition';
 	import { createEventDispatcher } from 'svelte';
+	import CanisterDelete from '$lib/components/canister/CanisterDelete.svelte';
 
 	export let satellite: Satellite;
 	export let canister: Canister | undefined = undefined;
@@ -27,14 +24,6 @@
 			}
 		});
 	};
-
-	let enabled = false;
-	$: enabled =
-		nonNullish(canister) && nonNullish(canister.data) && canister.data.status === 'running';
 </script>
 
-{#if enabled}
-	<div in:fade>
-		<button class="menu" on:click={onDelete}><IconDelete /> {$i18n.core.delete}</button>
-	</div>
-{/if}
+<CanisterDelete {canister} on:junoDelete={onDelete} />

src/frontend/src/lib/i18n/en.json

@@ -61,7 +61,7 @@
 		"upgrade_done": "Your {0} has been has been successfully upgraded to version <strong>{1}</strong>.",
 		"upgrade": "Upgrade",
 		"delete_title": "Delete {0}",
-		"delete_explanation": "Cycles are necessary to delete a {0}, but the Internet Computer doesn't specify the exact amount required for this operation. Therefore, we recommend retaining 1 T Cycles on your {1} for this purpose.",
+		"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 1 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. ",
 		"cycles_to_retain": "T Cycles to retain",
 		"cycles_to_transfer": "{0} T Cycles will be transferred to your mission control.",
@@ -74,7 +74,8 @@
 		"stop_success": "{0} stopped.",
 		"start_tile": "Restart {0}",
 		"start_info": "Do you want to resume your {0}?",
-		"start_success": "{0} resumed."
+		"start_success": "{0} resumed.",
+		"delete_success": "{0} deleted."
 	},
 	"sign_in": {
 		"title": "Launch your first satellite",
@@ -100,8 +101,7 @@
 		"create_satellite_price": "Starting a new satellite requires <strong>{0}</strong> ICP. Your current mission control balance is {1} ICP and you have {2} credits remaining.",
 		"loading_satellites": "Loading your satellites",
 		"overview": "Overview",
-		"id": "Satellite ID",
-		"delete_success": "Satellite deleted."
+		"id": "Satellite ID"
 	},
 	"mission_control": {
 		"title": "Mission Control",

src/frontend/src/lib/i18n/zh-cn.json

@@ -61,7 +61,7 @@
 		"upgrade_done": "你的 {0} 已经成功的升级到版本 <strong>{1}</strong>.",
 		"upgrade": "升级",
 		"delete_title": "Delete {0}",
-		"delete_explanation": "Cycles are necessary to delete a {0}, but the Internet Computer doesn't specify the exact amount required for this operation. Therefore, we recommend retaining 1 T Cycles on your {1} for this purpose.",
+		"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 1 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. ",
 		"cycles_to_retain": "T Cycles to retain",
 		"cycles_to_transfer": "{0} T Cycles will be transferred to your mission control.",
@@ -74,7 +74,8 @@
 		"stop_success": "{0} 已停止.",
 		"start_tile": "重启 {0}",
 		"start_info": "你想恢复你的 {0}?",
-		"start_success": "{0} 已恢复."
+		"start_success": "{0} 已恢复.",
+		"delete_success": "{0} deleted."
 	},
 	"sign_in": {
 		"title": "创建你的第一个satellite",
@@ -100,8 +101,7 @@
 		"create_satellite_price": "为了创建新的 satellite 需要 <strong>{0}</strong> ICP. 你当前 mission control 余额是 {1} ICP 而且你还剩 {2} 积分.",
 		"loading_satellites": "加载你的satellites",
 		"overview": "概要",
-		"id": "Satellite ID",
-		"delete_success": "Satellite deleted."
+		"id": "Satellite ID"
 	},
 	"mission_control": {
 		"title": "Mission Control",

src/frontend/src/lib/types/i18n.d.ts

@@ -79,6 +79,7 @@ interface I18nCanisters {
 	start_tile: string;
 	start_info: string;
 	start_success: string;
+	delete_success: string;
 }
 
 interface I18nSign_in {
@@ -107,7 +108,6 @@ interface I18nSatellites {
 	loading_satellites: string;
 	overview: string;
 	id: string;
-	delete_success: string;
 }
 
 interface I18nMission_control {

src/frontend/src/lib/types/modal.ts

@@ -41,6 +41,9 @@ export interface JunoModalDelete {
 
 export type JunoModalDeleteSatelliteDetail = JunoModalDelete & JunoModalSatelliteDetail;
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface JunoModalDeleteOrbiterDetail extends JunoModalDelete {}
+
 export interface JunoModalCreateControllerDetail {
 	add: (
 		params: {