pierrejeambrun commented on code in PR #68544:
URL: https://github.com/apache/airflow/pull/68544#discussion_r3795499792
##########
airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx:
##########
@@ -379,24 +420,39 @@ export const DagsList = () => {
</HStack>
</HStack>
</VStack>
- <Box pb={8}>
- <DataTable
- cardDef={cardDef}
- columns={columns}
- data={data?.dags ?? []}
- displayMode={display}
- errorMessage={<ErrorAlert error={error} />}
- initialState={tableURLState}
- isLoading={isLoading}
- modelName="common:dag"
- onDisplayToggleChange={setDisplay}
- onStateChange={setTableURLState}
- showDisplayToggle
- showRowCountHeading={false}
- skeletonCount={display === "card" ? 5 : undefined}
- total={totalEntries}
- />
- </Box>
+ <Flex align="flex-start" gap={4} pb={8}>
+ {/* Only show the folder sidebar when there is something to navigate;
deployments with all
+ Dags at the bundle root would otherwise get an empty panel. */}
+ {showFolderTree ? (
+ <Box flexShrink={0} maxWidth="280px" overflowY="auto"
position="sticky" top={0}>
+ <DagFolderTree
+ folders={folders}
+ isLoading={foldersLoading}
+ onSelectFolder={handleFolderChange}
+ selectedBundle={selectedBundle}
+ selectedFolder={selectedFolder}
+ />
+ </Box>
Review Comment:
Can you add a controler there (button switching to visible on/off) so we can
actually hide / display this Tree?
If we want to retrieve a full width table to see multiple columns, it's
better if we can visually hide the Tree.
##########
airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx:
##########
@@ -261,6 +273,14 @@ export const DagsList = () => {
const owners = searchParams.getAll(OWNERS);
const teams = searchParams.getAll(TEAMS);
const timetableType = searchParams.getAll(TIMETABLE_TYPE).filter((value) =>
value !== "");
+ const selectedFolder = searchParams.get(DAG_FOLDER) ?? undefined;
+ const selectedBundle = searchParams.get(DAG_BUNDLE) ?? undefined;
+
+ const { folders, isLoading: foldersLoading } = useDagFolders();
+ // Keep the panel out of the way for flat deployments (all Dags at the
bundle root). Still show it
+ // while loading, or when a folder/bundle is selected so the user can always
navigate back to "All Dags".
+ const showFolderTree =
+ foldersLoading || folders.length > 0 || Boolean(selectedFolder) ||
Boolean(selectedBundle);
Review Comment:
When linking to a filtered tree such as:
`http://localhost:28080/dags?dag_folder=subfolder1%2Fnested1%2Fnested2&dag_bundle=dags-folder`
The Tree stay collapsed, can we fix it so the tree appears expanded to the
relevant folder.
test masks it by passing folders synchronously
##########
airflow-core/src/airflow/ui/src/pages/DagsList/DagFolderTree/DagFolderTree.tsx:
##########
Review Comment:
For long names, the highlighting is truncated like this, can we fix it:
<img width="407" height="280" alt="Image"
src="https://github.com/user-attachments/assets/ec22a64d-4ae0-4baa-9081-48f1ea0a6bab";
/>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
