1 files changed, 115 insertions, 0 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
new file mode 100644
index 00000000000..d1a707f2a8a
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_created_updated.vue
@@ -0,0 +1,115 @@
+<script>
+import { GlAvatarLink, GlSprintf } from '@gitlab/ui';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { getWorkItemQuery } from '../utils';
+
+export default {
+  components: {
+    GlAvatarLink,
+    GlSprintf,
+    TimeAgoTooltip,
+  },
+  props: {
+    fetchByIid: {
+      type: Boolean,
+      required: true,
+    },
+    workItemId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    workItemIid: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    fullPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    createdAt() {
+      return this.workItem?.createdAt || '';
+    },
+    updatedAt() {
+      return this.workItem?.updatedAt || '';
+    },
+    author() {
+      return this.workItem?.author ?? {};
+    },
+    authorId() {
+      return getIdFromGraphQLId(this.author.id);
+    },
+    queryVariables() {
+      return this.fetchByIid
+        ? {
+            fullPath: this.fullPath,
+            iid: this.workItemIid,
+          }
+        : {
+            id: this.workItemId,
+          };
+    },
+  },
+  apollo: {
+    workItem: {
+      query() {
+        return getWorkItemQuery(this.fetchByIid);
+      },
+      variables() {
+        return this.queryVariables;
+      },
+      skip() {
+        return !this.workItemId && !this.workItemIid;
+      },
+      update(data) {
+        const workItem = this.fetchByIid ? data.workspace.workItems.nodes[0] : data.workItem;
+        return workItem ?? {};
+      },
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-mb-3">
+    <span data-testid="work-item-created">
+      <gl-sprintf v-if="author.name" :message="__('Created %{timeAgo} by %{author}')">
+        <template #timeAgo>
+          <time-ago-tooltip :time="createdAt" />
+        </template>
+        <template #author>
+          <gl-avatar-link
+            class="js-user-link gl-text-body gl-font-weight-bold"
+            :title="author.name"
+            :data-user-id="authorId"
+            :href="author.webUrl"
+          >
+            {{ author.name }}
+          </gl-avatar-link>
+        </template>
+      </gl-sprintf>
+      <gl-sprintf v-else-if="createdAt" :message="__('Created %{timeAgo}')">
+        <template #timeAgo>
+          <time-ago-tooltip :time="createdAt" />
+        </template>
+      </gl-sprintf>
+    </span>
+
+    <span
+      v-if="updatedAt"
+      class="gl-ml-5 gl-display-none gl-sm-display-inline-block"
+      data-testid="work-item-updated"
+    >
+      <gl-sprintf :message="__('Updated %{timeAgo}')">
+        <template #timeAgo>
+          <time-ago-tooltip :time="updatedAt" />
+        </template>
+      </gl-sprintf>
+    </span>
+  </div>
+</template>