diff --git a/airflow-core/src/airflow/ui/src/components/AssetExpression/AssetNode.tsx b/airflow-core/src/airflow/ui/src/components/AssetExpression/AssetNode.tsx index 6289309ec59f4..86a0a2e6e8b89 100644 --- a/airflow-core/src/airflow/ui/src/components/AssetExpression/AssetNode.tsx +++ b/airflow-core/src/airflow/ui/src/components/AssetExpression/AssetNode.tsx @@ -16,10 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Text, HStack, Link } from "@chakra-ui/react"; +import { Box, Text, HStack } from "@chakra-ui/react"; import { FiDatabase } from "react-icons/fi"; import { PiRectangleDashed } from "react-icons/pi"; -import { Link as RouterLink } from "react-router-dom"; + +import { RouterLink } from "src/components/ui"; import Time from "../Time"; import type { AssetSummary, NextRunEvent } from "./types"; @@ -47,9 +48,9 @@ export const AssetNode = ({ {"alias" in asset ? ( {asset.alias.name} ) : ( - - {asset.asset.name} - + + {asset.asset.name} + )} {event?.lastUpdate === undefined ? undefined : ( diff --git a/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx b/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx index 1efb1ec8c5473..478cce363236d 100644 --- a/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx +++ b/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx @@ -16,12 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Button, Flex, Link, Text } from "@chakra-ui/react"; +import { Button, Flex, Text } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; -import { Link as RouterLink } from "react-router-dom"; import type { DagRunAssetReference, DagRunState } from "openapi/requests/types.gen"; -import { Popover } from "src/components/ui"; +import { Popover, RouterLink } from "src/components/ui"; import { StateBadge } from "../StateBadge"; @@ -40,11 +39,9 @@ export const TriggeredRuns = ({ dagRuns }: Props) => { {`${translate("triggered")} ${translate("dagRun_one")}`}: - - - {dagRuns[0]?.dag_id} - - + + {dagRuns[0]?.dag_id} + ) : ( // eslint-disable-next-line jsx-a11y/no-autofocus @@ -60,9 +57,7 @@ export const TriggeredRuns = ({ dagRuns }: Props) => { {dagRuns.map((dagRun) => ( - - {dagRun.dag_id} - + {dagRun.dag_id} ))} diff --git a/airflow-core/src/airflow/ui/src/components/ui/RouterLink.tsx b/airflow-core/src/airflow/ui/src/components/ui/RouterLink.tsx new file mode 100644 index 0000000000000..59d4a04366cb5 --- /dev/null +++ b/airflow-core/src/airflow/ui/src/components/ui/RouterLink.tsx @@ -0,0 +1,30 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { Link as ChakraLink, type LinkProps as ChakraLinkProps } from "@chakra-ui/react"; +import { Link as ReactRouterLink, type To } from "react-router-dom"; + +type RouterLinkProps = { + readonly to: To; +} & Omit; + +export const RouterLink = ({ children, to, ...rest }: RouterLinkProps) => ( + + {children} + +); diff --git a/airflow-core/src/airflow/ui/src/components/ui/index.ts b/airflow-core/src/airflow/ui/src/components/ui/index.ts index 4adadca3731ba..8569cce7df8d3 100644 --- a/airflow-core/src/airflow/ui/src/components/ui/index.ts +++ b/airflow-core/src/airflow/ui/src/components/ui/index.ts @@ -35,3 +35,4 @@ export * from "./ResetButton"; export * from "./InputWithAddon"; export * from "./ButtonGroupToggle"; export * from "./LazyClipboard"; +export * from "./RouterLink"; diff --git a/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx b/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx index 95b9420b3d73b..9ddbe3d77ee0b 100644 --- a/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx +++ b/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx @@ -16,10 +16,10 @@ * specific language governing permissions and limitations * under the License. */ -import { Flex, Heading, Link, useDisclosure, VStack } from "@chakra-ui/react"; +import { Flex, Heading, useDisclosure, VStack } from "@chakra-ui/react"; import type { ColumnDef } from "@tanstack/react-table"; import { useTranslation } from "react-i18next"; -import { useSearchParams, Link as RouterLink } from "react-router-dom"; +import { useSearchParams } from "react-router-dom"; import { useAssetServiceGetAssets } from "openapi/queries"; import type { AssetResponse } from "openapi/requests/types.gen"; @@ -30,6 +30,7 @@ import { ExpandCollapseButtons } from "src/components/ExpandCollapseButtons"; import RenderedJsonField from "src/components/RenderedJsonField"; import { SearchBar } from "src/components/SearchBar"; import Time from "src/components/Time"; +import { RouterLink } from "src/components/ui"; import { SearchParamsKeys, type SearchParamsKeysType } from "src/constants/searchParams"; import { useAdvancedSearch } from "src/hooks/useAdvancedSearch"; import { CreateAssetEvent } from "src/pages/Asset/CreateAssetEvent"; @@ -45,9 +46,9 @@ const createColumns = ( { accessorKey: "name", cell: ({ row: { original } }: AssetRow) => ( - - {original.name} - + + {original.name} + ), header: () => translate("name"), }, diff --git a/airflow-core/src/airflow/ui/src/pages/AssetsList/DependencyPopover.tsx b/airflow-core/src/airflow/ui/src/pages/AssetsList/DependencyPopover.tsx index 9eee5e46404af..9eba94f2647b0 100644 --- a/airflow-core/src/airflow/ui/src/pages/AssetsList/DependencyPopover.tsx +++ b/airflow-core/src/airflow/ui/src/pages/AssetsList/DependencyPopover.tsx @@ -16,12 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Button, Link } from "@chakra-ui/react"; +import { Button } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; -import { Link as RouterLink } from "react-router-dom"; import type { DagScheduleAssetReference, TaskOutletAssetReference } from "openapi/requests/types.gen"; -import { Popover } from "src/components/ui"; +import { Popover, RouterLink } from "src/components/ui"; type Props = { readonly dependencies: Array; @@ -57,9 +56,9 @@ export const DependencyPopover = ({ dependencies, type }: Props) => { } return ( - - {label} - + + {label} + ); })} diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx index 7367e7ea0a816..c18671b3c6b06 100644 --- a/airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx @@ -16,10 +16,9 @@ * specific language governing permissions and limitations * under the License. */ -import { Link } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; import { FiBookOpen } from "react-icons/fi"; -import { useParams, Link as RouterLink } from "react-router-dom"; +import { useParams } from "react-router-dom"; import type { DAGDetailsResponse, DagRunState } from "openapi/requests/types.gen"; import { DagIcon } from "src/assets/DagIcon"; @@ -32,6 +31,7 @@ import { DagVersion } from "src/components/DagVersion"; import DisplayMarkdownButton from "src/components/DisplayMarkdownButton"; import { HeaderCard } from "src/components/HeaderCard"; import { TogglePause } from "src/components/TogglePause"; +import { RouterLink } from "src/components/ui"; import { DagOwners } from "../DagsList/DagOwners"; import { DagTags } from "../DagsList/DagTags"; @@ -93,17 +93,15 @@ export const Header = ({ label: translate("dagDetails.latestRun"), value: Boolean(latestRunInfo) && latestRunInfo !== undefined ? ( - - - - - + + + ) : undefined, }, ...nextRunStat, diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/DeadlineRow.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/DeadlineRow.tsx index 011530f082cc6..3e47861c90d82 100644 --- a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/DeadlineRow.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/DeadlineRow.tsx @@ -16,16 +16,16 @@ * specific language governing permissions and limitations * under the License. */ -import { Badge, HStack, Link, Text, VStack } from "@chakra-ui/react"; +import { Badge, HStack, Text, VStack } from "@chakra-ui/react"; import dayjs from "dayjs"; import duration from "dayjs/plugin/duration"; import relativeTime from "dayjs/plugin/relativeTime"; import { useTranslation } from "react-i18next"; import { FiAlertTriangle, FiClock } from "react-icons/fi"; -import { Link as RouterLink } from "react-router-dom"; import type { DeadlineAlertResponse, DeadlineResponse } from "openapi/requests/types.gen"; import Time from "src/components/Time"; +import { RouterLink } from "src/components/ui"; dayjs.extend(duration); dayjs.extend(relativeTime); @@ -53,11 +53,13 @@ export const DeadlineRow = ({ alert, deadline }: DeadlineRowProps) => { {deadline.missed ? : } {translate(deadline.missed ? "deadlineStatus.missed" : "deadlineStatus.upcoming")} - - - {deadline.dag_run_id} - - + + {deadline.dag_run_id} + {reference !== undefined && interval !== undefined ? ( diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/TaskLogPreview.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/TaskLogPreview.tsx index e4ca4e1e966fb..efd38e01c5f00 100644 --- a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/TaskLogPreview.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/TaskLogPreview.tsx @@ -16,15 +16,15 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Flex, Link, Button } from "@chakra-ui/react"; +import { Box, Flex, Button } from "@chakra-ui/react"; import { useState } from "react"; import { useTranslation } from "react-i18next"; -import { Link as RouterLink } from "react-router-dom"; import type { TaskInstanceResponse } from "openapi/requests/types.gen"; import { ClearTaskInstanceButton } from "src/components/Clear"; import { StateBadge } from "src/components/StateBadge"; import Time from "src/components/Time"; +import { RouterLink } from "src/components/ui"; import { TaskLogContent } from "src/pages/TaskInstance/Logs/TaskLogContent"; import { useLogs } from "src/queries/useLogs"; import { getTaskInstanceLink } from "src/utils/links"; @@ -73,11 +73,9 @@ export const TaskLogPreview = ({ : translate("overview.failedLogs.showLogs")} - - - {translate("overview.failedLogs.viewFullLogs")} - - + + {translate("overview.failedLogs.viewFullLogs")} + {isExpanded ? ( diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Tasks/Tasks.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Tasks/Tasks.tsx index 154e0394a2cb6..993044dc851bb 100644 --- a/airflow-core/src/airflow/ui/src/pages/Dag/Tasks/Tasks.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Dag/Tasks/Tasks.tsx @@ -16,18 +16,18 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Link } from "@chakra-ui/react"; +import { Box } from "@chakra-ui/react"; import type { ColumnDef } from "@tanstack/react-table"; import type { TFunction } from "i18next"; import { useTranslation } from "react-i18next"; import { useParams, useSearchParams } from "react-router-dom"; -import { Link as RouterLink } from "react-router-dom"; import { useTaskServiceGetTasks } from "openapi/queries"; import type { TaskResponse } from "openapi/requests/types.gen"; import { DataTable } from "src/components/DataTable"; import { ErrorAlert } from "src/components/ErrorAlert"; import { TruncatedText } from "src/components/TruncatedText"; +import { RouterLink } from "src/components/ui"; import { SearchParamsKeys } from "src/constants/searchParams.ts"; import { TaskFilters } from "src/pages/Dag/Tasks/TaskFilters/TaskFilters.tsx"; @@ -43,11 +43,9 @@ const createColumns = ({ { accessorKey: "task_display_name", cell: ({ row: { original } }: TaskRow) => ( - - - - - + + + ), enableSorting: false, header: translate("common:taskId"), diff --git a/airflow-core/src/airflow/ui/src/pages/DagRuns.tsx b/airflow-core/src/airflow/ui/src/pages/DagRuns.tsx index 11cb870f77c71..bc1aa2f3d14b9 100644 --- a/airflow-core/src/airflow/ui/src/pages/DagRuns.tsx +++ b/airflow-core/src/airflow/ui/src/pages/DagRuns.tsx @@ -16,11 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Flex, HStack, Link, Text } from "@chakra-ui/react"; +import { Flex, HStack, Text } from "@chakra-ui/react"; import type { ColumnDef } from "@tanstack/react-table"; import type { TFunction } from "i18next"; import { useTranslation } from "react-i18next"; -import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom"; +import { useParams, useSearchParams } from "react-router-dom"; import { useDagRunServiceGetDagRuns } from "openapi/queries"; import type { DAGRunResponse } from "openapi/requests/types.gen"; @@ -36,6 +36,7 @@ import { RunTypeIcon } from "src/components/RunTypeIcon"; import { StateBadge } from "src/components/StateBadge"; import Time from "src/components/Time"; import { TruncatedText } from "src/components/TruncatedText"; +import { RouterLink } from "src/components/ui"; import { SearchParamsKeys, type SearchParamsKeysType } from "src/constants/searchParams"; import { useAdvancedSearchArg } from "src/hooks/useAdvancedSearch"; import { DagRunsFilters } from "src/pages/DagRunsFilters"; @@ -73,11 +74,9 @@ const runColumns = (translate: TFunction, dagId?: string): Array ( - - - - - + + + ), enableSorting: false, header: translate("dagId"), @@ -86,22 +85,18 @@ const runColumns = (translate: TFunction, dagId?: string): Array ( - - - - - + + + ), header: translate("dagRunId"), }, { accessorKey: "run_after", cell: ({ row: { original } }: DagRunRow) => ( - - - - + + ), header: translate("dagRun.runAfter"), }, diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx index 78536cc1c1a46..f57d8e138d8ff 100644 --- a/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx +++ b/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx @@ -16,18 +16,17 @@ * specific language governing permissions and limitations * under the License. */ -import { Button, HStack, Link, Text } from "@chakra-ui/react"; +import { Button, HStack, Text } from "@chakra-ui/react"; import dayjs from "dayjs"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { FiDatabase } from "react-icons/fi"; -import { Link as RouterLink } from "react-router-dom"; import { useAssetServiceGetDagAssetQueuedEvents, useAssetServiceNextRunAssets } from "openapi/queries"; import { AssetExpression, type ExpressionType } from "src/components/AssetExpression"; import type { NextRunEvent } from "src/components/AssetExpression/types"; import { TruncatedText } from "src/components/TruncatedText"; -import { Popover } from "src/components/ui"; +import { Popover, RouterLink } from "src/components/ui"; import { PartitionScheduleModal } from "./PartitionScheduleModal"; @@ -128,11 +127,9 @@ export const AssetSchedule = ({ assetExpression, dagId, timetablePartitioned, ti return ( - - - - - + + + ); } diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/DagCard.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/DagCard.tsx index b8dbe516b8a19..aefe80c5aaae2 100644 --- a/airflow-core/src/airflow/ui/src/pages/DagsList/DagCard.tsx +++ b/airflow-core/src/airflow/ui/src/pages/DagsList/DagCard.tsx @@ -16,9 +16,8 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Flex, HStack, SimpleGrid, Link, Spinner } from "@chakra-ui/react"; +import { Box, Flex, HStack, SimpleGrid, Spinner } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; -import { Link as RouterLink } from "react-router-dom"; import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen"; import { DeleteDagButton } from "src/components/DagActions/DeleteDagButton"; @@ -28,7 +27,7 @@ import { NeedsReviewBadge } from "src/components/NeedsReviewBadge"; import { Stat } from "src/components/Stat"; import { TogglePause } from "src/components/TogglePause"; import { TriggerDAGButton } from "src/components/TriggerDag/TriggerDAGButton"; -import { Tooltip } from "src/components/ui"; +import { RouterLink, Tooltip } from "src/components/ui"; import { isStatePending, useAutoRefresh } from "src/utils"; import { DagTags } from "./DagTags"; @@ -50,11 +49,9 @@ export const DagCard = ({ dag }: Props) => { - - - {dag.dag_display_name} - - + + {dag.dag_display_name} + @@ -83,20 +80,18 @@ export const DagCard = ({ dag }: Props) => { {latestRun ? ( - - - - {isStatePending(latestRun.state) && !dag.is_paused && Boolean(refetchInterval) ? ( - - ) : undefined} - - + + + {isStatePending(latestRun.state) && !dag.is_paused && Boolean(refetchInterval) ? ( + + ) : undefined} + ) : undefined} diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/DagOwners.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/DagOwners.tsx index e4102eb22de6c..c0049c224f69e 100644 --- a/airflow-core/src/airflow/ui/src/pages/DagsList/DagOwners.tsx +++ b/airflow-core/src/airflow/ui/src/pages/DagsList/DagOwners.tsx @@ -18,9 +18,9 @@ */ import { Link } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; -import { Link as RouterLink } from "react-router-dom"; import { LimitedItemsList } from "src/components/LimitedItemsList"; +import { RouterLink } from "src/components/ui"; import { getSafeExternalUrl } from "src/utils/links"; const DEFAULT_OWNERS: Array = []; @@ -52,9 +52,9 @@ export const DagOwners = ({ {owner} ) : ( - - {owner} - + + {owner} + ); }); diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/DagTags.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/DagTags.tsx index 01a0a207cf30f..d978b558705a6 100644 --- a/airflow-core/src/airflow/ui/src/pages/DagsList/DagTags.tsx +++ b/airflow-core/src/airflow/ui/src/pages/DagsList/DagTags.tsx @@ -16,12 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Link } from "@chakra-ui/react"; import { FiTag } from "react-icons/fi"; -import { Link as RouterLink } from "react-router-dom"; import type { DagTagResponse } from "openapi/requests/types.gen"; import { LimitedItemsList } from "src/components/LimitedItemsList"; +import { RouterLink } from "src/components/ui"; import { SearchParamsKeys } from "src/constants/searchParams"; const MAX_TAGS = 3; @@ -36,9 +35,9 @@ export const DagTags = ({ hideIcon = false, tags }: Props) => ( icon={hideIcon ? undefined : } interactive items={tags.map(({ name }) => ( - - {name} - + + {name} + ))} maxItems={MAX_TAGS} /> diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx index deda3679f65ae..29af6d24f2839 100644 --- a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx +++ b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx @@ -16,18 +16,10 @@ * specific language governing permissions and limitations * under the License. */ -import { - Heading, - HStack, - Skeleton, - VStack, - Link, - type SelectValueChangeDetails, - Box, -} from "@chakra-ui/react"; +import { Heading, HStack, Skeleton, VStack, type SelectValueChangeDetails, Box } from "@chakra-ui/react"; import type { ColumnDef } from "@tanstack/react-table"; import { useTranslation } from "react-i18next"; -import { Link as RouterLink, useSearchParams } from "react-router-dom"; +import { useSearchParams } from "react-router-dom"; import { useLocalStorage } from "usehooks-ts"; import type { DagRunState, DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen"; @@ -42,6 +34,7 @@ import { NeedsReviewBadge } from "src/components/NeedsReviewBadge"; import { SearchBar } from "src/components/SearchBar"; import { TogglePause } from "src/components/TogglePause"; import { TriggerDAGButton } from "src/components/TriggerDag/TriggerDAGButton"; +import { RouterLink } from "src/components/ui"; import { DAGS_LIST_DISPLAY_KEY } from "src/constants/localStorage"; import { SearchParamsKeys, type SearchParamsKeysType } from "src/constants/searchParams"; import { useAdvancedSearch } from "src/hooks/useAdvancedSearch"; @@ -78,9 +71,9 @@ const createColumns = ( { accessorKey: "dag_display_name", cell: ({ row: { original } }) => ( - - {original.dag_display_name} - + + {original.dag_display_name} + ), header: () => translate("dagId"), }, @@ -113,17 +106,18 @@ const createColumns = ( accessorKey: "last_run_start_date", cell: ({ row: { original } }) => original.latest_dag_runs[0] ? ( - - - - - + + + ) : undefined, header: () => translate("dagDetails.latestRun"), }, diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/PoolSummary/PoolSummary.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/PoolSummary/PoolSummary.tsx index 9955ad82a8d10..b306bcfe3cdb1 100644 --- a/airflow-core/src/airflow/ui/src/pages/Dashboard/PoolSummary/PoolSummary.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/PoolSummary/PoolSummary.tsx @@ -16,15 +16,15 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Heading, Flex, Skeleton, Link } from "@chakra-ui/react"; +import { Box, Heading, Flex, Skeleton } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; import { BiTargetLock } from "react-icons/bi"; -import { Link as RouterLink } from "react-router-dom"; import { type PoolServiceGetPoolsDefaultResponse, useAuthLinksServiceGetAuthMenus } from "openapi/queries"; import { usePoolServiceGetPools } from "openapi/queries/queries"; import type { ApiError } from "openapi/requests"; import { PoolBar, UNLIMITED_SLOTS } from "src/components/PoolBar"; +import { RouterLink } from "src/components/ui"; import { useAutoRefresh } from "src/utils"; import { type Slots, slotKeys } from "src/utils/slots"; @@ -98,9 +98,9 @@ export const PoolSummary = () => { {hasPoolsAccess ? ( - - {translate("managePools")} - + + {translate("managePools")} + ) : undefined} diff --git a/airflow-core/src/airflow/ui/src/pages/HITLTaskInstances/HITLTaskInstances.tsx b/airflow-core/src/airflow/ui/src/pages/HITLTaskInstances/HITLTaskInstances.tsx index 4538bc204af22..e9e0e86e4d29a 100644 --- a/airflow-core/src/airflow/ui/src/pages/HITLTaskInstances/HITLTaskInstances.tsx +++ b/airflow-core/src/airflow/ui/src/pages/HITLTaskInstances/HITLTaskInstances.tsx @@ -16,11 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Link, VStack } from "@chakra-ui/react"; +import { VStack } from "@chakra-ui/react"; import type { ColumnDef } from "@tanstack/react-table"; import type { TFunction } from "i18next"; import { useTranslation } from "react-i18next"; -import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom"; +import { useParams, useSearchParams } from "react-router-dom"; import { useTaskInstanceServiceGetHitlDetails } from "openapi/queries"; import type { HITLDetail } from "openapi/requests/types.gen"; @@ -30,6 +30,7 @@ import { ErrorAlert } from "src/components/ErrorAlert"; import { StateBadge } from "src/components/StateBadge"; import Time from "src/components/Time"; import { TruncatedText } from "src/components/TruncatedText"; +import { RouterLink } from "src/components/ui"; import { SearchParamsKeys, type SearchParamsKeysType } from "src/constants/searchParams"; import { useAdvancedSearchArg } from "src/hooks/useAdvancedSearch"; import { useAutoRefresh } from "src/utils"; @@ -74,11 +75,9 @@ const taskInstanceColumns = ({ { accessorKey: "subject", cell: ({ row: { original } }: HITLRow) => ( - - - - - + + + ), header: translate("subject"), }, @@ -88,11 +87,9 @@ const taskInstanceColumns = ({ { accessorKey: "task_instance.dag_id", cell: ({ row: { original } }: HITLRow) => ( - - - - - + + + ), enableSorting: false, header: translate("common:dagId"), @@ -104,13 +101,11 @@ const taskInstanceColumns = ({ { accessorKey: "run_id", cell: ({ row: { original } }: HITLRow) => ( - - - - - + + + ), header: translate("common:dagRunId"), }, @@ -130,11 +125,12 @@ const taskInstanceColumns = ({ { accessorKey: "task_display_name", cell: ({ row: { original } }: HITLRow) => ( - - - - - + + + ), header: translate("common:taskId"), }, diff --git a/airflow-core/src/airflow/ui/src/pages/Run/Header.tsx b/airflow-core/src/airflow/ui/src/pages/Run/Header.tsx index 6b29ba5187330..3f83146927c4d 100644 --- a/airflow-core/src/airflow/ui/src/pages/Run/Header.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Run/Header.tsx @@ -16,11 +16,10 @@ * specific language governing permissions and limitations * under the License. */ -import { HStack, Text, Box, Link } from "@chakra-ui/react"; +import { HStack, Text, Box } from "@chakra-ui/react"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { FiBarChart } from "react-icons/fi"; -import { Link as RouterLink } from "react-router-dom"; import { useDeadlinesServiceGetDagDeadlineAlerts } from "openapi/queries"; import type { DAGRunResponse } from "openapi/requests/types.gen"; @@ -32,6 +31,7 @@ import { LimitedItemsList } from "src/components/LimitedItemsList"; import { MarkRunAsButton } from "src/components/MarkAs"; import { RunTypeIcon } from "src/components/RunTypeIcon"; import Time from "src/components/Time"; +import { RouterLink } from "src/components/ui"; import { SearchParamsKeys } from "src/constants/searchParams"; import DeleteRunButton from "src/pages/DeleteRunButton"; import { usePatchDagRun } from "src/queries/usePatchDagRun"; @@ -124,13 +124,11 @@ export const Header = ({ dagRun }: { readonly dagRun: DAGRunResponse }) => { { label: translate("dagRun.triggeringUser"), value: ( - - - {dagRun.triggering_user_name} - - + + {dagRun.triggering_user_name} + ), }, ]), diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx b/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx index 2f75a9ab0caf0..e2a567377688a 100644 --- a/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx +++ b/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx @@ -16,11 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Flex, Link } from "@chakra-ui/react"; +import { Flex } from "@chakra-ui/react"; import type { ColumnDef } from "@tanstack/react-table"; import type { TFunction } from "i18next"; import { useTranslation } from "react-i18next"; -import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom"; +import { useParams, useSearchParams } from "react-router-dom"; import { useTaskInstanceServiceGetTaskInstances } from "openapi/queries"; import type { TaskInstanceResponse } from "openapi/requests/types.gen"; @@ -34,6 +34,7 @@ import { MarkTaskInstanceAsButton } from "src/components/MarkAs"; import { StateBadge } from "src/components/StateBadge"; import Time from "src/components/Time"; import { TruncatedText } from "src/components/TruncatedText"; +import { RouterLink } from "src/components/ui"; import { ActionBar } from "src/components/ui/ActionBar"; import { Checkbox } from "src/components/ui/Checkbox"; import { SearchParamsKeys, type SearchParamsKeysType } from "src/constants/searchParams"; @@ -117,11 +118,9 @@ const taskInstanceColumns = ({ { accessorKey: "dag_display_name", cell: ({ row: { original } }: TaskInstanceRow) => ( - - - - - + + + ), enableSorting: false, header: translate("dagId"), @@ -134,11 +133,9 @@ const taskInstanceColumns = ({ accessorKey: "run_after", cell: ({ row: { original } }: TaskInstanceRow) => Boolean(taskId) ? ( - - - - + + ) : (