1 files changed, 68 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
new file mode 100644
index 00000000000..ee81f0950a8
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
@@ -0,0 +1,68 @@
+<script>
+import { GlSafeHtmlDirective } from '@gitlab/ui';
+import { EXTENSION_ICONS } from '../../constants';
+import { generateText } from '../extensions/utils';
+import StatusIcon from './status_icon.vue';
+
+export default {
+  components: {
+    StatusIcon,
+  },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
+  props: {
+    level: {
+      type: Number,
+      required: true,
+      validator: (value) => value === 2 || value === 3,
+    },
+    statusIconName: {
+      type: String,
+      default: '',
+      required: false,
+      validator: (value) => value === '' || Object.keys(EXTENSION_ICONS).includes(value),
+    },
+    widgetName: {
+      type: String,
+      required: true,
+    },
+    header: {
+      type: [String, Array],
+      default: '',
+      required: false,
+    },
+  },
+  computed: {
+    generatedHeader() {
+      return generateText(Array.isArray(this.header) ? this.header[0] : this.header);
+    },
+    generatedSubheader() {
+      return Array.isArray(this.header) && this.header[1] ? generateText(this.header[1]) : '';
+    },
+  },
+};
+</script>
+<template>
+  <div
+    class="gl-w-full gl-display-flex mr-widget-content-row gl-align-items-baseline"
+    :class="{ 'gl-border-t gl-py-3 gl-pl-7': level === 2 }"
+  >
+    <status-icon v-if="statusIconName" :level="2" :name="widgetName" :icon-name="statusIconName" />
+    <div>
+      <slot name="header">
+        <div v-if="header" class="gl-mb-2">
+          <strong v-safe-html="generatedHeader" class="gl-display-block"></strong
+          ><span
+            v-if="generatedSubheader"
+            v-safe-html="generatedSubheader"
+            class="gl-display-block"
+          ></span>
+        </div>
+      </slot>
+      <div class="gl-display-flex gl-align-items-baseline gl-w-full">
+        <slot name="body"></slot>
+      </div>
+    </div>
+  </div>
+</template>