refactor(admin-ui): Use Intl API for language name translations

Relates to #971. Allows us to get rid of all manual translations of language names!

packages/admin-ui/i18n-coverage.json

@@ -1,61 +1,61 @@
 {
-  "generatedOn": "2021-07-08T07:55:27.400Z",
-  "lastCommit": "cb0ce43cd81a9bd0fbb60525131dee73018ac5bc",
+  "generatedOn": "2021-07-08T12:48:37.370Z",
+  "lastCommit": "e950588df16d643e323c69f9f1909e74c2aa5c2c",
   "translationStatus": {
     "cs": {
-      "tokenCount": 778,
-      "translatedCount": 748,
-      "percentage": 96
+      "tokenCount": 621,
+      "translatedCount": 591,
+      "percentage": 95
     },
     "de": {
-      "tokenCount": 778,
-      "translatedCount": 726,
-      "percentage": 93
+      "tokenCount": 621,
+      "translatedCount": 570,
+      "percentage": 92
     },
     "en": {
-      "tokenCount": 778,
-      "translatedCount": 778,
+      "tokenCount": 621,
+      "translatedCount": 621,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 778,
-      "translatedCount": 451,
-      "percentage": 58
+      "tokenCount": 621,
+      "translatedCount": 309,
+      "percentage": 50
     },
     "fr": {
-      "tokenCount": 778,
-      "translatedCount": 770,
+      "tokenCount": 621,
+      "translatedCount": 613,
       "percentage": 99
     },
     "pl": {
-      "tokenCount": 778,
-      "translatedCount": 544,
-      "percentage": 70
+      "tokenCount": 621,
+      "translatedCount": 405,
+      "percentage": 65
     },
     "pt_BR": {
-      "tokenCount": 778,
-      "translatedCount": 744,
-      "percentage": 96
+      "tokenCount": 621,
+      "translatedCount": 588,
+      "percentage": 95
     },
     "ru": {
-      "tokenCount": 778,
-      "translatedCount": 778,
+      "tokenCount": 621,
+      "translatedCount": 621,
       "percentage": 100
     },
     "uk": {
-      "tokenCount": 778,
-      "translatedCount": 778,
+      "tokenCount": 621,
+      "translatedCount": 621,
       "percentage": 100
     },
     "zh_Hans": {
-      "tokenCount": 778,
-      "translatedCount": 699,
+      "tokenCount": 621,
+      "translatedCount": 558,
       "percentage": 90
     },
     "zh_Hant": {
-      "tokenCount": 778,
-      "translatedCount": 526,
-      "percentage": 68
+      "tokenCount": 621,
+      "translatedCount": 385,
+      "percentage": 62
     }
   }
 }

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.ts

@@ -46,7 +46,7 @@ export class AppShellComponent implements OnInit {
                 switchMap(currentLanguage =>
                     this.modalService.fromComponent(UiLanguageSwitcherDialogComponent, {
                         closable: true,
-                        size: 'sm',
+                        size: 'md',
                         locals: {
                             availableLanguages: this.availableLanguages,
                             currentLanguage,

packages/admin-ui/src/lib/core/src/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.html

@@ -3,6 +3,6 @@
 <div *ngFor="let code of availableLanguages" >
     <button class="btn btn-link btn-sm" (click)="setLanguage(code)">
         <clr-icon [attr.shape]="code === currentLanguage ? 'dot-circle' : 'circle'"></clr-icon>
-        {{ code | uppercase }} ({{ 'lang.' + code | translate }})
+        {{ code | uppercase }} ({{ code | localeLanguageName }})
     </button>
 </div>

packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.html

@@ -15,7 +15,7 @@
                 (click)="selectUiLanguage.emit()"
                 [title]="'common.select-display-language' | translate"
             >
-                <clr-icon shape="language"></clr-icon> {{ 'lang.' + uiLanguage | translate }}
+                <clr-icon shape="language"></clr-icon> {{ uiLanguage | localeLanguageName }}
             </button>
         </ng-container>
         <div class="dropdown-item">

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -11,7 +11,6 @@ export * from './common/detail-breadcrumb';
 export * from './common/generated-types';
 export * from './common/introspection-result-wrapper';
 export * from './common/introspection-result';
-export * from './common/language-translation-strings';
 export * from './common/single-search-selection-model';
 export * from './common/utilities/configurable-operation-utils';
 export * from './common/utilities/create-updated-translatable';
@@ -197,6 +196,7 @@ export * from './shared/pipes/locale-base.pipe';
 export * from './shared/pipes/locale-currency-name.pipe';
 export * from './shared/pipes/locale-currency.pipe';
 export * from './shared/pipes/locale-date.pipe';
+export * from './shared/pipes/locale-language-name.pipe';
 export * from './shared/pipes/sentence-case.pipe';
 export * from './shared/pipes/sort.pipe';
 export * from './shared/pipes/state-i18n-token.pipe';

packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.ts

@@ -53,11 +53,11 @@ export class CurrencyInputComponent implements ControlValueAccessor, OnInit, OnC
                     return '';
                 }
                 const locale = languageCode.replace(/_/g, '-');
-                const parts = new Intl.NumberFormat(locale, {
+                const parts = (new Intl.NumberFormat(locale, {
                     style: 'currency',
                     currency: currencyCode,
                     currencyDisplay: 'symbol',
-                }).formatToParts();
+                }) as any).formatToParts();
                 const NaNString = parts.find(p => p.type === 'nan')?.value ?? 'NaN';
                 const localised = new Intl.NumberFormat(locale, {
                     style: 'currency',

packages/admin-ui/src/lib/core/src/shared/components/language-selector/language-selector.component.html

@@ -2,7 +2,7 @@
     <vdr-dropdown>
         <button type="button" class="btn btn-sm btn-link" vdrDropdownTrigger [disabled]="disabled">
             <clr-icon shape="world"></clr-icon>
-            {{ 'common.language' | translate }}: {{ 'lang.' + currentLanguageCode | translate | uppercase }}
+            {{ 'common.language' | translate }}: {{ currentLanguageCode | localeLanguageName | uppercase }}
             <clr-icon shape="caret down"></clr-icon>
         </button>
         <vdr-dropdown-menu vdrPosition="bottom-right">
@@ -12,7 +12,7 @@
                 (click)="languageCodeChange.emit(code)"
                 vdrDropdownItem
             >
-                {{ 'lang.' + code | translate }} <span class="code">{{ code }}</span>
+                {{ code | localeLanguageName }} <span class="code">{{ code }}</span>
             </button>
         </vdr-dropdown-menu>
     </vdr-dropdown>

packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency-name.pipe.ts

@@ -35,11 +35,11 @@ export class LocaleCurrencyNamePipe extends LocaleBasePipe implements PipeTransf
             }).of(value);
         }
         if (display === 'full' || display === 'symbol') {
-            const parts = new Intl.NumberFormat(activeLocale, {
+            const parts = (new Intl.NumberFormat(activeLocale, {
                 style: 'currency',
                 currency: value,
                 currencyDisplay: 'symbol',
-            }).formatToParts();
+            }) as any).formatToParts();
 
             symbol = parts.find(p => p.type === 'currency')?.value || value;
         }

packages/admin-ui/src/lib/core/src/shared/pipes/locale-language-name.pipe.spec.ts

@@ -0,0 +1,34 @@
+import { LocaleLanguageNamePipe } from './locale-language-name.pipe';
+
+describe('LocaleLanguageNamePipe', () => {
+    const pipe = new LocaleLanguageNamePipe();
+    it('returns correct language names for various locales', () => {
+        expect(pipe.transform('en', 'en')).toBe('English');
+        expect(pipe.transform('de', 'en')).toBe('German');
+        expect(pipe.transform('de', 'de')).toBe('Deutsch');
+        expect(pipe.transform('is', 'fr')).toBe('islandais');
+        expect(pipe.transform('es', 'zh_Hans')).toBe('西班牙语');
+        expect(pipe.transform('bs', 'zh_Hant')).toBe('波士尼亞文');
+        expect(pipe.transform('da', 'pt_BR')).toBe('dinamarquês');
+        expect(pipe.transform('zh_Hant', 'en')).toBe('Traditional Chinese');
+    });
+
+    it('returns code for unknown codes', () => {
+        expect(pipe.transform('xx')).toBe('xx');
+    });
+
+    it('returns empty string for empty input', () => {
+        expect(pipe.transform('')).toBe('');
+        expect(pipe.transform(null)).toBe('');
+        expect(pipe.transform(undefined)).toBe('');
+    });
+
+    it('returns warning for invalid input', () => {
+        expect(pipe.transform({} as any)).toBe('Invalid language code "[object Object]"');
+        expect(pipe.transform(false as any)).toBe('Invalid language code "false"');
+    });
+
+    it('returns input value for invalid string input', () => {
+        expect(pipe.transform('foo.bar')).toBe('foo.bar');
+    });
+});