Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

6 files changed, 44 insertions, 11 deletions

diff --git a/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
index 319666210d6..07ee3c6083b 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
@@ -19,8 +19,8 @@ export default {
     GlDropdown,
     CodeInstruction,
   },
-  inject: ['config', 'dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand'],
   mixins: [Tracking.mixin({ label: trackingLabel })],
+  inject: ['config', 'dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand'],
   trackingLabel,
   i18n: {
     QUICK_START,
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue b/app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue
index 26e9fee63af..a68c4de5aa6 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue
@@ -3,12 +3,12 @@ import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
 
 export default {
   name: 'GroupEmptyState',
-  inject: ['config'],
   components: {
     GlEmptyState,
     GlSprintf,
     GlLink,
   },
+  inject: ['config'],
 };
 </script>
 <template>
@@ -25,7 +25,7 @@ export default {
             )
           "
         >
-          <template #docLink="{content}">
+          <template #docLink="{ content }">
             <gl-link :href="config.helpPagePath" target="_blank">{{ content }}</gl-link>
           </template>
         </gl-sprintf>
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/image_list.vue b/app/assets/javascripts/registry/explorer/components/list_page/image_list.vue
index f8b3233438f..10ad99d5956 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/image_list.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/image_list.vue
@@ -13,6 +13,11 @@ export default {
       type: Array,
       required: true,
     },
+    metadataLoading: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
     pageInfo: {
       type: Object,
       required: true,
@@ -33,6 +38,7 @@ export default {
       :key="index"
       :item="listItem"
       :first="index === 0"
+      :metadata-loading="metadataLoading"
       @delete="$emit('delete', $event)"
     />
     <div class="gl-display-flex gl-justify-content-center">
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
index 3fe61dc231a..264a3c27cde 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlIcon, GlSprintf } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon, GlSprintf, GlSkeletonLoader } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
@@ -18,13 +18,14 @@ import {
 } from '../../constants/index';
 
 export default {
-  name: 'ImageListrow',
+  name: 'ImageListRow',
   components: {
     ClipboardButton,
     DeleteButton,
     GlSprintf,
     GlIcon,
     ListItem,
+    GlSkeletonLoader,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -34,6 +35,11 @@ export default {
       type: Object,
       required: true,
     },
+    metadataLoading: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   i18n: {
     LIST_DELETE_BUTTON_DISABLED,
@@ -107,7 +113,11 @@ export default {
       />
     </template>
     <template #left-secondary>
-      <span class="gl-display-flex gl-align-items-center" data-testid="tagsCount">
+      <span
+        v-if="!metadataLoading"
+        class="gl-display-flex gl-align-items-center"
+        data-testid="tags-count"
+      >
         <gl-icon name="tag" class="gl-mr-2" />
         <gl-sprintf :message="tagsCountText">
           <template #count>
@@ -115,6 +125,13 @@ export default {
           </template>
         </gl-sprintf>
       </span>
+
+      <div v-else class="gl-w-full">
+        <gl-skeleton-loader :width="900" :height="16" preserve-aspect-ratio="xMinYMax meet">
+          <circle cx="6" cy="8" r="6" />
+          <rect x="16" y="4" width="100" height="8" rx="4" />
+        </gl-skeleton-loader>
+      </div>
     </template>
     <template #right-action>
       <delete-button
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue b/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue
index 5308b025cc0..5aa04419ca0 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue
@@ -45,7 +45,7 @@ export default {
     <template #description>
       <p>
         <gl-sprintf :message="$options.i18n.introText">
-          <template #docLink="{content}">
+          <template #docLink="{ content }">
             <gl-link :href="config.helpPagePath" target="_blank">{{ content }}</gl-link>
           </template>
         </gl-sprintf>
@@ -53,10 +53,10 @@ export default {
       <h5>{{ $options.i18n.quickStart }}</h5>
       <p>
         <gl-sprintf :message="$options.i18n.notLoggedInMessage">
-          <template #twofaDocLink="{content}">
+          <template #twofaDocLink="{ content }">
             <gl-link :href="config.twoFactorAuthHelpLink" target="_blank">{{ content }}</gl-link>
           </template>
-          <template #personalAccessTokensDocLink="{content}">
+          <template #personalAccessTokensDocLink="{ content }">
             <gl-link :href="config.personalAccessTokensHelpLink" target="_blank">{{
               content
             }}</gl-link>
@@ -81,7 +81,7 @@ export default {
       <p class="gl-mb-4">
         {{ $options.i18n.addImageText }}
       </p>
-      <gl-form-input-group class="gl-mb-4 ">
+      <gl-form-input-group class="gl-mb-4">
         <gl-form-input
           :value="dockerBuildCommand"
           readonly
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
index c2bd01701df..f01e3c9d24a 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
@@ -13,6 +13,7 @@ import {
 } from '../../constants/index';
 
 export default {
+  name: 'ListHeader',
   components: {
     TitleArea,
     MetadataItem,
@@ -43,6 +44,11 @@ export default {
       required: false,
       default: false,
     },
+    metadataLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   loader: {
     repeat: 10,
@@ -92,7 +98,11 @@ export default {
 </script>
 
 <template>
-  <title-area :title="$options.i18n.CONTAINER_REGISTRY_TITLE" :info-messages="infoMessages">
+  <title-area
+    :title="$options.i18n.CONTAINER_REGISTRY_TITLE"
+    :info-messages="infoMessages"
+    :metadata-loading="metadataLoading"
+  >
     <template #right-actions>
       <slot name="commands"></slot>
     </template>