Add latest changes from gitlab-org/gitlab@master

4 files changed, 23 insertions, 24 deletions

diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index d74cb2d8175..15f5a3518a5 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -51,7 +51,6 @@ export default {
       isModalVisible: false,
       isLoading: true,
       isSearchEmpty: false,
-      searchEmptyMessage: '',
       targetGroup: null,
       targetParentGroup: null,
       showEmptyState: false,
@@ -88,10 +87,6 @@ export default {
     },
   },
   created() {
-    this.searchEmptyMessage = this.hideProjects
-      ? COMMON_STR.GROUP_SEARCH_EMPTY
-      : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
-
     eventHub.$on(`${this.action}fetchPage`, this.fetchPage);
     eventHub.$on(`${this.action}toggleChildren`, this.toggleChildren);
     eventHub.$on(`${this.action}showLeaveGroupModal`, this.showLeaveGroupModal);
@@ -259,7 +254,7 @@ export default {
       const hasGroups = groups && groups.length > 0;
 
       if (this.renderEmptyState) {
-        this.isSearchEmpty = this.filterGroupsBy !== null && !hasGroups;
+        this.isSearchEmpty = fromSearch && !hasGroups;
       } else {
         this.isSearchEmpty = !hasGroups;
       }
@@ -294,7 +289,6 @@ export default {
       v-else
       :groups="groups"
       :search-empty="isSearchEmpty"
-      :search-empty-message="searchEmptyMessage"
       :page-info="pageInfo"
       :action="action"
     />
diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index 3a05c308a2a..43aa0753082 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -1,11 +1,18 @@
 <script>
+import { GlEmptyState } from '@gitlab/ui';
 import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
 import { getParameterByName } from '~/lib/utils/url_utility';
+import { __ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
+  i18n: {
+    emptyStateTitle: __('No results found'),
+    emptyStateDescription: __('Edit your search and try again'),
+  },
   components: {
     PaginationLinks,
+    GlEmptyState,
   },
   props: {
     groups: {
@@ -20,10 +27,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    searchEmptyMessage: {
-      type: String,
-      required: true,
-    },
     action: {
       type: String,
       required: false,
@@ -43,12 +46,11 @@ export default {
 
 <template>
   <div class="groups-list-tree-container" data-qa-selector="groups_list_tree_container">
-    <div
+    <gl-empty-state
       v-if="searchEmpty"
-      class="has-no-search-results gl-font-style-italic gl-text-center gl-text-gray-600 gl-p-5"
-    >
-      {{ searchEmptyMessage }}
-    </div>
+      :title="$options.i18n.emptyStateTitle"
+      :description="$options.i18n.emptyStateDescription"
+    />
     <template v-else>
       <group-folder :groups="groups" :action="action" />
       <pagination-links
diff --git a/app/assets/javascripts/groups/components/overview_tabs.vue b/app/assets/javascripts/groups/components/overview_tabs.vue
index 15a0c686548..d0c5846ac88 100644
--- a/app/assets/javascripts/groups/components/overview_tabs.vue
+++ b/app/assets/javascripts/groups/components/overview_tabs.vue
@@ -2,6 +2,7 @@
 import { GlTabs, GlTab, GlSearchBoxByType, GlSorting, GlSortingItem } from '@gitlab/ui';
 import { isString, debounce } from 'lodash';
 import { __ } from '~/locale';
+import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants';
 import GroupsStore from '../store/groups_store';
 import GroupsService from '../service/groups_service';
 import {
@@ -61,11 +62,6 @@ export default {
       return this.isAscending ? this.sort.asc : this.sort.desc;
     },
   },
-  watch: {
-    search: debounce(async function debouncedSearch() {
-      this.handleSearchOrSortChange();
-    }, 250),
-  },
   mounted() {
     this.search = this.$route.query?.filter || '';
 
@@ -137,6 +133,14 @@ export default {
 
       this.handleSearchOrSortChange();
     },
+    handleSearchInput(value) {
+      this.search = value;
+
+      this.debouncedSearch();
+    },
+    debouncedSearch: debounce(async function debouncedSearch() {
+      this.handleSearchOrSortChange();
+    }, DEBOUNCE_DELAY),
   },
   i18n: {
     [ACTIVE_TAB_SUBGROUPS_AND_PROJECTS]: __('Subgroups and projects'),
@@ -169,9 +173,10 @@ export default {
         <div class="gl-lg-display-flex gl-justify-content-end gl-mx-n2 gl-my-n2">
           <div class="gl-p-2 gl-lg-form-input-md gl-w-full">
             <gl-search-box-by-type
-              v-model="search"
+              :value="search"
               :placeholder="$options.i18n.searchPlaceholder"
               data-qa-selector="groups_filter_field"
+              @input="handleSearchInput"
             />
           </div>
           <div class="gl-p-2 gl-w-full gl-lg-w-auto">
diff --git a/app/assets/javascripts/groups/constants.js b/app/assets/javascripts/groups/constants.js
index 33bfcade336..6fb12cd6270 100644
--- a/app/assets/javascripts/groups/constants.js
+++ b/app/assets/javascripts/groups/constants.js
@@ -24,8 +24,6 @@ export const COMMON_STR = {
   EDIT_BTN_TITLE: s__('GroupsTree|Edit'),
   REMOVE_BTN_TITLE: s__('GroupsTree|Delete'),
   OPTIONS_DROPDOWN_TITLE: s__('GroupsTree|Options'),
-  GROUP_SEARCH_EMPTY: s__('GroupsTree|No groups matched your search'),
-  GROUP_PROJECT_SEARCH_EMPTY: s__('GroupsTree|No groups or projects matched your search'),
 };
 
 export const ITEM_TYPE = {