Tweaked FileBrowserContentPanel to allow better setting of nesting directory (#9444)

In the studio, we want to let people go to other projects through the file browser,
while in other situations we do not want to let them go above the level they start
at, e.g. projects/<projectName> or /recordings/<recordingID>. Added a new prop to
the panel component to optionally set a nesting directory. Tweaked the breadcrumbs
logic to not show anything higher than the nesting directory.

Author: barankyle

packages/client-core/src/admin/components/Project/ProjectFilesDrawer.tsx

@@ -66,6 +66,7 @@ const ProjectFilesDrawer = ({ open, selectedProject, onClose }: Props) => {
               disableDnD
               selectedFile={selectedProject.name}
               onSelectionChanged={onSelectionChanged}
+              nestingDirectory={selectedProject.name}
             />
           </Box>
           <Box sx={{ flexGrow: 1 }}>

packages/client-core/src/admin/components/Recordings/RecordingsDrawer.tsx

@@ -73,6 +73,7 @@ const RecordingFilesDrawer = ({ open, onClose, selectedRecordingId }: Props) =>
                   selectedFile={selectedRecordingId}
                   onSelectionChanged={onSelectionChanged}
                   folderName="recordings"
+                  nestingDirectory={selectedRecordingId}
                 />
               )}
             </Box>

packages/editor/src/components/assets/FileBrowserContentPanel.tsx

@@ -119,6 +119,7 @@ type FileBrowserContentPanelProps = {
   disableDnD?: boolean
   selectedFile?: string
   folderName?: string
+  nestingDirectory?: string
 }
 
 type DnDFileType = {
@@ -153,7 +154,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
 
   const originalPath = `/${props.folderName || 'projects'}/${props.selectedFile ? props.selectedFile + '/' : ''}`
   const selectedDirectory = useHookstate(originalPath)
-  const nestingDirectory = useHookstate('projects')
+  const nestingDirectory = useHookstate(props.nestingDirectory || 'projects')
   const fileProperties = useHookstate<FileType | null>(null)
   const isLoading = useHookstate(true)
 
@@ -196,10 +197,6 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
     refreshDirectory()
   }, [selectedDirectory, activeScene])
 
-  useEffect(() => {
-    FileBrowserService.getNestingDirectory().then((directory) => nestingDirectory.set(directory))
-  }, [])
-
   const refreshDirectory = async () => {
     await FileBrowserService.fetchFiles(selectedDirectory.value, page)
   }
@@ -359,17 +356,13 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
       }
       changeDirectoryByPath(newPath)
     }
+    let breadcrumbDirectoryFiles = selectedDirectory.value.slice(1, -1).split('/')
 
-    let nestingDirectoryFiles = nestingDirectory.value.split('/')
-    let breadcrumbDirectoryFiles = selectedDirectory.value
-      .slice(1, -1)
-      .split('/')
-      .filter((file, idx) => {
-        if (idx < nestingDirectoryFiles.length && file === nestingDirectoryFiles[idx]) {
-          return false
-        }
-        return true
-      })
+    const nestedIndex = breadcrumbDirectoryFiles.indexOf(nestingDirectory.value)
+
+    breadcrumbDirectoryFiles = breadcrumbDirectoryFiles.filter((file, idx) => {
+      return idx >= nestedIndex
+    })
 
     return (
       <Breadcrumbs