feat: added icons and tooltips to player and camera entities (#922)

packages/@dcl/inspector/package.json

@@ -2,7 +2,7 @@
   "name": "@dcl/inspector",
   "version": "0.1.0",
   "dependencies": {
-    "@dcl/asset-packs": "1.14.0",
+    "@dcl/asset-packs": "1.15.2",
     "ts-deepmerge": "^7.0.0"
   },
   "devDependencies": {
@@ -71,4 +71,4 @@
   },
   "types": "dist/tooling-entrypoint.d.ts",
   "typings": "dist/tooling-entrypoint.d.ts"
-}
+}

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

@@ -4,3 +4,20 @@
   overflow-y: auto;
   padding: 6px;
 }
+
+.Hierarchy .tree-icon {
+  width: 16px;
+  height: 14px;
+  margin-right: 4px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.Hierarchy .player-icon {
+  background-image: url(./icons/player.svg);
+}
+
+.Hierarchy .camera-icon {
+  background-image: url(./icons/camera.svg);
+}

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

@@ -12,6 +12,10 @@ import './Hierarchy.css'
 function HierarchyIcon({ value }: { value: Entity }) {
   if (value === ROOT) {
     return <span style={{ marginRight: '4px' }}></span>
+  } else if (value === PLAYER) {
+    return <span className="tree-icon player-icon"></span>
+  } else if (value === CAMERA) {
+    return <span className="tree-icon camera-icon"></span>
   } else {
     return <FiHexagon style={{ marginRight: '4px' }} />
   }

packages/@dcl/inspector/src/components/Tree/ActionArea/ActionArea.tsx

@@ -8,6 +8,8 @@ import { useEntityComponent } from '../../../hooks/sdk/useEntityComponent'
 import { SdkContextValue } from '../../../lib/sdk/context'
 import { analytics, Event } from '../../../lib/logic/analytics'
 import { getAssetByModel } from '../../../lib/logic/catalog'
+import { CAMERA, PLAYER, ROOT } from '../../../lib/sdk/tree'
+import { InfoTooltip } from '../../ui'
 
 import './ActionArea.css'
 
@@ -98,10 +100,55 @@ const ActionArea: React.FC<WithSdkProps & Props> = ({ sdk, ...props }) => {
     )
   }, [isEntityHidden, handleToggleHideComponent])
 
+  const isRoot = entity === ROOT
+  const isPlayer = entity === PLAYER
+  const isCamera = entity === CAMERA
+  const isEntity = !isPlayer && !isCamera && !isRoot
+
+  const infoTooltip = useCallback(
+    (text: string, learnMore?: string) => (
+      <div className="action-button">
+        <InfoTooltip
+          text={
+            <>
+              {text}
+              {learnMore ? (
+                <>
+                  &nbsp;
+                  <a href={learnMore} target="_blank" rel="noopener">
+                    Learn more
+                  </a>
+                </>
+              ) : null}
+            </>
+          }
+          type="info"
+          position="right center"
+        />
+      </div>
+    ),
+    []
+  )
+
   return (
     <div className="action-area">
-      {toggleLockButton()}
-      {toggleVisibleButton()}
+      {isEntity && toggleLockButton()}
+      {isEntity && toggleVisibleButton()}
+      {isPlayer &&
+        infoTooltip(
+          'The player’s avatar. Nested items are fixed to the player’s position.',
+          'https://docs.decentraland.org/creator/web-editor/#special-entities'
+        )}
+      {isCamera &&
+        infoTooltip(
+          'The player’s camera. Nested items remain fixed to the camera’s position.',
+          'https://docs.decentraland.org/creator/web-editor/#special-entities'
+        )}
+      {isRoot &&
+        infoTooltip(
+          'The root entity. All items in the scene are children of this entity. Open it to adjust the scene settings.',
+          'https://docs.decentraland.org/creator/development-guide/sdk7/scene-metadata/#metadata'
+        )}
     </div>
   )
 }

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

@@ -4,7 +4,6 @@ import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io'
 import cx from 'classnames'
 import { Entity } from '@dcl/ecs'
 
-import { ROOT } from '../../lib/sdk/tree'
 import { withContextMenu } from '../../hoc/withContextMenu'
 import { Input } from '../Input'
 import { ContextMenu } from './ContextMenu'
@@ -194,7 +193,7 @@ export function Tree<T>() {
       }
 
       const isEntity = useMemo(() => {
-        return typeof value !== 'string' && (value as Entity) !== ROOT
+        return typeof value !== 'string'
       }, [value])
 
       drag(drop(ref))