add renaming assets before import

Author: nicoecheza

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

@@ -2,11 +2,11 @@ import React, { PropsWithChildren, useCallback, useEffect, useState } from 'reac
 import cx from 'classnames'
 import { HiOutlineUpload } from 'react-icons/hi'
 
-// import { removeBasePath } from '../../lib/logic/remove-base-path'
+import { removeBasePath } from '../../lib/logic/remove-base-path'
 import { DIRECTORY, transformBase64ResourceToBinary, withAssetDir } from '../../lib/data-layer/host/fs-utils'
 import { importAsset, saveThumbnail } from '../../redux/data-layer'
 import { useAppDispatch, useAppSelector } from '../../redux/hooks'
-import { selectUploadFile, updateUploadFile } from '../../redux/app'
+import { selectAssetCatalog, selectUploadFile, updateUploadFile } from '../../redux/app'
 
 import FileInput from '../FileInput'
 import { Modal } from '../Modal'
@@ -19,9 +19,9 @@ import {
   ACCEPTED_FILE_TYPES,
   formatFileName,
   convertAssetToBinary,
-  determineAssetType
+  buildAssetPath
 } from './utils'
-import { Asset, isModelAsset } from './types'
+import { Asset } from './types'
 
 import './ImportAsset.css'
 import { Error } from './Error'
@@ -34,13 +34,13 @@ interface PropTypes {
 
 const ImportAsset = React.forwardRef<InputRef, PropsWithChildren<PropTypes>>(({ onSave, children }, inputRef) => {
   const dispatch = useAppDispatch()
-  // const catalog = useAppSelector(selectAssetCatalog)
+  const catalog = useAppSelector(selectAssetCatalog)
   const uploadFile = useAppSelector(selectUploadFile)
 
   const [files, setFiles] = useState<Asset[]>([])
 
   const [isHover, setIsHover] = useState(false)
-  // const { basePath, assets } = catalog ?? { basePath: '', assets: [] }
+  const { basePath, assets } = catalog ?? { basePath: '', assets: [] }
 
   useEffect(() => {
     const isValidFile = uploadFile && 'name' in uploadFile
@@ -71,8 +71,7 @@ const ImportAsset = React.forwardRef<InputRef, PropsWithChildren<PropTypes>>(({
       // times. This can be improved by doing all the process once...
       for (const asset of assets) {
         const content = await convertAssetToBinary(asset)
-        const classification = determineAssetType(asset.extension)
-        const assetPackageName = isModelAsset(asset) ? `${classification}/${asset.name}` : classification
+        const assetPackageName = buildAssetPath(asset)
 
         dispatch(
           importAsset({
@@ -106,15 +105,17 @@ const ImportAsset = React.forwardRef<InputRef, PropsWithChildren<PropTypes>>(({
     [uploadFile]
   )
 
-  // const isNameUnique = useCallback((name: string, ext: string) => {
-  //   return !assets.find((asset) => {
-  //     const [packageName, otherAssetName] = removeBasePath(basePath, asset.path).split('/')
-  //     if (packageName === 'builder') return false
-  //     return otherAssetName?.toLocaleLowerCase() === name?.toLocaleLowerCase() + '.' + ext
-  //   })
-  // }, [])
-
-  // const isNameRepeated = !isNameUnique(assetName, assetExtension)
+  const validateName = useCallback(
+    (asset: Asset, fileName: string) => {
+      return !assets.find(($) => {
+        const [packageName, ...otherAssetName] = removeBasePath(basePath, $.path).split('/')
+        if (packageName === 'builder') return false
+        const assetPath = buildAssetPath(asset)
+        return otherAssetName.join('/') === `${assetPath}/${fileName}`
+      })
+    },
+    [assets]
+  )
 
   return (
     <div className={cx('ImportAsset', { ImportAssetHover: isHover })}>
@@ -144,7 +145,7 @@ const ImportAsset = React.forwardRef<InputRef, PropsWithChildren<PropTypes>>(({
         >
           <h2>Import Assets</h2>
           {assetsAreValid(files) ? (
-            <Slider assets={files} onSubmit={handleImport} />
+            <Slider assets={files} onSubmit={handleImport} isNameValid={validateName} />
           ) : (
             <Error assets={files} onSubmit={handleCloseModal} />
           )}

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

@@ -54,6 +54,11 @@
   height: 60%;
 }
 
+.Slider .asset .name-error {
+  font-size: 12px;
+  color: var(--primary-main)
+}
+
 .Slider .asset .size {
   text-align: center;
   font-size: 12px;

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

@@ -6,14 +6,14 @@ import { AssetPreview } from '../../AssetPreview'
 import { Button } from '../../Button'
 import { Input } from '../../Input'
 
-import { getAssetSize, getAssetResources, determineAssetType } from '../utils'
+import { getAssetSize, getAssetResources, determineAssetType, formatFileName } from '../utils'
 
 import { Asset } from '../types'
 import { PropTypes, Thumbnails } from './types'
 
 import './Slider.css'
 
-export function Slider({ assets, onSubmit }: PropTypes) {
+export function Slider({ assets, onSubmit, isNameValid }: PropTypes) {
   const [value, setValue] = useState(assets)
   const [slide, setSlide] = useState(0)
   const [screenshots, setScreenshots] = useState<Thumbnails>({})
@@ -70,6 +70,30 @@ export function Slider({ assets, onSubmit }: PropTypes) {
     return neededScreenshots.length === Object.keys(screenshots).length
   }, [value, screenshots])
 
+  const invalidNames = useMemo(() => {
+    const all = new Set<string>()
+    const invalid = new Set<string>()
+
+    for (const asset of value) {
+      const name = formatFileName(asset)
+      if (all.has(name) || !isNameValid(asset, name)) {
+        invalid.add(name)
+      } else {
+        all.add(name)
+      }
+    }
+
+    return invalid
+  }, [value])
+
+  const isNameUnique = useCallback(
+    (asset: Asset) => {
+      const name = formatFileName(asset)
+      return !invalidNames.has(name)
+    },
+    [invalidNames]
+  )
+
   if (!value.length) return null
 
   return (
@@ -87,6 +111,7 @@ export function Slider({ assets, onSubmit }: PropTypes) {
               <div>
                 <AssetPreview value={$.blob} resources={getAssetResources($)} onScreenshot={handleScreenshot($)} />
                 <Input value={$.name} onChange={handleNameChange(i)} />
+                {!isNameUnique($) && <span className="name-error">Filename already exists</span>}
               </div>
               <span className="size">{getAssetSize($)}</span>
             </div>
@@ -98,7 +123,7 @@ export function Slider({ assets, onSubmit }: PropTypes) {
           </span>
         )}
       </div>
-      <Button type="danger" size="big" onClick={handleSubmit} disabled={!allScreenshotsTaken}>
+      <Button type="danger" size="big" onClick={handleSubmit} disabled={!allScreenshotsTaken || invalidNames.size > 0}>
         {importText}
       </Button>
     </div>

packages/@dcl/inspector/src/components/ImportAsset/Slider/types.ts

@@ -2,7 +2,8 @@ import { Asset } from '../types'
 
 export type PropTypes = {
   assets: Asset[]
-  onSubmit: (assets: Asset[]) => void
+  onSubmit(assets: Asset[]): void
+  isNameValid(asset: Asset, newName: string): boolean
 }
 
 export type Thumbnails = Record<string, string>

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

@@ -121,7 +121,6 @@ const IGNORED_ERROR_CODES = [
 async function getGltf(file: File, getExternalResource: (uri: string) => Promise<Uint8Array>): Promise<Gltf> {
   try {
     const buffer = await file.arrayBuffer()
-    // const resourceMap = new Map([...model.buffers, ...model.images].map(($) => [$.blob.name, $.blob]))
     const result: Gltf = await validator.validateBytes(new Uint8Array(buffer), {
       ignoredIssues: IGNORED_ERROR_CODES,
       externalResourceFunction: getExternalResource
@@ -145,7 +144,6 @@ async function validateGltf(gltf: Gltf): Promise<void> {
   }
 }
 
-// Utility functions
 export function normalizeFileName(fileName: string): string {
   return fileName.trim().replace(/\s+/g, '_').toLowerCase()
 }
@@ -316,3 +314,9 @@ export function determineAssetType(extension: string): AssetType {
       return 'Other'
   }
 }
+
+export function buildAssetPath(asset: Asset): string {
+  const classification = determineAssetType(asset.extension)
+  const assetPath = isModelAsset(asset) ? `${classification}/${asset.name}` : classification
+  return assetPath
+}

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

@@ -17,7 +17,7 @@ const getRolesFromTarget = (target: HTMLElement | null): Roles => {
   }
 }
 
-const Input = ({ value, onCancel, onSubmit, onChange, onBlur, placeholder }: PropTypes) => {
+const Input = ({ value, onCancel, onSubmit, onChange, onBlur, placeholder, disabled }: PropTypes) => {
   const ref = useRef<HTMLInputElement>(null)
   const [stateValue, setStateValue] = useState(value)
 
@@ -71,6 +71,7 @@ const Input = ({ value, onCancel, onSubmit, onChange, onBlur, placeholder }: Pro
       placeholder={placeholder}
       value={stateValue}
       onChange={handleTextChange}
+      disabled={disabled}
     />
   )
 }

packages/@dcl/inspector/src/components/Input/types.ts

@@ -1,6 +1,7 @@
 export interface PropTypes {
   value: string
   placeholder?: string
+  disabled?: boolean
   onChange?: (value: string) => void
   onCancel?: () => void
   onSubmit?: (newValue: string) => void