Include .ts files when formatting and linting (#2522)

.editorconfig

@@ -27,6 +27,6 @@ ij_java_layout_static_imports_separately = true
 indent_style = space
 indent_size = 4
 
-[*.{js,vue}]
+[*.{js,ts,vue}]
 indent_style = space
 indent_size = 2

CONTRIBUTING.md

@@ -30,12 +30,21 @@ Install and configure the Checkstyle Plugin, and enable the configuration file.
 ##### Configuration
 Before configuration, add the  `spring-javaformat-checkstyle` JAR to the Third-Party checks.
 1. Preferences > Tools > Checkstyle > Third-Party Checks
-1. Add `~/.m2/repository/io/spring/javaformat/spring-javaformat-checkstyle/0.0.26/spring-javaformat-checkstyle-0.0.26.jar`
+2. Add `~/.m2/repository/io/spring/javaformat/spring-javaformat-checkstyle/0.0.26/spring-javaformat-checkstyle-0.0.26.jar`
 
 ##### Configuration File
 Add the configuration file and enabled it:
 1. Preferences > Tools > Checkstyle > Configuration File > +
-1. Add a Name, ex. Spring Boot Admin
-1. Use a local Checkstyle File, Browse to `src/checkstyle/checkstyle.xml` and click Next
-1. Enter the full path to the checkstyle header file: `<git repo>/src/checkstyle/checkstyle-header.txt`, click Finish
-1. Select the new configuration file to enable it
+2. Add a Name, ex. Spring Boot Admin
+3. Use a local Checkstyle File, Browse to `src/checkstyle/checkstyle.xml` and click Next
+4. Enter the full path to the checkstyle header file: `<git repo>/src/checkstyle/checkstyle-header.txt`, click Finish
+5. Select the new configuration file to enable it
+
+#### Prettier Plugin
+This plugin is able to run Prettier from within IntelliJ. It can even be configured to run on "Reformat Code" action. It comes bundles with the IDE but needs to be enabled.
+
+##### Configuration
+1. Preferences > Languages & Frameworks > JavaScript > Prettier
+2. Manual Prettier configuration
+   1. Prettier package: `<git repo>/spring-boot-admin-server-ui/node_modules/prettier`
+   2. Enable "Run on 'Reformat Code' action"

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

@@ -33,6 +33,7 @@ module.exports = {
       files: ['*.ts'],
       rules: {
         'no-undef': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
       },
     },
   ],

spring-boot-admin-server-ui/.prettierrc.json

@@ -2,5 +2,5 @@
   "singleQuote": true,
   "importOrder": ["(.*).css$","^[./]" ,"^@/components/(.*)$","^@/(.*)$"],
   "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
+  "importOrderSortSpecifiers": true
 }

spring-boot-admin-server-ui/package.json

@@ -10,8 +10,8 @@
     "test": "vitest run --silent",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint": "eslint --ext .js,.vue src/main/frontend",
-    "lint:fix": "eslint --ext .js,.vue --fix src/main/frontend",
+    "lint": "eslint --ext .js,.ts,.vue src/main/frontend",
+    "lint:fix": "eslint --ext .js,.ts,.vue --fix src/main/frontend",
     "format": "prettier src/main/frontend",
     "format:fix": "prettier src/main/frontend --write"
   },

spring-boot-admin-server-ui/src/main/frontend/components/sba-action-button-scoped.spec.ts

@@ -22,7 +22,7 @@ import SbaActionButtonScoped from './sba-action-button-scoped.vue';
 import { render } from '@/test-utils';
 
 describe('SbaActionButtonScoped', function () {
-  let actionFn = vi.fn().mockResolvedValue([]);
+  const actionFn = vi.fn().mockResolvedValue([]);
 
   beforeEach(() => {
     render(SbaActionButtonScoped, {

spring-boot-admin-server-ui/src/main/frontend/login.ts

@@ -20,7 +20,7 @@ import './login.css';
 import i18n from './i18n';
 import Login from './login/login.vue';
 
-let app = createApp(Login, {
+const app = createApp(Login, {
   csrf: window.csrf,
   icon: window.uiSettings.loginIcon,
   title: window.uiSettings.title,

spring-boot-admin-server-ui/src/main/frontend/mocks/applications/data.ts

@@ -130,7 +130,7 @@ export const instance = {
 };
 
 export const applications = Object.entries(HealthStatus).map((e) => {
-  let STATUS = e[0];
+  const STATUS = e[0];
 
   return {
     name: `application-${STATUS}`,

spring-boot-admin-server-ui/src/main/frontend/mocks/instance/auditevents/data.ts

@@ -1,4 +1,4 @@
-let now = new Date();
+const now = new Date();
 const today =
   now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate();
 

spring-boot-admin-server-ui/src/main/frontend/mocks/instance/jolokia/index.ts

@@ -12,7 +12,7 @@ const jolokiaEndpoint = [
     '/instances/:instanceId/actuator/jolokia',
     async (req, res, ctx) => {
       try {
-        let body = await req.json();
+        const body = await req.json();
         if (body.type === 'read') {
           return res(ctx.status(200), ctx.json(jolokiaRead));
         }

spring-boot-admin-server-ui/src/main/frontend/plugins/modal/api.ts

@@ -3,12 +3,13 @@ import { h } from 'vue';
 import ConfirmButtons from './ConfirmButtons';
 import Modal from './Modal';
 import { createComponent } from './helpers';
+
 import eventBus from '@/services/bus';
 
 export const useModal = (globalProps = {}) => {
   const t =
     globalProps.i18n?.global.t ||
-    function(value) {
+    function (value) {
       return value;
     };
 
@@ -18,31 +19,32 @@ export const useModal = (globalProps = {}) => {
       if (typeof options === 'string') title = options;
 
       const defaultProps = {
-        title
+        title,
       };
 
       const propsData = Object.assign({}, defaultProps, globalProps, options);
       return createComponent(Modal, propsData, document.body, slots);
     },
     async confirm(title, body) {
-      let bodyFn = () =>
+      const bodyFn = () =>
         h(
           'span',
           {
-            innerHTML: body
+            innerHTML: body,
           },
           []
         );
 
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { vNode, destroy } = this.open(
         { title },
         {
           buttons: () =>
             h(ConfirmButtons, {
               labelOk: t('term.ok'),
-              labelCancel: t('term.cancel')
+              labelCancel: t('term.cancel'),
             }),
-          body: bodyFn
+          body: bodyFn,
         }
       );
 
@@ -52,6 +54,6 @@ export const useModal = (globalProps = {}) => {
           resolve(result);
         });
       });
-    }
+    },
   };
 };

spring-boot-admin-server-ui/src/main/frontend/plugins/modal/index.ts

@@ -2,7 +2,7 @@ import { useModal } from './api';
 
 const SbaModalPlugin = {
   install: (app, options = {}) => {
-    let instance = useModal(options);
+    const instance = useModal(options);
     app.config.globalProperties.$sbaModal = instance;
     app.provide('$sbaModal', instance);
   },

spring-boot-admin-server-ui/src/main/frontend/services/startup-activator-tree.ts

@@ -56,7 +56,7 @@ export class StartupActuatorEventTree {
   }
 
   getPath(id) {
-    let event = this.getById(id);
+    const event = this.getById(id);
     if (!event) {
       return [];
     }

spring-boot-admin-server-ui/src/main/frontend/services/startup-actuator.spec.ts

@@ -23,6 +23,7 @@ describe('StartupActuatorService', () => {
   let events = {};
 
   beforeEach(() => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
     data = cloneDeep(require('./startup-actuator.fixture.spec.json'));
     events = data.timeline.events;
   });

spring-boot-admin-server-ui/src/main/frontend/utils/axios.ts

@@ -16,18 +16,15 @@
 import { useNotificationCenter } from '@stekoe/vue-toast-notificationcenter';
 import axios from 'axios';
 
-
-
 import sbaConfig from '../sba-config';
 
-
 const nc = useNotificationCenter();
 
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 axios.defaults.xsrfHeaderName = sbaConfig.csrf.headerName;
 
 export const redirectOn401 =
-  (predicate = (_) => true) =>
+  (predicate = () => true) =>
   (error) => {
     if (error.response && error.response.status === 401 && predicate(error)) {
       window.location.assign(
@@ -49,7 +46,7 @@ export const registerErrorToastInterceptor = (axios) => {
       (response) => response,
       (error) => {
         const data = error.request;
-        let message = `
+        const message = `
                 Request failed: ${data.statusText}<br>
                 <small>${data.responseURL}</small>
         `;

spring-boot-admin-server-ui/src/main/frontend/utils/logtail.ts

@@ -34,7 +34,7 @@ export default (getFn, interval, initialSize = 300 * 1024) => {
     }),
     concatMap((response) => {
       let initial = size === 0;
-      let contentLength = response.data.length;
+      const contentLength = response.data.length;
 
       if (response.status === 200) {
         if (!initial) {

spring-boot-admin-server-ui/src/main/frontend/viewRegistry.spec.ts

@@ -69,17 +69,17 @@ describe('viewRegistry', () => {
       ]
     );
 
-    let disabledView = viewRegistry.getViewByName('disabledView');
+    const disabledView = viewRegistry.getViewByName('disabledView');
     expect(disabledView).toBeDefined();
     expect(disabledView.isEnabled()).toBeFalsy();
 
-    let implicitlyEnabledView = viewRegistry.getViewByName(
+    const implicitlyEnabledView = viewRegistry.getViewByName(
       'implicitlyEnabledView'
     );
     expect(implicitlyEnabledView).toBeDefined();
     expect(implicitlyEnabledView.isEnabled()).toBeTruthy();
 
-    let explicitlyEnabledView = viewRegistry.getViewByName(
+    const explicitlyEnabledView = viewRegistry.getViewByName(
       'explicitlyEnabledView'
     );
     expect(explicitlyEnabledView).toBeDefined();

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/process-uptime.ts

@@ -47,12 +47,11 @@ export default {
   methods: {
     createSubscription() {
       if (this.value) {
-        const vm = this;
-        vm.startTs = moment();
-        vm.offset = 0;
+        this.startTs = moment();
+        this.offset = 0;
         return timer(0, 1000).subscribe({
           next: () => {
-            vm.offset = moment().valueOf() - vm.startTs.valueOf();
+            this.offset = moment().valueOf() - this.startTs.valueOf();
           },
         });
       }

spring-boot-admin-server-ui/src/main/frontend/views/instances/jolokia/index.spec.ts

@@ -8,13 +8,11 @@ import { render } from '@/test-utils';
 import Jolokia from '@/views/instances/jolokia/index.vue';
 
 describe('Jolokia', () => {
-  let renderResult;
-
   beforeEach(async () => {
     const application = new Application(applications[0]);
     const instance = application.instances[0];
 
-    renderResult = render(Jolokia, {
+    render(Jolokia, {
       props: {
         application,
         instance,

spring-boot-admin-server-ui/src/main/frontend/views/instances/logfile/index.vue

@@ -104,7 +104,14 @@ import subscribing from '@/mixins/subscribing';
 import sbaConfig from '@/sba-config';
 import Instance from '@/services/instance';
 import autolink from '@/utils/autolink';
-import { animationFrameScheduler, concatAll, concatMap, map, of, tap } from '@/utils/rxjs';
+import {
+  animationFrameScheduler,
+  concatAll,
+  concatMap,
+  map,
+  of,
+  tap,
+} from '@/utils/rxjs';
 import { VIEW_GROUP } from '@/views/ViewGroup';
 import SbaInstanceSection from '@/views/instances/shell/sba-instance-section';
 

spring-boot-admin-server-ui/src/main/frontend/views/wallboard/wallboard.stories.ts

@@ -13,7 +13,7 @@ export default {
 const Template = (args) => ({
   components: { Wallboard },
   setup() {
-    let { applicationStore } = useApplicationStore();
+    const { applicationStore } = useApplicationStore();
     applicationStore._dispatchEvent(
       'changed',
       shuffle([...healthStatus, ...healthStatus]).map((healthStatus) => {