feat: sdk7 templates

package.json

@@ -6,6 +6,7 @@
     "@babylonjs/core": "^4.2.0",
     "@babylonjs/loaders": "^4.2.0",
     "@dcl/builder-client": "^3.3.0",
+    "@dcl/builder-templates": "^0.0.0-20231218153107.commit-5755a71",
     "@dcl/content-hash-tree": "^1.1.3",
     "@dcl/crypto": "^3.0.1",
     "@dcl/hashing": "^3.0.4",

src/components/Modals/CustomLayoutModal/CustomLayoutModal.container.ts

@@ -12,11 +12,13 @@ import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors
 import { getLoadingProjectIds } from 'modules/sync/selectors'
 import { SDKVersion } from 'modules/scene/types'
 import { Project } from 'modules/project/types'
+import { getIsSDK7TemplatesEnabled } from 'modules/features/selectors'
 
 const mapState = (state: RootState): MapStateProps => {
   return {
     isLoading: isLoadingType(getProjectLoading(state), LOAD_MANIFEST_REQUEST) || getLoadingProjectIds(state).length > 0,
-    error: getProjectError(state)
+    error: getProjectError(state),
+    isSDK7TemplatesEnabled: getIsSDK7TemplatesEnabled(state)
   }
 }
 

src/components/Modals/CustomLayoutModal/CustomLayoutModal.tsx

@@ -27,6 +27,7 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
   handleBack = () => {
     const { step } = this.state
     switch (step) {
+      // TODO: remove this after removing the SDK7_TEMPLATES feature flag
       case SceneCreationStep.SDK:
         this.setState({ step: SceneCreationStep.SIZE })
         break
@@ -45,15 +46,16 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
     const { step } = this.state
     if (step === SceneCreationStep.INFO) {
       this.setState({ step: SceneCreationStep.SIZE })
+      // TODO: remove this after removing the SDK7_TEMPLATES feature flag
     } else if (step === SceneCreationStep.SIZE) {
       this.setState({ step: SceneCreationStep.SDK })
     }
   }
 
   handleSubmit = (sdk: SDKVersion) => {
-    const { onCreateProject, onClose } = this.props
+    const { onCreateProject, onClose, isSDK7TemplatesEnabled } = this.props
     const { name, description, rows, cols } = this.state
-    onCreateProject(name, description, fromLayout(rows, cols), sdk)
+    onCreateProject(name, description, fromLayout(rows, cols), isSDK7TemplatesEnabled ? SDKVersion.SDK7 : sdk)
     onClose()
   }
 
@@ -64,6 +66,7 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
         return t('create_modal.name_subtitle')
       case SceneCreationStep.SIZE:
         return t('create_modal.size_subtitle')
+      // TODO: remove this after removing the SDK7_TEMPLATES feature flag
       case SceneCreationStep.SDK:
         return t('create_modal.sdk_subtitle')
     }
@@ -101,6 +104,7 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
   }
 
   renderModalActions = () => {
+    const { isSDK7TemplatesEnabled } = this.props
     const { hasError, name, step } = this.state
 
     switch (step) {
@@ -121,11 +125,16 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
             <Button secondary onClick={this.handleBack}>
               {t('global.back')}
             </Button>
-            <Button primary disabled={hasError || !name} onClick={this.handleNext}>
+            <Button
+              primary
+              disabled={hasError || !name}
+              onClick={isSDK7TemplatesEnabled ? this.handleSubmit.bind(this, SDKVersion.SDK7) : this.handleNext}
+            >
               {t('global.next')}
             </Button>
           </div>
         )
+      // TODO: remove this after removing the SDK7_TEMPLATES feature flag
       case SceneCreationStep.SDK:
         return (
           <div className={styles.sdkActionContainer}>
@@ -147,6 +156,7 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
     return (
       <Modal name={modalName}>
         <ModalNavigation
+          // TODO: remove this after removing the SDK7_TEMPLATES feature flag
           title={step !== SceneCreationStep.SDK ? t('create_modal.title') : t('create_modal.sdk_title')}
           subtitle={this.getSubtitle()}
           onBack={step !== SceneCreationStep.INFO ? this.handleBack : undefined}

src/components/Modals/CustomLayoutModal/CustomLayoutModal.types.ts

@@ -10,11 +10,13 @@ export type Props = ModalProps & {
   error: string | null
   isLoading: boolean
   onCreateProject: (name: string, description: string, template: Template, sdk: SDKVersion) => void
+  isSDK7TemplatesEnabled: boolean
 }
 
 export enum SceneCreationStep {
   INFO = 'info',
   SIZE = 'size',
+  // TODO: remove this after removing the SDK7_TEMPLATES feature flag
   SDK = 'sdk'
 }
 
@@ -27,6 +29,6 @@ export type State = {
   description: string
 }
 
-export type MapStateProps = Pick<Props, 'error' | 'isLoading'>
+export type MapStateProps = Pick<Props, 'error' | 'isLoading' | 'isSDK7TemplatesEnabled'>
 export type MapDispatchProps = Pick<Props, 'onCreateProject'>
 export type MapDispatch = Dispatch<CreateProjectFromTemplateAction | CallHistoryMethodAction>

src/lib/api/builder.ts

@@ -661,6 +661,7 @@ export class BuilderAPI extends BaseAPI {
     return items.map(fromPoolGroup)
   }
 
+  // TODO: remove this after removing the SDK7_TEMPLATES feature flag
   async fetchTemplates() {
     const { items }: { items: RemoteProject[]; total: number } = await this.request('get', '/templates', {
       retry: retryParams,

src/modules/features/selectors.ts

@@ -53,3 +53,11 @@ export const getIsWorldsForEnsOwnersEnabled = (state: RootState) => {
     return false
   }
 }
+
+export const getIsSDK7TemplatesEnabled = (state: RootState) => {
+  try {
+    return getIsFeatureEnabled(state, ApplicationName.BUILDER, FeatureName.SDK7_TEMPLATES)
+  } catch (e) {
+    return false
+  }
+}

src/modules/features/types.ts

@@ -6,5 +6,6 @@ export enum FeatureName {
   NEW_NAVBAR_DROPDOWN = 'new-navbar-dropdown',
   EMOTES_V2 = 'emotes-2.0',
   SMART_ITEMS = 'smart-items',
-  WORLDS_FOR_ENS_OWNERS = 'worlds-for-ens-owners'
+  WORLDS_FOR_ENS_OWNERS = 'worlds-for-ens-owners',
+  SDK7_TEMPLATES = 'sdk7-templates'
 }

src/modules/project/sagas.spec.ts

@@ -12,6 +12,7 @@ const builderAPI = {
   fetchTemplates: jest.fn()
 } as unknown as BuilderAPI
 
+// TODO: remove this after removing the SDK7_TEMPLATES feature flag
 describe('when handling the loadTemplatesRequest action', () => {
   describe('and the request is successful', () => {
     it('should put a loadTemplatesSuccess action with the project templates', () => {

src/modules/project/sagas.ts

@@ -71,14 +71,15 @@ import { Gizmo, PreviewType } from 'modules/editor/types'
 import { Pool } from 'modules/pool/types'
 import { loadProfileRequest } from 'decentraland-dapps/dist/modules/profile/actions'
 import { LOGIN_SUCCESS, LoginSuccessAction } from 'modules/identity/actions'
+import { changeLayout, getParcels } from 'modules/inspector/utils'
+import { setInspectorReloading } from 'modules/inspector/actions'
 import { getName } from 'modules/profile/selectors'
 import { getDefaultGroundAsset } from 'modules/deployment/utils'
 import { locations } from 'routing/locations'
 import { downloadZip } from 'lib/zip'
-import { didUpdateLayout, getImageAsDataUrl } from './utils'
+import { didUpdateLayout, getImageAsDataUrl, getTemplate, getTemplates } from './utils'
 import { createFiles, createSDK7Files } from './export'
-import { changeLayout, getParcels } from 'modules/inspector/utils'
-import { setInspectorReloading } from 'modules/inspector/actions'
+import { getIsSDK7TemplatesEnabled } from 'modules/features/selectors'
 
 export function* projectSaga(builder: BuilderAPI) {
   yield takeLatest(CREATE_PROJECT_FROM_TEMPLATE, handleCreateProjectFromTemplate)
@@ -207,7 +208,7 @@ export function* projectSaga(builder: BuilderAPI) {
 
       if (project.isTemplate) {
         yield take(SAVE_PROJECT_SUCCESS)
-        yield put(push(locations.sceneEditor(newProject.id)))
+        yield put(push(scene.sdk6 ? locations.sceneEditor(newProject.id) : locations.inspector(newProject.id)))
       } else if (shouldRedirect) {
         yield put(push(locations.scenes()))
       }
@@ -358,13 +359,19 @@ export function* projectSaga(builder: BuilderAPI) {
   function* handleLoadProjectSceneRequest(action: LoadProjectSceneRequestAction) {
     const { project, type } = action.payload
     try {
-      const scenes: ReturnType<typeof getScenes> = yield select(getScenes)
-      if (scenes && scenes[project.sceneId]) {
-        yield put(loadProjectSceneSuccess(scenes[project.sceneId]))
-        return
+      const isSDK7TemplatesEnabled: boolean = yield select(getIsSDK7TemplatesEnabled)
+      if (isSDK7TemplatesEnabled && type === PreviewType.TEMPLATE) {
+        const template = getTemplate(project.id)
+        yield put(loadProjectSceneSuccess(template.scene))
+      } else {
+        const scenes: ReturnType<typeof getScenes> = yield select(getScenes)
+        if (scenes && scenes[project.sceneId]) {
+          yield put(loadProjectSceneSuccess(scenes[project.sceneId]))
+          return
+        }
+        const manifest: Manifest<Project> = yield call([builder, 'fetchManifest'], project.id, type)
+        yield put(loadProjectSceneSuccess(manifest.scene))
       }
-      const manifest: Manifest<Project> = yield call([builder, 'fetchManifest'], project.id, type)
-      yield put(loadProjectSceneSuccess(manifest.scene))
     } catch (e) {
       yield put(loadProjectSceneFailure(e.message))
     }
@@ -373,16 +380,25 @@ export function* projectSaga(builder: BuilderAPI) {
   function* handleLoadManifestRequest(action: LoadManifestRequestAction) {
     const { id, type } = action.payload
     try {
-      const manifest: Manifest<Project> = yield call([builder, 'fetchManifest'], id, type)
-      yield put(loadManifestSuccess(manifest))
+      const isSDK7TemplatesEnabled: boolean = yield select(getIsSDK7TemplatesEnabled)
+      if (isSDK7TemplatesEnabled && type === PreviewType.TEMPLATE) {
+        const manifest = getTemplate(id)
+        yield put(loadManifestSuccess(manifest))
+      } else {
+        const manifest: Manifest<Project> = yield call([builder, 'fetchManifest'], id, type)
+        yield put(loadManifestSuccess(manifest))
+      }
     } catch (e) {
       yield put(loadManifestFailure(e.message))
     }
   }
 
   function* handleLoadTemplatesRequest() {
     try {
-      const projects: Project[] = yield call([builder, 'fetchTemplates'])
+      const isSDK7TemplatesEnabled: boolean = yield select(getIsSDK7TemplatesEnabled)
+      const projects: Project[] = isSDK7TemplatesEnabled
+        ? getTemplates().map(template => template.project)
+        : yield call([builder, 'fetchTemplates'])
       const record: ModelById<Project> = {}
 
       for (const project of projects) {

src/modules/project/utils.ts

@@ -1,7 +1,10 @@
-import { Project, Layout } from 'modules/project/types'
+import { Project, Layout, Manifest } from 'modules/project/types'
 import { Coordinate, Rotation } from 'modules/deployment/types'
 import { NO_CACHE_HEADERS } from 'lib/headers'
 import { getDimensions } from 'lib/layout'
+import _templateData from '@dcl/builder-templates/templates.json'
+
+const templates = _templateData.templates as unknown as Manifest[]
 
 export function getProjectDimensions(project: Project): string {
   const { rows, cols } = project.layout
@@ -83,3 +86,16 @@ export async function getImageAsDataUrl(url: string): Promise<string> {
 
   return out
 }
+
+export function getTemplates(): Manifest[] {
+  return templates
+}
+
+export function getTemplate(projectId: string) {
+  const templates = getTemplates()
+  const template = templates.find(template => template.project.id === projectId)
+  if (!template) {
+    throw new Error(`Could not find template with projectId="${projectId}"`)
+  }
+  return template
+}