refactor(help): update support links (DEV-779) (#700)

* chore(help): update support links (DEV-658)

* test(help): unit test to check mailto href

* refactor: correct command to build in prod

* test(help): update e2e tests

e2e/src/help.e2e-spec.ts

@@ -1,5 +1,5 @@
-import { HelpPage } from './page-objects/help.po';
 import { browser } from 'protractor';
+import { HelpPage } from './page-objects/help.po';
 
 const { version: appVersion, name: appName } = require('../../package.json');
 
@@ -120,14 +120,14 @@ describe('help page', () => {
         });
     });
 
-    it('should route to the dasch forum', async () => {
+    it('should have a mailto link to support@dasch.swiss', async () => {
         await browser.waitForAngularEnabled(false);
         page.navigateTo();
         await browser.waitForAngularEnabled(true);
 
         browser.getWindowHandle().then(function (parentGUID) {
             // click the link that opens in a new window
-            page.getDaschForumButton().click();
+            page.getDaschContactButton().click();
             browser.sleep(5000);
             // get the all the session ids of the opened tabs
             browser.getAllWindowHandles().then(function (allGUID) {
@@ -143,6 +143,7 @@ describe('help page', () => {
                     }
                 }
                 // perform here any actions needed on the new tab
+                // --> TODO: why is still working? The address doesn't exist anymore. It was replaced by "mailto:support@dasch.swiss?subject=...."
                 expect(browser.driver.getCurrentUrl()).toMatch('https://discuss.dasch.swiss/');
                 // todo: check if link is still alive or broken
 
@@ -178,7 +179,7 @@ describe('help page', () => {
                     }
                 }
                 // perform here any actions needed on the new tab
-                expect(browser.driver.getCurrentUrl()).toMatch('https://dasch.swiss/');
+                expect(browser.driver.getCurrentUrl()).toMatch('https://dasch.ch/');
 
                 // close the new tab
                 browser.close();

e2e/src/page-objects/help.po.ts

@@ -31,11 +31,11 @@ export class HelpPage {
         return sipiEl.element(by.css('.action .mat-button'));
     }
 
-    getDaschForumButton() {
+    getDaschContactButton() {
         const appGridEl = element.all(by.css('#app-grid-tools .app-grid-item'));
-        const daschForumEl = appGridEl.get(3);
+        const daschContactEl = appGridEl.get(3);
 
-        return daschForumEl.element(by.css('.action .mat-button'));
+        return daschContactEl.element(by.css('.action .mat-button'));
     }
 
     getDaschSwissButton() {

package.json

@@ -14,7 +14,7 @@
     "lint-local": "eslint --color --fix -c .eslintrc.js --ext .ts ./src/app",
     "e2e": "ng e2e",
     "build": "ng build",
-    "build-prod": "ng build --configuration production",
+    "build-prod": "ng build --configuration=production",
     "test-ci": "ng test --watch=false --browsers=ChromeHeadless",
     "test-local": "ng test",
     "test-e2e-protractor": "ng e2e --configuration production --protractor-config=./e2e/protractor-ci.conf.js --webdriver-update=false",

src/app/main/grid/grid.component.html

@@ -7,14 +7,24 @@ <h3>{{item.title}}</h3>
         <br><br>
         <p class="action center" *ngIf="item.url">
 
-            <button mat-button *ngIf="item.url.substr(0,4) !== 'http'" [routerLink]="[item.url]"
-                routerLinkActive="router-link-active" color="primary">
+            <span [ngSwitch]="item.url.substr(0,4)">
+
+                <!-- in case of http (external address) -->
+                <a mat-button *ngSwitchCase="'http'" [href]="item.url" target="_blank" color="primary" class="external-url">
+                    {{item.urlText ? item.urlText : 'Read more'}}<mat-icon class="suffix">launch</mat-icon>
+                </a>
+
+                <!-- in case of mailto -->
+                <a mat-button *ngSwitchCase="'mail'" [href]="item.url" color="primary" class="mailto">
+                    {{item.urlText ? item.urlText : 'Read more'}}<mat-icon class="suffix">mail</mat-icon>
+                </a>
+
+                <!-- in case of internal address -->
+                <button mat-button  *ngSwitchDefault [routerLink]="[item.url]"
+                routerLinkActive="router-link-active" color="primary" class="internal-url">
                 {{item.urlText ? item.urlText : 'Read more'}}
             </button>
-
-            <a mat-button *ngIf="item.url.substr(0,4) === 'http'" [href]="item.url" target="_blank" color="primary">
-                {{item.urlText ? item.urlText : 'Read more'}} <mat-icon class="suffix">launch</mat-icon>
-            </a>
+            </span>
         </p>
     </div>
 </div>

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

@@ -5,7 +5,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="documentation">
         <div class="content large middle">
             <h1 class="mat-display-1">Need help?</h1>
             <h2 class="mat-title">Read the user guide: Explore by topic</h2>
@@ -14,7 +14,7 @@ <h2 class="mat-title">Read the user guide: Explore by topic</h2>
         </div>
     </section>
 
-    <section class="darken-bg">
+    <section class="darken-bg software">
         <div class="content large middle">
             <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>
@@ -28,7 +28,7 @@ <h2 class="mat-title">Explore our software products</h2>
         </div>
     </section>
 
-    <section>
+    <section class="support">
         <div class="content large middle">
             <h3 class="mat-title">Get more support or help to improve</h3>
 

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

@@ -1,8 +1,9 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
@@ -21,7 +22,8 @@ describe('HelpComponent', () => {
 
     const appInitSpy = {
         dspConfig: {
-            release: '2022.01.01'
+            environment: 'unit test server',
+            release: '2022.02.02'
         }
     };
 
@@ -71,5 +73,19 @@ describe('HelpComponent', () => {
         expect(component).toBeTruthy();
     });
 
-    // all the buttons have been tested in e2e tests => see e2e/src/help.e2e-spec.ts
+    it('should have a mailto href incl. subject', () => {
+        // get the support section and find the contact-us button
+        const hostCompDe = fixture.debugElement;
+        const section = hostCompDe.query(By.css('.support'));
+
+        const grid = section.query(By.directive(GridComponent));
+        const button = grid.query(By.css('.mailto'));
+        const href = button.nativeElement.href;
+
+        expect(href).toEqual('mailto:support@dasch.swiss?subject=DSP-APP%20request%20|%20unit%20test%20server:%202022.02.02');
+
+    });
+
+    // all other buttons have been tested in e2e tests => see e2e/src/help.e2e-spec.ts
+
 });

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

@@ -73,9 +73,9 @@ export class HelpComponent implements OnInit {
     support: GridItem[] = [
         {
             title: 'Need more help?',
-            text: 'Have you had some issues by using our software? Let us know and get in contact with developers and users:',
-            url: 'https://discuss.dasch.swiss',
-            urlText: 'DaSCH Forum'
+            text: 'Have you had some issues by using our software? Let us know and get in contact with the developers:',
+            url: 'mailto:support@dasch.swiss?subject=DSP-APP request | ',
+            urlText: 'Contact us'
         },
         {
             title: 'DaSCH Infrastructure',
@@ -101,6 +101,8 @@ export class HelpComponent implements OnInit {
 
         this.dsp = this._appInitService.dspConfig;
 
+        this.support[0].url += this.dsp.environment + ': ' + this.dsp.release;
+
         // 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