This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 1559dae90ab UI: Use TeamName component for all team name displays
(#73910)
1559dae90ab is described below
commit 1559dae90aba8873c8662b4a21f57693be514224
Author: Vincent <[email protected]>
AuthorDate: Wed Sep 30 16:05:15 2026 -0400
UI: Use TeamName component for all team name displays (#73910)
Several listings and cards rendered the raw team name as plain text: the
Jobs, Connections, Events and Variables table columns and the pool card
title. Route them all through the shared TeamName component so team names
render consistently as links to the team's Dags list, matching the Dags,
Dag runs and task instances listings.
Generated-by: Claude Code (Opus 4.8)
---
.../src/airflow/ui/src/pages/Connections/Connections.tsx | 4 ++++
airflow-core/src/airflow/ui/src/pages/Events/Events.tsx | 4 ++++
airflow-core/src/airflow/ui/src/pages/Jobs.tsx | 11 +++++++++--
airflow-core/src/airflow/ui/src/pages/Pools/PoolBarCard.tsx | 12 +++++++++++-
.../src/airflow/ui/src/pages/Variables/Variables.tsx | 4 ++++
5 files changed, 32 insertions(+), 3 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx
b/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx
index 626e4cd60f2..a7e45722e11 100644
--- a/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx
@@ -40,6 +40,7 @@ import {
import { useTableURLState } from "src/components/DataTable/useTableUrlState";
import { ErrorAlert } from "src/components/ErrorAlert";
import { SearchBar } from "src/components/SearchBar";
+import { TeamName } from "src/components/TeamName";
import { SearchParamsKeys, type SearchParamsKeysType } from
"src/constants/searchParams";
import { useAdvancedSearch } from "src/hooks/useAdvancedSearch";
@@ -110,6 +111,9 @@ const getColumns = ({
? [
{
accessorKey: "team_name",
+ cell: ({ row: { original } }: { row: { original:
ConnectionResponse } }) => (
+ <TeamName teamName={original.team_name} />
+ ),
header: translate("columns.team"),
},
]
diff --git a/airflow-core/src/airflow/ui/src/pages/Events/Events.tsx
b/airflow-core/src/airflow/ui/src/pages/Events/Events.tsx
index ce1d9687a3c..0216306caf8 100644
--- a/airflow-core/src/airflow/ui/src/pages/Events/Events.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Events/Events.tsx
@@ -30,6 +30,7 @@ import { useTableURLState } from
"src/components/DataTable/useTableUrlState";
import { ErrorAlert } from "src/components/ErrorAlert";
import { ExpandCollapseButtons } from "src/components/ExpandCollapseButtons";
import RenderedJsonField from "src/components/RenderedJsonField";
+import { TeamName } from "src/components/TeamName";
import Time from "src/components/Time";
import { SearchParamsKeys, type SearchParamsKeysType } from
"src/constants/searchParams";
@@ -81,6 +82,9 @@ const eventsColumn = (
? [
{
accessorKey: "team_name",
+ cell: ({ row: { original } }: { row: { original: EventLogResponse }
}) => (
+ <TeamName teamName={original.team_name} />
+ ),
enableSorting: false,
header: translate("common:dagDetails.team"),
meta: {
diff --git a/airflow-core/src/airflow/ui/src/pages/Jobs.tsx
b/airflow-core/src/airflow/ui/src/pages/Jobs.tsx
index 7d66ab08fee..6e76dea6b04 100644
--- a/airflow-core/src/airflow/ui/src/pages/Jobs.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Jobs.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box } from "@chakra-ui/react";
+import { Box, HStack } from "@chakra-ui/react";
import type { ColumnDef } from "@tanstack/react-table";
import type { TFunction } from "i18next";
import { useTranslation } from "react-i18next";
@@ -30,6 +30,7 @@ import { useTableURLState } from
"src/components/DataTable/useTableUrlState";
import { ErrorAlert } from "src/components/ErrorAlert";
import { FilterBar } from "src/components/FilterBar";
import { StateBadge } from "src/components/StateBadge";
+import { TeamName } from "src/components/TeamName";
import Time from "src/components/Time";
import { SearchParamsKeys } from "src/constants/searchParams";
@@ -49,7 +50,13 @@ const createColumns = (translate: TFunction, multiTeam:
boolean): Array<ColumnDe
? ([
{
accessorKey: "team_names",
- cell: ({ row: { original } }) => original.team_names?.join(", "),
+ cell: ({ row: { original } }) => (
+ <HStack gap={2} wrap="wrap">
+ {original.team_names?.map((teamName) => (
+ <TeamName key={teamName} teamName={teamName} />
+ ))}
+ </HStack>
+ ),
enableSorting: false,
header: translate("common:dagDetails.team"),
},
diff --git a/airflow-core/src/airflow/ui/src/pages/Pools/PoolBarCard.tsx
b/airflow-core/src/airflow/ui/src/pages/Pools/PoolBarCard.tsx
index ca1f12eaafa..bcd4586ab1a 100644
--- a/airflow-core/src/airflow/ui/src/pages/Pools/PoolBarCard.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Pools/PoolBarCard.tsx
@@ -25,6 +25,9 @@ import { Tooltip } from "src/system-components";
import { PoolBar, UNLIMITED_SLOTS } from "src/components/PoolBar";
import { StateIcon } from "src/components/StateIcon";
+import { TeamName } from "src/components/TeamName";
+
+import { useShowTeam } from "src/hooks/useShowTeam";
import DeletePoolButton from "./DeletePoolButton";
import EditPoolButton from "./EditPoolButton";
@@ -35,6 +38,7 @@ type PoolBarCardProps = {
const PoolBarCard = ({ pool }: PoolBarCardProps) => {
const { t: translate } = useTranslation("admin");
+ const showTeam = useShowTeam(pool.team_name);
return (
<Box borderColor="border.emphasized" borderRadius={8} borderWidth={1}
mb={2} overflow="hidden">
@@ -43,7 +47,13 @@ const PoolBarCard = ({ pool }: PoolBarCardProps) => {
<HStack justifyContent="space-between" width="100%">
<Text fontSize="lg" fontWeight="bold" whiteSpace="normal"
wordBreak="break-word">
{pool.name} ({pool.slots === UNLIMITED_SLOTS ? "∞" : pool.slots}
{translate("pools.form.slots")}
- ){pool.team_name !== null && ` (${pool.team_name})`}
+ )
+ {showTeam ? (
+ <>
+ {" ("}
+ <TeamName teamName={pool.team_name} />)
+ </>
+ ) : undefined}
{pool.include_deferred ? (
<Tooltip content={translate("pools.deferredSlotsIncluded")}>
<StateIcon size={18} state="deferred" style={{ display:
"inline", marginLeft: 6 }} />
diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
b/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
index 0c3048971fd..f2a8f194806 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
@@ -41,6 +41,7 @@ import { useTableURLState } from
"src/components/DataTable/useTableUrlState";
import { ErrorAlert } from "src/components/ErrorAlert";
import { ExpandCollapseButtons } from "src/components/ExpandCollapseButtons";
import { SearchBar } from "src/components/SearchBar";
+import { TeamName } from "src/components/TeamName";
import { SearchParamsKeys, type SearchParamsKeysType } from
"src/constants/searchParams";
import { useAdvancedSearch } from "src/hooks/useAdvancedSearch";
@@ -115,6 +116,9 @@ const getColumns = ({
? [
{
accessorKey: "team_name",
+ cell: ({ row: { original } }: { row: { original: VariableResponse
} }) => (
+ <TeamName teamName={original.team_name} />
+ ),
header: translate("columns.team"),
},
]
