feat: add Modal component + use it on ProjectAssetExplorer

packages/@dcl/inspector/package.json

@@ -16,6 +16,7 @@
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "@types/react-modal": "^3.16.0",
     "@vscode/webview-ui-toolkit": "^1.2.2",
     "@well-known-components/pushable-channel": "^1.0.3",
     "classnames": "^2.3.2",
@@ -30,6 +31,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
+    "react-modal": "^3.16.1",
     "typescript": "^5.0.2"
   },
   "files": [

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

@@ -15,6 +15,7 @@ import { Toolbar } from '../Toolbar'
 import './App.css'
 import { Resizable } from '../Resizable'
 import ImportAsset from '../ImportAsset'
+import { fileSystemEvent } from '../../hooks/catalog/useFileSystem'
 
 enum Tab {
   FileSystem = 'FileSystem',
@@ -33,6 +34,11 @@ const App = () => {
     [tab]
   )
 
+  const handleSave = useCallback(() => {
+    setTab(Tab.FileSystem)
+    fileSystemEvent.emit('change')
+  }, [])
+
   return (
     <Resizable type="horizontal" min={300} initial={300}>
       <Box>
@@ -56,7 +62,7 @@ const App = () => {
             <div className="footer-content">
               {tab === Tab.AssetsPack && catalog && <AssetsCatalog value={catalog} />}
               {tab === Tab.FileSystem && <ProjectAssetExplorer onImportAsset={handleTabClick(Tab.Import)} />}
-              {tab === Tab.Import && <ImportAsset onSave={handleTabClick(Tab.FileSystem)} />}
+              {tab === Tab.Import && <ImportAsset onSave={handleSave} />}
             </div>
           )}
           <div className="footer-buttons">

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

@@ -16,7 +16,7 @@
 }
 
 .Block.broken {
-  border: 1px #d33c3c dashed;
+  border: 1px var(--primary) dashed;
   padding: 0 5px 8px 5px;
   border-radius: 2px;
 }

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

@@ -24,3 +24,17 @@
   width: 24px;
   height: 24px;
 }
+
+.Button.big {
+  padding: 16px;
+  font-size: 16px;
+}
+
+.Button.danger {
+  background-color: var(--primary);
+}
+
+.Button.danger:hover,
+.Button.danger.active {
+  background-color: var(--primary-darker)
+}

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

@@ -1,15 +1,14 @@
-import React from 'react'
-import classNames from 'classnames'
+import cx from 'classnames'
 
 import { PropTypes } from './types'
 import './Button.css'
 
-function Button(props: PropTypes) {
+function Button({ size, type, ...props }: PropTypes) {
   return (
-    <button {...props} className={classNames('Button', props.className)}>
+    <button {...props} className={cx('Button', size, type, props.className)}>
       {props.children}
     </button>
   )
 }
 
-export default Button
+export default Button

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

@@ -1 +1,6 @@
-export type PropTypes = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+type Button = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+
+export type PropTypes = Omit<Button, 'type' | 'size'> & {
+  type?: 'danger' | 'etc'
+  size?: 'big' | 'etc'
+}

packages/@dcl/inspector/src/components/EntityInspector/TextField/TextField.css

@@ -21,11 +21,11 @@
 .TextField>input {
   width: 100%;
   color: var(--text);
-  background-color: var(--transparent-color);
+  background-color: var(--transparent);
   outline: none;
   border: none;
 }
 
 .TextField:last-child {
   margin-right: 0px;
-}
+}

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

@@ -0,0 +1,24 @@
+.Modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--modal-content-border-color);
+  background: var(--modal-content-bg-color);
+  overflow: auto;
+  border-radius: 3px;
+  outline: none;
+  padding: 20px;
+  min-width: 500px;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.ModalOverlay {
+  position: fixed;
+  inset: 0px;
+  background-color: var(--modal-overlay-bg-color);
+}

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import _Modal from 'react-modal'
+
+import { Props } from './types'
+
+import './Modal.css'
+
+const Modal = ({
+  children,
+  className = '',
+  overlayClassName = '',
+  ...props
+}: Props) => {
+  return (
+    <_Modal
+      ariaHideApp={false}
+      className={`${className} Modal`}
+      overlayClassName={`${overlayClassName} ModalOverlay`}
+      {...props}
+    >
+      {children}
+    </_Modal>
+  )
+}
+
+export default React.memo(Modal)

packages/@dcl/inspector/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+import Modal from './Modal'
+export { Modal }

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

@@ -0,0 +1,4 @@
+import React from 'react'
+import Modal from 'react-modal'
+
+export type Props = React.PropsWithChildren<Modal.Props>

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

@@ -18,4 +18,8 @@
 
 .ProjectView .with-context-menu {
   height: 100%;
-}
+}
+
+.RemoveAsset.Modal > div button {
+  margin-right: 12px;
+}

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

@@ -1,11 +1,15 @@
 import { useCallback, useState } from 'react'
 import { IoIosArrowDown, IoIosArrowForward, IoIosImage } from 'react-icons/io'
+import { AiFillFolder } from 'react-icons/ai'
 
+import { useSdk } from '../../hooks/sdk/useSdk'
+import { fileSystemEvent } from '../../hooks/catalog/useFileSystem'
 import { Tree } from '../Tree'
-import { AssetNode, AssetNodeFolder } from './types'
-import { AiFillFolder } from 'react-icons/ai'
+import { Modal } from '../Modal'
+import Button from '../Button'
+
 import ContextMenu from './ContextMenu'
-import { useSdk } from '../../hooks/sdk/useSdk'
+import { AssetNode, AssetNodeFolder } from './types'
 import { getFullNodePath } from './utils'
 
 function noop() {}
@@ -22,8 +26,9 @@ export const ROOT = 'File System'
 export type TreeNode = Omit<AssetNode, 'children'> & { children?: string[] }
 
 function ProjectView({ folders, onImportAsset }: Props) {
-  const [open, setOpen] = useState(new Set<string>())
   const sdk = useSdk()
+  const [open, setOpen] = useState(new Set<string>())
+  const [modal, setModal] = useState<{ isOpen: boolean; value: string } | 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 })
@@ -58,15 +63,48 @@ function ProjectView({ folders, onImportAsset }: Props) {
     setOpen(new Set(open))
   }, [open, setOpen])
 
-  const handleRemove = useCallback((value: string) => {
-    const node = tree.get(value)!
-    sdk?.dataLayer.removeAsset({ path: getFullNodePath(node) })
+  const shouldOpenModal = useCallback((value: string) => {
+    if (!sdk || modal?.isOpen) return false
+    const { GltfContainer } = sdk.components
+    for (const [_, _value] of sdk.engine.getEntitiesWith(GltfContainer)) {
+      if (_value.src === value) {
+        return true
+      }
+    }
+    return false
+  }, [])
+
+  const handleRemove = useCallback(async (value: string) => {
+    const path = getFullNodePath(tree.get(value)!).slice(1)
+    if (shouldOpenModal(path)) return setModal({ isOpen: true, value: path })
+    await removeAsset(path)
   }, [open, setOpen])
 
+  const removeAsset = useCallback(async (path: string) => {
+    if (!sdk) return
+    await sdk.dataLayer.removeAsset({ path })
+    fileSystemEvent.emit('change')
+  }, [])
+
+  const handleConfirm = useCallback(async () => {
+    if (!modal) return
+    await removeAsset(modal.value)
+    setModal(undefined)
+  }, [modal, setModal])
+
+  const handleModalClose = useCallback(() => setModal(undefined), [])
+
   if (!folders.length) return null
 
   return (
     <div className="ProjectView">
+      <Modal isOpen={!!modal?.isOpen} onRequestClose={handleModalClose} className="RemoveAsset">
+        <h2>⚠️ Removing this asset will break some components</h2>
+        <div>
+          <Button type="danger" size="big" onClick={handleConfirm}>Delete anyway</Button>
+          <Button size="big" onClick={handleModalClose}>Cancel</Button>
+        </div>
+      </Modal>
       <MyTree
         className="editor-assets-tree"
         value={ROOT}

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

@@ -52,7 +52,10 @@ export const useComponentInput = <ComponentValueType extends object, InputType e
     updateInputs(fromComponentValueToInput(componentValue))
   }, [componentValue])
 
-  const validate = useCallback((input: InputType | null): input is InputType => input !== null && validateInput(input), [input, ...deps])
+  const validate = useCallback(
+    (input: InputType | null): input is InputType => input !== null && validateInput(input),
+    [input, ...deps]
+  )
 
   // sync inputs -> engine
   useEffect(() => {

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

@@ -1,4 +1,4 @@
-import { Transform, Entity, EntityMappingMode, IEngine, Composite, OnChangeFunction, CompositeDefinition } from '@dcl/ecs'
+import { Entity, EntityMappingMode, IEngine, Composite, OnChangeFunction, CompositeDefinition } from '@dcl/ecs'
 
 import { DataLayerRpcServer, FileSystemInterface } from '../types'
 import { getFilesInDirectory } from './fs-utils'
@@ -121,8 +121,6 @@ export async function initRpcMethods(
         const prevValue = await fs.readFile(filePath)
         await fs.rm(filePath)
         undoRedo.addUndoFile([{ prevValue, newValue: null, path: filePath }])
-        const asd = engine.addEntity()
-        Transform.create(asd)
       }
       return {}
     }