2 files changed, 54 insertions, 26 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 50a19dc2156..7046ac5be03 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/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
index cc33b8f85cd..06b4309ad42 100644
--- a/app/assets/javascripts/vue_shared/components/registry/title_area.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
@@ -1,10 +1,12 @@
 <script>
-import { GlAvatar } from '@gitlab/ui';
+import { GlAvatar, GlSprintf, GlLink } from '@gitlab/ui';
 
 export default {
   name: 'TitleArea',
   components: {
     GlAvatar,
+    GlSprintf,
+    GlLink,
   },
   props: {
     avatar: {
@@ -17,6 +19,11 @@ export default {
       default: null,
       required: false,
     },
+    infoMessages: {
+      type: Array,
+      default: () => [],
+      required: false,
+    },
   },
   data() {
     return {
@@ -24,43 +31,64 @@ export default {
     };
   },
   mounted() {
-    this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith('metadata_'));
+    this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith('metadata-'));
   },
 };
 </script>
 
 <template>
-  <div class="gl-display-flex gl-justify-content-space-between gl-py-3">
-    <div class="gl-flex-direction-column">
-      <div class="gl-display-flex">
-        <gl-avatar v-if="avatar" :src="avatar" shape="rect" class="gl-align-self-center gl-mr-4" />
+  <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-display-flex">
+          <gl-avatar
+            v-if="avatar"
+            :src="avatar"
+            shape="rect"
+            class="gl-align-self-center gl-mr-4"
+          />
 
-        <div class="gl-display-flex gl-flex-direction-column">
-          <h1 class="gl-font-size-h1 gl-mt-3 gl-mb-2" data-testid="title">
-            <slot name="title">{{ title }}</slot>
-          </h1>
+          <div class="gl-display-flex gl-flex-direction-column">
+            <h1 class="gl-font-size-h1 gl-mt-3 gl-mb-2" data-testid="title">
+              <slot name="title">{{ title }}</slot>
+            </h1>
+
+            <div
+              v-if="$slots['sub-header']"
+              class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-1"
+            >
+              <slot name="sub-header"></slot>
+            </div>
+          </div>
+        </div>
 
+        <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3">
           <div
-            v-if="$slots['sub-header']"
-            class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-1"
+            v-for="(row, metadataIndex) in metadataSlots"
+            :key="metadataIndex"
+            class="gl-display-flex gl-align-items-center gl-mr-5"
           >
-            <slot name="sub-header"></slot>
+            <slot :name="row"></slot>
           </div>
         </div>
       </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>
+      <div v-if="$slots['right-actions']" class="gl-mt-3">
+        <slot name="right-actions"></slot>
       </div>
     </div>
-    <div v-if="$slots['right-actions']" class="gl-mt-3">
-      <slot name="right-actions"></slot>
-    </div>
+    <p>
+      <span
+        v-for="(message, index) in infoMessages"
+        :key="index"
+        class="gl-mr-2"
+        data-testid="info-message"
+      >
+        <gl-sprintf :message="message.text">
+          <template #docLink="{content}">
+            <gl-link :href="message.link" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </span>
+    </p>
   </div>
 </template>