feat(#5183): add language header interceptor to include UI language in requests (#5192)

Author: SteKoe

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import "./theme.css";
+@import './theme.css';
 
 :root {
   --bg-color-start: #71e69c;

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

@@ -17,7 +17,10 @@ import { AxiosInstance } from 'axios';
 import { sortBy } from 'lodash-es';
 import { Observable, concat, from, ignoreElements } from 'rxjs';
 
-import axios, { redirectOn401 } from '../utils/axios';
+import axios, {
+  addLanguageHeaderInterceptor,
+  redirectOn401,
+} from '../utils/axios';
 import waitForPolyfill from '../utils/eventsource-polyfill';
 import uri from '../utils/uri';
 import Instance, { DOWN_STATES, UNKNOWN_STATES, UP_STATES } from './instance';
@@ -100,6 +103,7 @@ class Application {
         'X-SBA-REQUEST': true,
       },
     });
+    this.axios.interceptors.request.use(addLanguageHeaderInterceptor);
     this.axios.interceptors.response.use(
       (response) => response,
       redirectOn401(),

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

@@ -18,6 +18,7 @@ import saveAs from 'file-saver';
 import { Observable, concat, from, ignoreElements } from 'rxjs';
 
 import axios, {
+  addLanguageHeaderInterceptor,
   redirectOn401,
   registerErrorToastInterceptor,
 } from '../utils/axios';
@@ -63,6 +64,7 @@ class Instance {
       baseURL: uri`instances/${this.id}`,
       headers: { Accept: actuatorMimeTypes.join(',') },
     });
+    this.axios.interceptors.request.use(addLanguageHeaderInterceptor);
     this.axios.interceptors.response.use(
       (response) => response,
       redirectOn401(

spring-boot-admin-server-ui/src/main/frontend/theme.css

@@ -14,20 +14,20 @@
  * limitations under the License.
  */
 
-@import "tailwindcss";
+@import 'tailwindcss';
 @custom-variant dark (&:where(.dark, .dark *));
 @plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/typography";
 
 @theme {
-    --color-sba-50: var(--main-50);
-    --color-sba-100: var(--main-100);
-    --color-sba-200: var(--main-200);
-    --color-sba-300: var(--main-300);
-    --color-sba-400: var(--main-400);
-    --color-sba-500: var(--main-500);
-    --color-sba-600: var(--main-600);
-    --color-sba-700: var(--main-700);
-    --color-sba-800: var(--main-800);
-    --color-sba-900: var(--main-900);
+  --color-sba-50: var(--main-50);
+  --color-sba-100: var(--main-100);
+  --color-sba-200: var(--main-200);
+  --color-sba-300: var(--main-300);
+  --color-sba-400: var(--main-400);
+  --color-sba-500: var(--main-500);
+  --color-sba-600: var(--main-600);
+  --color-sba-700: var(--main-700);
+  --color-sba-800: var(--main-800);
+  --color-sba-900: var(--main-900);
 }

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

@@ -17,7 +17,11 @@ import axios, { AxiosError } from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { redirectOn401, registerErrorToastInterceptor } from './axios';
+import {
+  addLanguageHeaderInterceptor,
+  redirectOn401,
+  registerErrorToastInterceptor,
+} from './axios';
 
 // Initialize errorSpy BEFORE any mocks or imports
 globalThis.errorSpy = vi.fn();
@@ -100,6 +104,125 @@ describe('redirectOn401', () => {
   });
 });
 
+describe('addLanguageHeaderInterceptor', () => {
+  beforeEach(() => {
+    // Clear globalThis.SBA before each test
+    if (globalThis.SBA) {
+      delete globalThis.SBA;
+    }
+  });
+
+  it('should include selected language with highest priority', () => {
+    globalThis.SBA = {
+      useI18n: () => ({ locale: { value: 'de' } }),
+    } as any;
+
+    const config = {
+      url: '/api/test',
+      headers: {},
+    };
+
+    const result = addLanguageHeaderInterceptor(config);
+
+    expect(result.headers['Accept-Language']).toContain('de;q=1.0');
+  });
+
+  it('should include navigator language with lower priority', () => {
+    globalThis.SBA = {
+      useI18n: () => ({ locale: { value: 'de' } }),
+    } as any;
+
+    // Mock navigator.language
+    Object.defineProperty(navigator, 'language', {
+      value: 'en-US',
+      configurable: true,
+    });
+
+    const config = {
+      url: '/api/test',
+      headers: {},
+    };
+
+    const result = addLanguageHeaderInterceptor(config);
+
+    expect(result.headers['Accept-Language']).toContain('de;q=1.0');
+    expect(result.headers['Accept-Language']).toContain('en-US;q=0.9');
+  });
+
+  it('should not duplicate navigator language if it matches selected language', () => {
+    globalThis.SBA = {
+      useI18n: () => ({ locale: { value: 'de' } }),
+    } as any;
+
+    // Mock navigator.language to match selected language
+    Object.defineProperty(navigator, 'language', {
+      value: 'de',
+      configurable: true,
+    });
+
+    const config = {
+      url: '/api/test',
+      headers: {},
+    };
+
+    const result = addLanguageHeaderInterceptor(config);
+
+    // Should only include de once
+    const languageHeader = result.headers['Accept-Language'];
+    const deCount = (languageHeader.match(/de;q=1\.0/g) || []).length;
+    expect(deCount).toBe(1);
+  });
+
+  it('should include wildcard fallback', () => {
+    globalThis.SBA = {
+      useI18n: () => ({ locale: { value: 'fr' } }),
+    } as any;
+
+    const config = {
+      url: '/api/test',
+      headers: {},
+    };
+
+    const result = addLanguageHeaderInterceptor(config);
+
+    expect(result.headers['Accept-Language']).toContain('*;q=0.8');
+  });
+
+  it('should handle missing globalThis.SBA gracefully', () => {
+    // Don't set globalThis.SBA - it should handle this gracefully
+    const config = {
+      url: '/api/test',
+      headers: {},
+    };
+
+    const result = addLanguageHeaderInterceptor(config);
+
+    // Should return the config unchanged if SBA is not available
+    expect(result).toBe(config);
+    expect(result.headers['Accept-Language']).toBeUndefined();
+  });
+
+  it('should preserve existing headers when adding Accept-Language', () => {
+    globalThis.SBA = {
+      useI18n: () => ({ locale: { value: 'fr' } }),
+    } as any;
+
+    const config = {
+      url: '/api/test',
+      headers: {
+        Authorization: 'Bearer token',
+        'Content-Type': 'application/json',
+      },
+    };
+
+    const result = addLanguageHeaderInterceptor(config);
+
+    expect(result.headers['Authorization']).toBe('Bearer token');
+    expect(result.headers['Content-Type']).toBe('application/json');
+    expect(result.headers['Accept-Language']).toContain('fr;q=1.0');
+  });
+});
+
 describe('registerErrorToastInterceptor', () => {
   let axiosInstance;
   let mock;

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

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 import { useNotificationCenter } from '@stekoe/vue-toast-notificationcenter';
-import axios, { type AxiosError, AxiosInstance } from 'axios';
+import axios, {
+  type AxiosError,
+  AxiosInstance,
+  type InternalAxiosRequestConfig,
+} from 'axios';
 
 import sbaConfig from '../sba-config';
 
@@ -38,6 +42,53 @@ export const redirectOn401 =
 
 axios.defaults.withCredentials = true;
 axios.defaults.headers.common['Accept'] = 'application/json';
+
+/**
+ * Adds Accept-Language header to requests with user's selected UI language preference.
+ * Format: selected-language;q=1.0, navigator-language;q=0.9, *;q=0.8
+ *
+ * @param config The axios request configuration
+ * @returns The modified request configuration
+ */
+export const addLanguageHeaderInterceptor = (
+  config: InternalAxiosRequestConfig,
+): InternalAxiosRequestConfig => {
+  try {
+    const i18n = globalThis.SBA?.useI18n?.();
+    if (i18n?.locale.value) {
+      const selectedLanguage = i18n.locale.value;
+      const navigatorLanguage = navigator.language;
+
+      // Build Accept-Language header with selected UI language as primary preference
+      const acceptLanguageParts = [
+        `${selectedLanguage};q=1.0`, // Selected UI language - highest priority
+      ];
+
+      // Add navigator language if it's different from selected language
+      if (
+        navigatorLanguage !== selectedLanguage &&
+        !navigatorLanguage.startsWith(selectedLanguage)
+      ) {
+        acceptLanguageParts.push(`${navigatorLanguage};q=0.9`);
+      }
+
+      // Add wildcard fallback for any other language
+      acceptLanguageParts.push('*;q=0.8');
+
+      config.headers['Accept-Language'] = acceptLanguageParts.join(', ');
+    }
+  } catch (error) {
+    // Log in development mode for debugging
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Failed to add language header:', error);
+    }
+    // Silently fail in production if i18n is not yet initialized
+  }
+  return config;
+};
+
+axios.interceptors.request.use(addLanguageHeaderInterceptor);
+
 axios.interceptors.response.use((response) => response, redirectOn401());
 
 export default axios;