messagingIntegrationModal.tsx 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import type {ModalRenderProps} from 'sentry/actionCreators/modal';
  4. import {space} from 'sentry/styles/space';
  5. import type {IntegrationProvider} from 'sentry/types/integrations';
  6. import AddIntegrationRow from 'sentry/views/alerts/rules/issue/addIntegrationRow';
  7. import type {MessagingIntegrationAnalyticsView} from 'sentry/views/alerts/rules/issue/setupMessagingIntegrationButton';
  8. import {IntegrationContext} from 'sentry/views/settings/organizationIntegrations/integrationContext';
  9. type Props = ModalRenderProps & {
  10. analyticsView: MessagingIntegrationAnalyticsView;
  11. headerContent: React.ReactNode;
  12. providers: IntegrationProvider[];
  13. bodyContent?: React.ReactNode;
  14. modalParams?: {[key: string]: string};
  15. onAddIntegration?: () => void;
  16. };
  17. function MessagingIntegrationModal({
  18. closeModal,
  19. Header,
  20. Body,
  21. headerContent,
  22. bodyContent,
  23. providers,
  24. modalParams,
  25. onAddIntegration,
  26. analyticsView,
  27. }: Props) {
  28. return (
  29. <Fragment>
  30. <Header closeButton>
  31. <h1>{headerContent}</h1>
  32. </Header>
  33. <Body>
  34. <p>{bodyContent}</p>
  35. <IntegrationsWrapper>
  36. {providers.map(provider => {
  37. return (
  38. <IntegrationContext.Provider
  39. key={provider.key}
  40. value={{
  41. provider,
  42. type: 'first_party',
  43. installStatus: 'Not Installed',
  44. analyticsParams: {
  45. already_installed: false,
  46. view: analyticsView,
  47. },
  48. onAddIntegration,
  49. ...(modalParams && {modalParams}),
  50. }}
  51. >
  52. <AddIntegrationRow onClick={closeModal} />
  53. </IntegrationContext.Provider>
  54. );
  55. })}
  56. </IntegrationsWrapper>
  57. </Body>
  58. </Fragment>
  59. );
  60. }
  61. const IntegrationsWrapper = styled('div')`
  62. display: flex;
  63. flex-direction: column;
  64. gap: ${space(2)};
  65. `;
  66. export default MessagingIntegrationModal;