mgr/dashboard: carbonize smb service custom_dns input

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

Author: Pegonzal

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts

@@ -84,6 +84,7 @@ import { MultiClusterFormComponent } from './multi-cluster/multi-cluster-form/mu
 import { MultiClusterListComponent } from './multi-cluster/multi-cluster-list/multi-cluster-list.component';
 import { DashboardV3Module } from '../dashboard-v3/dashboard-v3.module';
 import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-details/multi-cluster-details.component';
+import { TextLabelListComponent } from '~/app/shared/components/text-label-list/text-label-list.component';
 
 @NgModule({
   imports: [
@@ -117,7 +118,8 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
     ListModule,
     ToggletipModule,
     IconModule,
-    TagModule
+    TagModule,
+    TextLabelListComponent
   ],
   declarations: [
     MonitorComponent,

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html

@@ -556,24 +556,12 @@
             </div>
           </div>
 
-          <div class="form-group row">
-            <label class="cd-col-form-label"
-                   for="custom_dns">
-              <span i18n>Custom DNS</span>
-              <cd-helper i18n>
-                <span>Comma separated list of DNSs.</span>
-                <br>
-                <span>A list of IP addresses that will be used as the DNS servers for a Samba container.</span>
-              </cd-helper>
-            </label>
-            <div class="cd-col-form-input">
-              <input id="custom_dns"
-                     class="form-control"
-                     type="text"
-                     formControlName="custom_dns"
-                     placeholder="192.168.76.204"
-                     i18n-placeholder>
-            </div>
+          <div class="form-item">
+            <cd-text-label-list formControlName="custom_dns"
+                                label="Custom DNS"
+                                helperText="IP addresses that will be used as the DNS servers for a Samba container."
+                                placeholder="192.168.76.204">
+            </cd-text-label-list>
           </div>
 
           <div class="form-group row">

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.spec.ts

@@ -539,7 +539,10 @@ x4Ea7kGVgx9kWh5XjWz9wjZvY49UKIT5ppIAWPMbLl3UpfckiuNhTA==
           unmanaged: false,
           service_id: 'foo',
           cluster_id: 'cluster_foo',
-          config_uri: 'rados://.smb/foo/scc.toml'
+          config_uri: 'rados://.smb/foo/scc.toml',
+          custom_dns: null,
+          join_sources: undefined,
+          user_sources: undefined
         });
       });
     });

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts

@@ -1213,7 +1213,7 @@ export class ServiceFormComponent extends CdForm implements OnInit {
             (serviceSpec['features'] = serviceSpec['features'] || []).push(feature);
           }
         }
-        serviceSpec['custom_dns'] = values['custom_dns']?.trim();
+        serviceSpec['custom_dns'] = values['custom_dns'];
         serviceSpec['join_sources'] = values['join_sources']?.trim();
         serviceSpec['user_sources'] = values['user_sources']?.trim();
         serviceSpec['include_ceph_users'] = values['include_ceph_users']?.trim();

src/pybind/mgr/dashboard/frontend/src/app/shared/components/text-label-list/text-label-list.component.html

@@ -2,20 +2,20 @@
   <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 : ''}}
+    <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.ts

@@ -27,12 +27,12 @@ import { ComponentsModule } from '../components.module';
   ]
 })
 export class TextLabelListComponent implements ControlValueAccessor {
-  @Input()
-  label: string = '';
-  @Input()
-  helperText: string = '';
-  @Input()
-  placeholder: string = '';
+  // Label for the text list.
+  @Input() label: string = '';
+  // Optional helper text that appears under the label.
+  @Input() helperText: string = '';
+  // Value displayed if no item is present.
+  @Input() placeholder: string = '';
 
   values: string[] = [''];
   disabled: boolean = false;