Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

10 files changed, 191 insertions, 38 deletions

diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue
index 74c0cb44c51..a3bbd569f41 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue
@@ -1,30 +1,68 @@
 <script>
+import { GlAlert } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
+import { s__ } from '~/locale';
 import Composer from '~/packages_and_registries/package_registry/components/details/metadata/composer.vue';
 import Conan from '~/packages_and_registries/package_registry/components/details/metadata/conan.vue';
 import Maven from '~/packages_and_registries/package_registry/components/details/metadata/maven.vue';
 import Nuget from '~/packages_and_registries/package_registry/components/details/metadata/nuget.vue';
 import Pypi from '~/packages_and_registries/package_registry/components/details/metadata/pypi.vue';
 import {
+  FETCH_PACKAGE_METADATA_ERROR_MESSAGE,
   PACKAGE_TYPE_COMPOSER,
   PACKAGE_TYPE_CONAN,
   PACKAGE_TYPE_MAVEN,
   PACKAGE_TYPE_NUGET,
   PACKAGE_TYPE_PYPI,
 } from '~/packages_and_registries/package_registry/constants';
+import getPackageMetadataQuery from '../../graphql/queries/get_package_metadata.query.graphql';
+import AdditionalMetadataLoader from './additional_metadata_loader.vue';
 
 export default {
   components: {
     Composer,
     Conan,
+    GlAlert,
     Maven,
     Nuget,
     Pypi,
+    AdditionalMetadataLoader,
   },
   props: {
-    packageEntity: {
-      type: Object,
+    packageId: {
+      type: String,
       required: true,
     },
+    packageType: {
+      type: String,
+      required: true,
+    },
+  },
+  apollo: {
+    packageMetadata: {
+      query: getPackageMetadataQuery,
+      context: {
+        isSingleRequest: true,
+      },
+      variables() {
+        return {
+          id: this.packageId,
+        };
+      },
+      update(data) {
+        return data.package?.metadata || null;
+      },
+      error(error) {
+        this.fetchPackageMetadataError = true;
+        Sentry.captureException(error);
+      },
+    },
+  },
+  data() {
+    return {
+      packageMetadata: null,
+      fetchPackageMetadataError: false,
+    };
   },
   computed: {
     metadataComponent() {
@@ -34,22 +72,43 @@ export default {
         [PACKAGE_TYPE_MAVEN]: Maven,
         [PACKAGE_TYPE_NUGET]: Nuget,
         [PACKAGE_TYPE_PYPI]: Pypi,
-      }[this.packageEntity.packageType];
+      }[this.packageType];
     },
     showMetadata() {
-      return this.metadataComponent && this.packageEntity.metadata;
+      return this.metadataComponent && this.packageMetadata;
+    },
+    isLoading() {
+      return this.$apollo.queries.packageMetadata.loading;
     },
   },
+  i18n: {
+    componentTitle: s__('PackageRegistry|Additional metadata'),
+    fetchPackageMetadataErrorMessage: FETCH_PACKAGE_METADATA_ERROR_MESSAGE,
+  },
 };
 </script>
 
 <template>
-  <div v-if="showMetadata">
-    <h3 class="gl-font-lg" data-testid="title">{{ __('Additional Metadata') }}</h3>
-    <div class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base" data-testid="main">
+  <div>
+    <h3 v-if="isLoading || showMetadata" class="gl-font-lg" data-testid="title">
+      {{ $options.i18n.componentTitle }}
+    </h3>
+    <gl-alert
+      v-if="fetchPackageMetadataError"
+      variant="danger"
+      @dismiss="fetchPackageMetadataError = false"
+    >
+      {{ $options.i18n.fetchPackageMetadataErrorMessage }}
+    </gl-alert>
+    <additional-metadata-loader v-if="isLoading" />
+    <div
+      v-if="showMetadata"
+      class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base"
+      data-testid="main"
+    >
       <component
         :is="metadataComponent"
-        :package-entity="packageEntity"
+        :package-metadata="packageMetadata"
         data-testid="component-is"
       />
     </div>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata_loader.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata_loader.vue
new file mode 100644
index 00000000000..628cf441831
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata_loader.vue
@@ -0,0 +1,30 @@
+<script>
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlSkeletonLoader,
+  },
+  loader: {
+    width: 302,
+    height: 16,
+    repeat: 2,
+  },
+};
+</script>
+
+<template>
+  <div class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base">
+    <div
+      v-for="index in $options.loader.repeat"
+      :key="index"
+      class="gl-display-flex gl-align-items-center gl-p-4 gl-border-gray-100 gl-border-b-1"
+    >
+      <div class="gl-md-max-w-30p">
+        <gl-skeleton-loader :width="$options.loader.width" :height="$options.loader.height">
+          <rect :width="$options.loader.width" :height="$options.loader.height" rx="4" />
+        </gl-skeleton-loader>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue
index b6a36a0b00f..e3edaa3e45e 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue
@@ -18,7 +18,7 @@ export default {
     ClipboardButton,
   },
   props: {
-    packageEntity: {
+    packageMetadata: {
       type: Object,
       required: true,
     },
@@ -31,10 +31,10 @@ export default {
     <details-row icon="information-o" padding="gl-p-4" dashed data-testid="composer-target-sha">
       <gl-sprintf :message="$options.i18n.targetSha">
         <template #sha>
-          <strong>{{ packageEntity.metadata.targetSha }}</strong>
+          <strong>{{ packageMetadata.targetSha }}</strong>
           <clipboard-button
             :title="$options.i18n.targetShaCopyButton"
-            :text="packageEntity.metadata.targetSha"
+            :text="packageMetadata.targetSha"
             category="tertiary"
             css-class="gl-p-0!"
           />
@@ -44,10 +44,10 @@ export default {
     <details-row icon="information-o" padding="gl-p-4" data-testid="composer-json">
       <gl-sprintf :message="$options.i18n.composerJson">
         <template #license>
-          <strong>{{ packageEntity.metadata.composerJson.license }}</strong>
+          <strong>{{ packageMetadata.composerJson.license }}</strong>
         </template>
         <template #version>
-          <strong>{{ packageEntity.metadata.composerJson.version }}</strong>
+          <strong>{{ packageMetadata.composerJson.version }}</strong>
         </template>
       </gl-sprintf>
     </details-row>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue
index 10797d74acf..de7c1bc4cd3 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue
@@ -13,7 +13,7 @@ export default {
     GlSprintf,
   },
   props: {
-    packageEntity: {
+    packageMetadata: {
       type: Object,
       required: true,
     },
@@ -25,7 +25,7 @@ export default {
   <div>
     <details-row icon="information-o" padding="gl-p-4" data-testid="conan-recipe">
       <gl-sprintf :message="$options.i18n.recipeText">
-        <template #recipe>{{ packageEntity.metadata.recipe }}</template>
+        <template #recipe>{{ packageMetadata.recipe }}</template>
       </gl-sprintf>
     </details-row>
   </div>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue
index fd9fb49a9f2..7c3eb476a99 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue
@@ -14,7 +14,7 @@ export default {
     GlSprintf,
   },
   props: {
-    packageEntity: {
+    packageMetadata: {
       type: Object,
       required: true,
     },
@@ -27,14 +27,14 @@ export default {
     <details-row icon="information-o" padding="gl-p-4" dashed data-testid="maven-app">
       <gl-sprintf :message="$options.i18n.appName">
         <template #name>
-          <strong>{{ packageEntity.metadata.appName }}</strong>
+          <strong>{{ packageMetadata.appName }}</strong>
         </template>
       </gl-sprintf>
     </details-row>
     <details-row icon="information-o" padding="gl-p-4" data-testid="maven-group">
       <gl-sprintf :message="$options.i18n.appGroup">
         <template #group>
-          <strong>{{ packageEntity.metadata.appGroup }}</strong>
+          <strong>{{ packageMetadata.appGroup }}</strong>
         </template>
       </gl-sprintf>
     </details-row>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue
index 1360b03856f..1ddd419a639 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue
@@ -14,7 +14,7 @@ export default {
     GlSprintf,
   },
   props: {
-    packageEntity: {
+    packageMetadata: {
       type: Object,
       required: true,
     },
@@ -25,7 +25,7 @@ export default {
 <template>
   <div>
     <details-row
-      v-if="packageEntity.metadata.projectUrl"
+      v-if="packageMetadata.projectUrl"
       icon="project"
       padding="gl-p-4"
       dashed
@@ -33,22 +33,22 @@ export default {
     >
       <gl-sprintf :message="$options.i18n.sourceText">
         <template #link>
-          <gl-link :href="packageEntity.metadata.projectUrl" target="_blank">{{
-            packageEntity.metadata.projectUrl
+          <gl-link :href="packageMetadata.projectUrl" target="_blank">{{
+            packageMetadata.projectUrl
           }}</gl-link>
         </template>
       </gl-sprintf>
     </details-row>
     <details-row
-      v-if="packageEntity.metadata.licenseUrl"
+      v-if="packageMetadata.licenseUrl"
       icon="license"
       padding="gl-p-4"
       data-testid="nuget-license"
     >
       <gl-sprintf :message="$options.i18n.licenseText">
         <template #link>
-          <gl-link :href="packageEntity.metadata.licenseUrl" target="_blank">{{
-            packageEntity.metadata.licenseUrl
+          <gl-link :href="packageMetadata.licenseUrl" target="_blank">{{
+            packageMetadata.licenseUrl
           }}</gl-link>
         </template>
       </gl-sprintf>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue
index 6534eef532c..ef35349c228 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue
@@ -13,7 +13,7 @@ export default {
     GlSprintf,
   },
   props: {
-    packageEntity: {
+    packageMetadata: {
       type: Object,
       required: true,
     },
@@ -26,7 +26,7 @@ export default {
     <details-row icon="information-o" padding="gl-p-4" data-testid="pypi-required-python">
       <gl-sprintf :message="$options.i18n.requiredPython">
         <template #pythonVersion>
-          <strong>{{ packageEntity.metadata.requiredPython }}</strong>
+          <strong>{{ packageMetadata.requiredPython }}</strong>
         </template>
       </gl-sprintf>
     </details-row>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue
index 3724e371e01..9e700a5236f 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlTable, GlDropdownItem, GlDropdown, GlIcon, GlButton } from '@gitlab/ui';
+import { GlLink, GlTableLite, GlDropdownItem, GlDropdown, GlIcon, GlButton } from '@gitlab/ui';
 import { last } from 'lodash';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __ } from '~/locale';
@@ -12,7 +12,7 @@ export default {
   name: 'PackageFiles',
   components: {
     GlLink,
-    GlTable,
+    GlTableLite,
     GlIcon,
     GlDropdown,
     GlDropdownItem,
@@ -94,7 +94,7 @@ export default {
 <template>
   <div>
     <h3 class="gl-font-lg gl-mt-5">{{ __('Files') }}</h3>
-    <gl-table
+    <gl-table-lite
       :fields="filesTableHeaderFields"
       :items="filesTableRows"
       :tbody-tr-attr="{ 'data-testid': 'file-row' }"
@@ -102,7 +102,7 @@ export default {
       <template #cell(name)="{ item, toggleDetails, detailsShowing }">
         <gl-button
           v-if="hasDetails(item)"
-          :icon="detailsShowing ? 'angle-up' : 'angle-down'"
+          :icon="detailsShowing ? 'chevron-up' : 'chevron-down'"
           :aria-label="detailsShowing ? __('Collapse') : __('Expand')"
           category="tertiary"
           size="small"
@@ -162,6 +162,6 @@ export default {
           <file-sha v-if="item.fileSha1" data-testid="sha-1" title="SHA-1" :sha="item.fileSha1" />
         </div>
       </template>
-    </gl-table>
+    </gl-table-lite>
   </div>
 </template>
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..96b82a20364 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,5 +1,6 @@
 <script>
-import { GlLink, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { first } from 'lodash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { truncateSha } from '~/lib/utils/text_utility';
@@ -7,6 +8,12 @@ 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',
@@ -20,11 +27,14 @@ export default {
     combinedUpdateText: s__(
       'PackageRegistry|Package updated by commit %{link} on branch %{branch}, built by pipeline %{pipeline}, and published to the registry %{datetime}',
     ),
+    fetchPackagePipelinesErrorMessage: FETCH_PACKAGE_PIPELINES_ERROR_MESSAGE,
   },
   components: {
+    GlAlert,
     GlLink,
     GlSprintf,
     HistoryItem,
+    PackageHistoryLoader,
     TimeAgoTooltip,
   },
   props: {
@@ -37,15 +47,28 @@ export default {
       required: true,
     },
   },
+  apollo: {
+    pipelines: {
+      query: getPackagePipelinesQuery,
+      variables() {
+        return this.queryVariables;
+      },
+      update(data) {
+        return data.package?.pipelines?.nodes || [];
+      },
+      error(error) {
+        this.fetchPackagePipelinesError = true;
+        Sentry.captureException(error);
+      },
+    },
+  },
   data() {
     return {
-      showDescription: false,
+      pipelines: [],
+      fetchPackagePipelinesError: false,
     };
   },
   computed: {
-    pipelines() {
-      return this.packageEntity?.pipelines?.nodes || [];
-    },
     firstPipeline() {
       return first(this.pipelines);
     },
@@ -65,6 +88,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 +112,15 @@ 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">
+    <gl-alert
+      v-if="fetchPackagePipelinesError"
+      variant="danger"
+      @dismiss="fetchPackagePipelinesError = false"
+    >
+      {{ $options.i18n.fetchPackagePipelinesErrorMessage }}
+    </gl-alert>
+    <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>