#17: use isUserIdAvailable as boolean observable

src/app/shared/components/model-details-artifacts/model-details-artifacts.component.html

@@ -55,7 +55,7 @@
         <th mat-header-cell *matHeaderCellDef>Action</th>
         <td mat-cell *matCellDef="let element">
           <button
-            *ngIf="!loginUserID"
+            *ngIf="!(isUserIdAvailable$ | async)"
             mat-button
             class="mdl-button mdl-js-button btn-grid-action"
             (click)="showAdvancedLogin()"
@@ -64,7 +64,7 @@
           </button>
 
           <button
-            *ngIf="loginUserID"
+            *ngIf="isUserIdAvailable$ | async"
             mat-button
             [disabled]="element.mask"
             class="mdl-button mdl-js-button btn-grid-action"

src/app/shared/components/model-details-artifacts/model-details-artifacts.component.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { PublicSolutionsService } from 'src/app/core/services/public-solutions.service';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription, map } from 'rxjs';
 import { SharedDataService } from 'src/app/core/services/shared-data/shared-data.service';
 import { FormatBytesPipe } from '../../pipes/format-bytes.pipe';
 import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service';
@@ -20,12 +20,12 @@ import { ArtifactDownloadModel } from '../../models';
   styleUrl: './model-details-artifacts.component.scss',
 })
 export class ModelDetailsArtifactsComponent implements OnInit {
-  loginUserID: string = '';
   solutionId: string = '';
   revisionId: string = '';
   versionId: string = '';
   versionIdSubscription: Subscription | undefined;
   artifactDownload!: ArtifactDownloadModel[];
+  isUserIdAvailable$: Observable<boolean | undefined>;
 
   displayedColumns: string[] = [
     'name',
@@ -41,13 +41,13 @@ export class ModelDetailsArtifactsComponent implements OnInit {
     private sharedDataService: SharedDataService,
     private browserStorageService: BrowserStorageService,
     public dialog: MatDialog,
-  ) {}
+  ) {
+    this.isUserIdAvailable$ = this.browserStorageService
+      .getUserDetails()
+      .pipe(map((details) => !!details?.userId));
+  }
 
   ngOnInit(): void {
-    const userDetailString = this.browserStorageService.getUserDetail();
-    if (userDetailString) {
-      this.loginUserID = JSON.parse(userDetailString)['username'];
-    }
     this.activatedRoute.parent?.paramMap.subscribe((paramMap) => {
       this.solutionId = paramMap.get('solutionId') || '';
       this.revisionId = paramMap.get('revisionId') || '';

src/app/shared/components/model-details-license-profile/model-details-license-profile.component.html

@@ -8,14 +8,14 @@
       class="spacebetween"
     >
       <button
-        [disabled]="!userIdAvailable"
+        [disabled]="!(isUserIdAvailable$ | async)"
         mat-stroked-button
         (click)="onClickUpload()"
       >
         Upload
       </button>
       <button
-        [disabled]="!userIdAvailable"
+        [disabled]="!(isUserIdAvailable$ | async)"
         *ngIf="modelLicense"
         mat-stroked-button
         (click)="onClickUpdate()"

src/app/shared/components/model-details-license-profile/model-details-license-profile.component.ts

@@ -28,9 +28,7 @@ export class ModelDetailsLicenseProfileComponent {
   revisionId!: string;
   versionId: string = '';
   versionIdSubscription: Subscription | undefined;
-  userIdAvailable: boolean = false;
-  userId$: Observable<string | undefined>;
-  private userIdSubscription!: Subscription;
+  isUserIdAvailable$: Observable<boolean | undefined>;
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -39,16 +37,12 @@ export class ModelDetailsLicenseProfileComponent {
     public dialog: MatDialog,
     private browserStorageService: BrowserStorageService,
   ) {
-    this.userId$ = this.browserStorageService
+    this.isUserIdAvailable$ = this.browserStorageService
       .getUserDetails()
-      .pipe(map((details) => details?.userId));
+      .pipe(map((details) => !!details?.userId));
   }
 
   ngOnInit() {
-    this.userIdSubscription = this.userId$.subscribe((userId) => {
-      this.userIdAvailable = !!userId;
-    });
-
     this.activatedRoute.parent?.paramMap.subscribe((paramMap) => {
       this.solutionId = paramMap.get('solutionId') || '';
       this.revisionId = paramMap.get('revisionId') || '';