feat(webui): Use DirectoryTree for file path selection (closes #1779).

components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/DirectoryTreePopup.tsx

@@ -0,0 +1,97 @@
+import React, {
+    useCallback,
+    useEffect,
+    useState,
+} from "react";
+
+import {Tree} from "antd";
+import type {TreeDataNode} from "antd/es";
+import type {TreeProps} from "antd/es/tree";
+
+import styles from "./index.module.css";
+import {getListHeight} from "./utils";
+
+
+const {DirectoryTree} = Tree;
+
+
+interface DirectoryTreePopupProps {
+    checkedKeys: string[];
+    expandedKeys: string[];
+    treeData: TreeDataNode[];
+    onCheck: (keys: string[]) => void;
+    onExpand: (keys: string[]) => void;
+    onLoadData: (path: string) => Promise<void>;
+}
+
+/**
+ * Renders a popup component containing a DirectoryTree for path selection.
+ *
+ * @param props
+ * @param props.checkedKeys
+ * @param props.expandedKeys
+ * @param props.treeData
+ * @param props.onCheck
+ * @param props.onExpand
+ * @param props.onLoadData
+ * @return
+ */
+const DirectoryTreePopup = ({
+    checkedKeys,
+    expandedKeys,
+    treeData,
+    onCheck,
+    onExpand,
+    onLoadData,
+}: DirectoryTreePopupProps) => {
+    const [height, setHeight] = useState<number>(getListHeight);
+
+    const handleCheck: TreeProps["onCheck"] = useCallback((
+        checked: React.Key[] | {checked: React.Key[]; halfChecked: React.Key[]}
+    ) => {
+        const keys = Array.isArray(checked) ?
+            checked :
+            checked.checked;
+
+        onCheck(keys as string[]);
+    }, [onCheck]);
+
+    const handleExpand = useCallback((keys: React.Key[]) => {
+        onExpand(keys as string[]);
+    }, [onExpand]);
+
+    const handleLoadData = useCallback(async (node: TreeDataNode) => {
+        await onLoadData(node.key as string);
+    }, [onLoadData]);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setHeight(getListHeight());
+        };
+
+        window.addEventListener("resize", handleResize);
+
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+
+    return (
+        <div
+            className={styles["directoryTreePopup"]}
+            style={{height: height, overflow: "auto"}}
+        >
+            <DirectoryTree
+                checkable={true}
+                checkedKeys={checkedKeys}
+                expandedKeys={expandedKeys}
+                loadData={handleLoadData}
+                treeData={treeData}
+                onCheck={handleCheck}
+                onExpand={handleExpand}/>
+        </div>
+    );
+};
+
+
+export default DirectoryTreePopup;

components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/DirectoryTreeSelect.tsx

@@ -0,0 +1,107 @@
+import {
+    useCallback,
+    useMemo,
+} from "react";
+
+import {Select} from "antd";
+import type {TreeDataNode} from "antd/es";
+
+import DirectoryTreePopup from "./DirectoryTreePopup";
+import {TreeNode} from "./typings";
+import {
+    filterToParents,
+    flatToHierarchy,
+    removeWithDescendants,
+} from "./utils";
+
+
+interface DirectoryTreeSelectProps {
+    checkedKeys: string[];
+    expandedKeys: string[];
+    treeData: TreeNode[];
+    onCheck: (keys: string[]) => void;
+    onExpand: (keys: string[]) => void;
+    onLoadData: (path: string) => Promise<void>;
+}
+
+/**
+ * Renders a select component that uses DirectoryTree for the dropdown. Provides folder/file
+ * icons and intuitive directory navigation.
+ *
+ * @param props
+ * @param props.checkedKeys
+ * @param props.expandedKeys
+ * @param props.treeData
+ * @param props.onCheck
+ * @param props.onExpand
+ * @param props.onLoadData
+ * @return
+ */
+const DirectoryTreeSelect = ({
+    checkedKeys,
+    expandedKeys,
+    treeData,
+    onCheck,
+    onExpand,
+    onLoadData,
+}: DirectoryTreeSelectProps) => {
+    const hierarchicalTreeData: TreeDataNode[] = useMemo(
+        () => flatToHierarchy(treeData),
+        [treeData]
+    );
+    const selectOptions = useMemo(
+        () => treeData.map((node) => ({label: node.value, value: node.value})),
+        [treeData]
+    );
+    const displayValue = useMemo(
+        () => filterToParents(treeData, checkedKeys),
+        [
+            checkedKeys,
+            treeData,
+        ]
+    );
+
+    const handleClear = useCallback(() => {
+        onCheck([]);
+    }, [onCheck]);
+
+    const handleDeselect = useCallback((value: string) => {
+        onCheck(removeWithDescendants(treeData, checkedKeys, value));
+    }, [
+        checkedKeys,
+        onCheck,
+        treeData,
+    ]);
+
+    const renderDropdown = useCallback(() => (
+        <DirectoryTreePopup
+            checkedKeys={checkedKeys}
+            expandedKeys={expandedKeys}
+            treeData={hierarchicalTreeData}
+            onCheck={onCheck}
+            onExpand={onExpand}
+            onLoadData={onLoadData}/>
+    ), [
+        checkedKeys,
+        expandedKeys,
+        hierarchicalTreeData,
+        onCheck,
+        onExpand,
+        onLoadData,
+    ]);
+
+    return (
+        <Select
+            allowClear={true}
+            mode={"multiple"}
+            options={selectOptions}
+            placeholder={"Select paths to compress"}
+            popupRender={renderDropdown}
+            value={displayValue}
+            onClear={handleClear}
+            onDeselect={handleDeselect}/>
+    );
+};
+
+
+export default DirectoryTreeSelect;

components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/index.module.css

@@ -0,0 +1,3 @@
+.directoryTreePopup {
+    padding: 4px;
+}

components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/index.tsx

@@ -6,53 +6,34 @@ import {
 } from "react";
 
 import {FileEntry} from "@webui/common/schemas/os";
-import {
-    Form,
-    message,
-    TreeSelect,
-    TreeSelectProps,
-} from "antd";
+import {Form} from "antd";
 
 import {listFiles} from "../../../../api/os";
-import SwitcherIcon from "./SwitcherIcon";
+import DirectoryTreeSelect from "./DirectoryTreeSelect";
 import {
     ROOT_NODE,
     ROOT_PATH,
     TreeNode,
 } from "./typings";
 import {
     addServerPrefix,
-    getListHeight,
+    handleLoadError,
     toTreeNode,
 } from "./utils";
 
 
-type LoadDataNode = Parameters<NonNullable<TreeSelectProps["loadData"]>>[0];
-
-type TreeExpandKeys = Parameters<NonNullable<TreeSelectProps["onTreeExpand"]>>[0];
-
 /**
  * Form item with TreeSelect for selecting file paths for compression.
- * Supports lazy loading and search with auto-expand.
+ * Uses DirectoryTree for intuitive folder/file navigation.
  *
  * @return
+ * @see https://ant.design/components/tree#tree-demo-directory
  */
 const PathsSelectFormItem = () => {
+    const form = Form.useFormInstance();
     const [treeData, setTreeData] = useState<TreeNode[]>([ROOT_NODE]);
     const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
-    const [listHeight, setListHeight] = useState<number>(getListHeight);
-
-    useEffect(() => {
-        const handleResize = () => {
-            setListHeight(getListHeight());
-        };
-
-        window.addEventListener("resize", handleResize);
-
-        return () => {
-            window.removeEventListener("resize", handleResize);
-        };
-    }, []);
+    const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
 
     // Use a ref, instead of a state passed to AntD's `treeLoadedKeys`, to dedupe load requests.
     const loadedPathsRef = useRef(new Set<string>());
@@ -85,61 +66,41 @@ const PathsSelectFormItem = () => {
         }
     }, [addNodes]);
 
+    const handleCheck = useCallback((keys: string[]) => {
+        setCheckedKeys(keys);
+        form.setFieldValue("paths", keys);
+    }, [form]);
+
+    const handleExpand = useCallback((keys: string[]) => {
+        setExpandedKeys(keys);
+    }, []);
+
+    const handleLoadData = useCallback(async (path: string) => {
+        await loadPath(path).catch(handleLoadError);
+    }, [loadPath]);
+
     // On initialization, load root directory contents.
     useEffect(() => {
         loadPath(ROOT_PATH)
             .then(() => {
                 setExpandedKeys([ROOT_PATH]);
             })
-            .catch((e: unknown) => {
-                console.error("Failed to load root directory:", e);
-                message.error(e instanceof Error ?
-                    e.message :
-                    "Failed to load root directory");
-            });
+            .catch(handleLoadError);
     }, [loadPath]);
 
-    const handleLoadData = useCallback(async ({value}: LoadDataNode) => {
-        if ("string" !== typeof value) {
-            return;
-        }
-        try {
-            await loadPath(value);
-        } catch (e) {
-            console.error("Failed to load directory:", e);
-            message.error(e instanceof Error ?
-                e.message :
-                "Unknown error while loading paths");
-        }
-    }, [loadPath]);
-
-    const handleTreeExpand = useCallback((keys: TreeExpandKeys) => {
-        setExpandedKeys(keys as string[]);
-    }, []);
-
     return (
         <Form.Item
             label={"Paths"}
             name={"paths"}
             rules={[{required: true, message: "Please select at least one path"}]}
         >
-            <TreeSelect
-                allowClear={true}
-                listHeight={listHeight}
-                loadData={handleLoadData}
-                multiple={true}
-                placeholder={"Select paths to compress"}
-                showCheckedStrategy={TreeSelect.SHOW_PARENT}
-                showSearch={false}
-                switcherIcon={SwitcherIcon}
-
-                treeCheckable={true}
+            <DirectoryTreeSelect
+                checkedKeys={checkedKeys}
+                expandedKeys={expandedKeys}
                 treeData={treeData}
-                treeDataSimpleMode={true}
-                treeExpandedKeys={expandedKeys}
-                treeLine={true}
-                treeNodeLabelProp={"value"}
-                onTreeExpand={handleTreeExpand}/>
+                onCheck={handleCheck}
+                onExpand={handleExpand}
+                onLoadData={handleLoadData}/>
         </Form.Item>
     );
 };