Translate all components

Author: jscheffl

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/Clear/columns.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>
   );
 };

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

@@ -20,6 +20,7 @@ import { Input, Box, Spacer, HStack, Field, VStack, Flex, Text, Skeleton } from
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { useForm, Controller, useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
 import type { DAGResponse, DAGWithLatestDagRunsResponse, BackfillPostBody } from "openapi/requests/types.gen";
 import { Button } from "src/components/ui";
@@ -29,7 +30,6 @@ import { useCreateBackfillDryRun } from "src/queries/useCreateBackfillDryRun";
 import { useDagParams } from "src/queries/useDagParams";
 import { useParamStore } from "src/queries/useParamStore";
 import { useTogglePause } from "src/queries/useTogglePause";
-import { pluralize } from "src/utils";
 
 import ConfigForm from "../ConfigForm";
 import { DateTimeInput } from "../DateTimeInput";
@@ -47,6 +47,7 @@ const today = new Date().toISOString().slice(0, 16);
 type BackfillFormProps = DagRunTriggerParams & Omit<BackfillPostBody, "dag_run_conf">;
 
 const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
+  const { t: translate } = useTranslation("components");
   const [errors, setErrors] = useState<{ conf?: string; date?: unknown }>({});
   const [unpause, setUnpause] = useState(true);
   const [formError, setFormError] = useState(false);
@@ -67,7 +68,6 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
   const values = useWatch<BackfillFormProps>({
     control,
   });
-
   const { data, isPending: isPendingDryRun } = useCreateBackfillDryRun({
     requestBody: {
       requestBody: {
@@ -81,9 +81,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
       },
     },
   });
-
   const { mutate: togglePause } = useTogglePause({ dagId: dag.dag_id });
-
   const { createBackfill, dateValidationError, error, isPending } = useCreateBackfill({
     onSuccessConfirm: onClose,
   });
@@ -141,13 +139,17 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
 
   const inlineMessage = isPendingDryRun ? (
     <Skeleton height="20px" width="100px" />
+  ) : affectedTasks.total_entries > 1 ? (
+    <Text color="fg.success" fontSize="sm">
+      {translate("backfill.affectedOne")}
+    </Text>
   ) : affectedTasks.total_entries > 0 ? (
     <Text color="fg.success" fontSize="sm">
-      {pluralize("run", affectedTasks.total_entries)} will be triggered
+      {translate("backfill.affectedMultiple", { count: affectedTasks.total_entries })}
     </Text>
   ) : (
     <Text color="fg.error" fontSize="sm" fontWeight="medium">
-      No runs matching selected criteria.
+      {translate("backfill.affectedNone")}
     </Text>
   );
 
@@ -157,17 +159,17 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
       <VStack alignItems="stretch" gap={2} pt={4}>
         <Box>
           <Text fontSize="md" fontWeight="semibold" mb={3}>
-            Date Range
+            {translate("backfill.dateRange")}
           </Text>
           <HStack alignItems="flex-start" w="full">
             <Controller
               control={control}
               name="from_date"
               render={({ field }) => (
                 <Field.Root invalid={Boolean(errors.date) || dataIntervalInvalid} required>
-                  <Field.Label>From</Field.Label>
+                  <Field.Label>{translate("backfill.dateRangeFrom")}</Field.Label>
                   <DateTimeInput {...field} max={today} onBlur={resetDateError} size="sm" />
-                  <Field.ErrorText>Start Date must be before the End Date</Field.ErrorText>
+                  <Field.ErrorText>{translate("backfill.errorStartDateBeforeEndDate")}</Field.ErrorText>
                 </Field.Root>
               )}
             />
@@ -176,7 +178,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
               name="to_date"
               render={({ field }) => (
                 <Field.Root invalid={Boolean(errors.date) || dataIntervalInvalid} required>
-                  <Field.Label>To</Field.Label>
+                  <Field.Label>{translate("backfill.dateRangeTo")}</Field.Label>
                   <DateTimeInput {...field} max={today} onBlur={resetDateError} size="sm" />
                 </Field.Root>
               )}
@@ -196,7 +198,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
               }}
             >
               <RadioCardLabel fontSize="md" fontWeight="semibold" mb={3}>
-                Reprocess Behaviour
+                {translate("backfill.reprocessBehavior")}
               </RadioCardLabel>
               <HStack>
                 {reprocessBehaviors.map((item) => (
@@ -226,7 +228,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
                 type="number"
                 width={24}
               />
-              <Flex>Max Active Runs</Flex>
+              <Flex>{translate("backfill.maxRuns")}</Flex>
             </HStack>
           )}
         />
@@ -236,7 +238,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
           name="run_backwards"
           render={({ field }) => (
             <Checkbox checked={field.value} colorPalette="blue" onChange={field.onChange}>
-              Run Backwards
+              {translate("backfill.backwards")}
             </Checkbox>
           )}
         />
@@ -249,7 +251,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
               onChange={() => setUnpause(!unpause)}
               wordBreak="break-all"
             >
-              Unpause {dag.dag_display_name} on trigger
+              {translate("backfill.unpause", { dag_display_name: dag.dag_display_name })}
             </Checkbox>
             <Spacer />
           </>
@@ -266,7 +268,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
       <Box as="footer" display="flex" justifyContent="flex-end" mt={4}>
         <HStack w="full">
           <Spacer />
-          <Button onClick={() => void handleSubmit(onCancel)()}>Cancel</Button>
+          <Button onClick={() => void handleSubmit(onCancel)()}>{translate("common:modal.cancel")}</Button>
           <Button
             colorPalette="blue"
             disabled={
@@ -275,7 +277,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
             loading={isPending}
             onClick={() => void handleSubmit(onSubmit)()}
           >
-            Run Backfill
+            {translate("backfill.run")}
           </Button>
         </HStack>
       </Box>