fix(auth): Disable the Save New Auth Token button while a request is already in-flight (#92313)

After clicking save:

![SCR-20250527-hoxm](https://github.com/user-attachments/assets/98f10a21-749a-4a7e-9853-43a31932b639)

And when the save is complete:

![SCR-20250527-hoys](https://github.com/user-attachments/assets/02970395-c198-4f68-8211-609dc4e896b6)

Author: ryan953

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

@@ -1,35 +1,14 @@
-import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import * as indicators from 'sentry/actionCreators/indicator';
-import OrganizationsStore from 'sentry/stores/organizationsStore';
 import type {OrgAuthToken} from 'sentry/types/user';
-import {OrganizationAuthTokensNewAuthToken} from 'sentry/views/settings/organizationAuthTokens/newAuthToken';
+import OrganizationAuthTokensNewAuthToken from 'sentry/views/settings/organizationAuthTokens/newAuthToken';
 
 describe('OrganizationAuthTokensNewAuthToken', function () {
   const ENDPOINT = '/organizations/org-slug/org-auth-tokens/';
-  const {organization, router} = initializeOrg();
-
-  const defaultProps = {
-    organization,
-    router,
-    location: router.location,
-    params: {orgId: organization.slug},
-    routes: router.routes,
-    route: {},
-    routeParams: router.params,
-  };
-
-  beforeEach(function () {
-    OrganizationsStore.addOrReplace(organization);
-  });
-
-  afterEach(function () {
-    MockApiClient.clearMockResponses();
-  });
 
   it('can create token', async function () {
-    render(<OrganizationAuthTokensNewAuthToken {...defaultProps} />);
+    render(<OrganizationAuthTokensNewAuthToken />);
 
     const generatedToken: OrgAuthToken & {token: string} = {
       id: '1',
@@ -65,7 +44,7 @@ describe('OrganizationAuthTokensNewAuthToken', function () {
   it('handles API errors when creating token', async function () {
     jest.spyOn(indicators, 'addErrorMessage');
 
-    render(<OrganizationAuthTokensNewAuthToken {...defaultProps} />);
+    render(<OrganizationAuthTokensNewAuthToken />);
 
     const mock = MockApiClient.addMockResponse({
       url: ENDPOINT,
@@ -98,7 +77,7 @@ describe('OrganizationAuthTokensNewAuthToken', function () {
   it('handles missing_system_url_prefix API error when creating token', async function () {
     jest.spyOn(indicators, 'addErrorMessage');
 
-    render(<OrganizationAuthTokensNewAuthToken {...defaultProps} />);
+    render(<OrganizationAuthTokensNewAuthToken />);
 
     const mock = MockApiClient.addMockResponse({
       url: ENDPOINT,

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

@@ -23,7 +23,7 @@ import {useMutation, useQueryClient} from 'sentry/utils/queryClient';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import useApi from 'sentry/utils/useApi';
 import {useNavigate} from 'sentry/utils/useNavigate';
-import withOrganization from 'sentry/utils/withOrganization';
+import useOrganization from 'sentry/utils/useOrganization';
 import NewTokenHandler from 'sentry/views/settings/components/newTokenHandler';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 import TextBlock from 'sentry/views/settings/components/text/textBlock';
@@ -57,7 +57,7 @@ function AuthTokenCreateForm({
     [navigate, organization.slug]
   );
 
-  const {mutate: submitToken} = useMutation<
+  const {mutate: submitToken, isPending} = useMutation<
     CreateOrgAuthTokensResponse,
     RequestError,
     CreateTokenQueryVariables
@@ -102,13 +102,12 @@ function AuthTokenCreateForm({
       initialData={initialData}
       apiEndpoint={`/organizations/${organization.slug}/org-auth-tokens/`}
       onSubmit={({name}) => {
-        submitToken({
-          name,
-        });
+        submitToken({name});
       }}
       onCancel={handleGoBack}
       submitLabel={t('Create Auth Token')}
       requireChanges
+      submitDisabled={isPending}
     >
       <TextField
         name="name"
@@ -130,11 +129,8 @@ function AuthTokenCreateForm({
   );
 }
 
-export function OrganizationAuthTokensNewAuthToken({
-  organization,
-}: {
-  organization: Organization;
-}) {
+export default function OrganizationAuthTokensNewAuthToken() {
+  const organization = useOrganization();
   const navigate = useNavigate();
   const [newToken, setNewToken] = useState<OrgAuthTokenWithToken | null>(null);
 
@@ -182,8 +178,6 @@ export function OrganizationAuthTokensNewAuthToken({
   );
 }
 
-export default withOrganization(OrganizationAuthTokensNewAuthToken);
-
 const ScopeHelpText = styled('div')`
   color: ${p => p.theme.subText};
 `;