From 75c5cccceceeb06dd86c6f5fd84796156eb126dc Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 20 Feb 2023 02:15:11 -0800
Subject: [PATCH] Fix dyanmic disabling checkboxes in permissions select

---
 .../permissions-select.component.html         |  2 +-
 .../permissions-select.component.ts           | 23 +++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src-ui/src/app/components/common/permissions-select/permissions-select.component.html b/src-ui/src/app/components/common/permissions-select/permissions-select.component.html
index 1907f4e3f..f3e85a543 100644
--- a/src-ui/src/app/components/common/permissions-select/permissions-select.component.html
+++ b/src-ui/src/app/components/common/permissions-select/permissions-select.component.html
@@ -18,7 +18,7 @@
       </div>
 
       <div *ngFor="let action of PermissionAction | keyvalue" class="col form-check form-check-inline" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type.key, action.key)" placement="left" triggers="mouseenter:mouseleave">
-        <input type="checkbox" class="form-check-input" id="{{type.key}}_{{action.key}}" formControlName="{{action.key}}" [attr.disabled]="isDisabled(type.key, action.key)">
+        <input type="checkbox" class="form-check-input" id="{{type.key}}_{{action.key}}" formControlName="{{action.key}}">
         <label class="form-check-label visually-hidden" for="{{type.key}}_{{action.key}}" i18n>{{action.key}}</label>
       </div>
     </li>
diff --git a/src-ui/src/app/components/common/permissions-select/permissions-select.component.ts b/src-ui/src/app/components/common/permissions-select/permissions-select.component.ts
index fa97a3b55..4b968f6e5 100644
--- a/src-ui/src/app/components/common/permissions-select/permissions-select.component.ts
+++ b/src-ui/src/app/components/common/permissions-select/permissions-select.component.ts
@@ -1,5 +1,6 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import {
+  AbstractControl,
   ControlValueAccessor,
   FormControl,
   FormGroup,
@@ -54,6 +55,8 @@ export class PermissionsSelectComponent
       this._inheritedPermissions = newInheritedPermissions
       this.writeValue(this.permissions) // updates visual checks etc.
     }
+
+    this.updateDisabledStates()
   }
 
   inheritedWarning: string = $localize`Inerhited from group`
@@ -98,6 +101,8 @@ export class PermissionsSelectComponent
         this.typesWithAllActions.delete(type)
       }
     })
+
+    this.updateDisabledStates()
   }
 
   onChange = (newValue: string[]) => {}
@@ -185,12 +190,16 @@ export class PermissionsSelectComponent
     }
   }
 
-  // if checkbox is disabled either because "All", inhereted or entire component disabled
-  isDisabled(typeKey: string, actionKey: string) {
-    return this.typesWithAllActions.has(typeKey) ||
-      this.isInherited(typeKey, actionKey) ||
-      this.disabled
-      ? true
-      : null
+  updateDisabledStates() {
+    for (const type in PermissionType) {
+      const control = this.form.get(type)
+      let actionControl: AbstractControl
+      for (const action in PermissionAction) {
+        actionControl = control.get(action)
+        this.isInherited(type, action) || this.disabled
+          ? actionControl.disable()
+          : actionControl.enable()
+      }
+    }
   }
 }