UI: Add no text for resources autocomplete

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

@@ -41,8 +41,17 @@
     <mat-option *ngFor="let resource of filteredResources$ | async" [value]="resource">
       <span [innerHTML]="resource.title | highlight:searchText"></span>
     </mat-option>
-    <mat-option *ngIf="!(filteredResources$ | async)?.length" [value]="searchText">
-      {{ searchText }}
+    <mat-option *ngIf="!(filteredResources$ | async)?.length" [value]="null">
+      <div (click)="$event.stopPropagation()">
+        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
+          <span>{{ 'js-func.no-js-module-text' | translate }}</span>
+        </div>
+        <ng-template #searchNotEmpty>
+          <span>
+              {{ translate.get('js-func.no-js-module-matching', {module: searchText}) | async }}
+          </span>
+        </ng-template>
+      </div>
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>

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

@@ -33,6 +33,7 @@ import { TbResourceId } from '@shared/models/id/tb-resource-id';
 import { ResourceService } from '@core/http/resource.service';
 import { PageLink } from '@shared/models/page/page-link';
 import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'tb-resource-autocomplete',
@@ -95,7 +96,8 @@ export class ResourceAutocompleteComponent implements ControlValueAccessor, OnIn
   private propagateChange: (value: any) => void = () => {};
 
   constructor(private fb: FormBuilder,
-              private resourceService: ResourceService) {
+              private resourceService: ResourceService,
+              public translate: TranslateService) {
   }
 
   ngOnInit(): void {
@@ -210,6 +212,10 @@ export class ResourceAutocompleteComponent implements ControlValueAccessor, OnIn
     }
   }
 
+  textIsNotEmpty(text: string): boolean {
+    return (text && text.length > 0);
+  }
+
   private fetchResources(searchText?: string): Observable<Array<ResourceInfo>> {
     this.searchText = searchText;
     return this.resourceService.getResources(new PageLink(50, 0, searchText), ResourceType.JS_MODULE, this.subType, {ignoreLoading: true}).pipe(

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3332,7 +3332,9 @@
         "module-no-members": "Module has no exported members",
         "module-load-error": "Module load error",
         "source-code": "Source code",
-        "source-code-load-error": "Source code load error"
+        "source-code-load-error": "Source code load error",
+        "no-js-module-text": "No JS module found",
+        "no-js-module-matching": "No JS module matching '{{module}}' were found."
     },
     "key-val": {
         "key": "Key",