From 39a785e8742a12656a6b7d1abfbf295add9520a5 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Fri, 8 May 2026 10:24:17 +0200
Subject: [PATCH 1/2] fix(settings): defer sentry app form mount until data
 loads

The Sentry App edit page mounted `useScrapsForm` before the app data
had finished loading, so the form's internal state was initialized
from empty/default values. When the data arrived the form re-rendered
but TanStack Form does not pick up new `defaultValues` after init,
causing visible flashes (e.g. the Alert Rule Action switch flicking
from off to on) and a risk of saving stale values.

Extract the form into `SentryApplicationFormBody`, which the parent
only mounts once the app query resolves (or for the new-app route),
so `useScrapsForm` is initialized with the real values on first
render. Tokens are still prefetched in parallel from the parent so
the credentials panel renders without waiting on a second roundtrip.

Refs #114138
---
 .../sentryApplicationDetails.tsx              | 668 +++++++++---------
 1 file changed, 339 insertions(+), 329 deletions(-)

diff --git a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx
index 451ba984d641bb..2e8eddbbc4f658 100644
--- a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx
+++ b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx
@@ -221,7 +221,6 @@ function getSchemaFieldValue(schema: SentryApp['schema'] | null | undefined) {
 }
 
 export default function SentryApplicationDetails() {
-  const navigate = useNavigate();
   const location = useLocation();
   const {appSlug} = useParams<{appSlug: string}>();
   const organization = useOrganization();
@@ -229,17 +228,13 @@ export default function SentryApplicationDetails() {
   const hasPageFrame = useHasPageFrameFeature();
   const queryClient = useQueryClient();
 
-  const isEditingApp = !!appSlug;
-
-  const SENTRY_APP_API_TOKENS_QUERY_KEY = makeSentryAppApiTokensQueryKey(appSlug);
+  const isInternalRoute = location.pathname.endsWith('new-internal/');
 
-  const sentryAppQueryOptions = sentryAppApiOptions({
-    appSlug: isEditingApp ? appSlug : null,
-  });
+  const sentryAppQueryOptions = sentryAppApiOptions({appSlug: appSlug ?? null});
 
   const {
     data: app,
-    isPending,
+    isLoading,
     isError,
     refetch,
   } = useQuery({
@@ -258,13 +253,59 @@ export default function SentryApplicationDetails() {
       return found ? {json: found, headers: {}} : undefined;
     },
   });
+
   const {data: tokens = []} = useApiQuery<InternalAppApiToken[]>(
-    SENTRY_APP_API_TOKENS_QUERY_KEY,
-    {
-      staleTime: 30000,
-      enabled: isEditingApp,
-    }
+    makeSentryAppApiTokensQueryKey(appSlug ?? ''),
+    {staleTime: 30_000, enabled: !!appSlug}
+  );
+
+  const isInternal = app ? app.status === 'internal' : isInternalRoute;
+  const headerTitle = tct('[action] [type] Integration', {
+    action: app ? 'Edit' : 'Create',
+    type: isInternal ? 'Internal' : 'Public',
+  });
+
+  return (
+    <div>
+      {hasPageFrame ? (
+        <BreadcrumbTitle routes={routes} title={appSlug ? (app?.name ?? '') : t('New')} />
+      ) : (
+        <SettingsPageHeader title={headerTitle} />
+      )}
+
+      {isLoading ? (
+        <LoadingIndicator />
+      ) : isError ? (
+        <LoadingError onRetry={refetch} />
+      ) : (
+        <SentryApplicationForm
+          app={app}
+          appSlug={appSlug}
+          tokens={tokens}
+          isInternal={isInternal}
+        />
+      )}
+    </div>
   );
+}
+
+function SentryApplicationForm({
+  app,
+  appSlug,
+  tokens,
+  isInternal,
+}: {
+  app: SentryApp | undefined;
+  appSlug: string | undefined;
+  isInternal: boolean;
+  tokens: InternalAppApiToken[];
+}) {
+  const navigate = useNavigate();
+  const organization = useOrganization();
+  const queryClient = useQueryClient();
+
+  const sentryAppQueryOptions = sentryAppApiOptions({appSlug: appSlug ?? null});
+
   const [newTokens, setNewTokens] = useState<NewInternalAppApiToken[]>([]);
   const [scopeErrors, setScopeErrors] = useState<ScopeErrors>({permissions: {}});
 
@@ -323,23 +364,10 @@ export default function SentryApplicationDetails() {
     return organization.access.includes('org:write');
   };
 
-  const isInternal = () => {
-    if (app) {
-      return app.status === 'internal';
-    }
-    return location.pathname.endsWith('new-internal/');
-  };
-
   const showAuthInfo = () => !(app?.clientSecret?.[0] === '*');
 
-  const headerTitle = () => {
-    const action = app ? 'Edit' : 'Create';
-    const type = isInternal() ? 'Internal' : 'Public';
-    return tct('[action] [type] Integration', {action, type});
-  };
-
   const handleSubmitSuccess = (data: SentryApp) => {
-    const type = isInternal() ? 'internal' : 'public';
+    const type = isInternal ? 'internal' : 'public';
     const baseUrl = `/settings/${organization.slug}/developer-settings/`;
     const url = app ? `${baseUrl}?type=${type}` : `${baseUrl}${data.slug}/`;
 
@@ -357,7 +385,7 @@ export default function SentryApplicationDetails() {
           }
       );
 
-      refetch();
+      queryClient.invalidateQueries({queryKey: sentryAppQueryOptions.queryKey});
     } else {
       addSuccessMessage(t('%s successfully created.', data.name));
     }
@@ -380,7 +408,11 @@ export default function SentryApplicationDetails() {
   const handleFinishNewToken = (newToken: NewInternalAppApiToken) => {
     const updatedNewTokens = newTokens.filter(token => token.id !== newToken.id);
     const updatedTokens = tokens.concat(newToken);
-    setApiQueryData(queryClient, SENTRY_APP_API_TOKENS_QUERY_KEY, updatedTokens);
+    setApiQueryData(
+      queryClient,
+      makeSentryAppApiTokensQueryKey(appSlug ?? ''),
+      updatedTokens
+    );
     setNewTokens(updatedNewTokens);
   };
 
@@ -391,7 +423,11 @@ export default function SentryApplicationDetails() {
 
     const updatedTokens = tokens.filter(tok => tok.id !== token.id);
     await removeTokenMutation.mutateAsync({sentryAppSlug: app.slug, tokenId: token.id});
-    setApiQueryData(queryClient, SENTRY_APP_API_TOKENS_QUERY_KEY, updatedTokens);
+    setApiQueryData(
+      queryClient,
+      makeSentryAppApiTokensQueryKey(appSlug ?? ''),
+      updatedTokens
+    );
   };
 
   const renderTokens = () => {
@@ -470,7 +506,7 @@ export default function SentryApplicationDetails() {
         model={app}
         onSave={addAvatar}
         title={isColor ? t('Logo') : t('Small Icon')}
-        help={styleProps.help.concat(isInternal() ? '' : t(' Required for publishing.'))}
+        help={styleProps.help.concat(isInternal ? '' : t(' Required for publishing.'))}
         defaultChoice={{
           label: styleProps.label,
           description: styleProps.description,
@@ -484,13 +520,13 @@ export default function SentryApplicationDetails() {
     author: app?.author ?? '',
     webhookUrl: app?.webhookUrl ?? '',
     redirectUrl: app?.redirectUrl ?? '',
-    verifyInstall: isInternal() ? false : (app?.verifyInstall ?? true),
+    verifyInstall: isInternal ? false : (app?.verifyInstall ?? true),
     isAlertable: app?.isAlertable ?? false,
     schema: getSchemaFieldValue(app?.schema),
     overview: app?.overview ?? '',
     allowedOrigins: convertMultilineFieldValue(app?.allowedOrigins ?? []),
     organization: organization.slug,
-    isInternal: isInternal(),
+    isInternal,
     scopes: app ? [...app.scopes] : [],
     events: app ? normalize(app.events) : [],
   };
@@ -589,321 +625,295 @@ export default function SentryApplicationDetails() {
   });
 
   return (
-    <div>
-      {hasPageFrame ? (
-        <BreadcrumbTitle
-          routes={routes}
-          title={isEditingApp ? (app?.name ?? '') : t('New')}
-        />
-      ) : (
-        <SettingsPageHeader title={headerTitle()} />
-      )}
-
-      {isEditingApp && isPending ? (
-        <LoadingIndicator />
-      ) : isEditingApp && isError ? (
-        <LoadingError onRetry={refetch} />
-      ) : (
-        <form.AppForm form={form}>
-          <form.FieldGroup
-            title={
-              isInternal()
-                ? t('Internal Integration Details')
-                : t('Public Integration Details')
-            }
-          >
-            <form.AppField name="name">
-              {field => (
-                <field.Layout.Row
-                  label={t('Name')}
-                  hintText={t('Human readable name of your Integration.')}
-                  required
-                >
-                  <field.Input
-                    value={field.state.value}
-                    onChange={field.handleChange}
-                    placeholder={t('e.g. My Integration')}
-                  />
-                </field.Layout.Row>
-              )}
-            </form.AppField>
-
-            {!isInternal() && (
-              <form.AppField name="author">
-                {field => (
-                  <field.Layout.Row
-                    label={t('Author')}
-                    hintText={t(
-                      'The company or person who built and maintains this Integration.'
-                    )}
-                    required
-                  >
-                    <field.Input
-                      value={field.state.value}
-                      onChange={field.handleChange}
-                      placeholder={t('e.g. Acme Software')}
-                    />
-                  </field.Layout.Row>
+    <form.AppForm form={form}>
+      <form.FieldGroup
+        title={
+          isInternal ? t('Internal Integration Details') : t('Public Integration Details')
+        }
+      >
+        <form.AppField name="name">
+          {field => (
+            <field.Layout.Row
+              label={t('Name')}
+              hintText={t('Human readable name of your Integration.')}
+              required
+            >
+              <field.Input
+                value={field.state.value}
+                onChange={field.handleChange}
+                placeholder={t('e.g. My Integration')}
+              />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+
+        {!isInternal && (
+          <form.AppField name="author">
+            {field => (
+              <field.Layout.Row
+                label={t('Author')}
+                hintText={t(
+                  'The company or person who built and maintains this Integration.'
                 )}
-              </form.AppField>
+                required
+              >
+                <field.Input
+                  value={field.state.value}
+                  onChange={field.handleChange}
+                  placeholder={t('e.g. Acme Software')}
+                />
+              </field.Layout.Row>
             )}
-
-            <form.AppField
-              name="webhookUrl"
-              listeners={{
-                onChange: ({value, fieldApi}) => {
-                  const isAlertable = fieldApi.form.getFieldValue('isAlertable');
-                  if (isInternal() && !value && isAlertable) {
-                    fieldApi.form.setFieldValue('isAlertable', false);
-                  }
-                },
-              }}
-            >
-              {field => (
-                <field.Layout.Row
-                  label={t('Webhook URL')}
-                  hintText={tct(
-                    'All webhook requests for your integration will be sent to this URL. Visit the [webhookDocs:documentation] to see the different types and payloads.',
-                    {
-                      webhookDocs: (
-                        <ExternalLink href="https://docs.sentry.io/product/integrations/integration-platform/webhooks/" />
-                      ),
-                    }
-                  )}
-                  required={!isInternal()}
-                >
-                  <field.Input
-                    value={field.state.value}
-                    onChange={field.handleChange}
-                    placeholder={t('e.g. https://example.com/sentry/webhook/')}
-                  />
-                </field.Layout.Row>
+          </form.AppField>
+        )}
+
+        <form.AppField
+          name="webhookUrl"
+          listeners={{
+            onChange: ({value, fieldApi}) => {
+              const isAlertable = fieldApi.form.getFieldValue('isAlertable');
+              if (isInternal && !value && isAlertable) {
+                fieldApi.form.setFieldValue('isAlertable', false);
+              }
+            },
+          }}
+        >
+          {field => (
+            <field.Layout.Row
+              label={t('Webhook URL')}
+              hintText={tct(
+                'All webhook requests for your integration will be sent to this URL. Visit the [webhookDocs:documentation] to see the different types and payloads.',
+                {
+                  webhookDocs: (
+                    <ExternalLink href="https://docs.sentry.io/product/integrations/integration-platform/webhooks/" />
+                  ),
+                }
               )}
-            </form.AppField>
-
-            {!isInternal() && (
-              <form.AppField name="redirectUrl">
-                {field => (
-                  <field.Layout.Row
-                    label={t('Redirect URL')}
-                    hintText={t(
-                      'The URL Sentry will redirect users to after installation.'
-                    )}
-                  >
-                    <field.Input
-                      value={field.state.value}
-                      onChange={field.handleChange}
-                      placeholder={t('e.g. https://example.com/sentry/setup/')}
-                    />
-                  </field.Layout.Row>
-                )}
-              </form.AppField>
+              required={!isInternal}
+            >
+              <field.Input
+                value={field.state.value}
+                onChange={field.handleChange}
+                placeholder={t('e.g. https://example.com/sentry/webhook/')}
+              />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+
+        {!isInternal && (
+          <form.AppField name="redirectUrl">
+            {field => (
+              <field.Layout.Row
+                label={t('Redirect URL')}
+                hintText={t('The URL Sentry will redirect users to after installation.')}
+              >
+                <field.Input
+                  value={field.state.value}
+                  onChange={field.handleChange}
+                  placeholder={t('e.g. https://example.com/sentry/setup/')}
+                />
+              </field.Layout.Row>
             )}
-
-            {!isInternal() && (
-              <form.AppField name="verifyInstall">
-                {field => (
-                  <field.Layout.Row
-                    label={t('Verify Installation')}
-                    hintText={t(
-                      'If enabled, installations will need to be verified before becoming installed.'
-                    )}
-                  >
-                    <field.Switch
-                      checked={field.state.value}
-                      onChange={field.handleChange}
-                    />
-                  </field.Layout.Row>
+          </form.AppField>
+        )}
+
+        {!isInternal && (
+          <form.AppField name="verifyInstall">
+            {field => (
+              <field.Layout.Row
+                label={t('Verify Installation')}
+                hintText={t(
+                  'If enabled, installations will need to be verified before becoming installed.'
                 )}
-              </form.AppField>
+              >
+                <field.Switch checked={field.state.value} onChange={field.handleChange} />
+              </field.Layout.Row>
             )}
-
-            <form.AppField name="isAlertable">
-              {field => (
-                <field.Layout.Row
-                  label={t('Alert Rule Action')}
-                  hintText={tct(
-                    'If enabled, this integration will be available in Issue Alert rules and Metric Alert rules in Sentry. The notification destination is the Webhook URL specified above. More on actions [learnMore:here].',
-                    {
-                      learnMore: (
-                        <ExternalLink href="https://docs.sentry.io/product/alerts-notifications/notifications/" />
-                      ),
-                    }
-                  )}
-                >
-                  <form.Subscribe
-                    selector={state => isInternal() && !state.values.webhookUrl}
-                  >
-                    {webhookDisabled => (
-                      <field.Switch
-                        checked={field.state.value}
-                        onChange={field.handleChange}
-                        disabled={
-                          webhookDisabled
-                            ? t('Cannot enable alert rule action without a webhook url')
-                            : false
-                        }
-                      />
-                    )}
-                  </form.Subscribe>
-                </field.Layout.Row>
-              )}
-            </form.AppField>
-
-            <form.AppField name="schema">
-              {field => (
-                <field.Layout.Row
-                  label={t('Schema')}
-                  hintText={tct(
-                    'Schema for your UI components. Click [schemaDocs:here] for documentation.',
-                    {
-                      schemaDocs: (
-                        <ExternalLink href="https://docs.sentry.io/product/integrations/integration-platform/ui-components/" />
-                      ),
-                    }
-                  )}
-                >
-                  <field.TextArea
-                    autosize
-                    value={field.state.value}
-                    onChange={field.handleChange}
-                  />
-                </field.Layout.Row>
-              )}
-            </form.AppField>
-
-            <form.AppField name="overview">
-              {field => (
-                <field.Layout.Row
-                  label={t('Overview')}
-                  hintText={t('Description of your Integration and its functionality.')}
-                >
-                  <field.TextArea
-                    autosize
-                    value={field.state.value}
-                    onChange={field.handleChange}
-                  />
-                </field.Layout.Row>
+          </form.AppField>
+        )}
+
+        <form.AppField name="isAlertable">
+          {field => (
+            <field.Layout.Row
+              label={t('Alert Rule Action')}
+              hintText={tct(
+                'If enabled, this integration will be available in Issue Alert rules and Metric Alert rules in Sentry. The notification destination is the Webhook URL specified above. More on actions [learnMore:here].',
+                {
+                  learnMore: (
+                    <ExternalLink href="https://docs.sentry.io/product/alerts-notifications/notifications/" />
+                  ),
+                }
               )}
-            </form.AppField>
-
-            <form.AppField name="allowedOrigins">
-              {field => (
-                <field.Layout.Row
-                  label={t('Authorized JavaScript Origins')}
-                  hintText={t('Separate multiple entries with a newline.')}
-                >
-                  <field.TextArea
-                    autosize
-                    value={field.state.value}
+            >
+              <form.Subscribe selector={state => isInternal && !state.values.webhookUrl}>
+                {webhookDisabled => (
+                  <field.Switch
+                    checked={field.state.value}
                     onChange={field.handleChange}
-                    placeholder={t('e.g. example.com')}
+                    disabled={
+                      webhookDisabled
+                        ? t('Cannot enable alert rule action without a webhook url')
+                        : false
+                    }
                   />
-                </field.Layout.Row>
+                )}
+              </form.Subscribe>
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+
+        <form.AppField name="schema">
+          {field => (
+            <field.Layout.Row
+              label={t('Schema')}
+              hintText={tct(
+                'Schema for your UI components. Click [schemaDocs:here] for documentation.',
+                {
+                  schemaDocs: (
+                    <ExternalLink href="https://docs.sentry.io/product/integrations/integration-platform/ui-components/" />
+                  ),
+                }
               )}
-            </form.AppField>
-          </form.FieldGroup>
-
-          {getAvatarChooser(true)}
-          {getAvatarChooser(false)}
-
-          <form.Subscribe selector={state => isInternal() && !state.values.webhookUrl}>
-            {webhookDisabled => (
-              <PermissionsObserver
-                webhookDisabled={webhookDisabled}
-                appPublished={app ? app.status === 'published' : false}
-                scopes={app ? [...app.scopes] : []}
-                events={app ? normalize(app.events) : []}
-                newApp={!app}
-                permissionErrors={scopeErrors.permissions}
-                continuousIntegrationError={scopeErrors.continuousIntegration}
-                onScopesChange={scopes => form.setFieldValue('scopes', scopes)}
-                onEventsChange={events => form.setFieldValue('events', events)}
+            >
+              <field.TextArea
+                autosize
+                value={field.state.value}
+                onChange={field.handleChange}
               />
-            )}
-          </form.Subscribe>
-
-          {app?.status === 'internal' && (
-            <PanelTable
-              headers={[
-                t('Token'),
-                t('Created On'),
-                t('Scopes'),
-                <AddTokenHeader key="token-add">
-                  <Button
-                    size="xs"
-                    icon={<IconAdd />}
-                    onClick={onAddToken}
-                    data-test-id="token-add"
-                  >
-                    {t('New Token')}
-                  </Button>
-                </AddTokenHeader>,
-              ]}
-              isEmpty={tokens.length === 0}
-              emptyMessage={t("You haven't created any authentication tokens yet.")}
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+
+        <form.AppField name="overview">
+          {field => (
+            <field.Layout.Row
+              label={t('Overview')}
+              hintText={t('Description of your Integration and its functionality.')}
             >
-              {renderTokens()}
-            </PanelTable>
+              <field.TextArea
+                autosize
+                value={field.state.value}
+                onChange={field.handleChange}
+              />
+            </field.Layout.Row>
           )}
+        </form.AppField>
 
-          {app && (
-            <Panel>
-              <PanelHeader>{t('Credentials')}</PanelHeader>
-              <PanelBody>
-                {app.status !== 'internal' && (
-                  <FormField name="clientId" label="Client ID">
-                    {({id}: {id: string}) => (
-                      <TextCopyInput id={id}>{app.clientId ?? ''}</TextCopyInput>
-                    )}
-                  </FormField>
+        <form.AppField name="allowedOrigins">
+          {field => (
+            <field.Layout.Row
+              label={t('Authorized JavaScript Origins')}
+              hintText={t('Separate multiple entries with a newline.')}
+            >
+              <field.TextArea
+                autosize
+                value={field.state.value}
+                onChange={field.handleChange}
+                placeholder={t('e.g. example.com')}
+              />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+      </form.FieldGroup>
+
+      {getAvatarChooser(true)}
+      {getAvatarChooser(false)}
+
+      <form.Subscribe selector={state => isInternal && !state.values.webhookUrl}>
+        {webhookDisabled => (
+          <PermissionsObserver
+            webhookDisabled={webhookDisabled}
+            appPublished={app ? app.status === 'published' : false}
+            scopes={app ? [...app.scopes] : []}
+            events={app ? normalize(app.events) : []}
+            newApp={!app}
+            permissionErrors={scopeErrors.permissions}
+            continuousIntegrationError={scopeErrors.continuousIntegration}
+            onScopesChange={scopes => form.setFieldValue('scopes', scopes)}
+            onEventsChange={events => form.setFieldValue('events', events)}
+          />
+        )}
+      </form.Subscribe>
+
+      {app?.status === 'internal' && (
+        <PanelTable
+          headers={[
+            t('Token'),
+            t('Created On'),
+            t('Scopes'),
+            <AddTokenHeader key="token-add">
+              <Button
+                size="xs"
+                icon={<IconAdd />}
+                onClick={onAddToken}
+                data-test-id="token-add"
+              >
+                {t('New Token')}
+              </Button>
+            </AddTokenHeader>,
+          ]}
+          isEmpty={tokens.length === 0}
+          emptyMessage={t("You haven't created any authentication tokens yet.")}
+        >
+          {renderTokens()}
+        </PanelTable>
+      )}
+
+      {app && (
+        <Panel>
+          <PanelHeader>{t('Credentials')}</PanelHeader>
+          <PanelBody>
+            {app.status !== 'internal' && (
+              <FormField name="clientId" label="Client ID">
+                {({id}: {id: string}) => (
+                  <TextCopyInput id={id}>{app.clientId ?? ''}</TextCopyInput>
                 )}
-                <FormField
-                  name="clientSecret"
-                  label="Client Secret"
-                  help={t(`Your secret is only available briefly after integration creation. Make
+              </FormField>
+            )}
+            <FormField
+              name="clientSecret"
+              label="Client Secret"
+              help={t(`Your secret is only available briefly after integration creation. Make
                 sure to save this value!`)}
-                >
-                  {({id}: {id: string}) =>
-                    app.clientSecret ? (
-                      <Tooltip
-                        disabled={showAuthInfo()}
-                        position="right"
-                        containerDisplayMode="inline"
-                        title={t(
-                          'Only Manager or Owner can view these credentials, or the permissions for this integration exceed those of your role.'
+            >
+              {({id}: {id: string}) =>
+                app.clientSecret ? (
+                  <Tooltip
+                    disabled={showAuthInfo()}
+                    position="right"
+                    containerDisplayMode="inline"
+                    title={t(
+                      'Only Manager or Owner can view these credentials, or the permissions for this integration exceed those of your role.'
+                    )}
+                  >
+                    <TextCopyInput id={id}>{app.clientSecret}</TextCopyInput>
+                  </Tooltip>
+                ) : (
+                  <ClientSecret>
+                    <HiddenSecret>{t('hidden')}</HiddenSecret>
+                    {hasTokenAccess() ? (
+                      <Confirm
+                        onConfirm={rotateClientSecret}
+                        message={t(
+                          'Are you sure you want to rotate the client secret? The current one will not be usable anymore, and this cannot be undone.'
                         )}
+                        errorMessage={t('Error rotating secret')}
                       >
-                        <TextCopyInput id={id}>{app.clientSecret}</TextCopyInput>
-                      </Tooltip>
-                    ) : (
-                      <ClientSecret>
-                        <HiddenSecret>{t('hidden')}</HiddenSecret>
-                        {hasTokenAccess() ? (
-                          <Confirm
-                            onConfirm={rotateClientSecret}
-                            message={t(
-                              'Are you sure you want to rotate the client secret? The current one will not be usable anymore, and this cannot be undone.'
-                            )}
-                            errorMessage={t('Error rotating secret')}
-                          >
-                            <Button variant="danger">{t('Rotate client secret')}</Button>
-                          </Confirm>
-                        ) : undefined}
-                      </ClientSecret>
-                    )
-                  }
-                </FormField>
-              </PanelBody>
-            </Panel>
-          )}
-
-          <Flex justify="end" paddingTop="xl">
-            <form.SubmitButton>{t('Save Changes')}</form.SubmitButton>
-          </Flex>
-        </form.AppForm>
+                        <Button variant="danger">{t('Rotate client secret')}</Button>
+                      </Confirm>
+                    ) : undefined}
+                  </ClientSecret>
+                )
+              }
+            </FormField>
+          </PanelBody>
+        </Panel>
       )}
-    </div>
+
+      <Flex justify="end" paddingTop="xl">
+        <form.SubmitButton>{t('Save Changes')}</form.SubmitButton>
+      </Flex>
+    </form.AppForm>
   );
 }
 

From 9d8857e2a40c91df0ce5a31348c0dd72dccd027f Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Fri, 8 May 2026 12:12:41 +0200
Subject: [PATCH 2/2] fix(settings): wait for fresh data before mounting sentry
 app form

The detail useQuery uses placeholderData to instantly seed the page
from the list cache (so the breadcrumb name does not flicker). With
placeholderData set, the query reports isLoading=false on first
render, so the form mounted with stale list values. TanStack Form
snapshots defaultValues on mount, so the form ignored the real
response when it arrived and could save stale data.

Also gate the form on isPlaceholderData so it only mounts once the
real fetch resolves. The breadcrumb still uses app?.name from the
placeholder, preserving the no-flicker UX.

Refs #114138
---
 .../organizationDeveloperSettings/sentryApplicationDetails.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx
index 2e8eddbbc4f658..96ae9d23ed9590 100644
--- a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx
+++ b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx
@@ -236,6 +236,7 @@ export default function SentryApplicationDetails() {
     data: app,
     isLoading,
     isError,
+    isPlaceholderData,
     refetch,
   } = useQuery({
     ...sentryAppQueryOptions,
@@ -273,7 +274,7 @@ export default function SentryApplicationDetails() {
         <SettingsPageHeader title={headerTitle} />
       )}
 
-      {isLoading ? (
+      {isLoading || isPlaceholderData ? (
         <LoadingIndicator />
       ) : isError ? (
         <LoadingError onRetry={refetch} />