1 files changed, 47 insertions, 6 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_created_updated.vue b/app/assets/javascripts/work_items/components/work_item_created_updated.vue
index 78a86aa49a4..f93ea4a0753 100644
--- a/app/assets/javascripts/work_items/components/work_item_created_updated.vue
+++ b/app/assets/javascripts/work_items/components/work_item_created_updated.vue
@@ -1,7 +1,11 @@
 <script>
-import { GlAvatarLink, GlSprintf } from '@gitlab/ui';
+import { GlAvatarLink, GlSprintf, GlLoadingIcon } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { WORKSPACE_PROJECT } from '~/issues/constants';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import WorkItemStateBadge from '~/work_items/components/work_item_state_badge.vue';
+import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
+import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
 import workItemByIidQuery from '../graphql/work_item_by_iid.query.graphql';
 
 export default {
@@ -9,6 +13,10 @@ export default {
     GlAvatarLink,
     GlSprintf,
     TimeAgoTooltip,
+    WorkItemStateBadge,
+    WorkItemTypeIcon,
+    ConfidentialityBadge,
+    GlLoadingIcon,
   },
   inject: ['fullPath'],
   props: {
@@ -17,6 +25,11 @@ export default {
       required: false,
       default: null,
     },
+    updateInProgress: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     createdAt() {
@@ -31,6 +44,18 @@ export default {
     authorId() {
       return getIdFromGraphQLId(this.author.id);
     },
+    workItemState() {
+      return this.workItem?.state;
+    },
+    workItemType() {
+      return this.workItem?.workItemType?.name;
+    },
+    workItemIconName() {
+      return this.workItem?.workItemType?.iconName;
+    },
+    isWorkItemConfidential() {
+      return this.workItem?.confidential;
+    },
   },
   apollo: {
     workItem: {
@@ -49,13 +74,29 @@ export default {
       },
     },
   },
+  WORKSPACE_PROJECT,
 };
 </script>
 
 <template>
-  <div class="gl-mb-3">
-    <span data-testid="work-item-created">
-      <gl-sprintf v-if="author.name" :message="__('Created %{timeAgo} by %{author}')">
+  <div class="gl-mb-3 gl-text-gray-700">
+    <work-item-state-badge v-if="workItemState" :work-item-state="workItemState" />
+    <gl-loading-icon v-if="updateInProgress" :inline="true" class="gl-mr-3" />
+    <confidentiality-badge
+      v-if="isWorkItemConfidential"
+      class="gl-vertical-align-middle gl-display-inline-flex!"
+      data-testid="confidential"
+      :workspace-type="$options.WORKSPACE_PROJECT"
+      :issuable-type="workItemType"
+    />
+    <work-item-type-icon
+      class="gl-vertical-align-middle gl-mr-0!"
+      :work-item-icon-name="workItemIconName"
+      :work-item-type="workItemType"
+      show-text
+    />
+    <span data-testid="work-item-created" class="gl-vertical-align-middle">
+      <gl-sprintf v-if="author.name" :message="__('created %{timeAgo} by %{author}')">
         <template #timeAgo>
           <time-ago-tooltip :time="createdAt" />
         </template>
@@ -70,7 +111,7 @@ export default {
           </gl-avatar-link>
         </template>
       </gl-sprintf>
-      <gl-sprintf v-else-if="createdAt" :message="__('Created %{timeAgo}')">
+      <gl-sprintf v-else-if="createdAt" :message="__('created %{timeAgo}')">
         <template #timeAgo>
           <time-ago-tooltip :time="createdAt" />
         </template>
@@ -79,7 +120,7 @@ export default {
 
     <span
       v-if="updatedAt"
-      class="gl-ml-5 gl-display-none gl-sm-display-inline-block"
+      class="gl-ml-5 gl-display-none gl-sm-display-inline-block gl-vertical-align-middle"
       data-testid="work-item-updated"
     >
       <gl-sprintf :message="__('Updated %{timeAgo}')">