Remove angularjs from about page. (oppia#13073)

* wip * Add other files * Lint fix * done * Fix specs * nits * nits * nits * nit * nit * nit * nits * nit * nit * nit * nit * e2e fix * nit * change detection * nit * nit * Add angular version * nit * nit * nit * e2e fix * nit * nit * nit * Revert "nit" This reverts commit ebb7b64. * e2e fixed * nit * remove commented code * nit * more properties added mock angular object * nit * nir * fix * nit * type errors * nit Co-authored-by: Srijan Reddy <[email protected]>
heyimShivam · Jun 27, 2021 · 78626a9 · 78626a9
1 parent 4172bcc
commit 78626a9
Show file tree

Hide file tree

Showing 27 changed files with 348 additions and 192 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -54,8 +54,9 @@
 /core/templates/services/loader.service*.ts @srijanreddy98 @darksun27
 /core/templates/components/code-mirror/ @srijanreddy98 @darksun27
 /core/templates/components/material.module.ts @srijanreddy98 @darksun27
-/core/templates/components/oppia-angular-root.component.ts @srijanreddy98 @darksun27
+/core/templates/components/oppia-angular-root.component.* @srijanreddy98 @darksun27
 /core/templates/pages/missing-translation-custom-handler*.ts @srijanreddy98 @darksun27
+/core/templates/pages/mock-ajs.ts @srijanreddy98 @darksun27
 /core/templates/pages/translate-cache.factory*.ts @srijanreddy98 @darksun27
 /core/templates/pages/translate-custom-parser*.ts @srijanreddy98 @darksun27
 /core/templates/pages/translate-loader.factory*.ts @srijanreddy98 @darksun27

diff --git a/core/templates/base-components/base-content.component.spec.ts b/core/templates/base-components/base-content.component.spec.ts
@@ -62,6 +62,11 @@ describe('Base Content Component', () => {
         pathname: pathname,
         search: search,
         hash: hash
+      },
+      document: {
+        addEventListener(event: string, callback: () => void) {
+          callback();
+        }
       }
     };
   }

diff --git a/core/templates/base-components/base-content.component.ts b/core/templates/base-components/base-content.component.ts
@@ -16,7 +16,7 @@
  * @fileoverview Component for the Base Transclusion Component.
  */
 
-import { Component } from '@angular/core';
+import { Component, Directive } from '@angular/core';
 import { downgradeComponent } from '@angular/upgrade/static';
 import { AppConstants } from 'app.constants';
 import { BottomNavbarStatusService } from 'services/bottom-navbar-status.service';
@@ -66,6 +66,11 @@ export class BaseContentComponent {
       (message: string) => this.loadingMessage = message
     );
     this.keyboardShortcutService.bindNavigationShortcuts();
+
+    // TODO(sll): Use 'touchstart' for mobile.
+    this.windowRef.nativeWindow.document.addEventListener('click', () => {
+      this.sidebarStatusService.onDocumentClick();
+    });
   }
 
   getHeaderText(): string {
@@ -114,6 +119,14 @@ export class BaseContentComponent {
   }
 }
 
+/**
+ * This directive is used as selector for navbar breadcrumb transclusion.
+ */
+@Directive({
+  selector: 'navbar-breadcrumb'
+})
+export class BaseContentNavBarBreadCrumbDirective {}
+
 angular.module('oppia').directive('oppiaBaseContent',
   downgradeComponent({
     component: BaseContentComponent

diff --git a/core/templates/base-components/i18n-language-selector.component.ts b/core/templates/base-components/i18n-language-selector.component.ts
@@ -16,7 +16,7 @@
  * @fileoverview Component for changing site language.
  */
 
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { downgradeComponent } from '@angular/upgrade/static';
 import { AppConstants } from 'app.constants';
 import { I18nLanguageCodeService } from 'services/i18n-language-code.service';
@@ -38,6 +38,7 @@ export class I18nLanguageSelectorComponent {
   supportedSiteLanguages: readonly SiteLanguage[];
 
   constructor(
+    private changeDetectorRef: ChangeDetectorRef,
     private i18nLanguageCodeService: I18nLanguageCodeService,
     private userService: UserService,
     private userBackendApiService: UserBackendApiService
@@ -47,6 +48,12 @@ export class I18nLanguageSelectorComponent {
     this.currentLanguageCode = this.i18nLanguageCodeService
       .getCurrentI18nLanguageCode();
     this.supportedSiteLanguages = AppConstants.SUPPORTED_SITE_LANGUAGES;
+    this.i18nLanguageCodeService.onI18nLanguageCodeChange.subscribe((code) => {
+      if (this.currentLanguageCode !== code) {
+        this.currentLanguageCode = code;
+        this.changeDetectorRef.detectChanges();
+      }
+    });
   }
 
   changeLanguage(): void {

diff --git a/core/templates/base-components/oppia-root.directive.ts b/core/templates/base-components/oppia-root.directive.ts
@@ -115,28 +115,10 @@ angular.module('oppia').directive('oppiaRoot', [
               );
             }
 
-            // TODO(#12793): Remove the use of (
-            // OppiaAngularRootComponent.ajsTranslate).
-            OppiaAngularRootComponent.ajsTranslate = $translate;
-            const translateService = (
-              OppiaAngularRootComponent.translateService);
-            const translateCacheService = (
-              OppiaAngularRootComponent.translateCacheService);
-            const i18nLanguageCodeService = (
-              OppiaAngularRootComponent.i18nLanguageCodeService);
-
-            i18nLanguageCodeService.onI18nLanguageCodeChange.subscribe(
+            OppiaAngularRootComponent.translateService.onLangChange.subscribe(
               (code) => {
-                translateService.use(code);
-                $translate.use(code);
-              }
-            );
-            translateCacheService.init();
-
-            const cachedLanguage = translateCacheService.getCachedLanguage();
-            if (cachedLanguage) {
-              i18nLanguageCodeService.setI18nLanguageCode(cachedLanguage);
-            }
+                $translate.use(code.lang);
+              });
 
             // The next line allows the transcluded content to start executing.
             $scope.initialized = true;

diff --git a/core/templates/components/button-directives/hint-and-solution-buttons.component.spec.ts b/core/templates/components/button-directives/hint-and-solution-buttons.component.spec.ts
@@ -19,7 +19,8 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { InteractionObjectFactory } from 'domain/exploration/InteractionObjectFactory';
 import { RecordedVoiceovers } from 'domain/exploration/recorded-voiceovers.model';
 import { WrittenTranslationsObjectFactory } from 'domain/exploration/WrittenTranslationsObjectFactory';
-import { StateCard, StateCardObjectFactory } from 'domain/state_card/StateCardObjectFactory';
+import { StateCard } from 'domain/state_card/state-card.model';
+import { AudioTranslationLanguageService } from 'pages/exploration-player-page/services/audio-translation-language.service';
 import { ExplorationPlayerStateService } from 'pages/exploration-player-page/services/exploration-player-state.service';
 import { HintAndSolutionModalService } from 'pages/exploration-player-page/services/hint-and-solution-modal.service';
 import { HintsAndSolutionManagerService } from 'pages/exploration-player-page/services/hints-and-solution-manager.service';
@@ -37,14 +38,14 @@ describe('HintAndSolutionButtonsComponent', () => {
   let fixture: ComponentFixture<HintAndSolutionButtonsComponent>;
   let playerPositionService: PlayerPositionService;
   let hintsAndSolutionManagerService: HintsAndSolutionManagerService;
-  let stateCardObjectFactory: StateCardObjectFactory;
   let writtenTranslationsObjectFactory: WrittenTranslationsObjectFactory;
   let interactionObjectFactory: InteractionObjectFactory;
   let playerTranscriptService: PlayerTranscriptService;
   let hintAndSolutionModalService: HintAndSolutionModalService;
   let explorationPlayerStateService: ExplorationPlayerStateService;
   let statsReportingService: StatsReportingService;
   let newCard: StateCard;
+  let audioTranslationLanguageService: AudioTranslationLanguageService;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -59,7 +60,6 @@ describe('HintAndSolutionButtonsComponent', () => {
     playerPositionService = TestBed.inject(PlayerPositionService);
     hintsAndSolutionManagerService = TestBed
       .inject(HintsAndSolutionManagerService);
-    stateCardObjectFactory = TestBed.inject(StateCardObjectFactory);
     writtenTranslationsObjectFactory = TestBed.inject(
       WrittenTranslationsObjectFactory);
     interactionObjectFactory = TestBed.inject(InteractionObjectFactory);
@@ -68,6 +68,8 @@ describe('HintAndSolutionButtonsComponent', () => {
     explorationPlayerStateService = TestBed.inject(
       ExplorationPlayerStateService);
     statsReportingService = TestBed.inject(StatsReportingService);
+    audioTranslationLanguageService = (
+      TestBed.inject(AudioTranslationLanguageService));
 
     spyOn(playerPositionService, 'onNewCardOpened').and.returnValue(
       new EventEmitter<StateCard>());
@@ -79,7 +81,7 @@ describe('HintAndSolutionButtonsComponent', () => {
       .and.returnValue(new EventEmitter<void>());
 
     // A StateCard which supports hints.
-    newCard = stateCardObjectFactory.createNewCard(
+    newCard = StateCard.createNewCard(
       'State 2', '<p>Content</p>', '<interaction></interaction>',
       interactionObjectFactory.createFromBackendDict({
         id: 'TextInput',
@@ -133,7 +135,7 @@ describe('HintAndSolutionButtonsComponent', () => {
       }),
       RecordedVoiceovers.createEmpty(),
       writtenTranslationsObjectFactory.createEmpty(),
-      'content');
+      'content', audioTranslationLanguageService);
   });
 
   it('should subscribe to events on initialization', () => {
@@ -157,10 +159,11 @@ describe('HintAndSolutionButtonsComponent', () => {
 
   it('should reset hints and solutions when new' +
     ' card is opened', fakeAsync(() => {
-    let oldCard: StateCard = stateCardObjectFactory.createNewCard(
+    let oldCard: StateCard = StateCard.createNewCard(
       'State 1', '<p>Content</p>', '<interaction></interaction>',
       null, RecordedVoiceovers.createEmpty(),
-      writtenTranslationsObjectFactory.createEmpty(), 'content');
+      writtenTranslationsObjectFactory.createEmpty(), 'content',
+      audioTranslationLanguageService);
     spyOn(hintsAndSolutionManagerService, 'getNumHints').and.returnValue(1);
 
     component.displayedCard = oldCard;
@@ -236,7 +239,7 @@ describe('HintAndSolutionButtonsComponent', () => {
     expect(component.isHintButtonVisible(0)).toBe(false);
 
     // StateCard with EndExploration interaction, which does not supports hints.
-    component.displayedCard = stateCardObjectFactory.createNewCard(
+    component.displayedCard = StateCard.createNewCard(
       'State 1', '<p>Content</p>', '<interaction></interaction>',
       interactionObjectFactory.createFromBackendDict({
         id: 'EndExploration',
@@ -247,7 +250,8 @@ describe('HintAndSolutionButtonsComponent', () => {
         hints: [],
         solution: null,
       }), RecordedVoiceovers.createEmpty(),
-      writtenTranslationsObjectFactory.createEmpty(), 'content');
+      writtenTranslationsObjectFactory.createEmpty(), 'content',
+      audioTranslationLanguageService);
 
     expect(component.isHintButtonVisible(0)).toBe(false);
 

diff --git a/core/templates/components/ck-editor-helpers/ck-editor-4-widgets.initializer.ts b/core/templates/components/ck-editor-helpers/ck-editor-4-widgets.initializer.ts
@@ -54,6 +54,9 @@ export class CkEditorInitializerService {
       rteHelperService: RteHelperService,
       htmlEscaperService: HtmlEscaperService,
       contextService: ContextService, ngZone: NgZone): void {
+    if (rteHelperService === undefined) {
+      return;
+    }
     ngZone.runOutsideAngular(() => {
       var _RICH_TEXT_COMPONENTS = rteHelperService.getRichTextComponents();
       _RICH_TEXT_COMPONENTS.forEach(function(componentDefn) {

diff --git a/core/templates/components/oppia-angular-root.component.html b/core/templates/components/oppia-angular-root.component.html
@@ -0,0 +1,3 @@
+<div [dir]="direction">
+  <ng-content></ng-content>
+</div>
diff --git a/core/templates/components/oppia-angular-root.component.spec.ts b/core/templates/components/oppia-angular-root.component.spec.ts
@@ -25,6 +25,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { AngularFireAuth } from '@angular/fire/auth';
 
 import { OppiaAngularRootComponent } from './oppia-angular-root.component';
+import { I18nLanguageCodeService } from 'services/i18n-language-code.service';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { RichTextComponentsModule } from 'rich_text_components/rich-text-components.module';
 import { CkEditorInitializerService } from './ck-editor-helpers/ck-editor-4-widgets.initializer';
@@ -46,11 +47,18 @@ describe('OppiaAngularRootComponent', function() {
         },
         {
           provide: TranslateCacheService,
-          useValue: null
+          useValue: {
+            init: () => {},
+            getCachedLanguage: () => {
+              return 'en';
+            }
+          }
         },
         {
           provide: TranslateService,
-          useValue: null
+          useValue: {
+            use: () => {}
+          }
         }
       ],
       schemas: [NO_ERRORS_SCHEMA]
@@ -66,6 +74,7 @@ describe('OppiaAngularRootComponent', function() {
     spyOn(CkEditorInitializerService, 'ckEditorInitializer').and.callFake(
       () => {});
     component.ngAfterViewInit();
+    TestBed.inject(I18nLanguageCodeService).setI18nLanguageCode('en');
 
     expect(emitSpy).toHaveBeenCalled();
   });