History: Possibility to send new history pages to an URL (#2244)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clr-addons",
-  "version": "15.12.2",
+  "version": "15.13.0",
   "private": true,
   "scripts": {
     "build:ui:css": "sass --source-map --precision=8 ./src/clr-addons/themes/phs/phs-theme.scss ./dist/clr-addons/styles/clr-addons-phs.css",

src/clr-addons/history/history-model.interface.ts

@@ -1,9 +1,13 @@
 /*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
+import { InjectionToken } from '@angular/core';
+
+export const HISTORY_NOTIFICATION_URL_PROVIDER = new InjectionToken<string>('HISTORY_NOTIFICATION_URL_PROVIDER');
+
 export interface ClrHistoryModel {
   /**
    * The username
@@ -18,7 +22,12 @@ export interface ClrHistoryModel {
   /**
    * The context of the page
    */
-  context: { [key: string]: string };
+  context: {
+    applicationName?: string;
+    tenantid: string;
+    context?: string;
+    [key: string]: string;
+  };
 
   /**
    * The title to be displayed.
@@ -42,3 +51,13 @@ export interface ClrHistorySettingsModel {
    */
   username: string;
 }
+
+export interface ClrHistoryNotificationModel {
+  username: string;
+  pageName: string;
+  applicationName?: string;
+  tenantId: string;
+  title: string;
+  url: string;
+  context?: string;
+}

src/clr-addons/history/history.service.ts

@@ -4,9 +4,15 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Injectable } from '@angular/core';
-import { ClrHistoryModel, ClrHistorySettingsModel } from './history-model.interface';
+import { Inject, Injectable, Optional } from '@angular/core';
+import {
+  ClrHistoryModel,
+  ClrHistoryNotificationModel,
+  ClrHistorySettingsModel,
+  HISTORY_NOTIFICATION_URL_PROVIDER,
+} from './history-model.interface';
 import { BehaviorSubject } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class ClrHistoryService {
@@ -20,7 +26,10 @@ export class ClrHistoryService {
   // maximum url length for usage in history
   private maxUrlSize = 256;
 
-  constructor() {
+  constructor(
+    @Inject(HISTORY_NOTIFICATION_URL_PROVIDER) @Optional() private historyNotificationUrl: string,
+    @Optional() private httpClient: HttpClient
+  ) {
     this.expiryDate = new Date();
     this.expiryDate.setTime(this.expiryDate.getTime() + 365 * 24 * 60 * 60 * 1000);
   }
@@ -32,6 +41,7 @@ export class ClrHistoryService {
    * @returns true when entry added, otherwise false is returned
    */
   addHistoryEntry(historyEntry: ClrHistoryModel, domain?: string): boolean {
+    this.notifyExternalUrl(historyEntry);
     this.removeFromHistory(historyEntry);
     let history = this.getHistory(historyEntry.username, historyEntry.context);
 
@@ -224,4 +234,22 @@ export class ClrHistoryService {
     domain.shift();
     return domain.join('.');
   }
+
+  private notifyExternalUrl(historyEntry: ClrHistoryModel) {
+    if (!this.historyNotificationUrl || !this.httpClient) {
+      return;
+    }
+
+    const body: ClrHistoryNotificationModel = {
+      username: historyEntry.username,
+      pageName: historyEntry.pageName,
+      applicationName: historyEntry.context.applicationName,
+      tenantId: historyEntry.context.tenantid,
+      title: historyEntry.title,
+      url: historyEntry.url,
+      context: historyEntry.context.context,
+    };
+
+    this.httpClient.post(this.historyNotificationUrl, body).subscribe();
+  }
 }

src/clr-addons/history/history.spec.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -43,43 +43,43 @@ describe('ClrHistory', () => {
   it('should add', () => {
     const historyEntry: ClrHistoryModel = {
       username: 'admin',
-      context: { ['applicationName']: 'TEST' },
+      context: { applicationName: 'TEST', tenantid: '1' },
       pageName: 'test1',
       title: 'test1',
       url: 'url1',
     };
     historyService.addHistoryEntry(historyEntry);
-    expect(historyService.getHistory('admin', { ['applicationName']: 'TEST' }).length).toEqual(1);
+    expect(historyService.getHistory('admin', { applicationName: 'TEST' }).length).toEqual(1);
   });
 
   it('reset', () => {
     const historyEntry: ClrHistoryModel = {
       username: 'admin',
-      context: { ['applicationName']: 'TEST' },
+      context: { applicationName: 'TEST', tenantid: '1' },
       pageName: 'test2',
       title: 'test1',
       url: 'url1',
     };
     historyService.addHistoryEntry(historyEntry);
     historyService.resetHistory();
-    expect(historyService.getHistory('admin', { ['applicationName']: 'TEST' }).length).toEqual(0);
+    expect(historyService.getHistory('admin', { applicationName: 'TEST' }).length).toEqual(0);
   });
 
   it('encodeUTF8', () => {
     const czech = 'Škoda v čínštině';
     const chinese = '斯柯达👾';
     const historyEntry: ClrHistoryModel = {
       username: 'utf8',
-      context: { ['applicationName']: 'TEST' },
+      context: { applicationName: 'TEST', tenantid: '1' },
       pageName: czech,
       title: chinese,
       url: 'url1',
     };
     historyService.resetHistory();
-    expect(historyService.getHistory('utf8', { ['applicationName']: 'TEST' }).length).toEqual(0);
+    expect(historyService.getHistory('utf8', { applicationName: 'TEST' }).length).toEqual(0);
     historyService.addHistoryEntry(historyEntry);
-    expect(historyService.getHistory('utf8', { ['applicationName']: 'TEST' }).length).toEqual(1);
-    const lastHistoryEntry = historyService.getHistory('utf8', { ['applicationName']: 'TEST' }).pop();
+    expect(historyService.getHistory('utf8', { applicationName: 'TEST' }).length).toEqual(1);
+    const lastHistoryEntry = historyService.getHistory('utf8', { applicationName: 'TEST' }).pop();
     expect(lastHistoryEntry.pageName).toEqual(czech);
     expect(lastHistoryEntry.title).toEqual(chinese);
   });

src/clr-addons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porscheinformatik/clr-addons",
-  "version": "15.12.2",
+  "version": "15.13.0",
   "description": "Addon components for Clarity Angular",
   "es2015": "esm2015/clr-addons.js",
   "homepage": "https://porscheinformatik.github.io/clarity-addons/",

website/src/app/documentation/demos/full-page-layouts/basepage-layout/basepage-layout.ts

@@ -5,7 +5,7 @@
  */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
-import { ClrContentPanel, ClrHistoryService, ClrHistoryModel } from '@porscheinformatik/clr-addons';
+import { ClrContentPanel, ClrHistoryModel, ClrHistoryService } from '@porscheinformatik/clr-addons';
 
 @Component({
   selector: 'clr-basepage-layout-demo',
@@ -37,6 +37,7 @@ export class BasepageLayoutDemo implements OnInit {
         title: 'DocPage',
         context: {
           applicationName: 'ADDONS',
+          tenantid: '1',
         },
       };
       this.historyService.addHistoryEntry(historyEntry1, 'porscheinformatik.github.io');
@@ -47,6 +48,7 @@ export class BasepageLayoutDemo implements OnInit {
         title: 'SourcePage',
         context: {
           applicationName: 'ADDONS',
+          tenantid: '1',
         },
       };
       this.historyService.addHistoryEntry(historyEntry2, 'porscheinformatik.github.io');
@@ -57,6 +59,7 @@ export class BasepageLayoutDemo implements OnInit {
         title: 'GitHub',
         context: {
           applicationName: 'ADDONS',
+          tenantid: '1',
         },
       };
       this.historyService.addHistoryEntry(historyEntry3, 'porscheinformatik.github.io');
@@ -70,7 +73,7 @@ export class BasepageLayoutDemo implements OnInit {
 
   private collectRouteData(key: string) {
     let route = this.router.routerState.snapshot.root;
-    let returnArray = [];
+    const returnArray = [];
 
     while (route) {
       if (route.data && route.data[key]) {

website/src/app/documentation/demos/history/history.demo.html

@@ -108,7 +108,7 @@ <h3>Summary of Options</h3>
             </td>
             <td class="left clr-hidden-xs-down">string</td>
             <td class="clr-hidden-xs-down">Pin History</td>
-            <td class="left">The pin histoy text in the dropdonw. You can provide your own translated text.</td>
+            <td class="left">The pin history text in the dropdown. You can provide your own translated text.</td>
           </tr>
           <tr>
             <td class="left">
@@ -118,7 +118,7 @@ <h3>Summary of Options</h3>
             </td>
             <td class="left clr-hidden-xs-down">string</td>
             <td class="clr-hidden-xs-down">History</td>
-            <td class="left">The unpin histoy text in the dropdonw. You can provide your own translated text.</td>
+            <td class="left">The unpin history text in the dropdown. You can provide your own translated text.</td>
           </tr>
           <tr>
             <td class="left">
@@ -140,6 +140,19 @@ <h3>Summary of Options</h3>
             <td class="clr-hidden-xs-down">bottom-right</td>
             <td class="left">The style for determining the position of the history component.</td>
           </tr>
+          <tr>
+            <td class="left">
+              <b>HISTORY_NOTIFICATION_URL_PROVIDER</b>
+              <div class="clr-hidden-sm-up">string</div>
+              <div class="clr-hidden-sm-up"></div>
+            </td>
+            <td class="left clr-hidden-xs-down">string</td>
+            <td class="clr-hidden-xs-down"></td>
+            <td class="left">
+              Injection token which provides a URL to send added pages to. e.g.: 'api/frontend/lrupages'. The sent model
+              is ClrHistoryNotificationModel
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>

website/src/app/documentation/demos/history/history.demo.ts

@@ -3,9 +3,9 @@
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ClarityDocComponent } from '../clarity-doc';
-import { ClrHistoryService, ClrHistoryModel } from '@porscheinformatik/clr-addons';
+import { ClrHistoryModel, ClrHistoryService } from '@porscheinformatik/clr-addons';
 
 const HTML_EXAMPLE = `
 <clr-history [clrUsername]=""admin"" [clrContext]="context"></clr-history>
@@ -19,18 +19,20 @@ const ANGULAR_EXAMPLE = `
 const historyEntry1: ClrHistoryModel = {username: "admin", pageName: "DocPage",
 url: "https://porscheinformatik.github.io/clarity-addons/documentation/latest/get-started", title: "DocPage",
 context: {
-    applicationName: "ADDONS"
+    applicationName: "ADDONS",
+    tenantid: '1'
 }};
 this.historyService.addHistoryEntry(historyEntry1);
 const historyEntry2: ClrHistoryModel = {username: "admin", pageName: "SourcePage",
 url: "https://porscheinformatik.github.io/clarity-addons/documentation/latest/get-started", title: "SourcePage",
 context: {
-    applicationName: "ADDONS"
+    applicationName: "ADDONS",
+    tenantid: '1'
 }};
 this.historyService.addHistoryEntry(historyEntry2);`;
 
 const ANGULAR_EXAMPLE_CONTEXT = `
-context = {["applicationName"] : "ADDONS"};
+context = {applicationName : "ADDONS", tenantid: '1'};
 `;
 
 @Component({
@@ -48,7 +50,7 @@ export class HistoryDemo extends ClarityDocComponent implements OnInit {
   htmlExamplePinned = HTML_EXAMPLE_PINNED;
   angularExample = ANGULAR_EXAMPLE;
   angularExampleContext = ANGULAR_EXAMPLE_CONTEXT;
-  context = { ['applicationName']: 'ADDONS' };
+  context = { applicationName: 'ADDONS', tenantid: '1' };
   domain = 'porscheinformatik.github.io';
 
   constructor(private historyService: ClrHistoryService) {
@@ -64,6 +66,7 @@ export class HistoryDemo extends ClarityDocComponent implements OnInit {
       title: 'DocPage',
       context: {
         applicationName: 'ADDONS',
+        tenantid: '1',
       },
     };
     this.historyService.addHistoryEntry(historyEntry1, this.domain);
@@ -74,6 +77,7 @@ export class HistoryDemo extends ClarityDocComponent implements OnInit {
       title: 'SourcePage',
       context: {
         applicationName: 'ADDONS',
+        tenantid: '1',
       },
     };
     this.historyService.addHistoryEntry(historyEntry2, this.domain);
@@ -84,6 +88,7 @@ export class HistoryDemo extends ClarityDocComponent implements OnInit {
       title: 'GitHub',
       context: {
         applicationName: 'ADDONS',
+        tenantid: '1',
       },
     };
     this.historyService.addHistoryEntry(historyEntry3, this.domain);