Be able to drag brim folder (#2178)

The brim folder itself should be allowed to live anywhere the user wants in the tree. Also make the filters and the plus button always visible
brimdata · Feb 16, 2022 · fdeee4a · fdeee4a
1 parent a535369
commit fdeee4a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/src/js/components/LeftPane/QueriesSection.tsx b/src/js/components/LeftPane/QueriesSection.tsx
@@ -11,10 +11,9 @@ import TreeModel from "tree-model"
 import useResizeObserver from "use-resize-observer"
 import DropdownArrow from "../../icons/DropdownArrow"
 import MagnifyingGlass from "../../icons/MagnifyingGlass"
-import Current from "../../state/Current"
 import Modal from "../../state/Modal"
 import Queries from "../../state/Queries"
-import {isBrimLib} from "../../state/Queries/flows"
+import {isChildOf} from "../../state/Queries/flows"
 import {Group, Query} from "../../state/Queries/types"
 import EmptySection from "../common/EmptySection"
 import useCallbackRef from "../hooks/useCallbackRef"
@@ -166,7 +165,6 @@ function QueriesSection({isOpen, style, resizeProps, toggleProps}) {
   const tree = useRef()
   const dispatch = useDispatch<AppDispatch>()
   const [selectedTag, setSelectedTag] = useState("All Local")
-  const currentPool = useSelector(Current.getPool)
   const queriesRoot = useSelector(Queries.raw)
   const remoteQueries = useSelector(RemoteQueries.raw)
   const [queries, setQueries] = useState<Group>(queriesRoot)
@@ -226,7 +224,7 @@ function QueriesSection({isOpen, style, resizeProps, toggleProps}) {
     // no reordering while a filter is on
     if (selectedTag !== "All Local") return
     // no reordering if any one item is part of shipped brim lib
-    if (dispatch(isBrimLib([...dragIds, parentId]))) return
+    if (dispatch(isChildOf("brim", [...dragIds, parentId]))) return
     dispatch(Queries.moveItems(dragIds, parentId, index))
   }
 
@@ -259,7 +257,7 @@ function QueriesSection({isOpen, style, resizeProps, toggleProps}) {
         data={queries}
         getChildren="items"
         isOpen="isOpen"
-        disableDrag={(d) => !!dispatch(isBrimLib([d.id]))}
+        disableDrag={(d) => !!dispatch(isChildOf("brim", [d.id]))}
         disableDrop={(d) => d.id === "brim"}
         rowHeight={24}
         width={width}
@@ -284,19 +282,15 @@ function QueriesSection({isOpen, style, resizeProps, toggleProps}) {
           <StyledArrow show={isOpen} />
           <Title>Queries</Title>
         </ClickRegion>
-        {currentPool && (
-          <>
-            <TagsViewSelect
-              selected={selectedTag}
-              tags={["Remote", "separator", "All Local", ...tags]}
-              onSelect={onTagSelect}
-            />
-            <NewActionsDropdown
-              tree={tree.current}
-              isRemote={selectedTag === "Remote"}
-            />
-          </>
-        )}
+        <TagsViewSelect
+          selected={selectedTag}
+          tags={["Remote", "separator", "All Local", ...tags]}
+          onSelect={onTagSelect}
+        />
+        <NewActionsDropdown
+          tree={tree.current}
+          isRemote={selectedTag === "Remote"}
+        />
       </SectionHeader>
       <SectionContents
         ref={(r) => {

diff --git a/src/js/state/Queries/flows.ts b/src/js/state/Queries/flows.ts
@@ -8,3 +8,8 @@ export const isBrimLib = (ids: string[]) => (_, getState) => {
   ]
   return intersection(ids, brimIds).length > 0
 }
+
+export const isChildOf = (id: string, ids: string[]) => (_, getState) => {
+  const check = getGroupById(id)(getState())?.items.map((i) => i.id)
+  return intersection(ids, check).length > 0
+}