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

3 files changed, 42 insertions, 15 deletions

diff --git a/app/assets/javascripts/vue_shared/components/registry/list_item.vue b/app/assets/javascripts/vue_shared/components/registry/list_item.vue
index 7046ac5be03..8965dba3e83 100644
--- a/app/assets/javascripts/vue_shared/components/registry/list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/list_item.vue
@@ -39,7 +39,7 @@ export default {
     },
   },
   mounted() {
-    this.detailsSlots = Object.keys(this.$slots).filter(k => k.startsWith('details-'));
+    this.detailsSlots = Object.keys(this.$slots).filter((k) => k.startsWith('details-'));
   },
   methods: {
     toggleDetails() {
diff --git a/app/assets/javascripts/vue_shared/components/registry/metadata_item.vue b/app/assets/javascripts/vue_shared/components/registry/metadata_item.vue
index 8ef623b68eb..93396219a54 100644
--- a/app/assets/javascripts/vue_shared/components/registry/metadata_item.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/metadata_item.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon, GlLink } from '@gitlab/ui';
+import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 
 export default {
@@ -9,6 +9,9 @@ export default {
     GlLink,
     TooltipOnTruncate,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     icon: {
       type: String,
@@ -32,6 +35,11 @@ export default {
         return !value || ['xs', 's', 'm', 'l', 'xl'].includes(value);
       },
     },
+    textTooltip: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     sizeClass() {
@@ -55,9 +63,12 @@ export default {
       class="gl-font-weight-bold gl-display-inline-flex"
       :class="sizeClass"
     >
-      <tooltip-on-truncate :title="text" class="gl-text-truncate">
+      <tooltip-on-truncate v-if="!textTooltip" :title="text" class="gl-text-truncate">
         {{ text }}
       </tooltip-on-truncate>
+      <span v-else v-gl-tooltip="{ title: textTooltip }" data-testid="text-tooltip-container">
+        {{ text }}</span
+      >
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/registry/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
index 4d47a34c9a3..c63d91b78d3 100644
--- a/app/assets/javascripts/vue_shared/components/registry/title_area.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlAvatar, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui';
 
 export default {
   name: 'TitleArea',
@@ -7,6 +7,7 @@ export default {
     GlAvatar,
     GlSprintf,
     GlLink,
+    GlSkeletonLoader,
   },
   props: {
     avatar: {
@@ -24,6 +25,11 @@ export default {
       default: () => [],
       required: false,
     },
+    metadataLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -32,11 +38,11 @@ export default {
   },
   async mounted() {
     const METADATA_PREFIX = 'metadata-';
-    this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith(METADATA_PREFIX));
+    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
 
     // we need to wait for next tick to ensure that dynamic names slots are picked up
     await this.$nextTick();
-    this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith(METADATA_PREFIX));
+    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
   },
 };
 </script>
@@ -44,7 +50,7 @@ export default {
 <template>
   <div class="gl-display-flex gl-flex-direction-column">
     <div class="gl-display-flex gl-justify-content-space-between gl-py-3">
-      <div class="gl-flex-direction-column">
+      <div class="gl-flex-direction-column gl-flex-grow-1">
         <div class="gl-display-flex">
           <gl-avatar
             v-if="avatar"
@@ -68,13 +74,23 @@ export default {
         </div>
 
         <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3">
-          <div
-            v-for="(row, metadataIndex) in metadataSlots"
-            :key="metadataIndex"
-            class="gl-display-flex gl-align-items-center gl-mr-5"
-          >
-            <slot :name="row"></slot>
-          </div>
+          <template v-if="!metadataLoading">
+            <div
+              v-for="(row, metadataIndex) in metadataSlots"
+              :key="metadataIndex"
+              class="gl-display-flex gl-align-items-center gl-mr-5"
+            >
+              <slot :name="row"></slot>
+            </div>
+          </template>
+          <template v-else>
+            <div class="gl-w-full">
+              <gl-skeleton-loader :width="960" :height="16" preserve-aspect-ratio="xMinYMax meet">
+                <circle cx="6" cy="8" r="6" />
+                <rect x="16" y="4" width="200" height="8" rx="4" />
+              </gl-skeleton-loader>
+            </div>
+          </template>
         </div>
       </div>
       <div v-if="$slots['right-actions']" class="gl-mt-3">
@@ -89,7 +105,7 @@ export default {
         data-testid="info-message"
       >
         <gl-sprintf :message="message.text">
-          <template #docLink="{content}">
+          <template #docLink="{ content }">
             <gl-link :href="message.link" target="_blank">{{ content }}</gl-link>
           </template>
         </gl-sprintf>