From 84ec8d3464903cfa8259ff622bff2b19b5c47132 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Thu, 7 Mar 2024 19:37:34 +0100
Subject: [PATCH] refactor(ui): cleanup eslint configuration
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 pnpm-lock.yaml                                 | 11 +++++++++++
 ui/web/.eslintrc.cjs                           | 16 ++++++----------
 ui/web/package.json                            |  1 +
 .../components/actions/AddChargingStations.vue |  2 ++
 .../components/actions/SetSupervisionUrl.vue   |  1 +
 .../components/actions/StartTransaction.vue    |  1 +
 ui/web/src/components/buttons/ToggleButton.vue |  1 +
 .../charging-stations/CSConnector.vue          |  3 ++-
 .../components/charging-stations/CSData.vue    |  7 ++++---
 ui/web/src/composables/UIClient.ts             |  4 +++-
 ui/web/src/main.ts                             | 10 ++++++----
 ui/web/src/router/index.ts                     |  5 +++--
 ui/web/src/views/ChargingStationsView.vue      | 18 ++++++++++--------
 ui/web/start.js                                |  1 +
 ui/web/tests/unit/CSTable.spec.ts              |  3 ++-
 ui/web/vite.config.ts                          |  5 +++--
 ui/web/vitest.config.ts                        |  4 +++-
 17 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d8bee504..26aed9cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -266,6 +266,9 @@ importers:
       eslint-plugin-import:
         specifier: ^2.29.1
         version: 2.29.1(@typescript-eslint/parser@7.1.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-plugin-simple-import-sort:
+        specifier: ^12.0.0
+        version: 12.0.0(eslint@8.57.0)
       eslint-plugin-vue:
         specifier: ^9.22.0
         version: 9.22.0(eslint@8.57.0)
@@ -5366,6 +5369,14 @@ packages:
       eslint: 8.57.0
     dev: true
 
+  /eslint-plugin-simple-import-sort@12.0.0(eslint@8.57.0):
+    resolution: {integrity: sha512-8o0dVEdAkYap0Cn5kNeklaKcT1nUsa3LITWEuFk3nJifOoD+5JQGoyDUW2W/iPWwBsNBJpyJS9y4je/BgxLcyQ==}
+    peerDependencies:
+      eslint: '>=5.0.0'
+    dependencies:
+      eslint: 8.57.0
+    dev: true
+
   /eslint-plugin-tsdoc@0.2.17:
     resolution: {integrity: sha512-xRmVi7Zx44lOBuYqG8vzTXuL6IdGOeF9nHX17bjJ8+VE6fsxpdGem0/SBTmAwgYMKYB1WBkqRJVQ+n8GK041pA==}
     dependencies:
diff --git a/ui/web/.eslintrc.cjs b/ui/web/.eslintrc.cjs
index 128bff5f..55c077bd 100644
--- a/ui/web/.eslintrc.cjs
+++ b/ui/web/.eslintrc.cjs
@@ -9,11 +9,12 @@ module.exports = defineConfig({
     node: true
   },
 
-  plugins: ['import'],
+  plugins: ['simple-import-sort', 'import'],
 
   extends: [
     'eslint:recommended',
     'plugin:import/recommended',
+    'plugin:import/typescript',
     'plugin:vue/vue3-recommended',
     '@vue/eslint-config-typescript/recommended',
     '@vue/eslint-config-prettier'
@@ -28,20 +29,15 @@ module.exports = defineConfig({
   },
 
   parserOptions: {
+    sourceType: 'module',
     ecmaVersion: 'latest'
   },
 
   rules: {
     'no-console': env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'vue/require-v-for-key': 'off',
-    'vue/multi-word-component-names': 'off',
-    'sort-imports': [
-      'error',
-      {
-        ignoreDeclarationSort: true
-      }
-    ],
-    'import/order': 'error'
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    'vue/multi-word-component-names': 'off'
   }
 })
diff --git a/ui/web/package.json b/ui/web/package.json
index ce4a83a8..c5bd79c5 100644
--- a/ui/web/package.json
+++ b/ui/web/package.json
@@ -52,6 +52,7 @@
     "eslint-define-config": "^2.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
     "eslint-plugin-vue": "^9.22.0",
     "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
diff --git a/ui/web/src/components/actions/AddChargingStations.vue b/ui/web/src/components/actions/AddChargingStations.vue
index 6e3c2932..a95cba2b 100644
--- a/ui/web/src/components/actions/AddChargingStations.vue
+++ b/ui/web/src/components/actions/AddChargingStations.vue
@@ -6,6 +6,7 @@
     <option
       v-for="template in $templates.value"
       v-show="Array.isArray($templates.value) && $templates.value.length > 0"
+      :key="template"
     >
       {{ template }}
     </option>
@@ -95,6 +96,7 @@
 
 <script setup lang="ts">
 import { getCurrentInstance, ref, watch } from 'vue'
+
 import Button from '@/components/buttons/Button.vue'
 import { convertToBoolean, randomUUID } from '@/composables'
 
diff --git a/ui/web/src/components/actions/SetSupervisionUrl.vue b/ui/web/src/components/actions/SetSupervisionUrl.vue
index 887b1d4c..edefc8a5 100644
--- a/ui/web/src/components/actions/SetSupervisionUrl.vue
+++ b/ui/web/src/components/actions/SetSupervisionUrl.vue
@@ -35,6 +35,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import Button from '@/components/buttons/Button.vue'
 
 defineProps<{
diff --git a/ui/web/src/components/actions/StartTransaction.vue b/ui/web/src/components/actions/StartTransaction.vue
index 18145d8d..a0ab5cec 100644
--- a/ui/web/src/components/actions/StartTransaction.vue
+++ b/ui/web/src/components/actions/StartTransaction.vue
@@ -30,6 +30,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import Button from '@/components/buttons/Button.vue'
 import { convertToInt } from '@/composables'
 
diff --git a/ui/web/src/components/buttons/ToggleButton.vue b/ui/web/src/components/buttons/ToggleButton.vue
index 6d72ba10..537a198b 100644
--- a/ui/web/src/components/buttons/ToggleButton.vue
+++ b/ui/web/src/components/buttons/ToggleButton.vue
@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import Button from '@/components/buttons/Button.vue'
 import { getFromLocalStorage, setToLocalStorage } from '@/composables'
 
diff --git a/ui/web/src/components/charging-stations/CSConnector.vue b/ui/web/src/components/charging-stations/CSConnector.vue
index b75fc782..9bfeae6d 100644
--- a/ui/web/src/components/charging-stations/CSConnector.vue
+++ b/ui/web/src/components/charging-stations/CSConnector.vue
@@ -42,10 +42,11 @@
 
 <script setup lang="ts">
 import { useToast } from 'vue-toast-notification'
+
 import Button from '@/components/buttons/Button.vue'
-import type { ConnectorStatus, Status } from '@/types'
 import ToggleButton from '@/components/buttons/ToggleButton.vue'
 import { useUIClient } from '@/composables'
+import type { ConnectorStatus, Status } from '@/types'
 
 const props = defineProps<{
   hashId: string
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 0da66895..abc08762 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -66,9 +66,9 @@
           </tr>
         </thead>
         <tbody id="connectors-table__body">
-          <!-- eslint-disable-next-line vue/valid-v-for -->
           <CSConnector
             v-for="(connector, index) in getConnectorStatuses()"
+            :key="index + 1"
             :hash-id="chargingStation.stationInfo.hashId"
             :charging-station-id="chargingStation.stationInfo.chargingStationId"
             :connector-id="index + 1"
@@ -84,11 +84,12 @@
 
 <script setup lang="ts">
 import { useToast } from 'vue-toast-notification'
-import CSConnector from '@/components/charging-stations/CSConnector.vue'
+
 import Button from '@/components/buttons/Button.vue'
-import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
 import ToggleButton from '@/components/buttons/ToggleButton.vue'
+import CSConnector from '@/components/charging-stations/CSConnector.vue'
 import { useUIClient } from '@/composables'
+import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
 
 const props = defineProps<{
   chargingStation: ChargingStationData
diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index dde5b556..64f2bc69 100644
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -1,5 +1,5 @@
 import { useToast } from 'vue-toast-notification'
-import { randomUUID } from './Utils'
+
 import {
   ApplicationProtocol,
   AuthenticationType,
@@ -12,6 +12,8 @@ import {
   type UIServerConfigurationSection
 } from '@/types'
 
+import { randomUUID } from './Utils'
+
 type ResponseHandler = {
   procedureName: ProcedureName
   resolve: (value: ResponsePayload | PromiseLike<ResponsePayload>) => void
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index f69f2c46..a39c049b 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -1,10 +1,12 @@
+import 'vue-toast-notification/dist/theme-bootstrap.css'
+
 import { type App as AppType, createApp, ref } from 'vue'
 import ToastPlugin from 'vue-toast-notification'
-import type { ChargingStationData, ConfigurationData, UIServerConfigurationSection } from '@/types'
-import { router } from '@/router'
-import { UIClient, getFromLocalStorage, setToLocalStorage } from '@/composables'
+
 import App from '@/App.vue'
-import 'vue-toast-notification/dist/theme-bootstrap.css'
+import { getFromLocalStorage, setToLocalStorage, UIClient } from '@/composables'
+import { router } from '@/router'
+import type { ChargingStationData, ConfigurationData, UIServerConfigurationSection } from '@/types'
 
 const app = createApp(App)
 
diff --git a/ui/web/src/router/index.ts b/ui/web/src/router/index.ts
index 23cca6a4..cee4f416 100644
--- a/ui/web/src/router/index.ts
+++ b/ui/web/src/router/index.ts
@@ -1,8 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import ChargingStationsView from '@/views/ChargingStationsView.vue'
-import StartTransaction from '@/components/actions/StartTransaction.vue'
+
 import AddChargingStations from '@/components/actions/AddChargingStations.vue'
 import SetSupervisionUrl from '@/components/actions/SetSupervisionUrl.vue'
+import StartTransaction from '@/components/actions/StartTransaction.vue'
+import ChargingStationsView from '@/views/ChargingStationsView.vue'
 import NotFoundView from '@/views/NotFoundView.vue'
 
 export const router = createRouter({
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 56200d2e..7b4f8a53 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -51,6 +51,7 @@
         >
           <option
             v-for="uiServerConfiguration in uiServerConfigurations"
+            :key="uiServerConfiguration.index"
             :value="uiServerConfiguration.index"
           >
             {{
@@ -114,15 +115,11 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useToast } from 'vue-toast-notification'
+
+import ReloadButton from '@/components/buttons/ReloadButton.vue'
+import ToggleButton from '@/components/buttons/ToggleButton.vue'
 import CSTable from '@/components/charging-stations/CSTable.vue'
-import type {
-  ChargingStationData,
-  ResponsePayload,
-  SimulatorState,
-  UIServerConfigurationSection
-} from '@/types'
 import Container from '@/components/Container.vue'
-import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import {
   deleteFromLocalStorage,
   getFromLocalStorage,
@@ -131,7 +128,12 @@ import {
   setToLocalStorage,
   useUIClient
 } from '@/composables'
-import ToggleButton from '@/components/buttons/ToggleButton.vue'
+import type {
+  ChargingStationData,
+  ResponsePayload,
+  SimulatorState,
+  UIServerConfigurationSection
+} from '@/types'
 
 const simulatorState = ref<SimulatorState | undefined>(undefined)
 
diff --git a/ui/web/start.js b/ui/web/start.js
index c620c468..9a325e56 100644
--- a/ui/web/start.js
+++ b/ui/web/start.js
@@ -2,6 +2,7 @@ import { createServer } from 'node:http'
 import { dirname, join } from 'node:path'
 import { env } from 'node:process'
 import { fileURLToPath } from 'node:url'
+
 import finalhandler from 'finalhandler'
 import serveStatic from 'serve-static'
 
diff --git a/ui/web/tests/unit/CSTable.spec.ts b/ui/web/tests/unit/CSTable.spec.ts
index 0a364a6c..8a417af8 100644
--- a/ui/web/tests/unit/CSTable.spec.ts
+++ b/ui/web/tests/unit/CSTable.spec.ts
@@ -1,5 +1,6 @@
-import { expect, test } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
+import { expect, test } from 'vitest'
+
 import CSTable from '@/components/charging-stations/CSTable.vue'
 import type { ChargingStationData } from '@/types'
 
diff --git a/ui/web/vite.config.ts b/ui/web/vite.config.ts
index a5a1d533..6d5f08a3 100644
--- a/ui/web/vite.config.ts
+++ b/ui/web/vite.config.ts
@@ -1,7 +1,8 @@
-import { URL, fileURLToPath } from 'node:url'
-import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [vue(), vueJsx()],
diff --git a/ui/web/vitest.config.ts b/ui/web/vitest.config.ts
index 39905b29..c5276e5c 100644
--- a/ui/web/vitest.config.ts
+++ b/ui/web/vitest.config.ts
@@ -1,6 +1,8 @@
 import { fileURLToPath } from 'node:url'
-import { configDefaults, defineConfig } from 'vitest/config'
+
 import { mergeConfig } from 'vite'
+import { configDefaults, defineConfig } from 'vitest/config'
+
 import viteConfig from './vite.config'
 
 export default mergeConfig(
-- 
2.34.1