feat(oauth): Show public app device flow URLs (#111655)

Show the device authorization and verification URLs on the OAuth
application details page for public clients.

Public clients can use device flow today, but the settings UI only
exposes the authorize and token endpoints. This adds the static
device-flow URLs to the same credentials block so CLI and native app
setups do not need to bounce back to the auth docs.

This keeps the extra fields scoped to public apps and normalizes
`urlPrefix` before composing the OAuth URLs so copied values do not
contain duplicate slashes.

Author: dcramer

static/app/views/settings/account/apiApplications/details.spec.tsx

@@ -8,6 +8,8 @@ import {
 import ApiApplicationDetails from 'sentry/views/settings/account/apiApplications/details';
 
 describe('ApiApplicationDetails', () => {
+  const oauthBaseUrl = 'https://sentry-jest-tests.example.com/oauth';
+
   it('renders basic details for confidential client', async () => {
     MockApiClient.addMockResponse({
       url: '/api-applications/abcd/',
@@ -55,6 +57,10 @@ describe('ApiApplicationDetails', () => {
     expect(screen.getByLabelText('Client Secret')).toBeInTheDocument();
     expect(screen.getByLabelText('Authorization URL')).toBeInTheDocument();
     expect(screen.getByLabelText('Token URL')).toBeInTheDocument();
+    expect(screen.getByDisplayValue(`${oauthBaseUrl}/authorize/`)).toBeInTheDocument();
+    expect(screen.getByDisplayValue(`${oauthBaseUrl}/token/`)).toBeInTheDocument();
+    expect(screen.queryByLabelText('Device Authorization URL')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Device Verification URL')).not.toBeInTheDocument();
   });
 
   it('handles client secret rotation', async () => {
@@ -160,6 +166,10 @@ describe('ApiApplicationDetails', () => {
     expect(screen.getByLabelText('Client ID')).toBeInTheDocument();
     expect(screen.getByDisplayValue('public-app')).toBeInTheDocument();
     expect(screen.getByDisplayValue('Public CLI App')).toBeInTheDocument();
+    expect(screen.getByDisplayValue(`${oauthBaseUrl}/authorize/`)).toBeInTheDocument();
+    expect(screen.getByDisplayValue(`${oauthBaseUrl}/token/`)).toBeInTheDocument();
+    expect(screen.getByDisplayValue(`${oauthBaseUrl}/device/code/`)).toBeInTheDocument();
+    expect(screen.getByDisplayValue(`${oauthBaseUrl}/device/`)).toBeInTheDocument();
   });
 
   it('renders confidential client with client secret section', async () => {
@@ -202,5 +212,7 @@ describe('ApiApplicationDetails', () => {
     expect(
       screen.queryByText(/This is a public client, designed for CLIs/)
     ).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Device Authorization URL')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Device Verification URL')).not.toBeInTheDocument();
   });
 });

static/app/views/settings/account/apiApplications/details.tsx

@@ -1,5 +1,6 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
+import trimEnd from 'lodash/trimEnd';
 
 import {Alert} from '@sentry/scraps/alert';
 import {Tag} from '@sentry/scraps/badge';
@@ -54,6 +55,7 @@ function ApiApplicationsDetails() {
   const queryClient = useQueryClient();
 
   const urlPrefix = ConfigStore.get('urlPrefix');
+  const oauthBaseUrl = `${trimEnd(urlPrefix, '/')}/oauth`;
 
   const {
     data: app,
@@ -173,12 +175,27 @@ function ApiApplicationsDetails() {
             )}
 
             <FieldGroup label={t('Authorization URL')} flexibleControlStateSize>
-              <TextCopyInput>{`${urlPrefix}/oauth/authorize/`}</TextCopyInput>
+              <TextCopyInput>{`${oauthBaseUrl}/authorize/`}</TextCopyInput>
             </FieldGroup>
 
             <FieldGroup label={t('Token URL')} flexibleControlStateSize>
-              <TextCopyInput>{`${urlPrefix}/oauth/token/`}</TextCopyInput>
+              <TextCopyInput>{`${oauthBaseUrl}/token/`}</TextCopyInput>
             </FieldGroup>
+
+            {app.isPublic && (
+              <Fragment>
+                <FieldGroup
+                  label={t('Device Authorization URL')}
+                  flexibleControlStateSize
+                >
+                  <TextCopyInput>{`${oauthBaseUrl}/device/code/`}</TextCopyInput>
+                </FieldGroup>
+
+                <FieldGroup label={t('Device Verification URL')} flexibleControlStateSize>
+                  <TextCopyInput>{`${oauthBaseUrl}/device/`}</TextCopyInput>
+                </FieldGroup>
+              </Fragment>
+            )}
           </PanelBody>
         </Panel>
       </Form>