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 <tmelo@suse.com>

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 a8bf4c0d9577fd5a6f736378502cadbe313264e1..bd972778ac0f9437520fe89832c47128726f2b13 100644 (file)
--- 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()">
                 <label class="custom-control-label"
                        for="versioning"
                        i18n>Enabled</label>
@@ -158,8 +157,7 @@
                        id="mfa-delete"
                        name="mfa-delete"
                        formControlName="mfa-delete"
-                       [checked]="isMfaDeleteEnabled"
-                       (change)="updateMfaDelete()">
+                       (change)="setMfaDeleteValidators()">
                 <label class="custom-control-label"
                        for="mfa-delete"
                        i18n>Delete enabled</label>

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 0cb297c3f1fe5416c92a939469ea15a27ad97c75..b4013fff39ea42520ee95c31a3ee49209fa0f70b 100644 (file)
--- 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 bd1cfcbd051bee8a5f36a2c1721f53b07c476a3d..6ee152f5781bd7ae773a4aebd26dba86054af113 100644 (file)
--- 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();
-  }
 }