Translate all components

airflow-core/src/airflow/ui/src/components/AssetExpression/AndGateNode.tsx

@@ -18,36 +18,41 @@
  */
 import { Box, VStack, Badge } from "@chakra-ui/react";
 import type { PropsWithChildren } from "react";
+import { useTranslation } from "react-i18next";
 import { TbLogicAnd } from "react-icons/tb";
 
-export const AndGateNode = ({ children }: PropsWithChildren) => (
-  <Box
-    bg="bg.subtle"
-    border="2px dashed"
-    borderRadius="lg"
-    display="inline-block"
-    minW="fit-content"
-    p={4}
-    position="relative"
-  >
-    <Badge
-      alignItems="center"
-      borderRadius="full"
-      display="flex"
-      fontSize="sm"
-      gap={1}
-      left="50%"
-      position="absolute"
-      px={3}
-      py={1}
-      top="-3"
-      transform="translateX(-50%)"
+export const AndGateNode = ({ children }: PropsWithChildren) => {
+  const { t: translate } = useTranslation("common");
+
+  return (
+    <Box
+      bg="bg.subtle"
+      border="2px dashed"
+      borderRadius="lg"
+      display="inline-block"
+      minW="fit-content"
+      p={4}
+      position="relative"
     >
-      <TbLogicAnd size={18} />
-      AND
-    </Badge>
-    <VStack align="center" gap={4} mt={3}>
-      {children}
-    </VStack>
-  </Box>
-);
+      <Badge
+        alignItems="center"
+        borderRadius="full"
+        display="flex"
+        fontSize="sm"
+        gap={1}
+        left="50%"
+        position="absolute"
+        px={3}
+        py={1}
+        top="-3"
+        transform="translateX(-50%)"
+      >
+        <TbLogicAnd size={18} />
+        {translate("expression.and")}
+      </Badge>
+      <VStack align="center" gap={4} mt={3}>
+        {children}
+      </VStack>
+    </Box>
+  );
+};

airflow-core/src/airflow/ui/src/components/AssetExpression/AssetExpression.tsx

@@ -18,6 +18,7 @@
  */
 import { Box, Badge } from "@chakra-ui/react";
 import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
 import { TbLogicOr } from "react-icons/tb";
 
 import { AndGateNode } from "./AndGateNode";
@@ -32,6 +33,8 @@ export const AssetExpression = ({
   readonly events?: Array<NextRunEvent>;
   readonly expression: ExpressionType | null;
 }) => {
+  const { t: translate } = useTranslation("common");
+
   if (expression === null) {
     return undefined;
   }
@@ -54,7 +57,7 @@ export const AssetExpression = ({
               {expression.any && index === expression.any.length - 1 ? undefined : (
                 <Badge alignItems="center" borderRadius="full" fontSize="sm" px={3} py={1}>
                   <TbLogicOr size={18} />
-                  OR
+                  {translate("expression.or")}
                 </Badge>
               )}
             </Fragment>

airflow-core/src/airflow/ui/src/components/Banner/BackfillBanner.tsx

@@ -18,6 +18,7 @@
  */
 import { Box, HStack, Spacer, Text, type ButtonProps } from "@chakra-ui/react";
 import { useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
 import { RiArrowGoBackFill } from "react-icons/ri";
 
@@ -46,6 +47,7 @@ const buttonProps = {
 } satisfies ButtonProps;
 
 const BackfillBanner = ({ dagId }: Props) => {
+  const { t: translate } = useTranslation("components");
   const { data, isLoading } = useBackfillServiceListBackfillsUi({
     dagId,
   });
@@ -91,7 +93,7 @@ const BackfillBanner = ({ dagId }: Props) => {
     <Box bg="blue.solid" borderRadius="full" color="blue.contrast" my="1" px="2" py="1">
       <HStack alignItems="center" ml={3}>
         <RiArrowGoBackFill />
-        <Text key="backfill">Backfill in progress:</Text>
+        <Text key="backfill">{translate("banner.backfillInProgress")}:</Text>
         <Text fontSize="sm">
           {" "}
           <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />
@@ -100,7 +102,7 @@ const BackfillBanner = ({ dagId }: Props) => {
         <Spacer flex="max-content" />
         <ProgressBar size="xs" visibility="visible" />
         <Button
-          aria-label={backfill.is_paused ? "Unpause backfill" : "Pause backfill"}
+          aria-label={backfill.is_paused ? translate("banner.unpause") : translate("banner.pause")}
           loading={isPausePending || isUnPausePending}
           onClick={() => {
             togglePause();
@@ -110,7 +112,7 @@ const BackfillBanner = ({ dagId }: Props) => {
           {backfill.is_paused ? <MdPlayArrow /> : <MdPause />}
         </Button>
         <Button
-          aria-label="Cancel backfill"
+          aria-label={translate("banner.cancel")}
           loading={isStopPending}
           onClick={() => {
             cancel();

airflow-core/src/airflow/ui/src/components/ConfigForm.tsx

@@ -18,6 +18,7 @@
  */
 import { Accordion, Box, Field } from "@chakra-ui/react";
 import { type Control, type FieldValues, type Path, Controller } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
 import type { ParamsSpec } from "src/queries/useDagParams";
 import { useParamStore } from "src/queries/useParamStore";
@@ -50,6 +51,7 @@ const ConfigForm = <T extends FieldValues = FieldValues>({
   setErrors,
   setFormError,
 }: ConfigFormProps<T>) => {
+  const { t: translate } = useTranslation("components");
   const { conf, setConf } = useParamStore();
 
   const validateAndPrettifyJson = (value: string) => {
@@ -66,11 +68,11 @@ const ConfigForm = <T extends FieldValues = FieldValues>({
 
       return formattedJson;
     } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Unknown error occurred.";
+      const errorMessage = error instanceof Error ? error.message : translate("configForm.unkownError");
 
       setErrors((prev) => ({
         ...prev,
-        conf: `Invalid JSON format: ${errorMessage}`,
+        conf: translate("configForm.invalidJson", { errorMessage }),
       }));
 
       return value;
@@ -91,7 +93,9 @@ const ConfigForm = <T extends FieldValues = FieldValues>({
         setError={setFormError}
       />
       <Accordion.Item key="advancedOptions" value="advancedOptions">
-        <Accordion.ItemTrigger cursor="button">Advanced Options</Accordion.ItemTrigger>
+        <Accordion.ItemTrigger cursor="button">
+          {translate("configForm.advancedOptions")}
+        </Accordion.ItemTrigger>
         <Accordion.ItemContent>
           <Box p={4}>
             {children}
@@ -100,7 +104,7 @@ const ConfigForm = <T extends FieldValues = FieldValues>({
               name={"conf" as Path<T>}
               render={({ field }) => (
                 <Field.Root invalid={Boolean(errors.conf)} mt={6}>
-                  <Field.Label fontSize="md">Configuration JSON</Field.Label>
+                  <Field.Label fontSize="md">{translate("configForm.configJson")}</Field.Label>
                   <JsonEditor
                     {...field}
                     onBlur={() => {

airflow-core/src/airflow/ui/src/components/DagActions/ParseDag.tsx

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { useTranslation } from "react-i18next";
 import { AiOutlineFileSync } from "react-icons/ai";
 
 import { Button } from "src/components/ui";
@@ -27,17 +28,18 @@ type Props = {
 };
 
 const ParseDag = ({ dagId, fileToken }: Props) => {
+  const { t: translate } = useTranslation("components");
   const { isPending, mutate } = useDagParsing({ dagId });
 
   return (
     <Button
-      aria-label="Reparse Dag"
+      aria-label={translate("reparseDag")}
       loading={isPending}
       onClick={() => mutate({ fileToken })}
       variant="outline"
     >
       <AiOutlineFileSync height={5} width={5} />
-      Reparse Dag
+      {translate("reparseDag")}
     </Button>
   );
 };