chore: switch to vitest and typescript (#2400)

pom.xml

@@ -76,8 +76,8 @@
         <checkstyle.version>9.3</checkstyle.version>
         <spring-javaformat-checkstyle.version>0.0.38</spring-javaformat-checkstyle.version>
         <nexus-staging-maven-plugin.version>1.6.13</nexus-staging-maven-plugin.version>
-        <node.version>v16.13.2</node.version>
-        <npm.version>8.3.2</npm.version>
+        <node.version>v18.16.0</node.version>
+        <npm.version>9.5.1</npm.version>
     </properties>
     <modules>
         <module>spring-boot-admin-server</module>

spring-boot-admin-docs/src/site/asciidoc/customize_ui.adoc

@@ -1,11 +1,34 @@
 [[customizing-external-views]]
-== Linking / Embedding External Pages ==
 
-You can very simply add a link to external pages via configuration or even embed them (adding the `iframe=true`):
+== Linking / Embedding External Pages in Navbar ==
 
+Links will be opened in a new window/tab (i.e. `target="_blank"`) having no access
+to opener and referrer (`rel="noopener noreferrer"`).
+
+=== Simple link ===
+To add a simple link to an external page, use the following snippet.
+
+[source,yaml,indent=0]
+----
+include::{samples-dir}/spring-boot-admin-sample-servlet/src/main/resources/application.yml[tags=customization-external-views-simple-link]
+----
+
+<1> The label will be shown in the navbar
+<2> URL to the page you want to link to
+<3> Order that allows to specify position of item in navbar
+
+=== Dropdown with links ===
+To aggregate links below a single element, dropdowns can be configured as follows.
+
+[source,yaml,indent=0]
+----
+include::{samples-dir}/spring-boot-admin-sample-servlet/src/main/resources/application.yml[tags=customization-external-views-dropdown-with-links]
+----
+
+=== Dropdown as link having links as children ===
 [source,yaml,indent=0]
 ----
-include::{samples-dir}/spring-boot-admin-sample-servlet/src/main/resources/application.yml[tags=customization-external-views]
+include::{samples-dir}/spring-boot-admin-sample-servlet/src/main/resources/application.yml[tags=customization-external-views-dropdown-is-link-with-links-as-children]
 ----
 
 [[customizing-custom-views]]

spring-boot-admin-samples/spring-boot-admin-sample-custom-ui/src/custom-endpoint.vue

@@ -22,21 +22,23 @@
 </template>
 
 <script>
-  export default {
-    props: {
-      instance: { //<1>
-        type: Object,
-        required: true
-      }
+export default {
+  props: {
+    instance: {
+      //<1>
+      type: Object,
+      required: true,
     },
-    data: () => ({
-      text: ''
-    }),
-    async created() {
-      const response = await this.instance.axios.get('actuator/custom'); //<2>
-      this.text = response.data;
-    }
-  };
+  },
+  data: () => ({
+    text: "",
+  }),
+  async created() {
+    console.log(this.instance);
+    const response = await this.instance.axios.get("actuator/custom"); //<2>
+    this.text = response.data;
+  },
+};
 </script>
 
 <style lang="css" scoped>

spring-boot-admin-samples/spring-boot-admin-sample-custom-ui/src/index.js

@@ -15,11 +15,10 @@
  */
 
 /* global SBA */
-import customEndpoint from './custom-endpoint.vue';
-import customSubitem from './custom-subitem.vue';
-import custom from './custom.vue';
-import handle from './handle.vue';
-
+import customEndpoint from "./custom-endpoint.vue";
+import customSubitem from "./custom-subitem.vue";
+import custom from "./custom.vue";
+import handle from "./handle.vue";
 
 // tag::customization-ui-toplevel[]
 SBA.use({
@@ -50,7 +49,6 @@ SBA.viewRegistry.addView({
   name: "customSub",
   parent: "custom", // <1>
   path: "/customSub", // <2>
-  isChildRoute: false, // <3>
   component: customSubitem,
   label: "Custom Sub",
   order: 1000,
@@ -61,7 +59,6 @@ SBA.viewRegistry.addView({
   name: "customSubUser",
   parent: "user", // <1>
   path: "/customSub", // <2>
-  isChildRoute: false, // <3>
   component: customSubitem,
   label: "Custom Sub In Usermenu",
   order: 1000,
@@ -76,6 +73,8 @@ SBA.viewRegistry.addView({
   label: "Custom",
   group: "custom", // <2>
   order: 1000,
-  isEnabled: ({ instance }) => instance.hasEndpoint("custom"), // <3>
+  isEnabled: ({ instance }) => {
+    return instance.hasEndpoint("custom");
+  }, // <3>
 });
 // end::customization-ui-endpoint[]

spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/resources/application.yml

@@ -58,16 +58,49 @@ spring:
   main:
     lazy-initialization: true
 ---
-# tag::customization-external-views[]
+# tag::customization-external-views-simple-link[]
 spring:
   boot:
     admin:
       ui:
         external-views:
-          - label: "🚀"
-            url: https://codecentric.de
-            order: 2000
-# end::customization-external-views[]
+          - label: "🚀" #<1>
+            url: "https://codecentric.de" #<2>
+            order: 2000 #<3>
+# end::customization-external-views-simple-link[]
+---
+# tag::customization-external-views-dropdown-with-links[]
+spring:
+  boot:
+    admin:
+      ui:
+        external-views:
+          - label: Link w/o children
+            children:
+              - label: "📖 Docs"
+                url: https://codecentric.github.io/spring-boot-admin/current/
+              - label: "📦 Maven"
+                url: https://search.maven.org/search?q=g:de.codecentric%20AND%20a:spring-boot-admin-starter-server
+              - label: "🐙 GitHub"
+                url: https://github.com/codecentric/spring-boot-admin
+# end::customization-external-views-dropdown-with-links[]
+---
+# tag::customization-external-views-dropdown-is-link-with-links-as-children[]
+spring:
+  boot:
+    admin:
+      ui:
+        external-views:
+          - label: Link w children
+            url: https://codecentric.de  #<1>
+            children:
+              - label: "📖 Docs"
+                url: https://codecentric.github.io/spring-boot-admin/current/
+              - label: "📦 Maven"
+                url: https://search.maven.org/search?q=g:de.codecentric%20AND%20a:spring-boot-admin-starter-server
+              - label: "🐙 GitHub"
+                url: https://github.com/codecentric/spring-boot-admin
+# end::customization-external-views-dropdown-is-link-with-links-as-children[]
 ---
 # tag::customization-view-settings[]
 spring:

spring-boot-admin-server-ui/.eslintrc.js

@@ -1,18 +1,37 @@
 module.exports = {
+  root: true,
   env: {
     node: true,
   },
-  extends: ['plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier/recommended',
+  ],
+  plugins: ['prettier', '@typescript-eslint'],
+  ignorePatterns: ['dist'],
   rules: {
     'vue/multi-word-component-names': 'off',
     'vue/no-v-html': 'off',
+    'vue/no-reserved-component-names': 'off',
+    'vue/no-v-text-v-html-on-component': 'off',
     quotes: [2, 'single', { avoidEscape: true }],
   },
+  globals: {
+    globalThis: false,
+    window: false,
+  },
   overrides: [
     {
-      files: ['**/*.spec.js', '**/*.spec.jsx'],
-      env: {
-        jest: true,
+      files: ['*.ts'],
+      rules: {
+        'no-undef': 'off',
       },
     },
   ],

spring-boot-admin-server-ui/.storybook/main.js

@@ -1,23 +1,19 @@
 const { mergeConfig } = require('vite');
 const path = require('path');
 
-const frontend = path.resolve(__dirname, '../src/main/frontend/');
-
 module.exports = {
   stories: [
-    {
-      directory: frontend,
-    },
+    '../src/main/frontend/**/*.stories.mdx',
+    '../src/main/frontend/components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
+    '@storybook/addon-docs',
     {
-      name: '@storybook/addon-postcss',
+      name: '@storybook/addon-styling',
       options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
+        postCss: true,
       },
     },
   ],
@@ -26,14 +22,12 @@ module.exports = {
     builder: '@storybook/builder-vite',
   },
   async viteFinal(config) {
-    config.plugins = config.plugins.filter((p) => p.name !== 'vue-docgen');
-
     return mergeConfig(config, {
       resolve: {
         alias: {
-          '@': frontend,
+          '@': path.resolve(__dirname, '../src/main/frontend/'),
         },
-        extensions: ['.vue', '.js', '.json'],
+        extensions: ['.vue', '.js', '.json', '.ts'],
       },
     });
   },

spring-boot-admin-server-ui/.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<script>
+  window.global = window;
+  window.SBA = {
+    uiSettings: {
+      brand: '<img src=".storybook/img/icon-spring-boot-admin.svg"><span>Spring Boot Admin</span>',
+    }
+  };
+</script>

spring-boot-admin-server-ui/.storybook/preview.js

@@ -1,34 +1,29 @@
 import { app } from '@storybook/vue3';
-import { initialize, mswDecorator } from 'msw-storybook-addon';
+import { createRouter, createWebHistory } from 'vue-router';
 
 import './storybook.css';
 import '@/index.css';
 
-import components from '@/components/index.js';
+import components from '@/components';
+import i18n from '@/i18n';
 
-import i18n from '@/i18n/index.js';
-import applicationsEndpoint from '@/mocks/applications';
-import mappingsEndpoint from '@/mocks/instance/mappings';
-
-initialize();
-
-app.use(components);
 app.use(i18n);
+app.use(components);
+app.use(
+  createRouter({
+    history: createWebHistory(),
+    linkActiveClass: 'is-active',
+    routes: [],
+  })
+);
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
+  layout: 'fullscreen',
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-  msw: {
-    handlers: {
-      auth: null,
-      others: [...mappingsEndpoint, ...applicationsEndpoint],
-    },
-  },
 };
-
-export const decorators = [mswDecorator];