Allow overwriting i18n messages via LaunchDarkly (#13347)

* Allow overwriting i18n messages via LaunchDarkly

* add string type check

* Add unit tests

* Change to have locale part of user attributes

* Add test for strong tags

Author: Tim Roes

airbyte-webapp/src/App.tsx

@@ -1,9 +1,9 @@
 import React, { Suspense } from "react";
-import { IntlProvider } from "react-intl";
 import { BrowserRouter as Router } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
 
 import { ApiServices } from "core/ApiServices";
+import { I18nProvider } from "core/i18n";
 import { ServicesProvider } from "core/servicesProvider";
 import { ConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { FeatureService } from "hooks/services/Feature";
@@ -35,18 +35,6 @@ const StyleProvider: React.FC = ({ children }) => (
   </ThemeProvider>
 );
 
-const I18NProvider: React.FC = ({ children }) => (
-  <IntlProvider
-    locale="en"
-    messages={en}
-    defaultRichTextElements={{
-      b: (chunk) => <strong>{chunk}</strong>,
-    }}
-  >
-    {children}
-  </IntlProvider>
-);
-
 const configProviders: ValueProvider<Config> = [envConfigProvider, windowConfigProvider];
 
 const Services: React.FC = ({ children }) => (
@@ -71,7 +59,7 @@ const App: React.FC = () => {
   return (
     <React.StrictMode>
       <StyleProvider>
-        <I18NProvider>
+        <I18nProvider locale="en" messages={en}>
           <StoreProvider>
             <ServicesProvider>
               <Suspense fallback={<LoadingPage />}>
@@ -85,7 +73,7 @@ const App: React.FC = () => {
               </Suspense>
             </ServicesProvider>
           </StoreProvider>
-        </I18NProvider>
+        </I18nProvider>
       </StyleProvider>
     </React.StrictMode>
   );

airbyte-webapp/src/core/i18n/I18nProvider.test.tsx

@@ -0,0 +1,80 @@
+import { render } from "@testing-library/react";
+import { act, renderHook } from "@testing-library/react-hooks";
+import { FormattedMessage, IntlConfig, useIntl } from "react-intl";
+
+import { I18nProvider, useI18nContext } from "./I18nProvider";
+
+const provider = (messages: IntlConfig["messages"], locale = "en"): React.FC => {
+  return ({ children }) => (
+    <I18nProvider locale={locale} messages={messages}>
+      {children}
+    </I18nProvider>
+  );
+};
+
+const useMessages = () => {
+  const { setMessageOverwrite } = useI18nContext();
+  const { messages } = useIntl();
+  return { setMessageOverwrite, messages };
+};
+
+describe("I18nProvider", () => {
+  it("should set the react-intl locale correctly", () => {
+    const { result } = renderHook(() => useIntl(), {
+      wrapper: provider({}, "fr"),
+    });
+    expect(result.current.locale).toBe("fr");
+  });
+
+  it("should set messages for consumption via react-intl", () => {
+    const wrapper = render(
+      <span data-testid="msg">
+        <FormattedMessage id="test.id" />
+      </span>,
+      { wrapper: provider({ "test.id": "Hello world!" }) }
+    );
+    expect(wrapper.getByTestId("msg").textContent).toBe("Hello world!");
+  });
+
+  it("should allow render <b></b> tags for every message", () => {
+    const wrapper = render(
+      <span data-testid="msg">
+        <FormattedMessage id="test.id" />
+      </span>,
+      { wrapper: provider({ "test.id": "Hello <b>world</b>!" }) }
+    );
+    expect(wrapper.getByTestId("msg").innerHTML).toBe("Hello <strong>world</strong>!");
+  });
+
+  describe("useI18nContext", () => {
+    it("should allow overwriting default and setting additional messages", () => {
+      const { result } = renderHook(() => useMessages(), {
+        wrapper: provider({ test: "default message" }),
+      });
+      expect(result.current.messages).toHaveProperty("test", "default message");
+      act(() => result.current.setMessageOverwrite({ test: "overwritten message", other: "new message" }));
+      expect(result.current.messages).toHaveProperty("test", "overwritten message");
+      expect(result.current.messages).toHaveProperty("other", "new message");
+    });
+
+    it("should allow resetting overwrites with an empty object", () => {
+      const { result } = renderHook(() => useMessages(), {
+        wrapper: provider({ test: "default message" }),
+      });
+      act(() => result.current.setMessageOverwrite({ test: "overwritten message" }));
+      expect(result.current.messages).toHaveProperty("test", "overwritten message");
+      act(() => result.current.setMessageOverwrite({}));
+      expect(result.current.messages).toHaveProperty("test", "default message");
+    });
+
+    it("should allow resetting overwrites with undefined", () => {
+      const { result } = renderHook(() => useMessages(), {
+        wrapper: provider({ test: "default message" }),
+      });
+      act(() => result.current.setMessageOverwrite({ test: "overwritten message" }));
+      expect(result.current.messages).toHaveProperty("test", "overwritten message");
+      act(() => result.current.setMessageOverwrite(undefined));
+      expect(result.current.messages).toHaveProperty("test", "default message");
+    });
+  });
+});

airbyte-webapp/src/core/i18n/I18nProvider.tsx

@@ -0,0 +1,56 @@
+import type { IntlConfig } from "react-intl";
+
+import React, { useContext, useMemo, useState } from "react";
+import { IntlProvider } from "react-intl";
+
+type Messages = IntlConfig["messages"];
+
+interface I18nContext {
+  setMessageOverwrite: (messages: Messages) => void;
+}
+
+const i18nContext = React.createContext<I18nContext>({ setMessageOverwrite: () => null });
+
+export const useI18nContext = () => {
+  return useContext(i18nContext);
+};
+
+interface I18nProviderProps {
+  messages: Messages;
+  locale: string;
+}
+
+export const I18nProvider: React.FC<I18nProviderProps> = ({ children, messages, locale }) => {
+  const [overwrittenMessages, setOvewrittenMessages] = useState<Messages>();
+
+  const i18nOverwriteContext = useMemo<I18nContext>(
+    () => ({
+      setMessageOverwrite: (messages) => {
+        setOvewrittenMessages(messages);
+      },
+    }),
+    []
+  );
+
+  const mergedMessages = useMemo(
+    () => ({
+      ...messages,
+      ...(overwrittenMessages ?? {}),
+    }),
+    [messages, overwrittenMessages]
+  );
+
+  return (
+    <i18nContext.Provider value={i18nOverwriteContext}>
+      <IntlProvider
+        locale={locale}
+        messages={mergedMessages}
+        defaultRichTextElements={{
+          b: (chunk) => <strong>{chunk}</strong>,
+        }}
+      >
+        {children}
+      </IntlProvider>
+    </i18nContext.Provider>
+  );
+};

airbyte-webapp/src/core/i18n/index.ts

@@ -0,0 +1 @@
+export { I18nProvider, useI18nContext } from "./I18nProvider";

airbyte-webapp/src/packages/cloud/App.tsx

@@ -1,12 +1,12 @@
 import GlobalStyle from "global-styles";
 import React, { Suspense } from "react";
-import { IntlProvider } from "react-intl";
 import { BrowserRouter as Router } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
 
 import ApiErrorBoundary from "components/ApiErrorBoundary";
 import LoadingPage from "components/LoadingPage";
 
+import { I18nProvider } from "core/i18n";
 import { ConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { FeatureService } from "hooks/services/Feature";
 import { FormChangeTrackerService } from "hooks/services/FormChangeTracker";
@@ -23,19 +23,7 @@ import { AppServicesProvider } from "./services/AppServicesProvider";
 import { ConfigProvider } from "./services/ConfigProvider";
 import { IntercomProvider } from "./services/thirdParty/intercom/IntercomProvider";
 
-const messages = Object.assign({}, en, cloudLocales);
-
-const I18NProvider: React.FC = ({ children }) => (
-  <IntlProvider
-    locale="en"
-    messages={messages}
-    defaultRichTextElements={{
-      b: (chunk) => <strong>{chunk}</strong>,
-    }}
-  >
-    {children}
-  </IntlProvider>
-);
+const messages = { ...en, ...cloudLocales };
 
 const StyleProvider: React.FC = ({ children }) => (
   <ThemeProvider theme={theme}>
@@ -68,7 +56,7 @@ const App: React.FC = () => {
   return (
     <React.StrictMode>
       <StyleProvider>
-        <I18NProvider>
+        <I18nProvider locale="en" messages={messages}>
           <StoreProvider>
             <Suspense fallback={<LoadingPage />}>
               <ConfigProvider>
@@ -80,7 +68,7 @@ const App: React.FC = () => {
               </ConfigProvider>
             </Suspense>
           </StoreProvider>
-        </I18NProvider>
+        </I18nProvider>
       </StyleProvider>
     </React.StrictMode>
   );

airbyte-webapp/src/packages/cloud/services/thirdParty/launchdarkly/LDExperimentService.tsx

@@ -1,11 +1,13 @@
 import * as LDClient from "launchdarkly-js-client-sdk";
 import { useEffect, useRef, useState } from "react";
+import { useIntl } from "react-intl";
 import { useEffectOnce } from "react-use";
 import { finalize, Subject } from "rxjs";
 
 import { LoadingPage } from "components";
 
 import { useConfig } from "config";
+import { useI18nContext } from "core/i18n";
 import { useAnalytics } from "hooks/services/Analytics";
 import { ExperimentProvider, ExperimentService } from "hooks/services/Experiment";
 import type { Experiments } from "hooks/services/Experiment/experiments";
@@ -21,17 +23,18 @@ const INITIALIZATION_TIMEOUT = 1500;
 
 type LDInitState = "initializing" | "failed" | "initialized";
 
-function mapUserToLDUser(user: User | null): LDClient.LDUser {
+function mapUserToLDUser(user: User | null, locale: string): LDClient.LDUser {
   return user
     ? {
         key: user.userId,
         email: user.email,
         name: user.name,
-        custom: { intercomHash: user.intercomHash },
+        custom: { intercomHash: user.intercomHash, locale },
         anonymous: false,
       }
     : {
         anonymous: true,
+        custom: { locale },
       };
 }
 
@@ -40,9 +43,26 @@ const LDInitializationWrapper: React.FC<{ apiKey: string }> = ({ children, apiKe
   const [state, setState] = useState<LDInitState>("initializing");
   const { user } = useAuthService();
   const { addContextProps: addAnalyticsContext } = useAnalytics();
+  const { locale } = useIntl();
+  const { setMessageOverwrite } = useI18nContext();
+
+  /**
+   * This function checks for all experiments to find the ones beginning with "i18n_{locale}_"
+   * and treats them as message overwrites for our bundled messages. Empty messages will be treated as not overwritten.
+   */
+  const updateI18nMessages = () => {
+    const prefix = `i18n_`;
+    const messageOverwrites = Object.entries(ldClient.current?.allFlags() ?? {})
+      // Only filter experiments beginning with the prefix and having an actual non-empty string value set
+      .filter(([id, value]) => id.startsWith(prefix) && !!value && typeof value === "string")
+      // Slice away the prefix of the key, to only keep the actual i18n id as a key
+      .map(([id, msg]) => [id.slice(prefix.length), msg]);
+    // Use those messages as overwrites in the i18nContext
+    setMessageOverwrite(Object.fromEntries(messageOverwrites));
+  };
 
   if (!ldClient.current) {
-    ldClient.current = LDClient.initialize(apiKey, mapUserToLDUser(user));
+    ldClient.current = LDClient.initialize(apiKey, mapUserToLDUser(user, locale));
     // Wait for either LaunchDarkly to initialize or a specific timeout to pass first
     Promise.race([
       ldClient.current.waitForInitialization(),
@@ -53,6 +73,8 @@ const LDInitializationWrapper: React.FC<{ apiKey: string }> = ({ children, apiKe
         setState("initialized");
         // Make sure enabled experiments are added to each analytics event
         addAnalyticsContext({ experiments: ldClient.current?.allFlags() });
+        // Check for overwritten i18n messages
+        updateI18nMessages();
       })
       .catch((reason) => {
         // If the promise fails, either because LaunchDarkly service fails to initialize, or
@@ -67,15 +89,17 @@ const LDInitializationWrapper: React.FC<{ apiKey: string }> = ({ children, apiKe
     const onFeatureFlagsChanged = () => {
       // Update analytics context whenever a flag changes
       addAnalyticsContext({ experiments: ldClient.current?.allFlags() });
+      // Check for overwritten i18n messages
+      updateI18nMessages();
     };
     ldClient.current?.on("change", onFeatureFlagsChanged);
     return () => ldClient.current?.off("change", onFeatureFlagsChanged);
   });
 
   // Whenever the user should change (e.g. login/logout) we need to reidentify the changes with the LD client
   useEffect(() => {
-    ldClient.current?.identify(mapUserToLDUser(user));
-  }, [user]);
+    ldClient.current?.identify(mapUserToLDUser(user, locale));
+  }, [locale, user]);
 
   // Show the loading page while we're still waiting for the initial set of feature flags (or them to time out)
   if (state === "initializing") {