junobuild · peterpeterparker · Apr 10, 2026 · Apr 10, 2026
diff --git a/src/frontend/src/lib/components/satellites/cdn/list/Cdn.svelte b/src/frontend/src/lib/components/satellites/cdn/list/Cdn.svelte
@@ -2,8 +2,10 @@
 	import { nonNullish } from '@dfinity/utils';
 	import { getContext } from 'svelte';
 	import type { SatelliteDid } from '$declarations';
+	import Confirmation from '$lib/components/app/core/Confirmation.svelte';
 	import IconRefresh from '$lib/components/icons/IconRefresh.svelte';
 	import CdnAsset from '$lib/components/satellites/cdn/list/CdnAsset.svelte';
+	import CdnClear from '$lib/components/satellites/cdn/list/CdnClear.svelte';
 	import CdnFilter from '$lib/components/satellites/cdn/list/CdnFilter.svelte';
 	import DataActions from '$lib/components/satellites/data/DataActions.svelte';
 	import DataCount from '$lib/components/satellites/data/DataCount.svelte';
@@ -43,10 +45,12 @@
 						<CdnFilter />
 						<DataOrder />
 
-						<DataActions>
+						<DataActions direction="ltr">
 							<button class="menu" onclick={reload} type="button"
 								><IconRefresh size="20px" /> {$i18n.core.reload}</button
 							>
+
+							<CdnClear {reload} {satellite} />
 						</DataActions>
 					</div>
 				</th>

diff --git a/src/frontend/src/lib/components/satellites/cdn/list/CdnClear.svelte b/src/frontend/src/lib/components/satellites/cdn/list/CdnClear.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import Confirmation from '$lib/components/app/core/Confirmation.svelte';
+	import IconDelete from '$lib/components/icons/IconDelete.svelte';
+	import Html from '$lib/components/ui/Html.svelte';
+	import { authIdentity } from '$lib/derived/auth.derived';
+	import { deleteWasmAssets } from '$lib/services/satellite/functions/cdn.services';
+	import { busy } from '$lib/stores/app/busy.store';
+	import { i18n } from '$lib/stores/app/i18n.store';
+	import type { Satellite } from '$lib/types/satellite';
+
+	interface Props {
+		satellite: Satellite;
+		reload: () => void;
+	}
+
+	let { satellite, reload }: Props = $props();
+
+	let visible = $state(false);
+
+	const openDelete = () => (visible = true);
+	const close = () => (visible = false);
+
+	const deleteAssets = async () => {
+		busy.start();
+
+		const result = await deleteWasmAssets({
+			satellite,
+			identity: $authIdentity
+		});
+
+		busy.stop();
+
+		if (result.status === 'error') {
+			return;
+		}
+
+		reload();
+
+		close();
+	};
+</script>
+
+<button class="menu" onclick={openDelete} type="button"
+	><IconDelete size="20px" /> {$i18n.cdn.clear_cdn}</button
+>
+
+<Confirmation onno={close} onyes={deleteAssets} bind:visible>
+	{#snippet title()}
+		{$i18n.cdn.clear_cdn}
+	{/snippet}
+
+	<p><Html text={$i18n.cdn.clear_cdn_question} /></p>
+</Confirmation>
+
+<style lang="scss">
+	p {
+		font-weight: initial;
+		padding: 0 0 var(--padding-2x);
+	}
+</style>
diff --git a/src/frontend/src/lib/components/satellites/data/DataActions.svelte b/src/frontend/src/lib/components/satellites/data/DataActions.svelte
@@ -7,9 +7,10 @@
 	interface Props {
 		visible?: boolean | undefined;
 		children: Snippet;
+		direction?: 'ltr' | 'rtl';
 	}
 
-	let { visible = $bindable(false), children }: Props = $props();
+	let { visible = $bindable(false), children, direction = 'rtl' }: Props = $props();
 
 	let button: HTMLButtonElement | undefined = $state();
 </script>
@@ -24,7 +25,7 @@
 	type="button"><IconMore size="18px" /></button
 >
 
-<Popover anchor={button} direction="rtl" bind:visible>
+<Popover anchor={button} {direction} bind:visible>
 	<div class="container">
 		{@render children()}
 	</div>

diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
@@ -1065,7 +1065,9 @@
 		"title": "CDN",
 		"empty": "No WASM found for your serverless functions.",
 		"delete_asset": "Delete asset",
-		"delete_question": "Are you sure you want to delete <mark>{0}</mark> from your CDN?"
+		"delete_question": "Are you sure you want to delete <mark>{0}</mark> from your CDN?",
+		"clear_cdn": "Clear CDN",
+		"clear_cdn_question": "Are you sure you want to delete <strong>all assets</strong> from your CDN?"
 	},
 	"notifications": {
 		"title": "Notifications",

diff --git a/src/frontend/src/lib/i18n/zh-cn.json b/src/frontend/src/lib/i18n/zh-cn.json
@@ -1067,7 +1067,9 @@
 		"title": "CDN",
 		"empty": "未找到无服务器函数的WASM",
 		"delete_asset": "删除资源",
-		"delete_question": "您确定要从 CDN 中删除 <mark>{0}</mark> 吗？"
+		"delete_question": "您确定要从 CDN 中删除 <mark>{0}</mark> 吗？",
+		"clear_cdn": "清除 CDN",
+		"clear_cdn_question": "您确定要从 CDN 中删除<strong>所有资源</strong>吗？"
 	},
 	"notifications": {
 		"title": "通知",

diff --git a/src/frontend/src/lib/services/satellite/functions/cdn.services.ts b/src/frontend/src/lib/services/satellite/functions/cdn.services.ts
@@ -1,5 +1,5 @@
 import type { SatelliteDid } from '$declarations';
-import { deleteAsset, listAssets } from '$lib/api/satellites.api';
+import { deleteAsset, deleteAssets, listAssets } from '$lib/api/satellites.api';
 import { COLLECTION_CDN_RELEASES } from '$lib/constants/storage.constants';
 import type { ListDocsParams, ListDocsResult } from '$lib/services/satellite/_list-docs.services';
 import type { NullishIdentity } from '$lib/types/itentity';
@@ -47,3 +47,23 @@ export const deleteWasmAsset = async ({
 		return { status: 'error', err };
 	}
 };
+
+export const deleteWasmAssets = async ({
+	satellite,
+	identity
+}: {
+	satellite: Satellite;
+	identity: NullishIdentity;
+}): Promise<Result<undefined>> => {
+	try {
+		await deleteAssets({
+			satelliteId: satellite.satellite_id,
+			collection: COLLECTION_CDN_RELEASES,
+			identity
+		});
+
+		return { status: 'success', result: undefined };
+	} catch (err: unknown) {
+		return { status: 'error', err };
+	}
+};
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
@@ -1100,6 +1100,8 @@ interface I18nCdn {
 	empty: string;
 	delete_asset: string;
 	delete_question: string;
+	clear_cdn: string;
+	clear_cdn_question: string;
 }
 
 interface I18nNotifications {