feat!: display dsp release number (DEV-420)

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

@@ -8,6 +8,7 @@ describe('TestService', () => {
     let service: AppInitService;
 
     const config: IConfig = {
+        dspRelease: '2022.01.01',
         apiProtocol: 'http',
         apiHost: '0.0.0.0',
         apiPort: 3333,
@@ -74,6 +75,10 @@ describe('TestService', () => {
     });
 
     it('should process the fully specified config', async () => {
+        expect(service.dspConfig.release).toEqual('2022.01.01');
+        expect(service.dspConfig.environment).toEqual('dev');
+        expect(service.dspConfig.color).toEqual('accent');
+        expect(service.dspConfig.production).toEqual(false);
         expect(service.dspApiConfig.apiProtocol).toEqual('http');
         expect(service.dspApiConfig.apiHost).toEqual('0.0.0.0');
         expect(service.dspApiConfig.apiPort).toEqual(3333);

src/app/app-init.service.ts

@@ -1,16 +1,23 @@
 import { Inject, Injectable } from '@angular/core';
 import { KnoraApiConfig } from '@dasch-swiss/dsp-js';
-import { DspInstrumentationConfig, DspRollbarConfig, DspDataDogConfig } from './main/declarations/dsp-instrumentation-config';
-import { DspIiifConfig } from './main/declarations/dsp-iiif-config';
-import { DspAppConfig } from './main/declarations/dsp-app-config';
 import { IConfig } from './main/declarations/app-config';
 import { APP_CONFIG } from './main/declarations/dsp-api-tokens';
+import { DspAppConfig } from './main/declarations/dsp-app-config';
+import { DspConfig } from './main/declarations/dsp-config';
+import { DspIiifConfig } from './main/declarations/dsp-iiif-config';
+import { DspDataDogConfig, DspInstrumentationConfig, DspRollbarConfig } from './main/declarations/dsp-instrumentation-config';
 
 @Injectable({
     providedIn: 'root'
 })
 export class AppInitService {
 
+    private _dspConfig: DspConfig;
+
+    get dspConfig(): DspConfig {
+        return this._dspConfig;
+    }
+
     private _dspApiConfig: KnoraApiConfig;
 
     get dspApiConfig(): KnoraApiConfig {
@@ -43,6 +50,24 @@ export class AppInitService {
             throw new Error('config misses required members: apiProtocol and/or apiHost');
         }
 
+        const prodMode = (this._config.instrumentation.environment === ('prod' || 'production'));
+
+        let color = 'primary';
+        if (!prodMode) {
+            if (this._config.instrumentation.environment.includes('staging') || this._config.instrumentation.environment.includes('dev')) {
+                color = 'accent';
+            } else if (this._config.instrumentation.environment.includes('test')){
+                color = 'warn';
+            }
+        }
+
+        this._dspConfig = new DspConfig(
+            this._config.dspRelease,
+            this._config.instrumentation.environment,
+            prodMode,
+            color
+        );
+
         // make input type safe
         const apiPort = (typeof this._config.apiPort === 'number' ? this._config.apiPort : null);
         const apiPath = (typeof this._config.apiPath === 'string' ? this._config.apiPath : '');

src/app/main/declarations/app-config.ts

@@ -1,4 +1,5 @@
 export interface IConfig {
+    dspRelease: string;
     apiProtocol: 'http' | 'https';
     apiHost: string;
     apiPort: number;

src/app/main/declarations/dsp-config.ts

@@ -0,0 +1,11 @@
+/**
+ * main DSP (DaSCH Service Platform) config
+ */
+export class DspConfig {
+    constructor(
+        public release: string,
+        public environment: string,
+        public production: boolean,
+        public color: string
+    ){ }
+}

src/app/main/footer/footer.component.html

@@ -19,7 +19,7 @@
             </p>
         </div>
         <div class="box contact">
-            <a mat-button href="https://dasch.swiss" target="_blank">Data and Service Center for the Humanities</a>
+            <a mat-button href="https://dasch.swiss" target="_blank">Swiss National Data and Service Center for the Humanities</a>
             <a mat-button href="https://www.google.com/maps/place/Gewerbestrasse+24,+4123+Allschwil" target="_blank">
                 <mat-icon>location_on</mat-icon> Gewerbestrasse 24, 4123 Allschwil
             </a>

src/app/main/grid/grid.component.scss

@@ -9,7 +9,7 @@
   justify-items: stretch;
   align-items: stretch;
   align-content: space-evenly;
-  margin: 90px -15px 0 0;
+  margin: 48px -15px 0 0;
   padding: 0;
   list-style: none;
 

src/app/main/header/header.component.html

@@ -4,7 +4,18 @@
             <mat-icon matPrefix svgIcon="dasch_icon_black" class="small"></mat-icon>
             <h1 class="mat-headline desktop-only">DaSCH Service Platform</h1>
             <h1 class="mat-headline phone-tablet-only">DSP</h1>
-            <p class="mat-caption right app-version">{{appVersion}}</p>
+            <p class="mat-caption right app-version">
+                <span *ngIf="dsp.production">{{dsp.release}}</span>
+                <span *ngIf="!dsp.production" class="development badge">
+                    <span class="environment">{{dsp.environment}}</span>
+                    <span class="release {{dsp.color}}">{{dsp.release}}</span>
+                </span>
+            </p>
+
+            <!-- environment info-text {{dsp.color}}" [class.strong]="!dsp.production"> -->
+                <!-- <span *ngIf="!dsp.production">{{dsp.environment}}&nbsp;|&nbsp;</span>
+                {{dsp.release}}
+            </p> -->
         </button>
     </span>
 
@@ -43,3 +54,8 @@ <h1 class="mat-headline phone-tablet-only">DSP</h1>
     </span>
 
 </mat-toolbar>
+<mat-progress-bar *ngIf="!dsp.production"
+    [color]="dsp.color"
+    mode="determinate"
+    value="100">
+</mat-progress-bar>

src/app/main/header/header.component.scss

@@ -9,10 +9,11 @@
   .home-button {
     display: inline-block;
     .mat-icon {
-      margin: 6px 6px 6px 0;
+      margin: 0 6px 6px 0;
       min-width: 40px;
       height: auto;
       max-height: 40px;
+      padding-bottom: 6px;
 
       &.small {
         width: 40px;
@@ -40,6 +41,9 @@
   }
 }
 @media (max-width: 1024px) {
+  .development.badge {
+    font-weight: normal;
+  }
   .desktop-only {
     display: none;
   }

src/app/main/header/header.component.spec.ts

@@ -63,6 +63,12 @@ describe('HeaderComponent', () => {
 
     let componentCommsService: ComponentCommunicationEventService;
 
+    const appInitSpy = {
+        dspConfig: {
+            release: '2022.01.01'
+        }
+    };
+
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
@@ -94,6 +100,10 @@ describe('HeaderComponent', () => {
                     provide: DspApiConnectionToken,
                     useValue: new KnoraApiConnection(TestConfig.ApiConfig)
                 },
+                {
+                    provide: AppInitService,
+                    useValue: appInitSpy
+                },
                 ComponentCommunicationEventService
             ]
         }).compileComponents();

src/app/main/header/header.component.ts

@@ -4,13 +4,15 @@ import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NavigationStart, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { AppInitService } from 'src/app/app-init.service';
 import { DialogComponent } from 'src/app/main/dialog/dialog.component';
 import { ComponentCommunicationEventService, Events } from 'src/app/main/services/component-communication-event.service';
 import { SearchParams } from 'src/app/workspace/results/list-view/list-view.component';
+import { DspConfig } from '../declarations/dsp-config';
 import { NotificationService } from '../services/notification.service';
 import { SessionService } from '../services/session.service';
 
-const { version: appVersion } = require('../../../../package.json');
+// const { version: appVersion } = require('../../../../package.json');
 
 @Component({
     selector: 'app-header',
@@ -23,11 +25,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
     show = false;
     searchParams: SearchParams;
 
-    appVersion: string = 'v' + appVersion;
+    dsp: DspConfig;
 
     componentCommsSubscription: Subscription;
 
     constructor(
+        private _appInitService: AppInitService,
         private _componentCommsService: ComponentCommunicationEventService,
         private _dialog: MatDialog,
         private _domSanitizer: DomSanitizer,
@@ -51,6 +54,9 @@ export class HeaderComponent implements OnInit, OnDestroy {
                 });
             }
         });
+
+        this.dsp = this._appInitService.dspConfig;
+
     }
 
     ngOnInit() {

src/app/main/help/help.component.html

@@ -1,27 +1,36 @@
 <div class="help-page">
+    <section *ngIf="!dsp.production" class="info">
+        <div class="content medium middle development hint {{dsp.color}}">
+            <p class="mat-subheading-2 content medium middle">This is a development version of DSP (release <strong>{{dsp.release}}</strong>) running in the environment <strong>{{dsp.environment}}</strong></p>
+        </div>
+    </section>
+
     <section>
         <div class="content large middle">
             <h1 class="mat-display-1">Need help?</h1>
-            <h3 class="mat-subheading-2">Read the user guide: Explore by topic</h3>
+            <h2 class="mat-title">Read the user guide: Explore by topic</h2>
 
             <app-grid id="app-grid-documentation" [list]="docs"></app-grid>
         </div>
     </section>
 
     <section class="darken-bg">
         <div class="content large middle">
-            <h3 class="mat-subheading-2">Explore our software products</h3>
-            <p class="mat-body-1">The web application and the tools for data storage and long-term access are developed
-                by the DaSCH team in Switzerland.</p>
-
+            <h2 class="mat-title">Explore our software products</h2>
+            <p class="mat-subheading-2 content medium middle">The DaSCH Service Platform (DSP) is our main product within release <strong>{{dsp.release}}</strong>
+                &rarr; <a [href]="releaseNotesUrl">here you will get the latest news about this main version <mat-icon class="suffix">launch</mat-icon></a>
+                <br><br>
+                If you are interested in more details about the individual applications of DSP,
+                take a look at the following software products &mdash; all developed by the DaSCH team in Switzerland.
+            </p>
             <app-grid id="app-grid-tools" [list]="tools"></app-grid>
 
         </div>
     </section>
 
     <section>
         <div class="content large middle">
-            <h3 class="mat-subheading-2">Get more support or help to improve</h3>
+            <h3 class="mat-title">Get more support or help to improve</h3>
 
             <app-grid id="app-grid-tools" [list]="support"></app-grid>
         </div>

src/app/main/help/help.component.scss

@@ -8,6 +8,10 @@ section {
   text-align: center;
   padding: 24px 0;
 
+  &.info {
+    min-height: auto;
+  }
+
   .content {
     img.logo {
       max-width: 400px;

src/app/main/help/help.component.spec.ts

@@ -19,6 +19,12 @@ describe('HelpComponent', () => {
     let component: HelpComponent;
     let fixture: ComponentFixture<HelpComponent>;
 
+    const appInitSpy = {
+        dspConfig: {
+            release: '2022.01.01'
+        }
+    };
+
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
@@ -45,6 +51,10 @@ describe('HelpComponent', () => {
                 {
                     provide: DspApiConnectionToken,
                     useValue: new KnoraApiConnection(TestConfig.ApiConfig)
+                },
+                {
+                    provide: AppInitService,
+                    useValue: appInitSpy
                 }
             ]
         })

src/app/main/help/help.component.ts

@@ -1,11 +1,13 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { ApiResponseData, ApiResponseError, HealthResponse, KnoraApiConnection, VersionResponse } from '@dasch-swiss/dsp-js';
+import { AppInitService } from 'src/app/app-init.service';
 import { DspApiConnectionToken } from '../declarations/dsp-api-tokens';
+import { DspConfig } from '../declarations/dsp-config';
 import { ErrorHandlerService } from '../error/error-handler.service';
 import { GridItem } from '../grid/grid.component';
 
 declare let require: any;
-const { version: appVersion, name: appName } = require('../../../../package.json');
+const { version: appVersion } = require('../../../../package.json');
 
 @Component({
     selector: 'app-help',
@@ -16,9 +18,12 @@ export class HelpComponent implements OnInit {
 
     loading = true;
 
+    dsp: DspConfig;
+    releaseNotesUrl: string;
+
     appVersion: string = appVersion;
     apiStatus: HealthResponse;
-    dspVersion: VersionResponse;
+    apiVersion: VersionResponse;
 
     docs: GridItem[] = [
         {
@@ -74,7 +79,7 @@ export class HelpComponent implements OnInit {
         },
         {
             title: 'DaSCH Infrastructure',
-            text: 'Wondering what the Data and Service Center for the Humanities DaSCH exactly is? Get more information on our Website:',
+            text: 'Wondering what the Swiss National Data and Service Center for the Humanities DaSCH exactly is? Get more information on our Website:',
             url: 'https://dasch.swiss',
             urlText: 'dasch.swiss'
         },
@@ -88,26 +93,34 @@ export class HelpComponent implements OnInit {
 
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
+        private _appInitService: AppInitService,
         private _errorHandler: ErrorHandlerService) {
     }
 
     ngOnInit() {
 
+        this.dsp = this._appInitService.dspConfig;
+
+        // quick solution; todo: has to be done in a better way
+        // to go directly to the page e.g. https://dasch.atlassian.net/wiki/spaces/changelog/pages/25067546/Releasenews+2022.01.02
+        // or https://dasch.atlassian.net/wiki/spaces/changelog/pages/21266446/Releasenews+2022.01.01
+        this.releaseNotesUrl = 'https://dasch.atlassian.net/wiki/search?text=' + this.dsp.release;
+
         this._dspApiConnection.system.versionEndpoint.getVersion().subscribe(
             (response: ApiResponseData<VersionResponse>) => {
-                this.dspVersion = response.body;
+                this.apiVersion = response.body;
 
                 // set dsp-app version
                 this.tools[0].title += ' v' + this.appVersion;
                 this.tools[0].url += this.appVersion;
 
                 // set dsp-api version
-                this.tools[1].title += this.dspVersion.webapi;
-                this.tools[1].url += this.dspVersion.webapi;
+                this.tools[1].title += this.apiVersion.webapi;
+                this.tools[1].url += this.apiVersion.webapi;
 
                 // set dsp-sipi version
-                this.tools[2].title += ' v' + this.dspVersion.sipi;
-                this.tools[2].url += this.dspVersion.sipi;
+                this.tools[2].title += ' v' + this.apiVersion.sipi;
+                this.tools[2].url += this.apiVersion.sipi;
             },
             (error: ApiResponseError) => {
                 this._errorHandler.showMessage(error);