fix: smart edit infinite loader fix (#17877)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Krzysztof Platis <[email protected]>
SAP · Sep 27, 2023 · 0dd42d4 · 0dd42d4
1 parent ae83fd2
commit 0dd42d4
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 42 deletions.
diff --git a/feature-libs/smartedit/core/services/smart-edit.service.ts b/feature-libs/smartedit/core/services/smart-edit.service.ts
@@ -13,8 +13,8 @@ import {
   RoutingService,
   WindowRef,
 } from '@spartacus/core';
-import { SmartEditConfig } from '@spartacus/smartedit/root';
 import { filter, take } from 'rxjs/operators';
+import { SmartEditConfig } from '@spartacus/smartedit/root';
 
 @Injectable({
   providedIn: 'root',

diff --git a/feature-libs/smartedit/root/services/smart-edit-launcher.service.spec.ts b/feature-libs/smartedit/root/services/smart-edit-launcher.service.spec.ts
@@ -1,9 +1,10 @@
 import { Location } from '@angular/common';
 import { TestBed } from '@angular/core/testing';
-import { ScriptLoader } from '@spartacus/core';
+import { FeatureModulesService, ScriptLoader } from '@spartacus/core';
 import { defaultSmartEditConfig } from '../config/default-smart-edit-config';
 import { SmartEditConfig } from '../config/smart-edit-config';
 import { SmartEditLauncherService } from './smart-edit-launcher.service';
+import { of } from 'rxjs';
 
 class MockLocation {
   path() {
@@ -15,23 +16,31 @@ class MockScriptLoader {
   public embedScript(): void {}
 }
 
+class MockFeatureModulesService implements Partial<FeatureModulesService> {
+  isConfigured = () => true;
+  resolveFeature = () => of(undefined);
+}
+
 describe('SmartEditLauncherService', () => {
   let smartEditLauncherService: SmartEditLauncherService;
   let location: Location;
   let scriptLoader: ScriptLoader;
+  let featureModules: FeatureModulesService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
         { provide: Location, useClass: MockLocation },
         { provide: SmartEditConfig, useValue: defaultSmartEditConfig },
         { provide: ScriptLoader, useClass: MockScriptLoader },
+        { provide: FeatureModulesService, useClass: MockFeatureModulesService },
       ],
     });
 
     smartEditLauncherService = TestBed.inject(SmartEditLauncherService);
     location = TestBed.inject(Location);
     scriptLoader = TestBed.inject(ScriptLoader);
+    featureModules = TestBed.inject(FeatureModulesService);
   });
 
   it('should be created', () => {
@@ -62,6 +71,18 @@ describe('SmartEditLauncherService', () => {
     });
   });
 
+  describe('should lazy load SmartEditModule', () => {
+    it('lazy load SmartEditModule', () => {
+      spyOn(location, 'path').and.returnValue(
+        '/any/cx-preview?cmsTicketId=test-cms-ticket-id'
+      );
+      spyOn(featureModules, 'resolveFeature').and.callThrough();
+
+      smartEditLauncherService.load();
+      expect(featureModules.resolveFeature).toHaveBeenCalledWith('smartEdit');
+    });
+  });
+
   it('should be able to load webApplicationInjector.js', () => {
     spyOn(location, 'path').and.returnValue(
       '/any/cx-preview?cmsTicketId=test-cms-ticket-id'

diff --git a/feature-libs/smartedit/root/services/smart-edit-launcher.service.ts b/feature-libs/smartedit/root/services/smart-edit-launcher.service.ts
@@ -5,9 +5,10 @@
  */
 
 import { Location } from '@angular/common';
-import { Injectable } from '@angular/core';
-import { ScriptLoader } from '@spartacus/core';
+import { inject, Injectable } from '@angular/core';
+import { FeatureModulesService, ScriptLoader } from '@spartacus/core';
 import { SmartEditConfig } from '../config/smart-edit-config';
+import { SMART_EDIT_FEATURE } from '../feature-name';
 
 /**
  * The SmartEditLauncherService is used to check whether Spartacus is launched inside Smart Edit;
@@ -17,6 +18,7 @@ import { SmartEditConfig } from '../config/smart-edit-config';
   providedIn: 'root',
 })
 export class SmartEditLauncherService {
+  protected readonly featureModulesService = inject(FeatureModulesService);
   private _cmsTicketId: string | undefined;
 
   get cmsTicketId(): string | undefined {
@@ -34,6 +36,8 @@ export class SmartEditLauncherService {
    */
   load(): void {
     if (this.isLaunchedInSmartEdit()) {
+      this.featureModulesService.resolveFeature(SMART_EDIT_FEATURE).subscribe();
+
       this.scriptLoader?.embedScript({
         src: 'assets/webApplicationInjector.js',
         params: undefined,

diff --git a/feature-libs/smartedit/root/smart-edit-root.module.ts b/feature-libs/smartedit/root/smart-edit-root.module.ts
@@ -5,12 +5,8 @@
  */
 
 import { APP_INITIALIZER, NgModule } from '@angular/core';
-import {
-  provideDefaultConfig,
-  SMART_EDIT_DUMMY_COMPONENT_TYPE,
-} from '@spartacus/core';
+import { provideDefaultConfig } from '@spartacus/core';
 import { defaultSmartEditConfig } from './config/default-smart-edit-config';
-import { SMART_EDIT_FEATURE } from './feature-name';
 import { interceptors } from './http-interceptors/index';
 import { SmartEditLauncherService } from './services/smart-edit-launcher.service';
 
@@ -33,13 +29,6 @@ export function smartEditFactory(
       deps: [SmartEditLauncherService],
       multi: true,
     },
-    provideDefaultConfig({
-      featureModules: {
-        [SMART_EDIT_FEATURE]: {
-          cmsComponents: [SMART_EDIT_DUMMY_COMPONENT_TYPE],
-        },
-      },
-    }),
   ],
 })
 export class SmartEditRootModule {}
diff --git a/projects/core/src/cms/config/cms-config.ts b/projects/core/src/cms/config/cms-config.ts
@@ -41,6 +41,8 @@ export interface JspIncludeCmsComponentConfig {
 
 export const JSP_INCLUDE_CMS_COMPONENT_TYPE = 'JspIncludeComponent';
 export const CMS_FLEX_COMPONENT_TYPE = 'CMSFlexComponent';
+
+/** @deprecated - unused since 6.5. Now `SmartEditLauncher` is responsible for triggering the lazy loading of the `SMART_EDIT_FEATURE` */
 export const SMART_EDIT_DUMMY_COMPONENT_TYPE = 'SmartEditDummyCMSComponent';
 
 /**

diff --git a/projects/storefrontlib/cms-structure/guards/cms-page-guard.service.spec.ts b/projects/storefrontlib/cms-structure/guards/cms-page-guard.service.spec.ts
@@ -9,8 +9,6 @@ import {
   PageType,
   RoutingService,
   SemanticPathService,
-  SMART_EDIT_CONTEXT,
-  SMART_EDIT_DUMMY_COMPONENT_TYPE,
 } from '@spartacus/core';
 import { CmsComponentsService } from '@spartacus/storefront';
 import { NEVER, of } from 'rxjs';
@@ -34,6 +32,7 @@ class MockCmsService implements Partial<CmsService> {
   getPageIndex = () => of('');
   setPageFailIndex = () => {};
 }
+
 class MockCmsRoutesService implements Partial<CmsRoutesService> {
   handleCmsRoutesInGuard = () => true;
 }
@@ -61,7 +60,6 @@ describe('CmsPageGuardService', () => {
   let cmsGuards: CmsGuardsService;
   let semanticPath: SemanticPathService;
   let service: CmsPageGuardService;
-  let cmsComponentsService: CmsComponentsService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -88,7 +86,6 @@ describe('CmsPageGuardService', () => {
     cmsI18n = TestBed.inject(CmsI18nService);
     cmsGuards = TestBed.inject(CmsGuardsService);
     semanticPath = TestBed.inject(SemanticPathService);
-    cmsComponentsService = TestBed.inject(CmsComponentsService);
 
     service = TestBed.inject(CmsPageGuardService);
   });
@@ -115,21 +112,6 @@ describe('CmsPageGuardService', () => {
       expect(cms.getPageComponentTypes).toHaveBeenCalledWith(pageContext);
     });
 
-    it('should get a specific component type SMART_EDIT_DUMMY_COMPONENT_TYPE for SmartEdit review page', () => {
-      pageContext = { type: PageType.CONTENT_PAGE, id: SMART_EDIT_CONTEXT };
-      spyOn(cms, 'getPageComponentTypes').and.returnValue(of([]));
-      spyOn(cmsComponentsService, 'determineMappings').and.callThrough();
-
-      service
-        .canActivatePage(pageContext, pageData, route, state)
-        .subscribe()
-        .unsubscribe();
-      expect(cms.getPageComponentTypes).toHaveBeenCalledWith(pageContext);
-      expect(cmsComponentsService.determineMappings).toHaveBeenCalledWith([
-        SMART_EDIT_DUMMY_COMPONENT_TYPE,
-      ]);
-    });
-
     describe('when CmsGuardsService emits false', () => {
       beforeEach(() => {
         spyOn(cmsGuards, 'cmsPageCanActivate').and.returnValue(of(false));

diff --git a/projects/storefrontlib/cms-structure/guards/cms-page-guard.service.ts b/projects/storefrontlib/cms-structure/guards/cms-page-guard.service.ts
@@ -14,8 +14,6 @@ import {
   PageType,
   RoutingService,
   SemanticPathService,
-  SMART_EDIT_CONTEXT,
-  SMART_EDIT_DUMMY_COMPONENT_TYPE,
 } from '@spartacus/core';
 import { Observable, of } from 'rxjs';
 import {
@@ -71,11 +69,6 @@ export class CmsPageGuardService {
     state: RouterStateSnapshot
   ): Observable<boolean | UrlTree> {
     return this.cmsService.getPageComponentTypes(pageContext).pipe(
-      map((componentTypes) =>
-        pageContext.id === SMART_EDIT_CONTEXT
-          ? [SMART_EDIT_DUMMY_COMPONENT_TYPE, ...componentTypes]
-          : componentTypes
-      ),
       take(1),
       switchMap((componentTypes) =>
         this.cmsComponentsService.determineMappings(componentTypes)