1 files changed, 98 insertions, 0 deletions
diff --git a/app/assets/javascripts/issuable_show/components/issuable_show_root.vue b/app/assets/javascripts/issuable_show/components/issuable_show_root.vue
new file mode 100644
index 00000000000..b41f5e270a8
--- /dev/null
+++ b/app/assets/javascripts/issuable_show/components/issuable_show_root.vue
@@ -0,0 +1,98 @@
+<script>
+import IssuableSidebar from '~/issuable_sidebar/components/issuable_sidebar_root.vue';
+
+import IssuableHeader from './issuable_header.vue';
+import IssuableBody from './issuable_body.vue';
+
+export default {
+  components: {
+    IssuableSidebar,
+    IssuableHeader,
+    IssuableBody,
+  },
+  props: {
+    issuable: {
+      type: Object,
+      required: true,
+    },
+    statusBadgeClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    statusIcon: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    enableEdit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    enableAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    editFormVisible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    descriptionPreviewPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    descriptionHelpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="issuable-show-container">
+    <issuable-header
+      :status-badge-class="statusBadgeClass"
+      :status-icon="statusIcon"
+      :blocked="issuable.blocked"
+      :confidential="issuable.confidential"
+      :created-at="issuable.createdAt"
+      :author="issuable.author"
+    >
+      <template #status-badge>
+        <slot name="status-badge"></slot>
+      </template>
+      <template #header-actions>
+        <slot name="header-actions"></slot>
+      </template>
+    </issuable-header>
+    <issuable-body
+      :issuable="issuable"
+      :status-badge-class="statusBadgeClass"
+      :status-icon="statusIcon"
+      :enable-edit="enableEdit"
+      :enable-autocomplete="enableAutocomplete"
+      :edit-form-visible="editFormVisible"
+      :description-preview-path="descriptionPreviewPath"
+      :description-help-path="descriptionHelpPath"
+      @edit-issuable="$emit('edit-issuable', $event)"
+    >
+      <template #status-badge>
+        <slot name="status-badge"></slot>
+      </template>
+      <template #edit-form-actions="actionsProps">
+        <slot name="edit-form-actions" v-bind="actionsProps"></slot>
+      </template>
+    </issuable-body>
+    <issuable-sidebar @sidebar-toggle="$emit('sidebar-toggle', $event)">
+      <template #right-sidebar-items="sidebarProps">
+        <slot name="right-sidebar-items" v-bind="sidebarProps"></slot>
+      </template>
+    </issuable-sidebar>
+  </div>
+</template>