From d58baea6b2e6e8f4ef959f5630863f5eb881f083 Mon Sep 17 00:00:00 2001 From: Tiago Melo Date: Tue, 7 Apr 2020 11:12:10 +0000 Subject: [PATCH] mgr/dashboard: Fix RGW Bucket checkbox Using reactive forms mixed with [checked] stopped working in Angular 9. Fixes: https://tracker.ceph.com/issues/44970 Signed-off-by: Tiago Melo --- .../rgw-bucket-form.component.html | 6 ++-- .../rgw-bucket-form.component.spec.ts | 6 ++-- .../rgw-bucket-form.component.ts | 35 +++++++------------ 3 files changed, 19 insertions(+), 28 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html index a8bf4c0d957..bd972778ac0 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html @@ -131,8 +131,7 @@ id="versioning" name="versioning" formControlName="versioning" - [checked]="isVersioningEnabled" - (change)="updateVersioning()"> + (change)="setMfaDeleteValidators()"> @@ -158,8 +157,7 @@ id="mfa-delete" name="mfa-delete" formControlName="mfa-delete" - [checked]="isMfaDeleteEnabled" - (change)="updateMfaDelete()"> + (change)="setMfaDeleteValidators()"> diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.spec.ts index 0cb297c3f1f..b4013fff39e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.spec.ts @@ -227,8 +227,10 @@ describe('RgwBucketFormComponent', () => { component.editing = true; rgwBucketServiceGetSpy.and.returnValue(observableOf(fakeResponse)); component.ngOnInit(); - component.isVersioningEnabled = versioningChecked; - component.isMfaDeleteEnabled = mfaDeleteChecked; + component.bucketForm.patchValue({ + versioning: versioningChecked, + 'mfa-delete': mfaDeleteChecked + }); fixture.detectChanges(); const mfaTokenSerial = fixture.debugElement.nativeElement.querySelector('#mfa-token-serial'); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts index bd1cfcbd051..6ee152f5781 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.ts @@ -33,12 +33,17 @@ export class RgwBucketFormComponent implements OnInit { resource: string; zonegroup: string; placementTargets: object[] = []; - isVersioningEnabled = false; isVersioningAlreadyEnabled = false; - isMfaDeleteEnabled = false; isMfaDeleteAlreadyEnabled = false; icons = Icons; + get isVersioningEnabled(): boolean { + return this.bucketForm.getValue('versioning'); + } + get isMfaDeleteEnabled(): boolean { + return this.bucketForm.getValue('mfa-delete'); + } + constructor( private route: ActivatedRoute, private router: Router, @@ -117,22 +122,26 @@ export class RgwBucketFormComponent implements OnInit { this.rgwBucketService.get(bid).subscribe((resp: object) => { this.loading = false; + // Get the default values (incl. the values from disabled fields). const defaults = _.clone(this.bucketForm.getRawValue()); + // Get the values displayed in the form. We need to do that to // extract those key/value pairs from the response data, otherwise // the Angular react framework will throw an error if there is no // field for a given key. let value: object = _.pick(resp, _.keys(defaults)); value['placement-target'] = resp['placement_rule']; + value['versioning'] = resp['versioning'] === RgwBucketVersioning.ENABLED; + value['mfa-delete'] = resp['mfa_delete'] === RgwBucketMfaDelete.ENABLED; + // Append default values. value = _.merge(defaults, value); + // Update the form. this.bucketForm.setValue(value); if (this.editing) { - this.setVersioningStatus(resp['versioning']); this.isVersioningAlreadyEnabled = this.isVersioningEnabled; - this.setMfaDeleteStatus(resp['mfa_delete']); this.isMfaDeleteAlreadyEnabled = this.isMfaDeleteEnabled; this.setMfaDeleteValidators(); } @@ -308,25 +317,7 @@ export class RgwBucketFormComponent implements OnInit { return this.isVersioningEnabled ? RgwBucketVersioning.ENABLED : RgwBucketVersioning.SUSPENDED; } - setVersioningStatus(status: RgwBucketVersioning) { - this.isVersioningEnabled = status === RgwBucketVersioning.ENABLED; - } - - updateVersioning() { - this.isVersioningEnabled = !this.isVersioningEnabled; - this.setMfaDeleteValidators(); - } - getMfaDeleteStatus() { return this.isMfaDeleteEnabled ? RgwBucketMfaDelete.ENABLED : RgwBucketMfaDelete.DISABLED; } - - setMfaDeleteStatus(status: RgwBucketMfaDelete) { - this.isMfaDeleteEnabled = status === RgwBucketMfaDelete.ENABLED; - } - - updateMfaDelete() { - this.isMfaDeleteEnabled = !this.isMfaDeleteEnabled; - this.setMfaDeleteValidators(); - } }