fix(settings): Surface slug validation errors on org settings form

When changing the org slug to one already in use, the backend returns
a field-level error but the frontend was showing a generic 'Unable to
save change' toast. This was a regression from the form migration to
TanStack which landed after the backend fix.

Use setFieldErrors to display the API validation message inline on the
slug field instead of swallowing it.

Co-authored-by: Claude <noreply@anthropic.com>

Author: cvxluo

static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.spec.tsx

@@ -156,6 +156,28 @@ describe('OrganizationSettingsForm', () => {
     expect(screen.queryByRole('button', {name: 'Cancel'})).not.toBeInTheDocument();
   });
 
+  it('shows field error when slug is already taken', async () => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/`,
+      method: 'PUT',
+      statusCode: 400,
+      body: {slug: ['The slug "taken" is in use by another organization.']},
+    });
+
+    render(
+      <OrganizationSettingsForm initialData={OrganizationFixture()} onSave={onSave} />
+    );
+
+    const input = screen.getByRole('textbox', {name: 'Organization Slug'});
+    await userEvent.clear(input);
+    await userEvent.type(input, 'taken');
+    await userEvent.click(screen.getByRole('button', {name: 'Save'}));
+
+    expect(
+      await screen.findByText('The slug "taken" is in use by another organization.')
+    ).toBeInTheDocument();
+  });
+
   it('can enable codecov', async () => {
     putMock = MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/`,

static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx

@@ -11,6 +11,7 @@ import {
   defaultFormOptions,
   FieldGroup,
   FormSearch,
+  setFieldErrors,
   useScrapsForm,
 } from '@sentry/scraps/form';
 import {Container, Flex} from '@sentry/scraps/layout';
@@ -29,6 +30,7 @@ import {ConfigStore} from 'sentry/stores/configStore';
 import type {MembershipSettingsProps} from 'sentry/types/hooks';
 import type {Organization} from 'sentry/types/organization';
 import {fetchMutation, useMutation} from 'sentry/utils/queryClient';
+import {RequestError} from 'sentry/utils/requestError/requestError';
 import {slugify} from 'sentry/utils/slugify';
 import {useMembers} from 'sentry/utils/useMembers';
 import {useOrganization} from 'sentry/utils/useOrganization';
@@ -430,17 +432,27 @@ export function OrganizationSettingsForm({initialData, onSave}: Props) {
     onError: () => addErrorMessage(t('Unable to save change')),
   });
 
-  const {mutateAsync: updateSlug} = useMutation(orgMutationOptions);
+  const slugMutation = useMutation(
+    mutationOptions({
+      mutationFn: (data: Partial<SlugSchema>) =>
+        fetchMutation<Organization>({method: 'PUT', url: endpoint, data}),
+      onSuccess: updated => onSave(initialData, updated),
+    })
+  );
 
   // Slug form — uses explicit Save button instead of auto-save
   const slugForm = useScrapsForm({
     ...defaultFormOptions,
     defaultValues: {slug: initialData.slug},
     validators: {onDynamic: slugSchema},
-    onSubmit: ({value}) =>
-      updateSlug({slug: value.slug})
-        .then(() => slugForm.reset())
-        .catch(() => {}),
+    onSubmit: ({value, formApi}) =>
+      slugMutation
+        .mutateAsync({slug: value.slug}, {onSuccess: () => formApi.reset()})
+        .catch(error => {
+          if (error instanceof RequestError) {
+            setFieldErrors(formApi, error);
+          }
+        }),
   });
 
   return (