mgr/dashboard: Trim IQN on iSCSI target form

Fixes: https://tracker.ceph.com/issues/43027
Signed-off-by: Ricardo Marques <rimarques@suse.com>
(cherry picked from commit c797fed2a80df4ec1ee123e99554a3de95ead30a)

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

Conflicts caused by "Master" using Bootstrap 4, but "Nautilus" using Bootstap 3.

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
index 0562efa32d700ab90a02ec17a4ee39f991623020..a165d5627e615cf484004796726baf5302ab6daa 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
@@ -26,7 +26,8 @@
                      type="text"
                      id="target_iqn"
                      name="target_iqn"
-                     formControlName="target_iqn" />
+                     formControlName="target_iqn"
+                     cdTrim />
               <span class="input-group-btn">
                 <button class="btn btn-default"
                         id="ecp-info-button"
@@ -364,6 +365,7 @@
                     <input class="form-control"
                            type="text"
                            formControlName="client_iqn"
+                           cdTrim
                            (blur)="updatedInitiatorSelector()">
 
                     <span class="help-block"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts
index a521a6c0c058d4b715e82e745eea48316590d965..1ed763052b2e8547a93294d9e1c92bb987e1cdea 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts
+++ b/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
   ],

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/trim.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/trim.directive.spec.ts
new file mode 100644 (file)
index 0000000..db5e394
--- /dev/null
+++ b/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);
+  });
+});

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/trim.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/trim.directive.ts
new file mode 100644 (file)
index 0000000..eadac25
--- /dev/null
+++ b/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);
+  }
+}