add entity Name editing from EntityInspector (#1012)

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

@@ -11,6 +11,17 @@
   gap: 4px;
 }
 
+.EntityHeader .title {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.EntityHeader .title > svg {
+  margin-left: 5px;
+  cursor: pointer;
+}
+
 .EntityHeader > .RightContent {
   display: flex;
   flex-grow: 1;

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

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { AiOutlinePlus as AddIcon } from 'react-icons/ai'
 import { VscSettings as SettingsIcon, VscDebugRestart as RevertIcon, VscClose as CloseIcon } from 'react-icons/vsc'
 import { IoMdInformationCircleOutline as InfoIcon } from 'react-icons/io'
+import { MdOutlineDriveFileRenameOutline as RenameIcon } from 'react-icons/md'
 
 import { Entity } from '@dcl/ecs'
 
@@ -16,6 +17,7 @@ import { analytics, Event } from '../../../lib/logic/analytics'
 import { EditorComponentsTypes } from '../../../lib/sdk/components'
 import { SdkContextEvents, SdkContextValue } from '../../../lib/sdk/context'
 
+import { Edit as EditInput } from '../../Tree/Edit'
 import { Button } from '../../Button'
 import { Modal } from '../../Modal'
 import { Dropdown } from '../../ui'
@@ -57,6 +59,7 @@ export default React.memo(
     )
     const [label, setLabel] = useState<string | null>()
     const [modal, setModal] = useState<ModalState>({ isOpen: false })
+    const [editMode, setEditMode] = useState(false)
 
     useEffect(() => {
       setLabel(getLabel(sdk, entity))
@@ -286,6 +289,20 @@ export default React.memo(
       return options.filter((option) => !option.id || availableIds.has(option.id))
     }, [sdk, availableComponents, isComponentDisabled, handleClickAddComponent])
 
+    const quitEditMode = useCallback(() => setEditMode(false), [])
+    const enterEditMode = useCallback(() => setEditMode(true), [])
+
+    const handleRenameEntity = useCallback(
+      async (value: string) => {
+        if (isRoot(entity)) return
+        const { Name } = sdk.components
+        sdk.operations.updateValue(Name, entity, { value })
+        await sdk.operations.dispatch()
+        quitEditMode()
+      },
+      [entity, sdk]
+    )
+
     const handleRemoveEntity = useCallback(async () => {
       sdk.operations.removeEntity(entity)
       await sdk.operations.dispatch()
@@ -402,7 +419,16 @@ export default React.memo(
 
     return (
       <div className="EntityHeader">
-        {label}
+        <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 />} />

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

@@ -8,7 +8,7 @@ import { Props } from './types'
 import './Edit.css'
 
 export function Edit({ value, onCancel, onSubmit }: Props) {
-  const [tmpValue, setTmpValue] = useState('')
+  const [tmpValue, setTmpValue] = useState(value)
   const [isOpen, setIsOpen] = useState(false)
 
   const handleModalClose = useCallback(() => {
@@ -31,7 +31,7 @@ export function Edit({ value, onCancel, onSubmit }: Props) {
 
   return (
     <>
-      <Modal isOpen={isOpen} onRequestClose={handleModalClose} className="EditTree">
+      <Modal isOpen={isOpen && tmpValue !== value} onRequestClose={handleModalClose} className="EditTree">
         <h2>⚠️ Rename</h2>
         <span>
           Do you want to rename "{value}" to "{tmpValue}"

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

@@ -6,7 +6,7 @@ import { SdkContextValue } from '../../lib/sdk/context'
 import { useSdk } from './useSdk'
 import { CoreComponents } from '../../lib/sdk/components'
 import { getConfig } from '../../lib/logic/config'
-import { CAMERA, PLAYER, ROOT } from '../../lib/sdk/tree'
+import { CAMERA, EDITOR_ENTITIES, PLAYER, ROOT } from '../../lib/sdk/tree'
 
 export const DISABLED_COMPONENTS: string[] = [
   CoreComponents.ANIMATOR,
@@ -33,7 +33,7 @@ export const ROOT_COMPONENTS: Record<Entity, string[]> = {
 }
 
 export function isRoot(entity: Entity) {
-  return entity === ROOT || entity === PLAYER || entity === CAMERA
+  return EDITOR_ENTITIES.includes(entity)
 }
 
 export function getEnabledComponents(disabledComponents = DISABLED_COMPONENTS) {

packages/@dcl/inspector/src/lib/sdk/tree.ts

@@ -1,9 +1,9 @@
 import { Entity, engine, IEngine } from '@dcl/ecs'
 import { EditorComponents } from './components'
 
-export const ROOT = engine.RootEntity
-export const PLAYER = engine.PlayerEntity
-export const CAMERA = engine.CameraEntity
+export const EDITOR_ENTITIES = [engine.RootEntity, engine.PlayerEntity, engine.CameraEntity]
+
+export const [ROOT, PLAYER, CAMERA] = EDITOR_ENTITIES
 
 /**
  * Returns a tree in the shape of Map<Entity, Set<Entity>> where the key is the parent and the value is the children