Merge remote-tracking branch 'origin/main'

Author: peterpeterparker

src/frontend/src/lib/api/mission-control.api.ts

@@ -1,8 +1,8 @@
-import type { Controller, SetController } from '$declarations/mission_control/mission_control.did';
+import type { Controller } from '$declarations/mission_control/mission_control.did';
 import { getMissionControl } from '$lib/services/mission-control.services';
+import type { SetControllerParams } from '$lib/types/controlers';
 import { getMissionControlActor } from '$lib/utils/actor.utils';
-import { toNullable } from '$lib/utils/did.utils';
-import { nonNullish } from '$lib/utils/utils';
+import { toSetController } from '$lib/utils/controllers.utils';
 import type { Identity } from '@dfinity/agent';
 import { Principal } from '@dfinity/principal';
 
@@ -43,16 +43,6 @@ export const initMissionControl = async ({
 		}
 	});
 
-export type SetControllerParams = {
-	controllerId: string;
-	profile: string | null | undefined;
-};
-
-const toSetController = (profile: string | null | undefined): SetController => ({
-	metadata: nonNullish(profile) && profile !== '' ? [['profile', profile]] : [],
-	expires_at: toNullable<bigint>(undefined)
-});
-
 export const setSatellitesController = async ({
 	missionControlId,
 	satelliteIds,

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

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { Principal } from '@dfinity/principal';
+	import { isNullish } from '$lib/utils/utils';
+	import { toasts } from '$lib/stores/toasts.store';
+	import { i18n } from '$lib/stores/i18n.store';
+	import { missionControlStore } from '$lib/stores/mission-control.store';
+	import { busy, isBusy } from '$lib/stores/busy.store';
+	import Popover from '$lib/components/ui/Popover.svelte';
+	import type { Controller } from '$declarations/satellite/satellite.did';
+	import Value from '$lib/components/ui/Value.svelte';
+
+	export let visible = false;
+	export let selectedController: [Principal, Controller] | undefined;
+	export let remove: (params: {
+		missionControlId: Principal;
+		controller: Principal;
+	}) => Promise<void>;
+	export let load: () => Promise<void>;
+
+	const deleteController = async () => {
+		if (isNullish(selectedController)) {
+			toasts.error({
+				text: $i18n.errors.controllers_no_selection
+			});
+			return;
+		}
+
+		if (isNullish($missionControlStore)) {
+			toasts.error({
+				text: $i18n.errors.no_mission_control
+			});
+			return;
+		}
+
+		busy.start();
+
+		try {
+			await remove({
+				missionControlId: $missionControlStore,
+				controller: selectedController[0]
+			});
+		} catch (err: unknown) {
+			toasts.error({
+				text: $i18n.errors.controllers_delete,
+				detail: err
+			});
+		}
+
+		close();
+
+		await load();
+
+		busy.stop();
+	};
+
+	const close = () => {
+		selectedController = undefined;
+		visible = false;
+	};
+</script>
+
+<Popover bind:visible center={true}>
+	<div class="content">
+		<h3>{$i18n.controllers.delete_question}</h3>
+
+		<Value>
+			<svelte:fragment slot="label">{$i18n.controllers.controller_id}</svelte:fragment>
+			<p>{selectedController?.[0].toText() ?? ''}</p>
+		</Value>
+
+		<button type="button" on:click|stopPropagation={close} disabled={$isBusy}>
+			{$i18n.core.no}
+		</button>
+
+		<button type="button" on:click|stopPropagation={deleteController} disabled={$isBusy}>
+			{$i18n.core.yes}
+		</button>
+	</div>
+</Popover>
+
+<style lang="scss">
+	.content {
+		padding: var(--padding-2x);
+	}
+
+	h3 {
+		margin-bottom: var(--padding-2x);
+	}
+</style>

src/frontend/src/lib/components/controllers/ControllerDelete.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { i18n } from '$lib/stores/i18n.store';
+	import Popover from '$lib/components/ui/Popover.svelte';
+
+	export let visible = false;
+
+	const close = () => (visible = false);
+</script>
+
+<Popover bind:visible center={true}>
+	<div class="content">
+		<p>{$i18n.controllers.no_delete}</p>
+
+		<p>{$i18n.controllers.more_delete}</p>
+
+		<button type="button" on:click|stopPropagation={close}>
+			{$i18n.core.ok}
+		</button>
+	</div>
+</Popover>
+
+<style lang="scss">
+	.content {
+		padding: var(--padding-2x);
+	}
+</style>