(airflow) branch main updated: Don't display table/card header and pagination when no rows are present. (#45501)

[pierrejeambrun]

This is an automated email from the ASF dual-hosted git repository.

pierrejeambrun 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 db739d91143 Don't display table/card header and pagination when no 
rows are present. (#45501)
db739d91143 is described below

commit db739d911437d2bf62ef321b9f43cd2921194e0b
Author: Karthikeyan Singaravelan <tir.kar...@gmail.com>
AuthorDate: Fri Jan 10 21:11:27 2025 +0530

    Don't display table/card header and pagination when no rows are present. 
(#45501)
    
    * Don't display table/card and pagination when no rows are present.
    
    * Refactor hasRows check to front.
---
 airflow/ui/src/components/DataTable/DataTable.tsx | 41 ++++++++++++-----------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/airflow/ui/src/components/DataTable/DataTable.tsx 
b/airflow/ui/src/components/DataTable/DataTable.tsx
index 3a2086a040e..4f02b57cb8a 100644
--- a/airflow/ui/src/components/DataTable/DataTable.tsx
+++ b/airflow/ui/src/components/DataTable/DataTable.tsx
@@ -115,33 +115,34 @@ export const DataTable = <TData,>({
   const { rows } = table.getRowModel();
 
   const display = displayMode === "card" && Boolean(cardDef) ? "card" : 
"table";
+  const hasRows = rows.length > 0;
 
   return (
     <>
       <ProgressBar size="xs" visibility={Boolean(isFetching) && 
!Boolean(isLoading) ? "visible" : "hidden"} />
       <Toaster />
       {errorMessage}
-      {display === "table" && <TableList table={table} />}
-      {display === "card" && cardDef !== undefined && (
+      {hasRows && display === "table" ? <TableList table={table} /> : 
undefined}
+      {hasRows && display === "card" && cardDef !== undefined ? (
         <CardList cardDef={cardDef} isLoading={isLoading} table={table} />
-      )}
-      {!Boolean(isLoading) && !rows.length && (
-        <Text pt={1}>{noRowsMessage ?? `No ${modelName}s found.`}</Text>
-      )}
-      <Pagination.Root
-        count={table.getRowCount()}
-        my={2}
-        onPageChange={(page) => table.setPageIndex(page.page - 1)}
-        page={table.getState().pagination.pageIndex + 1}
-        pageSize={table.getState().pagination.pageSize}
-        siblingCount={1}
-      >
-        <HStack>
-          <Pagination.PrevTrigger data-testid="prev" />
-          <Pagination.Items />
-          <Pagination.NextTrigger data-testid="next" />
-        </HStack>
-      </Pagination.Root>
+      ) : undefined}
+      {!hasRows && !Boolean(isLoading) && <Text pt={1}>{noRowsMessage ?? `No 
${modelName}s found.`}</Text>}
+      {hasRows ? (
+        <Pagination.Root
+          count={table.getRowCount()}
+          my={2}
+          onPageChange={(page) => table.setPageIndex(page.page - 1)}
+          page={table.getState().pagination.pageIndex + 1}
+          pageSize={table.getState().pagination.pageSize}
+          siblingCount={1}
+        >
+          <HStack>
+            <Pagination.PrevTrigger data-testid="prev" />
+            <Pagination.Items />
+            <Pagination.NextTrigger data-testid="next" />
+          </HStack>
+        </Pagination.Root>
+      ) : undefined}
     </>
   );
 };