junobuild · peterpeterparker · Dec 22, 2023 · Dec 22, 2023
diff --git 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/...ponents/modals/CanisterDeleteModal.svelte → ...ents/canister/CanisterDeleteWizard.svelte b/...ponents/modals/CanisterDeleteModal.svelte → ...ents/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
@@ -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
@@ -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
@@ -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
@@ -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,33 +27,58 @@
 	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
  }
  }
  });
 	};
+
+	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)} />
 
 <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>