Show different text when there are no results compared to when the user has not started typing yet (#10529)

frontend/src/app/features/team-planner/team-planner/add-work-packages/add-existing-pane.component.html

@@ -41,9 +41,11 @@
       class="op-add-existing-pane--empty-state"
       data-qa-selector="op-add-existing-pane--empty-state"
     >
-      <img [src]="image.empty_state" class="op-add-existing-pane--empty-state-image"/>
+      <img
+        *ngIf="searchStringEmpty()"
+        [src]="image.empty_state" class="op-add-existing-pane--empty-state-image"/>
       <span
-        [innerHTML]="text.empty_state"
+        [innerHTML]="noResultsText()"
         class="op-add-existing-pane--empty-state-text"
       ></span>
     </div>

frontend/src/app/features/team-planner/team-planner/add-work-packages/add-existing-pane.component.ts

@@ -88,6 +88,7 @@ export class AddExistingPaneComponent extends UntilDestroyedMixin implements OnI
   text = {
     empty_state: this.I18n.t('js.team_planner.quick_add.empty_state'),
     placeholder: this.I18n.t('js.team_planner.quick_add.search_placeholder'),
+    no_results: this.I18n.t('js.autocompleter.notFoundText'),
   };
 
   image = {
@@ -202,6 +203,14 @@ export class AddExistingPaneComponent extends UntilDestroyedMixin implements OnI
     );
   }
 
+  searchStringEmpty():boolean {
+    return this.searchString$.getValue().length === 0;
+  }
+
+  noResultsText():string {
+    return this.searchStringEmpty() ? this.text.empty_state : this.text.no_results;
+  }
+
   private addExistingFilters(filters:ApiV3FilterBuilder) {
     const query = this.querySpace.query.value;
     if (query?.filters) {