UI: Add pattern to prevent whitespaces for string autocomplete

ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html

@@ -225,6 +225,7 @@
                                     additionalClass="tb-suffix-show-on-hover"
                                     appearance="outline"
                                     panelWidth=""
+                                    showInlineError
                                     required
                                     [label]="(provider === aiProvider.AZURE_OPENAI ? 'ai-models.deployment-name': 'ai-models.model-id') | translate"
                                     [errorText]="(provider === aiProvider.AZURE_OPENAI ? 'ai-models.deployment-name-required': 'ai-models.model-id-required') | translate"

ui-ngx/src/app/shared/components/string-autocomplete.component.html

@@ -24,12 +24,12 @@
          [matAutocomplete]="optionsAutocomplete">
   <button *ngIf="selectionFormControl.value && !disabled"
           type="button"
-          class="tb-icon-24 mr-2"
+          class="tb-icon-24"
           matSuffix mat-icon-button aria-label="Clear"
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
-  <mat-icon *ngIf="selectionFormControl.hasError('required') && selectionFormControl.touched && !showInlineError"
+  <mat-icon *ngIf="selectionFormControl.errors && selectionFormControl.touched && !showInlineError"
             matIconSuffix
             [matTooltip]="errorText"
             matTooltipPosition="above"
@@ -37,7 +37,7 @@
             class="material-icons tb-suffix-show-always tb-error">
     warning
   </mat-icon>
-  <mat-error *ngIf="selectionFormControl.hasError('required') && showInlineError">
+  <mat-error *ngIf="selectionFormControl.errors && showInlineError">
     {{errorText}}
   </mat-error>
   <mat-autocomplete

ui-ngx/src/app/shared/components/string-autocomplete.component.scss

@@ -20,6 +20,12 @@
     max-width: 100%;
     box-sizing: border-box;
 
+    &.tb-inline-field {
+      .mdc-icon-button {
+        margin-right: 8px;
+      }
+    }
+
     .tb-autocomplete.tb-option-input-autocomplete {
       .mat-mdc-option {
         border-bottom: none;

ui-ngx/src/app/shared/components/string-autocomplete.component.ts

@@ -106,7 +106,11 @@ export class StringAutocompleteComponent implements ControlValueAccessor, OnInit
   }
 
   ngOnInit() {
-    this.selectionFormControl = this.fb.control('', this.required ? [Validators.required] : []);
+    const validators = [Validators.pattern(/.*\S.*/)];
+    if (this.required) {
+      validators.push(Validators.required);
+    }
+    this.selectionFormControl = this.fb.control('', validators);
     this.filteredOptions$ = this.selectionFormControl.valueChanges
       .pipe(
         tap(value => this.updateView(value)),
@@ -152,7 +156,7 @@ export class StringAutocompleteComponent implements ControlValueAccessor, OnInit
   updateView(value: string) {
     this.searchText = value ? value : '';
     if (this.modelValue !== value) {
-      this.modelValue = value;
+      this.modelValue = value?.trim();
       this.propagateChange(this.modelValue);
     }
   }