feat: review observatory setttings ux

Signed-off-by: David Dal Busco <[email protected]>
junobuild · Nov 16, 2023 · 6303ff2 · 6303ff2
1 parent eb213fd
commit 6303ff2
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 39 deletions.
diff --git a/src/frontend/src/lib/components/observatory/ObservatorySettings.svelte b/src/frontend/src/lib/components/observatory/ObservatorySettings.svelte
@@ -48,6 +48,8 @@
 					}
 				}
 			});
+
+			setInitValues();
 		} catch (err: unknown) {
 			toasts.error({
 				text: $i18n.errors.observatory_set_unexpected_error,
@@ -65,6 +67,10 @@
 	let threshold: number | undefined;
 	let email: string | undefined = undefined;
 
+	let initialEnabled = false;
+	let initialThreshold: number | undefined;
+	let initialEmail: string | undefined = undefined;
+
 	const loadCrontab = async () => {
 		try {
 			cronTab = fromNullable(await getCronTab());
@@ -75,6 +81,8 @@
 				? Number(cronTab?.cron_jobs.statuses.cycles_threshold) / ONE_TRILLION
 				: undefined;
 
+			setInitValues();
+
 			loading = false;
 		} catch (err: unknown) {
 			toasts.error({
@@ -84,6 +92,12 @@
 		}
 	};
 
+	const setInitValues = () => {
+		initialEnabled = enabled;
+		initialEmail = email;
+		initialThreshold = threshold;
+	};
+
 	onMount(async () => await loadCrontab());
 
 	let invalidEmail = false;
@@ -93,33 +107,33 @@
 	$: invalidThreshold = nonNullish(threshold) && threshold < Number(CYCLES_WARNING) / ONE_TRILLION;
 
 	let dirty = false;
-	$: dirty = nonNullish(cronTab) ? cronTab?.cron_jobs.statuses.enabled !== enabled : enabled;
+	$: dirty = enabled !== initialEnabled || email !== initialEmail || threshold !== initialThreshold;
 </script>
 
-<div class="card-container">
-	{#if loading}
-		<SpinnerParagraph>{$i18n.core.loading}</SpinnerParagraph>
-	{:else}
-		<form on:submit|preventDefault={onSubmit} in:fade>
+{#if loading}
+	<SpinnerParagraph>{$i18n.core.loading}</SpinnerParagraph>
+{:else}
+	<form on:submit|preventDefault={onSubmit} in:fade>
+		<div class="card-container">
 			<div>
 				<Value>
 					<svelte:fragment slot="label">{$i18n.observatory.monitoring}</svelte:fragment>
-					<div class="checkbox">
-						<input type="checkbox" bind:checked={enabled} />
-						<span
-							>{dirty
-								? enabled
-									? $i18n.observatory.submit_enable
-									: $i18n.observatory.submit_disable
-								: enabled
-								? $i18n.observatory.enabled
-								: $i18n.observatory.disabled}</span
-						>
+
+					<div class="radio">
+						<label>
+							<input type="radio" bind:group={enabled} name="field" value={false} />
+							<span>{$i18n.observatory.disabled}</span>
+						</label>
+
+						<label>
+							<input type="radio" bind:group={enabled} name="field" value={true} />
+							<span>{$i18n.observatory.enabled}</span>
+						</label>
 					</div>
 				</Value>
 			</div>
 
-			<div>
+			<div class="email">
 				<Value>
 					<svelte:fragment slot="label">{$i18n.observatory.email_notifications}</svelte:fragment>
 					<input
@@ -145,13 +159,17 @@
 					</div>
 				</Value>
 			</div>
+		</div>
 
-			<button type="submit" disabled={$isBusy || invalidEmail || invalidThreshold}
-				>{$i18n.core.submit}</button
-			>
-		</form>
-	{/if}
-</div>
+		{#if dirty}
+			<div in:fade>
+				<button type="submit" disabled={$isBusy || invalidEmail || invalidThreshold}
+					>{$i18n.core.save}</button
+				>
+			</div>
+		{/if}
+	</form>
+{/if}
 
 <style lang="scss">
 	form {
@@ -160,11 +178,18 @@
 		gap: var(--padding);
 	}
 
-	.checkbox {
-		margin: var(--padding-0_25x) 0 0;
-	}
-
 	button {
 		margin: var(--padding-2x) 0 0;
 	}
+
+	.radio {
+		display: flex;
+		flex-direction: column;
+
+		padding: 0 0 var(--padding);
+	}
+
+	.email {
+		padding: 0 0 var(--padding);
+	}
 </style>
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
@@ -34,7 +34,8 @@
 		"to": "To",
 		"export": "Export",
 		"start": "Start",
-		"stop": "Stop"
+		"stop": "Stop",
+		"save": "Save"
 	},
 	"canisters": {
 		"top_up": "Top-up",
@@ -389,8 +390,6 @@
 		"monitoring": "Monitoring",
 		"enabled": "Enabled",
 		"disabled": "Disabled",
-		"submit_enable": "Submit to enable",
-		"submit_disable": "Submit to disable",
 		"email_notifications": "Email notifications",
 		"email_notifications_placeholder": "Enter an email to receive notifications",
 		"cycles_threshold": "TCycles threshold (min 0.5)",

diff --git a/src/frontend/src/lib/i18n/it.json b/src/frontend/src/lib/i18n/it.json
@@ -34,7 +34,8 @@
 		"to": "To",
 		"export": "Export",
 		"start": "Start",
-		"stop": "Stop"
+		"stop": "Stop",
+		"save": "Save"
 	},
 	"canisters": {
 		"top_up": "Ricarica",
@@ -389,8 +390,6 @@
 		"monitoring": "Monitoraggio",
 		"enabled": "Abilitato",
 		"disabled": "Disabilitato",
-		"submit_enable": "Invia per abilitare",
-		"submit_disable": "Invia per disabilitare",
 		"email_notifications": "Notifiche email",
 		"email_notifications_placeholder": "Inserisci la tua email per ricevere notifiche",
 		"cycles_threshold": "Soglia TCycles (min 0.5)",

diff --git a/src/frontend/src/lib/i18n/zh-cn.json b/src/frontend/src/lib/i18n/zh-cn.json
@@ -34,7 +34,8 @@
 		"to": "到",
 		"export": "导出",
 		"start": "启动",
-		"stop": "停止"
+		"stop": "停止",
+		"save": "Save"
 	},
 	"canisters": {
 		"top_up": "充值",
@@ -389,8 +390,6 @@
 		"monitoring": "监控",
 		"enabled": "已启用",
 		"disabled": "已禁用",
-		"submit_enable": "启用",
-		"submit_disable": "禁用",
 		"email_notifications": "邮件提醒",
 		"email_notifications_placeholder": "输入用于接受提醒的邮箱",
 		"cycles_threshold": "TCycles 阈值 (最小 0.5)",

diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
@@ -38,6 +38,7 @@ interface I18nCore {
 	export: string;
 	start: string;
 	stop: string;
+	save: string;
 }
 
 interface I18nCanisters {
@@ -414,8 +415,6 @@ interface I18nObservatory {
 	monitoring: string;
 	enabled: string;
 	disabled: string;
-	submit_enable: string;
-	submit_disable: string;
 	email_notifications: string;
 	email_notifications_placeholder: string;
 	cycles_threshold: string;