Add user hint to save new keyword values

ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.html

@@ -73,6 +73,10 @@
               </span>
                 <span class="m-buttonText-x-text">{{labelFor(r)}}<span class="t-visuallyHidden">, </span></span>
               </button>
+              <!-- Save as new button if not perfect match -->
+              <button class="m-buttonText" type="button" *ngIf="allowSaveNew && !isExactMatchFound()" (click)="selectSearchValue()" [disabled]="false">
+                <span class="m-buttonText-x-icon">Save new: {{ labelFor(searchControlResultValue) }} (Enter)</span>
+              </button>
             </div>
 
             <!-- Empty results -->
@@ -81,6 +85,9 @@
                 <p class="m-selectMenu-x-message">
                   <span class="m-selectMenu-x-messageText">No Results</span>
                 </p>
+                <button class="m-buttonText" type="button" *ngIf="allowSaveNew" (click)="selectSearchValue()" [disabled]="false">
+                  <span class="m-buttonText-x-icon">Save new: {{ labelFor(searchControlResultValue) }} (Enter)</span>
+                </button>
               </div>
             </ng-template>
           </div>

ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.spec.ts

@@ -143,4 +143,13 @@ describe("AbstractFormFieldSearchMultiSelectComponent", () => {
       return true
     })()).toEqual(true)
   })
+
+  it("exact match detection works", () => {
+    component.results = []
+    component.searchControlValue = "abc";
+    expect(component.isExactMatchFound()).toEqual(false)
+
+    component.results = [{value:'abc'}]
+    expect(component.isExactMatchFound()).toEqual(true)
+  })
 })

ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.ts

@@ -27,6 +27,11 @@ export abstract class AbstractFormFieldSearchMultiSelect<TValue>
     return false
   }
 
+  isExactMatchFound(): boolean {
+    if (!this.searchControlResultValue) return false
+    return !!(this.results?.find((r: TValue) => this.areSearchResultsEqual(r, this.searchControlResultValue as TValue)))
+  }
+
   selectResult(result: TValue): void {
     if (this.isSearchResultType(result) && !this.isResultSelected(result)){
       let selected: TValue[] = this.controlValue ?? []

ui/src/app/form/form-field-search-select/abstract-form-field-search-select.component.ts

@@ -13,6 +13,7 @@ export abstract class AbstractFormFieldSearchSelect<TSearch, TValue>
   extends AbstractFormField<TValue|null> implements OnInit, OnDestroy {
 
   @Input() createNonExisting = false
+  @Input() allowSaveNew: boolean = false
 
   searchControl: FormControl = new FormControl("")
 
@@ -59,6 +60,11 @@ export abstract class AbstractFormFieldSearchSelect<TSearch, TValue>
     return this.searchControlValue.length <= 0
   }
 
+  isExactMatchFound(): boolean {
+    if (!this.searchControlResultValue) return false
+    return !!(this.results?.find((r: TSearch) => this.areSearchResultsEqual(r, this.searchControlResultValue as TSearch)))
+  }
+
   get searchControlValue(): string {
     return this.searchControl.value?.trim() ?? ""
   }
@@ -73,7 +79,7 @@ export abstract class AbstractFormFieldSearchSelect<TSearch, TValue>
     const searchResult = this.searchResultFromString(this.searchControlValue)
 
     if (searchResult) {
-      const existingResult =this.results?.find((r: TSearch) => this.areSearchResultsEqual(r, searchResult))
+      const existingResult = this.results?.find((r: TSearch) => this.areSearchResultsEqual(r, searchResult))
       return existingResult ?? (this.createNonExisting) ? searchResult : undefined
     }
 

ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.html

@@ -57,6 +57,9 @@
               <button class="m-buttonText" *ngFor="let r of results" type="button" (click)="onSearchResultClicked(r)">
                 <span class="m-buttonText-x-text">{{labelFor(r)}}</span>
               </button>
+              <button class="m-buttonText" type="button" *ngIf="allowSaveNew && !isExactMatchFound()" (click)="selectSearchValue()" [disabled]="false">
+                <span class="m-buttonText-x-icon">Save new: {{ labelFor(searchControlResultValue) }} (Enter)</span>
+              </button>
             </div>
 
             <!-- Empty results -->
@@ -65,6 +68,9 @@
                 <p class="m-selectMenu-x-message">
                   <span class="m-selectMenu-x-messageText">No Results</span>
                 </p>
+                <button class="m-buttonText" type="button" *ngIf="allowSaveNew" (click)="selectSearchValue()" [disabled]="false">
+                  <span class="m-buttonText-x-icon">Save new: {{ labelFor(searchControlResultValue) }} (Enter)</span>
+                </button>
               </div>
             </ng-template>
           </div>

ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.spec.ts

@@ -129,4 +129,13 @@ describe("AbstractFormFieldSearchSingleSelectComponent", () => {
       return true
     })()).toEqual(true)
   })
+
+  it("exact match detection works", () => {
+    component.results = []
+    component.searchControlValue = "abc";
+    expect(component.isExactMatchFound()).toEqual(false)
+
+    component.results = [{value:'abc'}]
+    expect(component.isExactMatchFound()).toEqual(true)
+  })
 })

ui/src/app/richskill/form/rich-skill-form.component.html

@@ -42,6 +42,7 @@ <h3 class="m-iconTitle">
                 [errorMessage]="authorErrorMessage"
                 [keywordType]="keywordType.Author"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>
 
@@ -74,6 +75,7 @@ <h3 class="m-iconTitle">
                 helpMessage="Industry-recognized, general terms that represents a broad group of related RSDs."
                 [keywordType]="keywordType.Category"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>
 
@@ -87,6 +89,7 @@ <h3 class="m-iconTitle">
                 errorMessage="Keywords are required"
                 [keywordType]="keywordType.Keyword"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>
 
@@ -99,6 +102,7 @@ <h3 class="m-iconTitle">
                 helpMessage="Names of professional standards that define skill mastery, sourced from industry-recognized frameworks."
                 [keywordType]="keywordType.Standard"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>
 
@@ -111,6 +115,7 @@ <h3 class="m-iconTitle">
                 helpMessage="Related academic and professional certifications that support career advancement."
                 [keywordType]="keywordType.Certification"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>
 
@@ -133,6 +138,7 @@ <h3 class="m-iconTitle">
                 helpMessage="Employers who require this skill for a given job. Employers are not visible in the public view of an RSD."
                 [keywordType]="keywordType.Employer"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>