NAS-129590 / 24.10 / Read Only Admin User App Edit screen is blank (#…

…10408) * NAS-129590: Read Only Admin User App Edit screen is blank * NAS-129590: PR Update * NAS-129590: Read Only Admin User App Edit screen is blank --------- Co-authored-by: Evgeny Stepanovych <[email protected]>
truenas · Aug 11, 2024 · 9eea249 · 9eea249
1 parent 153154d
commit 9eea249
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 15 deletions.
diff --git a/src/app/pages/apps/components/app-wizard/app-wizard.component.html b/src/app/pages/apps/components/app-wizard/app-wizard.component.html
@@ -1,4 +1,8 @@
-<ix-page-header [pageTitle]="pageTitle$ | async"></ix-page-header>
+<ix-page-header [pageTitle]="pageTitle$ | async">
+  @if (!(hasRequiredRoles | async)) {
+    <ix-readonly-badge></ix-readonly-badge>
+  }
+</ix-page-header>
 
 @if (appsLoaded) {
   <div class="app-wizard-wrapper">

diff --git a/src/app/pages/apps/components/app-wizard/app-wizard.component.scss b/src/app/pages/apps/components/app-wizard/app-wizard.component.scss
@@ -97,3 +97,9 @@ ix-app-metadata-card ::ng-deep {
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg1));
   }
 }
+
+:host ::ng-deep {
+  .header-container .title-container .actions-container {
+    justify-content: flex-start;
+  }
+}
diff --git a/src/app/pages/apps/components/app-wizard/app-wizard.component.ts b/src/app/pages/apps/components/app-wizard/app-wizard.component.ts
@@ -6,7 +6,6 @@ import {
   OnInit,
 } from '@angular/core';
 import { FormBuilder, FormControl, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateService } from '@ngx-translate/core';
@@ -48,6 +47,7 @@ import { forbiddenAsyncValues, forbiddenValuesError } from 'app/modules/forms/ix
 import { AppLoaderService } from 'app/modules/loader/app-loader.service';
 import { ApplicationsService } from 'app/pages/apps/services/applications.service';
 import { DockerStore } from 'app/pages/apps/store/docker.store';
+import { AuthService } from 'app/services/auth/auth.service';
 import { ErrorHandlerService } from 'app/services/error-handler.service';
 import { AppSchemaService } from 'app/services/schema/app-schema.service';
 import { WebSocketService } from 'app/services/ws.service';
@@ -104,11 +104,14 @@ export class AppWizardComponent implements OnInit, OnDestroy {
     return Boolean(this.catalogApp?.app_metadata && this.form?.controls['show_metadata']?.value);
   }
 
+  get hasRequiredRoles(): Observable<boolean> {
+    return this.authService.hasRole(this.requiredRoles);
+  }
+
   constructor(
     private formBuilder: FormBuilder,
     private dialogService: DialogService,
     private appSchemaService: AppSchemaService,
-    private matDialog: MatDialog,
     private validatorsService: IxValidatorsService,
     private translate: TranslateService,
     private cdr: ChangeDetectorRef,
@@ -119,6 +122,7 @@ export class AppWizardComponent implements OnInit, OnDestroy {
     private errorHandler: ErrorHandlerService,
     private dockerStore: DockerStore,
     private ws: WebSocketService,
+    private authService: AuthService,
   ) {}
 
   ngOnInit(): void {

diff --git a/src/app/pages/apps/components/catalog-settings/catalog-settings.component.html b/src/app/pages/apps/components/catalog-settings/catalog-settings.component.html
@@ -1,6 +1,7 @@
 <ix-modal-header
   [title]="'Edit Catalog' | translate"
   [loading]="isFormLoading()"
+  [requiredRoles]="requiredRoles"
 ></ix-modal-header>
 
 <mat-card>

diff --git a/src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.html b/src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.html
@@ -12,18 +12,18 @@ <h3 mat-card-title>
       >
         {{ 'Edit' | translate }}
       </button>
-      <ng-container *ixRequiresRoles="requiredRoles">
-        @if (hasUpdates) {
-          <button
-            id="update-app"
-            mat-button
-            [ixTest]="[app?.name, 'update']"
-            (click)="updateButtonPressed()"
-          >
-            {{ 'Update' | translate }}
-          </button>
-        }
-      </ng-container>
+
+      @if (hasUpdates) {
+        <button
+          *ixRequiresRoles="requiredRoles"
+          id="update-app"
+          mat-button
+          [ixTest]="[app?.name, 'update']"
+          (click)="updateButtonPressed()"
+        >
+          {{ 'Update' | translate }}
+        </button>
+      }
     </div>
   </mat-card-header>
   <mat-card-content>