ref(settings): migrate integration external mapping form to new form system

static/app/components/core/form/field/selectField.spec.tsx

@@ -359,6 +359,51 @@ describe('SelectField', () => {
   });
 });
 
+it('does not pass unmatched object values to react-select callbacks like getOptionValue', () => {
+  // When the current value is an object that doesn't match any option (e.g.
+  // options haven't loaded yet), Select should pass null to react-select —
+  // not the raw object. If the raw object were forwarded, react-select would
+  // treat it as an option and call getOptionValue on it. A custom
+  // getOptionValue that accesses option-specific properties (like `.value.id`)
+  // would crash because the raw form value has a different shape.
+  const OBJECT_OPTIONS: Array<SelectValue<{id: string; name: string}>> = [
+    {value: {id: '1', name: 'Apple'}, label: 'Apple'},
+    {value: {id: '2', name: 'Banana'}, label: 'Banana'},
+  ];
+
+  function GetOptionValueForm() {
+    const form = useScrapsForm({
+      ...defaultFormOptions,
+      defaultValues: {fruit: {id: '99', name: 'Mango'} as {id: string; name: string}},
+    });
+
+    return (
+      <form.AppForm form={form}>
+        <form.AppField name="fruit">
+          {field => (
+            <field.Select
+              value={field.state.value}
+              onChange={field.handleChange}
+              options={OBJECT_OPTIONS}
+              isValueEqual={(a, b) => a.id === b.id}
+              getOptionValue={opt => opt.value.id}
+            />
+          )}
+        </form.AppField>
+      </form.AppForm>
+    );
+  }
+
+  // {id: '99', name: 'Mango'} doesn't match any option. Before the fix, the
+  // raw object was passed to react-select which called getOptionValue on it.
+  // getOptionValue expects a full option {value: {id, name}, label} but
+  // receives the raw {id, name}, so opt.value is undefined and .id throws.
+  render(<GetOptionValueForm />);
+
+  // Should render without crashing — no selected value is shown
+  expect(screen.getByRole('textbox')).toBeInTheDocument();
+});
+
 describe('SelectField disabled', () => {
   it('is disabled when disabled prop is true', () => {
     render(<TestForm label="Favorite Fruit" disabled />);

static/app/components/core/form/field/selectField.tsx

@@ -49,6 +49,11 @@ type BaseSelectFieldProps<TValue, IsMulti extends boolean> = Omit<
 > &
   BaseFieldProps<HTMLInputElement> & {
     options: ReadonlyArray<SelectValue<TValue>>;
+    /**
+     * custom value comparator function
+     * defaults to === comparison of the option values
+     */
+    isValueEqual?: (optionA: TValue, optionB: TValue) => boolean;
   };
 
 // Helper type for non-array constraint

static/app/components/core/form/scrapsForm.tsx

@@ -13,6 +13,8 @@ import {FieldMeta} from '@sentry/scraps/form/field/meta';
 import {FieldLayout} from '@sentry/scraps/form/layout';
 import {FieldGroup} from '@sentry/scraps/form/layout/fieldGroup';
 
+import RequestError from 'sentry/utils/requestError/requestError';
+
 import {InputField} from './field/inputField';
 import {NumberField} from './field/numberField';
 import {PasswordField} from './field/passwordField';
@@ -127,22 +129,58 @@ type InferFormData<T> = T extends {state: {values: infer D}} ? D : never;
  * Sets field errors on a form after submission (e.g., from backend validation).
  * This provides a type-safe way to set errors on specific fields.
  *
+ * Accepts either a `FieldErrors` object for manually constructed errors, or a
+ * `RequestError` to automatically extract field errors from `responseJSON`.
+ * When given a `RequestError`, only keys matching existing form fields are used.
+ * String values are used directly; array values use the first element.
+ *
  * @example
  * ```tsx
- * const form = useScrapsForm({
- *   defaultValues: { firstName: '', lastName: '', address: { city: '' } },
- * });
- *
- * // In onSubmit handler or after receiving backend errors:
- * setFieldErrors(form, {
+ * // With manual field errors:
+ * setFieldErrors(formApi, {
  *   firstName: { message: 'This name is already taken' },
  *   'address.city': { message: 'City not found' },
  * });
+ *
+ * // With a RequestError (e.g., in an onSubmit handler):
+ * onSubmit: ({value, formApi}) => {
+ *   return mutation.mutateAsync(value).catch((error: RequestError) => {
+ *     setFieldErrors(formApi, error);
+ *   });
+ * },
  * ```
  */
 export function setFieldErrors<
   TForm extends {setErrorMap: (...args: any[]) => unknown; state: {values: unknown}},
->(formApi: TForm, errors: FieldErrors<InferFormData<TForm>>): void {
+>(formApi: TForm, errors: FieldErrors<InferFormData<TForm>> | RequestError): void {
+  if (errors instanceof RequestError) {
+    const responseJSON = errors.responseJSON;
+    if (!responseJSON) {
+      return;
+    }
+    const formValues = formApi.state.values;
+    const fieldErrors: Record<string, {message: string}> = {};
+
+    for (const key of Object.keys(responseJSON)) {
+      if (typeof formValues === 'object' && formValues !== null && key in formValues) {
+        const value = responseJSON[key];
+        if (typeof value === 'string') {
+          fieldErrors[key] = {message: value};
+        } else if (Array.isArray(value) && value.length > 0) {
+          fieldErrors[key] = {
+            message: typeof value[0] === 'string' ? value[0] : String(value[0]),
+          };
+        }
+      }
+    }
+
+    if (Object.keys(fieldErrors).length > 0) {
+      formApi.setErrorMap({
+        onSubmit: {fields: fieldErrors},
+      });
+    }
+    return;
+  }
   formApi.setErrorMap({
     onSubmit: {
       fields: errors,

static/app/components/core/form/setFieldErrors.spec.tsx

@@ -0,0 +1,119 @@
+import {setFieldErrors} from '@sentry/scraps/form';
+
+import RequestError from 'sentry/utils/requestError/requestError';
+
+function createMockFormApi(values: Record<string, unknown>) {
+  return {
+    setErrorMap: jest.fn(),
+    state: {values},
+  };
+}
+
+function createRequestError(responseJSON?: Record<string, unknown>): RequestError {
+  const error = new RequestError('POST', '/test/', new Error('test'));
+  if (responseJSON) {
+    error.responseJSON = responseJSON;
+  }
+  return error;
+}
+
+describe('setFieldErrors', () => {
+  describe('with FieldErrors object', () => {
+    it('sets field errors directly via setErrorMap', () => {
+      const formApi = createMockFormApi({name: '', email: ''});
+      const errors = {name: {message: 'Name is required'}};
+
+      setFieldErrors(formApi, errors);
+
+      expect(formApi.setErrorMap).toHaveBeenCalledWith({
+        onSubmit: {fields: errors},
+      });
+    });
+  });
+
+  describe('with RequestError', () => {
+    it('handles string values', () => {
+      const formApi = createMockFormApi({fieldName: ''});
+      const error = createRequestError({fieldName: 'error message'});
+
+      setFieldErrors(formApi, error);
+
+      expect(formApi.setErrorMap).toHaveBeenCalledWith({
+        onSubmit: {fields: {fieldName: {message: 'error message'}}},
+      });
+    });
+
+    it('handles array values by taking the first element', () => {
+      const formApi = createMockFormApi({fieldName: ''});
+      const error = createRequestError({fieldName: ['first error', 'second']});
+
+      setFieldErrors(formApi, error);
+
+      expect(formApi.setErrorMap).toHaveBeenCalledWith({
+        onSubmit: {fields: {fieldName: {message: 'first error'}}},
+      });
+    });
+
+    it('only sets errors for known fields', () => {
+      const formApi = createMockFormApi({name: '', email: ''});
+      const error = createRequestError({
+        name: ['err'],
+        unknown_field: ['err'],
+      });
+
+      setFieldErrors(formApi, error);
+
+      expect(formApi.setErrorMap).toHaveBeenCalledWith({
+        onSubmit: {fields: {name: {message: 'err'}}},
+      });
+    });
+
+    it('does not set errors when responseJSON is missing', () => {
+      const formApi = createMockFormApi({name: ''});
+      const error = createRequestError();
+
+      setFieldErrors(formApi, error);
+
+      expect(formApi.setErrorMap).not.toHaveBeenCalled();
+    });
+
+    it('does not set errors when responseJSON is empty', () => {
+      const formApi = createMockFormApi({name: ''});
+      const error = createRequestError({});
+
+      setFieldErrors(formApi, error);
+
+      expect(formApi.setErrorMap).not.toHaveBeenCalled();
+    });
+
+    it('handles mixed field types (string and array)', () => {
+      const formApi = createMockFormApi({name: '', email: ''});
+      const error = createRequestError({
+        name: 'string error',
+        email: ['array error'],
+      });
+
+      setFieldErrors(formApi, error);
+
+      expect(formApi.setErrorMap).toHaveBeenCalledWith({
+        onSubmit: {
+          fields: {
+            name: {message: 'string error'},
+            email: {message: 'array error'},
+          },
+        },
+      });
+    });
+
+    it('stringifies non-string array items', () => {
+      const formApi = createMockFormApi({field: ''});
+      const error = createRequestError({field: [123]});
+
+      setFieldErrors(formApi, error);
+
+      expect(formApi.setErrorMap).toHaveBeenCalledWith({
+        onSubmit: {fields: {field: {message: '123'}}},
+      });
+    });
+  });
+});

static/app/components/core/select/select.tsx

@@ -27,6 +27,7 @@ import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {IconChevron, IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Choices, SelectValue} from 'sentry/types/core';
+import {defined} from 'sentry/utils';
 import {convertFromSelect2Choices} from 'sentry/utils/convertFromSelect2Choices';
 import {PanelProvider} from 'sentry/utils/panelProvider';
 import type {FormSize, Theme} from 'sentry/utils/theme';
@@ -456,6 +457,15 @@ export type ControlProps<OptionType extends OptionTypeBase = GeneralSelectValue>
        * Whether this selector is being rendered inside a modal. If true, the menu will have a higher z-index.
        */
       isInsideModal?: boolean;
+      /**
+       * custom value comparator function
+       * defaults to === comparison of the option values
+       */
+      isValueEqual?: (
+        optionA: OptionType['value'],
+        optionB: OptionType['value']
+      ) => boolean;
+
       /**
        * Maximum width of the menu component. Menu item labels that overflow the
        * menu's boundaries will automatically be truncated.
@@ -539,7 +549,14 @@ export function Select<OptionType extends GeneralSelectValue = GeneralSelectValu
     options;
 
   // It's possible that `choicesOrOptions` does not exist (e.g. in the case of AsyncSelect)
-  let mappedValue = value;
+  // When isValueEqual is provided, the value is a raw domain object (e.g.
+  // {id, name}) that react-select can't handle directly — it would call
+  // callbacks like getOptionValue on it expecting a full option shape. In that
+  // case, fall back to null instead of passing the raw object through.
+  // Otherwise the value is a primitive or option-shaped object that
+  // react-select can handle directly.
+  const noMatchFallback = props.isValueEqual ? (props.multiple ? [] : null) : value;
+  let mappedValue = noMatchFallback;
 
   if (choicesOrOptions) {
     /**
@@ -554,10 +571,21 @@ export function Select<OptionType extends GeneralSelectValue = GeneralSelectValu
     } else {
       flatOptions = choicesOrOptions.flatMap((option: any) => option);
     }
+
+    const compare = (
+      a: OptionType['value'] | null | undefined,
+      b: OptionType['value'] | null | undefined
+    ) => {
+      if (props.isValueEqual && defined(a) && defined(b)) {
+        return props.isValueEqual(a, b);
+      }
+      return a === b;
+    };
+
     mappedValue =
       props.multiple && Array.isArray(value)
-        ? value.map(val => flatOptions.find(option => option.value === val))
-        : flatOptions.find(opt => opt.value === value) || value;
+        ? value.map(val => flatOptions.find(option => compare(option.value, val)))
+        : flatOptions.find(opt => compare(opt.value, value)) || noMatchFallback;
   }
 
   // Override the default style with in-field labels if they are provided

static/app/utils/integrationUtil.tsx

@@ -1,7 +1,5 @@
 import * as qs from 'query-string';
 
-import type {Result} from '@sentry/scraps/select';
-
 import {
   IconAsana,
   IconBitbucket,
@@ -323,11 +321,6 @@ export const getExternalActorEndpointDetails = (
   };
 };
 
-export const sentryNameToOption = ({id, name}: any): Result => ({
-  value: id,
-  label: name,
-});
-
 export function getIntegrationStatus(integration: Integration) {
   // there are multiple status fields for an integration we consider
   const statusList = [integration.organizationIntegrationStatus, integration.status];

static/app/views/settings/featureFlags/changeTracking/newProviderForm.tsx

@@ -117,23 +117,9 @@ export function NewProviderForm({
     defaultValues,
     validators: {onDynamic: schema},
     onSubmit: ({value, formApi}) => {
-      return mutation.mutateAsync(schema.parse(value)).catch((error: RequestError) => {
-        const responseJSON = error.responseJSON;
-        if (responseJSON?.secret || responseJSON?.provider) {
-          const extractMessage = (val: unknown): string => {
-            if (Array.isArray(val)) {
-              return typeof val[0] === 'string' ? val[0] : JSON.stringify(val[0]);
-            }
-            return typeof val === 'string' ? val : JSON.stringify(val);
-          };
-          const errors: Record<string, {message: string}> = {};
-          if (responseJSON.secret) {
-            errors.secret = {message: extractMessage(responseJSON.secret)};
-          }
-          if (responseJSON.provider) {
-            errors.provider = {message: extractMessage(responseJSON.provider)};
-          }
-          setFieldErrors(formApi, errors);
+      return mutation.mutateAsync(schema.parse(value)).catch(error => {
+        if (error instanceof RequestError) {
+          setFieldErrors(formApi, error);
         }
       });
     },