1 files changed, 38 insertions, 3 deletions
diff --git a/app/assets/javascripts/members/components/table/member_source.vue b/app/assets/javascripts/members/components/table/member_source.vue
index 30fcbfcd3f8..ed1971d020b 100644
--- a/app/assets/javascripts/members/components/table/member_source.vue
+++ b/app/assets/javascripts/members/components/table/member_source.vue
@@ -1,11 +1,19 @@
 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
 
 export default {
   name: 'MemberSource',
+  i18n: {
+    inherited: __('Inherited'),
+    directMember: __('Direct member'),
+    directMemberWithCreatedBy: s__('Members|Direct member by %{createdBy}'),
+    inheritedMemberWithCreatedBy: s__('Members|%{group} by %{createdBy}'),
+  },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  components: { GlSprintf },
   props: {
     memberSource: {
       type: Object,
@@ -15,13 +23,40 @@ export default {
       type: Boolean,
       required: true,
     },
+    createdBy: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    showCreatedBy() {
+      return this.createdBy?.name && this.createdBy?.webUrl;
+    },
+    messageWithCreatedBy() {
+      return this.isDirectMember
+        ? this.$options.i18n.directMemberWithCreatedBy
+        : this.$options.i18n.inheritedMemberWithCreatedBy;
+    },
   },
 };
 </script>
 
 <template>
-  <span v-if="isDirectMember">{{ __('Direct member') }}</span>
-  <a v-else v-gl-tooltip.hover :title="__('Inherited')" :href="memberSource.webUrl">{{
+  <span v-if="showCreatedBy">
+    <gl-sprintf :message="messageWithCreatedBy">
+      <template #group>
+        <a v-gl-tooltip.hover="$options.i18n.inherited" :href="memberSource.webUrl">{{
+          memberSource.fullName
+        }}</a>
+      </template>
+      <template #createdBy>
+        <a :href="createdBy.webUrl">{{ createdBy.name }}</a>
+      </template>
+    </gl-sprintf>
+  </span>
+  <span v-else-if="isDirectMember">{{ $options.i18n.directMember }}</span>
+  <a v-else v-gl-tooltip.hover="$options.i18n.inherited" :href="memberSource.webUrl">{{
     memberSource.fullName
   }}</a>
 </template>