1 files changed, 132 insertions, 0 deletions

diff --git a/app/assets/javascripts/issues/new/components/title_suggestions_item.vue b/app/assets/javascripts/issues/new/components/title_suggestions_item.vue
new file mode 100644
index 00000000000..a01f4f747b9
--- /dev/null
+++ b/app/assets/javascripts/issues/new/components/title_suggestions_item.vue
@@ -0,0 +1,132 @@
+<script>
+import { GlLink, GlTooltip, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
+import { __ } from '~/locale';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+import timeago from '~/vue_shared/mixins/timeago';
+
+export default {
+  components: {
+    GlTooltip,
+    GlLink,
+    GlIcon,
+    UserAvatarImage,
+    TimeagoTooltip,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [timeago],
+  props: {
+    suggestion: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    counts() {
+      return [
+        {
+          id: uniqueId(),
+          icon: 'thumb-up',
+          tooltipTitle: __('Upvotes'),
+          count: this.suggestion.upvotes,
+        },
+        {
+          id: uniqueId(),
+          icon: 'comment',
+          tooltipTitle: __('Comments'),
+          count: this.suggestion.userNotesCount,
+        },
+      ].filter(({ count }) => count);
+    },
+    isClosed() {
+      return this.suggestion.state === 'closed';
+    },
+    stateIconClass() {
+      return this.isClosed ? 'gl-text-blue-500' : 'gl-text-green-500';
+    },
+    stateIconName() {
+      return this.isClosed ? 'issue-close' : 'issue-open-m';
+    },
+    stateTitle() {
+      return this.isClosed ? __('Closed') : __('Opened');
+    },
+    closedOrCreatedDate() {
+      return this.suggestion.closedAt || this.suggestion.createdAt;
+    },
+    hasUpdated() {
+      return this.suggestion.updatedAt !== this.suggestion.createdAt;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="suggestion-item">
+    <div class="d-flex align-items-center">
+      <gl-icon
+        v-if="suggestion.confidential"
+        v-gl-tooltip.bottom
+        :title="__('Confidential')"
+        name="eye-slash"
+        class="gl-cursor-help gl-mr-2 gl-text-orange-500"
+      />
+      <gl-link
+        :href="suggestion.webUrl"
+        target="_blank"
+        class="suggestion bold str-truncated-100 gl-text-gray-900!"
+      >
+        {{ suggestion.title }}
+      </gl-link>
+    </div>
+    <div class="text-secondary suggestion-footer">
+      <gl-icon ref="state" :name="stateIconName" :class="stateIconClass" class="gl-cursor-help" />
+      <gl-tooltip :target="() => $refs.state" placement="bottom">
+        <span class="d-block">
+          <span class="bold"> {{ stateTitle }} </span> {{ timeFormatted(closedOrCreatedDate) }}
+        </span>
+        <span class="text-tertiary">{{ tooltipTitle(closedOrCreatedDate) }}</span>
+      </gl-tooltip>
+      #{{ suggestion.iid }} &bull;
+      <timeago-tooltip
+        :time="suggestion.createdAt"
+        tooltip-placement="bottom"
+        class="gl-cursor-help"
+      />
+      {{ __('by') }}
+      <gl-link :href="suggestion.author.webUrl">
+        <user-avatar-image
+          :img-src="suggestion.author.avatarUrl"
+          :size="16"
+          css-classes="mr-0 float-none"
+          tooltip-placement="bottom"
+          class="d-inline-block"
+        >
+          <span class="bold d-block">{{ __('Author') }}</span> {{ suggestion.author.name }}
+          <span class="text-tertiary">@{{ suggestion.author.username }}</span>
+        </user-avatar-image>
+      </gl-link>
+      <template v-if="hasUpdated">
+        &bull; {{ __('updated') }}
+        <timeago-tooltip
+          :time="suggestion.updatedAt"
+          tooltip-placement="bottom"
+          class="gl-cursor-help"
+        />
+      </template>
+      <span class="suggestion-counts">
+        <span
+          v-for="{ count, icon, tooltipTitle, id } in counts"
+          :key="id"
+          v-gl-tooltip.bottom
+          :title="tooltipTitle"
+          class="gl-cursor-help gl-ml-3 text-tertiary"
+        >
+          <gl-icon :name="icon" /> {{ count }}
+        </span>
+      </span>
+    </div>
+  </div>
+</template>