Add configurable URLs to HttpLocalizer and Fluent icon init

dpwatrous · dpwatrous · commit 13b4cf11c080 · 2023-09-06T18:49:51.000-04:00
This is needed for locked-down environments to avoid hitting a CDN
diff --git a/packages/bonito-core/src/__tests__/http-localizer.spec.ts b/packages/bonito-core/src/__tests__/http-localizer.spec.ts
@@ -22,10 +22,8 @@ describe("HttpLocalizer", () => {
         );
 
         jest.spyOn(httpLocalizer, "getLocale").mockReturnValue("en-US");
-        await httpLocalizer.loadTranslations();
-        expect(fetchMock).toHaveBeenCalledWith(
-            "/resources/i18n/resources.en.json"
-        );
+        await httpLocalizer.loadTranslations("/base/url");
+        expect(fetchMock).toHaveBeenCalledWith("/base/url/resources.en.json");
         expect(httpLocalizer.translate("hello")).toEqual("world");
     });
 
@@ -39,7 +37,7 @@ describe("HttpLocalizer", () => {
 
         // Simulate a French locale
         jest.spyOn(httpLocalizer, "getLocale").mockReturnValue("fr-FR");
-        await httpLocalizer.loadTranslations();
+        await httpLocalizer.loadTranslations("/resources/i18n");
         expect(fetchMock).toHaveBeenCalledWith(
             "/resources/i18n/resources.fr.json"
         );
@@ -56,7 +54,7 @@ describe("HttpLocalizer", () => {
 
         // Simulate an invalid locale
         jest.spyOn(httpLocalizer, "getLocale").mockReturnValue("abc");
-        await httpLocalizer.loadTranslations();
+        await httpLocalizer.loadTranslations("/resources/i18n");
         expect(fetchMock).toHaveBeenCalledWith(
             "/resources/i18n/resources.en.json"
         );
@@ -78,7 +76,7 @@ describe("HttpLocalizer", () => {
         );
 
         jest.spyOn(httpLocalizer, "getLocale").mockReturnValue("en-US");
-        await httpLocalizer.loadTranslations();
+        await httpLocalizer.loadTranslations("/resources/i18n");
         expect(httpLocalizer.translate("notFound")).toEqual("notFound");
     });
 });
diff --git a/packages/bonito-core/src/localization/http-localizer.ts b/packages/bonito-core/src/localization/http-localizer.ts
@@ -7,7 +7,7 @@ interface Translations {
 export class HttpLocalizer implements Localizer {
     private translations?: Translations;
 
-    async loadTranslations(): Promise<void> {
+    async loadTranslations(baseUrl: string): Promise<void> {
         const languageMap: Record<string, string> = {
             cs: "cs",
             de: "de",
@@ -43,7 +43,10 @@ export class HttpLocalizer implements Localizer {
         }
 
         try {
-            this.translations = await this.fetchTranslations(languageToLoad);
+            this.translations = await this.fetchTranslations(
+                baseUrl,
+                languageToLoad
+            );
         } catch (error) {
             // Fall back to English if translations are not available for the selected locale
             if (languageToLoad !== "en") {
@@ -54,6 +57,7 @@ export class HttpLocalizer implements Localizer {
                 );
                 languageToLoad = "en";
                 this.translations = await this.fetchTranslations(
+                    baseUrl,
                     languageToLoad
                 );
             } else {
@@ -66,8 +70,11 @@ export class HttpLocalizer implements Localizer {
         }
     }
 
-    private async fetchTranslations(lang: string): Promise<Translations> {
-        const response = await fetch(`/resources/i18n/resources.${lang}.json`);
+    private async fetchTranslations(
+        baseUrl: string,
+        lang: string
+    ): Promise<Translations> {
+        const response = await fetch(`${baseUrl}/resources.${lang}.json`);
 
         if (!response.ok) {
             throw new Error(
diff --git a/packages/bonito-ui/src/environment/browser-environment.ts b/packages/bonito-ui/src/environment/browser-environment.ts
@@ -40,6 +40,7 @@ export interface BrowserEnvironment<
 
 export interface BrowserEnvironmentConfig extends EnvironmentConfig {
     enableA11yTesting?: boolean;
+    fluentIconsBaseUrl?: string;
 }
 
 /**
@@ -55,7 +56,7 @@ export class DefaultBrowserEnvironment<
     name = EnvironmentName.Browser;
 
     async beforeInit(): Promise<void> {
-        initFluentIcons();
+        initFluentIcons(this.config.fluentIconsBaseUrl);
     }
 
     async beforeDestroy(): Promise<void> {
diff --git a/packages/bonito-ui/src/environment/environment-util.ts b/packages/bonito-ui/src/environment/environment-util.ts
@@ -72,9 +72,9 @@ export function getMockBrowserEnvironment(): MockBrowserEnvironment {
  * Initializes FluentUI icons, but only if they have not been initialized
  * previously.
  */
-export function initFluentIcons(): void {
+export function initFluentIcons(baseUrl?: string): void {
     if (!_fluentIconsInitialized) {
-        initializeIcons();
+        initializeIcons(baseUrl);
         _fluentIconsInitialized = true;
     }
 }
diff --git a/web/src/index.tsx b/web/src/index.tsx
@@ -43,7 +43,7 @@ init(rootEl);
 
 export async function init(rootEl: HTMLElement): Promise<void> {
     const localizer = new HttpLocalizer();
-    await localizer.loadTranslations();
+    await localizer.loadTranslations("/resources/i18n");
     initEnvironment(
         new DefaultBrowserEnvironment<
             BrowserEnvironmentConfig,

Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,7 @@ export interface BrowserEnvironment<`
`40`	`40`
`41`	`41`	`export interface BrowserEnvironmentConfig extends EnvironmentConfig {`
`42`	`42`	`enableA11yTesting?: boolean;`
	`43`	`+ fluentIconsBaseUrl?: string;`
`43`	`44`	`}`
`44`	`45`
`45`	`46`	`/**`
`@@ -55,7 +56,7 @@ export class DefaultBrowserEnvironment<`
`55`	`56`	`name = EnvironmentName.Browser;`
`56`	`57`
`57`	`58`	`async beforeInit(): Promise<void> {`
`58`		`- initFluentIcons();`
	`59`	`+ initFluentIcons(this.config.fluentIconsBaseUrl);`
`59`	`60`	`}`
`60`	`61`
`61`	`62`	`async beforeDestroy(): Promise<void> {`
Original file line number	Diff line number	Diff line change
`@@ -72,9 +72,9 @@ export function getMockBrowserEnvironment(): MockBrowserEnvironment {`
`72`	`72`	`* Initializes FluentUI icons, but only if they have not been initialized`
`73`	`73`	`* previously.`
`74`	`74`	`*/`
`75`		`-export function initFluentIcons(): void {`
	`75`	`+export function initFluentIcons(baseUrl?: string): void {`
`76`	`76`	`if (!_fluentIconsInitialized) {`
`77`		`- initializeIcons();`
	`77`	`+ initializeIcons(baseUrl);`
`78`	`78`	`_fluentIconsInitialized = true;`
`79`	`79`	`}`
`80`	`80`	`}`