From: Ricardo Marques <rimarques@suse.com>
Date: Tue, 26 Nov 2019 15:50:21 +0000 (+0000)
Subject: mgr/dashboard: Trim IQN on iSCSI target form
X-Git-Tag: v15.1.0~709^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=c797fed2a80df4ec1ee123e99554a3de95ead30a;p=ceph.git

mgr/dashboard: Trim IQN on iSCSI target form

Fixes: https://tracker.ceph.com/issues/43027

Signed-off-by: Ricardo Marques <rimarques@suse.com>
---

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 7b7352bda416..dcd45ac81150 100644
--- 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
@@ -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"
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 a521a6c0c058..1ed763052b2e 100644
--- 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
index 000000000000..db5e394034b3
--- /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
index 000000000000..eadac251a4a3
--- /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);
+  }
+}