fix: comments

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

@@ -15,7 +15,7 @@
   flex-grow: 1;
 }
 
-.Block.broken {
+.Block.error {
   border: 1px var(--primary) dashed;
   padding: 0 5px 8px 5px;
   border-radius: 2px;

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

@@ -5,9 +5,9 @@ import { Props } from './types'
 
 import './Block.css'
 
-const Block = React.forwardRef<null, React.PropsWithChildren<Props>>(({ label, broken, children }, ref) => {
+const Block = React.forwardRef<null, React.PropsWithChildren<Props>>(({ label, error, children }, ref) => {
   return (
-    <div ref={ref} className={cx("Block", { broken })}>
+    <div ref={ref} className={cx("Block", { error })}>
       {label && <label>{label}</label>}
       <div className="content">{children}</div>
     </div>

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

@@ -1,4 +1,4 @@
 export type Props = {
   label?: string
-  broken?: boolean
+  error?: boolean
 }

packages/@dcl/inspector/src/components/EntityInspector/GltfInspector/GltfInspector.tsx

@@ -27,11 +27,13 @@ export default withSdk<Props>(
 
     const hasGltf = useHasComponent(entity, GltfContainer)
     const handleInputValidation = useCallback(({ src }: { src: string }) => isValidInput(files, src), [files])
-    const { getInputProps, monitor } = useComponentInput(entity, GltfContainer, fromGltf, toGltf, handleInputValidation, [files])
+    const { getInputProps, isValid } = useComponentInput(entity, GltfContainer, fromGltf, toGltf, handleInputValidation, [files])
 
     const handleRemove = useCallback(() => GltfContainer.deleteFrom(entity), [])
-    const handleDrop = useCallback((src: string) => {
-      GltfContainer.createOrReplace(entity, { src })
+    const handleDrop = useCallback(async (src: string) => {
+      const { operations } = sdk
+      operations.updateValue(GltfContainer, entity, { src })
+      await operations.dispatch()
     }, [])
 
     const [{ isHover }, drop] = useDrop(
@@ -65,7 +67,7 @@ export default withSdk<Props>(
             <DeleteIcon /> Delete
           </Item>
         </Menu>
-        <Block label="Path" ref={drop} broken={init && !monitor.isValid}>
+        <Block label="Path" ref={drop} error={init && !isValid}>
           <TextField type="text" {...inputProps} />
         </Block>
       </Container>

packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx

@@ -1,3 +1,4 @@
+import { Entity } from '@dcl/ecs'
 import { useCallback, useState } from 'react'
 import { IoIosArrowDown, IoIosArrowForward, IoIosImage } from 'react-icons/io'
 import { AiFillFolder } from 'react-icons/ai'
@@ -21,14 +22,20 @@ type Props = {
   folders: AssetNodeFolder[]
 }
 
+interface ModalState {
+  isOpen: boolean
+  value: string
+  entities: Entity[]
+}
+
 export const ROOT = 'File System'
 
 export type TreeNode = Omit<AssetNode, 'children'> & { children?: string[] }
 
 function ProjectView({ folders, onImportAsset }: Props) {
   const sdk = useSdk()
   const [open, setOpen] = useState(new Set<string>())
-  const [modal, setModal] = useState<{ isOpen: boolean; value: string } | undefined>(undefined)
+  const [modal, setModal] = useState<ModalState | undefined>(undefined)
   const getTree = useCallback(() => {
     const tree = new Map<string, TreeNode>()
     tree.set(ROOT, { children: folders.map(f => f.name), name: ROOT, type: 'folder', parent: null })
@@ -63,32 +70,37 @@ function ProjectView({ folders, onImportAsset }: Props) {
     setOpen(new Set(open))
   }, [open, setOpen])
 
-  const shouldOpenModal = useCallback((value: string) => {
-    if (!sdk || modal?.isOpen) return false
+  const getEntitiesWithAsset = useCallback((value: string): Entity[] => {
+    if (!sdk || modal?.isOpen) return []
+    const entitiesWithAsset: Entity[] = []
     const { GltfContainer } = sdk.components
-    for (const [_, _value] of sdk.engine.getEntitiesWith(GltfContainer)) {
+    for (const [entity, _value] of sdk.engine.getEntitiesWith(GltfContainer)) {
       if (_value.src === value) {
-        return true
+        entitiesWithAsset.push(entity)
       }
     }
-    return false
+    return entitiesWithAsset
   }, [])
 
   const handleRemove = useCallback(async (value: string) => {
     const path = getFullNodePath(tree.get(value)!).slice(1)
-    if (shouldOpenModal(path)) return setModal({ isOpen: true, value: path })
+    const entitiesWithAsset = getEntitiesWithAsset(path)
+    if (entitiesWithAsset.length) return setModal({ isOpen: true, value: path, entities: entitiesWithAsset })
     await removeAsset(path)
   }, [open, setOpen])
 
-  const removeAsset = useCallback(async (path: string) => {
+  const removeAsset = useCallback(async (path: string, entities: Entity[] = []) => {
     if (!sdk) return
-    await sdk.dataLayer.removeAsset({ path })
+    const { dataLayer, components, operations } = sdk
+    await dataLayer.removeAsset({ path })
     fileSystemEvent.emit('change')
+    entities.forEach(($) => operations.updateValue(components.GltfContainer, $, { src: '' }))
+    await operations.dispatch()
   }, [])
 
   const handleConfirm = useCallback(async () => {
     if (!modal) return
-    await removeAsset(modal.value)
+    await removeAsset(modal.value, modal.entities)
     setModal(undefined)
   }, [modal, setModal])
 

packages/@dcl/inspector/src/hooks/sdk/useComponentInput.ts

@@ -29,7 +29,7 @@ export const useComponentInput = <ComponentValueType extends object, InputType e
   )
   const [isFocused, setIsFocused] = useState(false)
   const [skipSync, setSkipSync] = useState(false)
-  const [monitor, setMonitor] = useState({ isValid: false })
+  const [isValid, setIsValid] = useState(false)
 
   const updateInputs = useCallback((value: InputType | null, skipSync = false) => {
     setSkipSync(skipSync)
@@ -83,9 +83,7 @@ export const useComponentInput = <ComponentValueType extends object, InputType e
   }, [componentValue])
 
   useEffect(() => {
-    setMonitor({
-      isValid: validate(input)
-    })
+    setIsValid(validate(input))
   }, [input, ...deps])
 
   const getProps = useCallback(
@@ -104,5 +102,5 @@ export const useComponentInput = <ComponentValueType extends object, InputType e
     [handleUpdate, handleFocus, handleBlur, input]
   )
 
-  return { getInputProps: getProps, monitor }
+  return { getInputProps: getProps, isValid }
 }