I18n: Add RTL support (#51376)

guan404ming · web-flow · commit d52ce4204d7f · 2025-06-09T16:04:14.000+03:00
* Add rtl support

* Upgrade Chakra ui and fix select indicator position

* Support mirrored navbar

* Fix dynamic lang change
diff --git a/airflow-core/src/airflow/ui/index.html b/airflow-core/src/airflow/ui/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" style="height: 100%">
+<html style="height: 100%">
   <head>
     <meta charset="UTF-8" />
     <base href="{{ backend_server_base_url }}" />
diff --git a/airflow-core/src/airflow/ui/package.json b/airflow-core/src/airflow/ui/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@chakra-ui/anatomy": "^2.3.4",
-    "@chakra-ui/react": "^3.17.0",
+    "@chakra-ui/react": "^3.20.0",
     "@codemirror/lang-json": "^6.0.1",
     "@emotion/react": "^11.14.0",
     "@tanstack/react-query": "^5.75.1",
diff --git a/airflow-core/src/airflow/ui/pnpm-lock.yaml b/airflow-core/src/airflow/ui/pnpm-lock.yaml
diff --git a/airflow-core/src/airflow/ui/src/components/ui/Select/Trigger.tsx b/airflow-core/src/airflow/ui/src/components/ui/Select/Trigger.tsx
@@ -32,7 +32,7 @@ export const Trigger = forwardRef<HTMLButtonElement, Props>((props, ref) => {
   return (
     <ChakraSelect.Control {...rest}>
       <ChakraSelect.Trigger ref={ref}>{children}</ChakraSelect.Trigger>
-      <ChakraSelect.IndicatorGroup>
+      <ChakraSelect.IndicatorGroup _rtl={{ bottom: 0, left: 0, right: "auto", top: 0 }}>
         {clearable ? (
           <ChakraSelect.ClearTrigger asChild>
             <CloseButton
diff --git a/airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx b/airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx
@@ -16,8 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box } from "@chakra-ui/react";
+import { Box, LocaleProvider } from "@chakra-ui/react";
 import type { PropsWithChildren } from "react";
+import { useTranslation } from "react-i18next";
 import { Outlet } from "react-router-dom";
 
 import { useConfig } from "src/queries/useConfig";
@@ -26,17 +27,18 @@ import { Nav } from "./Nav";
 
 export const BaseLayout = ({ children }: PropsWithChildren) => {
   const instanceName = useConfig("instance_name");
+  const { i18n } = useTranslation();
 
   if (typeof instanceName === "string") {
     document.title = instanceName;
   }
 
   return (
-    <>
+    <LocaleProvider locale={i18n.language}>
       <Nav />
-      <Box display="flex" flexDirection="column" h="100vh" ml={20} p={3}>
+      <Box _ltr={{ ml: 20 }} _rtl={{ mr: 20 }} display="flex" flexDirection="column" h="100vh" p={3}>
         {children ?? <Outlet />}
       </Box>
-    </>
+    </LocaleProvider>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx
@@ -40,11 +40,18 @@ export const Nav = () => {
 
   return (
     <VStack
+      _ltr={{
+        left: 0,
+        right: "auto",
+      }}
+      _rtl={{
+        left: "auto",
+        right: 0,
+      }}
       alignItems="center"
       bg="blue.muted"
       height="100%"
       justifyContent="space-between"
-      left={0}
       position="fixed"
       py={3}
       top={0}
diff --git a/airflow-core/src/airflow/ui/src/main.tsx b/airflow-core/src/airflow/ui/src/main.tsx
@@ -58,10 +58,19 @@ 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 value={system}>
+      <ChakraProvider i18nIsDynamicList={true} value={system}>
         <ColorModeProvider>
           <QueryClientProvider client={client}>
             <TimezoneProvider>
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Health/HealthBadge.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/Health/HealthBadge.tsx
@@ -51,14 +51,13 @@ export const HealthBadge = ({
             {": "}
             {translate(`health.${status}`)}
           </Text>
-          <Text>
+          <Text hidden={latestHeartbeat === undefined}>
             {translate("health.lastHeartbeat")}
             {": "}
             <Time datetime={latestHeartbeat} />
           </Text>
         </div>
       }
-      disabled={!Boolean(latestHeartbeat)}
     >
       <StateBadge size="lg" state={state} variant="surface">
         {title}
