1 files changed, 20 insertions, 59 deletions

diff --git a/app/assets/javascripts/ml/model_registry/components/candidate_list.vue b/app/assets/javascripts/ml/model_registry/components/candidate_list.vue
index fc24a538293..fca4462d7d2 100644
--- a/app/assets/javascripts/ml/model_registry/components/candidate_list.vue
+++ b/app/assets/javascripts/ml/model_registry/components/candidate_list.vue
@@ -1,22 +1,17 @@
 <script>
-import { GlAlert } from '@gitlab/ui';
-import { n__ } from '~/locale';
-import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
-import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
-import CandidateListRow from '~/ml/model_registry/components/candidate_list_row.vue';
 import { makeLoadCandidatesErrorMessage, NO_CANDIDATES_LABEL } from '../translations';
 import getModelCandidatesQuery from '../graphql/queries/get_model_candidates.query.graphql';
 import { GRAPHQL_PAGE_SIZE } from '../constants';
+import SearchableList from './searchable_list.vue';
+import CandidateListRow from './candidate_list_row.vue';
 
 export default {
   name: 'MlCandidateList',
   components: {
-    GlAlert,
     CandidateListRow,
-    PackagesListLoader,
-    RegistryList,
+    SearchableList,
   },
   props: {
     modelId: {
@@ -26,7 +21,7 @@ export default {
   },
   data() {
     return {
-      modelVersions: {},
+      candidates: {},
       errorMessage: undefined,
     };
   },
@@ -49,18 +44,12 @@ export default {
     gid() {
       return convertToGraphQLId('Ml::Model', this.modelId);
     },
-    isListEmpty() {
-      return this.count === 0;
-    },
     isLoading() {
       return this.$apollo.queries.candidates.loading;
     },
     pageInfo() {
       return this.candidates?.pageInfo ?? {};
     },
-    listTitle() {
-      return n__('%d candidate', '%d candidates', this.count);
-    },
     queryVariables() {
       return {
         id: this.gid,
@@ -70,18 +59,12 @@ export default {
     items() {
       return this.candidates?.nodes ?? [];
     },
-    count() {
-      return this.candidates?.count ?? 0;
-    },
   },
   methods: {
-    fetchPage({ first = null, last = null, before = null, after = null } = {}) {
+    fetchPage(newPageInfo) {
       const variables = {
         ...this.queryVariables,
-        first,
-        last,
-        before,
-        after,
+        ...newPageInfo,
       };
 
       this.$apollo.queries.candidates.fetchMore({
@@ -91,18 +74,6 @@ export default {
         },
       });
     },
-    fetchPreviousCandidatesPage() {
-      this.fetchPage({
-        last: GRAPHQL_PAGE_SIZE,
-        before: this.pageInfo?.startCursor,
-      });
-    },
-    fetchNextCandidatesPage() {
-      this.fetchPage({
-        first: GRAPHQL_PAGE_SIZE,
-        after: this.pageInfo?.endCursor,
-      });
-    },
   },
   i18n: {
     NO_CANDIDATES_LABEL,
@@ -111,29 +82,19 @@ export default {
 </script>
 <template>
   <div>
-    <div v-if="isLoading">
-      <packages-list-loader />
-    </div>
-    <gl-alert v-else-if="errorMessage" variant="danger" :dismissible="false">{{
-      errorMessage
-    }}</gl-alert>
-    <div v-else-if="isListEmpty" class="gl-text-secondary">
-      {{ $options.i18n.NO_CANDIDATES_LABEL }}
-    </div>
-    <div v-else>
-      <registry-list
-        :hidden-delete="true"
-        :is-loading="isLoading"
-        :items="items"
-        :pagination="pageInfo"
-        :title="listTitle"
-        @prev-page="fetchPreviousCandidatesPage"
-        @next-page="fetchNextCandidatesPage"
-      >
-        <template #default="{ item }">
-          <candidate-list-row :candidate="item" />
-        </template>
-      </registry-list>
-    </div>
+    <searchable-list
+      :page-info="pageInfo"
+      :items="items"
+      :error-message="errorMessage"
+      @fetch-page="fetchPage"
+    >
+      <template #empty-state>
+        {{ $options.i18n.NO_CANDIDATES_LABEL }}
+      </template>
+
+      <template #item="{ item }">
+        <candidate-list-row :candidate="item" />
+      </template>
+    </searchable-list>
   </div>
 </template>