Show "no results" message for project include and global project select

config/locales/js-en.yml

@@ -1286,6 +1286,7 @@ en:
         include_all_selected: 'Include all sub-projects is currently selected.'
         current_project: 'This is the current project you are in.'
         does_not_match_search: 'Project does not match the search criteria.'
+      no_results: 'No project matches your search criteria.'
 
     forms:
       submit_success_message: 'The form was successfully submitted'

frontend/src/app/shared/components/autocompleter/project-menu-autocomplete/project-menu-autocomplete.component.ts

@@ -116,6 +116,7 @@ export class ProjectMenuAutocompleteComponent {
       select: this.I18n.t('js.label_select_project'),
     },
     search_placeholder: this.I18n.t('js.include_projects.search_placeholder'),
+    no_results: this.I18n.t('js.include_projects.no_results'),
   };
 
   /* This seems like a way too convoluted loading check, but there's a good reason we need it.

frontend/src/app/shared/components/autocompleter/project-menu-autocomplete/project-menu-autocomplete.template.html

@@ -46,15 +46,24 @@
       </spot-text-field>
 
       <ng-container *ngIf="(loading$ | async) === false; else loadingTemplate">
-        <ul
-          op-project-list
-          [projects]="projects$ | async"
-          [searchText]="searchableProjectListService.searchText"
-          [multiSelect]="false"
-          [root]="true"
-          data-list-root="true"
-          data-qa-selector="op-project-menu-autocomplete--list"
-        ></ul>
+        <ng-container *ngIf="(projects$ | async) as projects">
+          <ul
+            *ngIf="projects.length > 0; else noResultsTemplate"
+            op-project-list
+            [projects]="projects"
+            [searchText]="searchableProjectListService.searchText"
+            [multiSelect]="false"
+            [root]="true"
+            data-list-root="true"
+            data-qa-selector="op-project-menu-autocomplete--list"
+          ></ul>
+
+          <ng-template #noResultsTemplate>
+            <span class="op-project-list-modal--no-results">
+              {{text.no_results}}
+            </span>
+          </ng-template>
+        </ng-container>
       </ng-container>
 
       <div class="spot-action-bar">

frontend/src/app/shared/components/project-include/project-include.component.html

@@ -49,18 +49,27 @@
       </spot-text-field>
 
       <ng-container *ngIf="(loading$ | async) === false; else loadingTemplate">
-        <ul
-          class="op-project-include--list"
-          op-project-list
-          [projects]="projects$ | async"
-          [selected]="selectedProjects"
-          [includeSubprojects]="includeSubprojects$ | async"
-          [searchText]="searchableProjectListService.searchText"
-          [root]="true"
-          (update)="selectedProjects = $event"
-          data-qa-selector="project-include-list"
-          data-list-root="true"
-        ></ul>
+        <ng-container *ngIf="(projects$ | async) as projects">
+          <ul
+            *ngIf="projects.length > 0; else noResultsTemplate"
+            class="op-project-include--list"
+            op-project-list
+            [projects]="projects"
+            [selected]="selectedProjects"
+            [includeSubprojects]="includeSubprojects$ | async"
+            [searchText]="searchableProjectListService.searchText"
+            [root]="true"
+            (update)="selectedProjects = $event"
+            data-qa-selector="project-include-list"
+            data-list-root="true"
+          ></ul>
+
+          <ng-template #noResultsTemplate>
+            <span class="op-project-list-modal--no-results">
+              {{text.no_results}}
+            </span>
+          </ng-template>
+        </ng-container>
       </ng-container>
 
       <div class="spot-action-bar">

frontend/src/app/shared/components/project-include/project-include.component.ts

@@ -53,6 +53,7 @@ export class OpProjectIncludeComponent extends UntilDestroyedMixin implements On
     clear_selection: this.I18n.t('js.include_projects.clear_selection'),
     apply: this.I18n.t('js.include_projects.apply'),
     include_subprojects: this.I18n.t('js.include_projects.include_subprojects'),
+    no_results: this.I18n.t('js.include_projects.no_results'),
   };
 
   public opened = false;

frontend/src/global_styles/content/_project_list_modal.sass

@@ -23,3 +23,8 @@
 
   &--loading
     padding: $spot-spacing-1
+
+  &--no-results
+    @include spot-body-small(normal, italic)
+    margin: $spot-spacing-1-5 $spot-spacing-1
+    color: $spot-color-basic-gray-3