You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by bb...@apache.org on 2024/11/08 00:18:23 UTC
(airflow) branch main updated: Move all scroll logic to page level (#43802)
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 1c38b2a479d Move all scroll logic to page level (#43802)
1c38b2a479d is described below
commit 1c38b2a479d77404f8290ac63b296c4ec3f3d0e0
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Thu Nov 7 19:18:17 2024 -0500
Move all scroll logic to page level (#43802)
---
airflow/ui/dev/index.html | 6 ++--
airflow/ui/index.html | 6 ++--
airflow/ui/src/components/DataTable/CardList.tsx | 38 +++++++++++------------
airflow/ui/src/components/DataTable/TableList.tsx | 7 +----
airflow/ui/src/layouts/BaseLayout.tsx | 6 ++--
airflow/ui/src/pages/DagsList/Dag/Dag.tsx | 6 ++--
airflow/ui/src/pages/DagsList/DagsList.tsx | 31 +++++++++---------
7 files changed, 50 insertions(+), 50 deletions(-)
diff --git a/airflow/ui/dev/index.html b/airflow/ui/dev/index.html
index d8a8b371f3f..27842e5bd60 100644
--- a/airflow/ui/dev/index.html
+++ b/airflow/ui/dev/index.html
@@ -1,6 +1,6 @@
<!-- Entry html file when the Vite dev server is running -->
<!doctype html>
-<html lang="en">
+<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8" />
<link
@@ -20,8 +20,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Airflow 3.0</title>
</head>
- <body>
- <div id="root"></div>
+ <body style="height: 100%">
+ <div id="root" style="height: 100%"></div>
<script type="module" src="http://localhost:5173/src/main.tsx"></script>
</body>
</html>
diff --git a/airflow/ui/index.html b/airflow/ui/index.html
index 28a29c6993e..f888d6fcc34 100644
--- a/airflow/ui/index.html
+++ b/airflow/ui/index.html
@@ -1,13 +1,13 @@
<!doctype html>
-<html lang="en">
+<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/pin_32.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Airflow 3.0</title>
</head>
- <body>
- <div id="root"></div>
+ <body style="height: 100%">
+ <div id="root" style="height: 100%"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
diff --git a/airflow/ui/src/components/DataTable/CardList.tsx b/airflow/ui/src/components/DataTable/CardList.tsx
index f6be5526817..f96b02904da 100644
--- a/airflow/ui/src/components/DataTable/CardList.tsx
+++ b/airflow/ui/src/components/DataTable/CardList.tsx
@@ -32,23 +32,23 @@ export const CardList = <TData,>({
isLoading,
table,
}: DataTableProps<TData>) => (
- <Box data-testid="card-list" overflow="auto" width="100%">
- <SimpleGrid {...{ column: { base: 1 }, gap: 2, ...cardDef.gridProps }}>
- {table.getRowModel().rows.map((row) => (
- <Box key={row.id}>
- {Boolean(isLoading) &&
- (cardDef.meta?.customSkeleton ?? (
- <Skeleton
- data-testid="skeleton"
- display="inline-block"
- height={80}
- width="100%"
- />
- ))}
- {!Boolean(isLoading) &&
- flexRender(cardDef.card, { row: row.original })}
- </Box>
- ))}
- </SimpleGrid>
- </Box>
+ <SimpleGrid
+ data-testid="card-list"
+ {...{ column: { base: 1 }, gap: 2, ...cardDef.gridProps }}
+ >
+ {table.getRowModel().rows.map((row) => (
+ <Box key={row.id}>
+ {Boolean(isLoading) &&
+ (cardDef.meta?.customSkeleton ?? (
+ <Skeleton
+ data-testid="skeleton"
+ display="inline-block"
+ height={80}
+ width="100%"
+ />
+ ))}
+ {!Boolean(isLoading) && flexRender(cardDef.card, { row: row.original })}
+ </Box>
+ ))}
+ </SimpleGrid>
);
diff --git a/airflow/ui/src/components/DataTable/TableList.tsx b/airflow/ui/src/components/DataTable/TableList.tsx
index 3e7a3fffa82..73e543155f2 100644
--- a/airflow/ui/src/components/DataTable/TableList.tsx
+++ b/airflow/ui/src/components/DataTable/TableList.tsx
@@ -40,12 +40,7 @@ export const TableList = <TData,>({
renderSubComponent,
table,
}: DataTableProps<TData>) => (
- <Table.Root
- data-testid="table-list"
- maxH="calc(100vh - 10rem)"
- overflowY="auto"
- striped
- >
+ <Table.Root data-testid="table-list" striped>
<Table.Header bg="chakra-body-bg" position="sticky" top={0} zIndex={1}>
{table.getHeaderGroups().map((headerGroup) => (
<Table.Row key={headerGroup.id}>
diff --git a/airflow/ui/src/layouts/BaseLayout.tsx b/airflow/ui/src/layouts/BaseLayout.tsx
index 848b4ea88f5..12e320a098c 100644
--- a/airflow/ui/src/layouts/BaseLayout.tsx
+++ b/airflow/ui/src/layouts/BaseLayout.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
import type { PropsWithChildren } from "react";
import { Outlet } from "react-router-dom";
@@ -25,8 +25,8 @@ import { Nav } from "./Nav";
export const BaseLayout = ({ children }: PropsWithChildren) => (
<>
<Nav />
- <Box ml={20} p={3}>
+ <Flex flexFlow="column" height="100%" ml={20} p={3}>
{children ?? <Outlet />}
- </Box>
+ </Flex>
</>
);
diff --git a/airflow/ui/src/pages/DagsList/Dag/Dag.tsx b/airflow/ui/src/pages/DagsList/Dag/Dag.tsx
index 90c186eeb3c..82b4320911f 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Dag.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Dag.tsx
@@ -68,7 +68,7 @@ export const Dag = () => {
return (
<>
- <Box bg="bg" position="sticky" top={0} zIndex={1}>
+ <Box>
<Button asChild colorPalette="blue" variant="ghost">
<RouterLink to="/dags">
<FiChevronsLeft />
@@ -96,7 +96,9 @@ export const Dag = () => {
</Tabs.List>
</Tabs.Root>
</Box>
- <Outlet />
+ <Box overflow="auto">
+ <Outlet />
+ </Box>
</>
);
};
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow/ui/src/pages/DagsList/DagsList.tsx
index be212c66a87..d894a9ec7e6 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -24,6 +24,7 @@ import {
Link,
createListCollection,
type SelectValueChangeDetails,
+ Box,
} from "@chakra-ui/react";
import type { ColumnDef } from "@tanstack/react-table";
import { useCallback, useState } from "react";
@@ -248,20 +249,22 @@ export const DagsList = () => {
</HStack>
</VStack>
<ToggleTableDisplay display={display} setDisplay={setDisplay} />
- <DataTable
- cardDef={cardDef}
- columns={columns}
- data={data.dags}
- displayMode={display}
- errorMessage={<ErrorAlert error={error} />}
- initialState={tableURLState}
- isFetching={isFetching}
- isLoading={isLoading}
- modelName="Dag"
- onStateChange={setTableURLState}
- skeletonCount={display === "card" ? 5 : undefined}
- total={data.total_entries}
- />
+ <Box overflow="auto">
+ <DataTable
+ cardDef={cardDef}
+ columns={columns}
+ data={data.dags}
+ displayMode={display}
+ errorMessage={<ErrorAlert error={error} />}
+ initialState={tableURLState}
+ isFetching={isFetching}
+ isLoading={isLoading}
+ modelName="Dag"
+ onStateChange={setTableURLState}
+ skeletonCount={display === "card" ? 5 : undefined}
+ total={data.total_entries}
+ />
+ </Box>
</>
);
};