index.tsx 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import {RouteComponentProps} from 'react-router';
  2. import {
  3. addErrorMessage,
  4. addLoadingMessage,
  5. addSuccessMessage,
  6. } from 'sentry/actionCreators/indicator';
  7. import {Button} from 'sentry/components/button';
  8. import EmptyMessage from 'sentry/components/emptyMessage';
  9. import Panel from 'sentry/components/panels/panel';
  10. import PanelBody from 'sentry/components/panels/panelBody';
  11. import PanelHeader from 'sentry/components/panels/panelHeader';
  12. import {IconAdd} from 'sentry/icons';
  13. import {t} from 'sentry/locale';
  14. import {ApiApplication} from 'sentry/types';
  15. import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
  16. import Row from 'sentry/views/settings/account/apiApplications/row';
  17. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  18. const ROUTE_PREFIX = '/settings/account/api/';
  19. type Props = RouteComponentProps<{}, {}>;
  20. type State = {
  21. appList: ApiApplication[];
  22. } & DeprecatedAsyncView['state'];
  23. class ApiApplications extends DeprecatedAsyncView<Props, State> {
  24. getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
  25. return [['appList', '/api-applications/']];
  26. }
  27. getTitle() {
  28. return t('API Applications');
  29. }
  30. handleCreateApplication = async () => {
  31. addLoadingMessage();
  32. try {
  33. const app = await this.api.requestPromise('/api-applications/', {
  34. method: 'POST',
  35. });
  36. addSuccessMessage(t('Created a new API Application'));
  37. this.props.router.push(`${ROUTE_PREFIX}applications/${app.id}/`);
  38. } catch {
  39. addErrorMessage(t('Unable to remove application. Please try again.'));
  40. }
  41. };
  42. handleRemoveApplication = (app: ApiApplication) => {
  43. this.setState({
  44. appList: this.state.appList.filter(a => a.id !== app.id),
  45. });
  46. };
  47. renderBody() {
  48. const isEmpty = this.state.appList.length === 0;
  49. return (
  50. <div>
  51. <SettingsPageHeader
  52. title="API Applications"
  53. action={
  54. <Button
  55. priority="primary"
  56. size="sm"
  57. onClick={this.handleCreateApplication}
  58. icon={<IconAdd size="xs" isCircled />}
  59. >
  60. {t('Create New Application')}
  61. </Button>
  62. }
  63. />
  64. <Panel>
  65. <PanelHeader>{t('Application Name')}</PanelHeader>
  66. <PanelBody>
  67. {!isEmpty ? (
  68. this.state.appList.map(app => (
  69. <Row
  70. api={this.api}
  71. key={app.id}
  72. app={app}
  73. onRemove={this.handleRemoveApplication}
  74. />
  75. ))
  76. ) : (
  77. <EmptyMessage>
  78. {t("You haven't created any applications yet.")}
  79. </EmptyMessage>
  80. )}
  81. </PanelBody>
  82. </Panel>
  83. </div>
  84. );
  85. }
  86. }
  87. export default ApiApplications;