From d6813552b6e41a2ef55590f7661b4dabb2261232 Mon Sep 17 00:00:00 2001
From: schew2381 <seiji.chew@sentry.io>
Date: Fri, 11 Aug 2023 13:59:31 -0700
Subject: [PATCH] Ref(api): Update create user token page to use dropdowns

---
 static/app/constants/index.tsx                | 11 ----
 .../views/settings/account/apiNewToken.tsx    | 57 +++++++++++++------
 2 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/static/app/constants/index.tsx b/static/app/constants/index.tsx
index 753379b6298a6..f8608f1af9cdf 100644
--- 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
index 9a32c5b46d4a4..e422dc7c53979 100644
--- 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>