fix several issues with import files (#1059)

* fix race condition when validating models on import

* add 'VALUE_NOT_IN_RANGE' to ignored model errors

* fix import button on asset explorer styles

* move feeded fs example model to Models/example/model.glb

* reset the FileInput value so the same file can be selected again

Author: nicoecheza

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

@@ -70,10 +70,14 @@
   margin-left: 8px;
   display: flex;
   align-items: center;
+  padding: 8px 9px;
+  font-weight: 600;
+  border-radius: 6px;
 }
 
 .Assets .Assets-buttons > button:first-child svg {
   margin-right: 5px;
+  stroke-width: 3;
 }
 
 .Assets .Assets-content {

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

@@ -44,6 +44,8 @@ export const FileInput = React.forwardRef<InputRef, React.PropsWithChildren<Prop
     (e: React.ChangeEvent<HTMLInputElement>): void => {
       const files = Array.from(e.target.files ?? [])
       onDrop && onDrop(files)
+      // Reset the input value so the same file can be selected again
+      e.target.value = ''
     },
     [onDrop]
   )

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

@@ -11,9 +11,7 @@ import { ValidationError } from '../types'
 
 export function Error({ assets, onSubmit }: PropTypes) {
   const getErrorMessage = useCallback((error: ValidationError): string => {
-    if (!error) return 'Unknown error'
-
-    switch (error.type) {
+    switch (error?.type) {
       case 'type':
         return 'File type not supported'
       case 'model':
@@ -30,9 +28,7 @@ export function Error({ assets, onSubmit }: PropTypes) {
       <div className="alert-icon"></div>
       <h2>Asset failed to import</h2>
       <div className="errors">
-        {assets.map(($, i) => (
-          <ErrorMessage key={i} asset={$} message={getErrorMessage($.error)} />
-        ))}
+        {assets.map(($, i) => $.error && <ErrorMessage key={i} asset={$} message={getErrorMessage($.error)} />)}
       </div>
       <Button type="danger" size="big" onClick={onSubmit}>
         OK

packages/@dcl/inspector/src/components/ImportAsset/utils.ts

@@ -115,7 +115,8 @@ const MODEL_EXTENSIONS = ACCEPTED_FILE_TYPES['model/gltf-binary']
 const IGNORED_ERROR_CODES = [
   'ACCESSOR_WEIGHTS_NON_NORMALIZED',
   'MESH_PRIMITIVE_TOO_FEW_TEXCOORDS',
-  'ACCESSOR_VECTOR3_NON_UNIT'
+  'ACCESSOR_VECTOR3_NON_UNIT',
+  'VALUE_NOT_IN_RANGE'
 ]
 
 async function getGltf(file: File, getExternalResource: (uri: string) => Promise<Uint8Array>): Promise<Gltf> {
@@ -209,32 +210,34 @@ async function getModel(asset: BaseAsset, fileMap: Map<string, BaseAsset>): Prom
   for (const resource of gltf.info.resources || []) {
     if (resource.storage === 'external') {
       const normalizedName = normalizeFileName(resource.uri)
-      const uri = fileMap.get(normalizedName)!
-      if (resource.pointer.includes('buffer')) buffers.push(uri)
-      if (resource.pointer.includes('image')) images.push(uri)
-      fileMap.delete(normalizedName)
+      const uri = fileMap.get(normalizedName)
+      if (uri) {
+        if (resource.pointer.includes('buffer')) buffers.push(uri)
+        if (resource.pointer.includes('image')) images.push(uri)
+        fileMap.delete(normalizedName)
+      }
     }
   }
 
   fileMap.delete(formatFileName(asset))
 
-  return { ...asset, gltf, buffers, images }
+  const model = { ...asset, gltf, buffers, images }
+  const error = await validateModelWithDependencies(model)
+
+  return { ...model, error }
 }
 
 async function processModels(files: BaseAsset[]): Promise<Asset[]> {
   const fileMap = new Map(files.map((file) => [formatFileName(file), file]))
 
-  const modelPromises = files
-    .filter((asset) => MODEL_EXTENSIONS.includes(`.${asset.extension}`))
-    .map(async (asset): Promise<ModelAsset> => {
-      const model = await getModel(asset, fileMap)
-      const error = await validateModelWithDependencies(model)
-      return { ...model, error }
-    })
+  const gltfAssets: ModelAsset[] = []
+  const modelAssets = files.filter((asset) => MODEL_EXTENSIONS.includes(`.${asset.extension}`))
+  // we need to run models sequentially to avoid race conditions on fileMap
+  for (const asset of modelAssets) {
+    gltfAssets.push(await getModel(asset, fileMap))
+  }
 
-  const gltfAssets = await Promise.all(modelPromises)
   const remainingAssets = Array.from(fileMap.values())
-
   return [...gltfAssets, ...remainingAssets]
 }
 

packages/@dcl/inspector/src/lib/data-layer/client/feeded-local-fs.ts

@@ -105,7 +105,7 @@ export function generateFeededComposite({ engine, components }: TempEngine, scen
       z: 8
     }
   })
-  components.GltfContainer.create(gltfEntity, { src: 'assets/scene/models/example.glb' })
+  components.GltfContainer.create(gltfEntity, { src: 'assets/scene/Models/example/model.glb' })
   cubeIdComponent.create(gltfEntity)
   components.Name.create(gltfEntity, { value: 'Gltf Test' })
 
@@ -130,7 +130,7 @@ export function generateFeededComposite({ engine, components }: TempEngine, scen
 export const getMinimalComposite = () => generateMinimalComposite(createTempEngineContext())
 
 const builderMappings: Record<string, string> = {
-  'assets/scene/models/example.glb': 'bafkreibzw3d2aziiw2yhq7eoihytxthsulbihbr2ds2zegmsreaycy4h7e'
+  'assets/scene/Models/example/model.glb': 'bafkreibzw3d2aziiw2yhq7eoihytxthsulbihbr2ds2zegmsreaycy4h7e'
 }
 
 function getFeededEngineAndComposite(scene: Scene) {