mgr/dashboard: Trim IQN on iSCSI target form (#31888)

mgr/dashboard: Trim IQN on iSCSI target form

Reviewed-by: Tiago Melo <tmelo@suse.com>
Reviewed-by: Volker Theile <vtheile@suse.com>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html

@@ -22,7 +22,8 @@
                      type="text"
                      id="target_iqn"
                      name="target_iqn"
-                     formControlName="target_iqn" />
+                     formControlName="target_iqn"
+                     cdTrim />
               <span class="input-group-append">
                 <button class="btn btn-light"
                         id="ecp-info-button"
@@ -363,6 +364,7 @@
                     <input class="form-control"
                            type="text"
                            formControlName="client_iqn"
+                           cdTrim
                            (blur)="updatedInitiatorSelector()">
 
                     <span class="invalid-feedback"

src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts

@@ -7,6 +7,7 @@ import { DimlessBinaryDirective } from './dimless-binary.directive';
 import { IopsDirective } from './iops.directive';
 import { MillisecondsDirective } from './milliseconds.directive';
 import { PasswordButtonDirective } from './password-button.directive';
+import { TrimDirective } from './trim.directive';
 
 @NgModule({
   imports: [],
@@ -16,6 +17,7 @@ import { PasswordButtonDirective } from './password-button.directive';
     DimlessBinaryDirective,
     DimlessBinaryPerSecondDirective,
     PasswordButtonDirective,
+    TrimDirective,
     MillisecondsDirective,
     IopsDirective
   ],
@@ -25,6 +27,7 @@ import { PasswordButtonDirective } from './password-button.directive';
     DimlessBinaryDirective,
     DimlessBinaryPerSecondDirective,
     PasswordButtonDirective,
+    TrimDirective,
     MillisecondsDirective,
     IopsDirective
   ],

src/pybind/mgr/dashboard/frontend/src/app/shared/directives/trim.directive.spec.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+
+import { configureTestBed } from '../../../testing/unit-test-helper';
+import { CdFormGroup } from '../forms/cd-form-group';
+import { TrimDirective } from './trim.directive';
+
+@Component({
+  template: `
+    <form [formGroup]="trimForm">
+      <input type="text" formControlName="trimInput" cdTrim />
+    </form>
+  `
+})
+export class TrimComponent {
+  trimForm: CdFormGroup;
+  constructor() {
+    this.trimForm = new CdFormGroup({
+      trimInput: new FormControl()
+    });
+  }
+}
+
+describe('TrimDirective', () => {
+  configureTestBed({
+    imports: [FormsModule, ReactiveFormsModule],
+    declarations: [TrimDirective, TrimComponent]
+  });
+
+  it('should create an instance', () => {
+    const directive = new TrimDirective(null);
+    expect(directive).toBeTruthy();
+  });
+
+  it('should trim', () => {
+    const fixture: ComponentFixture<TrimComponent> = TestBed.createComponent(TrimComponent);
+    const component: TrimComponent = fixture.componentInstance;
+    const inputElement: HTMLInputElement = fixture.debugElement.query(By.css('input'))
+      .nativeElement;
+    fixture.detectChanges();
+
+    inputElement.value = ' a b ';
+    inputElement.dispatchEvent(new Event('input'));
+    const expectedValue = 'a b';
+    expect(inputElement.value).toBe(expectedValue);
+    expect(component.trimForm.getValue('trimInput')).toBe(expectedValue);
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/shared/directives/trim.directive.ts

@@ -0,0 +1,21 @@
+import { Directive, HostListener } from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+import * as _ from 'lodash';
+
+@Directive({
+  selector: '[cdTrim]'
+})
+export class TrimDirective {
+  constructor(private ngControl: NgControl) {}
+
+  @HostListener('input', ['$event.target.value'])
+  onInput(value) {
+    this.setValue(value);
+  }
+
+  setValue(value: string): void {
+    value = _.isString(value) ? value.trim() : value;
+    this.ngControl.control.setValue(value);
+  }
+}