Fix part of oppia#9749: Migration of ParamChangesEditorComponent from…

… angularJs to Angular. (oppia#16335) * paramChanges Editor migration * done * done * two testing files * value generator editor * done * keytones * text space * changes for pass * pass * testing update * done * upstred
aishacodes · Oct 18, 2022 · 989ec45 · 989ec45
1 parent 58d1033
commit 989ec45
Show file tree

Hide file tree

Showing 34 changed files with 1,117 additions and 916 deletions.
diff --git a/core/controllers/resources_test.py b/core/controllers/resources_test.py
@@ -920,4 +920,4 @@ def test_html_response(self):
         response = self.get_html_response(
             '/value_generator_handler/' + copier_id
         )
-        self.assertIn(b'<object-editor obj-type="<[objType]>"', response.body)
+        self.assertIn(b'<object-editor [objType]="objType"', response.body)
diff --git a/core/domain/value_generators_domain.py b/core/domain/value_generators_domain.py
@@ -61,7 +61,7 @@ def get_html_template(cls) -> str:
         """
         return utils.get_file_contents(os.path.join(
             os.getcwd(), feconf.VALUE_GENERATORS_DIR, 'templates',
-            '%s.html' % cls.__name__))
+            '%s.component.html' % cls.__name__))
 
     # Here we use type Any because child classes of BaseValueGenerator can use
     # the 'generate_value' function with different types of arguments, 'args',

diff --git a/core/templates/components/shared-component.module.ts b/core/templates/components/shared-component.module.ts
@@ -159,6 +159,8 @@ import { VisualizationSortedTilesComponent } from 'visualizations/oppia-visualiz
 import { OppiaVisualizationClickHexbinsComponent } from 'visualizations/oppia-visualization-click-hexbins.directive';
 import { OppiaVisualizationFrequencyTableComponent } from 'visualizations/oppia-visualization-frequency-table.directive';
 import { OppiaVisualizationEnumeratedFrequencyTableComponent } from 'visualizations/oppia-visualization-enumerated-frequency-table.directive';
+import { RandomSelectorComponent } from 'value_generators/templates/random-selector.component';
+import { CopierComponent } from 'value_generators/templates/copier.component';
 
 // Pipes.
 import { StringUtilityPipesModule } from 'filters/string-utility-filters/string-utility-pipes.module';
@@ -174,13 +176,16 @@ import { SmartRouterModule } from 'hybrid-router-module-provider';
 import { StaleTabInfoModalComponent } from './stale-tab-info/stale-tab-info-modal.component';
 import { UnsavedChangesStatusInfoModalComponent } from './unsaved-changes-status-info/unsaved-changes-status-info-modal.component';
 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
+import { MatMenuModule} from '@angular/material/menu';
+import { DynamicComponentModule } from 'value_generators/templates/dynamic-component.module';
 
 @NgModule({
   imports: [
     BackgroundBannerModule,
     BaseModule,
     CommonModule,
     DragDropModule,
+    MatMenuModule,
     CustomFormsComponentsModule,
     CommonElementsModule,
     CodeMirrorModule,
@@ -205,6 +210,7 @@ import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
     AngularFireAuthModule,
     MatProgressSpinnerModule,
     NgbModalModule,
+    DynamicComponentModule
   ],
 
   providers: [
@@ -465,6 +471,8 @@ import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
     OppiaVisualizationFrequencyTableComponent,
     ReviewTestPageComponent,
     VisualizationSortedTilesComponent,
+    CopierComponent,
+    RandomSelectorComponent
   ],
 
   exports: [

diff --git a/...itor-page/editor-tab/state-param-changes-editor/state-param-changes-editor.component.html b/...itor-page/editor-tab/state-param-changes-editor/state-param-changes-editor.component.html
@@ -2,7 +2,7 @@
   <mat-card class="oppia-editor-card-with-avatar">
     <div class="oppia-editor-card-body">
       <div class="oppia-editor-card-section e2e-test-state-edit-param-changes">
-        <param-changes-editor [paramChangesService]="spcs"
+        <param-changes-editor [paramChangesServiceName]="'stateParamChangesService'"
                               [currentlyInSettingsTab]="false">
         </param-changes-editor>
       </div>

diff --git a/core/templates/pages/exploration-editor-page/exploration-editor-page.module.ts b/core/templates/pages/exploration-editor-page/exploration-editor-page.module.ts
@@ -36,7 +36,6 @@ import { platformFeatureInitFactory, PlatformFeatureService } from
 import { RequestInterceptor } from 'services/request-interceptor.service';
 import { StateParamChangesEditorComponent } from './editor-tab/state-param-changes-editor/state-param-changes-editor.component';
 import { DeleteStateSkillModalComponent } from './editor-tab/templates/modal-templates/delete-state-skill-modal.component';
-import { ParamChangesEditorDirective } from './param-changes-editor/param-changes-editor.component';
 import { SwitchContentLanguageRefreshRequiredModalComponent } from 'pages/exploration-player-page/switch-content-language-refresh-required-modal.component';
 import { InteractionExtensionsModule } from 'interactions/interactions.module';
 import { SaveVersionMismatchModalComponent } from './modal-templates/save-version-mismatch-modal.component';
@@ -99,6 +98,8 @@ import { StateTranslationComponent } from './translation-tab/state-translation/s
 import { TranslatorOverviewComponent } from './translation-tab/translator-overview/translator-overview.component';
 import { StateTranslationStatusGraphComponent } from './translation-tab/state-translation-status-graph/state-translation-status-graph.component';
 import { TranslationTabComponent } from './translation-tab/translation-tab.component';
+import { ValueGeneratorEditorComponent } from './param-changes-editor/value-generator-editor.component';
+import { ParamChangesEditorComponent } from './param-changes-editor/param-changes-editor.component';
 import { ExplorationEditorPageComponent } from './exploration-editor-page.component';
 
 @NgModule({
@@ -123,7 +124,6 @@ import { ExplorationEditorPageComponent } from './exploration-editor-page.compon
   declarations: [
     CkEditorCopyToolbarComponent,
     DeleteStateSkillModalComponent,
-    ParamChangesEditorDirective,
     StateParamChangesEditorComponent,
     SwitchContentLanguageRefreshRequiredModalComponent,
     SaveVersionMismatchModalComponent,
@@ -178,6 +178,8 @@ import { ExplorationEditorPageComponent } from './exploration-editor-page.compon
     AddAudioTranslationModalComponent,
     AudioTranslationBarComponent,
     StateTranslationEditorComponent,
+    ValueGeneratorEditorComponent,
+    ParamChangesEditorComponent,
     StateTranslationComponent,
     TranslatorOverviewComponent,
     StateTranslationStatusGraphComponent,
@@ -241,6 +243,8 @@ import { ExplorationEditorPageComponent } from './exploration-editor-page.compon
     AddAudioTranslationModalComponent,
     AudioTranslationBarComponent,
     StateTranslationEditorComponent,
+    ValueGeneratorEditorComponent,
+    ParamChangesEditorComponent,
     StateTranslationComponent,
     TranslatorOverviewComponent,
     StateTranslationStatusGraphComponent,

diff --git a/...s/exploration-editor-page/improvements-tab/needs-guiding-responses-task.component.spec.ts b/...s/exploration-editor-page/improvements-tab/needs-guiding-responses-task.component.spec.ts
@@ -34,7 +34,20 @@ describe('NeedsGuidingResponsesTask component', function() {
   const stateName = 'Introduction';
   const totalAnswersCount = 50;
   let task = {targetId: stateName};
-  let stats = {answerStats: [], stateStats: {totalAnswersCount}};
+  let stats = {
+    answerStats: [],
+    stateStats: {
+      totalAnswersCount,
+      usefulFeedbackCount: null,
+      totalHitCount: null,
+      firstHitCount: null,
+      numTimesSolutionViewed: null,
+      numCompletions: null
+    },
+    cstPlaythroughIssues: null,
+    eqPlaythroughIssues: null,
+    misPlaythroughIssues: null
+  } as SupportingStateStats;
 
   class MockNgbModal {
     open() {
@@ -71,7 +84,7 @@ describe('NeedsGuidingResponsesTask component', function() {
     routerService = TestBed.inject(RouterService);
 
     component.task = task as NeedsGuidingResponsesTask;
-    component.stats = stats as unknown as SupportingStateStats;
+    component.stats = stats as SupportingStateStats;
     component.ngOnInit();
   });
 

diff --git a/...plates/pages/exploration-editor-page/modal-templates/lost-changes-modal.component.spec.ts b/...plates/pages/exploration-editor-page/modal-templates/lost-changes-modal.component.spec.ts
@@ -25,6 +25,7 @@ import { LostChange, LostChangeObjectFactory } from
 
 import { LostChangesModalComponent } from './lost-changes-modal.component';
 import { LoggerService } from 'services/contextual/logger.service';
+import { UtilsService } from 'services/utils.service';
 
 @Component({
   selector: 'oppia-changes-in-human-readable-form',
@@ -52,7 +53,20 @@ describe('Lost Changes Modal Component', () => {
   const lostChanges = [{
     cmd: 'add_state',
     state_name: 'State name',
-  } as unknown as LostChange];
+    utilsService: new UtilsService,
+    isEndingExploration: () => false,
+    isAddingInteraction: () => false,
+    isOldValueEmpty: () => false,
+    isNewValueEmpty: () => false,
+    isOutcomeFeedbackEqual: () => false,
+    isOutcomeDestEqual: () => false,
+    isDestEqual: () => false,
+    isFeedbackEqual: () => false,
+    isRulesEqual: () => false,
+    getRelativeChangeToGroups: () => 'string',
+    getLanguage: () => 'en',
+    getStatePropertyValue: (value1) => 'string'
+  } as LostChange];
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({

diff --git a/...es/pages/exploration-editor-page/param-changes-editor/param-changes-editor.component.html b/...es/pages/exploration-editor-page/param-changes-editor/param-changes-editor.component.html
@@ -1,18 +1,19 @@
 <style>
-  param-changes-editor .oppia-param-editor-row {
+  .oppia-param-editor-row {
+    margin-bottom: 15px;
     position: relative;
   }
-  param-changes-editor .oppia-param-display-row {
+  .oppia-param-display-row {
     margin-bottom: 4px;
   }
-  param-changes-editor .oppia-param-change-sort-handle {
+  .oppia-param-change-sort-handle {
     cursor: move;
     left: -20px;
     opacity: 0.3;
     position: absolute;
     top: 4px;
   }
-  param-changes-editor .oppia-delete-param-change-button {
+  .oppia-delete-param-change-button {
     background: none;
     border: 0;
     color: #000;
@@ -24,100 +25,96 @@
     top: 0;
     width: 30px;
   }
-  param-changes-editor .oppia-delete-param-change-button:hover {
+  .oppia-delete-param-change-button:hover {
     opacity: 1;
   }
-  param-changes-editor .oppia-form-control {
+  .oppia-form-control {
     display: inline;
     width: 110px;
   }
-  param-changes-editor .oppia-serious-warning-text-container {
+  .oppia-serious-warning-text-container {
     margin-bottom: 20px;
     margin-top: 20px;
   }
-  param-changes-editor .oppia-card-parameter {
+  .oppia-card-parameter {
     opacity: 0.7;
   }
 </style>
+
 <!--
-  We do not track by $index here, because if we do, then the select2 dropdown
+  We do not track by index here, because if we do, then the select2 dropdown
   will not update when elements are swapped or deleted.
 -->
-<div ng-if="isParamChangesEditorOpen && EditabilityService.isEditableOutsideTutorialMode()">
-  <div ng-model="$ctrl.paramChangesService.displayed"
-       ui-sortable="PARAM_CHANGE_LIST_SORTABLE_OPTIONS"
+<div *ngIf="isParamChangesEditorOpen && editabilityService.isEditableOutsideTutorialMode()">
+  <div cdkDropList
+       (cdkDropListDropped)="drop($event)"
        class="oppia-param-change-draggable-area">
-    <div ng-repeat="paramChange in $ctrl.paramChangesService.displayed"
+    <div *ngFor="let paramChange of paramChangesService.displayed; let index = index"
+         cdkDrag
          class="oppia-param-editor-row e2e-test-param-changes-list">
-      <span class="oppia-param-change-sort-handle" ng-if="$ctrl.paramChangesService.displayed.length > 1">
+      <span class="oppia-param-change-sort-handle" *ngIf="paramChangesService.displayed.length > 1">
         <picture>
-          <source type="image/webp" ng-srcset="<[getStaticImageUrl('/general/drag_dots.webp')]>">
-          <source type="image/png" ng-srcset="<[getStaticImageUrl('/general/drag_dots.png')]>">
-          <img ng-if="EditabilityService.isEditable()" ng-src="<[getStaticImageUrl('/general/drag_dots.png')]>" width="10">
+          <source type="image/webp" [src]="getStaticImageUrl('/general/drag_dots.webp')">
+          <source type="image/png" [src]="getStaticImageUrl('/general/drag_dots.png')">
+          <img *ngIf="editabilityService.isEditable()" [src]="getStaticImageUrl('/general/drag_dots.png')" width="10">
         </picture>
       </span>
       <span>
         Change
-        <select2-dropdown item="paramChange.name"
-                          choices="paramNameChoices"
-                          placeholder="Param name"
-                          new-choice-regex="^[A-Za-z]+$"
-                          width="143px">
-        </select2-dropdown>
-
-        <select class="form-control oppia-form-control" ng-model="paramChange.generatorId"
-                ng-options="key as PREAMBLE_TEXT[key] for (key, value) in PREAMBLE_TEXT"
-                required
-                ng-change="onChangeGeneratorType(paramChange)">
+        <select class="form-control e2e-test-history-version-dropdown-first"
+                [(ngModel)]="paramChange.generatorId"
+                (change)="onChangeGeneratorType(paramChange)">
+          <option *ngFor="let choice of PREAMBLE_TEXT | keyvalue; index as index" [value]="choice.key">{{ choice.value }}</option>
         </select>
-        <value-generator-editor generator-id="paramChange.generatorId"
-                                customization-args="paramChange.customizationArgs"
-                                obj-type="'UnicodeString'">
-        </value-generator-editor>
+        <br>
+        <oppia-value-generator-editor [generatorId]="paramChange.generatorId"
+                                      [customizationArgs]="paramChange.customizationArgs"
+                                      [objType]="'UnicodeString'">
+        </oppia-value-generator-editor>
       </span>
       <button type="button" class="oppia-delete-param-change-button oppia-transition-200"
-              ng-click="deleteParamChange($index)" title="Delete parameter change">
-        <i class="material-icons md-18" ng-if="EditabilityService.isEditable()">&#xE5CD;</i>
+              (click)="deleteParamChange(index)" title="Delete parameter change">
+        <i class="material-icons md-18" *ngIf="editabilityService.isEditable()">&#xE5CD;</i>
       </button>
     </div>
   </div>
 
   <div>
     <button type="button" class="btn btn-secondary btn-sm e2e-test-add-param-button"
-            ng-click="addParamChange()">
+            (click)="addParamChange()">
       Add parameter change
     </button>
   </div>
 
-  <div ng-if="warningText" class="oppia-serious-warning-text oppia-serious-warning-text-container">
+  <div *ngIf="warningText" class="oppia-serious-warning-text oppia-serious-warning-text-container">
     <i class="material-icons">&#xE002;</i>
-    <[warningText]>
+    {{ warningText }}
   </div>
 
   <button type="button"
           class="btn btn-success oppia-save-state-item-button float-right e2e-test-save-param-changes-button"
-          ng-click="saveParamChanges()"
-          ng-disabled="!areDisplayedParamChangesValid()">
+          (click)="saveParamChanges()"
+          [disabled]="!areDisplayedParamChangesValid()">
     Save Changes
   </button>
-  <button type="button" class="btn btn-secondary float-right" ng-click="cancelEdit()">Cancel</button>
+  <button type="button" class="btn btn-secondary float-right" (click)="cancelEdit()">Cancel</button>
   <div class="oppia-clear"></div>
 </div>
 
-<div ng-if="!isParamChangesEditorOpen" ng-click="openParamChangesEditor()"
-     ng-class="{'oppia-editable-section': EditabilityService.isEditable()}">
-  <i ng-if="EditabilityService.isEditable()" class="material-icons oppia-editor-edit-icon"
+<div *ngIf="!isParamChangesEditorOpen" (click)="openParamChangesEditor()"
+     [ngClass]="{'oppia-editable-section': editabilityService.isEditable()}">
+  <i *ngIf="editabilityService.isEditable()" class="material-icons oppia-editor-edit-icon"
      title="Edit Card Parameter Changes">&#xE254;
   </i>
   <div class="oppia-param-changes-display oppia-card-parameter oppia-transition-200"
-       ng-class="{'oppia-prevent-selection': EditabilityService.isEditable()}"
+       [ngClass]="{'oppia-prevent-selection': editabilityService.isEditable()}"
        title="Card Parameter Changes">
-    <span ng-if="$ctrl.paramChangesService.savedMemento.length === 0">
+    <span *ngIf="paramChangesService.savedMemento && paramChangesService.savedMemento.length === 0">
       <em>No parameter changes.</em>
     </span>
-    <div class="oppia-param-display-row" ng-repeat="paramChange in $ctrl.paramChangesService.savedMemento track by $index">
-      <[$index + 1]>. Change <span class="badge badge-info"><[paramChange.name]></span>
-       <[HUMAN_READABLE_ARGS_RENDERERS[paramChange.generatorId](paramChange.customizationArgs)]>
+    <div class="oppia-param-display-row" *ngFor="let paramChange of paramChangesService.savedMemento; index as index">
+      {{ index + 1 }}. Change <span class="badge badge-info">{{ paramChange.name }}</span>
+      {{ HUMAN_READABLE_ARGS_RENDERERS[paramChange.generatorId](paramChange.customizationArgs) }}
     </div>
   </div>
 </div>