Add latest changes from gitlab-org/gitlab@master

5 files changed, 87 insertions, 23 deletions

diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue
index af6bd7079ba..8b3d781b2df 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue
@@ -1,12 +1,19 @@
 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { first } from 'lodash';
+import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { s__, n__ } from '~/locale';
 import { HISTORY_PIPELINES_LIMIT } from '~/packages_and_registries/shared/constants';
 import HistoryItem from '~/vue_shared/components/registry/history_item.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import {
+  GRAPHQL_PACKAGE_PIPELINES_PAGE_SIZE,
+  FETCH_PACKAGE_PIPELINES_ERROR_MESSAGE,
+} from '../../constants';
+import getPackagePipelinesQuery from '../../graphql/queries/get_package_pipelines.query.graphql';
+import PackageHistoryLoader from './package_history_loader.vue';
 
 export default {
   name: 'PackageHistory',
@@ -25,6 +32,7 @@ export default {
     GlLink,
     GlSprintf,
     HistoryItem,
+    PackageHistoryLoader,
     TimeAgoTooltip,
   },
   props: {
@@ -37,15 +45,27 @@ export default {
       required: true,
     },
   },
+  apollo: {
+    pipelines: {
+      query: getPackagePipelinesQuery,
+      variables() {
+        return this.queryVariables;
+      },
+      update(data) {
+        return data.package?.pipelines?.nodes || [];
+      },
+      error() {
+        createFlash({ message: FETCH_PACKAGE_PIPELINES_ERROR_MESSAGE });
+      },
+    },
+  },
   data() {
     return {
+      pipelines: [],
       showDescription: false,
     };
   },
   computed: {
-    pipelines() {
-      return this.packageEntity?.pipelines?.nodes || [];
-    },
     firstPipeline() {
       return first(this.pipelines);
     },
@@ -65,6 +85,15 @@ export default {
         this.archivedLines,
       );
     },
+    isLoading() {
+      return this.$apollo.queries.pipelines.loading;
+    },
+    queryVariables() {
+      return {
+        id: this.packageEntity.id,
+        first: GRAPHQL_PACKAGE_PIPELINES_PAGE_SIZE,
+      };
+    },
   },
   methods: {
     truncate(value) {
@@ -80,7 +109,8 @@ export default {
 <template>
   <div class="issuable-discussion">
     <h3 class="gl-font-lg" data-testid="title">{{ __('History') }}</h3>
-    <ul class="timeline main-notes-list notes gl-mb-4" data-testid="timeline">
+    <package-history-loader v-if="isLoading" />
+    <ul v-else class="timeline main-notes-list notes gl-mb-4" data-testid="timeline">
       <history-item icon="clock" data-testid="created-on">
         <gl-sprintf :message="$options.i18n.createdOn">
           <template #name>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history_loader.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history_loader.vue
new file mode 100644
index 00000000000..950971c2f11
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history_loader.vue
@@ -0,0 +1,24 @@
+<script>
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlSkeletonLoader,
+  },
+  loader: {
+    width: 580,
+    height: 80,
+  },
+};
+</script>
+
+<template>
+  <div class="gl-ml-5 gl-md-max-w-70p">
+    <gl-skeleton-loader :width="$options.loader.width" :height="$options.loader.height">
+      <rect x="49" y="9" width="531" height="16" rx="4" />
+      <circle cx="16" cy="16" r="16" />
+      <rect x="49" y="57" width="302" height="16" rx="4" />
+      <circle cx="16" cy="64" r="16" />
+    </gl-skeleton-loader>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/constants.js b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
index c4d331fa384..65930d94f3e 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
@@ -72,6 +72,9 @@ export const DELETE_PACKAGE_FILE_SUCCESS_MESSAGE = s__(
 export const FETCH_PACKAGE_DETAILS_ERROR_MESSAGE = s__(
   'PackageRegistry|Failed to load the package data',
 );
+export const FETCH_PACKAGE_PIPELINES_ERROR_MESSAGE = s__(
+  'PackageRegistry|Something went wrong while fetching the package history.',
+);
 
 export const DELETE_PACKAGE_SUCCESS_MESSAGE = s__('PackageRegistry|Package deleted successfully');
 export const PACKAGE_REGISTRY_TITLE = __('Package Registry');
@@ -149,3 +152,5 @@ export const CONAN_HELP_PATH = helpPagePath('user/packages/conan_repository/inde
 export const NUGET_HELP_PATH = helpPagePath('user/packages/nuget_repository/index');
 export const PYPI_HELP_PATH = helpPagePath('user/packages/pypi_repository/index');
 export const COMPOSER_HELP_PATH = helpPagePath('user/packages/composer_repository/index');
+
+export const GRAPHQL_PACKAGE_PIPELINES_PAGE_SIZE = 10;
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
index 41b0c285fff..651bd2b4d63 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
+++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
@@ -27,25 +27,6 @@ query getPackageDetails($id: PackagesPackageID!) {
         name
       }
     }
-    pipelines(first: 10) {
-      nodes {
-        ref
-        id
-        sha
-        createdAt
-        commitPath
-        path
-        user {
-          id
-          name
-        }
-        project {
-          id
-          name
-          webUrl
-        }
-      }
-    }
     packageFiles(first: 100) {
       nodes {
         id
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_pipelines.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_pipelines.query.graphql
new file mode 100644
index 00000000000..86e67320d63
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_pipelines.query.graphql
@@ -0,0 +1,24 @@
+query getPackagePipelines($id: PackagesPackageID!, $first: Int) {
+  package(id: $id) {
+    id
+    pipelines(first: $first) {
+      nodes {
+        ref
+        id
+        sha
+        createdAt
+        commitPath
+        path
+        user {
+          id
+          name
+        }
+        project {
+          id
+          name
+          webUrl
+        }
+      }
+    }
+  }
+}