[Editing Integration] Add editMode to /editing/config endpoint response with configurable integration option

CHANGELOG.md

@@ -23,12 +23,13 @@ Our versioning strategy is as follows:
 
 ### 🛠 Breaking Change
 
-*  Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))
+*  Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800)) ([#1803](https://github.com/Sitecore/jss/pull/1803))
   * `[sitecore-jss-react]` Introduces `PlaceholderMetadata` component which supports the hydration of chromes on Pages by rendering  the components and placeholders with required metadata.
   * `[sitecore-jss]` Chromes are hydrated based on the basis of new `editMode` property derived from LayoutData, which is defined as an enum consisting of `metadata` and `chromes`.
   * `ComponentConsumerProps` is removed. You might need to reuse _WithSitecoreContextProps_ type.
   * `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case the field component is wrapped with metadata markup to enable chromes hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs.
   * `[sitecore-jss-react]` Introduced `EditingScripts` component to render clientScripts / clientData in editing.
+  * `[sitecore-jss-nextjs]` `[template/nextjs-xmlcoud]` Add editMode to /editing/config endpoint response with configurable integration option.
 
 ## 22.0.0
 

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/pages/api/editing/config.ts

@@ -10,6 +10,7 @@ import metadata from 'temp/metadata.json';
 const handler = new EditingConfigMiddleware({
   components,
   metadata,
+  enableEditingMetadata: true,
 }).getHandler();
 
 export default handler;

packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.test.ts

@@ -45,10 +45,18 @@ componentsMap.set('TestComponentOne', {});
 componentsMap.set('TestComponentTwo', {});
 const metadata = { packages: { testPackageOne: '0.1.1' } };
 
-const expectedResult = {
+const expectedResultWithChromes = {
   components: ['TestComponentOne', 'TestComponentTwo'],
   packages: { testPackageOne: '0.1.1' },
+  editMode: 'chromes',
 };
+
+const expectedResultWithMetadata = {
+  components: ['TestComponentOne', 'TestComponentTwo'],
+  packages: { testPackageOne: '0.1.1' },
+  editMode: 'metadata',
+};
+
 const expectedResultForbidden = { message: 'Missing or invalid editing secret' };
 
 describe('EditingConfigMiddleware', () => {
@@ -111,14 +119,17 @@ describe('EditingConfigMiddleware', () => {
     expect(res.json).to.have.been.calledWith(expectedResultForbidden);
   });
 
-  it('should respond with 200 and return config data with components array as argument', async () => {
+  const testEditingConfig = async (
+    components: string[] | Map<string, unknown>,
+    expectedResult,
+    enableEditingMetadata?: boolean
+  ) => {
     const key = 'wrongkey';
     const query = { key } as Query;
     query[QUERY_PARAM_EDITING_SECRET] = secret;
     const req = mockRequest('GET', query);
     const res = mockResponse();
-
-    const middleware = new EditingConfigMiddleware({ components: componentsArray, metadata });
+    const middleware = new EditingConfigMiddleware({ components, metadata, enableEditingMetadata });
     const handler = middleware.getHandler();
 
     await handler(req, res);
@@ -127,23 +138,21 @@ describe('EditingConfigMiddleware', () => {
     expect(res.status).to.have.been.calledWith(200);
     expect(res.json).to.have.been.calledOnce;
     expect(res.json).to.have.been.calledWith(expectedResult);
-  });
+  };
 
-  it('should respond with 200 and return config data with components map as argument', async () => {
-    const key = 'wrongkey';
-    const query = { key } as Query;
-    query[QUERY_PARAM_EDITING_SECRET] = secret;
-    const req = mockRequest('GET', query);
-    const res = mockResponse();
+  it('should respond with 200 and return config data with components array as argument and editMode as chromes', async () => {
+    await testEditingConfig(componentsArray, expectedResultWithChromes, false);
+  });
 
-    const middleware = new EditingConfigMiddleware({ components: componentsMap, metadata });
-    const handler = middleware.getHandler();
+  it('should respond with 200 and return config data with components map as argument and editMode as chromes', async () => {
+    await testEditingConfig(componentsMap, expectedResultWithChromes, false);
+  });
 
-    await handler(req, res);
+  it('should respond with 200 and return config data with components array as argument and editMode as metadata', async () => {
+    await testEditingConfig(componentsArray, expectedResultWithMetadata);
+  });
 
-    expect(res.status).to.have.been.calledOnce;
-    expect(res.status).to.have.been.calledWith(200);
-    expect(res.json).to.have.been.calledOnce;
-    expect(res.json).to.have.been.calledWith(expectedResult);
+  it('should respond with 200 and return config data with components map as argument and editMode as metadata', async () => {
+    await testEditingConfig(componentsMap, expectedResultWithMetadata);
   });
 });

packages/sitecore-jss-nextjs/src/editing/editing-config-middleware.ts

@@ -2,6 +2,7 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import { EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET } from './constants';
 import { getJssEditingSecret } from '../utils/utils';
 import { debug } from '@sitecore-jss/sitecore-jss';
+import { EditMode } from '@sitecore-jss/sitecore-jss/layout';
 import { Metadata } from '@sitecore-jss/sitecore-jss-dev-tools';
 import { enforceCors } from '@sitecore-jss/sitecore-jss/utils';
 
@@ -14,17 +15,25 @@ export type EditingConfigMiddlewareConfig = {
    * Application metadata
    */
   metadata: Metadata;
+  /**
+   * Flag to enable/disable the new editing experience for Pages.
+   * Enabled by default
+   */
+  enableEditingMetadata?: boolean;
 };
 
 /**
  * Middleware / handler used in the editing config API route in xmcloud add on (e.g. '/api/editing/config')
  * provides configuration information to determine feature compatibility on Pages side.
  */
 export class EditingConfigMiddleware {
+  private enableEditingMetadata: boolean;
   /**
    * @param {EditingConfigMiddlewareConfig} [config] Editing configuration middleware config
    */
-  constructor(protected config: EditingConfigMiddlewareConfig) {}
+  constructor(protected config: EditingConfigMiddlewareConfig) {
+    this.enableEditingMetadata = config.enableEditingMetadata ?? true;
+  }
 
   /**
    * Gets the Next.js API route handler
@@ -56,9 +65,12 @@ export class EditingConfigMiddleware {
       ? this.config.components
       : Array.from(this.config.components.keys());
 
+    const editMode = this.enableEditingMetadata ? EditMode.Metadata : EditMode.Chromes;
+
     return res.status(200).json({
       components,
       packages: this.config.metadata.packages,
+      editMode,
     });
   };
 }

yarn.lock

@@ -5529,7 +5529,7 @@ __metadata:
     "@angular/platform-browser": ~16.2.10
     "@angular/platform-browser-dynamic": ~16.2.10
     "@angular/router": ~16.2.10
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/jasmine": ^3.4.1
     "@types/node": ^18.19.0
     codelyzer: ^6.0.1
@@ -5559,7 +5559,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-cli@workspace:packages/sitecore-jss-cli"
   dependencies:
-    "@sitecore-jss/sitecore-jss-dev-tools": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss-dev-tools": 22.1.0-canary.16
     "@types/chai": ^4.2.4
     "@types/cross-spawn": ^6.0.2
     "@types/mocha": ^10.0.1
@@ -5591,14 +5591,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sitecore-jss/sitecore-jss-dev-tools@^22.1.0-canary.16, @sitecore-jss/sitecore-jss-dev-tools@workspace:packages/sitecore-jss-dev-tools":
+"@sitecore-jss/[email protected], @sitecore-jss/sitecore-jss-dev-tools@workspace:packages/sitecore-jss-dev-tools":
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-dev-tools@workspace:packages/sitecore-jss-dev-tools"
   dependencies:
     "@babel/core": ^7.24.4
     "@babel/parser": ^7.24.0
     "@babel/register": ^7.23.7
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/chai": ^4.3.4
     "@types/chokidar": ^2.1.3
     "@types/del": ^4.0.0
@@ -5650,11 +5650,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sitecore-jss/sitecore-jss-forms@^22.1.0-canary.16, @sitecore-jss/sitecore-jss-forms@workspace:packages/sitecore-jss-forms":
+"@sitecore-jss/[email protected], @sitecore-jss/sitecore-jss-forms@workspace:packages/sitecore-jss-forms":
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-forms@workspace:packages/sitecore-jss-forms"
   dependencies:
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/chai": ^4.3.4
     "@types/chai-string": ^1.4.2
     "@types/lodash.unescape": ^4.0.7
@@ -5678,9 +5678,9 @@ __metadata:
   resolution: "@sitecore-jss/sitecore-jss-nextjs@workspace:packages/sitecore-jss-nextjs"
   dependencies:
     "@sitecore-cloudsdk/personalize": ^0.3.0
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
-    "@sitecore-jss/sitecore-jss-dev-tools": ^22.1.0-canary.16
-    "@sitecore-jss/sitecore-jss-react": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss-dev-tools": 22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss-react": 22.1.0-canary.16
     "@types/chai": ^4.3.4
     "@types/chai-as-promised": ^7.1.5
     "@types/chai-string": ^1.4.2
@@ -5754,7 +5754,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-react-forms@workspace:packages/sitecore-jss-react-forms"
   dependencies:
-    "@sitecore-jss/sitecore-jss-forms": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss-forms": 22.1.0-canary.16
     "@types/chai": ^4.3.4
     "@types/enzyme": ^3.10.12
     "@types/mocha": ^10.0.1
@@ -5794,7 +5794,7 @@ __metadata:
     "@babel/plugin-proposal-export-default-from": ^7.5.2
     "@babel/preset-env": ^7.6.2
     "@babel/preset-typescript": ^7.6.0
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/jest": ^24.0.18
     "@types/prop-types": ^15.7.3
     "@types/react": ^16.9.5
@@ -5824,12 +5824,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sitecore-jss/sitecore-jss-react@^22.1.0-canary.16, @sitecore-jss/sitecore-jss-react@workspace:packages/sitecore-jss-react":
+"@sitecore-jss/[email protected], @sitecore-jss/sitecore-jss-react@workspace:packages/sitecore-jss-react":
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-react@workspace:packages/sitecore-jss-react"
   dependencies:
     "@sitecore-feaas/clientside": ^0.5.6
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/chai": ^4.3.4
     "@types/chai-string": ^1.4.2
     "@types/enzyme": ^3.10.12
@@ -5901,7 +5901,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-vue@workspace:packages/sitecore-jss-vue"
   dependencies:
-    "@sitecore-jss/sitecore-jss": ^22.1.0-canary.16
+    "@sitecore-jss/sitecore-jss": 22.1.0-canary.16
     "@types/jest": ^29.2.6
     "@types/node": ^18.11.18
     "@vue/compiler-dom": ^3.2.45
@@ -5924,7 +5924,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sitecore-jss/sitecore-jss@^22.1.0-canary.16, @sitecore-jss/sitecore-jss@workspace:packages/sitecore-jss":
+"@sitecore-jss/[email protected], @sitecore-jss/sitecore-jss@workspace:packages/sitecore-jss":
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss@workspace:packages/sitecore-jss"
   dependencies: