Remove self-contained GLTF/GLB asset (#569)

* feat: add assset removal

* feat: add Modal component + use it on ProjectAssetExplorer

* fix: comments

Author: nicoecheza

packages/@dcl/inspector/package-lock.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/package.json

@@ -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/App/App.tsx

@@ -14,3 +14,9 @@
   flex-direction: row;
   flex-grow: 1;
 }
+
+.Block.error {
+  border: 1px var(--primary) dashed;
+  padding: 0 5px 8px 5px;
+  border-radius: 2px;
+}

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

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

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

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

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

@@ -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.css

@@ -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/Button.tsx

@@ -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/Button/types.ts

@@ -21,17 +21,19 @@ const DROP_TYPES = ['project-asset-gltf']
 
 export default withSdk<Props>(
   withContextMenu<WithSdkProps & Props>(({ sdk, entity, contextMenuId }) => {
-    const [files] = useFileSystem()
+    const [files, init] = useFileSystem()
     const { handleAction } = useContextMenu()
     const { GltfContainer } = sdk.components
 
     const hasGltf = useHasComponent(entity, GltfContainer)
     const handleInputValidation = useCallback(({ src }: { src: string }) => isValidInput(files, src), [files])
-    const getInputProps = useComponentInput(entity, GltfContainer, fromGltf, toGltf, handleInputValidation)
+    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(
@@ -56,15 +58,17 @@ export default withSdk<Props>(
 
     if (!hasGltf) return null
 
+    const inputProps = getInputProps('src')
+
     return (
       <Container label="Gltf" className={cx('Gltf', { hover: isHover })}>
         <Menu id={contextMenuId}>
           <Item id="delete" onClick={handleAction(handleRemove)}>
             <DeleteIcon /> Delete
           </Item>
         </Menu>
-        <Block label="Path" ref={drop}>
-          <TextField type="text" {...getInputProps('src')} />
+        <Block label="Path" ref={drop} error={init && !isValid}>
+          <TextField type="text" {...inputProps} />
         </Block>
       </Container>
     )