feat: do not create a folder for asset imported from local FS

packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css

@@ -42,6 +42,7 @@
   height: unset;
   background-color: var(--list-item-hover-bg-color);
   overflow: visible;
+  margin-right: 20px;
 }
 
 .ImportAsset .Container svg {
@@ -77,6 +78,10 @@
 
 .ImportAsset .Container .file-title {
   margin-top: 8px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: inherit;
 }
 
 .ImportAsset .file-container {

packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { HiOutlineUpload } from 'react-icons/hi'
 import { RxCross2 } from 'react-icons/rx'
 import { IoIosImage } from 'react-icons/io'
@@ -112,6 +112,10 @@ const ImportAsset = withSdk<PropTypes>(({ sdk, onSave }) => {
     setValidationError(null)
   }
 
+  const handleNameChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setAssetPackageName(event.target.value)
+  }, [])
+
   const invalidName = !!systemFiles.assets.find((asset) => {
     const [_, packageName] = asset.path.split('/')
     return packageName?.toLocaleLowerCase() === assetPackageName?.toLocaleLowerCase()
@@ -146,7 +150,7 @@ const ImportAsset = withSdk<PropTypes>(({ sdk, onSave }) => {
                 <TextField
                   label=""
                   value={assetPackageName}
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => setAssetPackageName(event.target.value)}
+                  onChange={handleNameChange}
                 />
               </Block>
               <Button disabled={invalidName || !!validationError} onClick={handleSave}>

packages/@dcl/inspector/src/components/Renderer/Renderer.tsx

@@ -81,7 +81,7 @@ const Renderer: React.FC = () => {
     }
     await sdk!.dataLayer.importAsset({
       content: new Map(Object.entries(fileContent)),
-      basePath: destFolder,
+      basePath: `${destFolder}/${assetPackageName}`,
       assetPackageName
     })
     if (!isMounted()) return

packages/@dcl/inspector/src/lib/data-layer/host/fs-utils.ts

@@ -1,4 +1,5 @@
 import { FileSystemInterface } from '../types'
+import { SceneProvider } from './scene'
 
 export async function getFilesInDirectory(
   fs: FileSystemInterface,
@@ -27,6 +28,8 @@ export const DIRECTORY = {
   ASSETS: 'assets'
 }
 
+export const EXTENSIONS = ['.glb', '.png', '.composite', '.composite.bin', '.gltf', '.jpg']
+
 export function createAssetsFs(fs: FileSystemInterface): FileSystemInterface {
   const ASSETS_PATH = DIRECTORY.ASSETS
 
@@ -40,6 +43,11 @@ export function createAssetsFs(fs: FileSystemInterface): FileSystemInterface {
     writeFile: (filePath: string, content: Buffer) => fs.writeFile(withAssetDir(filePath), content),
     readdir: (filePath: string) => fs.readdir(withAssetDir(filePath)),
     rm: (filePath: string) => fs.rm(withAssetDir(filePath)),
-    cwd: async () => `${await fs.cwd()}/${ASSETS_PATH}`
+    cwd: async () => ASSETS_PATH
   }
 }
+
+export function getFileName(fileName: string, ext: string) {
+  if (EXTENSIONS.some(($) => fileName.endsWith($))) return fileName
+  return `${fileName}.${ext}`
+}

packages/@dcl/inspector/src/lib/data-layer/host/rpc-methods.ts

@@ -1,7 +1,7 @@
 import { Entity, EntityMappingMode, IEngine, Composite, OnChangeFunction, CompositeDefinition } from '@dcl/ecs'
 
 import { DataLayerRpcServer, FileSystemInterface } from '../types'
-import { createAssetsFs, getFilesInDirectory } from './fs-utils'
+import { EXTENSIONS, createAssetsFs, getFileName, getFilesInDirectory } from './fs-utils'
 import { dumpEngineToComposite, dumpEngineToCrdtCommands } from './utils/engine-to-composite'
 import { CompositeManager, createFsCompositeProvider } from './utils/fs-composite-provider'
 import { stream } from './stream'
@@ -10,6 +10,7 @@ import { minimalComposite } from '../client/feeded-local-fs'
 import upsertAsset from './upsert-asset'
 import { initSceneProvider } from './scene'
 import { readPreferencesFromFile, serializeInspectorPreferences } from '../../logic/preferences/io'
+import { Scene } from '@dcl/schemas'
 
 const INSPECTOR_PREFERENCES_PATH = 'inspector-preferences.json'
 
@@ -43,10 +44,13 @@ export async function initRpcMethods(
   engine: IEngine,
   onChanges: OnChangeFunction[]
 ): Promise<DataLayerRpcServer> {
+  const sceneProvider = await initSceneProvider(fs)
   const assetsFs = createAssetsFs(fs)
+  const scenePath = sceneProvider.getScene().display.title
+
   let inspectorPreferences = await readPreferencesFromFile(fs, INSPECTOR_PREFERENCES_PATH)
 
-  const currentCompositeResourcePath = 'scene/main.composite'
+  const currentCompositeResourcePath = `${scenePath}/main.composite`
 
   if (!(await assetsFs.existFile(currentCompositeResourcePath))) {
     await assetsFs.writeFile(currentCompositeResourcePath, Buffer.from(JSON.stringify(minimalComposite), 'utf-8'))
@@ -69,7 +73,6 @@ export async function initRpcMethods(
   let dirty = false
   let composite: CompositeDefinition
   const undoRedo = initUndoRedo(assetsFs, engine, () => composite)
-  const sceneProvider = await initSceneProvider(fs)
 
   // Create containers and attach onChange logic.
   onChanges.push(undoRedo.onChange)
@@ -117,12 +120,11 @@ export async function initRpcMethods(
       throw new Error("Couldn't find the asset " + req.path)
     },
     async getAssetCatalog() {
-      const extensions = ['.glb', '.png', '.composite', '.composite.bin', '.gltf', '.jpg']
       const ignore = ['.git', 'node_modules']
 
       const files = (await getFilesInDirectory(assetsFs, '', [], true, ignore)).filter((item) => {
         const itemLower = item.toLowerCase()
-        return extensions.some((ext) => itemLower.endsWith(ext))
+        return EXTENSIONS.some((ext) => itemLower.endsWith(ext))
       })
 
       return { basePath: '.', assets: files.map((item) => ({ path: item })) }
@@ -131,11 +133,13 @@ export async function initRpcMethods(
      * Import asset into the file system.
      * It generates an undo operation.
      */
-    async importAsset(req) {
-      const baseFolder = (req.basePath.length ? req.basePath + '/' : '') + req.assetPackageName + '/'
+    async importAsset({ assetPackageName, basePath, content }) {
+      const baseFolder = (basePath.length ? basePath + '/' : '')
       const undoAcc: FileOperation[] = []
-      for (const [fileName, fileContent] of req.content) {
-        const filePath = (baseFolder + fileName).replaceAll('//', '/')
+      for (const [fileName, fileContent] of content) {
+        const ext = fileName.split('.')[1]
+        const importName = assetPackageName ? getFileName(assetPackageName, ext) : fileName
+        const filePath = (baseFolder + importName).replaceAll('//', '/')
         const prevValue = (await assetsFs.existFile(filePath)) ? await assetsFs.readFile(filePath) : null
         undoAcc.push({ prevValue, newValue: fileContent, path: filePath })
         await upsertAsset(assetsFs, filePath, fileContent)
@@ -168,7 +172,7 @@ export async function initRpcMethods(
     async getProjectData() {
       const scene = sceneProvider.getScene()
       return {
-        path: scene.display?.title || (await fs.cwd())
+        path: scene.display.title
       }
     }
   }

packages/@dcl/inspector/src/lib/data-layer/host/scene.ts

@@ -5,9 +5,15 @@ import { FileSystemInterface } from '../types'
 import { parseSceneFromComponent } from './utils/component'
 import { EditorComponentIds, EditorComponentsTypes } from '../../sdk/components'
 
+type SceneWithDefaults = Scene & {
+  display: {
+    title: string
+  }
+}
+
 export interface SceneProvider {
   onChange: OnChangeFunction
-  getScene: () => Scene
+  getScene: () => SceneWithDefaults
 }
 
 function bufferToScene(sceneBuffer: Buffer): Scene {
@@ -25,24 +31,38 @@ function updateScene(scene: Scene, value: EditorComponentsTypes['Scene']): Scene
   }
 }
 
-async function getScene(fs: FileSystemInterface): Promise<Scene> {
+async function getScene(fs: FileSystemInterface): Promise<SceneWithDefaults> {
+  let scene: Scene = {} as Scene
   try {
-    return bufferToScene(await fs.readFile('scene.json'))
+    scene = bufferToScene(await fs.readFile('scene.json'))
   } catch (e) {
     console.error('Reading scene.json file failed: ', e)
   }
 
-  // maybe some defaults? idk...
-  return {} as Scene
+  const sceneWithDefaults = await augmentDefaults(fs, scene)
+  return sceneWithDefaults
+}
+
+async function augmentDefaults(fs: FileSystemInterface, scene: Scene): Promise<SceneWithDefaults> {
+  return {
+    ...scene,
+    display: {
+      ...scene.display,
+      title: scene.display?.title || await fs.cwd()
+    }
+  }
 }
 
 export async function initSceneProvider(fs: FileSystemInterface): Promise<SceneProvider> {
-  let scene: Scene = await getScene(fs)
+  let scene: SceneWithDefaults = await getScene(fs)
 
   return {
     onChange(_, operation, component, componentValue) {
       if (operation === CrdtMessageType.PUT_COMPONENT && component?.componentName === EditorComponentIds.Scene) {
-        scene = updateScene(scene, componentValue as EditorComponentsTypes['Scene'])
+        const updatedScene = updateScene(scene, componentValue as EditorComponentsTypes['Scene'])
+        augmentDefaults(fs, updatedScene)
+          .then(($) => scene = $)
+          .catch((err) => console.error('Augmenting defaults for scene.json failed', err))
         fs.writeFile('scene.json', sceneToBuffer(scene)).catch((err) =>
           console.error('Failed saving scene.json: ', err)
         )

packages/@dcl/inspector/src/lib/logic/in-memory-storage.ts

@@ -68,7 +68,7 @@ export function createFsInMemory(initialFs: Record<string, Buffer> = {}): FileSy
       return files
     },
     async cwd(): Promise<string> {
-      return '.'
+      return 'scene'
     }
   }
 }