Merge pull request ceph#65735 from rhcs-dashboard/input-string-list

mgr/dashboard: add text-label-list component

Reviewed-by: Afreen Misbah <[email protected]>
Reviewed-by: Nizamudeen A <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts

@@ -84,6 +84,7 @@ import { MultiClusterFormComponent } from './multi-cluster/multi-cluster-form/mu
 import { MultiClusterListComponent } from './multi-cluster/multi-cluster-list/multi-cluster-list.component';
 import { DashboardV3Module } from '../dashboard-v3/dashboard-v3.module';
 import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-details/multi-cluster-details.component';
+import { TextLabelListComponent } from '~/app/shared/components/text-label-list/text-label-list.component';
 
 @NgModule({
   imports: [
@@ -117,7 +118,8 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
     ListModule,
     ToggletipModule,
     IconModule,
-    TagModule
+    TagModule,
+    TextLabelListComponent
   ],
   declarations: [
     MonitorComponent,

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html

@@ -556,24 +556,12 @@
             </div>
           </div>
 
-          <div class="form-group row">
-            <label class="cd-col-form-label"
-                   for="custom_dns">
-              <span i18n>Custom DNS</span>
-              <cd-helper i18n>
-                <span>Comma separated list of DNSs.</span>
-                <br>
-                <span>A list of IP addresses that will be used as the DNS servers for a Samba container.</span>
-              </cd-helper>
-            </label>
-            <div class="cd-col-form-input">
-              <input id="custom_dns"
-                     class="form-control"
-                     type="text"
-                     formControlName="custom_dns"
-                     placeholder="192.168.76.204"
-                     i18n-placeholder>
-            </div>
+          <div class="form-item">
+            <cd-text-label-list formControlName="custom_dns"
+                                label="Custom DNS"
+                                helperText="IP addresses that will be used as the DNS servers for a Samba container."
+                                placeholder="192.168.76.204">
+            </cd-text-label-list>
           </div>
 
           <div class="form-group row">

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.spec.ts

@@ -539,7 +539,10 @@ x4Ea7kGVgx9kWh5XjWz9wjZvY49UKIT5ppIAWPMbLl3UpfckiuNhTA==
           unmanaged: false,
           service_id: 'foo',
           cluster_id: 'cluster_foo',
-          config_uri: 'rados://.smb/foo/scc.toml'
+          config_uri: 'rados://.smb/foo/scc.toml',
+          custom_dns: null,
+          join_sources: undefined,
+          user_sources: undefined
         });
       });
     });

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts

@@ -1212,7 +1212,7 @@ export class ServiceFormComponent extends CdForm implements OnInit {
             (serviceSpec['features'] = serviceSpec['features'] || []).push(feature);
           }
         }
-        serviceSpec['custom_dns'] = values['custom_dns']?.trim();
+        serviceSpec['custom_dns'] = values['custom_dns'];
         serviceSpec['join_sources'] = values['join_sources']?.trim();
         serviceSpec['user_sources'] = values['user_sources']?.trim();
         serviceSpec['include_ceph_users'] = values['include_ceph_users']?.trim();

src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.html

@@ -0,0 +1,21 @@
+@for (value of values; track $index) {
+  <cds-text-label [helperText]="helperText && $index === values.length - 1 ? helperText : null"
+                  i18n-helperText
+                  i18n>
+    <div class="cds-input-group">
+      <input cdsText
+             type="text"
+             [placeholder]="placeholder"
+             [value]="value"
+             (input)="onInputChange($index, $event.target.value)" />
+      @if ($index > 0 ) {
+      <cds-icon-button kind="ghost"
+                       (click)="deleteInput($index)"
+                       size="md">
+        <cd-icon type="trash"></cd-icon>
+      </cds-icon-button>
+      }
+    </div>
+    {{$index === 0 ? label : ''}}
+  </cds-text-label>
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.scss

@@ -0,0 +1,92 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TextLabelListComponent } from './text-label-list.component';
+import { By } from '@angular/platform-browser';
+
+describe('TextLabelListComponent', () => {
+  let component: TextLabelListComponent;
+  let fixture: ComponentFixture<TextLabelListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TextLabelListComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TextLabelListComponent);
+    component = fixture.componentInstance;
+    component.registerOnChange(jasmine.createSpy('onChange'));
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call writeValue and render values', () => {
+    component.writeValue(['foo', 'bar']);
+    fixture.detectChanges();
+
+    const inputs = fixture.debugElement.queryAll(By.css('cds-text-label input'));
+    expect(inputs.length).toBe(3);
+    expect(inputs[0].nativeElement.value).toBe('foo');
+    expect(inputs[1].nativeElement.value).toBe('bar');
+    expect(inputs[2].nativeElement.value).toBe('');
+  });
+
+  it('should call writeValue empty and render one', () => {
+    component.writeValue([]);
+    fixture.detectChanges();
+
+    const inputs = fixture.debugElement.queryAll(By.css('cds-text-label input'));
+    expect(inputs.length).toBe(1);
+    expect(inputs[0].nativeElement.value).toBe('');
+  });
+
+  it('should call onTouch on input changes', () => {
+    spyOn(component as any, 'onTouched');
+
+    component.onInputChange(0, 'foo');
+
+    expect((component as any).onTouched).toHaveBeenCalled();
+  });
+
+  it('should update the value at the given index', () => {
+    component.writeValue(['foo', '']);
+    component.onInputChange(2, 'bar');
+
+    expect(component.values[2]).toBe('bar');
+  });
+
+  it('should return non empty values on input changes', () => {
+    component.writeValue(['foo', 'bar', '']);
+    component.onInputChange(3, 'test');
+    fixture.detectChanges();
+
+    const inputs = fixture.debugElement.queryAll(By.css('cds-text-label input'));
+    expect(inputs.length).toBe(5);
+    expect((component as any).onChange).toHaveBeenCalledWith(['foo', 'bar', 'test']);
+  });
+
+  it('should remove the item at the given index', () => {
+    component.writeValue(['foo', 'bar']);
+    component.deleteInput(0);
+
+    expect(component['values']).toEqual(['bar', '']);
+    expect(component['onChange']).toHaveBeenCalledWith(['bar']);
+  });
+
+  it('should add an empty input if all items are deleted', () => {
+    component.writeValue(['foo']);
+    component.deleteInput(0);
+
+    expect(component['values']).toEqual(['']);
+    expect(component['onChange']).toHaveBeenCalledWith([]);
+  });
+
+  it('should update values correctly on deletion', () => {
+    component.writeValue(['foo', 'bar', 'test']);
+    component.deleteInput(1);
+
+    expect(component['values']).toEqual(['foo', 'test', '']);
+    expect(component['onChange']).toHaveBeenCalledWith(['foo', 'test']);
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.spec.ts

@@ -0,0 +1,99 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { ButtonModule, GridModule, IconModule, InputModule } from 'carbon-components-angular';
+import { ComponentsModule } from '../components.module';
+
+@Component({
+  selector: 'cd-text-label-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    InputModule,
+    IconModule,
+    ButtonModule,
+    GridModule,
+    ComponentsModule
+  ],
+  templateUrl: './text-label-list.component.html',
+  styleUrl: './text-label-list.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TextLabelListComponent,
+      multi: true
+    }
+  ]
+})
+export class TextLabelListComponent implements ControlValueAccessor {
+  // Label for the text list.
+  @Input() label: string = '';
+  // Optional helper text that appears under the label.
+  @Input() helperText: string = '';
+  // Value displayed if no item is present.
+  @Input() placeholder: string = '';
+
+  values: string[] = [''];
+  disabled: boolean = false;
+  touched: boolean = false;
+
+  private onChange: (value: string[]) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  private _isRemovingChar(originalValue: string, value: string): boolean {
+    return originalValue.slice(0, -1) === value;
+  }
+
+  writeValue(value: string[]): void {
+    this.values = value?.length ? [...value, ''] : [''];
+  }
+
+  registerOnChange(onChange: (value: string[]) => void): void {
+    this.onChange = onChange;
+  }
+
+  registerOnTouched(onTouched: () => void): void {
+    this.onTouched = onTouched;
+  }
+
+  setDisabledState(disabled: boolean): void {
+    this.disabled = disabled;
+  }
+
+  onInputChange(index: number, value: string) {
+    const originalValue = this.values[index];
+    this.values[index] = value;
+
+    if (
+      !this._isRemovingChar(originalValue, value) &&
+      index === this.values.length - 1 &&
+      value.trim() !== ''
+    ) {
+      this.values.push('');
+    }
+
+    const nonEmptyValues = this.values.filter((v) => v.trim() !== '');
+    this.onChange(nonEmptyValues.length ? nonEmptyValues : []);
+
+    this.markAsTouched();
+  }
+
+  markAsTouched() {
+    if (!this.touched) {
+      this.onTouched();
+      this.touched = true;
+    }
+  }
+
+  deleteInput(index: number) {
+    this.values.splice(index, 1);
+
+    if (this.values.length === 0) {
+      this.values.push('');
+    }
+
+    const nonEmpty = this.values.filter((v) => v.trim() !== '');
+    this.onChange(nonEmpty.length ? nonEmpty : []);
+  }
+}