Add latest changes from gitlab-org/gitlab@master

3 files changed, 117 insertions, 117 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>
diff --git a/app/assets/javascripts/ml/model_registry/components/model_version_list.vue b/app/assets/javascripts/ml/model_registry/components/model_version_list.vue
index 6b44cb2f613..5a649a9596a 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_version_list.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_version_list.vue
@@ -1,23 +1,18 @@
 <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 { makeLoadVersionsErrorMessage } from '~/ml/model_registry/translations';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import getModelVersionsQuery from '../graphql/queries/get_model_versions.query.graphql';
 import { GRAPHQL_PAGE_SIZE, MODEL_ENTITIES } from '../constants';
+import SearchableList from './searchable_list.vue';
 import EmptyState from './empty_state.vue';
 import ModelVersionRow from './model_version_row.vue';
 
 export default {
   components: {
     EmptyState,
-    GlAlert,
     ModelVersionRow,
-    PackagesListLoader,
-    RegistryList,
+    SearchableList,
   },
   props: {
     modelId: {
@@ -50,18 +45,12 @@ export default {
     gid() {
       return convertToGraphQLId('Ml::Model', this.modelId);
     },
-    isListEmpty() {
-      return this.count === 0;
-    },
     isLoading() {
       return this.$apollo.queries.modelVersions.loading;
     },
     pageInfo() {
       return this.modelVersions?.pageInfo ?? {};
     },
-    listTitle() {
-      return n__('%d version', '%d versions', this.versions.length);
-    },
     queryVariables() {
       return {
         id: this.gid,
@@ -71,31 +60,12 @@ export default {
     versions() {
       return this.modelVersions?.nodes ?? [];
     },
-    count() {
-      return this.modelVersions?.count ?? 0;
-    },
   },
   methods: {
-    fetchPreviousVersionsPage() {
+    fetchPage(pageInfo) {
       const variables = {
         ...this.queryVariables,
-        first: null,
-        last: GRAPHQL_PAGE_SIZE,
-        before: this.pageInfo?.startCursor,
-      };
-      this.$apollo.queries.modelVersions.fetchMore({
-        variables,
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          return fetchMoreResult;
-        },
-      });
-    },
-    fetchNextVersionsPage() {
-      const variables = {
-        ...this.queryVariables,
-        first: GRAPHQL_PAGE_SIZE,
-        last: null,
-        after: this.pageInfo?.endCursor,
+        ...pageInfo,
       };
 
       this.$apollo.queries.modelVersions.fetchMore({
@@ -110,28 +80,18 @@ 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>
-    <empty-state v-else-if="isListEmpty" :entity-type="$options.modelVersionEntity" />
-    <div v-else>
-      <registry-list
-        :hidden-delete="true"
-        :is-loading="isLoading"
-        :items="versions"
-        :pagination="pageInfo"
-        :title="listTitle"
-        @prev-page="fetchPreviousVersionsPage"
-        @next-page="fetchNextVersionsPage"
-      >
-        <template #default="{ item }">
-          <model-version-row :model-version="item" />
-        </template>
-      </registry-list>
-    </div>
-  </div>
+  <searchable-list
+    :page-info="pageInfo"
+    :items="versions"
+    :error-message="errorMessage"
+    @fetch-page="fetchPage"
+  >
+    <template #empty-state>
+      <empty-state :entity-type="$options.modelVersionEntity" />
+    </template>
+
+    <template #item="{ item }">
+      <model-version-row :model-version="item" />
+    </template>
+  </searchable-list>
 </template>
diff --git a/app/assets/javascripts/ml/model_registry/components/searchable_list.vue b/app/assets/javascripts/ml/model_registry/components/searchable_list.vue
new file mode 100644
index 00000000000..05062ae6fbf
--- /dev/null
+++ b/app/assets/javascripts/ml/model_registry/components/searchable_list.vue
@@ -0,0 +1,79 @@
+<script>
+import { GlAlert } from '@gitlab/ui';
+import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
+import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
+import { GRAPHQL_PAGE_SIZE } from '~/ml/model_registry/constants';
+
+export default {
+  name: 'SearchableList',
+  components: { PackagesListLoader, RegistryList, GlAlert },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    isListEmpty() {
+      return this.items.length === 0;
+    },
+  },
+  methods: {
+    prevPage() {
+      const pageInfo = {
+        first: null,
+        last: GRAPHQL_PAGE_SIZE,
+        before: this.pageInfo.startCursor,
+      };
+
+      this.$emit('fetch-page', pageInfo);
+    },
+    nextPage() {
+      const pageInfo = {
+        first: GRAPHQL_PAGE_SIZE,
+        last: null,
+        after: this.pageInfo.endCursor,
+      };
+
+      this.$emit('fetch-page', pageInfo);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <packages-list-loader v-if="isLoading" />
+    <gl-alert v-else-if="errorMessage" variant="danger" :dismissible="false">
+      {{ errorMessage }}
+    </gl-alert>
+    <slot v-else-if="isListEmpty" name="empty-state"></slot>
+    <registry-list
+      v-else
+      :hidden-delete="true"
+      :is-loading="isLoading"
+      :items="items"
+      :pagination="pageInfo"
+      @prev-page="prevPage"
+      @next-page="nextPage"
+    >
+      <template #default="{ item }">
+        <slot name="item" :item="item"></slot>
+      </template>
+    </registry-list>
+  </div>
+</template>