Convert Tasks Table from card to table mode

airflow-core/src/airflow/ui/src/pages/Dag/Tasks/Tasks.tsx

@@ -16,25 +16,63 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Skeleton, Box } from "@chakra-ui/react";
+import { Box, Link } 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 type { CardDef } from "src/components/DataTable/types";
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { TruncatedText } from "src/components/TruncatedText";
 import { SearchParamsKeys } from "src/constants/searchParams.ts";
 import { TaskFilters } from "src/pages/Dag/Tasks/TaskFilters/TaskFilters.tsx";
 
-import { TaskCard } from "./TaskCard";
+type TaskRow = { row: { original: TaskResponse } };
 
-const cardDef = (dagId: string): CardDef<TaskResponse> => ({
-  card: ({ row }) => <TaskCard dagId={dagId} task={row} />,
-  meta: {
-    customSkeleton: <Skeleton height="120px" width="100%" />,
+const createColumns = ({
+  dagId,
+  translate,
+}: {
+  dagId: string;
+  translate: TFunction;
+}): Array<ColumnDef<TaskResponse>> => [
+  {
+    accessorKey: "task_display_name",
+    cell: ({ row: { original } }: TaskRow) => (
+      <Link asChild color="fg.info" fontWeight="bold">
+        <RouterLink to={`/dags/${dagId}/tasks/${original.task_id}`}>
+          <TruncatedText text={original.task_display_name ?? original.task_id ?? ""} />
+        </RouterLink>
+      </Link>
+    ),
+    enableSorting: false,
+    header: translate("common:taskId"),
   },
-});
+  {
+    accessorKey: "trigger_rule",
+    enableSorting: false,
+    header: translate("common:task.triggerRule"),
+  },
+  {
+    accessorKey: "operator_name",
+    enableSorting: false,
+    header: translate("common:task.operator"),
+  },
+  {
+    accessorKey: "retries",
+    enableSorting: false,
+    header: translate("tasks:retries"),
+  },
+  {
+    accessorKey: "is_mapped",
+    enableSorting: false,
+    header: translate("tasks:mapped"),
+  },
+];
 
 export const Tasks = () => {
   const { dagId = "" } = useParams();
@@ -46,6 +84,10 @@ export const Tasks = () => {
   const selectedMapped = searchParams.get(MAPPED) ?? undefined;
   const namePattern = searchParams.get(NAME_PATTERN) ?? undefined;
 
+  const { t: translate } = useTranslation(["tasks", "common"]);
+
+  const columns = createColumns({ dagId, translate });
+
   const {
     data,
     error: tasksError,
@@ -92,8 +134,7 @@ export const Tasks = () => {
       <TaskFilters tasksData={data} />
 
       <DataTable
-        cardDef={cardDef(dagId)}
-        columns={[]}
+        columns={columns}
         data={filteredTasks}
         displayMode="card"
         isFetching={isFetching}

airflow-core/src/airflow/ui/src/pages/HITLTaskInstances/HITLTaskInstances.tsx

@@ -37,7 +37,7 @@ import { getTaskInstanceLink } from "src/utils/links";
 
 import { HITLFilters } from "./HITLFilters";
 
-type TaskInstanceRow = { row: { original: HITLDetail } };
+type HITLRow = { row: { original: HITLDetail } };
 
 const {
   BODY_SEARCH,
@@ -65,14 +65,14 @@ const taskInstanceColumns = ({
 }): Array<ColumnDef<HITLDetail>> => [
   {
     accessorKey: "task_instance_state",
-    cell: ({ row: { original } }: TaskInstanceRow) => (
+    cell: ({ row: { original } }: HITLRow) => (
       <StateBadge state={original.task_instance.state}>{getHITLState(translate, original)}</StateBadge>
     ),
     header: translate("requiredActionState"),
   },
   {
     accessorKey: "subject",
-    cell: ({ row: { original } }: TaskInstanceRow) => (
+    cell: ({ row: { original } }: HITLRow) => (
       <Link asChild color="fg.info" fontWeight="bold">
         <RouterLink to={`${getTaskInstanceLink(original.task_instance)}/required_actions`}>
           <TruncatedText text={original.subject} />
@@ -86,7 +86,7 @@ const taskInstanceColumns = ({
     : [
         {
           accessorKey: "task_instance.dag_id",
-          cell: ({ row: { original } }: TaskInstanceRow) => (
+          cell: ({ row: { original } }: HITLRow) => (
             <Link asChild color="fg.info">
               <RouterLink to={`/dags/${original.task_instance.dag_id}`}>
                 <TruncatedText text={original.task_instance.dag_display_name} />
@@ -102,7 +102,7 @@ const taskInstanceColumns = ({
     : [
         {
           accessorKey: "run_id",
-          cell: ({ row: { original } }: TaskInstanceRow) => (
+          cell: ({ row: { original } }: HITLRow) => (
             <Link asChild color="fg.info">
               <RouterLink
                 to={`/dags/${original.task_instance.dag_id}/runs/${original.task_instance.dag_run_id}`}
@@ -119,9 +119,7 @@ const taskInstanceColumns = ({
     : [
         {
           accessorKey: "run_after",
-          cell: ({ row: { original } }: TaskInstanceRow) => (
-            <Time datetime={original.task_instance.run_after} />
-          ),
+          cell: ({ row: { original } }: HITLRow) => <Time datetime={original.task_instance.run_after} />,
           header: translate("common:dagRun.runAfter"),
         },
       ]),
@@ -130,7 +128,7 @@ const taskInstanceColumns = ({
     : [
         {
           accessorKey: "task_display_name",
-          cell: ({ row: { original } }: TaskInstanceRow) => (
+          cell: ({ row: { original } }: HITLRow) => (
             <Link asChild color="fg.info" fontWeight="bold">
               <RouterLink to={`${getTaskInstanceLink(original.task_instance)}/required_actions`}>
                 <TruncatedText text={original.task_instance.task_display_name} />

airflow-core/src/airflow/ui/tests/e2e/pages/DagsPage.ts

@@ -40,10 +40,8 @@ export class DagsPage extends BasePage {
   public readonly triggerButton: Locator;
   public readonly triggerRuleFilter: Locator;
 
-  public get taskCards(): Locator {
-    // CardList component renders a SimpleGrid with data-testid="card-list"
-    // Individual cards are direct children (Box elements)
-    return this.page.locator('[data-testid="card-list"] > div');
+  public get taskRows(): Locator {
+    return this.page.locator('[data-testid="table-list"] > tbody > tr');
   }
 
   public constructor(page: Page) {
@@ -166,7 +164,7 @@ export class DagsPage extends BasePage {
   public async navigateToDagTasks(dagId: string): Promise<void> {
     await this.page.goto(`/dags/${dagId}/tasks`);
     await this.page
-      .locator("h2")
+      .locator("th")
       .filter({ hasText: /^Operator$/ })
       .first()
       .waitFor({ state: "visible", timeout: 30_000 });