1 files changed, 30 insertions, 59 deletions

diff --git a/app/assets/javascripts/packages/list/components/packages_list_app.vue b/app/assets/javascripts/packages/list/components/packages_list_app.vue
index 2a786b92515..a609dfebedf 100644
--- a/app/assets/javascripts/packages/list/components/packages_list_app.vue
+++ b/app/assets/javascripts/packages/list/components/packages_list_app.vue
@@ -1,39 +1,43 @@
 <script>
+import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
-import { GlEmptyState, GlTab, GlTabs, GlLink, GlSprintf } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
 import createFlash from '~/flash';
 import { historyReplaceState } from '~/lib/utils/common_utils';
+import { s__ } from '~/locale';
 import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants';
-import PackageFilter from './packages_filter.vue';
-import PackageList from './packages_list.vue';
-import PackageSort from './packages_sort.vue';
-import { PACKAGE_REGISTRY_TABS, DELETE_PACKAGE_SUCCESS_MESSAGE } from '../constants';
+import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '../constants';
+import PackageSearch from './package_search.vue';
 import PackageTitle from './package_title.vue';
+import PackageList from './packages_list.vue';
 
 export default {
   components: {
     GlEmptyState,
-    GlTab,
-    GlTabs,
     GlLink,
     GlSprintf,
-    PackageFilter,
     PackageList,
-    PackageSort,
     PackageTitle,
+    PackageSearch,
   },
   computed: {
     ...mapState({
       emptyListIllustration: (state) => state.config.emptyListIllustration,
       emptyListHelpUrl: (state) => state.config.emptyListHelpUrl,
-      filterQuery: (state) => state.filterQuery,
+      filter: (state) => state.filter,
       selectedType: (state) => state.selectedType,
       packageHelpUrl: (state) => state.config.packageHelpUrl,
       packagesCount: (state) => state.pagination?.total,
     }),
-    tabsToRender() {
-      return PACKAGE_REGISTRY_TABS;
+    emptySearch() {
+      return (
+        this.filter.filter((f) => f.type !== 'filtered-search-term' || f.value?.data).length === 0
+      );
+    },
+
+    emptyStateTitle() {
+      return this.emptySearch
+        ? s__('PackageRegistry|There are no packages yet')
+        : s__('PackageRegistry|Sorry, your filter produced no results');
     },
   },
   mounted() {
@@ -48,27 +52,6 @@ export default {
     onPackageDeleteRequest(item) {
       return this.requestDeletePackage(item);
     },
-    tabChanged(index) {
-      const selected = PACKAGE_REGISTRY_TABS[index];
-
-      if (selected !== this.selectedType) {
-        this.setSelectedType(selected);
-        this.requestPackagesList();
-      }
-    },
-    emptyStateTitle({ title, type }) {
-      if (this.filterQuery) {
-        return s__('PackageRegistry|Sorry, your filter produced no results');
-      }
-
-      if (type) {
-        return sprintf(s__('PackageRegistry|There are no %{packageType} packages yet'), {
-          packageType: title,
-        });
-      }
-
-      return s__('PackageRegistry|There are no packages yet');
-    },
     checkDeleteAlert() {
       const urlParams = new URLSearchParams(window.location.search);
       const showAlert = urlParams.get(SHOW_DELETE_SUCCESS_ALERT);
@@ -92,33 +75,21 @@ export default {
 <template>
   <div>
     <package-title :package-help-url="packageHelpUrl" :packages-count="packagesCount" />
+    <package-search @update="requestPackagesList" />
 
-    <gl-tabs @input="tabChanged">
-      <template #tabs-end>
-        <div
-          class="gl-display-flex gl-align-self-center gl-py-2 gl-flex-grow-1 gl-justify-content-end"
-        >
-          <package-filter class="gl-mr-2" @filter="requestPackagesList" />
-          <package-sort @sort:changed="requestPackagesList" />
-        </div>
-      </template>
-
-      <gl-tab v-for="(tab, index) in tabsToRender" :key="index" :title="tab.title">
-        <package-list @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest">
-          <template #empty-state>
-            <gl-empty-state :title="emptyStateTitle(tab)" :svg-path="emptyListIllustration">
-              <template #description>
-                <gl-sprintf v-if="filterQuery" :message="$options.i18n.widenFilters" />
-                <gl-sprintf v-else :message="$options.i18n.noResults">
-                  <template #noPackagesLink="{ content }">
-                    <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link>
-                  </template>
-                </gl-sprintf>
+    <package-list @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest">
+      <template #empty-state>
+        <gl-empty-state :title="emptyStateTitle" :svg-path="emptyListIllustration">
+          <template #description>
+            <gl-sprintf v-if="!emptySearch" :message="$options.i18n.widenFilters" />
+            <gl-sprintf v-else :message="$options.i18n.noResults">
+              <template #noPackagesLink="{ content }">
+                <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link>
               </template>
-            </gl-empty-state>
+            </gl-sprintf>
           </template>
-        </package-list>
-      </gl-tab>
-    </gl-tabs>
+        </gl-empty-state>
+      </template>
+    </package-list>
   </div>
 </template>