feat(core-localization): CB-937 localization fallback

webapp/packages/core-localization/src/LocalizationService.ts

@@ -57,7 +57,7 @@ export class LocalizationService extends Bootstrap {
     this.localeProviders.push(provider);
   }
 
-  readonly translate = <T extends TLocalizationToken | undefined>(token: T): T => {
+  readonly translate = <T extends TLocalizationToken | undefined>(token: T, fallback?: T): T => {
     if (token === undefined) {
       return undefined as T;
     }
@@ -75,6 +75,11 @@ export class LocalizationService extends Bootstrap {
     if (typeof translation === 'string') {
       return translation as T;
     }
+
+    if (fallback !== undefined) {
+      return this.translate(fallback);
+    }
+
     return token;
   };
 

webapp/packages/core-localization/src/Translate.tsx

@@ -13,10 +13,11 @@ import { useTranslate } from './useTranslate';
 
 interface Props {
   token: TLocalizationToken;
+  fallback?: TLocalizationToken;
 }
 
-export const Translate: React.FC<Props> = observer(function Translate({ token }) {
+export const Translate: React.FC<Props> = observer(function Translate({ token, fallback }) {
   const translate = useTranslate();
 
-  return <>{translate(token)}</>;
+  return <>{translate(token, fallback)}</>;
 });

webapp/packages/core-localization/src/useTranslate.ts

@@ -11,7 +11,7 @@ import { useService } from '@cloudbeaver/core-di';
 import { LocalizationService } from './LocalizationService';
 import type { TLocalizationToken } from './TLocalizationToken';
 
-export function useTranslate(): (<T extends TLocalizationToken | undefined>(token: T) => T) {
+export function useTranslate(): (<T extends TLocalizationToken | undefined>(token: T, fallback?: T) => T) {
   const localizationService = useService(LocalizationService);
 
   return localizationService.translate;