Browse Source

fix(ui): Errant PanelItem on OrganizationMemberDetail (#62604)

## Before
![Screenshot 2024-01-04 at 12 18
33 AM](https://github.com/getsentry/sentry/assets/1748388/939a3bdc-2cfb-41f9-a8ed-cba5f417de9a)

![Screenshot 2024-01-04 at 12 18
57 AM](https://github.com/getsentry/sentry/assets/1748388/680fb63c-1c95-473f-ade6-889b1cb9ffbb)

## After

![Screenshot 2024-01-04 at 12 24
13 AM](https://github.com/getsentry/sentry/assets/1748388/7756cadf-ae89-457b-9ea6-82e64b0e9c2d)

![Screenshot 2024-01-04 at 12 24
01 AM](https://github.com/getsentry/sentry/assets/1748388/d56522ff-07c1-4ad3-8c4a-56ae05e397e0)
Danny Lee 1 year ago
parent
commit
a6c271a9d4

+ 18 - 26
static/app/views/settings/organizationMembers/organizationMemberDetail.tsx

@@ -12,7 +12,6 @@ import {
 } from 'sentry/actionCreators/indicator';
 import {resendMemberInvite, updateMember} from 'sentry/actionCreators/members';
 import {Button} from 'sentry/components/button';
-import ButtonBar from 'sentry/components/buttonBar';
 import Confirm from 'sentry/components/confirm';
 import DateTime from 'sentry/components/dateTime';
 import NotFound from 'sentry/components/errors/notFound';
@@ -292,6 +291,8 @@ class OrganizationMemberDetail extends DeprecatedAsyncView<Props, State> {
     const canResend = !expired;
     const showAuth = !pending;
 
+    const showResendButton = (member.pending || member.expired) && canResend;
+
     return (
       <Fragment>
         <SettingsPageHeader
@@ -304,7 +305,22 @@ class OrganizationMemberDetail extends DeprecatedAsyncView<Props, State> {
         />
 
         <Panel>
-          <PanelHeader>{t('Basics')}</PanelHeader>
+          <PanelHeader hasButtons={showResendButton}>
+            {t('Basics')}
+
+            {showResendButton && (
+              <Button
+                data-test-id="resend-invite"
+                size="xs"
+                priority="primary"
+                icon={<IconRefresh />}
+                title={t('Generate a new invite link and send a new email.')}
+                onClick={() => this.handleInvite(true)}
+              >
+                {t('Resend Invite')}
+              </Button>
+            )}
+          </PanelHeader>
 
           <PanelBody>
             <PanelItem>
@@ -329,24 +345,6 @@ class OrganizationMemberDetail extends DeprecatedAsyncView<Props, State> {
                 </div>
               </Details>
             </PanelItem>
-            <PanelItem>
-              {(member.pending || member.expired) && (
-                <InviteSection>
-                  <ButtonBar gap={1}>
-                    {canResend && (
-                      <Button
-                        data-test-id="resend-invite"
-                        icon={<IconRefresh />}
-                        title={t('Generate a new invite link and send a new email.')}
-                        onClick={() => this.handleInvite(true)}
-                      >
-                        {t('Resend Invite')}
-                      </Button>
-                    )}
-                  </ButtonBar>
-                </InviteSection>
-              )}
-            </PanelItem>
           </PanelBody>
         </Panel>
 
@@ -455,12 +453,6 @@ const DetailLabel = styled('div')`
   color: ${p => p.theme.textColor};
 `;
 
-const InviteSection = styled('div')`
-  flex-grow: 1;
-  display: flex;
-  gap: ${space(1)};
-`;
-
 const Footer = styled('div')`
   display: flex;
   justify-content: flex-end;