details.tsx 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. import {Fragment} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {addErrorMessage} from 'sentry/actionCreators/indicator';
  5. import {openModal} from 'sentry/actionCreators/modal';
  6. import Button from 'sentry/components/actions/button';
  7. import {Alert} from 'sentry/components/alert';
  8. import Form from 'sentry/components/forms/form';
  9. import FormField from 'sentry/components/forms/formField';
  10. import JsonForm from 'sentry/components/forms/jsonForm';
  11. import Panel from 'sentry/components/panels/panel';
  12. import PanelBody from 'sentry/components/panels/panelBody';
  13. import PanelHeader from 'sentry/components/panels/panelHeader';
  14. import TextCopyInput from 'sentry/components/textCopyInput';
  15. import apiApplication from 'sentry/data/forms/apiApplication';
  16. import {t} from 'sentry/locale';
  17. import ConfigStore from 'sentry/stores/configStore';
  18. import {ApiApplication} from 'sentry/types';
  19. import getDynamicText from 'sentry/utils/getDynamicText';
  20. import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
  21. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  22. type Props = RouteComponentProps<{appId: string}, {}>;
  23. type State = {
  24. app: ApiApplication;
  25. } & DeprecatedAsyncView['state'];
  26. class ApiApplicationsDetails extends DeprecatedAsyncView<Props, State> {
  27. rotateClientSecret = async () => {
  28. try {
  29. const rotateResponse = await this.api.requestPromise(
  30. `/api-applications/${this.props.params.appId}/rotate-secret/`,
  31. {
  32. method: 'POST',
  33. }
  34. );
  35. openModal(({Body, Header}) => (
  36. <Fragment>
  37. <Header>{t('Rotated Client Secret')}</Header>
  38. <Body>
  39. <Alert type="info" showIcon>
  40. {t('This will be the only time your client secret is visible!')}
  41. </Alert>
  42. <p>
  43. {t('Your client secret is:')}
  44. <code>{rotateResponse.clientSecret}</code>
  45. </p>
  46. </Body>
  47. </Fragment>
  48. ));
  49. } catch {
  50. addErrorMessage(t('Error rotating secret'));
  51. }
  52. };
  53. getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
  54. return [['app', `/api-applications/${this.props.params.appId}/`]];
  55. }
  56. getTitle() {
  57. return t('Application Details');
  58. }
  59. renderBody() {
  60. const urlPrefix = ConfigStore.get('urlPrefix');
  61. return (
  62. <div>
  63. <SettingsPageHeader title={this.getTitle()} />
  64. <Form
  65. apiMethod="PUT"
  66. apiEndpoint={`/api-applications/${this.props.params.appId}/`}
  67. saveOnBlur
  68. allowUndo
  69. initialData={this.state.app}
  70. onSubmitError={() => addErrorMessage('Unable to save change')}
  71. >
  72. <JsonForm forms={apiApplication} />
  73. <Panel>
  74. <PanelHeader>{t('Credentials')}</PanelHeader>
  75. <PanelBody>
  76. <FormField name="clientID" label="Client ID">
  77. {({value}) => (
  78. <div>
  79. <TextCopyInput>
  80. {getDynamicText({value, fixed: 'CI_CLIENT_ID'})}
  81. </TextCopyInput>
  82. </div>
  83. )}
  84. </FormField>
  85. <FormField
  86. name="clientSecret"
  87. label="Client Secret"
  88. help={t(`Your secret is only available briefly after application creation. Make
  89. sure to save this value!`)}
  90. >
  91. {({value}) =>
  92. value ? (
  93. <TextCopyInput>
  94. {getDynamicText({value, fixed: 'CI_CLIENT_SECRET'})}
  95. </TextCopyInput>
  96. ) : (
  97. <ClientSecret>
  98. <HiddenSecret>{t('hidden')}</HiddenSecret>
  99. <Button
  100. size="md"
  101. onClick={this.rotateClientSecret}
  102. priority="danger"
  103. >
  104. Rotate client secret
  105. </Button>
  106. </ClientSecret>
  107. )
  108. }
  109. </FormField>
  110. <FormField name="" label="Authorization URL">
  111. {() => <TextCopyInput>{`${urlPrefix}/oauth/authorize/`}</TextCopyInput>}
  112. </FormField>
  113. <FormField name="" label="Token URL">
  114. {() => <TextCopyInput>{`${urlPrefix}/oauth/token/`}</TextCopyInput>}
  115. </FormField>
  116. </PanelBody>
  117. </Panel>
  118. </Form>
  119. </div>
  120. );
  121. }
  122. }
  123. const HiddenSecret = styled('span')`
  124. width: 100px;
  125. font-style: italic;
  126. `;
  127. const ClientSecret = styled('div')`
  128. display: flex;
  129. justify-content: right;
  130. align-items: center;
  131. margin-right: 0;
  132. `;
  133. export default ApiApplicationsDetails;