feat: show instance of in entity header

decentraland · Dec 16, 2024 · e8dad99 · e8dad99
1 parent 5101748
commit e8dad99
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 34 deletions.
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.css b/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.css
@@ -6,44 +6,51 @@
   border-bottom: 1px solid var(--border-gray);
 
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.EntityHeader .Title {
+  flex: auto;
+  display: flex;
   align-items: center;
   gap: 4px;
 }
 
-.EntityHeader .title {
+.EntityHeader .TitleWrapper {
   display: flex;
-  align-items: center;
+  flex-direction: row;
   width: 100%;
 }
 
-.EntityHeader .title > svg {
+.EntityHeader .Title > svg {
   margin-left: 5px;
   cursor: pointer;
 }
 
-.EntityHeader > .RightContent {
+.EntityHeader .RightContent {
   display: flex;
   flex-grow: 1;
   justify-content: flex-end;
   align-items: center;
   font-size: 14px;
 }
 
-.EntityHeader > .RightContent > .Dropdown.Trigger > .DropdownContainer.AddComponent > .OptionList {
+.EntityHeader .RightContent > .Dropdown.Trigger > .DropdownContainer.AddComponent > .OptionList {
   min-width: 155px;
   white-space: nowrap;
   right: 0;
   left: unset;
   max-height: max-content;
 }
 
-.EntityHeader > .RightContent > .Dropdown.Trigger > .DropdownContainer.AddComponent {
+.EntityHeader .RightContent > .Dropdown.Trigger > .DropdownContainer.AddComponent {
   background-color: transparent;
   border-color: transparent;
 }
 
-.EntityHeader > .RightContent > .MoreOptionsMenu > .MoreOptionsContent {
+.EntityHeader .RightContent > .MoreOptionsMenu > .MoreOptionsContent {
   min-width: 190px;
 }
 
@@ -121,3 +128,36 @@
 .EntityHeader.ModalOverlay .ToggleBasicViewModal .ModalBody .ModalActions .Button.primary {
   background-color: var(--accent-blue-07);
 }
+
+.EntityHeader .subtitle {
+  font-size: 12px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.EntityHeader .InstanceOf {
+  width: 100%;
+  font-size: 11px;
+  font-weight: 400;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
+.EntityHeader .InstanceOf .content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.EntityHeader .InstanceOf .Chip {
+  font-weight: 500;
+  background-color: var(--base-14);
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.tsx b/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.tsx
@@ -26,6 +26,10 @@ import MoreOptionsMenu from '../MoreOptionsMenu'
 import { RemoveButton } from '../RemoveButton'
 
 import './EntityHeader.css'
+import { useAppSelector } from '../../../redux/hooks'
+import { selectCustomAssets } from '../../../redux/app'
+import CustomAssetIcon from '../../Icons/CustomAsset'
+import { Container } from '../../Container'
 
 interface ModalState {
   isOpen: boolean
@@ -60,11 +64,19 @@ export default React.memo(
     const [label, setLabel] = useState<string | null>()
     const [modal, setModal] = useState<ModalState>({ isOpen: false })
     const [editMode, setEditMode] = useState(false)
+    const [instanceOf, setInstanceOf] = useState<string | null>(null)
+    const customAssets = useAppSelector(selectCustomAssets)
 
     useEffect(() => {
       setLabel(getLabel(sdk, entity))
     }, [sdk, entity])
 
+    useEffect(() => {
+      const customAssetId = sdk.components.CustomAsset.getOrNull(entity)?.assetId || null
+      const customAsset = customAssets.find((asset) => asset.id === customAssetId)
+      setInstanceOf(customAsset?.name || null)
+    }, [customAssets, sdk, entity])
+
     const handleUpdate = (event: SdkContextEvents['change']) => {
       if (event.entity === entity && event.component === sdk.components.Name) {
         setLabel(getLabel(sdk, entity))
@@ -419,29 +431,41 @@ export default React.memo(
 
     return (
       <div className="EntityHeader">
-        <div className="title">
-          {!editMode ? (
-            <>
-              {label}
-              {!editMode && !isRoot(entity) ? <RenameIcon onClick={enterEditMode} /> : null}
-            </>
-          ) : typeof label === 'string' ? (
-            <EditInput value={label} onCancel={quitEditMode} onSubmit={handleRenameEntity} />
-          ) : null}
-        </div>
-        <div className="RightContent">
-          {componentOptions.some((option) => !option.header) ? (
-            <Dropdown className="AddComponent" options={componentOptions} trigger={<AddIcon />} />
-          ) : null}
-          {!isRoot(entity) ? (
-            <MoreOptionsMenu>
-              {hasConfigComponent ? renderToggleAdvanceMode() : <></>}
-              <RemoveButton className="RemoveButton" onClick={handleRemoveEntity}>
-                Delete Entity
-              </RemoveButton>
-            </MoreOptionsMenu>
-          ) : null}
+        <div className="TitleWrapper">
+          <div className="Title">
+            {instanceOf && <CustomAssetIcon />}
+            {!editMode ? (
+              <>
+                {label}
+                {!editMode && !isRoot(entity) ? <RenameIcon onClick={enterEditMode} /> : null}
+              </>
+            ) : typeof label === 'string' ? (
+              <EditInput value={label} onCancel={quitEditMode} onSubmit={handleRenameEntity} />
+            ) : null}
+          </div>
+          <div className="RightContent">
+            {componentOptions.some((option) => !option.header) ? (
+              <Dropdown className="AddComponent" options={componentOptions} trigger={<AddIcon />} />
+            ) : null}
+            {!isRoot(entity) ? (
+              <MoreOptionsMenu>
+                {hasConfigComponent ? renderToggleAdvanceMode() : <></>}
+                <RemoveButton className="RemoveButton" onClick={handleRemoveEntity}>
+                  Delete Entity
+                </RemoveButton>
+              </MoreOptionsMenu>
+            ) : null}
+          </div>
         </div>
+        {instanceOf && (
+          <Container className="InstanceOf">
+            <span>Instance of:</span>
+            <span className="Chip">
+              <CustomAssetIcon />
+              {instanceOf}
+            </span>
+          </Container>
+        )}
         <Modal
           isOpen={!!modal.isOpen}
           onRequestClose={handleCloseModal}

diff --git a/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.tsx b/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.tsx
@@ -8,8 +8,11 @@ import { Tree } from '../Tree'
 import { ContextMenu } from './ContextMenu'
 import { withSdk } from '../../hoc/withSdk'
 import './Hierarchy.css'
+import { useAppSelector } from '../../redux/hooks'
+import { selectCustomAssets } from '../../redux/app'
 
 const HierarchyIcon = withSdk<{ value: Entity }>(({ sdk, value }) => {
+  const customAssets = useAppSelector(selectCustomAssets)
   const isSmart = useMemo(
     () =>
       sdk.components.Actions.has(value) ||
@@ -21,7 +24,14 @@ const HierarchyIcon = withSdk<{ value: Entity }>(({ sdk, value }) => {
     [sdk, value]
   )
 
-  const isCustom = useMemo(() => sdk.components.CustomAsset.has(value), [sdk, value])
+  const isCustom = useMemo(() => {
+    if (sdk.components.CustomAsset.has(value)) {
+      const { assetId } = sdk.components.CustomAsset.get(value)
+      const customAsset = customAssets.find((asset) => asset.id === assetId)
+      return !!customAsset
+    }
+    return false
+  }, [sdk, value, customAssets])
 
   const isTile = useMemo(() => sdk.components.Tile.has(value), [sdk, value])
 
@@ -39,12 +49,12 @@ const HierarchyIcon = withSdk<{ value: Entity }>(({ sdk, value }) => {
     return <span className="tree-icon camera-icon"></span>
   } else if (isCustom) {
     return <span className="tree-icon custom-icon"></span>
+  } else if (isGroup) {
+    return <span className="tree-icon group-icon"></span>
   } else if (isSmart) {
     return <span className="tree-icon smart-icon"></span>
   } else if (isTile) {
     return <span className="tree-icon tile-icon"></span>
-  } else if (isGroup) {
-    return <span className="tree-icon group-icon"></span>
   } else {
     return <span className="tree-icon entity-icon"></span>
   }

diff --git a/packages/@dcl/inspector/src/lib/sdk/operations/add-child.ts b/packages/@dcl/inspector/src/lib/sdk/operations/add-child.ts
@@ -25,7 +25,7 @@ export function generateUniqueName(engine: IEngine, Name: NameComponent, value:
   const nodes = getNodes(engine)
 
   let isFirst = true
-  let max = 0
+  let max = 1
   for (const $ of nodes) {
     const name = (Name.getOrNull($.entity)?.value || '').toLowerCase()
     if (pattern.test(name)) {