From d47f07106eb9a632bfdbd52594bd0df25fb9b7f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sat, 5 Oct 2024 11:04:03 +0200
Subject: [PATCH] feat(#3101): fix warnings and deprecations

---
 spring-boot-admin-server-ui/.nvmrc            |  1 +
 .../components/sba-toggle-scope-button.vue    | 56 ++++++-------------
 .../main/frontend/public/mockServiceWorker.js |  2 +-
 .../frontend/services/startup-actuator.ts     |  4 +-
 spring-boot-admin-server-ui/vite.config.mts   |  5 ++
 5 files changed, 27 insertions(+), 41 deletions(-)
 create mode 100644 spring-boot-admin-server-ui/.nvmrc

diff --git a/spring-boot-admin-server-ui/.nvmrc b/spring-boot-admin-server-ui/.nvmrc
new file mode 100644
index 00000000000..fb3e6603b5e
--- /dev/null
+++ b/spring-boot-admin-server-ui/.nvmrc
@@ -0,0 +1 @@
+v18.20.2
diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-toggle-scope-button.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-toggle-scope-button.vue
index ba11e744146..92f0559f4ec 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-toggle-scope-button.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-toggle-scope-button.vue
@@ -15,14 +15,14 @@
   -->
 
 <template>
-  <div>
+  <div class="flex">
     <sba-button
-      v-if="instanceCount <= 1 || modelValue === APPLICATION"
+      v-if="instanceCount <= 1 || modelValue === ActionScope.APPLICATION"
       :class="classNames"
       :title="$t('term.affects_all_instances', { count: instanceCount })"
       class="w-full"
       size="sm"
-      @click="toggleScope(ActionScope.INSTANCE)"
+      @click="() => (modelValue = ActionScope.INSTANCE)"
     >
       <span v-text="$t('term.application')" />
     </sba-button>
@@ -32,14 +32,14 @@
       :title="$t('term.affects_this_instance_only')"
       class="w-full"
       size="sm"
-      @click="toggleScope(ActionScope.APPLICATION)"
+      @click="() => (modelValue = ActionScope.APPLICATION)"
     >
       <span v-text="$t('term.instance')" />
     </sba-button>
 
     <p v-if="showInfo" class="text-center text-xs pt-1 truncate">
       <span
-        v-if="modelValue === APPLICATION"
+        v-if="modelValue === ActionScope.APPLICATION"
         v-text="$t('term.affects_all_instances', { count: instanceCount })"
       />
       <span v-else v-text="$t('term.affects_this_instance_only')" />
@@ -47,40 +47,18 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 import { ActionScope } from '@/components/ActionScope';
-import SbaButton from '@/components/sba-button';
+import SbaButton from '@/components/sba-button.vue';
 
-export default {
-  name: 'SbaToggleScopeButton',
-  components: { SbaButton },
-  props: {
-    modelValue: {
-      type: String,
-      required: true,
-    },
-    instanceCount: {
-      type: Number,
-      required: true,
-    },
-    showInfo: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      ActionScope,
-      APPLICATION: ActionScope.APPLICATION,
-      INSTANCE: ActionScope.INSTANCE,
-      classNames: [],
-    };
-  },
-  methods: {
-    toggleScope(newScope) {
-      this.$emit('update:modelValue', newScope);
-    },
-  },
-};
+const modelValue = defineModel({
+  type: String,
+  default: ActionScope.APPLICATION,
+});
+
+const { instanceCount, showInfo = true } = defineProps<{
+  instanceCount: number;
+  showInfo: boolean;
+  classNames?: string | string[] | Record<string, boolean>;
+}>();
 </script>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/public/mockServiceWorker.js b/spring-boot-admin-server-ui/src/main/frontend/public/mockServiceWorker.js
index 15751fa1994..a8262f093fb 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/public/mockServiceWorker.js
+++ b/spring-boot-admin-server-ui/src/main/frontend/public/mockServiceWorker.js
@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.5'
+const PACKAGE_VERSION = '2.4.9'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
diff --git a/spring-boot-admin-server-ui/src/main/frontend/services/startup-actuator.ts b/spring-boot-admin-server-ui/src/main/frontend/services/startup-actuator.ts
index 57c9f34108c..a6316058bb4 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/services/startup-actuator.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/services/startup-actuator.ts
@@ -13,8 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { parse } from 'iso8601-duration';
+
 import { StartupActuatorEventTree } from '@/services/startup-activator-tree';
-import { parse, toMilliseconds } from '@/utils/iso8601-duration';
+import { toMilliseconds } from '@/utils/iso8601-duration';
 
 const regex = new RegExp('([^=\\s]*)=\\[([^\\]]*)\\]', 'gi');
 
diff --git a/spring-boot-admin-server-ui/vite.config.mts b/spring-boot-admin-server-ui/vite.config.mts
index 46576b5ec2b..30b3d873955 100644
--- a/spring-boot-admin-server-ui/vite.config.mts
+++ b/spring-boot-admin-server-ui/vite.config.mts
@@ -39,6 +39,11 @@ export default defineConfig(({ mode }) => {
     ],
     css: {
       postcss,
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler',
+        },
+      },
     },
     test: {
       root: __dirname,