feat: refresh backups (#884)

Signed-off-by: David Dal Busco <[email protected]>

src/frontend/src/lib/api/ic.api.ts

@@ -1,6 +1,7 @@
 import type {
 	canister_log_record,
 	canister_settings,
+	list_canister_snapshots_result,
 	log_visibility,
 	snapshot,
 	snapshot_id
@@ -190,6 +191,20 @@ export const deleteSnapshot = async ({
 	});
 };
 
+export const listSnapshots = async ({
+	canisterId,
+	identity
+}: {
+	canisterId: Principal;
+	identity: Identity;
+}): Promise<list_canister_snapshots_result> => {
+	const { list_canister_snapshots } = await getICActor({ identity });
+
+	return await list_canister_snapshots({
+		canister_id: canisterId
+	});
+};
+
 export const canisterUpdateSettings = async ({
 	canisterId,
 	identity,

src/frontend/src/lib/components/snapshot/Snapshots.svelte

@@ -7,6 +7,7 @@
 	import SnapshotActions from '$lib/components/snapshot/SnapshotActions.svelte';
 	import SnapshotDelete from '$lib/components/snapshot/SnapshotDelete.svelte';
 	import SnapshotsLoader from '$lib/components/snapshot/SnapshotsLoader.svelte';
+	import SnapshotsRefresh from '$lib/components/snapshot/SnapshotsRefresh.svelte';
 	import Identifier from '$lib/components/ui/Identifier.svelte';
 	import SkeletonText from '$lib/components/ui/SkeletonText.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
@@ -86,7 +87,13 @@
 			<thead>
 				<tr>
 					<th class="tools"></th>
-					<th class="backup"> {$i18n.canisters.backup} </th>
+					<th class="backup">
+						<div class="actions">
+							<span>{$i18n.canisters.backup}</span>
+
+							<SnapshotsRefresh {canisterId} />
+						</div>
+					</th>
 					<th class="size"> {$i18n.canisters.size} </th>
 					<th> {$i18n.canisters.timestamp} </th>
 				</tr>
@@ -175,4 +182,10 @@
 		max-width: 200px;
 		--skeleton-text-padding: var(--padding-0_25x) 0;
 	}
+
+	.actions {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
 </style>

src/frontend/src/lib/components/snapshot/SnapshotsRefresh.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Principal } from '@dfinity/principal';
+	import IconAutoRenew from '$lib/components/icons/IconAutoRenew.svelte';
+	import { reloadSnapshots } from '$lib/services/snapshots.services';
+	import { authStore } from '$lib/stores/auth.store';
+	import { busy } from '$lib/stores/busy.store';
+	import { i18n } from '$lib/stores/i18n.store';
+
+	interface Props {
+		canisterId: Principal;
+	}
+
+	let { canisterId }: Props = $props();
+
+	const reload = async () => {
+		busy.start();
+
+		await reloadSnapshots({
+			canisterId,
+			identity: $authStore.identity
+		});
+
+		busy.stop();
+	};
+</script>
+
+<button class="icon" type="button" onclick={reload} aria-label={$i18n.core.refresh}
+	><IconAutoRenew size="16px" />
+</button>
+
+<style lang="scss">
+	button {
+		width: fit-content;
+		padding: 0;
+	}
+</style>

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

@@ -507,6 +507,7 @@
 		"snapshot_create_error": "Unexpected error(s) while creating the snapshot.",
 		"snapshot_restore_error": "Unexpected error(s) while restoring the snapshot.",
 		"snapshot_delete_error": "Unexpected error(s) while deleting the snapshot.",
+		"snapshot_list_error": "Unexpected error(s) while listing the snapshot.",
 		"wallet_no_account": "The wallet did not provide any account.",
 		"wallet_load_balance": "The balance of the account cannot be loaded.",
 		"wallet_receive_error": "Unexpected error while receiving tokens.",

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

@@ -507,6 +507,7 @@
 		"snapshot_create_error": "Unexpected error(s) while creating the snapshot.",
 		"snapshot_restore_error": "Unexpected error(s) while restoring the snapshot.",
 		"snapshot_delete_error": "Unexpected error(s) while deleting the snapshot.",
+		"snapshot_list_error": "Unexpected error(s) while listing the snapshot.",
 		"wallet_no_account": "签名方未提供账号.",
 		"wallet_load_balance": "账户余额不能被加载.",
 		"wallet_receive_error": "接受代币是出现异常错误.",

src/frontend/src/lib/services/snapshots.services.ts

@@ -5,6 +5,7 @@ import {
 	canisterStop,
 	createSnapshot as createSnapshotApi,
 	deleteSnapshot as deleteSnapshotApi,
+	listSnapshots,
 	restoreSnapshot as restoreSnapshotApi
 } from '$lib/api/ic.api';
 import {
@@ -58,6 +59,8 @@ interface DeleteSnapshotParams extends Omit<SnapshotParams, 'onProgress'> {
 	snapshot: snapshot;
 }
 
+type ReloadSnapshotsParams = Omit<SnapshotParams, 'onProgress'>;
+
 export const createSnapshot = async ({
 	identity,
 	canisterId,
@@ -176,6 +179,38 @@ export const executeSnapshot = async ({
 	}
 };
 
+export const reloadSnapshots = async ({
+	canisterId,
+	identity
+}: ReloadSnapshotsParams): Promise<{ success: 'ok' | 'cancelled' | 'error'; err?: unknown }> => {
+	try {
+		assertNonNullish(identity, get(i18n).core.not_logged_in);
+
+		const snapshots = await listSnapshots({
+			canisterId,
+			identity
+		});
+
+		await setIdbStore({
+			store: snapshotStore,
+			customStore: snapshotsIdbStore,
+			canisterId: canisterId.toText(),
+			data: snapshots
+		});
+	} catch (err: unknown) {
+		const labels = get(i18n);
+
+		toasts.error({
+			text: labels.errors.snapshot_list_error,
+			detail: err
+		});
+
+		return { success: 'error', err };
+	}
+
+	return { success: 'ok' };
+};
+
 const takeSnapshot = async ({
 	canisterId,
 	...rest

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

@@ -523,6 +523,7 @@ interface I18nErrors {
 	snapshot_create_error: string;
 	snapshot_restore_error: string;
 	snapshot_delete_error: string;
+	snapshot_list_error: string;
 	wallet_no_account: string;
 	wallet_load_balance: string;
 	wallet_receive_error: string;