ref(dynamic-sampling): Use individual AppField per project rate

Replace the single projectRates record field with per-project
AppField instances. Each row now gets its own field via
form.AppField name={projectRates.${projectId}}, so the form system
handles per-field validation, error display, and canSubmit natively.

Removes the showErrors/getProjectRateError workaround. Bulk edit
uses form.setFieldValue per project instead of updating the record.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: priscilawebdev

static/app/views/settings/dynamicSampling/projectSampling.tsx

@@ -38,6 +38,19 @@ const projectSamplingSchema = z.object({
   projectRates: z.record(z.string(), sampleRateField),
 });
 
+// Helper to extract the form type from the component — avoids deeply generic TanStack types.
+// Consumers should not construct this type directly; it's inferred from useScrapsForm.
+function _formTypeHelper() {
+  // This function is never called — it exists only for type inference.
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useScrapsForm({
+    ...defaultFormOptions,
+    defaultValues: {projectRates: {} as Record<string, string>},
+    validators: {onDynamic: projectSamplingSchema},
+  });
+}
+export type ProjectSamplingForm = ReturnType<typeof _formTypeHelper>;
+
 export function ProjectSampling() {
   const hasAccess = useHasDynamicSamplingWriteAccess();
   const [period, setPeriod] = useState<ProjectionSamplePeriod>('24h');
@@ -133,40 +146,31 @@ export function ProjectSampling() {
             {sampleCountsQuery.isError ? (
               <LoadingError onRetry={sampleCountsQuery.refetch} />
             ) : (
-              <form.AppField name="projectRates">
-                {field => (
-                  <ProjectsEditTable
-                    period={period}
-                    editMode={editMode}
-                    onEditModeChange={setEditMode}
-                    isLoading={sampleRatesQuery.isPending || sampleCountsQuery.isPending}
-                    sampleCounts={sampleCountsQuery.data}
-                    projectRates={field.state.value}
-                    savedProjectRates={savedProjectRates}
-                    onProjectRatesChange={field.handleChange}
-                    showErrors={!field.state.meta.isValid}
-                    actions={
-                      <Fragment>
-                        <Button
-                          disabled={!isDirty || updateSamplingProjectRates.isPending}
-                          onClick={() => {
-                            form.reset();
-                            setEditMode('single');
-                          }}
-                        >
-                          {t('Reset')}
-                        </Button>
-                        <form.SubmitButton
-                          disabled={!hasAccess || !canSubmit}
-                          formNoValidate
-                        >
-                          {t('Apply Changes')}
-                        </form.SubmitButton>
-                      </Fragment>
-                    }
-                  />
-                )}
-              </form.AppField>
+              <ProjectsEditTable
+                form={form}
+                period={period}
+                editMode={editMode}
+                onEditModeChange={setEditMode}
+                isLoading={sampleRatesQuery.isPending || sampleCountsQuery.isPending}
+                sampleCounts={sampleCountsQuery.data}
+                savedProjectRates={savedProjectRates}
+                actions={
+                  <Fragment>
+                    <Button
+                      disabled={!isDirty || updateSamplingProjectRates.isPending}
+                      onClick={() => {
+                        form.reset();
+                        setEditMode('single');
+                      }}
+                    >
+                      {t('Reset')}
+                    </Button>
+                    <form.SubmitButton disabled={!hasAccess || !canSubmit} formNoValidate>
+                      {t('Apply Changes')}
+                    </form.SubmitButton>
+                  </Fragment>
+                }
+              />
             )}
             <FormActions />
           </Fragment>

static/app/views/settings/dynamicSampling/projectsEditTable.tsx

@@ -3,12 +3,14 @@ import {Fragment, useCallback, useMemo, useRef, useState} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {useStore} from '@sentry/scraps/form';
+
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {Panel} from 'sentry/components/panels/panel';
 import {t} from 'sentry/locale';
 import {useProjects} from 'sentry/utils/useProjects';
 import {OrganizationSampleRateInput} from 'sentry/views/settings/dynamicSampling/organizationSampleRateInput';
-import {sampleRateField} from 'sentry/views/settings/dynamicSampling/organizationSampling';
+import type {ProjectSamplingForm} from 'sentry/views/settings/dynamicSampling/projectSampling';
 import {ProjectsTable} from 'sentry/views/settings/dynamicSampling/projectsTable';
 import {SamplingBreakdown} from 'sentry/views/settings/dynamicSampling/samplingBreakdown';
 import {mapArrayToObject} from 'sentry/views/settings/dynamicSampling/utils';
@@ -23,48 +25,34 @@ import type {
 interface Props {
   actions: React.ReactNode;
   editMode: 'single' | 'bulk';
+  form: ProjectSamplingForm;
   isLoading: boolean;
   onEditModeChange: (mode: 'single' | 'bulk') => void;
-  onProjectRatesChange: (
-    updater:
-      | Record<string, string>
-      | ((prev: Record<string, string>) => Record<string, string>)
-  ) => void;
   period: ProjectionSamplePeriod;
-  projectRates: Record<string, string>;
   sampleCounts: ProjectSampleCount[];
   savedProjectRates: Record<string, string>;
-  showErrors?: boolean;
 }
 
 const EMPTY_ARRAY: any = [];
 
-function getProjectRateError(rate: string): string | undefined {
-  const result = sampleRateField.safeParse(rate);
-  if (result.success) {
-    return undefined;
-  }
-  return result.error.issues[0]?.message;
-}
-
 export function ProjectsEditTable({
   actions,
   isLoading: isLoadingProp,
   sampleCounts,
   editMode,
   period,
   onEditModeChange,
-  projectRates,
+  form,
   savedProjectRates,
-  onProjectRatesChange,
-  showErrors,
 }: Props) {
   const {projects, fetching} = useProjects();
   const [isBulkEditEnabled, setIsBulkEditEnabled] = useState(false);
   const [orgRate, setOrgRate] = useState<string>('');
 
   const projectRateSnapshotRef = useRef<Record<string, string>>({});
 
+  const projectRates = useStore(form.baseStore, s => s.values.projectRates);
+
   const dataByProjectId = useMemo(
     () =>
       mapArrayToObject({
@@ -77,13 +65,10 @@ export function ProjectsEditTable({
 
   const handleProjectChange = useCallback(
     (projectId: string, newRate: string) => {
-      onProjectRatesChange(prev => ({
-        ...prev,
-        [projectId]: newRate,
-      }));
+      form.setFieldValue(`projectRates.${projectId}`, newRate);
       onEditModeChange('single');
     },
-    [onProjectRatesChange, onEditModeChange]
+    [form, onEditModeChange]
   );
 
   const handleOrgChange = useCallback(
@@ -116,11 +101,13 @@ export function ProjectsEditTable({
         valueSelector: item => formatPercent(item.sampleRate),
       });
 
-      onProjectRatesChange(prev => ({...prev, ...newProjectValues}));
+      for (const [projectId, rate] of Object.entries(newProjectValues)) {
+        form.setFieldValue(`projectRates.${projectId}`, rate);
+      }
       setOrgRate(newRate);
       onEditModeChange('bulk');
     },
-    [dataByProjectId, editMode, onProjectRatesChange, onEditModeChange, projectRates]
+    [dataByProjectId, editMode, form, onEditModeChange, projectRates]
   );
 
   const handleBulkEditChange = useCallback((newIsActive: boolean) => {
@@ -145,12 +132,9 @@ export function ProjectsEditTable({
           project,
           initialSampleRate: savedProjectRates[project.id]!,
           sampleRate: projectRates[project.id]!,
-          error: showErrors
-            ? getProjectRateError(projectRates[project.id] ?? '')
-            : undefined,
         };
       }),
-    [dataByProjectId, showErrors, savedProjectRates, projects, projectRates]
+    [dataByProjectId, savedProjectRates, projects, projectRates]
   );
 
   const totalSpanCount = useMemo(
@@ -227,6 +211,7 @@ export function ProjectsEditTable({
               period={period}
               isLoading={isLoading}
               items={items}
+              form={form}
             />
             <Footer>{actions}</Footer>
           </Fragment>

static/app/views/settings/dynamicSampling/projectsTable.tsx

@@ -19,6 +19,7 @@ import {formatAbbreviatedNumber} from 'sentry/utils/formatters';
 import {oxfordizeArray} from 'sentry/utils/oxfordizeArray';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {PercentInput} from 'sentry/views/settings/dynamicSampling/percentInput';
+import type {ProjectSamplingForm} from 'sentry/views/settings/dynamicSampling/projectSampling';
 import {useHasDynamicSamplingWriteAccess} from 'sentry/views/settings/dynamicSampling/utils/access';
 import {parsePercent} from 'sentry/views/settings/dynamicSampling/utils/parsePercent';
 import type {
@@ -49,6 +50,7 @@ interface Props {
   period: ProjectionSamplePeriod;
   rateHeader: React.ReactNode;
   canEdit?: boolean;
+  form?: ProjectSamplingForm;
   inputTooltip?: string;
   onChange?: (projectId: string, value: string) => void;
 }
@@ -65,6 +67,7 @@ export function ProjectsTable({
   period,
   isLoading,
   emptyMessage,
+  form,
 }: Props) {
   const hasAccess = useHasDynamicSamplingWriteAccess();
   const [tableSort, setTableSort] = useState<'asc' | 'desc'>('desc');
@@ -167,14 +170,31 @@ export function ProjectsTable({
                     transform: `translateY(${virtualRow.start}px)`,
                   }}
                 >
-                  <TableRow
-                    canEdit={canEdit}
-                    onChange={onChange}
-                    inputTooltip={inputTooltip}
-                    toggleExpanded={handleToggleItemExpanded}
-                    hasAccess={hasAccess}
-                    {...item}
-                  />
+                  {form ? (
+                    <form.AppField name={`projectRates.${item.project.id}`}>
+                      {field => (
+                        <TableRow
+                          canEdit={canEdit}
+                          onChange={onChange}
+                          inputTooltip={inputTooltip}
+                          toggleExpanded={handleToggleItemExpanded}
+                          hasAccess={hasAccess}
+                          {...item}
+                          sampleRate={field.state.value}
+                          error={field.state.meta.errors[0]?.message}
+                        />
+                      )}
+                    </form.AppField>
+                  ) : (
+                    <TableRow
+                      canEdit={canEdit}
+                      onChange={onChange}
+                      inputTooltip={inputTooltip}
+                      toggleExpanded={handleToggleItemExpanded}
+                      hasAccess={hasAccess}
+                      {...item}
+                    />
+                  )}
                 </div>
               );
             })}