mgr/dashboard: Editing RGW bucket fails because of name is already in use

- Validate name only when creating a new bucket
- Set field autofocus depending on whether a bucket is created/edited
- Improve autofocus directive

Fixes: https://tracker.ceph.com/issues/41314
Signed-off-by: Volker Theile <vtheile@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 43d0f467986f8de9034912928e219cd1347b0247..ce120fbf600942dfb977696d973c32d88e63b727 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
@@ -48,7 +48,7 @@
                    placeholder="Name..."
                    formControlName="bid"
                    [readonly]="editing"
-                   autofocus>
+                   [autofocus]="!editing">
             <span class="invalid-feedback"
                   *ngIf="bucketForm.showError('bid', frm, 'required')"
                   i18n>This field is required.</span>
@@ -72,7 +72,8 @@
             <select id="owner"
                     name="owner"
                     class="form-control custom-select"
-                    formControlName="owner">
+                    formControlName="owner"
+                    [autofocus]="editing">
               <option i18n
                       *ngIf="owners === null"
                       [ngValue]="null">Loading...</option>

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 97c527bd665f29b5ff55e18b6205ce55f7b3c7f2..11c0c0e274b3f47c4ae874a244f0b31ceb02214c 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
@@ -4,6 +4,7 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import * as _ from 'lodash';
 import { ToastrModule } from 'ngx-toastr';
 import { of as observableOf } from 'rxjs';
 
@@ -136,6 +137,20 @@ describe('RgwBucketFormComponent', () => {
       spyOn(notificationService, 'show');
     });
 
+    it('should validate name', () => {
+      component.editing = false;
+      component.createForm();
+      const control = component.bucketForm.get('bid');
+      expect(_.isFunction(control.asyncValidator)).toBeTruthy();
+    });
+
+    it('should not validate name', () => {
+      component.editing = true;
+      component.createForm();
+      const control = component.bucketForm.get('bid');
+      expect(control.asyncValidator).toBeNull();
+    });
+
     it('tests create success notification', () => {
       spyOn(rgwBucketService, 'create').and.returnValue(observableOf([]));
       component.editing = false;

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 09d7a099e5beedda917bd34e5bd167e7763ad0ab..356b63eb5cbc7acb42446bfc3328ebe85583b597 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
@@ -50,7 +50,7 @@ export class RgwBucketFormComponent implements OnInit {
   createForm() {
     this.bucketForm = this.formBuilder.group({
       id: [null],
-      bid: [null, [Validators.required], [this.bucketNameValidator()]],
+      bid: [null, [Validators.required], this.editing ? [] : [this.bucketNameValidator()]],
       owner: [null, [Validators.required]],
       'placement-target': [null, this.editing ? [] : [Validators.required]]
     });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.spec.ts
index afbc3539533fc1ebbd56c0b00ce934cb94a9dd0b..e13df747ac7d080d3c678d60696eaa7fdd998e70 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.spec.ts
@@ -18,16 +18,36 @@ export class PasswordFormComponent {}
 @Component({
   template: `
     <form>
-      <input id="x" type="checkbox" autofocus />
+      <input id="x" type="checkbox" [autofocus]="edit" />
       <input id="y" type="text" />
     </form>
   `
 })
-export class CheckboxFormComponent {}
+export class CheckboxFormComponent {
+  public edit = true;
+}
+
+@Component({
+  template: `
+    <form>
+      <input id="x" type="text" [autofocus]="foo" />
+    </form>
+  `
+})
+export class TextFormComponent {
+  foo() {
+    return false;
+  }
+}
 
 describe('AutofocusDirective', () => {
   configureTestBed({
-    declarations: [AutofocusDirective, CheckboxFormComponent, PasswordFormComponent]
+    declarations: [
+      AutofocusDirective,
+      CheckboxFormComponent,
+      PasswordFormComponent,
+      TextFormComponent
+    ]
   });
 
   it('should create an instance', () => {
@@ -58,4 +78,13 @@ describe('AutofocusDirective', () => {
     const element = document.getElementById('x');
     expect(element === document.activeElement).toBeTruthy();
   });
+
+  it('should not focus the text form field', () => {
+    const fixture: ComponentFixture<TextFormComponent> = TestBed.createComponent(TextFormComponent);
+    fixture.detectChanges();
+    const focused = fixture.debugElement.query(By.css(':focus'));
+    expect(focused).toBeNull();
+    const element = document.getElementById('x');
+    expect(element !== document.activeElement).toBeTruthy();
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.ts
index 809d8b76421d63c0210c48d28d6b3ddad93f277a..169571f3d09252c7f2a548e874a5a752f4d8c9d2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Directive, ElementRef } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
 
 import * as _ from 'lodash';
 
@@ -6,12 +6,23 @@ import * as _ from 'lodash';
   selector: '[autofocus]' // tslint:disable-line
 })
 export class AutofocusDirective implements AfterViewInit {
+  private focus = true;
+
   constructor(private elementRef: ElementRef) {}
 
   ngAfterViewInit() {
     const el: HTMLInputElement = this.elementRef.nativeElement;
-    if (_.isFunction(el.focus)) {
+    if (this.focus && _.isFunction(el.focus)) {
       el.focus();
     }
   }
+
+  @Input()
+  public set autofocus(condition: any) {
+    if (_.isBoolean(condition)) {
+      this.focus = condition;
+    } else if (_.isFunction(condition)) {
+      this.focus = condition();
+    }
+  }
 }