Display the predefined category tags for vSphere cluster tags

modules/web/src/app/node-data/basic/provider/vmware-cloud-director/component.ts

@@ -367,7 +367,7 @@ export class VMwareCloudDirectorBasicNodeDataComponent
     const networkControl = this.form.get(Controls.Network);
     const additionalNetworksControl = this.form.get(Controls.AdditionalNetworks);
 
-    additionalNetworksControl.setValue(additionalNetworksControl.value.filter(n => this.networks.includes(n)));
+    additionalNetworksControl.setValue(additionalNetworksControl.value?.filter(n => this.networks.includes(n)));
 
     if (networkControl.value && this.networks.includes(networkControl.value)) {
       return;

modules/web/src/app/node-data/basic/provider/vmware-cloud-director/template.html

@@ -98,8 +98,8 @@
     </mat-select>
   </mat-form-field>
 
-
-  <mat-form-field fxFlex *ngIf="networks.length > 1">
+  @if (networks.length > 1) {
+  <mat-form-field fxFlex>
     <mat-label>Additional Networks</mat-label>
     <mat-select [formControlName]="Controls.AdditionalNetworks"
                 (selectionChange)="onAdditionalNetworkChanged($event.value)"
@@ -111,6 +111,7 @@
                   [disabled]="network == form.get(Controls.Network).value"> {{network}} </mat-option>
     </mat-select>
   </mat-form-field>
+  }
 
   <km-combobox #placementPolicyCombobox
                [selected]="selectedPlacementPolicy"

modules/web/src/app/shared/components/chip-autocomplete/component.ts

@@ -35,6 +35,7 @@ import {
   NG_VALUE_ACCESSOR,
   ValidationErrors,
   Validator,
+  ValidatorFn,
   Validators,
 } from '@angular/forms';
 import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
@@ -82,7 +83,9 @@ export class ChipAutocompleteComponent implements OnChanges, OnInit, OnDestroy,
   @Input() description = 'Use comma, enter or space key as the separator.';
   @Input() placeholder = 'Select single or multiple values';
   @Input() required = false;
-  @Output() change = new EventEmitter<string[]>();
+  @Input() patternError = 'Invalid pattern';
+  @Input() pattern: string;
+  @Output() onChange = new EventEmitter<string[]>();
   @ViewChild('tagInput') tagInput: ElementRef;
   private readonly _debounceTime = 250;
   private _unsubscribe = new Subject<void>();
@@ -96,8 +99,11 @@ export class ChipAutocompleteComponent implements OnChanges, OnInit, OnDestroy,
     if (changes?.disabled && this.form) {
       if (this.disabled) {
         this.form.get(Controls.Tags).disable();
+        this.form.get(Controls.Tags).clearValidators();
       } else if (this.form.get(Controls.Tags).disabled) {
         this.form.get(Controls.Tags).enable();
+        this.form.get(Controls.Tags).setValidators(this._validators());
+        this.form.get(Controls.Tags).updateValueAndValidity();
       }
     }
   }
@@ -122,7 +128,11 @@ export class ChipAutocompleteComponent implements OnChanges, OnInit, OnDestroy,
   }
 
   removeTag(tag: string): void {
-    this.selectedTags = this.selectedTags.filter(selectedTag => selectedTag !== tag);
+    const index = this.selectedTags.indexOf(tag);
+
+    if (index >= 0) {
+      this.selectedTags.splice(index, 1);
+    }
     this._valueUpdated();
   }
 
@@ -151,10 +161,7 @@ export class ChipAutocompleteComponent implements OnChanges, OnInit, OnDestroy,
   private _initForm() {
     this.form = this._builder.group({
       [Controls.Filter]: this._builder.control(''),
-      [Controls.Tags]: this._builder.control(
-        [],
-        this.required ? [Validators.required, KmValidators.unique()] : [KmValidators.unique()]
-      ),
+      [Controls.Tags]: this._builder.control([], this._validators()),
     });
 
     if (this.disabled) {
@@ -180,7 +187,7 @@ export class ChipAutocompleteComponent implements OnChanges, OnInit, OnDestroy,
   private _valueUpdated() {
     this._patchValue();
     this.filteredTags = this._removeSelectedTagsFromList();
-    this.change.emit(this.selectedTags);
+    this.onChange.emit(this.selectedTags);
   }
 
   private _patchValue() {
@@ -196,10 +203,23 @@ export class ChipAutocompleteComponent implements OnChanges, OnInit, OnDestroy,
   }
 
   private _removeSelectedTagsFromFilterList(tags: string[]): string[] {
-    return tags?.filter(tag => !this.selectedTags.includes(tag)) || [];
+    return tags?.filter(tag => !this.selectedTags?.includes(tag)) || [];
   }
 
   private _removeSelectedTagsFromList(): string[] {
-    return this.tags?.filter(tag => !this.selectedTags.includes(tag)) || [];
+    return this.tags?.filter(tag => !this.selectedTags?.includes(tag)) || [];
+  }
+
+  private _validators(): ValidatorFn[] {
+    const validators = [KmValidators.unique()];
+
+    if (this.required) {
+      validators.push(Validators.required);
+    }
+
+    if (this.pattern) {
+      validators.push(KmValidators.chipPattern(this.pattern));
+    }
+    return validators;
   }
 }

modules/web/src/app/shared/components/chip-autocomplete/template.html

@@ -40,6 +40,7 @@
              [placeholder]="placeholder"
              [matAutocomplete]="auto"
              [matChipInputFor]="tagList"
+             [matChipInputAddOnBlur]="true"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              (matChipInputTokenEnd)="addTag($event)" />
     </mat-chip-grid>
@@ -62,5 +63,13 @@
       <span>Values must be <strong>unique</strong>.</span>
     </mat-error>
     }
+
+    @if (form.get(Controls.Tags).hasError('pattern')) {
+    <mat-error>
+      <span [innerHTML]="patternError"></span>
+    </mat-error>
+    }
+
+
   </mat-form-field>
 </form>

modules/web/src/app/wizard/step/provider-settings/provider/extended/vsphere/component.ts

@@ -36,7 +36,18 @@ import {KUBERNETES_RESOURCE_NAME_PATTERN} from '@app/shared/validators/others';
 import {AutocompleteControls, AutocompleteInitialState} from '@shared/components/autocomplete/component';
 import _ from 'lodash';
 import {EMPTY, forkJoin, merge, Observable, of, onErrorResumeNext} from 'rxjs';
-import {catchError, debounceTime, distinctUntilChanged, filter, map, switchMap, takeUntil, tap} from 'rxjs/operators';
+import {
+  catchError,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  map,
+  switchMap,
+  take,
+  takeUntil,
+  tap,
+} from 'rxjs/operators';
+import {NodeDataService} from '@app/core/services/node-data/service';
 
 enum Controls {
   Networks = 'networks',
@@ -107,6 +118,7 @@ export class VSphereProviderExtendedComponent extends BaseFormValidator implemen
   folderLabel = FolderState.Empty;
   networkLabel = NetworkState.Empty;
   tagCategories: VSphereTagCategory[] = [];
+  predefinedTagList: string[] = [];
   tagCategoryLabel = TagCategoryState.Empty;
   selectedTagCategory = '';
   tags: string[] = [];
@@ -123,7 +135,8 @@ export class VSphereProviderExtendedComponent extends BaseFormValidator implemen
     private readonly _builder: FormBuilder,
     private readonly _presets: PresetsService,
     private readonly _clusterSpecService: ClusterSpecService,
-    private readonly _cdr: ChangeDetectorRef
+    private readonly _cdr: ChangeDetectorRef,
+    private readonly _nodeDataService: NodeDataService
   ) {
     super('VSphere Provider Extended');
   }
@@ -245,9 +258,17 @@ export class VSphereProviderExtendedComponent extends BaseFormValidator implemen
 
   onTagCategoryChange(tagCategory: string): void {
     this.selectedTagCategory = tagCategory;
+    this.predefinedTagList = [];
     if (tagCategory) {
       this.form.get(Controls.Tags).enable();
       this.onTagValuesChange(this.tags);
+      this._nodeDataService.vsphere
+        .categoryTags(tagCategory)
+        .pipe(take(1))
+        .subscribe(tags => {
+          this.predefinedTagList = tags.map(t => t.name);
+          this._cdr.detectChanges();
+        });
     } else {
       this.form.get(Controls.Tags).reset();
       this.form.get(Controls.Tags).disable();

modules/web/src/app/wizard/step/provider-settings/provider/extended/vsphere/template.html

@@ -109,15 +109,13 @@
                filterBy="name">
     <div *option="let category">{{category.name}}</div>
   </km-combobox>
-
-  <km-chip-list label="Tags"
-                [tags]="tags"
-                (onChange)="onTagValuesChange($event)"
-                [formControlName]="Controls.Tags"
-                [disabled]="form.get(Controls.Tags).disabled"
-                placeholder="Add tags..."
-                [kmPattern]="tagValuesPattern"
-                [kmPatternError]="tagValuesPatternError"
-                [kmRequired]="!!form.get(Controls.TagCategory).value"
-                fxFlex />
+  <km-chip-autocomplete [formControlName]="Controls.Tags"
+                        label="Tags"
+                        placeholder="Add tags..."
+                        [disabled]="form.get(Controls.Tags).disabled"
+                        [required]="!!form.get(Controls.TagCategory).value"
+                        [patternError]="tagValuesPatternError"
+                        [pattern]="tagValuesPattern"
+                        [tags]="predefinedTagList"
+                        (onChange)="onTagValuesChange($event)" />
 </form>