feat(header): integrate version info display and update logic

Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>

Author: mjabascal10

frontend/src/app/shared/components/layout/header/header.component.html

@@ -7,7 +7,8 @@
       <div class="navbar-img mr-3 d-flex justify-content-start align-items-center">
         <img *ngIf="logoImage" [alt]="altImage" [src]="sanitizer.bypassSecurityTrustUrl(logoImage)"
              class="cursor-pointer" routerLink="/dashboard/overview">
-        <app-utm-version-info></app-utm-version-info>
+        <app-utm-version-info [version]="versionInfo"
+        ></app-utm-version-info>
 
         <!--<app-utm-license-info class="ml-4"></app-utm-license-info>-->
         <app-utm-vault-status class="ml-4"></app-utm-vault-status>

frontend/src/app/shared/components/layout/header/header.component.ts

@@ -1,12 +1,15 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
-import {Subject} from 'rxjs';
-import {filter, takeUntil} from 'rxjs/operators';
+import {EMPTY, Subject} from 'rxjs';
+import {catchError, filter, map, takeUntil, tap} from 'rxjs/operators';
 import {AccountService} from '../../../../core/auth/account.service';
 import {User} from '../../../../core/user/user.model';
 import {ThemeChangeBehavior} from '../../../behaviors/theme-change.behavior';
 import {ADMIN_ROLE} from '../../../constants/global.constant';
 import {AppThemeLocationEnum} from '../../../enums/app-theme-location.enum';
+import {VersionType, VersionTypeService} from "../../../services/util/version-type.service";
+import {AppVersionInfo} from "../../../types/updates/updates.type";
+import {CheckForUpdatesService} from "../../../services/updates/check-for-updates.service";
 
 @Component({
   selector: 'app-header',
@@ -20,11 +23,14 @@ export class HeaderComponent implements OnInit, OnDestroy {
   place = AppThemeLocationEnum;
   logoImage: string;
   altImage: string;
+  versionInfo: AppVersionInfo;
   destroy$: Subject<void> = new Subject();
 
   constructor(private accountService: AccountService,
               public sanitizer: DomSanitizer,
-              private themeChangeBehavior: ThemeChangeBehavior) {
+              private themeChangeBehavior: ThemeChangeBehavior,
+              private versionTypeService: VersionTypeService,
+              private checkForUpdatesService: CheckForUpdatesService) {
   }
 
   ngOnInit() {
@@ -37,6 +43,27 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.accountService.identity().then(account => {
       this.user = account;
     });
+
+    this.checkForUpdatesService.getVersion()
+      .pipe(
+        map(response => response.body || null),
+        tap((versionInfo: AppVersionInfo) => {
+          const version = versionInfo && versionInfo.version || '';
+          const versionType = versionInfo.edition.includes('community') || version === ''
+            ? VersionType.COMMUNITY
+            : VersionType.ENTERPRISE;
+
+          if (versionType !== this.versionTypeService.versionType()) {
+            this.versionTypeService.changeVersionType(versionType);
+          }
+        }),
+        catchError(() => {
+          return EMPTY;
+        })
+      )
+      .subscribe(versionInfo => {
+        this.versionInfo = versionInfo;
+      });
   }
 
   ngOnDestroy() {

frontend/src/app/shared/components/layout/header/shared/components/utm-version-info/utm-version-info.component.ts

@@ -1,49 +1,15 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {EMPTY, Observable, Subject} from 'rxjs';
-import {catchError, map, tap} from 'rxjs/operators';
+import {Component, Input, OnInit} from '@angular/core';
 import {UtmToastService} from '../../../../../../alert/utm-toast.service';
 import {CheckForUpdatesService} from '../../../../../../services/updates/check-for-updates.service';
-import {VersionType, VersionTypeService} from '../../../../../../services/util/version-type.service';
-import {AppVersionInfo, VersionInfo} from '../../../../../../types/updates/updates.type';
+import {AppVersionInfo} from '../../../../../../types/updates/updates.type';
 
 @Component({
   selector: 'app-utm-version-info',
   templateUrl: './utm-version-info.component.html',
   styleUrls: ['./utm-version-info.component.css']
 })
-export class UtmVersionInfoComponent implements OnInit {
-  versionInfo: AppVersionInfo;
-
-  constructor(private checkForUpdatesService: CheckForUpdatesService,
-              private utmToastService: UtmToastService,
-              private versionTypeService: VersionTypeService) {
-  }
-
-  ngOnInit() {
-    this.checkForUpdatesService.getVersion()
-      .pipe(
-        map(response => response.body || null),
-        tap((versionInfo: AppVersionInfo) => {
-          const version = versionInfo && versionInfo.version || '';
-          const versionType = versionInfo.edition.includes('community') || version === ''
-            ? VersionType.COMMUNITY
-            : VersionType.ENTERPRISE;
-
-          if (versionType !== this.versionTypeService.versionType()) {
-            this.versionTypeService.changeVersionType(versionType);
-          }
-        }),
-        catchError(() => {
-          this.utmToastService.showError(
-            'Error fetching version info',
-            'An error occurred while fetching version info.'
-          );
-          return EMPTY;
-        })
-      )
-      .subscribe(versionInfo => {
-        this.versionInfo = versionInfo;
-      });
-  }
+export class UtmVersionInfoComponent {
+ @Input('version') versionInfo: AppVersionInfo;
 
+  constructor() {}
 }