1 files changed, 42 insertions, 0 deletions
diff --git a/app/assets/javascripts/releases/components/release_block_author.vue b/app/assets/javascripts/releases/components/release_block_author.vue
new file mode 100644
index 00000000000..e7075d4d67a
--- /dev/null
+++ b/app/assets/javascripts/releases/components/release_block_author.vue
@@ -0,0 +1,42 @@
+<script>
+import { __, sprintf } from '~/locale';
+import { GlSprintf } from '@gitlab/ui';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+
+export default {
+  name: 'ReleaseBlockAuthor',
+  components: {
+    GlSprintf,
+    UserAvatarLink,
+  },
+  props: {
+    author: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    userImageAltDescription() {
+      return this.author && this.author.username
+        ? sprintf(__("%{username}'s avatar"), { username: this.author.username })
+        : null;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex">
+    <gl-sprintf :message="__('by %{user}')">
+      <template #user>
+        <user-avatar-link
+          class="prepend-left-4"
+          :link-href="author.web_url"
+          :img-src="author.avatar_url"
+          :img-alt="userImageAltDescription"
+          :tooltip-text="author.username"
+        />
+      </template>
+    </gl-sprintf>
+  </div>
+</template>