feat(release-notification): update-notification-badge (#139)

* enhance: redesign first popup - style notification dialog - add mixin for mat-icon - use mixin in whole project * enhance(welcome-popup): disable hover effect - Hover effect disabled - change border and header color to theme primary - renamed classname in `interactive-attribute-field` * feat(welcome-popup): change styles and positions * remove "Du wirst es nicht bereuen" * feat(release-notification): notification badge * fix: bugfix increment won't noticed / displayReleaseDialog apparently `case VersionIncrement.feature || VersionIncrement.bugfix` does not increment the bugfix number * resolve failed merge * rename and translate Menu Item + set displayReleaseNotification private * add Release Notes to burger menu * remove newUpdate = true on first start * Update Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.html
T-Systems-MMS · Aug 14, 2019 · c05cf8f · c05cf8f
1 parent 684a6ee
commit c05cf8f
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 59 deletions.
diff --git a/.azure/pipelines/Phonebook.preview.yml b/.azure/pipelines/Phonebook.preview.yml
@@ -206,18 +206,16 @@ jobs:
           urlSuffix: 'repos/T-Systems-MMS/phonebook/issues/$(System.PullRequest.PullRequestNumber)/comments'
           waitForCompletion: 'false'
 
-
   - job: delete_preview_delay
     displayName: 'Delay Deletion of Preview Environment'
     pool: server
     dependsOn: deploy_preview
     timeoutInMinutes: 725
     cancelTimeoutInMinutes: 725
-    steps: 
-    - task: Delay@1
-      inputs:
-        delayForMinutes: '720'
-
+    steps:
+      - task: Delay@1
+        inputs:
+          delayForMinutes: '720'
 
   - job: delete_preview
     dependsOn:
@@ -229,26 +227,26 @@ jobs:
     variables:
       namespace: $(image_tag)
     steps:
-    - task: Kubernetes@1
-      displayName: 'Delete Namespace'
-      inputs:
-        kubernetesServiceEndpoint: 'Phonebook Kubernetes Demo Cluster'
-        namespace: 'kube-public'
-        command: delete
-        arguments: 'namespace $(namespace)'
-
-    - task: Kubernetes@1
-      displayName: 'Delete Clusterrole'
-      inputs:
-        kubernetesServiceEndpoint: 'Phonebook Kubernetes Demo Cluster'
-        namespace: 'kube-public'
-        command: delete
-        arguments: 'clusterrole phonebook-$(image_tag)-traefik'
-
-    - task: Kubernetes@1
-      displayName: 'Delete Clusterrolebinding'
-      inputs:
-        kubernetesServiceEndpoint: 'Phonebook Kubernetes Demo Cluster'
-        namespace: 'kube-public'
-        command: delete
-        arguments: 'clusterrolebinding phonebook-$(image_tag)-traefik'
+      - task: Kubernetes@1
+        displayName: 'Delete Namespace'
+        inputs:
+          kubernetesServiceEndpoint: 'Phonebook Kubernetes Demo Cluster'
+          namespace: 'kube-public'
+          command: delete
+          arguments: 'namespace $(namespace)'
+
+      - task: Kubernetes@1
+        displayName: 'Delete Clusterrole'
+        inputs:
+          kubernetesServiceEndpoint: 'Phonebook Kubernetes Demo Cluster'
+          namespace: 'kube-public'
+          command: delete
+          arguments: 'clusterrole phonebook-$(image_tag)-traefik'
+
+      - task: Kubernetes@1
+        displayName: 'Delete Clusterrolebinding'
+        inputs:
+          kubernetesServiceEndpoint: 'Phonebook Kubernetes Demo Cluster'
+          namespace: 'kube-public'
+          command: delete
+          arguments: 'clusterrolebinding phonebook-$(image_tag)-traefik'
diff --git a/Phonebook.Frontend/src/app/app.module.ts b/Phonebook.Frontend/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
 import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
 import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
+import { MatBadgeModule } from '@angular/material';
 // NGXS States
 import { NgxsModule } from '@ngxs/store';
 //Custom Imports
@@ -40,7 +41,14 @@ import { ErrorHandlerModule } from 'src/app/shared/error/error.module';
 // Modules
 import { MaterialModule } from 'src/app/shared/material.module';
 import { WINDOW_PROVIDER } from 'src/app/shared/providers/window.provider';
-import { AppState, BookmarksState, CommonPersonsState, LastPersonsState, SearchState, TableState } from 'src/app/shared/states';
+import {
+  AppState,
+  BookmarksState,
+  CommonPersonsState,
+  LastPersonsState,
+  SearchState,
+  TableState
+} from 'src/app/shared/states';
 import { environment } from 'src/environments/environment';
 // Services
 import { FloorplanService } from './services/floorplan.service';
@@ -64,6 +72,7 @@ declare const require;
     FeatureFlagModule.forRoot(),
     NotImplementedModule,
     FeedbackDrawerModule,
+    MatBadgeModule,
     NgxsModule.forRoot([AppState, BookmarksState, LastPersonsState, CommonPersonsState, SearchState, TableState], {
       // TODO: Fix https://github.com/T-Systems-MMS/phonebook/issues/95 first.
       // developmentMode: !environment.production

diff --git a/Phonebook.Frontend/src/app/services/release-info.service.ts b/Phonebook.Frontend/src/app/services/release-info.service.ts
@@ -12,6 +12,7 @@ import { VERSION } from 'src/environments/version';
   providedIn: 'root'
 })
 export class ReleaseInfoService {
+  public newUpdate: boolean = false; //shows that the application was updated
   constructor(
     private dialog: MatDialog,
     private snackBar: MatSnackBar,
@@ -28,22 +29,25 @@ export class ReleaseInfoService {
     switch (versionIncrement) {
       case VersionIncrement.breaking:
         this.displayReleaseDialog();
+        this.newUpdate = true;
         this.store.dispatch(new SetVersion(VERSION));
         break;
       case VersionIncrement.feature:
-        this.displayReleaseDialog();
+        this.displayReleaseNotification();
+        this.newUpdate = true;
         this.store.dispatch(new SetVersion(VERSION));
         break;
       case VersionIncrement.bugfix:
         this.displayReleaseNotification();
+        this.newUpdate = true;
         this.store.dispatch(new SetVersion(VERSION));
         break;
       default:
         break;
     }
   }
 
-  private displayReleaseDialog() {
+  public displayReleaseDialog() {
     let text = 'Changelog could not be loaded.';
     this.httpClient
       .get('changelog.md', {
@@ -82,7 +86,7 @@ export class ReleaseInfoService {
       )
       .onAction()
       .subscribe(clicked => {
-        window.open('changelog.md', '_blank');
+        this.displayReleaseDialog();
       });
   }
 

diff --git a/Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.html b/Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.html
@@ -33,6 +33,7 @@
             <span i18n="NavigationComponent|Link to the users profile@@NavigationComponentMyProfile">My profile</span>
           </button>
         </mat-list-item>
+        <mat-divider></mat-divider>
         <mat-list-item>
           <button mat-menu-item focus [routerLink]="['/settings']" (click)="sidenav.close()">
             <mat-icon>settings</mat-icon>
@@ -51,6 +52,20 @@
             <span i18n="NavigationComponent|Link to Information page@@NavigationComponentInformation">Information</span>
           </button>
         </mat-list-item>
+        <mat-list-item>
+          <button mat-menu-item>
+            <mat-icon>new_releases</mat-icon>
+            <span
+              matBadge="!"
+              matBadgeColor="accent"
+              matBadgeSize="small"
+              [matBadgeHidden]="!releaseInfoService.newUpdate"
+              (click)="sidenav.close(); releaseInfoService.displayReleaseDialog()"
+              i18n="NavigationComponent|Release Notes Menu Item@@NavigationComponentReleaseNotes"
+              >Release Notes</span
+            >
+          </button>
+        </mat-list-item>
         <mat-list-item>
           <button
             mat-menu-item
@@ -105,7 +120,13 @@
                 Rooms
               </button>
               <button mat-icon-button [matMenuTriggerFor]="personalmenu">
-                <mat-icon>person</mat-icon>
+                <mat-icon
+                  matBadge="!"
+                  matBadgeColor="accent"
+                  matBadgeSize="small"
+                  [matBadgeHidden]="!releaseInfoService.newUpdate"
+                  >person</mat-icon
+                >
               </button>
               <mat-menu #personalmenu>
                 <button mat-menu-item (click)="navigateToOwnProfile()" *ngIf="currentUser != null">
@@ -125,15 +146,33 @@
                   <mat-icon>info_outline</mat-icon>
                   <span i18n="@@NavigationComponentInformation">Information</span>
                 </button>
+                <button mat-menu-item>
+                  <mat-icon>new_releases</mat-icon>
+                  <span
+                    matBadge="!"
+                    matBadgeColor="accent"
+                    matBadgeSize="small"
+                    [matBadgeHidden]="!releaseInfoService.newUpdate"
+                    (click)="releaseInfoService.displayReleaseDialog()"
+                    i18n="@@NavigationComponentReleaseNotes"
+                    >Release Notes</span
+                  >
+                </button>
                 <button mat-menu-item feedbackDrawer>
                   <mat-icon>bug_report</mat-icon>
                   <span i18n="@@NavigationComponentBug">Report a Bug</span>
                 </button>
               </mat-menu>
             </div>
             <div class="pb-hide-on-med-and-up">
-              <button mat-button (click)="sidenav.toggle()">
-                <mat-icon>menu</mat-icon>
+              <button mat-icon-button (click)="sidenav.toggle()">
+                <mat-icon
+                  matBadge="!"
+                  matBadgeColor="accent"
+                  matBadgeSize="small"
+                  [matBadgeHidden]="!releaseInfoService.newUpdate"
+                  >menu</mat-icon
+                >
               </button>
             </div>
           </mat-toolbar-row>

diff --git a/Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.ts b/Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.ts
@@ -7,6 +7,8 @@ import { untilComponentDestroyed } from 'ng2-rx-componentdestroyed';
 import { Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { FeatureFlagService } from 'src/app/modules/feature-flag/feature-flag.service';
+import { MatBadgeModule } from '@angular/material/badge';
+import { ReleaseInfoService } from 'src/app/services/release-info.service';
 import { TableSettingsDialog } from 'src/app/modules/table/dialogs/table-settings-dialog/table-settings.dialog';
 import { CurrentUserService } from 'src/app/services/api/current-user.service';
 import { Person } from 'src/app/shared/models';
@@ -40,7 +42,9 @@ export class NavigationComponent implements OnInit, OnDestroy {
     private router: Router,
     public dialog: MatDialog,
     public i18n: I18n,
-    public featureFlagService: FeatureFlagService
+    public featureFlagService: FeatureFlagService,
+    public badge: MatBadgeModule,
+    public releaseInfoService: ReleaseInfoService
   ) {}
 
   public ngOnInit() {

diff --git a/Phonebook.Frontend/src/i18n/messages.de.xlf b/Phonebook.Frontend/src/i18n/messages.de.xlf
@@ -258,13 +258,12 @@
         <target state="translated">Phonebook</target>
         <note priority="1" from="description">Application Name</note>
         <note priority="1" from="meaning">NavigationBar</note>
+      </trans-unit><trans-unit id="NavigationComponentReleaseNotes" datatype="html">
+        <source>Release Notes</source><target state="translated">Release Notes</target>
+        <note priority="1" from="description">Release Notes Menu Item</note>
+        <note priority="1" from="meaning">NavigationComponent</note>
       </trans-unit>
-      <trans-unit id="navigationBarApplicationNameTag" datatype="html">
-        <source>Preview</source>
-        <target state="translated">Vorschau</target>
-        <note priority="1" from="description">Tag on Application Name</note>
-        <note priority="1" from="meaning">NavigationBar</note>
-      </trans-unit>
+
       <trans-unit id="navigationBarGreetingsMessage" datatype="html">
         <source>Have a nice day</source>
         <target state="translated">Hab einen schönen Tag</target>

diff --git a/Phonebook.Frontend/src/i18n/messages.en.xlf b/Phonebook.Frontend/src/i18n/messages.en.xlf
@@ -279,13 +279,12 @@
         <target state="final">Phonebook</target>
         <note priority="1" from="description">Application Name</note>
         <note priority="1" from="meaning">NavigationBar</note>
+      </trans-unit><trans-unit id="NavigationComponentReleaseNotes" datatype="html">
+        <source>Release Notes</source><target state="final">Release Notes</target>
+        <note priority="1" from="description">Release Notes Menu Item</note>
+        <note priority="1" from="meaning">NavigationComponent</note>
       </trans-unit>
-      <trans-unit id="navigationBarApplicationNameTag" datatype="html">
-        <source>Preview</source>
-        <target state="final">Preview</target>
-        <note priority="1" from="description">Tag on Application Name</note>
-        <note priority="1" from="meaning">NavigationBar</note>
-      </trans-unit>
+
       <trans-unit id="navigationBarGreetingsMessage" datatype="html">
         <source>Have a nice day</source>
         <target state="final">Have a nice day</target>

diff --git a/Phonebook.Frontend/src/i18n/messages.test.xlf b/Phonebook.Frontend/src/i18n/messages.test.xlf
@@ -39,13 +39,12 @@
         <target state="final">TEST</target>
         <note priority="1" from="description">Application Name</note>
         <note priority="1" from="meaning">NavigationBar</note>
+      </trans-unit><trans-unit id="NavigationComponentReleaseNotes" datatype="html">
+        <source>Release Notes</source><target state="final">TEST</target>
+        <note priority="1" from="description">Release Notes Menu Item</note>
+        <note priority="1" from="meaning">NavigationComponent</note>
       </trans-unit>
-      <trans-unit id="navigationBarApplicationNameTag" datatype="html">
-        <source>Preview</source>
-        <target state="final">TEST</target>
-        <note priority="1" from="description">Tag on Application Name</note>
-        <note priority="1" from="meaning">NavigationBar</note>
-      </trans-unit>
+
       <trans-unit id="navigationBarGreetingsMessage" datatype="html">
         <source>Have a nice day</source>
         <target state="translated">TEST</target>

diff --git a/Phonebook.Frontend/src/i18n/messages.xlf b/Phonebook.Frontend/src/i18n/messages.xlf
@@ -434,10 +434,10 @@
         <source>Phonebook</source>
         <note priority="1" from="description">Application Name</note>
         <note priority="1" from="meaning">NavigationBar</note>
-      </trans-unit><trans-unit id="navigationBarApplicationNameTag" datatype="html">
-        <source>Preview</source>
-        <note priority="1" from="description">Tag on Application Name</note>
-        <note priority="1" from="meaning">NavigationBar</note>
+      </trans-unit><trans-unit id="NavigationComponentReleaseNotes" datatype="html">
+        <source>Release Notes</source>
+        <note priority="1" from="description">Release Notes Menu Item</note>
+        <note priority="1" from="meaning">NavigationComponent</note>
       </trans-unit><trans-unit id="TableComponentResultCount" datatype="html">
         <source>
                   <x id="INTERPOLATION" equiv-text="{{ tableResultCount$ | async }}"/> Results