Add badge for invited user

When a user is invited to a group but doesn't have a GitLab
account yet, we display a badge indicating the user status

Changelog: added

app/assets/javascripts/members/components/table/members_table.vue

@@ -11,7 +11,9 @@ import {
   ACTIVE_TAB_QUERY_PARAM_NAME,
   TAB_QUERY_PARAM_VALUES,
   MEMBER_STATE_AWAITING,
+  MEMBER_STATE_ACTIVE,
   USER_STATE_BLOCKED_PENDING_APPROVAL,
+  BADGE_LABELS_AWAITING_USER_SIGNUP,
   BADGE_LABELS_PENDING_OWNER_APPROVAL,
 } from '../../constants';
 import RemoveGroupLinkModal from '../modals/remove_group_link_modal.vue';
@@ -154,8 +156,12 @@ export default {
      * @see {@link ~/app/serializers/member_entity.rb}
      * @returns {boolean}
      */
-    isNewUser(memberInviteMetadata) {
-      return memberInviteMetadata && !memberInviteMetadata.userState;
+    isNewUser(memberInviteMetadata, memberState) {
+      return (
+        memberInviteMetadata &&
+        !memberInviteMetadata.userState &&
+        memberState !== MEMBER_STATE_ACTIVE
+      );
     },
     /**
      * Returns whether the user is awaiting root approval
@@ -204,6 +210,10 @@ export default {
      * @returns {string}
      */
     inviteBadge(memberInviteMetadata, memberState) {
+      if (this.isNewUser(memberInviteMetadata, memberState)) {
+        return BADGE_LABELS_AWAITING_USER_SIGNUP;
+      }
+
       if (this.shouldAddPendingOwnerApprovalBadge(memberInviteMetadata, memberState)) {
         return BADGE_LABELS_PENDING_OWNER_APPROVAL;
       }

app/assets/javascripts/members/constants.js

@@ -111,6 +111,7 @@ export const MEMBER_STATE_CREATED = 0;
 export const MEMBER_STATE_AWAITING = 1;
 export const MEMBER_STATE_ACTIVE = 2;
 
+export const BADGE_LABELS_AWAITING_USER_SIGNUP = __('Awaiting user signup');
 export const BADGE_LABELS_PENDING_OWNER_APPROVAL = __('Pending owner approval');
 
 export const DAYS_TO_EXPIRE_SOON = 7;

locale/gitlab.pot

@@ -5244,6 +5244,9 @@ msgstr ""
 msgid "Average per day: %{average}"
 msgstr ""
 
+msgid "Awaiting user signup"
+msgstr ""
+
 msgid "Award added"
 msgstr ""
 

spec/frontend/members/components/table/members_table_spec.js

@@ -16,6 +16,7 @@ import {
   MEMBER_STATE_AWAITING,
   MEMBER_STATE_ACTIVE,
   USER_STATE_BLOCKED_PENDING_APPROVAL,
+  BADGE_LABELS_AWAITING_USER_SIGNUP,
   BADGE_LABELS_PENDING_OWNER_APPROVAL,
   TAB_QUERY_PARAM_VALUES,
 } from '~/members/constants';
@@ -131,9 +132,9 @@ describe('MembersTable', () => {
     describe('Invited column', () => {
       describe.each`
         state                    | userState                              | expectedBadgeLabel
-        ${MEMBER_STATE_CREATED}  | ${null}                                | ${''}
+        ${MEMBER_STATE_CREATED}  | ${null}                                | ${BADGE_LABELS_AWAITING_USER_SIGNUP}
         ${MEMBER_STATE_CREATED}  | ${USER_STATE_BLOCKED_PENDING_APPROVAL} | ${BADGE_LABELS_PENDING_OWNER_APPROVAL}
-        ${MEMBER_STATE_AWAITING} | ${''}                                  | ${''}
+        ${MEMBER_STATE_AWAITING} | ${''}                                  | ${BADGE_LABELS_AWAITING_USER_SIGNUP}
         ${MEMBER_STATE_AWAITING} | ${USER_STATE_BLOCKED_PENDING_APPROVAL} | ${BADGE_LABELS_PENDING_OWNER_APPROVAL}
         ${MEMBER_STATE_AWAITING} | ${'something_else'}                    | ${BADGE_LABELS_PENDING_OWNER_APPROVAL}
         ${MEMBER_STATE_ACTIVE}   | ${null}                                | ${''}