feat(team-members): Add a pending tag to members who are invited but not accepted (#99551)

Author: malwilley

static/app/views/settings/organizationTeams/teamMembers.spec.tsx

@@ -409,4 +409,14 @@ describe('TeamMembers', () => {
     ).toBeEnabled();
     expect((await screen.findAllByRole('button', {name: 'Remove'})).at(0)).toBeEnabled();
   });
+
+  it('renders a "Pending" tag for pending team members', async () => {
+    render(<TeamMembers team={team} />, {
+      initialRouterConfig,
+      organization,
+    });
+
+    // MembersFixure has a single pending member
+    expect(await screen.findByText('Pending')).toBeInTheDocument();
+  });
 });

static/app/views/settings/organizationTeams/teamMembersRow.tsx

@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 
+import {Tag} from 'sentry/components/core/badge/tag';
 import {Button} from 'sentry/components/core/button';
+import {Flex} from 'sentry/components/core/layout';
 import IdBadge from 'sentry/components/idBadge';
 import PanelItem from 'sentry/components/panels/panelItem';
 import TeamRoleSelect from 'sentry/components/teamRoleSelect';
@@ -34,9 +36,10 @@ function TeamMembersRow({
 
   return (
     <TeamRolesPanelItem key={member.id}>
-      <div>
+      <Flex gap="md">
         <IdBadge avatarSize={36} member={member} />
-      </div>
+        {member.pending ? <Tag>{t('Pending')}</Tag> : null}
+      </Flex>
       <RoleSelectWrapper>
         <TeamRoleSelect
           disabled={isSelf || !hasWriteAccess}