feat(projects): move project download button to file browser panel

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

@@ -133,6 +133,7 @@
     "project": {
       "addProject": "Add Project",
       "updateProject": "Update Project",
+      "downloadProject": "Download Project",
       "rebuild": "Rebuild",
       "rebuilding": "Rebuilding",
       "updateEngine": "Update Engine",

packages/client-core/src/admin/common/variables/projects.ts

@@ -4,7 +4,6 @@ export interface ProjectColumn {
     | 'projectVersion'
     | 'commitSHA'
     | 'commitDate'
-    | 'download'
     | 'update'
     | 'invalidate'
     | 'view'
@@ -22,7 +21,6 @@ export const projectsColumns: ProjectColumn[] = [
   { id: 'projectVersion', label: 'Version', minWidth: 65 },
   { id: 'commitSHA', label: 'Commit SHA', minWidth: 100 },
   { id: 'commitDate', label: 'Commit Date', minWidth: 100 },
-  { id: 'download', label: 'Download', minWidth: 65 },
   { id: 'update', label: 'Update', minWidth: 65, align: 'center' },
   { id: 'push', label: 'Push to GitHub', minWidth: 65, align: 'center' },
   { id: 'link', label: 'GitHub Repo Link', minWidth: 65, align: 'center' },

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

@@ -1,10 +1,8 @@
 import _ from 'lodash'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { saveAs } from 'save-as'
 
 import ConfirmDialog from '@etherealengine/client-core/src/common/components/ConfirmDialog'
-import config from '@etherealengine/common/src/config'
 import { ProjectInterface } from '@etherealengine/common/src/interfaces/ProjectInterface'
 import multiLogger from '@etherealengine/common/src/logger'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
@@ -13,7 +11,6 @@ import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
 import IconButton from '@etherealengine/ui/src/primitives/mui/IconButton'
 import Tooltip from '@etherealengine/ui/src/primitives/mui/Tooltip'
 
-import { API } from '../../../API'
 import { NotificationService } from '../../../common/services/NotificationService'
 import { PROJECT_PAGE_LIMIT, ProjectService, ProjectState } from '../../../common/services/ProjectService'
 import { AuthState } from '../../../user/services/AuthService'
@@ -132,15 +129,6 @@ const ProjectTable = ({ className }: Props) => {
     })
   }
 
-  const DownloadProject = async (row: ProjectInterface) => {
-    setProject(row)
-    const url = `/projects/${row.name}`
-
-    const data = await API.instance.client.service('archiver').get(url)
-    const blob = await (await fetch(`${config.client.fileServer}/${data}`)).blob()
-    saveAs(blob, row.name + '.zip')
-  }
-
   const openInvalidateConfirmation = (row) => {
     setProject(row)
 
@@ -289,19 +277,6 @@ const ProjectTable = ({ className }: Props) => {
           )}
         </>
       ),
-      download: (
-        <>
-          {isAdmin && (
-            <IconButton
-              className={styles.iconButton}
-              name="download"
-              disabled={!el.repositoryPath}
-              onClick={() => DownloadProject(el)}
-              icon={<Icon type="Download" />}
-            />
-          )}
-        </>
-      ),
       link: (
         <>
           <IconButton

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

@@ -1,7 +1,9 @@
 import { Downgraded } from '@hookstate/core'
 import React, { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { saveAs } from 'save-as'
 
+import { API } from '@etherealengine/client-core/src/API'
 import ConfirmDialog from '@etherealengine/client-core/src/common/components/ConfirmDialog'
 import LoadingView from '@etherealengine/client-core/src/common/components/LoadingView'
 import {
@@ -11,6 +13,7 @@ import {
   FILES_PAGE_LIMIT
 } from '@etherealengine/client-core/src/common/services/FileBrowserService'
 import { uploadToFeathersService } from '@etherealengine/client-core/src/util/upload'
+import config from '@etherealengine/common/src/config'
 import { processFileName } from '@etherealengine/common/src/utils/processFileName'
 import { KTX2EncodeArguments } from '@etherealengine/engine/src/assets/constants/CompressionParms'
 import { KTX2EncodeDefaultArguments } from '@etherealengine/engine/src/assets/constants/CompressionParms'
@@ -25,6 +28,7 @@ import { addActionReceptor, removeActionReceptor } from '@etherealengine/hyperfl
 
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import AutorenewIcon from '@mui/icons-material/Autorenew'
+import DownloadIcon from '@mui/icons-material/Download'
 import Breadcrumbs from '@mui/material/Breadcrumbs'
 import Dialog from '@mui/material/Dialog'
 import DialogTitle from '@mui/material/DialogTitle'
@@ -337,6 +341,13 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
     selectedDirectory.set(newPath)
   }
 
+  const handleDownloadProject = async () => {
+    const url = selectedDirectory.value
+    const data = await API.instance.client.service('archiver').get(url)
+    const blob = await (await fetch(`${config.client.fileServer}/${data}`)).blob()
+    saveAs(blob, props.selectedFile + '.zip')
+  }
+
   return (
     <div className={styles.fileBrowserRoot}>
       <div style={headGrid}>
@@ -354,12 +365,20 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
         >
           {breadcrumbs}
         </Breadcrumbs>
-        <ToolButton
-          tooltip={t('editor:layout.filebrowser.refresh')}
-          icon={AutorenewIcon}
-          onClick={onRefreshDirectory}
-          id="refreshDir"
-        />
+        <span>
+          <ToolButton
+            tooltip={t('editor:layout.filebrowser.refresh')}
+            icon={AutorenewIcon}
+            onClick={onRefreshDirectory}
+            id="refreshDir"
+          />
+          <ToolButton
+            tooltip={t('admin:components.project.downloadProject')}
+            onClick={handleDownloadProject}
+            icon={DownloadIcon}
+            id="downloadProject"
+          />
+        </span>
       </div>
 
       {retrieving && (