This is an automated email from the ASF dual-hosted git repository. kaxilnaik pushed a commit to branch v3-1-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit f612f23d8575d7bf66c0a4873621ae8190f84d52 Author: Brent Bovenzi <[email protected]> AuthorDate: Wed Sep 17 19:57:35 2025 -0400 Move rtl logic to react (#55808) * Move RTL detectiong logic into react useEffect * protect against empty string (cherry picked from commit 049524fdaa08170d1884ee80e08ffe9419d2d82b) --- .../src/airflow/ui/src/layouts/BaseLayout.tsx | 19 ++++++++++++++++++- airflow-core/src/airflow/ui/src/main.tsx | 11 +---------- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx b/airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx index 2e8415c4e02..f0678b03671 100644 --- a/airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx +++ b/airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx @@ -17,7 +17,7 @@ * under the License. */ import { Box, LocaleProvider } from "@chakra-ui/react"; -import type { PropsWithChildren } from "react"; +import { useEffect, type PropsWithChildren } from "react"; import { useTranslation } from "react-i18next"; import { Outlet } from "react-router-dom"; @@ -33,6 +33,23 @@ export const BaseLayout = ({ children }: PropsWithChildren) => { document.title = instanceName; } + useEffect(() => { + const html = document.documentElement; + + const updateHtml = (language: string) => { + if (language) { + html.setAttribute("dir", i18n.dir(language)); + html.setAttribute("lang", language); + } + }; + + i18n.on("languageChanged", updateHtml); + + return () => { + i18n.off("languageChanged", updateHtml); + }; + }, [i18n]); + return ( <LocaleProvider locale={i18n.language}> <Nav /> diff --git a/airflow-core/src/airflow/ui/src/main.tsx b/airflow-core/src/airflow/ui/src/main.tsx index 41f5d1bd0f6..453e7e05199 100644 --- a/airflow-core/src/airflow/ui/src/main.tsx +++ b/airflow-core/src/airflow/ui/src/main.tsx @@ -68,19 +68,10 @@ axios.interceptors.response.use( axios.interceptors.request.use(tokenHandler); -const html = document.documentElement; -const updateHtml = (lng: string) => { - html.setAttribute("dir", i18n.dir(lng)); - html.setAttribute("lang", lng); -}; - -updateHtml(i18n.language); -i18n.on("languageChanged", updateHtml); - createRoot(document.querySelector("#root") as HTMLDivElement).render( <StrictMode> <I18nextProvider i18n={i18n}> - <ChakraProvider i18nIsDynamicList={true} value={system}> + <ChakraProvider value={system}> <ColorModeProvider> <QueryClientProvider client={client}> <TimezoneProvider>
