[GSoC'24] M1.3 - Modify translations frontend modal

.github/workflows/e2e_lighthouse_performance_acceptance_tests.yml

@@ -309,6 +309,8 @@ jobs:
       strategy:
         matrix:
           os: [ubuntu-22.04]
+          # TODO(#20467): Add exploration-editor/modify-translations-through-modal spec file
+          # to suites once the exploration_editor_can_modify_translations feature is in prod stage.
           suite:
             - blog-admin/assign-roles-to-users-and-change-tag-properties
             - blog-editor/create-and-delete-draft-blog-post

core/templates/components/forms/forms-templates/mark-translations-as-needing-update-modal.component.html

@@ -20,11 +20,15 @@ <h3>Update Translations</h3>
       </p>
     </li>
     <li>
-      <p>
+      <p *ngIf="!modifyTranslationsFeatureFlagIsEnabled">
         <strong>Mark translations as stale:</strong>
         Mark the existing translations for the given content as stale. Select this if your changes will require the translations
         to be updated, but the previous translations can still be used.
       </p>
+      <p *ngIf="modifyTranslationsFeatureFlagIsEnabled">
+        <strong>Modify existing translations:</strong>
+        Select this if your changes mean that existing translations will need to be modified slightly.
+      </p>
     </li>
     <li>
       <p>
@@ -41,6 +45,7 @@ <h3>Update Translations</h3>
 
 <div class="modal-footer">
   <button class="btn btn-secondary" (click)="removeTranslations()">Remove existing translations</button>
-  <button class="btn btn-secondary" (click)="markNeedsUpdate()">Mark translations as stale</button>
+  <button *ngIf="!modifyTranslationsFeatureFlagIsEnabled"class="btn btn-secondary" (click)="markNeedsUpdate()">Mark translations as stale</button>
+  <button *ngIf="modifyTranslationsFeatureFlagIsEnabled" class="btn btn-secondary e2e-test-modify-translations-button" (click)="openModifyTranslationsModal()">Modify existing translations</button>
   <button class="btn btn-secondary e2e-test-leave-translations-as-is" (click)="cancel()">Leave as is</button>
 </div>

core/templates/components/forms/forms-templates/mark-translations-as-needing-update-modal.component.spec.ts

@@ -19,8 +19,14 @@
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {ComponentFixture, waitForAsync, TestBed} from '@angular/core/testing';
-import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgbActiveModal,
+  NgbModal,
+  NgbModalRef,
+} from '@ng-bootstrap/ng-bootstrap';
 import {MarkTranslationsAsNeedingUpdateModalComponent} from './mark-translations-as-needing-update-modal.component';
+import {PlatformFeatureService} from 'services/platform-feature.service';
+import {ModifyTranslationsModalComponent} from '../../../pages/exploration-editor-page/modal-templates/exploration-modify-translations-modal.component';
 
 class MockActiveModal {
   close(): void {
@@ -32,10 +38,27 @@ class MockActiveModal {
   }
 }
 
+class MockPlatformFeatureService {
+  status = {
+    ExplorationEditorCanModifyTranslations: {
+      isEnabled: false,
+    },
+  };
+}
+
+export class MockNgbModalRef {
+  componentInstance = {
+    contentId: null,
+  };
+}
+
 describe('Mark Translations As Needing Update Modal Component', () => {
   let component: MarkTranslationsAsNeedingUpdateModalComponent;
   let fixture: ComponentFixture<MarkTranslationsAsNeedingUpdateModalComponent>;
   let ngbActiveModal: NgbActiveModal;
+  let ngbModal: NgbModal;
+  let mockPlatformFeatureService = new MockPlatformFeatureService();
+  let ngbModalRef: MockNgbModalRef = new MockNgbModalRef();
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -46,6 +69,10 @@ describe('Mark Translations As Needing Update Modal Component', () => {
           provide: NgbActiveModal,
           useClass: MockActiveModal,
         },
+        {
+          provide: PlatformFeatureService,
+          useValue: mockPlatformFeatureService,
+        },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
@@ -57,12 +84,22 @@ describe('Mark Translations As Needing Update Modal Component', () => {
     fixture.detectChanges();
 
     ngbActiveModal = TestBed.inject(NgbActiveModal);
+    ngbModal = TestBed.inject(NgbModal);
   }));
 
   it('should check whether component is initialized', () => {
     expect(component).toBeDefined();
   });
 
+  it('should check feature flag when initialized', () => {
+    mockPlatformFeatureService.status.ExplorationEditorCanModifyTranslations.isEnabled =
+      true;
+
+    component.ngOnInit();
+
+    expect(component.modifyTranslationsFeatureFlagIsEnabled).toBeTrue();
+  });
+
   it('should call markNeedingUpdateHandler', () => {
     const handlerWithSpy = jasmine.createSpy();
     component.markNeedsUpdateHandler = handlerWithSpy;
@@ -73,6 +110,21 @@ describe('Mark Translations As Needing Update Modal Component', () => {
     expect(handlerWithSpy).toHaveBeenCalledOnceWith('contentId_1');
   });
 
+  it('should open the ModifyTranslations modal', () => {
+    component.contentId = 'content0';
+    const modalSpy = spyOn(ngbModal, 'open').and.returnValue(
+      ngbModalRef as NgbModalRef
+    );
+
+    component.openModifyTranslationsModal();
+
+    expect(modalSpy).toHaveBeenCalledWith(ModifyTranslationsModalComponent, {
+      backdrop: 'static',
+      windowClass: 'oppia-modify-translations-modal',
+    });
+    expect(ngbModalRef.componentInstance.contentId).toBe('content0');
+  });
+
   it('should call removeTranslations', () => {
     const handlerWithSpy = jasmine.createSpy();
     component.removeHandler = handlerWithSpy;

core/templates/components/forms/forms-templates/mark-translations-as-needing-update-modal.component.ts

@@ -19,7 +19,10 @@
 
 import {Component, Input} from '@angular/core';
 import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {ConfirmOrCancelModal} from 'components/common-layout-directives/common-elements/confirm-or-cancel-modal.component';
+import {PlatformFeatureService} from 'services/platform-feature.service';
+import {ModifyTranslationsModalComponent} from 'pages/exploration-editor-page/modal-templates/exploration-modify-translations-modal.component';
 
 @Component({
   selector: 'oppia-mark-translations-as-needing-update-modal',
@@ -30,15 +33,34 @@ export class MarkTranslationsAsNeedingUpdateModalComponent extends ConfirmOrCanc
   @Input() markNeedsUpdateHandler!: (contentId: string) => void;
   @Input() removeHandler!: (contentId: string) => void;
 
-  constructor(private ngbActiveModal: NgbActiveModal) {
+  modifyTranslationsFeatureFlagIsEnabled: boolean = false;
+
+  constructor(
+    private ngbActiveModal: NgbActiveModal,
+    private ngbModal: NgbModal,
+    private platformFeatureService: PlatformFeatureService
+  ) {
     super(ngbActiveModal);
   }
 
+  ngOnInit(): void {
+    this.modifyTranslationsFeatureFlagIsEnabled =
+      this.platformFeatureService.status.ExplorationEditorCanModifyTranslations.isEnabled;
+  }
+
   markNeedsUpdate(): void {
     this.markNeedsUpdateHandler(this.contentId);
     this.ngbActiveModal.close();
   }
 
+  openModifyTranslationsModal(): void {
+    const modalRef = this.ngbModal.open(ModifyTranslationsModalComponent, {
+      backdrop: 'static',
+      windowClass: 'oppia-modify-translations-modal',
+    });
+    modalRef.componentInstance.contentId = this.contentId;
+  }
+
   removeTranslations(): void {
     this.removeHandler(this.contentId);
     this.ngbActiveModal.close();

core/templates/components/forms/schema-based-editors/schema-based-unicode-editor.component.html

@@ -15,7 +15,7 @@
 
   <span *ngIf="!getCodingMode() && !getRows()">
     <input type="text"
-           class="form-control display-inline"
+           class="form-control display-inline e2e-test-text-input"
            [(ngModel)]="localValue"
            (input)="updateLocalValue($event)"
            [disabled]="disabled"

core/templates/components/state-directives/solution-editor/solution-explanation-editor.component.html

@@ -5,7 +5,7 @@
     <div class="oppia-readonly-rule-tile"
          [ngClass]="{'oppia-editable-section': isEditable}">
       <div class="oppia-rule-preview oppia-transition-200">
-        <div class="oppia-click-to-start-editing"
+        <div class="oppia-click-to-start-editing e2e-test-edit-solution-explanation"
              *ngIf="isEditable" (click)="openExplanationEditor()">
           <i class="material-icons oppia-editor-edit-icon float-right"
              (keydown.enter)="openExplanationEditor()"
@@ -45,7 +45,7 @@
           Cancel
         </button>
         <button type="button"
-                class="btn btn-success"
+                class="btn btn-success e2e-test-save-solution-explanation-edit"
                 [disabled]="!stateSolutionService.displayed.explanation.html || isSolutionExplanationLengthExceeded()"
                 (click)="saveThisExplanation()">
           Save

core/templates/css/oppia.css

@@ -4066,6 +4066,17 @@ div.oppia-issues-learner-action {
   }
 }
 
+.oppia-modify-translations-modal {
+  align-content: center;
+}
+
+@media (max-width: 400px) {
+  /* Prevents overlapping with the mobile navbar elements. */
+  oppia-mark-translations-as-needing-update-modal {
+    margin-bottom: 25px;
+  }
+}
+
 .oppia-typeahead-form .dropdown-item.active {
   color: #212529;
 }

core/templates/domain/translation/EntityTranslationObjectFactory.ts

@@ -33,6 +33,10 @@ export interface EntityTranslationBackendDict {
   translations: TranslationMappingDict;
 }
 
+export interface languageCodeToEntityTranslationBackendDict {
+  [languageCode: string]: EntityTranslationBackendDict;
+}
+
 interface TranslationMapping {
   [contentId: string]: TranslatedContent;
 }

core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.html

@@ -13,7 +13,7 @@
         <ul class="dropdown-menu oppia-exploration-editor-tabs-dropdown" aria-labelledby="dropdownMenuButton">
           <li class="dropdown-item oppia-exploration-editor-tabs-dropdown-item" [ngClass]="{'uib-dropdown': countWarnings()}">
             <a href="#" ngbTooltip="Editor" placement="{{countWarnings() ? 'left' : 'bottom'}}" (click)="selectMainTab()"
-               class="oppia-exploration-editor-tabs-dropdown-element">
+               class="oppia-exploration-editor-tabs-dropdown-element e2e-test-mobile-main-tab">
               <i class="fa fa-pen oppia-mobile-exploration-editor-tabs-icon"></i>
               <span class="oppia-exploration-editor-tabs-dropdown-inner">Editor</span>
             </a>
@@ -23,7 +23,7 @@
               </span>
             </div>
           </li>
-          <li class="dropdown-item oppia-exploration-editor-tabs-dropdown-item" *ngIf="isUserLoggedIn()" [ngClass]="{'active': getActiveTabName() === 'translation'}">
+          <li class="dropdown-item oppia-exploration-editor-tabs-dropdown-item e2e-test-mobile-translation-tab" *ngIf="isUserLoggedIn()" [ngClass]="{'active': getActiveTabName() === 'translation'}">
             <a href="#" ngbTooltip="Tmaterial-iconsmaterial-iconsranslations and Voiceovers" placement="bottom" (click)="selectTranslationTab()"
                class="oppia-exploration-editor-tabs-dropdown-element">
               <i class="fa fa-microphone oppia-mobile-exploration-editor-tabs-icon"></i>

core/templates/pages/exploration-editor-page/exploration-editor-page.component.spec.ts

@@ -73,6 +73,8 @@ import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {ExplorationPermissions} from 'domain/exploration/exploration-permissions.model';
 import {WindowRef} from 'services/contextual/window-ref.service';
 import {ExplorationPermissionsBackendApiService} from 'domain/exploration/exploration-permissions-backend-api.service';
+import {EntityTranslationsService} from 'services/entity-translations.services';
+import {EntityTranslation} from 'domain/translation/EntityTranslationObjectFactory';
 
 class MockNgbModalRef {
   componentInstance = {};
@@ -116,6 +118,7 @@ describe('Exploration editor page component', () => {
   let registerDeclineTutorialModalEventSpy;
   let focusManagerService: FocusManagerService;
   let explorationPermissionsBackendApiService: ExplorationPermissionsBackendApiService;
+  let entityTranslationsService: EntityTranslationsService;
   let ngbModal: NgbModal;
   let refreshGraphEmitter = new EventEmitter<void>();
   let mockRefreshTranslationTabEventEmitter = new EventEmitter<void>();
@@ -353,6 +356,7 @@ describe('Exploration editor page component', () => {
     explorationPermissionsBackendApiService = TestBed.inject(
       ExplorationPermissionsBackendApiService
     );
+    entityTranslationsService = TestBed.inject(EntityTranslationsService);
 
     isLocationSetToNonStateEditorTabSpy = spyOn(
       rs,
@@ -822,7 +826,32 @@ describe('Exploration editor page component', () => {
         mockInitExplorationPageEmitter
       );
       explorationData.is_version_of_draft_valid = false;
-      explorationData.draft_changes = ['data1', 'data2'];
+      explorationData.draft_changes = [
+        {
+          cmd: 'edit_translation',
+          language_code: 'fr',
+          content_id: 'content0',
+          translation: {
+            content_value: '<p>test content one</p>',
+            content_format: 'html',
+            needs_update: false,
+          },
+        },
+        {
+          cmd: 'edit_translation',
+          language_code: 'fr',
+          content_id: 'content4',
+          translation: {
+            content_value: '<p>test content four</p>',
+            content_format: 'html',
+            needs_update: false,
+          },
+        },
+        {
+          cmd: 'remove_translations',
+          content_id: 'content0',
+        },
+      ];
 
       component.ngOnInit();
     });
@@ -901,6 +930,43 @@ describe('Exploration editor page component', () => {
       discardPeriodicTasks();
     }));
 
+    it('should update entity translations dict with draft changes', fakeAsync(() => {
+      spyOn(EntityTranslation, 'createFromBackendDict').and.callThrough();
+      let entityTranslation = EntityTranslation.createFromBackendDict({
+        entity_id: explorationId,
+        entity_type: 'exploration',
+        entity_version: explorationData.version,
+        language_code: 'fr',
+        translations: {
+          content4: {
+            content_value: '<p>test content four</p>',
+            content_format: 'html',
+            needs_update: false,
+          },
+        },
+      });
+
+      mockInitExplorationPageEmitter.emit();
+      tick();
+
+      expect(EntityTranslation.createFromBackendDict).toHaveBeenCalledWith({
+        entity_id: explorationId,
+        entity_type: 'exploration',
+        entity_version: explorationData.version,
+        language_code: 'fr',
+        translations: {},
+      });
+
+      expect(
+        entityTranslationsService.languageCodeToEntityTranslations
+      ).toEqual({
+        fr: entityTranslation,
+      });
+
+      flush();
+      discardPeriodicTasks();
+    }));
+
     it(
       'should start editor tutorial when closing welcome exploration' +
         ' modal',