Refactored language files to break out reports and tutorial

The .json files have grown so large that it's time to start breaking them apart. We are starting with reports and tutorial. Each new scope that is broken out needs to be defined in app.module in the provideTranslocoScope() arguments.
cisagov · Dec 20, 2024 · 66d1890 · 66d1890
1 parent 58fc723
commit 66d1890
Show file tree

Hide file tree

Showing 16 changed files with 1,937 additions and 1,921 deletions.
diff --git a/CSETWebNg/src/app/app.module.ts b/CSETWebNg/src/app/app.module.ts
@@ -630,6 +630,7 @@ import { OtherRemarksComponent } from './assessment/questions/other-remarks/othe
 import { CmuOtherRemarksComponent } from './reports/cmu/cmu-other-remarks/cmu-other-remarks.component';
 import { TranslocoRootModule } from './transloco-root.module';
 import { TranslocoService } from '@jsverse/transloco';
+import { provideTranslocoScope } from '@jsverse/transloco';
 import { UserLanguageComponent } from './dialogs/user-language/user-language.component';
 import { MalcolmUploadErrorComponent } from './dialogs/malcolm/malcolm-upload-error.component';
 import { FooterService } from './services/footer.service';
@@ -1323,8 +1324,10 @@ import { AnalyticsResultsComponent } from './assessment/results/analytics-result
         CodeEditorModule.forRoot({
             typingsWorkerUrl: 'assets/workers/typings-worker.js',
             baseUrl: 'assets/monaco'
-        })], providers: [
+        })], 
+        providers: [
         TranslocoService,
+        provideTranslocoScope('tutorial', 'reports'),
         ConfigService,
         AuthenticationService,
         {

diff --git a/CSETWebNg/src/app/assessment/prepare/maturity/tutorial-cmmc2/tutorial-cmmc2.component.html b/CSETWebNg/src/app/assessment/prepare/maturity/tutorial-cmmc2/tutorial-cmmc2.component.html
@@ -21,7 +21,7 @@
   SOFTWARE.
 -------------------------->
 <div class="white-panel d-flex justify-content-start flex-column flex-11a tutorial"
-  *transloco="let t; read: 'tutorials.cmmc2'">
+  *transloco="let t; read: 'tutorial.cmmc2'">
   <h3 class="wrap-text mb-3">{{t('title')}}</h3>
 
   <div>

diff --git a/CSETWebNg/src/app/assessment/prepare/maturity/tutorial-cpg/tutorial-cpg.component.html b/CSETWebNg/src/app/assessment/prepare/maturity/tutorial-cpg/tutorial-cpg.component.html
@@ -21,101 +21,101 @@
   SOFTWARE.
 -------------------------->
 <div class="white-panel d-flex justify-content-start flex-column flex-11a tutorial"
-    *transloco="let t; read: 'tutorials.cpg'">
-    <h3 class="wrap-text mb-3">{{t('title')}}</h3>
-    <div *transloco="let k">
-        <h5 >{{k('titles.overview')}}</h5>
-        <p>{{t('1')}}</p>
+    *transloco="let ttcpg; read: 'tutorial.cpg'">
+    <h3 class="wrap-text mb-3">{{ttcpg('title')}}</h3>
+    <div *transloco="let t">
+        <h5 >{{t('titles.overview')}}</h5>
+        <p>{{ttcpg('1')}}</p>
 
-        <p>{{t('2')}}</p>
+        <p>{{ttcpg('2')}}</p>
 
-        <h5 >{{k('titles.assessment')}}</h5>
-        <p>{{t('3')}}</p>
+        <h5 >{{t('titles.assessment')}}</h5>
+        <p>{{ttcpg('3')}}</p>
         <ul>
-            <li>{{t('3a')}}</li>
-            <li>{{t('3b')}}</li>
-            <li>{{t('3c')}}</li>
-            <li>{{t('3d')}}</li>
-            <li>{{t('3e')}}</li>
+            <li>{{ttcpg('3a')}}</li>
+            <li>{{ttcpg('3b')}}</li>
+            <li>{{ttcpg('3c')}}</li>
+            <li>{{ttcpg('3d')}}</li>
+            <li>{{ttcpg('3e')}}</li>
         </ul>
 
-        <p>{{t('4')}}</p>
+        <p>{{ttcpg('4')}}</p>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture1.png" style="width: 550px">
         </div>
 
-        <h6>{{k('tutorials.function')}}</h6>
+        <h6>{{t('tutorial.function')}}</h6>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture2.png" style="width: 350px">
         </div>
-        <p>{{t('5')}}</p>
+        <p>{{ttcpg('5')}}</p>
 
-        <h6>{{k('tutorials.practice identifier')}}</h6>
+        <h6>{{t('tutorial.practice identifier')}}</h6>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture3.png" style="width: 60px">
         </div>
-        <p>{{t('6')}}</p>
+        <p>{{ttcpg('6')}}</p>
 
-        <h6>{{k('tutorials.security practice')}}</h6>
+        <h6>{{t('tutorial.security practice')}}</h6>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture4.png" style="width: 60px">
         </div>
-        <p>{{t('7')}}</p>
+        <p>{{ttcpg('7')}}</p>
 
-        <h6>{{k('tutorials.outcome')}}</h6>
+        <h6>{{t('tutorial.outcome')}}</h6>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture5.png" style="width: 250px">
         </div>
-        <p>{{t('8')}}</p>
+        <p>{{ttcpg('8')}}</p>
 
-        <h6>{{k('titles.cset icons')}}</h6>
+        <h6>{{t('titles.cset icons')}}</h6>
         <div class="img-frame">
             <img src="assets/images/icons/cset-icons.png" style="width: 300px">
         </div>
 
-        <p>{{t('9')}}</p>
+        <p>{{ttcpg('9')}}</p>
         <ul>
-            <li>{{t('9a')}}</li>
+            <li>{{ttcpg('9a')}}</li>
             <ul>
-                <li>{{t('9a1')}}</li>
+                <li>{{ttcpg('9a1')}}</li>
             </ul>
-            <li>{{t('9b')}}</li>
+            <li>{{ttcpg('9b')}}</li>
             <ul>
-                <li>{{t('9b1')}}</li>
+                <li>{{ttcpg('9b1')}}</li>
             </ul>
         </ul>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture6.png" style="width: 400px">
         </div>
-        <p>{{t('10')}}</p>
+        <p>{{ttcpg('10')}}</p>
         <ul>
-            <li>{{t('10a')}}</li>
+            <li>{{ttcpg('10a')}}</li>
             <ul>
-                <li>{{t('10a1')}}</li>
+                <li>{{ttcpg('10a1')}}</li>
             </ul>
-            <li>{{t('10b')}}</li>
+            <li>{{ttcpg('10b')}}</li>
             <ul>
-                <li>{{t('10b1')}}</li>
+                <li>{{ttcpg('10b1')}}</li>
             </ul>
         </ul>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture7.png" style="width: 400px">
         </div>
 
-        <h6>{{k('titles.answer buttons')}}</h6>
+        <h6>{{t('titles.answer buttons')}}</h6>
         <div class="img-frame">
             <img src="assets/images/CPG/tutorial/Picture8.png" style="width: 300px">
         </div>
-        <p>{{t('11')}}</p>
+        <p>{{ttcpg('11')}}</p>
         <ul>
-            <li><b>{{k('answer-options.labels.imp-cpg')}}</b> {{t('11a')}}</li>
-            <li><b>{{k('answer-options.labels.prog-cpg')}}</b> {{t('11b')}}</li>
-            <li><b>{{k('answer-options.labels.scoped-cpg')}}</b> {{t('11c')}}</li>
-            <li><b>{{k('answer-options.labels.not-cpg')}}</b> {{t('11d')}}</li>
+            <li><b>{{t('answer-options.labels.imp-cpg')}}</b> {{ttcpg('11a')}}</li>
+            <li><b>{{t('answer-options.labels.prog-cpg')}}</b> {{ttcpg('11b')}}</li>
+            <li><b>{{t('answer-options.labels.scoped-cpg')}}</b> {{ttcpg('11c')}}</li>
+            <li><b>{{t('answer-options.labels.not-cpg')}}</b> {{ttcpg('11d')}}</li>
         </ul>
-        <h5>{{k('titles.additional resources')}}</h5>
-        <p>{{k('tutorials.additional resources')}}</p>
-        <p>{{k('tutorials.please visit')}} <a href="https://www.cisa.gov/cpgs" target="_blank">https://www.cisa.gov/cpgs</a> {{k('tutorials.for more information')}}</p>
+        <h5>{{t('titles.additional resources')}}</h5>
+        <p>{{t('tutorial.additional resources')}}</p>
+        <p>{{t('tutorial.please visit')}} <a href="https://www.cisa.gov/cpgs" target="_blank">https://www.cisa.gov/cpgs</a> {{t('tutorial.for more information')}}</p>
     </div>
     <app-nav-back-next [page]="'tutorial-cpg'"></app-nav-back-next>
 </div>
diff --git a/CSETWebNg/src/app/assessment/prepare/maturity/tutorial-cpg/tutorial-cpg.component.ts b/CSETWebNg/src/app/assessment/prepare/maturity/tutorial-cpg/tutorial-cpg.component.ts
@@ -24,6 +24,7 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { LayoutService } from '../../../../services/layout.service';
+import { TranslocoService } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-tutorial-cpg',
@@ -40,8 +41,11 @@ export class TutorialCpgComponent implements OnInit {
 
 
   constructor(
-    public layoutSvc: LayoutService
-  ) { }
+    public layoutSvc: LayoutService, 
+    public tSvc: TranslocoService
+  ) { 
+    //this.tSvc.load('tutorial').subscribe();
+  }
 
   ngOnInit(): void {
 

diff --git a/CSETWebNg/src/app/assessment/prepare/maturity/tutorial-mvra/tutorial-mvra.component.html b/CSETWebNg/src/app/assessment/prepare/maturity/tutorial-mvra/tutorial-mvra.component.html
@@ -21,7 +21,7 @@
   SOFTWARE. 
 -------------------------->
 <div class="white-panel d-flex justify-content-start flex-column flex-11a tutorial"
-    *transloco="let t; read: 'tutorials.mvra'">
+    *transloco="let t; read: 'tutorial.mvra'">
     <h3 class="wrap-text mb-3">{{t('title')}}</h3>
     <div *transloco="let k">
         <h5 >{{k('titles.overview')}}</h5>
@@ -35,11 +35,11 @@ <h5 >{{k('extras.scope')}}</h5>
 
         <p>{{t('4')}}</p>
 
-        <h5 >{{k('tutorials.critical service')}}</h5>
+        <h5 >{{k('tutorial.critical service')}}</h5>
 
         <p>{{t('5')}}</p>
 
-        <h5 >{{k('tutorials.asset types')}}</h5>
+        <h5 >{{k('tutorial.asset types')}}</h5>
 
         <p>{{t('6')}}</p>
         <ul>
@@ -77,13 +77,13 @@ <h6>{{k('titles.goal')}}</h6>
         </div>
         <p>{{t('11')}}</p>
 
-        <h6>{{k('tutorials.practice')}}</h6>
+        <h6>{{k('tutorial.practice')}}</h6>
         <div class="img-frame">
             <img src="assets/images/MVRA/tutorial/Picture4.png" style="width: 550px">
         </div>
         <p>{{t('12')}}</p>
 
-        <h6>{{k('tutorials.practice identifier')}}</h6>
+        <h6>{{k('tutorial.practice identifier')}}</h6>
         <div class="img-frame">
             <img src="assets/images/MVRA/tutorial/Picture5.png" style="width: 100px">
         </div>
@@ -118,7 +118,7 @@ <h6>{{k('titles.answer buttons')}}</h6>
 
         </ul>
         <h5>{{k('titles.additional resources')}}</h5>
-        <p>{{k('tutorials.additional resources')}}</p>
+        <p>{{k('tutorial.additional resources')}}</p>
 
     </div>
     <app-nav-back-next [page]="'tutorial-mvra'"></app-nav-back-next>

diff --git a/CSETWebNg/src/app/assessment/prepare/maturity/tutorial-rra/tutorial-rra.component.html b/CSETWebNg/src/app/assessment/prepare/maturity/tutorial-rra/tutorial-rra.component.html
@@ -21,7 +21,7 @@
   SOFTWARE. 
 -------------------------->
 <div class="white-panel d-flex justify-content-start flex-column flex-11a tutorial"
-    *transloco="let t; read: 'tutorials.rra'">
+    *transloco="let t; read: 'tutorial.rra'">
     <h3 class="wrap-text mb-3">{{t('title')}}</h3>
     <div *transloco="let k">
         <h5 >{{k('titles.overview')}}</h5>
@@ -62,7 +62,7 @@ <h6>{{k('titles.goal')}}</h6>
         </div>
 
         <p>{{t('8')}}</p>
-        <h6>{{k('tutorials.practice identifier')}}</h6>
+        <h6>{{k('tutorial.practice identifier')}}</h6>
 
         <div class="img-frame">
             <img src="assets/images/RRA/tutorial/Picture9.png" style="width: 100px">
@@ -98,8 +98,8 @@ <h6>{{k('titles.answer buttons')}}</h6>
             <li><b>{{k('answer-options.button-labels.no')}}</b> {{t('15b')}}</li>
         </ul>
         <h5>{{k('titles.additional resources')}}</h5>
-        <p>{{k('tutorials.additional resources')}}</p>
-        <p>{{k('tutorials.please visit')}} <a href ="https://www.cisa.gov/stopransomware">https://www.cisa.gov/stopransomware</a> {{k('tutorials.for more information')}}</p>
+        <p>{{k('tutorial.additional resources')}}</p>
+        <p>{{k('tutorial.please visit')}} <a href ="https://www.cisa.gov/stopransomware">https://www.cisa.gov/stopransomware</a> {{k('tutorial.for more information')}}</p>
     </div>
     <app-nav-back-next [page]="'tutorial-rra'"></app-nav-back-next>
 </div>
diff --git a/CSETWebNg/src/app/transloco-root.module.ts b/CSETWebNg/src/app/transloco-root.module.ts
@@ -1,13 +1,14 @@
 import { provideTransloco, TranslocoModule, Translation, TranslocoLoader } from '@jsverse/transloco';
 import { inject, Injectable, isDevMode, NgModule } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
 
 
 @Injectable({ providedIn: 'root' })
 export class TranslocoHttpLoader implements TranslocoLoader {
   private http = inject(HttpClient);
 
-  getTranslation(lang: string) {
+  getTranslation(lang: string): Observable<any> {
     return this.http.get<Translation>(`assets/i18n/${lang}.json`);
   }
 }