no search results state

3 files changed, 18 insertions, 0 deletions

diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
index 42183a04484..1b9bc5d2cff 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
@@ -73,6 +73,9 @@ export default {
     searchPlaceholderText() {
       return s__('ClusterIntegration|Search machine types');
     },
+    noSearchResultsText() {
+      return s__('ClusterIntegration|No machine types matched your search');
+    },
   },
   created() {
     eventHub.$on('zoneSelected', this.fetchMachineTypes);
@@ -135,6 +138,9 @@ export default {
       />
       <div class="dropdown-content">
         <ul>
+          <li v-show="!results.length">
+            <span class="menu-item">{{ noSearchResultsText }}</span>
+          </li>
           <li
             v-for="result in results"
             :key="result.id"
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
index 7319a254e0f..92d69f7288a 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
@@ -57,6 +57,9 @@ export default {
     results() {
       return this.projects.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
     },
+    noSearchResultsText() {
+      return s__('ClusterIntegration|No projects matched your search');
+    },
     toggleText() {
       if (this.isLoading) {
         return s__('ClusterIntegration|Fetching projects');
@@ -155,6 +158,9 @@ export default {
         />
         <div class="dropdown-content">
           <ul>
+            <li v-show="!results.length">
+              <span class="menu-item">{{ noSearchResultsText }}</span>
+            </li>
             <li
               v-for="result in results"
               :key="result.project_number"
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
index 5bb45e8e3b2..b33f8f8f519 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
@@ -67,6 +67,9 @@ export default {
     searchPlaceholderText() {
       return s__('ClusterIntegration|Search zones');
     },
+    noSearchResultsText() {
+      return s__('ClusterIntegration|No zones matched your search');
+    },
   },
   created() {
     eventHub.$on('projectSelected', this.fetchZones);
@@ -120,6 +123,9 @@ export default {
       />
       <div class="dropdown-content">
         <ul>
+          <li v-show="!results.length">
+            <span class="menu-item">{{ noSearchResultsText }}</span>
+          </li>
           <li
             v-for="result in results"
             :key="result.id"