Implement folder specific search for datasets

frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx

@@ -751,7 +751,7 @@ function BreadcrumbsTag({ parts: allParts }: { parts: string[] | null }) {
   }
 
   return (
-    <Tooltip title={`This folder is located in ${formatPath(allParts)}.`}>
+    <Tooltip title={`This dataset is located in ${formatPath(allParts)}.`}>
       <Tag>
         <FolderOpenOutlined />
         {formatPath(parts)}

frontend/javascripts/dashboard/dataset/dataset_collection_context.tsx

@@ -16,6 +16,7 @@ import {
   useFolderQuery,
 } from "./queries";
 import { useIsMutating } from "@tanstack/react-query";
+import { usePrevious } from "libs/react_hooks";
 
 type Options = {
   datasetFilteringMode?: DatasetFilteringMode;
@@ -34,12 +35,11 @@ export type DatasetCollectionContextValue = {
   ) => Promise<void>;
   updateCachedDataset: (dataset: APIDataset) => Promise<void>;
   activeFolderId: string | null;
-  setActiveFolderId: (id: string) => void;
+  setActiveFolderId: (id: string | null) => void;
+  mostRecentlyUsedActiveFolderId: string | null;
   supportsFolders: true;
   globalSearchQuery: string | null;
   setGlobalSearchQuery: (val: string | null) => void;
-  folderIdForSearch: string | null;
-  setFolderIdForSearch: (val: string | null) => void;
   searchRecursively: boolean;
   setSearchRecursively: (val: boolean) => void;
   getBreadcrumbs: (dataset: APIMaybeUnimportedDataset) => string[] | null;
@@ -78,39 +78,29 @@ export default function DatasetCollectionContextProvider({
   const [activeFolderId, setActiveFolderId] = useState<string | null>(
     UserLocalStorage.getItem(ACTIVE_FOLDER_ID_STORAGE_KEY) || null,
   );
+  const mostRecentlyUsedActiveFolderId = usePrevious(activeFolderId, true);
   const [isChecking, setIsChecking] = useState(false);
   const isMutating = useIsMutating() > 0;
   const { data: folder } = useFolderQuery(activeFolderId);
 
   const [globalSearchQuery, setGlobalSearchQueryInner] = useState<string | null>(null);
-  const [folderIdForSearch, setFolderIdForSearch] = useState<string | null>(null);
   const setGlobalSearchQuery = useCallback(
     (value: string | null) => {
       // Empty string should be handled as null
       setGlobalSearchQueryInner(value ? value : null);
-      if (value) {
-        setActiveFolderId(null);
-      }
     },
-    [setGlobalSearchQueryInner, setActiveFolderId],
+    [setGlobalSearchQueryInner],
   );
   const [searchRecursively, setSearchRecursively] = useState<boolean>(true);
 
-  // Clear search query if active folder changes.
-  useEffect(() => {
-    if (activeFolderId != null) {
-      setGlobalSearchQuery(null);
-    }
-  }, [activeFolderId]);
-
   // Keep url GET parameters in sync with search and active folder
   useManagedUrlParams(
     setGlobalSearchQuery,
     setActiveFolderId,
     globalSearchQuery,
     activeFolderId,
-    folderIdForSearch,
-    setFolderIdForSearch,
+    searchRecursively,
+    setSearchRecursively,
   );
 
   useEffect(() => {
@@ -124,17 +114,21 @@ export default function DatasetCollectionContextProvider({
   }, [folder, activeFolderId]);
 
   const folderHierarchyQuery = useFolderHierarchyQuery();
-  const datasetsInFolderQuery = useDatasetsInFolderQuery(activeFolderId);
+  const datasetsInFolderQuery = useDatasetsInFolderQuery(
+    globalSearchQuery == null ? activeFolderId : null,
+  );
   const datasetSearchQuery = useDatasetSearchQuery(
     globalSearchQuery,
-    folderIdForSearch,
+    activeFolderId,
     searchRecursively,
   );
   const createFolderMutation = useCreateFolderMutation();
   const deleteFolderMutation = useDeleteFolderMutation();
   const updateFolderMutation = useUpdateFolderMutation();
   const moveFolderMutation = useMoveFolderMutation();
-  const updateDatasetMutation = useUpdateDatasetMutation(activeFolderId);
+  const updateDatasetMutation = useUpdateDatasetMutation(
+    globalSearchQuery == null ? activeFolderId : null,
+  );
   const datasets = (globalSearchQuery ? datasetSearchQuery.data : datasetsInFolderQuery.data) || [];
 
   async function fetchDatasets(_options: Options = {}): Promise<void> {
@@ -185,6 +179,7 @@ export default function DatasetCollectionContextProvider({
       updateCachedDataset,
       activeFolderId,
       setActiveFolderId,
+      mostRecentlyUsedActiveFolderId,
       isChecking,
       getBreadcrumbs,
       checkDatasets: async () => {
@@ -210,8 +205,6 @@ export default function DatasetCollectionContextProvider({
       },
       globalSearchQuery,
       setGlobalSearchQuery,
-      folderIdForSearch,
-      setFolderIdForSearch,
       searchRecursively,
       setSearchRecursively,
       queries: {
@@ -234,6 +227,7 @@ export default function DatasetCollectionContextProvider({
       updateCachedDataset,
       activeFolderId,
       setActiveFolderId,
+      mostRecentlyUsedActiveFolderId,
       folderHierarchyQuery,
       datasetsInFolderQuery,
       datasetSearchQuery,
@@ -245,8 +239,6 @@ export default function DatasetCollectionContextProvider({
       moveFolderMutation,
       updateDatasetMutation,
       globalSearchQuery,
-      folderIdForSearch,
-      setFolderIdForSearch,
     ],
   );
 
@@ -260,8 +252,8 @@ function useManagedUrlParams(
   setActiveFolderId: React.Dispatch<React.SetStateAction<string | null>>,
   globalSearchQuery: string | null,
   activeFolderId: string | null,
-  folderIdForSearch: string | null,
-  setFolderIdForSearch: React.Dispatch<React.SetStateAction<string | null>>,
+  searchRecursively: boolean,
+  setSearchRecursively: (val: boolean) => void,
 ) {
   const { data: folder } = useFolderQuery(activeFolderId);
 
@@ -274,8 +266,10 @@ function useManagedUrlParams(
     }
     const folderId = params.get("folderId");
     if (folderId) {
-      setFolderIdForSearch(folderId);
+      setActiveFolderId(folderId);
     }
+    const recursive = params.get("recursive");
+    setSearchRecursively(!!recursive);
 
     const folderSpecifier = _.last(location.pathname.split("/"));
 
@@ -288,33 +282,11 @@ function useManagedUrlParams(
     }
   }, []);
 
-  // Update query and folderIdForSearch
-  useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    if (globalSearchQuery) {
-      params.set("query", globalSearchQuery);
-    } else {
-      params.delete("query");
-    }
-    if (globalSearchQuery && folderIdForSearch) {
-      params.set("folderId", folderIdForSearch);
-    } else {
-      params.delete("folderId");
-    }
-    const paramStr = params.toString();
-
-    // Don't use useHistory because this would lose the input search
-    // focus.
-    window.history.replaceState(
-      {},
-      "",
-      `${location.pathname}${paramStr === "" ? "" : "?"}${paramStr}`,
-    );
-  }, [globalSearchQuery, folderIdForSearch]);
+  // Update query and searchRecursively
 
   // Update folderId
   useEffect(() => {
-    if (activeFolderId) {
+    if (!globalSearchQuery && activeFolderId) {
       let folderName = folder?.name || "";
       // The replacement of / and space is only done to make the URL
       // nicer to read for a human.
@@ -332,7 +304,33 @@ function useManagedUrlParams(
         `/dashboard/datasets/${folderName}${folderName ? "-" : ""}${activeFolderId}`,
       );
     } else {
-      window.history.replaceState({}, "", "/dashboard/datasets");
+      const params = new URLSearchParams(location.search);
+      if (globalSearchQuery) {
+        params.set("query", globalSearchQuery);
+      } else {
+        params.delete("query");
+      }
+      if (globalSearchQuery && activeFolderId) {
+        params.set("folderId", activeFolderId);
+        // The recursive property is only relevant when a folderId is specified.
+        if (searchRecursively) {
+          params.set("recursive", "true");
+        } else {
+          params.delete("recursive");
+        }
+      } else {
+        params.delete("folderId");
+        params.delete("recursive");
+      }
+      const paramStr = params.toString();
+
+      // Don't use useHistory because this would lose the input search
+      // focus.
+      window.history.replaceState(
+        {},
+        "",
+        `/dashboard/datasets${paramStr === "" ? "" : "?"}${paramStr}`,
+      );
     }
-  }, [activeFolderId, folder]);
+  }, [globalSearchQuery, activeFolderId, folder, searchRecursively]);
 }

frontend/javascripts/dashboard/dataset/queries.tsx

@@ -399,7 +399,14 @@ export function useUpdateDatasetMutation(folderId: string | null) {
                 // has finished, the page will be complete).
                 return undefined;
               }
-              return oldItems.concat([updatedDataset]);
+              return (
+                oldItems
+                  // The dataset shouldn't be in oldItems, but if it should be
+                  // for some reason (e.g., a bug), we filter it away to avoid
+                  // duplicates.
+                  .filter((el) => el.name !== updatedDataset.name)
+                  .concat([updatedDataset])
+              );
             },
           );
         }

frontend/javascripts/dashboard/dataset_folder_view.tsx

@@ -124,10 +124,15 @@ function DetailsSidebar({
     if (selectedDataset == null || !("folderId" in selectedDataset)) {
       return;
     }
-    if (selectedDataset.folderId !== context.activeFolderId && context.activeFolderId != null) {
+    if (
+      selectedDataset.folderId !== context.activeFolderId &&
+      context.activeFolderId != null &&
+      context.globalSearchQuery == null
+    ) {
       // Ensure that the selected dataset is in the active folder. If not,
-      // clear the sidebar. When there is no active folder, a search page is shown. In that case,
-      // clearing the selection should not happen.
+      // clear the sidebar. Don't do this when search results are shown (since
+      // these can cover multiple folders).
+      // Typically, this is triggered when navigating to another folder.
       setSelectedDataset(null);
     }
   }, [selectedDataset, context.activeFolderId]);

frontend/javascripts/dashboard/dataset_view.tsx

@@ -12,11 +12,7 @@ import {
   Spin,
   Tooltip,
   Alert,
-  MenuProps,
-  TreeSelect,
-  Switch,
-  Checkbox,
-  Divider,
+  Select,
 } from "antd";
 import {
   CloudUploadOutlined,
@@ -49,7 +45,7 @@ import { ActiveTabContext, RenderingTabContext } from "./dashboard_contexts";
 import { DatasetCollectionContextValue } from "./dataset/dataset_collection_context";
 import { MINIMUM_SEARCH_QUERY_LENGTH, SEARCH_RESULTS_LIMIT } from "./dataset/queries";
 
-const { Search, Group: InputGroup } = Input;
+const { Group: InputGroup } = Input;
 
 type Props = {
   user: APIUser;
@@ -88,7 +84,7 @@ function filterDatasetsForUsersOrganization(datasets: APIMaybeUnimportedDataset[
 const refreshMenuItems = [
   {
     key: "1",
-    label: "Refresh from disk",
+    label: "Scan disk for new datasets",
   },
 ];
 
@@ -218,7 +214,9 @@ function DatasetView(props: Props) {
     />
   );
   const searchBox = (
-    <Search
+    <Input
+      prefix={<SearchOutlined />}
+      allowClear
       style={{
         width: 200,
       }}
@@ -320,6 +318,12 @@ function DatasetView(props: Props) {
   );
 }
 
+const SEARCH_OPTIONS = [
+  { label: "Search everywhere", value: "everywhere" },
+  { label: "Search current folder", value: "folder" },
+  { label: "Search current folder and its subfolders", value: "folder-with-subfolders" },
+];
+
 function GlobalSearchHeader({
   searchQuery,
   filteredDatasets,
@@ -333,11 +337,7 @@ function GlobalSearchHeader({
 }) {
   const { data: folderHierarchy } = context.queries.folderHierarchyQuery;
   const [treeData, setTreeData] = useState<FolderItem[]>([]);
-  const { folderIdForSearch, setFolderIdForSearch } = context;
-
-  const onChange = (newValue: string) => {
-    setFolderIdForSearch(newValue);
-  };
+  const { activeFolderId, setActiveFolderId } = context;
 
   useEffect(() => {
     const newTreeData = folderHierarchy?.tree || [];
@@ -352,40 +352,33 @@ function GlobalSearchHeader({
       <p>Enter at least {MINIMUM_SEARCH_QUERY_LENGTH} characters to search</p>
     ) : null;
   }
+
   return (
     <>
       <div style={{ float: "right" }}>
-        <Tooltip title="When selecting a folder, only that folder will be searched (not its child folders)">
-          <span style={{ marginRight: 4 }}>Where to search:</span>
-        </Tooltip>
-        <TreeSelect
-          size="small"
-          showSearch
-          style={{ width: 150 }}
-          value={folderIdForSearch || undefined}
-          dropdownStyle={{ maxHeight: 500, overflow: "auto" }}
-          placeholder="Everywhere"
-          allowClear
+        <Select
+          options={SEARCH_OPTIONS}
           dropdownMatchSelectWidth={false}
-          treeDefaultExpandAll
-          onChange={onChange}
-          treeData={treeData}
-          fieldNames={{ label: "title", value: "key", children: "children" }}
-          treeNodeLabelProp="title"
-          dropdownRender={(node) => (
-            <div>
-              <div style={{ marginLeft: 4 }}>
-                <Checkbox
-                  checked={context.searchRecursively}
-                  onChange={() => context.setSearchRecursively(!context.searchRecursively)}
-                >
-                  Also search subfolders
-                </Checkbox>
-              </div>
-              <Divider style={{ margin: "6px 0" }} />
-              {node}
-            </div>
-          )}
+          onChange={(value) => {
+            if (value === "everywhere") {
+              setActiveFolderId(null);
+            } else {
+              if (
+                activeFolderId == null &&
+                (context.mostRecentlyUsedActiveFolderId != null || treeData.length > 0)
+              ) {
+                setActiveFolderId(context.mostRecentlyUsedActiveFolderId || treeData[0].key);
+              }
+              context.setSearchRecursively(value === "folder-with-subfolders");
+            }
+          }}
+          value={
+            activeFolderId == null
+              ? "everywhere"
+              : context.searchRecursively
+              ? "folder-with-subfolders"
+              : "folder"
+          }
         />
       </div>
       <h3>