Merge 36ceca6 into bfec183

.github/workflows/audit.yml

@@ -13,6 +13,6 @@ jobs:
           node-version: 18.x
           cache: 'npm'
       - name: Install
-        run: npm i --legacy-peer-deps
+        run: npm ci
       - name: Audit signatures
         run: npm audit signatures

package.json

@@ -12,7 +12,7 @@
     "@dcl/hashing": "^3.0.4",
     "@dcl/mini-rpc": "^1.0.7",
     "@dcl/schemas": "^9.14.0",
-    "@dcl/sdk": "^7.4.5",
+    "@dcl/sdk": "^7.4.7",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.5.0",
     "@sentry/react": "^7.64.0",

src/components/DeployButton/DeployButton.container.ts

@@ -8,11 +8,12 @@ import DeployButton from './DeployButton'
 import { getCurrentLimits, getCurrentMetrics } from 'modules/scene/selectors'
 import { isReady, isLoading, areEntitiesOutOfBoundaries } from 'modules/editor/selectors'
 import { getCurrentProject } from 'modules/project/selectors'
+import { ModelMetrics } from 'modules/models/types'
 
 const mapState = (state: RootState): MapStateProps => ({
   project: getCurrentProject(state)!,
-  limits: getCurrentLimits(state),
-  metrics: getCurrentMetrics(state),
+  limits: getCurrentLimits(state) as ModelMetrics,
+  metrics: getCurrentMetrics(state) as ModelMetrics,
   isLoading: !isReady(state) || isLoading(state),
   areEntitiesOutOfBoundaries: areEntitiesOutOfBoundaries(state),
   deploymentStatus: getCurrentDeploymentStatus(state)

src/components/EditorPage/Metrics/Metrics.container.ts

@@ -3,13 +3,14 @@ import { connect } from 'react-redux'
 import { RootState } from 'modules/common/types'
 import { getCurrentProject } from 'modules/project/selectors'
 import { getCurrentMetrics, getCurrentLimits } from 'modules/scene/selectors'
+import { ModelMetrics } from 'modules/models/types'
 import { MapStateProps } from './Metrics.types'
 import Metrics from './Metrics'
 
 const mapState = (state: RootState): MapStateProps => {
   const currentProject = getCurrentProject(state)
-  const metrics = getCurrentMetrics(state)
-  const limits = getCurrentLimits(state)
+  const metrics = getCurrentMetrics(state) as ModelMetrics
+  const limits = getCurrentLimits(state) as ModelMetrics
 
   if (currentProject) {
     const { rows, cols } = currentProject.layout

src/components/InspectorPage/InspectorPage.tsx

@@ -6,7 +6,16 @@ import TopBar from './TopBar'
 import { Props, State } from './InspectorPage.types'
 import './InspectorPage.css'
 
-const PUBLIC_URL = process.env.VITE_BASE_URL
+/**
+ * Sanitizes a URL by removing the last '/' segment of the path.
+ * @param url - The URL to sanitize.
+ * @returns The sanitized URL.
+ */
+const sanitizeUrl = (url: string) => {
+  return url.replace(/\/([^/]*)$/, '')
+}
+
+const PUBLIC_URL = sanitizeUrl(process.env.VITE_BASE_URL ?? '')
 
 export default class InspectorPage extends React.PureComponent<Props, State> {
   state: State = {

src/components/InspectorPage/TopBar/TopBar.container.ts

@@ -2,15 +2,18 @@ import { connect } from 'react-redux'
 import { goBack } from 'connected-react-router'
 import { RootState } from 'modules/common/types'
 import { getCurrentProject } from 'modules/project/selectors'
-import { getCurrentMetrics } from 'modules/scene/selectors'
+import { getCurrentLimits, getCurrentMetrics, getEntitiesOutOfBoundaries } from 'modules/scene/selectors'
 import { isSavingCurrentProject } from 'modules/sync/selectors'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './TopBar.types'
 import TopBar from './TopBar'
+import { SceneMetrics } from '@dcl/inspector/dist/redux/scene-metrics/types'
 
 const mapState = (state: RootState): MapStateProps => ({
   currentProject: getCurrentProject(state),
-  metrics: getCurrentMetrics(state),
+  metrics: getCurrentMetrics(state) as SceneMetrics,
+  limits: getCurrentLimits(state) as SceneMetrics,
+  areEntitiesOutOfBoundaries: getEntitiesOutOfBoundaries(state) > 0,
   isUploading: isSavingCurrentProject(state)
 })
 

src/components/InspectorPage/TopBar/TopBar.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from 'react'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Button, Icon, Popup } from 'decentraland-ui'
+import { SceneMetrics } from '@dcl/inspector/dist/redux/scene-metrics/types'
 import { Env } from '@dcl/ui-env'
 import { config } from 'config'
 import OwnIcon from 'components/Icon'
@@ -13,7 +14,7 @@ import styles from './TopBar.module.css'
 const EXPLORER_URL = config.get('EXPLORER_URL', '')
 const BUILDER_SERVER_URL = config.get('BUILDER_SERVER_URL', '')
 
-export default function TopBar({ currentProject, isUploading, onBack, onOpenModal }: Props) {
+export default function TopBar({ currentProject, metrics, limits, areEntitiesOutOfBoundaries, isUploading, onBack, onOpenModal }: Props) {
   const handleDownload = useCallback(() => {
     onOpenModal('ExportModal', { project: currentProject })
   }, [currentProject, onOpenModal])
@@ -47,6 +48,23 @@ export default function TopBar({ currentProject, isUploading, onBack, onOpenModa
     return url.toString()
   }, [])
 
+  const someMetricExceedsLimit = useMemo(
+    () => Object.keys(metrics).some(key => metrics[key as keyof SceneMetrics] > limits[key as keyof SceneMetrics]),
+    [metrics]
+  )
+
+  const isPublishDisabled = useMemo(() => {
+    return isUploading || areEntitiesOutOfBoundaries || someMetricExceedsLimit
+  }, [metrics, limits, areEntitiesOutOfBoundaries, someMetricExceedsLimit, isUploading])
+
+  const isPopupDisabled = useMemo(() => isUploading || !isPublishDisabled, [isUploading, isPublishDisabled])
+
+  const renderPopupContent = useCallback(() => {
+    if (areEntitiesOutOfBoundaries) return t('topbar.bounds_exceeded', { br: <br /> })
+    if (someMetricExceedsLimit) return t('topbar.limits_exceeded')
+    return null
+  }, [areEntitiesOutOfBoundaries, someMetricExceedsLimit])
+
   return (
     <div className={styles.container}>
       <div className={styles.nameContainer}>
@@ -82,10 +100,20 @@ export default function TopBar({ currentProject, isUploading, onBack, onOpenModa
           <Icon name="eye" />
           {t('inspector.top_bar.preview')}
         </Button>
-        <Button primary size="small" disabled={isUploading} onClick={handlePublish}>
-          <Icon name="globe" />
-          {t('inspector.top_bar.publish')}
-        </Button>
+        <Popup
+          content={renderPopupContent()}
+          position="bottom center"
+          disabled={isPopupDisabled}
+          trigger={
+            <span>
+              <Button primary size="small" disabled={isPublishDisabled} onClick={handlePublish}>
+                <Icon name="globe" />
+                {t('inspector.top_bar.publish')}
+              </Button>
+            </span>
+          }
+          on="hover"
+        />
       </div>
     </div>
   )

src/components/InspectorPage/TopBar/TopBar.types.ts

@@ -1,18 +1,20 @@
 import { Dispatch } from 'redux'
-import { ModelMetrics } from 'modules/models/types'
+import { SceneMetrics } from '@dcl/inspector/dist/redux/scene-metrics/types'
 import { OpenModalAction, openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { Project } from 'modules/project/types'
 import { CallHistoryMethodAction, goBack } from 'connected-react-router'
 
 export type Props = {
-  metrics: ModelMetrics
+  metrics: SceneMetrics
+  limits: SceneMetrics
+  areEntitiesOutOfBoundaries: boolean
   currentProject: Project | null
   isUploading: boolean
   onBack: typeof goBack
   onOpenModal: typeof openModal
 }
 
-export type MapStateProps = Pick<Props, 'currentProject' | 'metrics' | 'isUploading'>
+export type MapStateProps = Pick<Props, 'currentProject' | 'metrics' | 'limits' | 'areEntitiesOutOfBoundaries' | 'isUploading'>
 
 export type MapDispatchProps = Pick<Props, 'onBack' | 'onOpenModal'>
 export type MapDispatch = Dispatch<CallHistoryMethodAction | OpenModalAction>

src/components/Modals/DeployModal/DeployToWorld/DeployToWorld.tsx

@@ -17,6 +17,7 @@ import { getSizesFromDeploymentError } from './utils'
 import dclImage from './images/dcl.svg'
 import ensImage from './images/ens.svg'
 import styles from './DeployToWorld.module.css'
+import { ModelMetrics } from 'modules/models/types'
 
 const EXPLORER_URL = config.get('EXPLORER_URL', '')
 const WORLDS_CONTENT_SERVER_URL = config.get('WORLDS_CONTENT_SERVER', '')
@@ -316,9 +317,11 @@ export default function DeployToWorld({
           <List.Item>
             {t('metrics.materials')}: {metrics.materials}
           </List.Item>
-          <List.Item>
-            {t('metrics.meshes')}: {metrics.meshes}
-          </List.Item>
+          {Object.prototype.hasOwnProperty.call(metrics, 'meshes') ? (
+            <List.Item>
+              {t('metrics.meshes')}: {(metrics as ModelMetrics).meshes}
+            </List.Item>
+          ) : null}
           <List.Item>
             {t('metrics.bodies')}: {metrics.bodies}
           </List.Item>

src/components/Modals/DeployModal/DeployToWorld/DeployToWorld.types.ts

@@ -1,5 +1,6 @@
 import { Dispatch } from 'redux'
 import { CallHistoryMethodAction } from 'connected-react-router'
+import { SceneMetrics } from '@dcl/inspector/dist/redux/scene-metrics/types'
 import { deployToWorldRequest, DeployToWorldRequestAction } from 'modules/deployment/actions'
 import { recordMediaRequest, RecordMediaRequestAction } from 'modules/media/actions'
 import { ENS } from 'modules/ens/types'
@@ -16,7 +17,7 @@ export type Props = {
   name: string
   project: Project
   scene: Scene | null
-  metrics: ModelMetrics
+  metrics: ModelMetrics | SceneMetrics
   ensList: ENS[]
   externalNames: ENS[]
   deployments: Record<string, Deployment>

src/components/SDK6TopBar/SDK6TopBar.container.ts

@@ -12,12 +12,13 @@ import { isSavingCurrentProject } from 'modules/sync/selectors'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './SDK6TopBar.types'
 import SDK6TopBar from './SDK6TopBar'
 import { hasHistory } from 'modules/location/selectors'
+import { ModelMetrics } from 'modules/models/types'
 
 const mapState = (state: RootState): MapStateProps => ({
   gizmo: getGizmo(state),
   currentProject: getCurrentProject(state),
   currentPoolGroup: getActivePoolGroup(state),
-  metrics: getCurrentMetrics(state),
+  metrics: getCurrentMetrics(state) as ModelMetrics,
   selectedEntityIds: getSelectedEntityIds(state),
   isLoading: !isReady(state) || isLoading(state),
   isPreviewing: isPreviewing(state),

src/modules/deployment/utils.ts

@@ -5,6 +5,7 @@ import { MemoryDatastore } from 'interface-datastore'
 import { EntityContentItemReference } from '@dcl/hashing'
 import { Asset } from 'modules/asset/types'
 import { Project } from 'modules/project/types'
+import { DEFAULT_SCENE_LIMITS } from 'modules/scene/constants'
 import { ComponentType, SceneSDK6 } from 'modules/scene/types'
 import { getContentsStorageUrl } from 'lib/api/builder'
 import { getCatalystContentUrl } from 'lib/api/peer'
@@ -185,14 +186,7 @@ export const getEmptyDeployment = (projectId: string): [Project, SceneSDK6] => {
       entities: 1,
       textures: 0
     },
-    limits: {
-      triangles: 10000,
-      materials: 20,
-      meshes: 200,
-      bodies: 300,
-      entities: 200,
-      textures: 10
-    },
+    limits: DEFAULT_SCENE_LIMITS,
     ground: {
       assetId: 'c9b17021-765c-4d9a-9966-ce93a9c323d1',
       componentId: '25783992-5e2f-4879-b734-eda41c0cc4c0'

src/modules/inspector/utils.ts

@@ -6,8 +6,8 @@ import { ComponentData, ComponentType, SceneSDK6, SceneSDK7 } from 'modules/scen
 
 export function getParcels(layout: Layout) {
   const parcels: { x: number; y: number }[] = []
-  for (let x = 0; x < layout.rows; x++) {
-    for (let y = 0; y < layout.cols; y++) {
+  for (let x = 0; x < layout.cols; x++) {
+    for (let y = 0; y < layout.rows; y++) {
       parcels.push({ x, y })
     }
   }