Merge pull request #1700 from SciCatProject/SWAP-4324-scicat-frontend…

…-implement-localization-on-datase

feat: implement configurable localization for datasets detail view

package.json

@@ -34,6 +34,7 @@
     "@ngrx/effects": "^16",
     "@ngrx/router-store": "^16",
     "@ngrx/store": "^16",
+    "@ngx-translate/core": "^16.0.4",
     "@scicatproject/scicat-sdk-ts": "^4.8.3",
     "autolinker": "^4.0.0",
     "deep-equal": "^2.0.5",

src/app/app-config.service.ts

@@ -2,6 +2,7 @@ import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { timeout } from "rxjs/operators";
 import {
+  datasetDetailViewLabelOption,
   DatasetsListSettings,
   LabelMaps,
   TableColumn,
@@ -101,6 +102,7 @@ export interface AppConfig {
   labelMaps: LabelMaps;
   thumbnailFetchLimitPerPage: number;
   maxFileUploadSizeInMb?: string;
+  datasetDetailViewLabelOption?: datasetDetailViewLabelOption;
 }
 
 @Injectable()

src/app/app.module.ts

@@ -28,6 +28,8 @@ import { SnackbarInterceptor } from "shared/interceptors/snackbar.interceptor";
 import { AuthService } from "shared/services/auth/auth.service";
 import { InternalStorage, SDKStorage } from "shared/services/auth/base.storage";
 import { CookieService } from "ngx-cookie-service";
+import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
+import { CustomTranslateLoader } from "shared/loaders/custom-translate.loader";
 
 const appConfigInitializerFn = (appConfig: AppConfigService) => {
   return () => appConfig.loadAppConfig();
@@ -51,6 +53,13 @@ const apiConfigurationFn = (
   imports: [
     AppConfigModule,
     AppRoutingModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useClass: CustomTranslateLoader,
+        deps: [AppConfigService],
+      },
+    }),
     BrowserAnimationsModule,
     BrowserModule,
     HttpClientModule,

src/app/datasets/dataset-detail/dataset-detail.component.html

@@ -30,28 +30,28 @@
           <div mat-card-avatar class="section-icon">
             <mat-icon> description </mat-icon>
           </div>
-          General Information
+          {{ "General Information" | translate }}
         </mat-card-header>
         <mat-card-content>
           <table>
             <tr>
-              <th>Name</th>
+              <th>{{ "Dataset Name" | translate }}</th>
               <td *ngIf="!editEnabled">{{ dataset.datasetName || "-" }}</td>
               <td *ngIf="editEnabled && editingAllowed">
                 <mat-form-field class="full-width">
-                  <mat-label>Name</mat-label>
+                  <mat-label>{{ "Dataset Name" | translate }}</mat-label>
                   <input matInput type="text" formControlName="datasetName" />
                 </mat-form-field>
               </td>
             </tr>
             <tr>
-              <th>Description</th>
+              <th>{{ "Description" | translate }}</th>
               <td *ngIf="!editEnabled">
                 <span [innerHTML]="dataset.description || '-' | linky"></span>
               </td>
               <td *ngIf="editEnabled && editingAllowed">
                 <mat-form-field class="full-width">
-                  <mat-label>Description</mat-label>
+                  <mat-label>{{ "Description" | translate }}</mat-label>
                   <textarea
                     matInput
                     rows="5"
@@ -61,7 +61,7 @@
               </td>
             </tr>
             <tr>
-              <th>PID</th>
+              <th>{{ "Pid" | translate }}</th>
               <td>
                 {{ dataset.pid }}
                 <button
@@ -74,15 +74,15 @@
               </td>
             </tr>
             <tr *ngIf="dataset.type as value">
-              <th>Type</th>
+              <th>{{ "Type" | translate }}</th>
               <td>{{ value }}</td>
             </tr>
             <tr *ngIf="dataset.creationTime as value">
-              <th>Creation Time</th>
+              <th>{{ "Creation time" | translate }}</th>
               <td>{{ value | date: "yyyy-MM-dd HH:mm" }}</td>
             </tr>
             <tr class="keywords-row">
-              <th>Keywords</th>
+              <th>{{ "Keywords" | translate }}</th>
               <td *ngIf="!editEnabled">
                 <mat-chip-set role="list" #keywordChips>
                   <mat-chip
@@ -118,7 +118,7 @@
               </td>
             </tr>
             <tr *ngIf="dataset.sharedWith && dataset.sharedWith.length > 0">
-              <th>Shared With</th>
+              <th>{{ "Shared With" | translate }}</th>
               <td>
                 <mat-chip-listbox>
                   <mat-chip-option
@@ -171,37 +171,37 @@
           <div mat-card-avatar class="section-icon">
             <mat-icon> person </mat-icon>
           </div>
-          Creator Information
+          {{ "Creator Information" | translate }}
         </mat-card-header>
 
         <mat-card-content>
           <table>
             <tr *ngIf="dataset.owner as value">
-              <th>Owner</th>
+              <th>{{ "Owner" | translate }}</th>
               <td>{{ value }}</td>
             </tr>
             <tr *ngIf="dataset['principalInvestigator'] as value">
-              <th>Principal Investigator</th>
+              <th>{{ "Principal Investigator" | translate }}</th>
               <td><span [innerHTML]="value | linky"></span></td>
             </tr>
             <tr *ngIf="dataset['investigator'] as value">
-              <th>Investigator</th>
+              <th>{{ "Investigator" | translate }}</th>
               <td>{{ value }}</td>
             </tr>
             <tr *ngIf="dataset.orcidOfOwner as value">
-              <th>Orcid</th>
+              <th>{{ "Orcid" | translate }}</th>
               <td><span [innerHTML]="value | linky"></span></td>
             </tr>
             <tr *ngIf="dataset.contactEmail as value">
-              <th>Contact Email</th>
+              <th>{{ "Contact Email" | translate }}</th>
               <td><span [innerHTML]="value | linky"></span></td>
             </tr>
             <tr *ngIf="dataset.ownerGroup as value">
-              <th>Owner Group</th>
+              <th>{{ "Owner Group" | translate }}</th>
               <td>{{ value }}</td>
             </tr>
             <tr *ngIf="dataset.accessGroups as value">
-              <th>Access Groups</th>
+              <th>{{ "Access Groups" | translate }}</th>
               <td>{{ value }}</td>
             </tr>
           </table>
@@ -213,21 +213,21 @@
           <div mat-card-avatar class="section-icon">
             <mat-icon> folder </mat-icon>
           </div>
-          File Information
+          {{ "File Information" | translate }}
         </mat-card-header>
 
         <mat-card-content>
           <table>
             <tr *ngIf="dataset.sourceFolder as value">
-              <th>Source Folder</th>
+              <th>{{ "Source Folder" | translate }}</th>
               <td>{{ value }}</td>
             </tr>
             <tr *ngIf="dataset.size as value">
-              <th>Size</th>
+              <th>{{ "Size" | translate }}</th>
               <td>{{ value | filesize }}</td>
             </tr>
             <tr *ngIf="dataset['dataFormat'] as value">
-              <th>Data Format</th>
+              <th>{{ "Data Format" | translate }}</th>
               <td>{{ value }}</td>
             </tr>
           </table>
@@ -239,13 +239,13 @@
           <div mat-card-avatar class="section-icon">
             <mat-icon> library_books </mat-icon>
           </div>
-          Related Documents
+          {{ "Related Documents" | translate }}
         </mat-card-header>
 
         <mat-card-content>
           <table>
             <tr *ngIf="dataset['proposalId'] && proposal">
-              <th>Proposal</th>
+              <th>{{ "Proposal" | translate }}</th>
               <td>
                 <a (click)="onClickProposal(proposal.proposalId)">{{
                   proposal.title
@@ -259,31 +259,31 @@
                 appConfig.datasetDetailsShowMissingProposalId
               "
             >
-              <th>Proposal Id</th>
+              <th>{{ "Proposal Id" | translate }}</th>
               <td>{{ dataset["proposalId"] }}</td>
             </tr>
             <tr *ngIf="dataset['sampleId'] && sample">
-              <th>Sample</th>
+              <th>{{ "Sample" | translate }}</th>
               <td>
                 <a (click)="onClickSample(sample.sampleId)">
                   <span>{{ sample.description }}</span>
                 </a>
               </td>
             </tr>
             <tr *ngIf="dataset['instrumentId'] && instrument">
-              <th>Instrument</th>
+              <th>{{ "Instrument" | translate }}</th>
               <td>
                 <a (click)="onClickInstrument(instrument.pid)">
                   {{ instrument.name }}
                 </a>
               </td>
             </tr>
             <tr *ngIf="dataset['creationLocation'] as value">
-              <th>Creation Location</th>
+              <th>{{ "Creation Location" | translate }}</th>
               <td>{{ value }}</td>
             </tr>
             <tr *ngIf="dataset.techniques && dataset.techniques.length > 0">
-              <th>Techniques</th>
+              <th>{{ "Techniques" | translate }}</th>
               <td>
                 <div *ngFor="let technique of dataset.techniques">
                   <span>
@@ -304,7 +304,7 @@
                 dataset['inputDatasets'] && dataset['inputDatasets'].length > 0
               "
             >
-              <th>Input Datasets</th>
+              <th>{{ "Input Datasets" | translate }}</th>
               <td>
                 <div *ngFor="let datasetPid of dataset['inputDatasets']">
                   <span>
@@ -331,21 +331,21 @@
           <div mat-card-avatar class="section-icon">
             <mat-icon> analytics </mat-icon>
           </div>
-          Derived Data
+          {{ "Derived Data" | translate }}
         </mat-card-header>
 
         <mat-card-content>
           <table>
             <tr *ngIf="dataset['usedSoftware'] as value">
-              <th>Software Used</th>
+              <th>{{ "Software Used" | translate }}</th>
               <td>{{ value }}</td>
             </tr>
             <tr *ngIf="dataset['jobParameters'] as value">
-              <th>Job Parameters</th>
+              <th>{{ "Job Parameters" | translate }}</th>
               <td>{{ value | json }}</td>
             </tr>
             <tr *ngIf="dataset['jobLogData'] as value">
-              <th>Job Log Data</th>
+              <th>{{ "Job Log Data" | translate }}</th>
               <td>{{ value }}</td>
             </tr>
           </table>
@@ -357,7 +357,7 @@
           <div mat-card-avatar class="section-icon">
             <mat-icon> science </mat-icon>
           </div>
-          Scientific Metadata
+          {{ "Scientific Metadata" | translate }}
         </mat-card-header>
         <mat-card-content>
           <ng-template
@@ -422,10 +422,10 @@
           </ng-template>
         </mat-card-content>
       </mat-card>
-      <mat-card *ngIf="editingAllowed && appConfig.jsonMetadataEnabled">
+      <mat-card *ngIf="appConfig.jsonMetadataEnabled">
         <mat-card-content>
           <button mat-stroked-button (click)="show = !show">
-            {{ show ? "Hide MetaData" : "Show Metadata" }}
+            {{ (show ? "Hide Metadata" : "Show Metadata") | translate }}
           </button>
 
           <br />

src/app/datasets/dataset-detail/dataset-detail.component.spec.ts

@@ -11,7 +11,7 @@ import {
 import { SharedScicatFrontendModule } from "shared/shared.module";
 import { MatTableModule } from "@angular/material/table";
 import { MatChipInputEvent, MatChipsModule } from "@angular/material/chips";
-import { of } from "rxjs";
+import { Observable, of } from "rxjs";
 import { MatDialogRef } from "@angular/material/dialog";
 import { MatCardModule } from "@angular/material/card";
 import { MatIconModule } from "@angular/material/icon";
@@ -33,19 +33,21 @@ import {
   MatSlideToggleChange,
 } from "@angular/material/slide-toggle";
 import { ActivatedRoute, Router } from "@angular/router";
-import {
-  createMock,
-  MockActivatedRoute,
-  mockDataset,
-  mockSample,
-} from "shared/MockStubs";
+import { MockActivatedRoute, mockDataset } from "shared/MockStubs";
 import { DialogComponent } from "shared/modules/dialog/dialog.component";
 import { AppConfigService } from "app-config.service";
 import { AttachmentService } from "shared/services/attachment.service";
+import { OutputDatasetObsoleteDto } from "@scicatproject/scicat-sdk-ts";
 import {
-  OutputDatasetObsoleteDto,
-  ReturnedUserDto,
-} from "@scicatproject/scicat-sdk-ts";
+  TranslateLoader,
+  TranslateModule,
+  TranslationObject,
+} from "@ngx-translate/core";
+class MockTranslateLoader implements TranslateLoader {
+  getTranslation(): Observable<TranslationObject> {
+    return of({});
+  }
+}
 
 describe("DatasetDetailComponent", () => {
   let component: DatasetDetailComponent;
@@ -56,7 +58,9 @@ describe("DatasetDetailComponent", () => {
   };
 
   const getConfig = () => ({
-    editMetadataEnabled: true,
+    datasetDetailViewLabelOption: {
+      currentLabel: "test",
+    },
   });
 
   let store: MockStore;
@@ -76,6 +80,12 @@ describe("DatasetDetailComponent", () => {
         MatTabsModule,
         NgxJsonViewerModule,
         SharedScicatFrontendModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader,
+          },
+        }),
         StoreModule.forRoot({}),
       ],
       providers: [AttachmentService],