Multiple languages: Change i18nId string to i18n object

package.json

@@ -71,6 +71,7 @@
     "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.16.11",
     "@ngtools/webpack": "^16.2.6",
+    "@semantic-release/exec": "^6.0.3",
     "@semantic-release/github": "^8.0.4",
     "@types/dom-mediacapture-record": "^1.0.11",
     "@types/jasmine": "^4.3.1",
@@ -168,11 +169,20 @@
           "npmPublish": false
         }
       ],
+      [
+        "@semantic-release/exec",
+        {
+          "prepareCmd": "cd dist; tar -czf en-US.tar.gz en-US"
+        }
+      ],
       [
         "@semantic-release/github",
         {
           "assets": [
-            { "path": "dist/en-US/**", "label": "English build" }
+            {
+              "path": "dist/en-US.tar.gz",
+              "label": "English build"
+            }
           ]
         }
       ]

src/app/teacher/authoring-tool.module.ts

@@ -56,9 +56,11 @@ import { ComponentTypeButtonComponent } from '../../assets/wise5/authoringTool/c
 import { ComponentInfoDialogComponent } from '../../assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component';
 import { ComponentTypeSelectorComponent } from '../../assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component';
 import { EditNodeTitleComponent } from '../../assets/wise5/authoringTool/node/edit-node-title/edit-node-title.component';
+import { AddComponentButtonComponent } from '../../assets/wise5/authoringTool/node/add-component-button/add-component-button.component';
 
 @NgModule({
   declarations: [
+    AddComponentButtonComponent,
     AddLessonChooseLocationComponent,
     AddLessonChooseTemplateComponent,
     AddLessonConfigureComponent,

src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html

@@ -0,0 +1,10 @@
+<button
+  mat-icon-button
+  color="primary"
+  matTooltip="Add a new component"
+  i18n-matTooltip
+  matTooltipPosition="above"
+  (click)="addComponent()"
+>
+  <mat-icon>add_circle</mat-icon>
+</button>

src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.spec.ts

@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AddComponentButtonComponent } from './add-component-button.component';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { RouterTestingModule } from '@angular/router/testing';
+import { MatIconModule } from '@angular/material/icon';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { ChooseNewComponent } from '../../../../../app/authoring-tool/add-component/choose-new-component/choose-new-component.component';
+import { of } from 'rxjs';
+import { Node } from '../../../common/Node';
+
+class MockTeacherProjectService {
+  createComponent() {}
+  saveProject() {}
+}
+let loader: HarnessLoader;
+describe('AddComponentButtonComponent', () => {
+  let component: AddComponentButtonComponent;
+  let fixture: ComponentFixture<AddComponentButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AddComponentButtonComponent],
+      imports: [MatDialogModule, MatIconModule, RouterTestingModule],
+      providers: [{ provide: TeacherProjectService, useClass: MockTeacherProjectService }]
+    });
+    fixture = TestBed.createComponent(AddComponentButtonComponent);
+    component = fixture.componentInstance;
+    component.node = { id: 'node1' } as Node;
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    fixture.detectChanges();
+  });
+
+  describe('clicking on the button', () => {
+    it('shows add component dialog, create selected component, and save project', async () => {
+      const dialogSpy = spyOn(TestBed.inject(MatDialog), 'open').and.returnValue({
+        afterClosed: () => of({ action: 'create', componentType: 'OpenResponse' })
+      } as any);
+      const projectService = TestBed.inject(TeacherProjectService);
+      const createComponentSpy = spyOn(projectService, 'createComponent');
+      const saveProjectSpy = spyOn(projectService, 'saveProject');
+      await (await loader.getHarness(MatButtonHarness)).click();
+      expect(dialogSpy).toHaveBeenCalledWith(ChooseNewComponent, {
+        data: null,
+        width: '80%'
+      });
+      expect(createComponentSpy).toHaveBeenCalled();
+      expect(saveProjectSpy).toHaveBeenCalled();
+    });
+  });
+});

src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.ts

@@ -0,0 +1,52 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { MatDialog } from '@angular/material/dialog';
+import { ChooseNewComponent } from '../../../../../app/authoring-tool/add-component/choose-new-component/choose-new-component.component';
+import { filter } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Node } from '../../../common/Node';
+
+@Component({
+  selector: 'add-component-button',
+  templateUrl: './add-component-button.component.html'
+})
+export class AddComponentButtonComponent {
+  @Input() insertAfterComponentId: string = null;
+  @Input() node: Node;
+  @Output() newComponentsEvent: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+    private dialog: MatDialog,
+    private projectService: TeacherProjectService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  protected addComponent(): void {
+    this.dialog
+      .open(ChooseNewComponent, {
+        data: this.insertAfterComponentId,
+        width: '80%'
+      })
+      .afterClosed()
+      .pipe(filter((componentType) => componentType != null))
+      .subscribe(({ action, componentType }) => {
+        if (action === 'import') {
+          this.router.navigate(['import-component/choose-component'], {
+            relativeTo: this.route,
+            state: {
+              insertAfterComponentId: this.insertAfterComponentId
+            }
+          });
+        } else {
+          const component = this.projectService.createComponent(
+            this.node.id,
+            componentType,
+            this.insertAfterComponentId
+          );
+          this.projectService.saveProject();
+          this.newComponentsEvent.emit([component]);
+        }
+      });
+  }
+}

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html

@@ -37,18 +37,6 @@
       <mat-icon>close</mat-icon>
     </button>
   </div>
-  <ng-template #addComponentButtonTemplate let-componentId="componentId">
-    <button
-      mat-icon-button
-      color="primary"
-      matTooltip="Add a new component"
-      i18n-matTooltip
-      matTooltipPosition="above"
-      (click)="addComponent(componentId)"
-    >
-      <mat-icon>add_circle</mat-icon>
-    </button>
-  </ng-template>
   <div
     *ngIf="!isGroupNode"
     class="components-header"
@@ -57,9 +45,10 @@
     fxLayoutGap="4px"
   >
     <h5 i18n>Components</h5>
-    <ng-container
-      *ngTemplateOutlet="addComponentButtonTemplate; context: { componentId: null }"
-    ></ng-container>
+    <add-component-button
+      [node]="node"
+      (newComponentsEvent)="highlightNewComponentsAndThenShowComponentAuthoring($event)"
+    ></add-component-button>
     <div *ngIf="isAnyComponentSelected()">
       <button
         mat-icon-button
@@ -227,11 +216,12 @@ <h5 i18n>Components</h5>
             [componentContent]="component"
           ></component-authoring-component>
         </div>
-        <div class="add-component">
-          <ng-container
-            *ngTemplateOutlet="addComponentButtonTemplate; context: { componentId: component.id }"
-          ></ng-container>
-        </div>
+        <add-component-button
+          class="add-component"
+          [insertAfterComponentId]="component.id"
+          [node]="node"
+          (newComponentsEvent)="highlightNewComponentsAndThenShowComponentAuthoring($event)"
+        ></add-component-button>
       </div>
     </div>
   </div>

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts

@@ -4,7 +4,6 @@ import { NodeAuthoringComponent } from './node-authoring.component';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
-import { MatDialogModule } from '@angular/material/dialog';
 import { TeacherDataService } from '../../../services/teacherDataService';
 import { TeacherWebSocketService } from '../../../services/teacherWebSocketService';
 import { ClassroomStatusService } from '../../../services/classroomStatusService';
@@ -24,6 +23,7 @@ import { ActivatedRoute, Router, convertToParamMap } from '@angular/router';
 import { of } from 'rxjs';
 import { TeacherNodeService } from '../../../services/teacherNodeService';
 import { EditNodeTitleComponent } from '../edit-node-title/edit-node-title.component';
+import { AddComponentButtonComponent } from '../add-component-button/add-component-button.component';
 
 let component: NodeAuthoringComponent;
 let component1: any;
@@ -39,15 +39,19 @@ let teacherProjectService: TeacherProjectService;
 describe('NodeAuthoringComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [EditNodeTitleComponent, NodeAuthoringComponent, TeacherNodeIconComponent],
+      declarations: [
+        AddComponentButtonComponent,
+        EditNodeTitleComponent,
+        NodeAuthoringComponent,
+        TeacherNodeIconComponent
+      ],
       imports: [
         BrowserAnimationsModule,
         ComponentAuthoringModule,
         DragDropModule,
         FormsModule,
         HttpClientTestingModule,
         MatCheckboxModule,
-        MatDialogModule,
         MatIconModule,
         MatInputModule,
         PreviewComponentModule,

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts

@@ -1,15 +1,13 @@
 import { Component, Input, OnInit, Signal, WritableSignal, computed, signal } from '@angular/core';
-import { Subscription, filter } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { TeacherDataService } from '../../../services/teacherDataService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { ComponentTypeService } from '../../../services/componentTypeService';
 import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService';
 import { Node } from '../../../common/Node';
 import { ComponentContent } from '../../../common/ComponentContent';
 import { temporarilyHighlightElement } from '../../../common/dom/dom';
-import { MatDialog } from '@angular/material/dialog';
 import { ConfigService } from '../../../../wise5/services/configService';
-import { ChooseNewComponent } from '../../../../../app/authoring-tool/add-component/choose-new-component/choose-new-component.component';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TeacherNodeService } from '../../../services/teacherNodeService';
@@ -37,7 +35,6 @@ export class NodeAuthoringComponent implements OnInit {
     private configService: ConfigService,
     private componentServiceLookupService: ComponentServiceLookupService,
     private componentTypeService: ComponentTypeService,
-    private dialog: MatDialog,
     private nodeService: TeacherNodeService,
     private projectService: TeacherProjectService,
     private dataService: TeacherDataService,
@@ -122,34 +119,6 @@ export class NodeAuthoringComponent implements OnInit {
     this.scrollToTopOfPage();
   }
 
-  protected addComponent(insertAfterComponentId: string): void {
-    const dialogRef = this.dialog.open(ChooseNewComponent, {
-      data: insertAfterComponentId,
-      width: '80%'
-    });
-    dialogRef
-      .afterClosed()
-      .pipe(filter((componentType) => componentType != null))
-      .subscribe(({ action, componentType }) => {
-        if (action === 'import') {
-          this.router.navigate(['import-component/choose-component'], {
-            relativeTo: this.route,
-            state: {
-              insertAfterComponentId: insertAfterComponentId
-            }
-          });
-        } else {
-          const component = this.projectService.createComponent(
-            this.nodeId,
-            componentType,
-            insertAfterComponentId
-          );
-          this.projectService.saveProject();
-          this.highlightNewComponentsAndThenShowComponentAuthoring([component]);
-        }
-      });
-  }
-
   protected hideAllComponentSaveButtons(): void {
     for (const component of this.components) {
       const service = this.componentServiceLookupService.getService(component.type);
@@ -276,7 +245,7 @@ export class NodeAuthoringComponent implements OnInit {
    * @param newComponents an array of the new components we have just added
    * @param expandComponents expand component(s)' authoring views after highlighting
    */
-  private highlightNewComponentsAndThenShowComponentAuthoring(
+  protected highlightNewComponentsAndThenShowComponentAuthoring(
     newComponents: any = [],
     expandComponents: boolean = true
   ): void {

src/assets/wise5/services/translateProjectService.ts

@@ -38,17 +38,19 @@ export class TranslateProjectService {
   }
 
   private getTranslationMappingURL(locale: string): string {
-    return this.configService.getConfigParam('projectURL').replace('.json', `.${locale}.json`);
+    return this.configService
+      .getConfigParam('projectURL')
+      .replace('project.json', `translations.${locale}.json`);
   }
 
   private applyTranslations(projectElement: any, translations: any): void {
     Object.keys(projectElement)
-      .filter((key) => key.endsWith('.i18nId'))
+      .filter((key) => key.endsWith('.i18n'))
       .forEach((key) => {
-        const translationKey = projectElement[key];
+        const translationKey = projectElement[key].id;
         if (translations[translationKey]) {
-          const keyWithoutI18NId = key.substring(0, key.lastIndexOf('.i18nId'));
-          projectElement[keyWithoutI18NId] = translations[translationKey];
+          const keyWithoutI18NId = key.substring(0, key.lastIndexOf('.i18n'));
+          projectElement[keyWithoutI18NId] = translations[translationKey].value;
         }
       });
     Object.values(projectElement).forEach((value) => {