hide carrot dropdown for empty response

DagsHub · Jul 24, 2023 · 9896f19 · 9896f19
1 parent 219959a
commit 9896f19
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/src/components/dagshub/data-engine/file-tree/FileList.tsx b/src/components/dagshub/data-engine/file-tree/FileList.tsx
@@ -38,7 +38,11 @@ export const FileList = ({
   }
   if (!children?.length) {
     if (emptyMessage) {
-      return <Box ml={2} p={1}>{emptyMessage}</Box>;
+      return (
+        <Box ml={2} p={1}>
+          {emptyMessage}
+        </Box>
+      );
     }
     // fallback
     return <Box p={1}>This directory is empty</Box>;
@@ -47,7 +51,7 @@ export const FileList = ({
     <Box>
       {children?.map((child: FileListItemType) => (
         <FileTreeItem
-            emptyMessage={emptyMessage}
+          emptyMessage={emptyMessage}
           href={child?.href}
           setSelected={setSelected}
           getFilesCb={getFilesCb}

diff --git a/src/components/dagshub/data-engine/file-tree/FileTreeItem.tsx b/src/components/dagshub/data-engine/file-tree/FileTreeItem.tsx
@@ -31,9 +31,10 @@ export function FileTreeItem({
   setSelected,
   type,
   href,
-  emptyMessage,
+  emptyMessage
 }: FileItemInterface) {
   const [open, setOpen] = useState(false);
+  const [isEmpty, setIsEmpty] = useState(false);
   const [children, setChildren] = useState<FileListItemType[] | null>(null);
   const [loading, setLoading] = useState(false);
   const [cache, setCache] = useState<any>({});
@@ -43,6 +44,9 @@ export function FileTreeItem({
       setLoading(true);
       const res = await getFilesCb(id);
       setChildren(res);
+      if (!res?.length) {
+        setIsEmpty(true);
+      }
       const newCache = { ...cache };
       newCache[id] = res;
       setCache(newCache);
@@ -98,6 +102,7 @@ export function FileTreeItem({
             onClick={openFileHandler}
             disableRipple
             sx={{
+              visibility: isEmpty ? 'hidden' : 'unset',
               transition: '.1s ease-in-out',
               transform: open ? 'rotate(90deg)' : 'unset',
               '&:hover': {
@@ -135,18 +140,20 @@ export function FileTreeItem({
         )}
       </Box>
 
-      <Collapse sx={{ ml: 2 }} in={open}>
-        <Stack>
-          <FileList
+      {!isEmpty && (
+        <Collapse sx={{ ml: 2 }} in={open}>
+          <Stack>
+            <FileList
               emptyMessage={emptyMessage}
-            children={children}
-            loading={loading}
-            setSelected={setSelected}
-            getFilesCb={getFilesCb}
-            selected={selected}
-          />
-        </Stack>
-      </Collapse>
+              children={children}
+              loading={loading}
+              setSelected={setSelected}
+              getFilesCb={getFilesCb}
+              selected={selected}
+            />
+          </Stack>
+        </Collapse>
+      )}
     </Box>
   );
 }