fix: Atlas not rendering tenants (#2421)

src/components/Atlas/Atlas.tsx

@@ -19,6 +19,7 @@ const Atlas: React.FC<Props> = props => {
     emptyTiles,
     showOwner,
     showOperator,
+    showTenant,
     showControls,
     hasPopup,
     className,
@@ -79,32 +80,37 @@ const Atlas: React.FC<Props> = props => {
     [props.x, props.y, landId, isEstate, selection]
   )
 
-  const shouldShowLayer = (tile?: LandTile, showOwner?: boolean, showOperator?: boolean) => {
-    return !!tile && ((showOwner && tile.land.role === RoleType.OWNER) || (showOperator && tile.land.role === RoleType.OPERATOR))
+  const shouldShowLayer = (tile?: LandTile, showOwner?: boolean, showOperator?: boolean, showTenant?: boolean) => {
+    return (
+      !!tile &&
+      ((showOwner && tile.land.role === RoleType.OWNER) ||
+        (showOperator && tile.land.role === RoleType.OPERATOR) ||
+        (showTenant && tile.land.role === RoleType.TENANT))
+    )
   }
 
   const landLayer: Layer = useCallback(
     (x, y) => {
       const id = coordsToId(x, y)
       const tile = landTiles[id]
-      if (shouldShowLayer(tile, showOwner, showOperator)) {
+      if (shouldShowLayer(tile, showOwner, showOperator, showTenant)) {
         return tile || null
       }
       return null
     },
-    [landTiles, showOwner, showOperator]
+    [landTiles, showOwner, showOperator, showTenant]
   )
 
   const unoccupiedLayer: Layer = useCallback(
     (x, y) => {
       const id = coordsToId(x, y)
       const tile = landTiles[id]
-      if (shouldShowLayer(tile, showOwner, showOperator)) {
+      if (shouldShowLayer(tile, showOwner, showOperator, showTenant)) {
         return emptyTiles[id] || null
       }
       return null
     },
-    [emptyTiles, landTiles, showOwner, showOperator]
+    [emptyTiles, landTiles, showOwner, showOperator, showTenant]
   )
 
   const handleHover = useCallback(

src/components/Atlas/Atlas.types.ts

@@ -9,6 +9,7 @@ export type Props = Partial<AtlasProps> & {
   landTiles: Record<string, LandTile>
   emptyTiles: Record<string, Tile>
   showOperator?: boolean
+  showTenant?: boolean
   showControls?: boolean
   landId?: string
   showOwner?: boolean

src/components/LandDetailPage/LandDetailPage.tsx

@@ -274,8 +274,8 @@ export default class LandDetailPage extends React.PureComponent<Props, State> {
             {land.operators.length > 0 ? (
               <Stats title={t('land_detail_page.operated_by')} className="operators">
                 <Row>
-                  {land.operators.map(operator => (
-                    <Profile address={operator} size="large" />
+                  {land.operators.map((operator, index) => (
+                    <Profile key={index} address={operator} size="large" />
                   ))}
                 </Row>
               </Stats>

src/components/Modals/DeployModal/DeployToLand/DeployToLand.tsx

@@ -230,7 +230,7 @@ export default class DeployToLand extends React.PureComponent<Props, State> {
   }
 
   renderMap = () => {
-    const { ethAddress, media, project, deployments, deploymentsByCoord, landTiles, isLoggedIn } = this.props
+    const { media, project, deployments, deploymentsByCoord, landTiles, isLoggedIn } = this.props
     const deployment = getDeployment(project, deployments)
     return (
       <div className="DeployToLand atlas">
@@ -242,7 +242,6 @@ export default class DeployToLand extends React.PureComponent<Props, State> {
           <Icon name="modal-back" onClick={this.handleBack} />
         </div>
         <LandAtlas
-          ethAddress={ethAddress}
           media={media}
           project={project}
           deploymentsByCoord={deploymentsByCoord}

src/components/Modals/DeployModal/DeployToLand/LandAtlas/LandAtlas.tsx

@@ -112,7 +112,7 @@ export default class LandAtlas extends React.PureComponent<Props, State> {
   handleSelectPlacement = () => {
     const { placement } = this.state
     const { onConfirmPlacement } = this.props
-    const overlappedDeployment = this.getOverlappedDeployemnt()
+    const overlappedDeployment = this.getOverlappedDeployment()
     if (placement) {
       overlappedDeployment ? onConfirmPlacement(placement, overlappedDeployment.id) : onConfirmPlacement(placement)
     }
@@ -158,7 +158,7 @@ export default class LandAtlas extends React.PureComponent<Props, State> {
     return input
   }
 
-  getOverlappedDeployemnt = () => {
+  getOverlappedDeployment = () => {
     const { deploymentsByCoord, project } = this.props
     const { placement } = this.state
     if (project && placement) {
@@ -197,7 +197,7 @@ export default class LandAtlas extends React.PureComponent<Props, State> {
     const parcelCount = Object.keys(landTiles).length
     const [targetX, targetY] = currentLandId ? idToCoords(currentLandId) : [0, 0]
     const target: Coordinate = { x: targetX, y: targetY }
-    const overlappedDeployment = this.getOverlappedDeployemnt()
+    const overlappedDeployment = this.getOverlappedDeployment()
     const conflictingDeployment =
       overlappedDeployment &&
       deployment &&
@@ -238,6 +238,8 @@ export default class LandAtlas extends React.PureComponent<Props, State> {
         <div className="atlas-container">
           <Atlas
             showControls
+            showOperator
+            showTenant
             onLocateLand={this.handleLocateLand}
             layers={[this.strokeLayer, this.highlightLayer]}
             onHover={this.handleHover}

src/components/Modals/DeployModal/DeployToLand/LandAtlas/LandAtlas.types.ts

@@ -4,7 +4,6 @@ import { Coordinate, Rotation, Placement, Deployment } from 'modules/deployment/
 import { LandTile } from 'modules/land/types'
 
 export type Props = {
-  ethAddress: string | undefined
   project: Project
   media: Media | null
   isLoggedIn: boolean

src/components/SceneDetailPage/SceneDetailPage.tsx

@@ -80,7 +80,7 @@ export default class SceneDetailPage extends React.PureComponent<Props> {
               <>
                 <div className="deployments">
                   {deployments.map(deployment => (
-                    <DeploymentDetail project={project} deployment={deployment} />
+                    <DeploymentDetail key={deployment.id} project={project} deployment={deployment} />
                   ))}
                 </div>
                 <div className="notice">{t('analytics.notice')}</div>

src/modules/land/utils.ts

@@ -39,25 +39,25 @@ export const colorByRole: Record<RoleType, string> = {
 export const emptyColorByRole: Record<RoleType, string> = {
   [RoleType.OWNER]: '#ab2039',
   [RoleType.OPERATOR]: '#8f1d9b',
-  [RoleType.TENANT]: '#8f1d9b'
+  [RoleType.TENANT]: '#D18157'
 }
 
 export const selectionBorderColorByRole: Record<RoleType, string> = {
   [RoleType.OWNER]: '#ff8199',
   [RoleType.OPERATOR]: '#d742e8',
-  [RoleType.TENANT]: '#d742e8'
+  [RoleType.TENANT]: '#FEBD9A'
 }
 
 export const hoverFillByRole = {
   [RoleType.OWNER]: '#ff8199',
   [RoleType.OPERATOR]: '#d742e8',
-  [RoleType.TENANT]: '#d742e8'
+  [RoleType.TENANT]: '#FEBD9A'
 }
 
 export const hoverStrokeByRole = {
   [RoleType.OWNER]: '#fcc6d1',
   [RoleType.OPERATOR]: '#ef5eff',
-  [RoleType.TENANT]: '#ef5eff'
+  [RoleType.TENANT]: '#FED5BF'
 }
 
 export const getSelection = (land: Land) =>