From 334ab6cc066b0dc22ec02f4c35b4a3acbe7ad87e Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 6 Jun 2025 22:03:35 +0200
Subject: [PATCH] UI: add restart button to fatal error banner (#21688)

---
 .../js/components/Footer/OfflineIndicator.vue | 43 +++----------
 assets/js/components/Footer/RestartButton.vue | 61 +++++++++++++++++++
 assets/js/mixins/icon.ts                      |  4 +-
 tests/fatal.spec.js                           | 12 ++--
 4 files changed, 78 insertions(+), 42 deletions(-)
 create mode 100644 assets/js/components/Footer/RestartButton.vue

diff --git a/assets/js/components/Footer/OfflineIndicator.vue b/assets/js/components/Footer/OfflineIndicator.vue
index c8142e2ac..0b0a5e671 100644
--- a/assets/js/components/Footer/OfflineIndicator.vue
+++ b/assets/js/components/Footer/OfflineIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div data-testid="offline-indicator">
 		<div v-if="offline" class="modal-backdrop" />
 		<div
 			class="fixed-bottom alert d-flex justify-content-center align-items-center mb-0 rounded-0 p-2"
@@ -8,19 +8,7 @@
 			data-testid="bottom-banner"
 		>
 			<div v-if="restarting" class="d-flex align-items-center">
-				<button
-					class="btn btn-secondary me-2 btn-sm d-flex align-items-center"
-					type="button"
-					disabled
-					tabindex="0"
-				>
-					<span
-						class="spinner-border spinner-border-sm m-1 me-2"
-						role="status"
-						aria-hidden="true"
-					></span>
-					{{ $t("offline.restart") }}
-				</button>
+				<RestartButton restarting @restart="restart" />
 				{{ $t("offline.restarting") }}
 			</div>
 			<div
@@ -28,15 +16,7 @@
 				class="d-flex align-items-center"
 				data-testid="restart-needed"
 			>
-				<button
-					class="btn btn-secondary me-2 btn-sm d-flex align-items-center"
-					type="button"
-					tabindex="0"
-					@click="restart"
-				>
-					<Sync class="restart me-2" />
-					{{ $t("offline.restart") }}
-				</button>
+				<RestartButton @restart="restart" />
 				{{ $t("offline.restartNeeded") }}
 			</div>
 			<div v-else-if="offline" class="d-flex align-items-center">
@@ -45,7 +25,7 @@
 			</div>
 			<div
 				v-else-if="showError"
-				class="d-flex align-items-start container px-4 justify-content-center"
+				class="d-flex align-items-center container px-4 justify-content-center"
 				data-testid="fatal-error"
 			>
 				<shopicon-regular-car1
@@ -60,13 +40,7 @@
 					</div>
 					<div v-if="fatalText" class="text-break">{{ fatalText }}</div>
 				</div>
-				<button
-					type="button"
-					class="btn-close mt-1"
-					aria-label="Close"
-					tabindex="0"
-					@click="dismissed = true"
-				></button>
+				<RestartButton error @restart="restart" />
 			</div>
 		</div>
 	</div>
@@ -76,7 +50,7 @@
 import { defineComponent, type PropType } from "vue";
 import "@h2d2/shopicons/es/regular/car1";
 import CloudOffline from "../MaterialIcon/CloudOffline.vue";
-import Sync from "../MaterialIcon/Sync.vue";
+import RestartButton from "./RestartButton.vue";
 import restart, { performRestart, restartComplete } from "@/restart";
 import type { FatalError } from "@/types/evcc";
 
@@ -84,7 +58,7 @@ export default defineComponent({
 	name: "OfflineIndicator",
 	components: {
 		CloudOffline,
-		Sync,
+		RestartButton,
 	},
 	props: {
 		offline: Boolean,
@@ -134,9 +108,6 @@ export default defineComponent({
 });
 </script>
 <style scoped>
-.restart {
-	transform: scaleX(-1);
-}
 .alert {
 	opacity: 0;
 	transform: translateY(100%);
diff --git a/assets/js/components/Footer/RestartButton.vue b/assets/js/components/Footer/RestartButton.vue
new file mode 100644
index 000000000..479d917b5
--- /dev/null
+++ b/assets/js/components/Footer/RestartButton.vue
@@ -0,0 +1,61 @@
+<template>
+	<button
+		class="btn me-2 btn-sm d-flex align-items-center"
+		:class="error ? 'btn-outline-danger' : 'btn-secondary'"
+		type="button"
+		:disabled="restarting"
+		tabindex="0"
+		@click="handleRestart"
+	>
+		<span
+			v-if="restarting"
+			class="spinner-border spinner-border-sm m-1 me-2"
+			role="status"
+			aria-hidden="true"
+		></span>
+		<Sync v-else :size="iconSize" class="restart me-2" />
+		{{ $t("offline.restart") }}
+	</button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import Sync from "../MaterialIcon/Sync.vue";
+import { ICON_SIZE } from "@/types/evcc";
+
+export default defineComponent({
+	name: "RestartButton",
+	components: {
+		Sync,
+	},
+	props: {
+		restarting: {
+			type: Boolean,
+			default: false,
+		},
+		error: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ["restart"],
+	computed: {
+		iconSize() {
+			return ICON_SIZE.S;
+		},
+	},
+	methods: {
+		handleRestart() {
+			if (!this.restarting) {
+				this.$emit("restart");
+			}
+		},
+	},
+});
+</script>
+
+<style scoped>
+.restart {
+	transform: scaleX(-1);
+}
+</style>
diff --git a/assets/js/mixins/icon.ts b/assets/js/mixins/icon.ts
index 0a4c45b6f..a47764892 100644
--- a/assets/js/mixins/icon.ts
+++ b/assets/js/mixins/icon.ts
@@ -5,8 +5,8 @@ export default defineComponent({
 	props: {
 		size: {
 			type: String as PropType<ICON_SIZE>,
-			validator(value: string) {
-				return Object.keys(ICON_SIZE).includes(value);
+			validator(value: ICON_SIZE) {
+				return Object.values(ICON_SIZE).includes(value);
 			},
 			default: ICON_SIZE.S,
 		},
diff --git a/tests/fatal.spec.js b/tests/fatal.spec.js
index ffd17be41..4edef808b 100644
--- a/tests/fatal.spec.js
+++ b/tests/fatal.spec.js
@@ -7,17 +7,21 @@ test.describe("fatal", async () => {
   test("evcc yaml error", async ({ page }) => {
     const instance = await start("fatal-syntax.evcc.yaml");
     await page.goto("/");
-    await expect(page.getByTestId("bottom-banner")).toBeVisible();
-    await expect(page.getByTestId("bottom-banner")).toContainText("failed parsing config file");
+    const offline = page.getByTestId("offline-indicator");
+    await expect(offline.getByTestId("bottom-banner")).toBeVisible();
+    await expect(offline.getByTestId("bottom-banner")).toContainText("failed parsing config file");
     await expect(page.getByTestId("generalconfig-password")).not.toBeVisible();
+    await expect(offline.getByRole("button", { name: "Restart" })).toBeVisible();
     await stop(instance);
   });
   test("database error", async ({ page }) => {
     const instance = await start("fatal-db.evcc.yaml");
     await page.goto("/");
-    await expect(page.getByTestId("bottom-banner")).toBeVisible();
-    await expect(page.getByTestId("bottom-banner")).toContainText("invalid database");
+    const offline = page.getByTestId("offline-indicator");
+    await expect(offline.getByTestId("bottom-banner")).toBeVisible();
+    await expect(offline.getByTestId("bottom-banner")).toContainText("invalid database");
     await expect(page.getByTestId("generalconfig-password")).not.toBeVisible();
+    await expect(offline.getByRole("button", { name: "Restart" })).toBeVisible();
     await stop(instance);
   });
 });