mgr/dashboard: add text-label-list component

Introduces new form input component to input  a list of strings based on carbon's cds-text-label component

Fixes: https://tracker.ceph.com/issues/73319
Signed-off-by: Pedro Gonzalez Gomez <[email protected]>

Author: Pegonzal

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 {
+  @Input()
+  label: string = '';
+  @Input()
+  helperText: string = '';
+  @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 : []);
+  }
+}