1 files changed, 24 insertions, 7 deletions
diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index 36a04d4202f..75a2bf34887 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -1,26 +1,36 @@
 <script>
 import tablePagination from '~/vue_shared/components/table_pagination.vue';
 import eventHub from '../event_hub';
+import { getParameterByName } from '../../lib/utils/common_utils';
 
 export default {
+  components: {
+    tablePagination,
+  },
   props: {
     groups: {
-      type: Object,
+      type: Array,
       required: true,
     },
     pageInfo: {
       type: Object,
       required: true,
     },
-  },
-  components: {
-    tablePagination,
+    searchEmpty: {
+      type: Boolean,
+      required: true,
+    },
+    searchEmptyMessage: {
+      type: String,
+      required: true,
+    },
   },
   methods: {
     change(page) {
-      const filterGroupsParam = gl.utils.getParameterByName('filter_groups');
-      const sortParam = gl.utils.getParameterByName('sort');
-      eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam);
+      const filterGroupsParam = getParameterByName('filter_groups');
+      const sortParam = getParameterByName('sort');
+      const archivedParam = getParameterByName('archived');
+      eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam, archivedParam);
     },
   },
 };
@@ -28,10 +38,17 @@ export default {
 
 <template>
   <div class="groups-list-tree-container">
+    <div
+      v-if="searchEmpty"
+      class="has-no-search-results">
+      {{searchEmptyMessage}}
+    </div>
     <group-folder
+      v-if="!searchEmpty"
       :groups="groups"
     />
     <table-pagination
+      v-if="!searchEmpty"
       :change="change"
       :pageInfo="pageInfo"
     />