mgr/dashboard: disable hosts field while editing the filesystem

Even though the Placement field was disabled, the Host field was still
showing up in UI while Editing. That option is not possible in fs form.

Fixes: https://tracker.ceph.com/issues/63193
Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit b18a1441bebdb5c997ed3970d0a53dd39cebd277)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.html
index 76e51b2c5f3985c08334bf356ddcc85c3ec61546..05235d16ccd44989977a88388c774245c342de8a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.html
@@ -59,7 +59,7 @@
           </div>
 
           <!-- Label -->
-          <div *ngIf="form.controls.placement.value === 'label'"
+          <div *ngIf="form.controls.placement.value === 'label' && !editing"
                class="form-group row">
             <label i18n
                    class="cd-col-form-label"
@@ -79,7 +79,7 @@
           </div>
 
           <!-- Hosts -->
-          <div *ngIf="form.controls.placement.value === 'hosts'"
+          <div *ngIf="form.controls.placement.value === 'hosts' && !editing"
                class="form-group row">
             <label class="cd-col-form-label"
                    for="hosts"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.spec.ts
index 5409131d97bbb9e485b6cee3069452bfac01f524..461f4bca052d85f49d0a2dceb925cdca770587a9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.spec.ts
@@ -7,10 +7,15 @@ import { FormHelper, configureTestBed } from '~/testing/unit-test-helper';
 import { SharedModule } from '~/app/shared/shared.module';
 import { ToastrModule } from 'ngx-toastr';
 import { ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { OrchestratorService } from '~/app/shared/api/orchestrator.service';
+import { of } from 'rxjs';
+
 describe('CephfsVolumeFormComponent', () => {
   let component: CephfsVolumeFormComponent;
   let fixture: ComponentFixture<CephfsVolumeFormComponent>;
   let formHelper: FormHelper;
+  let orchService: OrchestratorService;
 
   configureTestBed({
     imports: [
@@ -27,6 +32,8 @@ describe('CephfsVolumeFormComponent', () => {
     fixture = TestBed.createComponent(CephfsVolumeFormComponent);
     component = fixture.componentInstance;
     formHelper = new FormHelper(component.form);
+    orchService = TestBed.inject(OrchestratorService);
+    spyOn(orchService, 'status').and.returnValue(of({ available: true }));
     fixture.detectChanges();
   });
 
@@ -50,4 +57,26 @@ describe('CephfsVolumeFormComponent', () => {
       formHelper.expectError('name', 'pattern');
     }
   }));
+
+  it('should show placement when orchestrator is available', () => {
+    const placement = fixture.debugElement.query(By.css('#placement'));
+    expect(placement).not.toBeNull();
+  });
+
+  describe('when editing', () => {
+    beforeEach(() => {
+      component.editing = true;
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    it('should not show placement while editing even if orch is available', () => {
+      const placement = fixture.debugElement.query(By.css('#placement'));
+      const label = fixture.debugElement.query(By.css('#label'));
+      const hosts = fixture.debugElement.query(By.css('#hosts'));
+      expect(placement).toBeNull();
+      expect(label).toBeNull();
+      expect(hosts).toBeNull();
+    });
+  });
 });