Improve DAGs table UI (apache#42119)

* Rebase and fix filter pagination

* Add pluralize test

.gitignore

@@ -172,6 +172,7 @@ pnpm-debug.log*
 .vscode/*
 !.vscode/extensions.json
 /.vite/
+/.pnpm-store/
 
 # Airflow log files when airflow is run locally
 airflow-*.err

airflow/ui/package.json

@@ -15,12 +15,14 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@tanstack/react-query": "^5.52.1",
     "@tanstack/react-table": "^8.20.1",
     "axios": "^1.7.4",
+    "chakra-react-select": "^4.9.2",
     "framer-motion": "^11.3.29",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

airflow/ui/src/app.tsx

@@ -17,40 +17,16 @@
  * under the License.
  */
 
-import { useState } from "react";
-import { Box, Spinner } from "@chakra-ui/react";
-import { PaginationState } from "@tanstack/react-table";
-
-import { useDagServiceGetDags } from "openapi/queries";
+import { Box } from "@chakra-ui/react";
 import { DagsList } from "src/dagsList";
 import { Nav } from "src/nav";
 
 export const App = () => {
-  // TODO: Change this to be taken from airflow.cfg
-  const pageSize = 50;
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: pageSize,
-  });
-
-  const { data, isLoading } = useDagServiceGetDags({
-    limit: pagination.pageSize,
-    offset: pagination.pageIndex * pagination.pageSize,
-  });
-
   return (
     <div>
       <Nav />
       <Box p={3} ml={24}>
-        {isLoading && <Spinner />}
-        {!isLoading && !!data?.dags && (
-          <DagsList
-            data={data.dags}
-            total={data.total_entries}
-            pagination={pagination}
-            setPagination={setPagination}
-          />
-        )}
+        <DagsList />
       </Box>
     </div>
   );

airflow/ui/src/components/DataTable.tsx → airflow/ui/src/components/DataTable/DataTable.tsx

@@ -17,8 +17,6 @@
  * under the License.
  */
 
-"use client";
-
 import {
   ColumnDef,
   Table as TanStackTable,
@@ -41,6 +39,7 @@ import {
   Th,
   Thead,
   Tr,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import React, { Fragment } from "react";
 
@@ -143,10 +142,12 @@ export function DataTable<TData>({
     },
   });
 
+  const theadBg = useColorModeValue("white", "gray.800");
+
   return (
-    <TableContainer>
-      <ChakraTable variant="striped">
-        <Thead>
+    <TableContainer overflowY="auto" maxH="calc(100vh - 10rem)">
+      <ChakraTable colorScheme="blue">
+        <Thead position="sticky" top={0} bg={theadBg}>
           {table.getHeaderGroups().map((headerGroup) => (
             <Tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {

airflow/ui/src/components/DataTable/index.tsx

@@ -0,0 +1,20 @@
+/*!
+ * 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.
+ */
+
+export * from "./DataTable";