feat: make "About" and "Help" sections configurable

src/app/_layout/app-main-layout/app-main-layout.component.scss

@@ -1,5 +1,5 @@
 .main-app {
   height: 100%;
-  min-height: calc(100vh - 6.5rem);
+  min-height: calc(100vh - 3.5rem);
   padding: 1.5rem;
 }

src/app/about/about/about.component.html

@@ -10,7 +10,6 @@
         <ul>
           <li>
             <a
-              *ngIf="facility === 'PSI'"
               href="{{ SciCatGitHub }}"
               target="blank"
               >SciCat Github Project.</a
@@ -24,20 +23,22 @@
       <mat-card-header>
         <mat-card-title>Access Conditions</mat-card-title>
       </mat-card-header>
-      <mat-card-content> {{ accessText }}</mat-card-content>
+      <mat-card-content>
+        <span [innerHTML]="accessText | linky"></span>
+      </mat-card-content>
     </mat-card>
 
     <mat-card class="example-card">
       <mat-card-header>
         <mat-card-title>Terms of Use</mat-card-title>
       </mat-card-header>
       <mat-card-content>
-        {{ termsText }}
+        <span [innerHTML]="termsText | linky"></span>
         <a *ngIf="facility === 'PSI'" href="{{ SNFLink }}" target="blank"
           >Open Research Data.</a
         >
         <br /><br />
-        {{ termsTextContinued }}
+        <span [innerHTML]="termsTextContinued | linky"></span>
         <a *ngIf="facility === 'PSI'" href="{{ PSIDataPolicy }}" target="blank"
           >Data Policy.</a
         >

src/app/about/about/about.component.ts

@@ -31,42 +31,17 @@ export class AboutComponent implements OnInit {
     this.SNFLink =
       "http://www.snf.ch/en/theSNSF/research-policies/open_research_data/Pages/default.aspx#Guidelines%20and%20Regulations";
     this.PSIDataPolicy = "https://www.psi.ch/en/science/psi-data-policy";
-    this.aboutText =
+    this.aboutText = 
+      this.appConfig.aboutText || 
       "Scicat allows users to access data and metadata from experiments";
-    this.accessText = "Users must comply with access policy of instruments";
-    this.termsText = "Data can be used freely under the CC-BY-4.0 licence";
-    if (this.facility === "ESS") {
-      this.aboutText =
-        "Scicat is a metadata catalogue allows users to access information about experimental results, " +
-        "measured at the European Spallation Source, " +
-        "(https://esss.se/). " +
-        "Scientific datasets are linked to proposals and samples. " +
-        "Scientific datasets are linked to publications (DOI, PID). " +
-        "SciCat helps to keep track of data provenance (i.e. the steps leading to the final results). " +
-        "Scicat allows users to find data based on the metadata (both your own data and other peoples’ public data). " +
-        "In the long term, SciCat will help to automate scientific analysis workflows.";
-      this.accessText =
-        "Access to the online catalogue of open data will be given to a user," +
-        " providing the user registers with ESS " +
-        " and accepts the terms of the ESS scientific data policy ";
-      this.termsText =
-        "All scientific datasets are licensed under the CC-BY-4.0 license ";
-    } else if (this.facility === "PSI") {
-      this.aboutText =
-        "SciCat is a metadata catalog. At PSI, SciCat works in conjunction with a PetaByte archive and remote accesss system." +
-        " Together these components provide users with the ability to store, search and access their data." +
-        " SciCat is an open source project in collaboration with ESS and Max IV";
-
-      this.accessText =
-        "Access to SciCat is granted to users by the Digital User Office.";
-      this.termsTextContinued = "Additionally, PSI defines it's own ";
-      this.termsText =
-        "The Swiss National Science Foundation describes policy and guidelines on ";
-    } else if (this.facility === "MAX IV") {
-      this.aboutText =
-        "Scicat allows users to access data and metadata from experiments at MAX IV.";
-      this.accessText = "Users must comply with access policy of instruments";
-      this.termsText = "Data can be used freely under the CC-BY-4.0 licence";
-    }
+    this.accessText = 
+      this.appConfig.accessText || 
+      "Users must comply with access policy of instruments";
+    this.termsText = 
+      this.appConfig.termsText || 
+      "Data can be used freely under the CC-BY-4.0 license";
+    this.termsTextContinued = 
+      this.appConfig.termsTextContinued || 
+      "";
   }
 }

src/app/app-config.service.spec.ts

@@ -45,6 +45,17 @@ const appConfig: AppConfig = {
   multipleDownloadAction: "http://localhost:3012/zip",
   multipleDownloadEnabled: true,
   multipleDownloadUseAuthToken: false,
+  aboutText: "Configured about text",
+  accessText: "Configured access policy",
+  termsText: "Configured terms of use",
+  termsTextContinued: "Configured additional terms text",
+  docText: "Configured documentation Text",
+  gettingStartedExtraText: "Configured gettingStarted Text",
+  whereIsMyDataText: "Configured whereIsMyDataText",
+  howToPublishDataText: "Configured howToPublishDataText",
+  ingestManualExtraText = "Configured ingestManualExtraText",
+  whereAreMyProposalsExtraText = "Configured whereAreMyProposalsExtraText",
+  whereAreMySamplesExtraText = "Configured whereAreMySamplesExtraText",
   oAuth2Endpoints: [],
   policiesEnabled: true,
   retrieveDestinations: [],

src/app/app-config.service.ts

@@ -2,10 +2,9 @@ import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { timeout } from "rxjs/operators";
 import {
-  DatasetDetailComponentConfig,
+  datasetDetailViewLabelOption,
   DatasetsListSettings,
   LabelMaps,
-  LabelsLocalization,
   TableColumn,
 } from "state-management/models";
 
@@ -103,9 +102,18 @@ export interface AppConfig {
   labelMaps: LabelMaps;
   thumbnailFetchLimitPerPage: number;
   maxFileUploadSizeInMb?: string;
-  datasetDetailComponent?: DatasetDetailComponentConfig;
-  labelsLocalization?: LabelsLocalization;
-  dateFormat?: string;
+  datasetDetailViewLabelOption?: datasetDetailViewLabelOption;
+  aboutText?: string;
+  accessText?: string;
+  termsText?: string;
+  termsTextContinued?: string;
+  docText?: string;
+  gettingStartedExtraText?: string;
+  whereIsMyDataText?: string;
+  howToPublishDataText?: string;
+  ingestManualExtraText?: string;
+  whereAreMyProposalsExtraText?: string;
+  whereAreMySamplesExtraText?: string;
 }
 
 @Injectable()
@@ -133,10 +141,6 @@ export class AppConfigService {
   }
 
   getConfig(): AppConfig {
-    if (!this.appConfig) {
-      console.error("AppConfigService: Configuration not loaded!");
-    }
-
     return this.appConfig as AppConfig;
   }
 }

src/app/app-routing/lazy/dataset-details-dashboard-routing/dataset-details-dashboard.routing.module.ts

@@ -2,21 +2,22 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { AdminGuard } from "app-routing/admin.guard";
 import { AuthGuard } from "app-routing/auth.guard";
+import { LeavingPageGuard } from "app-routing/pending-changes.guard";
 import { ServiceGuard } from "app-routing/service.guard";
 import { AdminTabComponent } from "datasets/admin-tab/admin-tab.component";
 import { DatafilesComponent } from "datasets/datafiles/datafiles.component";
 import { JsonScientificMetadataComponent } from "datasets/jsonScientificMetadata/jsonScientificMetadata.component";
+import { DatasetDetailComponent } from "datasets/dataset-detail/dataset-detail.component";
 import { DatasetFileUploaderComponent } from "datasets/dataset-file-uploader/dataset-file-uploader.component";
 import { DatasetLifecycleComponent } from "datasets/dataset-lifecycle/dataset-lifecycle.component";
 import { ReduceComponent } from "datasets/reduce/reduce.component";
 import { RelatedDatasetsComponent } from "datasets/related-datasets/related-datasets.component";
 import { LogbooksDashboardComponent } from "logbooks/logbooks-dashboard/logbooks-dashboard.component";
-import { DatasetDetailWrapperComponent } from "datasets/dataset-detail/dataset-detail-wrapper.component";
-
 const routes: Routes = [
   {
     path: "",
-    component: DatasetDetailWrapperComponent,
+    component: DatasetDetailComponent,
+    canDeactivate: [LeavingPageGuard],
   },
   {
     path: "jsonScientificMetadata",
@@ -27,7 +28,7 @@ const routes: Routes = [
     component: DatafilesComponent,
   },
   {
-    path: "relatedDatasets",
+    path: "related-datasets",
     component: RelatedDatasetsComponent,
   },
   // For reduce && logbook this is a work around because guard priority somehow doesn't work and this work around make guards excuted sequencial

src/app/app-routing/lazy/instruments-routing/instruments.routing.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { AuthGuard } from "app-routing/auth.guard";
-import { leavingPageGuard } from "app-routing/pending-changes.guard";
+import { LeavingPageGuard } from "app-routing/pending-changes.guard";
 import { InstrumentDetailsComponent } from "instruments/instrument-details/instrument-details.component";
 import { InstrumentsDashboardComponent } from "instruments/instruments-dashboard/instruments-dashboard.component";
 
@@ -15,7 +15,7 @@ const routes: Routes = [
     path: ":id",
     component: InstrumentDetailsComponent,
     canActivate: [AuthGuard],
-    canDeactivate: [leavingPageGuard],
+    canDeactivate: [LeavingPageGuard],
   },
 ];
 @NgModule({

src/app/app-routing/lazy/samples-routing/samples.routing.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { AuthGuard } from "app-routing/auth.guard";
-import { leavingPageGuard } from "app-routing/pending-changes.guard";
+import { LeavingPageGuard } from "app-routing/pending-changes.guard";
 import { SampleDashboardComponent } from "samples/sample-dashboard/sample-dashboard.component";
 import { SampleDetailComponent } from "samples/sample-detail/sample-detail.component";
 
@@ -15,7 +15,7 @@ const routes: Routes = [
     path: ":id",
     component: SampleDetailComponent,
     canActivate: [AuthGuard],
-    canDeactivate: [leavingPageGuard],
+    canDeactivate: [LeavingPageGuard],
   },
 ];
 @NgModule({

src/app/app-routing/pending-changes.guard.ts

@@ -1,36 +1,29 @@
-import { CanDeactivateFn } from "@angular/router";
+import { Injectable } from "@angular/core";
+import { CanDeactivate } from "@angular/router";
 import { Observable } from "rxjs";
 
 export interface EditableComponent {
   hasUnsavedChanges: () => boolean | Observable<boolean>;
+  // openLeavingPageGuardDialog(): () => void;
 }
-
-export const leavingPageGuard: CanDeactivateFn<EditableComponent> = (
-  component,
-) => {
-  const hasUnsavedChanges = component.hasUnsavedChanges();
-
-  if (typeof hasUnsavedChanges === "boolean") {
-    return hasUnsavedChanges
+/**
+ * Ensure that the user knowns about pending changes before leaving the page
+ * @export
+ * @class LeavingPageGuard
+ * @implements {CanDeactivate}
+ */
+@Injectable({
+  providedIn: "root",
+})
+export class LeavingPageGuard implements CanDeactivate<EditableComponent> {
+  /**
+   * Needs to return either a boolean or an observable that maps to a boolean
+   */
+  canDeactivate(component: EditableComponent): Observable<boolean> | boolean {
+    return component.hasUnsavedChanges()
       ? confirm(
-          "You have unsaved changes. Press Cancel to go back and save these changes, or OK to leave without saving.",
+          "You have unsaved changes. Press Cancel to go back and save these changes, or OK to leave without saving",
         )
       : true;
   }
-
-  if (hasUnsavedChanges instanceof Observable) {
-    return new Observable<boolean>((subscriber) => {
-      hasUnsavedChanges.subscribe((unsaved) => {
-        subscriber.next(
-          !unsaved ||
-            confirm(
-              "You have unsaved changes. Press Cancel to go back and save these changes, or OK to leave without saving.",
-            ),
-        );
-        subscriber.complete();
-      });
-    });
-  }
-
-  return true;
-};
+}

src/app/app.module.ts

@@ -121,16 +121,6 @@ const apiConfigurationFn = (
         subscriptSizing: "dynamic",
       },
     },
-    {
-      provide: DATE_PIPE_DEFAULT_OPTIONS,
-      useFactory: (appConfigService: AppConfigService) => {
-        return {
-          dateFormat:
-            appConfigService.getConfig().dateFormat || "yyyy-MM-dd HH:mm",
-        };
-      },
-      deps: [AppConfigService],
-    },
     AuthService,
     AppThemeService,
     Title,

src/app/datasets/batch-view/batch-view.component.html

@@ -116,7 +116,7 @@
           </div>
         </mat-header-cell>
         <mat-cell *matCellDef="let dataset">
-          {{ dataset.creationTime | date }}
+          {{ dataset.creationTime | date: "yyyy-MM-dd HH:mm" }}
         </mat-cell>
       </ng-container>
 

src/app/datasets/dataset-detail/_dataset-detail-theme.scss

@@ -0,0 +1,44 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@mixin color($theme) {
+  $color-config: map.get($theme, "color");
+  $primary: map.get($color-config, "primary");
+  $header-1: map.get($color-config, "header-1");
+  $accent: map.get($color-config, "accent");
+  $header-2: map.get($color-config, "header-2");
+  $header-3: map.get($color-config, "header-3");
+  $header-4: map.get($color-config, "header-4");
+  mat-card {
+    .general-header {
+      background-color: mat.get-color-from-palette($primary, "lighter");
+    }
+
+    .creator-header {
+      background-color: mat.get-color-from-palette($header-1, "lighter");
+    }
+
+    .file-header {
+      background-color: mat.get-color-from-palette($accent, "lighter");
+    }
+
+    .related-header {
+      background-color: mat.get-color-from-palette($header-2, "lighter");
+    }
+
+    .derived-header {
+      background-color: mat.get-color-from-palette($header-3, "lighter");
+    }
+
+    .scientific-header {
+      background-color: mat.get-color-from-palette($header-4, "lighter");
+    }
+  }
+}
+
+@mixin theme($theme) {
+  $color-config: mat.get-color-config($theme);
+  @if $color-config != null {
+    @include color($theme);
+  }
+}