From e8c900d6071e554e243cf3641601566600d7908a Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Mon, 8 Jan 2024 08:40:21 +0100
Subject: [PATCH] Show battery/grid settings on Sessons and Confg page (#11542)

---
 assets/js/views/ChargingSessions.vue |  9 +++++++--
 assets/js/views/Config.vue           | 11 +++++++++-
 tests/modals.spec.js                 | 30 +++++++++++++++++-----------
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/assets/js/views/ChargingSessions.vue b/assets/js/views/ChargingSessions.vue
index 13fca909b..fd228c879 100644
--- a/assets/js/views/ChargingSessions.vue
+++ b/assets/js/views/ChargingSessions.vue
@@ -8,7 +8,7 @@
 				<div size="s" class="mx-2 flex-grow-0 flex-shrink-0 fw-normal">/</div>
 				<span class="text-truncate">{{ $t("sessions.title") }}</span>
 			</h1>
-			<TopNavigation />
+			<TopNavigation v-bind="topNavigation" />
 		</header>
 
 		<div class="row">
@@ -263,6 +263,7 @@ import CustomSelect from "../components/CustomSelect.vue";
 import ChargingSessionModal from "../components/ChargingSessionModal.vue";
 import breakpoint from "../mixins/breakpoint";
 import settings from "../settings";
+import collector from "../mixins/collector";
 
 const COLUMNS_PER_BREAKPOINT = {
 	xs: 1,
@@ -276,7 +277,7 @@ const COLUMNS_PER_BREAKPOINT = {
 export default {
 	name: "ChargingSessions",
 	components: { TopNavigation, ChargingSessionModal, CustomSelect },
-	mixins: [formatter, breakpoint],
+	mixins: [formatter, breakpoint, collector],
 	props: {
 		notifications: Array,
 		month: { type: Number, default: () => new Date().getMonth() + 1 },
@@ -295,6 +296,10 @@ export default {
 		return { title: `${this.$t("sessions.title")} | evcc` };
 	},
 	computed: {
+		topNavigation: function () {
+			const vehicleLogins = store.state.auth ? store.state.auth.vehicles : {};
+			return { vehicleLogins, ...this.collectProps(TopNavigation, store.state) };
+		},
 		currentSessions() {
 			const sessionsWithDefaults = this.sessions.map((session) => {
 				const loadpoint = session.loadpoint || this.$t("main.loadpoint.fallbackName");
diff --git a/assets/js/views/Config.vue b/assets/js/views/Config.vue
index 115f70702..71c633622 100644
--- a/assets/js/views/Config.vue
+++ b/assets/js/views/Config.vue
@@ -7,7 +7,7 @@
 				</router-link>
 				Configuration 🧪
 			</h1>
-			<TopNavigation />
+			<TopNavigation v-bind="topNavigation" />
 		</header>
 
 		<div class="alert alert-danger mb-5" role="alert">
@@ -189,10 +189,13 @@ import Modal from "bootstrap/js/dist/modal";
 import api from "../api";
 import VehicleIcon from "../components/VehicleIcon";
 import VehicleModal from "../components/Config/VehicleModal.vue";
+import store from "../store";
+import collector from "../mixins/collector";
 
 export default {
 	name: "Config",
 	components: { TopNavigation, VehicleIcon, VehicleModal },
+	mixins: [collector],
 	data() {
 		return {
 			vehicles: [],
@@ -203,6 +206,12 @@ export default {
 			vehicleId: undefined,
 		};
 	},
+	computed: {
+		topNavigation: function () {
+			const vehicleLogins = store.state.auth ? store.state.auth.vehicles : {};
+			return { vehicleLogins, ...this.collectProps(TopNavigation, store.state) };
+		},
+	},
 	mounted() {
 		this.loadVehicles();
 		this.loadLoadpoints();
diff --git a/tests/modals.spec.js b/tests/modals.spec.js
index 2eeac4596..59f191952 100644
--- a/tests/modals.spec.js
+++ b/tests/modals.spec.js
@@ -5,6 +5,8 @@ const { startSimulator, stopSimulator } = require("./simulator");
 const BASICS_CONFIG = "basics.evcc.yaml";
 const SIMULATOR_CONFIG = "simulator.evcc.yaml";
 
+const UI_ROUTES = ["/", "/#/sessions", "/#/config"];
+
 test.describe("Basics", async () => {
   test.beforeAll(async () => {
     await start(BASICS_CONFIG);
@@ -15,13 +17,15 @@ test.describe("Basics", async () => {
   });
 
   test("Menu options. No battery and grid.", async ({ page }) => {
-    await page.goto("/");
+    for (const route of UI_ROUTES) {
+      await page.goto(route);
 
-    await page.getByTestId("topnavigation-button").click();
-    await expect(page.getByRole("button", { name: "General Settings" })).toBeVisible();
-    await expect(page.getByRole("button", { name: "Battery Settings" })).not.toBeVisible();
-    await expect(page.getByRole("button", { name: "Smart Grid Charging" })).not.toBeVisible();
-    await expect(page.getByRole("button", { name: "Need help?" })).toBeVisible();
+      await page.getByTestId("topnavigation-button").click();
+      await expect(page.getByRole("button", { name: "General Settings" })).toBeVisible();
+      await expect(page.getByRole("button", { name: "Battery Settings" })).not.toBeVisible();
+      await expect(page.getByRole("button", { name: "Smart Grid Charging" })).not.toBeVisible();
+      await expect(page.getByRole("button", { name: "Need help?" })).toBeVisible();
+    }
   });
 
   test("Need help?", async ({ page }) => {
@@ -54,13 +58,15 @@ test.describe("Advanced", async () => {
   });
 
   test("Menu options. All available.", async ({ page }) => {
-    await page.goto("/");
+    for (const route of UI_ROUTES) {
+      await page.goto(route);
 
-    await page.getByTestId("topnavigation-button").click();
-    await expect(page.getByRole("button", { name: "General Settings" })).toBeVisible();
-    await expect(page.getByRole("button", { name: "Battery Settings" })).toBeVisible();
-    await expect(page.getByRole("button", { name: "Smart Grid Charging" })).toBeVisible();
-    await expect(page.getByRole("button", { name: "Need help?" })).toBeVisible();
+      await page.getByTestId("topnavigation-button").click();
+      await expect(page.getByRole("button", { name: "General Settings" })).toBeVisible();
+      await expect(page.getByRole("button", { name: "Battery Settings" })).toBeVisible();
+      await expect(page.getByRole("button", { name: "Smart Grid Charging" })).toBeVisible();
+      await expect(page.getByRole("button", { name: "Need help?" })).toBeVisible();
+    }
   });
 
   test("Battery Settings from top navigation", async ({ page }) => {