import {Fragment} from 'react'; import styled from '@emotion/styled'; import {addErrorMessage} from 'sentry/actionCreators/indicator'; import {openModal} from 'sentry/actionCreators/modal'; import {Alert} from 'sentry/components/alert'; import {Button} from 'sentry/components/button'; import Confirm from 'sentry/components/confirm'; import Form from 'sentry/components/forms/form'; import FormField from 'sentry/components/forms/formField'; import JsonForm from 'sentry/components/forms/jsonForm'; import LoadingError from 'sentry/components/loadingError'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import Panel from 'sentry/components/panels/panel'; import PanelBody from 'sentry/components/panels/panelBody'; import PanelHeader from 'sentry/components/panels/panelHeader'; import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle'; import TextCopyInput from 'sentry/components/textCopyInput'; import apiApplication from 'sentry/data/forms/apiApplication'; import {t} from 'sentry/locale'; import ConfigStore from 'sentry/stores/configStore'; import type {ApiApplication} from 'sentry/types/user'; import getDynamicText from 'sentry/utils/getDynamicText'; import { type ApiQueryKey, useApiQuery, useMutation, useQueryClient, } from 'sentry/utils/queryClient'; import useApi from 'sentry/utils/useApi'; import {useParams} from 'sentry/utils/useParams'; import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader'; const PAGE_TITLE = t('Application Details'); function getAppQueryKey(appId: string): ApiQueryKey { return [`/api-applications/${appId}/`]; } interface RotateClientSecretResponse { clientSecret: string; } function ApiApplicationsDetails() { const api = useApi(); const {appId} = useParams<{appId: string}>(); const queryClient = useQueryClient(); const urlPrefix = ConfigStore.get('urlPrefix'); const { data: app, isPending, isError, refetch, } = useApiQuery(getAppQueryKey(appId), { staleTime: 0, }); const {mutate: rotateClientSecret} = useMutation({ mutationFn: () => { return api.requestPromise(`/api-applications/${appId}/rotate-secret/`, { method: 'POST', }); }, onSuccess: data => { openModal(({Body, Header}) => (

{t('Your new Client Secret')}

{t('This will be the only time your client secret is visible!')} {data.clientSecret} )); }, onError: () => { addErrorMessage(t('Error rotating secret')); }, onSettled: () => { queryClient.invalidateQueries({queryKey: getAppQueryKey(appId)}); }, }); if (isPending) { return ; } if (isError) { return ; } return (

addErrorMessage('Unable to save change')} > {t('Credentials')} {({value}) => ( {getDynamicText({value, fixed: 'CI_CLIENT_ID'})} )} {({value}) => value ? ( {getDynamicText({value, fixed: 'CI_CLIENT_SECRET'})} ) : ( {t('hidden')} ) } {() => {`${urlPrefix}/oauth/authorize/`}} {() => {`${urlPrefix}/oauth/token/`}}

); } const HiddenSecret = styled('span')` width: 100px; font-style: italic; `; const ClientSecret = styled('div')` display: flex; justify-content: right; align-items: center; margin-right: 0; `; export default ApiApplicationsDetails;