[otel] Log UI language; [i18n] Fix RTL bug (#4062)

Author: imnasnainaec

Backend/Controllers/UserController.cs

@@ -95,6 +95,16 @@ public async Task<IActionResult> Authenticate([FromBody, BindRequired] Credentia
             }
         }
 
+        /// <summary> Logs the current UI language. </summary>
+        [HttpPost("uilanguage", Name = "UiLanguage")]
+        [ProducesResponseType(StatusCodes.Status200OK)]
+        public IActionResult UiLanguage([FromBody, BindRequired] string uilang)
+        {
+            using var activity = OtelService.StartActivityWithTag(otelTagName, "logging current UI language");
+            activity?.SetTag("ui_language", uilang);
+            return Ok();
+        }
+
         /// <summary> Gets the current user. </summary>
         [HttpGet("currentuser", Name = "GetCurrentUser")]
         [ProducesResponseType(StatusCodes.Status200OK, Type = typeof(User))]

src/api/api/user-api.ts

@@ -497,6 +497,55 @@ export const UserApiAxiosParamCreator = function (
         options: localVarRequestOptions,
       };
     },
+    /**
+     *
+     * @param {string} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    uiLanguage: async (
+      body: string,
+      options: any = {}
+    ): Promise<RequestArgs> => {
+      // verify required parameter 'body' is not null or undefined
+      assertParamExists("uiLanguage", "body", body);
+      const localVarPath = `/v1/users/uilanguage`;
+      // use dummy base URL string because the URL constructor only accepts absolute URLs.
+      const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+      let baseOptions;
+      if (configuration) {
+        baseOptions = configuration.baseOptions;
+      }
+
+      const localVarRequestOptions = {
+        method: "POST",
+        ...baseOptions,
+        ...options,
+      };
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      localVarHeaderParameter["Content-Type"] = "application/json";
+
+      setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
+      let headersFromBaseOptions =
+        baseOptions && baseOptions.headers ? baseOptions.headers : {};
+      localVarRequestOptions.headers = {
+        ...localVarHeaderParameter,
+        ...headersFromBaseOptions,
+        ...options.headers,
+      };
+      localVarRequestOptions.data = serializeDataIfNeeded(
+        body,
+        localVarRequestOptions,
+        configuration
+      );
+
+      return {
+        url: toPathString(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
     /**
      *
      * @param {string} userId
@@ -836,6 +885,29 @@ export const UserApiFp = function (configuration?: Configuration) {
         configuration
       );
     },
+    /**
+     *
+     * @param {string} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    async uiLanguage(
+      body: string,
+      options?: any
+    ): Promise<
+      (axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>
+    > {
+      const localVarAxiosArgs = await localVarAxiosParamCreator.uiLanguage(
+        body,
+        options
+      );
+      return createRequestFunction(
+        localVarAxiosArgs,
+        globalAxios,
+        BASE_PATH,
+        configuration
+      );
+    },
     /**
      *
      * @param {string} userId
@@ -1017,6 +1089,17 @@ export const UserApiFactory = function (
         .isEmailOrUsernameAvailable(body, options)
         .then((request) => request(axios, basePath));
     },
+    /**
+     *
+     * @param {string} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    uiLanguage(body: string, options?: any): AxiosPromise<void> {
+      return localVarFp
+        .uiLanguage(body, options)
+        .then((request) => request(axios, basePath));
+    },
     /**
      *
      * @param {string} userId
@@ -1155,6 +1238,20 @@ export interface UserApiIsEmailOrUsernameAvailableRequest {
   readonly body: string;
 }
 
+/**
+ * Request parameters for uiLanguage operation in UserApi.
+ * @export
+ * @interface UserApiUiLanguageRequest
+ */
+export interface UserApiUiLanguageRequest {
+  /**
+   *
+   * @type {string}
+   * @memberof UserApiUiLanguage
+   */
+  readonly body: string;
+}
+
 /**
  * Request parameters for updateUser operation in UserApi.
  * @export
@@ -1346,6 +1443,22 @@ export class UserApi extends BaseAPI {
       .then((request) => request(this.axios, this.basePath));
   }
 
+  /**
+   *
+   * @param {UserApiUiLanguageRequest} requestParameters Request parameters.
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof UserApi
+   */
+  public uiLanguage(
+    requestParameters: UserApiUiLanguageRequest,
+    options?: any
+  ) {
+    return UserApiFp(this.configuration)
+      .uiLanguage(requestParameters.body, options)
+      .then((request) => request(this.axios, this.basePath));
+  }
+
   /**
    *
    * @param {UserApiUpdateUserRequest} requestParameters Request parameters.

src/backend/index.ts

@@ -54,13 +54,14 @@ const authenticationUrls = [
 ];
 
 /** A list of URL patterns for which the frontend explicitly handles errors
- * and the blanket error pop ups should be suppressed.*/
+ * and the blanket error pop-ups should be suppressed.*/
 const whiteListedErrorUrls = [
   "/merge/retrievedups",
   "/speakers/create/",
   "/speakers/update/",
   "/users/authenticate",
   "/users/captcha/",
+  "/users/uilanguage",
 ];
 
 // Create an axios instance to allow for attaching interceptors to it.
@@ -728,6 +729,10 @@ export async function authenticateUser(
   return user;
 }
 
+export async function uiLanguage(uilang: string): Promise<void> {
+  await userApi.uiLanguage({ body: uilang }, defaultOptions());
+}
+
 /** Note: Only usable by site admins. */
 export async function getAllUsers(): Promise<User[]> {
   return (await userApi.getAllUsers(defaultOptions())).data;

src/i18n/index.ts

@@ -4,6 +4,7 @@ import LanguageDetector from "i18next-browser-languagedetector";
 import Backend, { type HttpBackendOptions } from "i18next-http-backend";
 import { initReactI18next } from "react-i18next";
 
+import { uiLanguage } from "backend";
 import { getCurrentUser } from "backend/localStorage";
 import { i18nFallbacks, i18nLangs } from "types/writingSystem";
 
@@ -32,23 +33,34 @@ i18n
       fallbackLng: i18nFallbacks,
       interpolation: { escapeValue: false },
     },
-    setDir // Callback function to set the direction ("ltr" vs "rtl") after i18n has initialized
+    setDir // Callback after i18n has initialized
   );
 
+/** Sets the text direction ("ltr" or "rtl") based on the current language. */
 function setDir(): void {
   document.body.dir = i18n.dir();
 }
 
-/** Updates `i18n`'s resolved language to the user-specified ui language (if different).
+/** Updates `i18n`'s resolved language to the user-specified UI language (if
+ * different) and logs the UI language.
  *
  * Returns `boolean` of whether the resolved language was updated. */
 export async function updateLangFromUser(): Promise<boolean> {
   const uiLang = getCurrentUser()?.uiLang;
+  let updated = false;
   if (uiLang && uiLang !== i18n.resolvedLanguage) {
     await i18n.changeLanguage(uiLang, setDir);
-    return true;
+    updated = true;
   }
-  return false;
+
+  // Log the UI language even if not changed, because we don't log it on i18n
+  // init or before login (to avoid having languages different from a user's
+  // preference cluttering the analytics).
+  uiLanguage(i18n.resolvedLanguage ?? "").catch((err) =>
+    console.warn("Failed to log UI language:", err)
+  );
+
+  return updated;
 }
 
 export default i18n;