Ref(api): Update create user token page to use dropdowns

getsentry · Aug 11, 2023 · d681355 · d681355
1 parent d559921
commit d681355
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 29 deletions.
diff --git a/static/app/constants/index.tsx b/static/app/constants/index.tsx
@@ -54,17 +54,6 @@ export const API_ACCESS_SCOPES = [
  'team:write',
 ] as const;
 
-// Default API scopes when adding a new API token or org API token
-export const DEFAULT_API_ACCESS_SCOPES = [
- 'event:admin',
- 'event:read',
- 'member:read',
- 'org:read',
- 'project:read',
- 'project:releases',
- 'team:read',
-];
-
 // These should only be used in the case where we cannot obtain roles through
 // the members endpoint (primarily in cases where a user is admining a
 // different organization they are not a OrganizationMember of ).

diff --git a/static/app/views/settings/account/apiNewToken.tsx b/static/app/views/settings/account/apiNewToken.tsx
@@ -2,23 +2,38 @@ import {Component} from 'react';
 import {browserHistory} from 'react-router';
 
 import ApiForm from 'sentry/components/forms/apiForm';
-import MultipleCheckbox from 'sentry/components/forms/controls/multipleCheckbox';
-import FormField from 'sentry/components/forms/formField';
 import ExternalLink from 'sentry/components/links/externalLink';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
-import {API_ACCESS_SCOPES, DEFAULT_API_ACCESS_SCOPES} from 'sentry/constants';
 import {t, tct} from 'sentry/locale';
+import {Permissions} from 'sentry/types';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 import TextBlock from 'sentry/views/settings/components/text/textBlock';
+import PermissionSelection from 'sentry/views/settings/organizationDeveloperSettings/permissionSelection';
 
-const SORTED_DEFAULT_API_ACCESS_SCOPES = DEFAULT_API_ACCESS_SCOPES.sort();
 const API_INDEX_ROUTE = '/settings/account/api/auth-tokens/';
+type State = {
+ permissions: Permissions;
+};
+
+export default class ApiNewToken extends Component<{}, State> {
+ constructor(props: {}) {
+ super(props);
+ this.state = {
+ permissions: {
+ Event: 'no-access',
+ Team: 'no-access',
+ Member: 'no-access',
+ Project: 'no-access',
+ Release: 'no-access',
+ Organization: 'no-access',
+ },
+ };
+ }
 
-export default class ApiNewToken extends Component {
  onCancel = () => {
  browserHistory.push(normalizeUrl(API_INDEX_ROUTE));
  };
@@ -46,31 +61,37 @@ export default class ApiNewToken extends Component {
  )}
  </TextBlock>
  <Panel>
- <PanelHeader>{t('Create New User Auth Token')}</PanelHeader>
+ <PanelHeader>{t('Permissions')}</PanelHeader>
  <ApiForm
  apiMethod="POST"
  apiEndpoint="/api-tokens/"
- initialData={{scopes: SORTED_DEFAULT_API_ACCESS_SCOPES}}
+ initialData={{scopes: []}}
  onSubmitSuccess={this.onSubmitSuccess}
  onCancel={this.onCancel}
  footerStyle={{
  marginTop: 0,
  paddingRight: 20,
  }}
+ submitDisabled={Object.values(this.state.permissions).every(
+ value => value === 'no-access'
+ )}
  submitLabel={t('Create Token')}
  >
  <PanelBody>
- <FormField name="scopes" label={t('Scopes')} inline={false} required>
- {({name, value, onChange}) => (
- <MultipleCheckbox onChange={onChange} value={value} name={name}>
- {API_ACCESS_SCOPES.map(scope => (
- <MultipleCheckbox.Item value={scope} key={scope}>
- {scope}
- </MultipleCheckbox.Item>
- ))}
- </MultipleCheckbox>
- )}
- </FormField>
+ <PermissionSelection
+ appPublished={false}
+ permissions={{
+ Event: 'no-access',
+ Team: 'no-access',
+ Member: 'no-access',
+ Project: 'no-access',
+ Release: 'no-access',
+ Organization: 'no-access',
+ }}
+ onChange={value => {
+ this.setState({permissions: value});
+ }}
+ />
  </PanelBody>
  </ApiForm>
  </Panel>