feat(i18n): change language label from region to language (codecentric#1941)

closes codecentric#1875 (polished PR)

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/shell/navbar-item-language-selector.spec.js

@@ -2,6 +2,7 @@ import {render} from '@/test-utils';
 import NavbarItemLanguageSelector from './navbar-item-language-selector';
 import {screen} from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
+import {mount} from '@vue/test-utils';
 
 describe('NavbarItemLanguageSelector', () => {
  let wrapper;
@@ -18,15 +19,15 @@ describe('NavbarItemLanguageSelector', () => {
  });
 
  it('should print the locale with the country for selected language/locale', async () => {
- const buttons = await screen.findAllByRole('button', {name: 'Deutschland (de)'});
+ const buttons = await screen.findAllByRole('button', {name: 'Deutsch'});
  expect(buttons[0]).toBeDefined()
  });
 
  it('should print locale with the country for available language in menu', async () => {
- const languageButton = await screen.findAllByRole('button', {name: 'Deutschland (de)'});
+ const languageButton = await screen.findAllByRole('button', {name: 'Deutsch'});
  await userEvent.click(languageButton[0]);
 
- expect(await screen.findByRole('button', {name: 'France (fr)'})).toBeDefined()
+ expect(await screen.findByRole('button', {name: 'français'})).toBeDefined()
  });
 
  it('should print the locale as label when it cannot be translated', async () => {
@@ -37,13 +38,31 @@ describe('NavbarItemLanguageSelector', () => {
  }
  })
 
- const htmlElement = await screen.findAllByRole('button', {name: 'zz (zz)'});
+ const htmlElement = await screen.findAllByRole('button', {name: 'zz'});
  expect(htmlElement[0]).toBeDefined()
  });
 
  it('should emit the selected locale', async () => {
- await userEvent.click(await screen.findByRole('button', {name: 'France (fr)'}));
+ await userEvent.click(await screen.findByRole('button', {name: 'français'}));
 
  expect(wrapper.emitted().localeChanged[0]).toContain('fr')
  });
+
+ it.each`
+ locale | expected
+ ${'de'} | ${'Deutsch'}
+ ${'is'} | ${'íslenska'}
+ ${'de-DE'} | ${'Deutsch (Deutschland)'}
+ ${'zh-CN'} | ${'简体中文'}
+ ${'zh-TW'} | ${'繁體中文'}
+ `('should show \'$expected\' for given \'$locale\'', ({locale, expected}) => {
+ let wrapper = mount(NavbarItemLanguageSelector, {
+ propsData: {
+ availableLocales: [],
+ currentLocale: 'en'
+ }
+ });
+
+ expect(wrapper.vm.mapLocale(locale).label).toEqual(expected);
+ });
 });

spring-boot-admin-server-ui/src/main/frontend/shell/navbar-item-language-selector.vue

@@ -17,7 +17,7 @@
 <template>
  <div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link" role="button">
- {{ selectedLanguage.label }} ({{ selectedLanguage.locale }})
+ {{ selectedLanguage.label }}
  </a>
  <div class="navbar-dropdown">
  <a class="navbar-item"
@@ -26,7 +26,7 @@
  :key="language.locale"
  @click="localeChanged(language.locale)"
  >
- {{ language.label }} ({{ language.locale }})
+ {{ language.label }}
  </a>
  </div>
  </div>
@@ -55,8 +55,20 @@ export default {
  },
  mapLocale(locale) {
  try {
- const localeUppercase = locale.split('-').pop().toUpperCase();
- let label = new Intl.DisplayNames([localeUppercase, this.$i18n.locale], {type: 'region'}).of(localeUppercase);
+ let languageTag = locale.split('-').reverse().pop();
+ let regionTag = locale.split('-').length > 1 ? `-${locale.split('-').pop()}` : ''
+
+ if (locale.toLowerCase().startsWith('zh')) {
+ if (locale.endsWith('CN')) {
+ regionTag = '-Hans'
+ }
+ if (locale.endsWith('TW')) {
+ regionTag = '-Hant'
+ }
+ }
+
+ let translatedLanguageNames = new Intl.DisplayNames([locale], {type: 'language'});
+ let label = translatedLanguageNames.of(`${languageTag}${regionTag}`);
 
  if (label?.toUpperCase() === 'UNKNOWN REGION') {
  label = locale;