feat(frontend): edit ufo metadata

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

@@ -140,6 +140,21 @@ export const setSatelliteMetadata = async ({
 	return set_satellite_metadata(satelliteId, metadata);
 };
 
+export const setUfoMetadata = async ({
+	missionControlId,
+	ufoId,
+	metadata,
+	identity
+}: {
+	missionControlId: MissionControlId;
+	ufoId: UfoId;
+	metadata: Metadata;
+	identity: NullishIdentity;
+}): Promise<MissionControlDid.Ufo> => {
+	const { set_ufo_metadata } = await getMissionControlActor({ missionControlId, identity });
+	return set_ufo_metadata(ufoId, metadata);
+};
+
 export const setOrbitersController = async ({
 	missionControlId,
 	orbiterIds,

src/frontend/src/lib/components/satellites/overview/SatelliteEditDetails.svelte → src/frontend/src/lib/components/modules/segments/SegmentWithMetadataEditDetails.svelte

@@ -6,63 +6,63 @@
 	import { isBusy } from '$lib/derived/app/busy.derived';
 	import { authIdentity } from '$lib/derived/auth.derived';
 	import { missionControlId } from '$lib/derived/console/account.mission-control.derived';
-	import { setSatelliteMetadata } from '$lib/services/metadata.services';
+	import type { SetMetadataParams, SetMetadataResult } from '$lib/services/metadata.services';
 	import { busy } from '$lib/stores/app/busy.store';
 	import { i18n } from '$lib/stores/app/i18n.store';
 	import { toasts } from '$lib/stores/app/toasts.store';
 	import type { MetadataUiTags } from '$lib/types/metadata';
-	import type { Satellite } from '$lib/types/satellite';
+	import type { SegmentWithMetadata } from '$lib/types/segment';
 	import {
 		metadataUiEnvironment,
 		metadataUiName,
 		metadataUiTags
 	} from '$lib/utils/metadata-ui.utils';
 
 	interface Props {
-		satellite: Satellite;
+		segment: SegmentWithMetadata;
+		updateMetadata: (params: SetMetadataParams) => Promise<SetMetadataResult>;
 	}
 
-	let { satellite }: Props = $props();
+	let { segment, updateMetadata }: Props = $props();
 
 	// svelte-ignore state_referenced_locally
-	let satName = $state(metadataUiName(satellite));
+	let segmentName = $state(metadataUiName(segment));
 	// svelte-ignore state_referenced_locally
-	let satEnv = $state<string | undefined>(metadataUiEnvironment(satellite));
+	let segmentEnv = $state<string | undefined>(metadataUiEnvironment(segment));
 
 	// svelte-ignore state_referenced_locally
-	let satTagsInput = $state(metadataUiTags(satellite)?.join(',') ?? '');
-	let satTags = $derived<MetadataUiTags>(
-		satTagsInput
+	let segmentTagsInput = $state(metadataUiTags(segment)?.join(',') ?? '');
+	let segmentTags = $derived<MetadataUiTags>(
+		segmentTagsInput
 			.split(/[\n,]+/)
 			.map((input) => input.toLowerCase().trim())
 			.filter(notEmptyString)
 	);
 
-	let visible: boolean = $state(false);
+	let visible = $state(false);
 
-	let validConfirm = $derived(nonNullish(satName) && satName !== '');
+	let validConfirm = $derived(nonNullish(segmentName) && segmentName !== '');
 
 	const handleSubmit = async ($event: SubmitEvent) => {
 		$event.preventDefault();
 
 		if (!validConfirm) {
 			// Submit is disabled if not valid
 			toasts.error({
-				text: $i18n.errors.satellite_name_missing
+				text: $i18n.errors.segment_name_missing
 			});
 			return;
 		}
 
 		busy.start();
 
-		const { success } = await setSatelliteMetadata({
+		const { success } = await updateMetadata({
 			missionControlId: $missionControlId,
 			identity: $authIdentity,
-			satellite,
 			metadata: {
-				name: satName,
-				environment: satEnv,
-				tags: satTags
+				name: segmentName,
+				environment: segmentEnv,
+				tags: segmentTags
 			}
 		});
 
@@ -80,46 +80,46 @@
 	};
 </script>
 
-<button class="menu" onclick={open}><IconEdit /> {$i18n.satellites.edit_details}</button>
+<button class="menu" onclick={open}><IconEdit /> {$i18n.core.edit_details}</button>
 
 <Popover backdrop="dark" center bind:visible>
 	<form class="container" onsubmit={handleSubmit}>
-		<Value ref="satelliteName">
+		<Value ref="segmentName">
 			{#snippet label()}
-				{$i18n.satellites.satellite_name}
+				{$i18n.core.name}
 			{/snippet}
 
 			<input
-				id="satelliteName"
+				id="segmentName"
 				autocomplete="off"
 				data-1p-ignore
 				disabled={$isBusy}
 				maxlength={64}
-				placeholder={$i18n.satellites.edit_details}
+				placeholder={$i18n.core.edit_details}
 				type="text"
-				bind:value={satName}
+				bind:value={segmentName}
 			/>
 		</Value>
 
-		<Value ref="satelliteEnv">
+		<Value ref="segmentEnv">
 			{#snippet label()}
 				{$i18n.core.environment}
 			{/snippet}
 
-			<select id="satelliteEnv" disabled={$isBusy} bind:value={satEnv}>
+			<select id="segmentEnv" disabled={$isBusy} bind:value={segmentEnv}>
 				<option value={undefined}>{$i18n.core.unspecified}</option>
 				<option value="production"> {$i18n.core.production} </option>
 				<option value="staging"> {$i18n.core.staging} </option>
 				<option value="test"> {$i18n.core.test} </option>
 			</select>
 		</Value>
 
-		<Value ref="satelliteTags">
+		<Value ref="segmentTags">
 			{#snippet label()}
 				{$i18n.core.tags}
 			{/snippet}
 
-			<textarea placeholder={$i18n.core.tags_placeholder} rows="5" bind:value={satTagsInput}
+			<textarea placeholder={$i18n.core.tags_placeholder} rows="5" bind:value={segmentTagsInput}
 			></textarea>
 		</Value>
 

src/frontend/src/lib/components/satellites/overview/SatelliteOverviewActions.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import DetachSegment from '$lib/components/modules/attach-detach/DetachSegment.svelte';
 	import SegmentActions from '$lib/components/modules/segments/SegmentActions.svelte';
-	import SatelliteEditDetails from '$lib/components/satellites/overview/SatelliteEditDetails.svelte';
+	import SegmentWithMetadataEditDetails from '$lib/components/modules/segments/SegmentWithMetadataEditDetails.svelte';
 	import SatelliteReloadVersion from '$lib/components/satellites/overview/SatelliteReloadVersion.svelte';
 	import SatelliteVisit from '$lib/components/satellites/overview/SatelliteVisit.svelte';
+	import {
+		type SetMetadataParams,
+		type SetMetadataResult,
+		setSatelliteMetadata
+	} from '$lib/services/metadata.services';
 	import type { Satellite } from '$lib/types/satellite';
 
 	interface Props {
@@ -15,6 +20,12 @@
 
 	let visible: boolean = $state(false);
 	const close = () => (visible = false);
+
+	const updateMetadata = (params: SetMetadataParams): Promise<SetMetadataResult> =>
+		setSatelliteMetadata({
+			...params,
+			satellite
+		});
 </script>
 
 <SegmentActions bind:visible>
@@ -23,7 +34,7 @@
 	{/snippet}
 
 	{#snippet moreActions()}
-		<SatelliteEditDetails {satellite} />
+		<SegmentWithMetadataEditDetails segment={satellite} {updateMetadata} />
 
 		<DetachSegment
 			{monitoringEnabled}

src/frontend/src/lib/components/ufos/overview/UfoOverview.svelte

@@ -6,6 +6,7 @@
 	import SegmentWithMetadataEnvironmentText from '$lib/components/modules/segments/SegmentWithMetadataEnvironmentText.svelte';
 	import SegmentWithMetadataName from '$lib/components/modules/segments/SegmentWithMetadataName.svelte';
 	import SegmentWithMetadataTags from '$lib/components/modules/segments/SegmentWithMetadataTags.svelte';
+	import UfoOverviewActions from '$lib/components/ufos/overview/UfoOverviewActions.svelte';
 	import Identifier from '$lib/components/ui/Identifier.svelte';
 	import Value from '$lib/components/ui/Value.svelte';
 	import { i18n } from '$lib/stores/app/i18n.store';
@@ -33,35 +34,33 @@
 
 <CanisterSyncData canisterId={ufo.ufo_id} bind:canister />
 
-<div class="overview">
-	<div class="card-container with-title">
-		<span class="title">{$i18n.satellites.overview}</span>
+<div class="card-container with-title">
+	<span class="title">{$i18n.satellites.overview}</span>
 
-		<div class="columns-3 fit-column-1">
-			<div class="id">
-				<SegmentWithMetadataName segment={ufo} />
+	<div class="columns-3 fit-column-1">
+		<div class="id">
+			<SegmentWithMetadataName segment={ufo} />
 
-				<SegmentWithMetadataEnvironmentText segment={ufo} />
+			<SegmentWithMetadataEnvironmentText segment={ufo} />
 
-				<SegmentWithMetadataTags segment={ufo} />
-			</div>
+			<SegmentWithMetadataTags segment={ufo} />
+		</div>
 
-			<div>
-				<Value>
-					{#snippet label()}
-						{$i18n.ufo.id}
-					{/snippet}
-					<Identifier identifier={ufoId} shorten={false} small={false} />
-				</Value>
+		<div>
+			<Value>
+				{#snippet label()}
+					{$i18n.ufo.id}
+				{/snippet}
+				<Identifier identifier={ufoId} shorten={false} small={false} />
+			</Value>
 
-				<CanisterSubnet canisterId={ufo.ufo_id} />
-			</div>
+			<CanisterSubnet canisterId={ufo.ufo_id} />
 		</div>
 	</div>
-
-	<div class="actions">TODO</div>
 </div>
 
+<UfoOverviewActions {monitoringEnabled} {ufo} />
+
 <div class="card-container with-title">
 	<span class="title">{$i18n.monitoring.runtime}</span>
 

src/frontend/src/lib/components/ufos/overview/UfoOverviewActions.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import SegmentActions from '$lib/components/modules/segments/SegmentActions.svelte';
+	import SegmentWithMetadataEditDetails from '$lib/components/modules/segments/SegmentWithMetadataEditDetails.svelte';
+	import {
+		type SetMetadataParams,
+		type SetMetadataResult,
+		setUfoMetadata
+	} from '$lib/services/metadata.services';
+	import type { Ufo } from '$lib/types/ufo';
+
+	interface Props {
+		ufo: Ufo;
+		monitoringEnabled: boolean;
+	}
+
+	let { ufo, monitoringEnabled }: Props = $props();
+
+	let visible: boolean = $state(false);
+	const close = () => (visible = false);
+
+	const updateMetadata = (params: SetMetadataParams): Promise<SetMetadataResult> =>
+		setUfoMetadata({
+			...params,
+			ufo
+		});
+</script>
+
+<SegmentActions bind:visible>
+	{#snippet moreActions()}
+		<SegmentWithMetadataEditDetails segment={ufo} {updateMetadata} />
+	{/snippet}
+</SegmentActions>

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

@@ -124,7 +124,9 @@
 		"lets_go": "Let's go!",
 		"name": "Name",
 		"environment": "Environment",
-		"tags": "Tags"
+		"tags": "Tags",
+		"edit_details": "Edit details",
+		"tags_placeholder": "Comma-separated or one per line. Leave empty for no tags."
 	},
 	"canisters": {
 		"top_up": "Top-up",
@@ -336,9 +338,7 @@
 		"application": "Application",
 		"application_description": "Data storage, user management, serverless functions",
 		"application_hint": "Your satellite will be initialized with settings optimized for an application.",
-		"tags_placeholder": "Comma-separated or one per line. Leave empty for no tags.",
 		"enter_name": "Enter a name for your Satellite",
-		"edit_details": "Edit details",
 		"create_satellite_price": "Starting a new Satellite requires {0}.",
 		"loading_satellites": "Loading your Satellites",
 		"overview": "Overview",
@@ -369,7 +369,8 @@
 		"ready": "Your Mission Control is ready!",
 		"attaching": "Sharing existing modules with Mission Control...",
 		"warn_attaching": "Failed to share the following modules with Mission Control:",
-		"warn_satellite_metadata_update": "Satellite not found in Mission Control. This is unexpected."
+		"warn_satellite_metadata_update": "Satellite not found in Mission Control. This is unexpected.",
+		"warn_ufo_metadata_update": "UFO not found in Mission Control. This is unexpected."
 	},
 	"wallet": {
 		"title": "Wallet",
@@ -617,13 +618,14 @@
 		"cli_missing_params": "Missing URL parameters. Either the redirection URL or principal is not provided.",
 		"cli_missing_selection": "No Mission Control or Satellite(s) selected.",
 		"cli_unexpected_error": "Unexpected error(s) while adding your admin access key.",
-		"satellite_name_missing": "A name for the Satellite must be provided.",
+		"segment_name_missing": "A name must be provided.",
 		"satellite_kind": "Please choose what you are building to continue.",
 		"satellite_unexpected_error": "Unexpected error(s) while creating the Satellite.",
 		"satellite_no_found": "Nothing here. Return to your launchpad to find your Satellites.",
 		"satellite_metadata_update": "Unexpected error(s) while trying to set the metadata of your Satellite.",
 		"satellite_missing_name": "A name must be provided.",
 		"satellites_not_loaded": "The Satellites data are not yet loaded.",
+		"ufo_metadata_update": "Unexpected error(s) while trying to set the metadata of your UFO.",
 		"create_ufo_name_missing": "A name for the UFO must be provided.",
 		"create_ufo_unexpected_error": "Unexpected error(s) while creating the UFO.",
 		"ufo_not_found": "Nothing here. Return to your launchpad to find your UFOs.",
@@ -712,6 +714,7 @@
 		"invalid_email": "Please enter a valid email address.",
 		"invalid_destination": "Please enter a valid destination address.",
 		"invalid_metadata": "The metadata provided is invalid.",
+		"update_metadata_error": "Unexpected error(s) while updating the metadata in the Console.",
 		"empty_amount": "Please enter an amount for the transfer.",
 		"cycles_transfer_not_supported": "Transferring cycles from Mission Control is not yet supported. Get in touch!",
 		"convert_icp_to_cycles_not_supported": "Converting ICP to Cycles with the Mission Control is not yet supported. Get in touch!",