Enhancement: mergeable bulk edit permissions (#5508)

src-ui/src/app/components/common/input/switch/switch.component.html

@@ -15,7 +15,7 @@
         }
       </div>
     }
-    <div [ngClass]="{'col-md-9': horizontal, 'align-items-center': horizontal, 'd-flex': horizontal}">
+    <div [ngClass]="{'align-items-center': horizontal, 'd-flex': horizontal}">
       <div class="form-check form-switch">
         <input #inputField type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
         @if (horizontal) {

src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.html

@@ -5,12 +5,15 @@
 </div>
 <div class="modal-body">
 
-  @if (!object && message) {
-    <p class="mb-3" [innerHTML]="message | safeHtml"></p>
-  }
-
   <form [formGroup]="form">
-    <pngx-permissions-form [users]="users" formControlName="permissions_form"></pngx-permissions-form>
+    <div class="form-group">
+      <pngx-permissions-form [users]="users" formControlName="permissions_form"></pngx-permissions-form>
+    </div>
+    <div class="form-group mt-4">
+      <div class="offset-lg-3 row">
+        <pngx-input-switch i18n-title title="Merge with existing permissions" [horizontal]="true" [hint]="hint" formControlName="merge"></pngx-input-switch>
+      </div>
+    </div>
   </form>
 
 </div>
@@ -20,5 +23,5 @@
     <span class="visually-hidden" i18n>Loading...</span>
   }
   <button type="button" class="btn btn-outline-primary" (click)="cancelClicked()" [disabled]="!buttonsEnabled" i18n>Cancel</button>
-  <button type="button" class="btn btn-primary" (click)="confirmClicked.emit(permissions)" [disabled]="!buttonsEnabled" i18n>Confirm</button>
+  <button type="button" class="btn btn-primary" (click)="confirm()" [disabled]="!buttonsEnabled" i18n>Confirm</button>
 </div>

src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.spec.ts

@@ -11,6 +11,7 @@ import { NgSelectModule } from '@ng-select/ng-select'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { PermissionsUserComponent } from '../input/permissions/permissions-user/permissions-user.component'
 import { PermissionsGroupComponent } from '../input/permissions/permissions-group/permissions-group.component'
+import { SwitchComponent } from '../input/switch/switch.component'
 
 const set_permissions = {
   owner: 10,
@@ -37,6 +38,7 @@ describe('PermissionsDialogComponent', () => {
         PermissionsDialogComponent,
         SafeHtmlPipe,
         SelectComponent,
+        SwitchComponent,
         PermissionsFormComponent,
         PermissionsUserComponent,
         PermissionsGroupComponent,
@@ -112,4 +114,23 @@ describe('PermissionsDialogComponent', () => {
     expect(component.title).toEqual(`Edit permissions for ${obj.name}`)
     expect(component.permissions).toEqual(set_permissions)
   })
+
+  it('should toggle hint based on object existence (if editing) or merge flag', () => {
+    component.form.get('merge').setValue(true)
+    expect(component.hint.includes('Existing')).toBeTruthy()
+    component.form.get('merge').setValue(false)
+    expect(component.hint.includes('will be replaced')).toBeTruthy()
+    component.object = {}
+    expect(component.hint).toBeNull()
+  })
+
+  it('should emit permissions and merge flag on confirm', () => {
+    const confirmSpy = jest.spyOn(component.confirmClicked, 'emit')
+    component.form.get('permissions_form').setValue(set_permissions)
+    component.confirm()
+    expect(confirmSpy).toHaveBeenCalledWith({
+      permissions: set_permissions,
+      merge: true,
+    })
+  })
 })

src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.ts

@@ -32,6 +32,7 @@ export class PermissionsDialogComponent {
     this.o = o
     this.title = $localize`Edit permissions for ` + o['name']
     this.form.patchValue({
+      merge: true,
       permissions_form: {
         owner: o.owner,
         set_permissions: o.permissions,
@@ -43,8 +44,9 @@ export class PermissionsDialogComponent {
     return this.o
   }
 
-  form = new FormGroup({
+  public form = new FormGroup({
     permissions_form: new FormControl(),
+    merge: new FormControl(true),
   })
 
   buttonsEnabled: boolean = true
@@ -66,11 +68,21 @@ export class PermissionsDialogComponent {
     }
   }
 
-  @Input()
-  message =
-    $localize`Note that permissions set here will override any existing permissions`
+  get hint(): string {
+    if (this.object) return null
+    return this.form.get('merge').value
+      ? $localize`Existing owner, user and group permissions will be merged with these settings.`
+      : $localize`Any and all existing owner, user and group permissions will be replaced.`
+  }
 
   cancelClicked() {
     this.activeModal.close()
   }
+
+  confirm() {
+    this.confirmClicked.emit({
+      permissions: this.permissions,
+      merge: this.form.get('merge').value,
+    })
+  }
 }