fix(github-growth): modal nits (#56695)

static/app/components/modals/inviteMissingMembersModal/index.spec.tsx

@@ -69,13 +69,15 @@ describe('InviteMissingMembersModal', function () {
     ).not.toBeInTheDocument();
   });
 
-  it('disables invite button if no members selected', function () {
+  it('disables invite button if no members selected', async function () {
     render(<InviteMissingMembersModal {...modalProps} missingMembers={missingMembers} />);
 
     expect(
       screen.getByRole('heading', {name: 'Invite Your Dev Team'})
     ).toBeInTheDocument();
 
+    await userEvent.click(screen.getByLabelText('Deselect All'));
+
     expect(screen.getByLabelText('Send Invites')).toBeDisabled();
     expect(screen.getByText('Invite missing members')).toBeInTheDocument();
   });
@@ -87,6 +89,7 @@ describe('InviteMissingMembersModal', function () {
       screen.getByRole('heading', {name: 'Invite Your Dev Team'})
     ).toBeInTheDocument();
 
+    await userEvent.click(screen.getByLabelText('Deselect All'));
     await userEvent.click(screen.getByLabelText('Select hello@sentry.io'));
 
     expect(screen.getByLabelText('Send Invites')).toBeEnabled();
@@ -98,22 +101,22 @@ describe('InviteMissingMembersModal', function () {
     expect(screen.getByText('Invite missing members')).toBeInTheDocument();
   });
 
-  it('can select and deselect all rows', async function () {
+  it('can deselect and select all rows', async function () {
     render(<InviteMissingMembersModal {...modalProps} missingMembers={missingMembers} />);
 
     expect(
       screen.getByRole('heading', {name: 'Invite Your Dev Team'})
     ).toBeInTheDocument();
 
-    await userEvent.click(screen.getByLabelText('Select All'));
-
-    expect(screen.getByLabelText('Send Invites')).toBeEnabled();
-    expect(screen.getByText('Invite all 5 missing members')).toBeInTheDocument();
-
     await userEvent.click(screen.getByLabelText('Deselect All'));
 
     expect(screen.getByLabelText('Send Invites')).toBeDisabled();
     expect(screen.getByText('Invite missing members')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByLabelText('Select All'));
+
+    expect(screen.getByLabelText('Send Invites')).toBeEnabled();
+    expect(screen.getByText('Invite all 5 missing members')).toBeInTheDocument();
   });
 
   it('can invite all members', async function () {
@@ -136,7 +139,6 @@ describe('InviteMissingMembersModal', function () {
       screen.getByRole('heading', {name: 'Invite Your Dev Team'})
     ).toBeInTheDocument();
 
-    await userEvent.click(screen.getByLabelText('Select All'));
     await userEvent.click(screen.getByLabelText('Send Invites'));
 
     // Verify data sent to the backend
@@ -173,6 +175,8 @@ describe('InviteMissingMembersModal', function () {
       screen.getByRole('heading', {name: 'Invite Your Dev Team'})
     ).toBeInTheDocument();
 
+    await userEvent.click(screen.getByLabelText('Deselect All'));
+
     const roleInputs = screen.getAllByRole('textbox', {name: 'Role'});
     const teamInputs = screen.getAllByRole('textbox', {name: 'Add to Team'});
 

static/app/components/modals/inviteMissingMembersModal/index.tsx

@@ -25,10 +25,7 @@ import {space} from 'sentry/styles/space';
 import {MissingMember, Organization, OrgRole} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useApi from 'sentry/utils/useApi';
-import {
-  StyledExternalLink,
-  Subtitle,
-} from 'sentry/views/settings/organizationMembers/inviteBanner';
+import {StyledExternalLink} from 'sentry/views/settings/organizationMembers/inviteBanner';
 
 export interface InviteMissingMembersModalProps extends ModalRenderProps {
   allowedRoles: OrgRole[];
@@ -48,7 +45,7 @@ export function InviteMissingMembersModal({
     role: organization.defaultRole,
     teamSlugs: new Set<string>(),
     externalId: member.externalId,
-    selected: false,
+    selected: true,
   }));
   const [memberInvites, setMemberInvites] =
     useState<MissingMemberInvite[]>(initialMemberInvites);
@@ -243,7 +240,7 @@ export function InviteMissingMembersModal({
                     @{username}
                   </StyledExternalLink>
                 </ContentRow>
-                <Subtitle>{member.email}</Subtitle>
+                <MemberEmail>{member.email}</MemberEmail>
               </StyledPanelItem>
               <ContentRow>
                 <IconCommit size="sm" />
@@ -341,6 +338,16 @@ const ContentRow = styled('div')`
   gap: ${space(0.75)};
 `;
 
+const MemberEmail = styled('div')`
+  display: block;
+  max-width: 150px;
+  font-size: ${p => p.theme.fontSizeSmall};
+  font-weight: 400;
+  color: ${p => p.theme.gray300};
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
 export const modalCss = css`
   width: 80%;
   max-width: 870px;

static/app/views/settings/organizationMembers/inviteBanner.tsx

@@ -149,7 +149,7 @@ export function InviteBanner({
             <IconCommit size="xs" />
             {tct('[commitCount] Recent Commits', {commitCount: member.commitCount})}
           </MemberCardContentRow>
-          <Subtitle>{member.email}</Subtitle>
+          <MemberEmail>{member.email}</MemberEmail>
         </MemberCardContent>
         <Button
           size="sm"
@@ -279,7 +279,7 @@ const CardTitle = styled('h6')`
   color: ${p => p.theme.gray400};
 `;
 
-export const Subtitle = styled('div')`
+const Subtitle = styled('div')`
   display: flex;
   align-items: center;
   font-size: ${p => p.theme.fontSizeSmall};
@@ -288,6 +288,16 @@ export const Subtitle = styled('div')`
   gap: ${space(0.5)};
 `;
 
+const MemberEmail = styled('div')`
+  display: block;
+  max-width: 70%;
+  font-size: ${p => p.theme.fontSizeSmall};
+  font-weight: 400;
+  color: ${p => p.theme.gray300};
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
 const MemberCard = styled(Card)`
   display: flex;
   flex-direction: row;
@@ -303,7 +313,8 @@ const MemberCardContent = styled('div')`
   display: flex;
   flex-direction: column;
   flex: 1 1;
-  width: 75%;
+  min-width: 50%;
+  max-width: 75%;
 `;
 
 const MemberCardContentRow = styled('div')`