From 11e1fa6286da26a87e834a40ef1d76670343b2d9 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@piment-noir.org>
Date: Sat, 15 Aug 2026 00:08:21 +0200
Subject: [PATCH] refactor(webui): order station action buttons by CSO
 lifecycle (#2084)

* refactor(webui): order station action buttons by CSO lifecycle

Reorder the station-card action buttons in both skins to follow the
Charging Station Operator lifecycle (bring-up, provisioning, exploitation,
observability):

- modern StationCard: Start/Stop, Connect/Disconnect, Configuration,
  Authorize, Details
- classic CSData: Start/Stop, Connection, Set Supervision Url,
  Change Configuration, Show Details

This fixes Authorize (runtime) preceding Configuration (provisioning) and
Details being wedged between active commands. Action sets, labels, handlers,
routes, styling and the isolated Delete button are unchanged.

Make the classic CSData show-details toggle assertions look the button up by
id instead of a fixed index, so they stay robust to ordering.

* test(webui): cover classic change-configuration toggle navigation

Add id-based navigation tests for the change-configuration toggle in
classic CSData, mirroring the show-details coverage: assert on() pushes
the change-configuration route with hashId/chargingStationId params and
off() pushes back to charging-stations. Closes the coverage gap for the
toggle reordered in this change.

* test(webui): select set-supervision-url toggle by id for consistency

Align the set-supervision-url toggle navigation tests with the
change-configuration and show-details ones by looking the toggle up via
its id instead of a fixed index, so the whole toggle-navigation suite is
order-independent and uses a single selection convention.
---
 .../components/charging-stations/CSData.vue   | 12 ++--
 .../skins/modern/components/StationCard.vue   | 12 ++--
 .../tests/unit/skins/classic/CSData.test.ts   | 61 ++++++++++++++++---
 3 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/ui/web/src/skins/classic/components/charging-stations/CSData.vue b/ui/web/src/skins/classic/components/charging-stations/CSData.vue
index 13377f46..a8e8c260 100644
--- a/ui/web/src/skins/classic/components/charging-stations/CSData.vue
+++ b/ui/web/src/skins/classic/components/charging-stations/CSData.vue
@@ -71,7 +71,7 @@
         Set Supervision Url
       </ToggleButton>
       <ToggleButton
-        :id="`${chargingStation.stationInfo.hashId}-show-details`"
+        :id="`${chargingStation.stationInfo.hashId}-change-configuration`"
         :off="
           () => {
             $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS }).catch(() => undefined)
@@ -81,7 +81,7 @@
           () => {
             $router
               .push({
-                name: ROUTE_NAMES.SHOW_DETAILS,
+                name: ROUTE_NAMES.CHANGE_CONFIGURATION,
                 params: {
                   hashId: chargingStation.stationInfo.hashId,
                   chargingStationId: chargingStation.stationInfo.chargingStationId,
@@ -93,10 +93,10 @@
         :shared="true"
         @clicked="$emit('need-refresh')"
       >
-        Show Details
+        Change Configuration
       </ToggleButton>
       <ToggleButton
-        :id="`${chargingStation.stationInfo.hashId}-change-configuration`"
+        :id="`${chargingStation.stationInfo.hashId}-show-details`"
         :off="
           () => {
             $router.push({ name: ROUTE_NAMES.CHARGING_STATIONS }).catch(() => undefined)
@@ -106,7 +106,7 @@
           () => {
             $router
               .push({
-                name: ROUTE_NAMES.CHANGE_CONFIGURATION,
+                name: ROUTE_NAMES.SHOW_DETAILS,
                 params: {
                   hashId: chargingStation.stationInfo.hashId,
                   chargingStationId: chargingStation.stationInfo.chargingStationId,
@@ -118,7 +118,7 @@
         :shared="true"
         @clicked="$emit('need-refresh')"
       >
-        Change Configuration
+        Show Details
       </ToggleButton>
       <Button @click="deleteChargingStation()">
         Delete Charging Station
diff --git a/ui/web/src/skins/modern/components/StationCard.vue b/ui/web/src/skins/modern/components/StationCard.vue
index 9882cceb..92b48667 100644
--- a/ui/web/src/skins/modern/components/StationCard.vue
+++ b/ui/web/src/skins/modern/components/StationCard.vue
@@ -132,21 +132,21 @@
         </ActionButton>
         <ActionButton
           variant="ghost"
-          @click="emitOpenAuthorize"
+          @click="emitOpenChangeConfig"
         >
-          Authorize
+          Configuration
         </ActionButton>
         <ActionButton
           variant="ghost"
-          @click="emitOpenDetails"
+          @click="emitOpenAuthorize"
         >
-          Details
+          Authorize
         </ActionButton>
         <ActionButton
           variant="ghost"
-          @click="emitOpenChangeConfig"
+          @click="emitOpenDetails"
         >
-          Configuration
+          Details
         </ActionButton>
       </div>
       <ActionButton
diff --git a/ui/web/tests/unit/skins/classic/CSData.test.ts b/ui/web/tests/unit/skins/classic/CSData.test.ts
index 512d469c..16387fd3 100644
--- a/ui/web/tests/unit/skins/classic/CSData.test.ts
+++ b/ui/web/tests/unit/skins/classic/CSData.test.ts
@@ -290,14 +290,21 @@ describe('CSData', () => {
     it('should render set-supervision-url toggle button', () => {
       const wrapper = mountCSData()
       const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
-      expect(toggleButtons.length).toBeGreaterThanOrEqual(1)
-      expect(toggleButtons[0].props('shared')).toBe(true)
+      const setSupervisionUrlToggle = toggleButtons.find(
+        toggleButton => toggleButton.props('id') === `${TEST_HASH_ID}-set-supervision-url`
+      )
+      expect(setSupervisionUrlToggle).toBeDefined()
+      expect(setSupervisionUrlToggle?.props('shared')).toBe(true)
     })
 
     it('should trigger router push to set-supervision-url on toggle on', () => {
       const wrapper = mountCSData()
       const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
-      const toggleProps = toggleButtons[0].props() as unknown as StubProps
+      const setSupervisionUrlToggle = toggleButtons.find(
+        toggleButton => toggleButton.props('id') === `${TEST_HASH_ID}-set-supervision-url`
+      )
+      expect(setSupervisionUrlToggle).toBeDefined()
+      const toggleProps = setSupervisionUrlToggle?.props() as unknown as StubProps
       toggleProps.on?.()
       expect(mockPush).toHaveBeenCalledOnce()
       const callArg = mockPush.mock.calls[0][0] as { name: string; params: Record<string, string> }
@@ -309,7 +316,39 @@ describe('CSData', () => {
     it('should trigger router push to charging-stations on toggle off', () => {
       const wrapper = mountCSData()
       const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
-      const toggleProps = toggleButtons[0].props() as unknown as StubProps
+      const setSupervisionUrlToggle = toggleButtons.find(
+        toggleButton => toggleButton.props('id') === `${TEST_HASH_ID}-set-supervision-url`
+      )
+      expect(setSupervisionUrlToggle).toBeDefined()
+      const toggleProps = setSupervisionUrlToggle?.props() as unknown as StubProps
+      toggleProps.off?.()
+      expect(mockPush).toHaveBeenCalledWith({ name: 'charging-stations' })
+    })
+
+    it('should trigger router push to change-configuration on toggle on', () => {
+      const wrapper = mountCSData()
+      const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
+      const changeConfigurationToggle = toggleButtons.find(
+        toggleButton => toggleButton.props('id') === `${TEST_HASH_ID}-change-configuration`
+      )
+      expect(changeConfigurationToggle).toBeDefined()
+      const toggleProps = changeConfigurationToggle?.props() as unknown as StubProps
+      toggleProps.on?.()
+      expect(mockPush).toHaveBeenCalledOnce()
+      const callArg = mockPush.mock.calls[0][0] as { name: string; params: Record<string, string> }
+      expect(callArg.name).toBe('change-configuration')
+      expect(callArg.params.hashId).toBe(TEST_HASH_ID)
+      expect(callArg.params.chargingStationId).toBe(TEST_STATION_ID)
+    })
+
+    it('should trigger router push to charging-stations on change-configuration toggle off', () => {
+      const wrapper = mountCSData()
+      const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
+      const changeConfigurationToggle = toggleButtons.find(
+        toggleButton => toggleButton.props('id') === `${TEST_HASH_ID}-change-configuration`
+      )
+      expect(changeConfigurationToggle).toBeDefined()
+      const toggleProps = changeConfigurationToggle?.props() as unknown as StubProps
       toggleProps.off?.()
       expect(mockPush).toHaveBeenCalledWith({ name: 'charging-stations' })
     })
@@ -317,8 +356,11 @@ describe('CSData', () => {
     it('should trigger router push to show-details on toggle on', () => {
       const wrapper = mountCSData()
       const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
-      expect(toggleButtons[1].props('id')).toBe(`${TEST_HASH_ID}-show-details`)
-      const toggleProps = toggleButtons[1].props() as unknown as StubProps
+      const showDetailsToggle = toggleButtons.find(
+        toggleButton => toggleButton.props('id') === `${TEST_HASH_ID}-show-details`
+      )
+      expect(showDetailsToggle).toBeDefined()
+      const toggleProps = showDetailsToggle?.props() as unknown as StubProps
       toggleProps.on?.()
       expect(mockPush).toHaveBeenCalledOnce()
       const callArg = mockPush.mock.calls[0][0] as { name: string; params: Record<string, string> }
@@ -330,8 +372,11 @@ describe('CSData', () => {
     it('should trigger router push to charging-stations on show-details toggle off', () => {
       const wrapper = mountCSData()
       const toggleButtons = wrapper.findAllComponents(ToggleButtonStub)
-      expect(toggleButtons[1].props('id')).toBe(`${TEST_HASH_ID}-show-details`)
-      const toggleProps = toggleButtons[1].props() as unknown as StubProps
+      const showDetailsToggle = toggleButtons.find(
+        toggleButton => toggleButton.props('id') === `${TEST_HASH_ID}-show-details`
+      )
+      expect(showDetailsToggle).toBeDefined()
+      const toggleProps = showDetailsToggle?.props() as unknown as StubProps
       toggleProps.off?.()
       expect(mockPush).toHaveBeenCalledWith({ name: 'charging-stations' })
     })
-- 
2.53.0