mgr/dashboard: fix cd-text-label-list string writeValue

When editing services such as oauth2-proxy, backend fields like scope
arrive as a single string. Spreading that string into the list turned
each character into its own row. Normalize string values to one item.

Fixes: https://tracker.ceph.com/issues/78808
Signed-off-by: Pedro Gonzalez Gomez <pegonzal@ibm.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.spec.ts
index 4bc840655eadd3a6af1246ba2b6610f7ddd52e78..13f433cd45fbfdd1d0932e2c463f3ee8bda10362 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.spec.ts
@@ -41,6 +41,34 @@ describe('TextLabelListComponent', () => {
     expect(inputs[0].nativeElement.value).toBe('');
   });
 
+  it('should treat a string value as a single item', () => {
+    component.writeValue('openid profile email');
+    fixture.detectChanges();
+
+    const inputs = fixture.debugElement.queryAll(By.css('cds-text-label input'));
+    expect(inputs.length).toBe(2);
+    expect(inputs[0].nativeElement.value).toBe('openid profile email');
+    expect(inputs[1].nativeElement.value).toBe('');
+  });
+
+  it('should not spread a string into individual characters', () => {
+    component.writeValue('openid');
+    fixture.detectChanges();
+
+    const inputs = fixture.debugElement.queryAll(By.css('cds-text-label input'));
+    expect(inputs.length).toBe(2);
+    expect(inputs[0].nativeElement.value).toBe('openid');
+  });
+
+  it('should treat null like an empty list', () => {
+    component.writeValue(null);
+    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');
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.ts
index 73c18bdd44c4467b945a554d109d4d9f884c9b1a..59309b631e360ec753221cb5060b6905178b4dcf 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.ts
@@ -44,8 +44,14 @@ export class TextLabelListComponent implements ControlValueAccessor {
     return originalValue.slice(0, -1) === value;
   }
 
-  writeValue(value: string[]): void {
-    this.values = value?.length ? [...value, ''] : [''];
+  writeValue(value: string[] | string | null): void {
+    let items: string[] = [];
+    if (typeof value === 'string') {
+      items = value ? [value] : [];
+    } else if (Array.isArray(value)) {
+      items = [...value];
+    }
+    this.values = items.length ? [...items, ''] : [''];
   }
 
   registerOnChange(onChange: (value: string[]) => void): void {