Assets must populate from all projects you have perms for (#10409)

* Assets must populate from all projects you have perms for

* Implement auto project perms

* remove logs

* fix get perms for public assets

* remove static_resource checks

* fix admin

* rename hook to unabreviated words

* action admin not needed

* fix thumbnails

* early exit on default proj

* remove default proj

* add action back as misunderstood

* revert thumbnails

* thumbnail fixes, asset panel query fixes, project permission admin UI fixes

* update resource json thumb paths

* auto populate all project permission if dev mode and admin

* file upload fixes

* Updated file name

* Update packages/server-core/src/media/static-resource/static-resource.hooks.ts

Co-authored-by: Hanzla Mateen <[email protected]>

* hanzala comments, fix thumbnail upload, fix file upload error

* format

* remove limit

---------

Co-authored-by: HexaField <[email protected]>
Co-authored-by: Hanzla Mateen <[email protected]>

packages/client-core/src/admin/components/project/ManageUserPermissionModal.tsx

@@ -32,22 +32,21 @@ import { PopoverState } from '@etherealengine/client-core/src/common/services/Po
 import { ProjectService } from '@etherealengine/client-core/src/common/services/ProjectService'
 import { AuthState } from '@etherealengine/client-core/src/user/services/AuthService'
 import { userHasAccess } from '@etherealengine/client-core/src/user/userHasAccess'
-import { InviteCode, ProjectPermissionType, ProjectType } from '@etherealengine/common/src/schema.type.module'
+import {
+  InviteCode,
+  ProjectPermissionType,
+  ProjectType,
+  projectPermissionPath
+} from '@etherealengine/common/src/schema.type.module'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
+import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
 import Input from '@etherealengine/ui/src/primitives/tailwind/Input'
 import Modal from '@etherealengine/ui/src/primitives/tailwind/Modal'
 import Text from '@etherealengine/ui/src/primitives/tailwind/Text'
 import Toggle from '@etherealengine/ui/src/primitives/tailwind/Toggle'
 
-export default function ManageUserPermissionModal({
-  project,
-  projectPermissions
-}: {
-  project: ProjectType
-  projectPermissions: readonly ProjectPermissionType[]
-}) {
-  console.log('ManageUserPermissionModal', project, projectPermissions)
+export default function ManageUserPermissionModal({ project }: { project: ProjectType }) {
   const { t } = useTranslation()
   const selfUser = useHookstate(getMutableState(AuthState)).user
   const userInviteCode = useHookstate('' as InviteCode)
@@ -58,13 +57,21 @@ export default function ManageUserPermissionModal({
       ? 'owner'
       : 'user'
 
+  const projectPermissionsFindQuery = useFind(projectPermissionPath, {
+    query: {
+      projectId: project.id,
+      paginate: false
+    }
+  })
+
   const handleCreatePermission = async () => {
     if (!userInviteCode.value) {
       userInviteCodeError.set(t('admin:components.project.inviteCodeCantEmpty'))
       return
     }
     try {
       await ProjectService.createPermission(userInviteCode.value, project.id, 'reviewer')
+      projectPermissionsFindQuery.refetch()
     } catch (err) {
       NotificationService.dispatchNotify(err.message, { variant: 'error' })
     }
@@ -73,6 +80,7 @@ export default function ManageUserPermissionModal({
   const handlePatchPermission = async (permission: ProjectPermissionType) => {
     try {
       await ProjectService.patchPermission(permission.id, permission.type === 'owner' ? 'user' : 'owner')
+      projectPermissionsFindQuery.refetch()
     } catch (err) {
       NotificationService.dispatchNotify(err.message, { variant: 'error' })
     }
@@ -81,6 +89,7 @@ export default function ManageUserPermissionModal({
   const handleRemovePermission = async (id: string) => {
     try {
       await ProjectService.removePermission(id)
+      projectPermissionsFindQuery.refetch()
     } catch (err) {
       NotificationService.dispatchNotify(err.message, { variant: 'error' })
     }
@@ -105,7 +114,7 @@ export default function ManageUserPermissionModal({
         />
       )}
       <div className="grid gap-4">
-        {projectPermissions?.map((permission) => (
+        {projectPermissionsFindQuery.data.map((permission) => (
           <div key={permission.id} className="flex items-center gap-2">
             <Text fontSize="sm">
               {permission.userId === selfUser.id.value ? `${permission.user?.name} (you)` : permission.user?.name}
@@ -119,7 +128,7 @@ export default function ManageUserPermissionModal({
               disabled={
                 selfUserPermission !== 'owner' ||
                 selfUser.id.value === permission.userId ||
-                projectPermissions?.length === 1
+                projectPermissionsFindQuery.data.length === 1
               }
             />
             <Button

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

@@ -40,7 +40,7 @@ import { PopoverState } from '@etherealengine/client-core/src/common/services/Po
 import { ProjectService } from '@etherealengine/client-core/src/common/services/ProjectService'
 import config from '@etherealengine/common/src/config'
 import multiLogger from '@etherealengine/common/src/logger'
-import { projectPath, projectPermissionPath, ProjectType } from '@etherealengine/common/src/schema.type.module'
+import { projectPath, ProjectType } from '@etherealengine/common/src/schema.type.module'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import ConfirmDialog from '@etherealengine/ui/src/components/tailwind/ConfirmDialog'
@@ -72,13 +72,6 @@ export default function ProjectTable() {
     }
   })
 
-  const projectPermissionsFindQuery = useFind(projectPermissionPath, {
-    query: {
-      projectId: activeProjectId?.value,
-      paginate: false
-    }
-  })
-
   const handleEnabledChange = async (project: ProjectType) => {
     await ProjectService.setEnabled(project.id, !project.enabled)
     projectQuery.refetch()
@@ -144,9 +137,7 @@ export default function ProjectTable() {
           className="mr-2 h-min whitespace-pre bg-theme-blue-secondary text-[#214AA6] disabled:opacity-50 dark:text-white"
           onClick={() => {
             activeProjectId.set(project.id)
-            PopoverState.showPopupover(
-              <ManageUserPermissionModal project={project} projectPermissions={projectPermissionsFindQuery.data} />
-            )
+            PopoverState.showPopupover(<ManageUserPermissionModal project={project} />)
           }}
         >
           {t('admin:components.project.actions.access')}

packages/client-core/src/common/services/FileThumbnailJobState.tsx

@@ -106,13 +106,24 @@ const uploadThumbnail = async (src: string, projectName: string, staticResourceI
     .replaceAll(/[^a-zA-Z0-9\.\-_\s]/g, '')
     .replaceAll(/\s/g, '-')}-thumbnail.png`
   const file = new File([blob], thumbnailKey)
-  await uploadToFeathersService(fileBrowserUploadPath, [file], {
-    fileName: file.name,
-    project: projectName,
-    path: 'public/thumbnails/' + file.name,
-    contentType: file.type
-  }).promise
-  await Engine.instance.api.service(staticResourcePath).patch(staticResourceId, { thumbnailKey, thumbnailMode })
+  const pathname = new URL(
+    await uploadToFeathersService(fileBrowserUploadPath, [file], {
+      args: [
+        {
+          fileName: file.name,
+          project: projectName,
+          path: 'public/thumbnails/' + file.name,
+          contentType: file.type,
+          type: 'thumbnail',
+          thumbnailKey,
+          thumbnailMode
+        }
+      ]
+    }).promise
+  ).pathname
+  await Engine.instance.api
+    .service(staticResourcePath)
+    .patch(staticResourceId, { thumbnailKey: pathname.slice(1), thumbnailMode })
 }
 
 const seenThumbnails = new Set<string>()

packages/common/src/interfaces/ResourcesJson.ts

@@ -23,17 +23,16 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+export type ResourceType = {
+  type: string // 'scene' | 'asset' | 'file' | 'thumbnail' | 'avatar' | 'recording'
+  tags?: string[]
+  dependencies?: string[] // other keys
+  licensing?: string
+  description?: string
+  attribution?: string
+  thumbnailKey?: string
+  thumbnailMode?: string // 'automatic' | 'manual'
+}
+
 // key = /path/to/file.ext
-export type ResourcesJson = Record<
-  string,
-  {
-    type: string // 'scene' | 'asset' | 'file' | 'thumbnail' | 'avatar' | 'recording'
-    tags?: string[]
-    dependencies?: string[] // other keys
-    licensing?: string
-    description?: string
-    attribution?: string
-    thumbnailKey?: string
-    thumbnailMode?: string // 'automatic' | 'manual'
-  }
->
+export type ResourcesJson = Record<string, ResourceType>

packages/editor/src/components/EditorContainer.tsx

@@ -221,7 +221,7 @@ const onImportAsset = async () => {
 
   if (projectName) {
     try {
-      await inputFileWithAddToScene({ projectName })
+      await inputFileWithAddToScene({ projectName, directoryPath: 'projects/' + projectName + '/assets/' })
     } catch (err) {
       NotificationService.dispatchNotify(err.message, { variant: 'error' })
     }

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

@@ -251,9 +251,13 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
             try {
               const name = processFileName(file.name)
               await uploadToFeathersService(fileBrowserUploadPath, [file], {
-                project: projectName,
-                path: relativePath + name,
-                contentType: file.type
+                args: [
+                  {
+                    project: projectName,
+                    path: relativePath + name,
+                    contentType: file.type
+                  }
+                ]
               }).promise
             } catch (err) {
               NotificationService.dispatchNotify(err.message, { variant: 'error' })
@@ -638,7 +642,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
           <ToolButton
             tooltip={t('editor:layout.filebrowser.uploadAssets')}
             onClick={async () => {
-              await inputFileWithAddToScene({ directoryPath: selectedDirectory.value })
+              await inputFileWithAddToScene({ projectName, directoryPath: selectedDirectory.value })
                 .then(refreshDirectory)
                 .catch((err) => {
                   NotificationService.dispatchNotify(err.message, { variant: 'error' })

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

@@ -127,9 +127,13 @@ export default function ImageCompressionPanel({
 
     try {
       await uploadToFeathersService(fileBrowserUploadPath, [file], {
-        project: projectName,
-        path: relativePath + file.name,
-        contentType: file.type
+        args: [
+          {
+            project: projectName,
+            path: relativePath + file.name,
+            contentType: file.type
+          }
+        ]
       }).promise
     } catch (err) {
       NotificationService.dispatchNotify(err.message, { variant: 'error' })

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

@@ -35,7 +35,7 @@ import { useTranslation } from 'react-i18next'
 import { staticResourcePath, StaticResourceType } from '@etherealengine/common/src/schema.type.module'
 import { Engine } from '@etherealengine/ecs/src/Engine'
 import { AssetLoader } from '@etherealengine/engine/src/assets/classes/AssetLoader'
-import { getState, NO_PROXY, useHookstate, useMutableState } from '@etherealengine/hyperflux'
+import { getState, NO_PROXY, useHookstate } from '@etherealengine/hyperflux'
 
 import { DockContainer } from '../EditorContainer'
 import StringInput from '../inputs/StringInput'
@@ -45,7 +45,6 @@ import { FileIcon } from './FileBrowser/FileIcon'
 
 import { AssetsPanelCategories } from './AssetsPanelCategories'
 
-import { EditorState } from '../../services/EditorServices'
 import styles from './styles.module.scss'
 
 const ResourceFile = ({ resource }: { resource: StaticResourceType }) => {
@@ -124,7 +123,6 @@ const SceneAssetsPanel = () => {
   const searchText = useHookstate('')
   const searchTimeoutCancelRef = useRef<(() => void) | null>(null)
   const searchedStaticResources = useHookstate<StaticResourceType[]>([])
-  const { projectName } = useMutableState(EditorState)
 
   const AssetCategory = useCallback(
     (props: {
@@ -191,8 +189,7 @@ const SceneAssetsPanel = () => {
       const query = {
         key: { $like: `%${searchText.value}%` },
         $sort: { mimeType: 1 },
-        $limit: 10000,
-        project: projectName.value!
+        $limit: 10000
       }
 
       if (selectedCategory.value) {

packages/editor/src/components/toolbar/Toolbar2.tsx

@@ -52,7 +52,7 @@ const onImportAsset = async () => {
 
   if (projectName) {
     try {
-      await inputFileWithAddToScene({ projectName })
+      await inputFileWithAddToScene({ projectName, directoryPath: 'projects/' + projectName + '/assets/' })
     } catch (err) {
       NotificationService.dispatchNotify(err.message, { variant: 'error' })
     }

packages/editor/src/functions/assetFunctions.ts

@@ -53,8 +53,8 @@ export const inputFileWithAddToScene = async ({
   projectName,
   directoryPath
 }: {
-  projectName?: string
-  directoryPath?: string
+  projectName: string
+  directoryPath: string
 }): Promise<null> =>
   new Promise((resolve, reject) => {
     const el = document.createElement('input')
@@ -103,9 +103,13 @@ export const inputFileWithAddToScene = async ({
               files.map(
                 (file) =>
                   uploadToFeathersService(fileBrowserUploadPath, [file], {
-                    project: projectName,
-                    path: directoryPath.replace('projects/' + projectName + '/', '') + file.name,
-                    contentType: file.type
+                    args: [
+                      {
+                        project: projectName,
+                        path: directoryPath.replace('projects/' + projectName + '/', '') + file.name,
+                        contentType: file.type
+                      }
+                    ]
                   }).promise
               )
             )
@@ -142,7 +146,9 @@ export const uploadProjectFiles = (projectName: string, files: File[], paths: st
       uploadToFeathersService(
         fileBrowserUploadPath,
         [file],
-        { project: projectName, path: filePath, contentType: '' },
+        {
+          args: [{ project: projectName, path: filePath, contentType: '' }]
+        },
         onProgress
       )
     )