awsLambdaProjectSelect.tsx 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import {Component, Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import {Observer} from 'mobx-react';
  4. import * as qs from 'query-string';
  5. import {addLoadingMessage} from 'sentry/actionCreators/indicator';
  6. import {Alert} from 'sentry/components/alert';
  7. import SentryProjectSelectorField from 'sentry/components/forms/fields/sentryProjectSelectorField';
  8. import Form from 'sentry/components/forms/form';
  9. import FormModel from 'sentry/components/forms/model';
  10. import List from 'sentry/components/list';
  11. import ListItem from 'sentry/components/list/listItem';
  12. import {t} from 'sentry/locale';
  13. import {space} from 'sentry/styles/space';
  14. import {Project} from 'sentry/types';
  15. import FooterWithButtons from './components/footerWithButtons';
  16. import HeaderWithHelp from './components/headerWithHelp';
  17. type Props = {projects: Project[]};
  18. export default class AwsLambdaProjectSelect extends Component<Props> {
  19. model = new FormModel();
  20. handleSubmit = (e: React.MouseEvent) => {
  21. e.preventDefault();
  22. const data = this.model.getData();
  23. addLoadingMessage(t('Submitting\u2026'));
  24. this.model.setFormSaving();
  25. const {
  26. location: {origin},
  27. } = window;
  28. // redirect to the extensions endpoint with the form fields as query params
  29. // this is needed so we don't restart the pipeline loading from the original
  30. // OrganizationIntegrationSetupView route
  31. const newUrl = `${origin}/extensions/aws_lambda/setup/?${qs.stringify(data)}`;
  32. window.location.assign(newUrl);
  33. };
  34. render() {
  35. const {projects} = this.props;
  36. // TODO: Add logic if no projects
  37. return (
  38. <Fragment>
  39. <HeaderWithHelp docsUrl="https://docs.sentry.io/product/integrations/cloud-monitoring/aws-lambda/" />
  40. <StyledList symbol="colored-numeric">
  41. <Fragment />
  42. <ListItem>
  43. <h3>{t('Select a project for your AWS Lambdas')}</h3>
  44. <Form model={this.model} hideFooter>
  45. <StyledSentryProjectSelectorField
  46. placeholder={t('Select a project')}
  47. name="projectId"
  48. projects={projects}
  49. inline={false}
  50. hasControlState
  51. flexibleControlStateSize
  52. stacked
  53. />
  54. <Alert type="info">
  55. {t('Currently only supports Node and Python Lambda functions')}
  56. </Alert>
  57. </Form>
  58. </ListItem>
  59. </StyledList>
  60. <Observer>
  61. {() => (
  62. <FooterWithButtons
  63. buttonText={t('Next')}
  64. onClick={this.handleSubmit}
  65. disabled={this.model.isSaving || !this.model.getValue('projectId')}
  66. />
  67. )}
  68. </Observer>
  69. </Fragment>
  70. );
  71. }
  72. }
  73. const StyledList = styled(List)`
  74. padding: 100px 50px 50px 50px;
  75. `;
  76. const StyledSentryProjectSelectorField = styled(SentryProjectSelectorField)`
  77. padding: 0 0 ${space(2)} 0;
  78. `;