Skip to content

Commit c32ff96

Browse files
JonasBaJonasBa
authored
fix(org) auth token layout (#109467)
1 parent 1d15be3 commit c32ff96

File tree

2 files changed

+62
-77
lines changed

2 files changed

+62
-77
lines changed

‎static/app/views/settings/organizationAuthTokens/authTokenDetails.tsx‎

Lines changed: 35 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@ import {
1414
import FieldGroup from 'sentry/components/forms/fieldGroup';
1515
import LoadingError from 'sentry/components/loadingError';
1616
import LoadingIndicator from 'sentry/components/loadingIndicator';
17-
import Panel from 'sentry/components/panels/panel';
18-
import PanelBody from 'sentry/components/panels/panelBody';
19-
import PanelHeader from 'sentry/components/panels/panelHeader';
2017
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
2118
import {t, tct} from 'sentry/locale';
2219
import type {OrgAuthToken} from 'sentry/types/user';
@@ -141,31 +138,32 @@ function AuthTokenDetailsForm({token}: {token: OrgAuthToken}) {
141138

142139
return (
143140
<form.AppForm form={form}>
144-
<form.AppField name="name">
145-
{field => (
146-
<field.Layout.Row
147-
label={t('Name')}
148-
hintText={t('A name to help you identify this token.')}
149-
required
150-
>
151-
<field.Input value={field.state.value} onChange={field.handleChange} />
152-
</field.Layout.Row>
153-
)}
154-
</form.AppField>
155-
156-
<FieldGroup
157-
label={t('Token')}
158-
help={t('You can only view the token once after creation.')}
159-
>
160-
<div>{tokenPreview(token.tokenLastCharacters || '****')}</div>
161-
</FieldGroup>
162-
163-
<FieldGroup
164-
label={t('Scopes')}
165-
help={t('You cannot change the scopes of an existing token.')}
166-
>
167-
<div>{token.scopes.slice().sort().join(', ')}</div>
168-
</FieldGroup>
141+
<form.FieldGroup title={t('Organization Token Details')}>
142+
<form.AppField name="name">
143+
{field => (
144+
<field.Layout.Row
145+
label={t('Name')}
146+
hintText={t('A name to help you identify this token.')}
147+
required
148+
>
149+
<field.Input value={field.state.value} onChange={field.handleChange} />
150+
</field.Layout.Row>
151+
)}
152+
</form.AppField>
153+
<FieldGroup
154+
label={t('Token')}
155+
help={t('You can only view the token once after creation.')}
156+
>
157+
<div>{tokenPreview(token.tokenLastCharacters || '****')}</div>
158+
</FieldGroup>
159+
160+
<FieldGroup
161+
label={t('Scopes')}
162+
help={t('You cannot change the scopes of an existing token.')}
163+
>
164+
<div>{token.scopes.slice().sort().join(', ')}</div>
165+
</FieldGroup>
166+
</form.FieldGroup>
169167

170168
<Flex justify="end" gap="md" padding="md">
171169
<Button onClick={handleGoBack}>{t('Cancel')}</Button>
@@ -209,22 +207,17 @@ function OrganizationAuthTokensDetails() {
209207
}
210208
)}
211209
</TextBlock>
212-
<Panel>
213-
<PanelHeader>{t('Organization Token Details')}</PanelHeader>
214-
215-
<PanelBody>
216-
{isError && (
217-
<LoadingError
218-
message={t('Failed to load organization token.')}
219-
onRetry={refetchToken}
220-
/>
221-
)}
222210

223-
{isPending && <LoadingIndicator />}
211+
{isError && (
212+
<LoadingError
213+
message={t('Failed to load organization token.')}
214+
onRetry={refetchToken}
215+
/>
216+
)}
217+
218+
{isPending && <LoadingIndicator />}
224219

225-
{!isPending && !isError && token && <AuthTokenDetailsForm token={token} />}
226-
</PanelBody>
227-
</Panel>
220+
{!isPending && !isError && token && <AuthTokenDetailsForm token={token} />}
228221
</div>
229222
);
230223
}

‎static/app/views/settings/organizationAuthTokens/newAuthToken.tsx‎

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,6 @@ import {
1313
addSuccessMessage,
1414
} from 'sentry/actionCreators/indicator';
1515
import FieldGroup from 'sentry/components/forms/fieldGroup';
16-
import Panel from 'sentry/components/panels/panel';
17-
import PanelBody from 'sentry/components/panels/panelBody';
18-
import PanelHeader from 'sentry/components/panels/panelHeader';
1916
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
2017
import {t, tct} from 'sentry/locale';
2118
import type {Organization} from 'sentry/types/organization';
@@ -98,28 +95,29 @@ function AuthTokenCreateForm({
9895

9996
return (
10097
<form.AppForm form={form}>
101-
<form.AppField name="name">
102-
{field => (
103-
<field.Layout.Row
104-
label={t('Name')}
105-
hintText={t('A name to help you identify this token.')}
106-
required
107-
>
108-
<field.Input value={field.state.value} onChange={field.handleChange} />
109-
</field.Layout.Row>
110-
)}
111-
</form.AppField>
112-
113-
<FieldGroup
114-
label={t('Scopes')}
115-
help={t('Organization tokens currently have a limited set of scopes.')}
116-
>
117-
<div>
118-
<div>org:ci</div>
119-
<ScopeHelpText>{t('Source Map Upload, Release Creation')}</ScopeHelpText>
120-
</div>
121-
</FieldGroup>
122-
98+
<form.FieldGroup title={t('Create New Organization Token')}>
99+
<form.AppField name="name">
100+
{field => (
101+
<field.Layout.Row
102+
label={t('Name')}
103+
hintText={t('A name to help you identify this token.')}
104+
required
105+
>
106+
<field.Input value={field.state.value} onChange={field.handleChange} />
107+
</field.Layout.Row>
108+
)}
109+
</form.AppField>
110+
111+
<FieldGroup
112+
label={t('Scopes')}
113+
help={t('Organization tokens currently have a limited set of scopes.')}
114+
>
115+
<div>
116+
<div>org:ci</div>
117+
<ScopeHelpText>{t('Source Map Upload, Release Creation')}</ScopeHelpText>
118+
</div>
119+
</FieldGroup>
120+
</form.FieldGroup>
123121
<Flex justify="end" gap="md" padding="md">
124122
<Button onClick={handleGoBack}>{t('Cancel')}</Button>
125123
<form.SubmitButton>{t('Create Token')}</form.SubmitButton>
@@ -155,16 +153,10 @@ export default function OrganizationAuthTokensNewAuthToken() {
155153
}
156154
)}
157155
</TextBlock>
158-
<Panel>
159-
<PanelHeader>{t('Create New Organization Token')}</PanelHeader>
160-
161-
<PanelBody>
162-
<AuthTokenCreateForm
163-
organization={organization}
164-
onCreatedToken={token => displayNewToken(token.token, handleGoBack)}
165-
/>
166-
</PanelBody>
167-
</Panel>
156+
<AuthTokenCreateForm
157+
organization={organization}
158+
onCreatedToken={token => displayNewToken(token.token, handleGoBack)}
159+
/>
168160
</div>
169161
);
170162
}

0 commit comments

Comments
 (0)