feat: enable resize scene sdk7 (#2851)

package.json

@@ -11,7 +11,7 @@
     "@dcl/hashing": "^3.0.4",
     "@dcl/mini-rpc": "^1.0.6",
     "@dcl/schemas": "^8.2.2",
-    "@dcl/sdk": "^7.3.6",
+    "@dcl/sdk": "^7.3.9",
     "@dcl/single-sign-on-client": "^0.0.12",
     "@dcl/ui-env": "^1.2.0",
     "@testing-library/jest-dom": "^5.16.4",

src/components/InspectorPage/InspectorPage.container.ts

@@ -3,6 +3,7 @@ import { RootState } from 'modules/common/types'
 import { isLoggedIn } from 'modules/identity/selectors'
 import { getCurrentScene } from 'modules/scene/selectors'
 import { connectInspector, openInspector } from 'modules/inspector/actions'
+import { isReloading } from 'modules/inspector/selectors'
 import { getIsInspectorEnabled } from 'modules/features/selectors'
 import { MapStateProps, MapDispatch, MapDispatchProps } from './InspectorPage.types'
 import EditorPage from './InspectorPage'
@@ -11,7 +12,8 @@ const mapState = (state: RootState): MapStateProps => {
   return {
     isLoggedIn: isLoggedIn(state),
     scene: getCurrentScene(state),
-    isInspectorEnabled: getIsInspectorEnabled(state)
+    isInspectorEnabled: getIsInspectorEnabled(state),
+    isReloading: isReloading(state)
   }
 }
 

src/components/InspectorPage/InspectorPage.tsx

@@ -31,7 +31,7 @@ export default class InspectorPage extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { scene, isLoggedIn, isInspectorEnabled } = this.props
+    const { scene, isLoggedIn, isInspectorEnabled, isReloading } = this.props
 
     if (!isInspectorEnabled) {
       return <NotFoundPage />
@@ -43,8 +43,8 @@ export default class InspectorPage extends React.PureComponent<Props, State> {
 
     return (
       <div className="InspectorPage">
-        {!this.state.isLoaded && <Loader active />}
-        {scene && (
+        {(!this.state.isLoaded || isReloading) && <Loader active />}
+        {scene && !isReloading && (
           <>
             <TopBar />
             <iframe

src/components/InspectorPage/InspectorPage.types.ts

@@ -6,6 +6,7 @@ export type Props = {
   scene: Scene | null
   isLoggedIn: boolean
   isInspectorEnabled: boolean
+  isReloading: boolean
   onOpen: typeof openInspector
   onConnect: typeof connectInspector
 }
@@ -14,6 +15,6 @@ export type State = {
   isLoaded: boolean
 }
 
-export type MapStateProps = Pick<Props, 'isLoggedIn' | 'scene' | 'isInspectorEnabled'>
+export type MapStateProps = Pick<Props, 'isLoggedIn' | 'scene' | 'isInspectorEnabled' | 'isReloading'>
 export type MapDispatchProps = Pick<Props, 'onOpen' | 'onConnect'>
 export type MapDispatch = Dispatch<OpenInspectorAction | ConnectInspectorAction>

src/components/Modals/EditProjectModal/EditProjectModal.tsx

@@ -65,7 +65,7 @@ export default class EditProjectModal extends React.PureComponent<Props, State>
   }
 
   render() {
-    const { name, deploymentStatus, currentScene, onClose } = this.props
+    const { name, deploymentStatus, onClose } = this.props
     const { title, description, rows, cols, hasError } = this.state
     const isSubmitDisabled = hasError || deploymentStatus !== DeploymentStatus.UNPUBLISHED
 
@@ -77,14 +77,12 @@ export default class EditProjectModal extends React.PureComponent<Props, State>
             <div className="details">
               <ProjectFields.Title value={title} onChange={this.handleTitleChange} required icon="asterisk" />
               <ProjectFields.Description value={description} onChange={this.handleDescriptionChange} />
-              {currentScene.sdk6 && (
-                <div className="picker">
-                  <Header sub className="picker-label">
-                    {t('edit_project_modal.custom_layout_label')}
-                  </Header>
-                  <ProjectLayoutPicker rows={rows} cols={cols} onChange={this.handleLayoutChange} />
-                </div>
-              )}
+              <div className="picker">
+                <Header sub className="picker-label">
+                  {t('edit_project_modal.custom_layout_label')}
+                </Header>
+                <ProjectLayoutPicker rows={rows} cols={cols} onChange={this.handleLayoutChange} />
+              </div>
             </div>
             <div className="error">{deploymentStatus !== DeploymentStatus.UNPUBLISHED && t('edit_project_modal.unpublish_needed')}</div>
           </Modal.Content>

src/modules/inspector/actions.ts

@@ -31,3 +31,7 @@ export type RPCFailureAction = ReturnType<typeof rpcFailure>
 export const TOGGLE_SCREENSHOT = 'Toggle Screenshot'
 export const toggleScreenshot = (enabled: boolean) => action(TOGGLE_SCREENSHOT, { enabled })
 export type ToggleScreenshotAction = ReturnType<typeof toggleScreenshot>
+
+export const SET_INSPECTOR_RELOADING = 'Set Inspector Reloading'
+export const setInspectorReloading = (value: boolean) => action(SET_INSPECTOR_RELOADING, { value })
+export type SetInspectorReloadingAction = ReturnType<typeof setInspectorReloading>

src/modules/inspector/reducer.ts

@@ -1,23 +1,31 @@
-import { ToggleScreenshotAction, TOGGLE_SCREENSHOT } from './actions'
+import { SetInspectorReloadingAction, SET_INSPECTOR_RELOADING, ToggleScreenshotAction, TOGGLE_SCREENSHOT } from './actions'
 
 export type InspectorState = {
   screenshotEnabled: boolean
+  isReloading: boolean
 }
 
 const INITIAL_STATE: InspectorState = {
-  screenshotEnabled: true
+  screenshotEnabled: true,
+  isReloading: false
 }
 
-type InspectorReducerAction = ToggleScreenshotAction
+type InspectorReducerAction = ToggleScreenshotAction | SetInspectorReloadingAction
 
-export function inspectorReducer(state = INITIAL_STATE, action: InspectorReducerAction) {
+export function inspectorReducer(state = INITIAL_STATE, action: InspectorReducerAction): InspectorState {
   switch (action.type) {
     case TOGGLE_SCREENSHOT: {
       return {
         ...state,
         screenshotEnabled: action.payload.enabled
       }
     }
+    case SET_INSPECTOR_RELOADING: {
+      return {
+        ...state,
+        isReloading: action.payload.value
+      }
+    }
     default:
       return state
   }

src/modules/inspector/sagas.ts

@@ -38,7 +38,7 @@ import {
 } from './actions'
 import { Project } from 'modules/project/types'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
-import { IframeStorage } from '@dcl/inspector'
+import { IframeStorage, UiClient } from '@dcl/inspector'
 import { MessageTransport } from '@dcl/mini-rpc'
 import { getParcels } from './utils'
 import { BuilderAPI, getContentsStorageUrl } from 'lib/api/builder'
@@ -123,6 +123,11 @@ export function* inspectorSaga(builder: BuilderAPI, store: RootStore) {
       })
     }
 
+    // configure UI
+    const ui = new UiClient(transport)
+    yield call([ui, 'selectAssetsTab'], 'AssetsPack')
+    yield call([ui, 'toggleComponent'], 'inspector::Scene', false)
+
     // wait for RPC to be idle (3 seconds)
     yield waitForRpcIdle(3000)
 

src/modules/inspector/selectors.ts

@@ -2,3 +2,4 @@ import { RootState } from 'modules/common/types'
 
 export const getState = (state: RootState) => state.inspector
 export const isScreenshotEnabled = (state: RootState) => getState(state).screenshotEnabled
+export const isReloading = (state: RootState) => getState(state).isReloading

src/modules/inspector/utils.ts

@@ -1,7 +1,7 @@
 import { Composite, CompositeDefinition } from '@dcl/ecs'
 import { createEngineContext, dumpEngineToComposite, dumpEngineToCrdtCommands } from '@dcl/inspector'
 import { Layout, Project } from 'modules/project/types'
-import { ComponentData, ComponentType, SceneSDK6 } from 'modules/scene/types'
+import { ComponentData, ComponentType, SceneSDK6, SceneSDK7 } from 'modules/scene/types'
 
 export function getParcels(layout: Layout) {
   const parcels: { x: number; y: number }[] = []
@@ -74,3 +74,36 @@ export function toCrdt(scene: SceneSDK6, project?: Project) {
   const engine = getEngine(scene, project)
   return dumpEngineToCrdtCommands(engine as any)
 }
+
+export function changeLayout(scene: SceneSDK7, layout: Layout) {
+  const sceneComponent = scene.composite.components.find(component => component.name === 'inspector::Scene')!
+  const newData = {
+    ...sceneComponent.data
+  } as any
+
+  newData[0] = {
+    ...newData[0],
+    json: {
+      ...newData[0].json,
+      layout: {
+        ...newData[0].json.layout,
+        parcels: getParcels(layout)
+      }
+    }
+  }
+
+  const newScene: SceneSDK7 = {
+    ...scene,
+    composite: {
+      ...scene.composite,
+      components: [
+        ...scene.composite.components.filter(component => component.name !== 'inspector::Scene'),
+        {
+          ...sceneComponent,
+          data: newData
+        }
+      ]
+    }
+  }
+  return newScene
+}

src/modules/project/sagas.ts

@@ -54,13 +54,19 @@ import { SDKVersion, Scene } from 'modules/scene/types'
 import { getData as getProjects } from 'modules/project/selectors'
 import { getData as getScenes } from 'modules/scene/selectors'
 import { EMPTY_SCENE_METRICS } from 'modules/scene/constants'
-import { createScene, setGround, applyLayout } from 'modules/scene/actions'
+import { createScene, setGround, applyLayout, updateScene } from 'modules/scene/actions'
 import { SET_EDITOR_READY, setEditorReady, takeScreenshot, setExportProgress, createEditorScene, setGizmo } from 'modules/editor/actions'
 import { store } from 'modules/common/store'
 import { isRemoteURL } from 'modules/media/utils'
 import { getSceneByProjectId } from 'modules/scene/utils'
 import { BUILDER_SERVER_URL, BuilderAPI } from 'lib/api/builder'
-import { SAVE_PROJECT_SUCCESS, saveProjectRequest } from 'modules/sync/actions'
+import {
+  SAVE_PROJECT_SUCCESS,
+  saveProjectRequest,
+  SAVE_PROJECT_FAILURE,
+  SaveProjectSuccessAction,
+  SaveProjectFailureAction
+} from 'modules/sync/actions'
 import { Gizmo, PreviewType } from 'modules/editor/types'
 import { Pool } from 'modules/pool/types'
 import { loadProfileRequest } from 'decentraland-dapps/dist/modules/profile/actions'
@@ -72,7 +78,8 @@ import { locations } from 'routing/locations'
 import { downloadZip } from 'lib/zip'
 import { didUpdateLayout, getImageAsDataUrl } from './utils'
 import { createFiles, createSDK7Files } from './export'
-import { getParcels } from 'modules/inspector/utils'
+import { changeLayout, getParcels } from 'modules/inspector/utils'
+import { setInspectorReloading } from 'modules/inspector/actions'
 
 export function* projectSaga(builder: BuilderAPI) {
   yield takeLatest(CREATE_PROJECT_FROM_TEMPLATE, handleCreateProjectFromTemplate)
@@ -231,12 +238,30 @@ export function* projectSaga(builder: BuilderAPI) {
     yield put(setProject(newProject))
 
     if (shouldApplyLayout) {
-      yield put(setEditorReady(false))
-      yield put(createEditorScene(newProject))
-      yield take(SET_EDITOR_READY)
-      yield put(applyLayout(newProject))
-      yield put(ActionCreators.clearHistory())
-      yield put(takeScreenshot())
+      if (scene.sdk6) {
+        yield put(setEditorReady(false))
+        yield put(createEditorScene(newProject))
+        yield take(SET_EDITOR_READY)
+        yield put(applyLayout(newProject))
+        yield put(ActionCreators.clearHistory())
+        yield put(takeScreenshot())
+      } else if (scene.sdk7) {
+        const newScene = changeLayout(scene.sdk7, project.layout!)
+
+        yield put(setInspectorReloading(true))
+
+        yield put(updateScene(newScene))
+        const { failure }: { success: SaveProjectSuccessAction | null; failure: SaveProjectFailureAction | null } = yield race({
+          success: take(SAVE_PROJECT_SUCCESS),
+          failure: take(SAVE_PROJECT_FAILURE)
+        })
+
+        yield put(setInspectorReloading(false))
+
+        if (failure) {
+          console.error(`Error saving project=${project.id!}`)
+        }
+      }
     }
   }