Add latest changes from gitlab-org/gitlab@master

3 files changed, 115 insertions, 61 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index a25b4ab54e5..4f27a3baca9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -2,8 +2,6 @@
 import {
   GlButton,
   GlLoadingIcon,
-  GlLink,
-  GlBadge,
   GlSafeHtmlDirective,
   GlTooltipDirective,
   GlIntersectionObserver,
@@ -17,6 +15,7 @@ import Poll from '~/lib/utils/poll';
 import { EXTENSION_ICON_CLASS, EXTENSION_ICONS } from '../../constants';
 import StatusIcon from './status_icon.vue';
 import Actions from './actions.vue';
+import ChildContent from './child_content.vue';
 import { generateText } from './utils';
 
 export const LOADING_STATES = {
@@ -30,12 +29,11 @@ export default {
   components: {
     GlButton,
     GlLoadingIcon,
-    GlLink,
-    GlBadge,
     GlIntersectionObserver,
     SmartVirtualList,
     StatusIcon,
     Actions,
+    ChildContent,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -196,9 +194,6 @@ export default {
           Sentry.captureException(e);
         });
     },
-    isArray(arr) {
-      return Array.isArray(arr);
-    },
     appear(index) {
       if (index === this.fullData.length - 1) {
         this.showFade = false;
@@ -299,60 +294,14 @@ export default {
           class="gl-py-3 gl-pl-7"
           data-testid="extension-list-item"
         >
-          <div class="gl-w-full">
-            <div v-if="data.header" class="gl-mb-2">
-              <template v-if="isArray(data.header)">
-                <component
-                  :is="headerI === 0 ? 'strong' : 'span'"
-                  v-for="(header, headerI) in data.header"
-                  :key="headerI"
-                  v-safe-html="generateText(header)"
-                  class="gl-display-block"
-                />
-              </template>
-              <strong v-else v-safe-html="generateText(data.header)"></strong>
-            </div>
-            <div class="gl-display-flex">
-              <status-icon
-                v-if="data.icon"
-                :icon-name="data.icon.name"
-                :size="12"
-                class="gl-pl-0"
-              />
-              <gl-intersection-observer
-                :options="{ rootMargin: '100px', thresholds: 0.1 }"
-                class="gl-w-full"
-                @appear="appear(index)"
-                @disappear="disappear(index)"
-              >
-                <div class="gl-flex-wrap gl-display-flex gl-w-full">
-                  <div class="gl-mr-4 gl-display-flex gl-align-items-center">
-                    <p v-safe-html="generateText(data.text)" class="gl-m-0"></p>
-                  </div>
-                  <div v-if="data.link">
-                    <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
-                  </div>
-                  <div v-if="data.supportingText">
-                    <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p>
-                  </div>
-                  <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
-                    {{ data.badge.text }}
-                  </gl-badge>
-
-                  <actions
-                    :widget="$options.label || $options.name"
-                    :tertiary-buttons="data.actions"
-                    class="gl-ml-auto"
-                  />
-                </div>
-                <p
-                  v-if="data.subtext"
-                  v-safe-html="generateText(data.subtext)"
-                  class="gl-m-0 gl-font-sm"
-                ></p>
-              </gl-intersection-observer>
-            </div>
-          </div>
+          <gl-intersection-observer
+            :options="{ rootMargin: '100px', thresholds: 0.1 }"
+            class="gl-w-full"
+            @appear="appear(index)"
+            @disappear="disappear(index)"
+          >
+            <child-content :data="data" :widget-label="widgetLabel" :level="2" />
+          </gl-intersection-observer>
         </li>
       </smart-virtual-list>
       <div
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
new file mode 100644
index 00000000000..5f42c6c7acb
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
@@ -0,0 +1,95 @@
+<script>
+import { GlBadge, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import StatusIcon from './status_icon.vue';
+import Actions from './actions.vue';
+import { generateText } from './utils';
+
+export default {
+  name: 'ChildContent',
+  components: {
+    GlBadge,
+    GlLink,
+    StatusIcon,
+    Actions,
+  },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    widgetLabel: {
+      type: String,
+      required: true,
+    },
+    level: {
+      type: Number,
+      required: true,
+    },
+  },
+  methods: {
+    isArray(arr) {
+      return Array.isArray(arr);
+    },
+    generateText,
+  },
+};
+</script>
+
+<template>
+  <div :class="{ 'gl-pl-6': level === 3 }" class="gl-w-full">
+    <div v-if="data.header" class="gl-mb-2">
+      <template v-if="isArray(data.header)">
+        <component
+          :is="headerI === 0 ? 'strong' : 'span'"
+          v-for="(header, headerI) in data.header"
+          :key="headerI"
+          v-safe-html="generateText(header)"
+          class="gl-display-block"
+        />
+      </template>
+      <strong v-else v-safe-html="generateText(data.header)"></strong>
+    </div>
+    <div class="gl-display-flex">
+      <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" class="gl-pl-0" />
+      <div class="gl-w-full">
+        <div class="gl-flex-wrap gl-display-flex gl-w-full">
+          <div class="gl-mr-4 gl-display-flex gl-align-items-center">
+            <p v-safe-html="generateText(data.text)" class="gl-m-0"></p>
+          </div>
+          <div v-if="data.link">
+            <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
+          </div>
+          <div v-if="data.supportingText">
+            <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p>
+          </div>
+          <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
+            {{ data.badge.text }}
+          </gl-badge>
+          <actions :widget="widgetLabel" :tertiary-buttons="data.actions" class="gl-ml-auto" />
+        </div>
+        <p
+          v-if="data.subtext"
+          v-safe-html="generateText(data.subtext)"
+          class="gl-m-0 gl-font-sm"
+        ></p>
+      </div>
+    </div>
+    <template v-if="data.children && level === 2">
+      <ul class="gl-m-0 gl-p-0 gl-list-style-none">
+        <li>
+          <child-content
+            v-for="childData in data.children"
+            :key="childData.id"
+            :data="childData"
+            :widget-label="widgetLabel"
+            :level="3"
+            data-testid="child-content"
+          />
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js b/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js
index 4aeebf095c4..e52f2c2c666 100644
--- a/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js
+++ b/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js
@@ -88,6 +88,16 @@ export default {
             //   text: 'Link text', // Required: Text to be used inside the link
             // },
             actions: [{ text: 'Full report', href: 'https://gitlab.com', target: '_blank' }],
+            children: [
+              {
+                id: `child-${issue.id}`,
+                header: 'New',
+                text: '%{critical_start}1 Critical%{critical_end}',
+                icon: {
+                  name: EXTENSION_ICONS.error,
+                },
+              },
+            ],
           }));
         });
     },