refactor file browser into editor package

packages/client-core/i18n/en/editor.json

@@ -1196,7 +1196,7 @@
       "placeObjectAtOrigin": "Place Object at Origin"
     },
     "filebrowser": {
-      "tab-name": "Project Files",
+      "tab-name": "Files",
       "addNewFolder": "Add New Folder",
       "cutAsset": "Cut",
       "copyAsset": "Copy",

packages/editor/src/components/EditorContainer.tsx

@@ -27,7 +27,6 @@ import { PopoverState } from '@etherealengine/client-core/src/common/services/Po
 import { staticResourcePath } from '@etherealengine/common/src/schema.type.module'
 import { NO_PROXY, getMutableState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
 import { AssetsPanelTab } from '@etherealengine/ui/src/components/editor/panels/Assets'
-import { FilesPanelTab } from '@etherealengine/ui/src/components/editor/panels/Files'
 import { HierarchyPanelTab } from '@etherealengine/ui/src/components/editor/panels/Hierarchy'
 import { MaterialsPanelTab } from '@etherealengine/ui/src/components/editor/panels/Materials'
 import { PropertiesPanelTab } from '@etherealengine/ui/src/components/editor/panels/Properties'
@@ -60,6 +59,7 @@ import 'rc-dock/dist/rc-dock.css'
 import { useTranslation } from 'react-i18next'
 import { IoHelpCircleOutline } from 'react-icons/io5'
 import { setCurrentEditorScene } from '../functions/sceneFunctions'
+import { FilesPanelTab } from '../panels/files'
 import './EditorContainer.css'
 
 export const DockContainer = ({ children, id = 'editor-dock', dividerAlpha = 0 }) => {

packages/ui/src/components/editor/panels/Files/download/projectDownload.tsx → packages/editor/src/panels/files/download.tsx

@@ -30,9 +30,9 @@ import { bytesToSize } from '@etherealengine/common/src/utils/btyesToSize'
 import { Engine } from '@etherealengine/ecs'
 import { downloadBlobAsZip } from '@etherealengine/editor/src/functions/assetFunctions'
 import { defineState, getMutableState, useMutableState } from '@etherealengine/hyperflux'
+import Progress from '@etherealengine/ui/src/primitives/tailwind/Progress'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import Progress from '../../../../../primitives/tailwind/Progress'
 
 const DownloadProjectState = defineState({
   name: 'DownloadProjectState',
@@ -55,11 +55,11 @@ export const handleDownloadProject = async (projectName: string, selectedDirecto
 
   const downloadState = getMutableState(DownloadProjectState)
 
-  downloadState.isDownloading.set(true) // Start Download
+  downloadState.isDownloading.set(true)
 
   const response = await fetch(`${config.client.fileServer}/${data}`)
   const totalBytes = parseInt(response.headers.get('Content-Length') || '0', 10)
-  downloadState.total.set(totalBytes) // Set the total bytes
+  downloadState.total.set(totalBytes)
 
   const reader = response.body?.getReader()
   const chunks: Uint8Array[] = []
@@ -74,7 +74,7 @@ export const handleDownloadProject = async (projectName: string, selectedDirecto
   }
 
   const blob = new Blob(chunks)
-  downloadState.isDownloading.set(false) // Mark as completed
+  downloadState.isDownloading.set(false)
   downloadState.progress.set(0)
   downloadState.total.set(0)
 

packages/editor/src/panels/files/filebrowser.tsx

@@ -0,0 +1,79 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { projectPath } from '@etherealengine/common/src/schema.type.module'
+import { Engine } from '@etherealengine/ecs'
+import { useMutableState } from '@etherealengine/hyperflux'
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { EditorState } from '../../services/EditorServices'
+import { FilesQueryProvider, FilesState } from '../../services/FilesState'
+import FilesToolbar from './toolbar'
+
+const getValidProjectForFileBrowser = async (path: string) => {
+  const [orgName, projectName] = path.split('/').slice(2, 4)
+  const projects = await Engine.instance.api.service(projectPath).find({
+    query: {
+      $or: [
+        {
+          name: `${orgName}/${projectName}`
+        },
+        {
+          name: orgName
+        }
+      ],
+      action: 'studio',
+      allowed: true
+    }
+  })
+  return (
+    projects.data.find((project) => project.name === orgName || project.name === `${orgName}/${projectName}`)?.name ??
+    ''
+  )
+}
+
+export default function FileBrowser() {
+  const { t } = useTranslation()
+  const filesState = useMutableState(FilesState)
+
+  const originalPath = useMutableState(EditorState).projectName.value
+  useEffect(() => {
+    if (originalPath) filesState.selectedDirectory.set(originalPath)
+  }, [originalPath])
+
+  useEffect(() => {
+    ;(async () => {
+      const projectName = await getValidProjectForFileBrowser(filesState.selectedDirectory.value)
+      const orgName = projectName.includes('/') ? projectName.split('/')[0] : ''
+      filesState.merge({ projectName, orgName })
+    })()
+  }, [filesState.selectedDirectory])
+
+  return (
+    <FilesQueryProvider>
+      <FilesToolbar />
+    </FilesQueryProvider>
+  )
+}

packages/ui/src/components/editor/panels/Files/index.tsx → packages/editor/src/panels/files/index.tsx

@@ -23,32 +23,24 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import { PanelDragContainer, PanelTitle } from '@etherealengine/ui/src/components/editor/layout/Panel'
 import { TabData } from 'rc-dock'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import FileBrowser from './filebrowser'
 
-import { PanelDragContainer, PanelTitle } from '../../layout/Panel'
-import FilesPanelContainer from './container'
-
-export const FilesPanelTitle = () => {
+const FilesPanelTitle = () => {
   const { t } = useTranslation()
-
   return (
-    <div>
-      <PanelDragContainer>
-        <PanelTitle>
-          <span>{'Files'}</span>
-        </PanelTitle>
-      </PanelDragContainer>
-    </div>
+    <PanelDragContainer>
+      <PanelTitle>{t('editor:layout.filebrowser.tab-name')}</PanelTitle>
+    </PanelDragContainer>
   )
 }
 
-export default FilesPanelTitle
-
 export const FilesPanelTab: TabData = {
   id: 'filesPanel',
   closable: true,
   title: <FilesPanelTitle />,
-  content: <FilesPanelContainer />
+  content: <FileBrowser />
 }