integrationAlertRules.tsx 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import styled from '@emotion/styled';
  2. import {Button} from 'sentry/components/button';
  3. import EmptyMessage from 'sentry/components/emptyMessage';
  4. import ProjectBadge from 'sentry/components/idBadge/projectBadge';
  5. import Panel from 'sentry/components/panels/panel';
  6. import PanelBody from 'sentry/components/panels/panelBody';
  7. import PanelHeader from 'sentry/components/panels/panelHeader';
  8. import PanelItem from 'sentry/components/panels/panelItem';
  9. import {t} from 'sentry/locale';
  10. import type {Organization, Project} from 'sentry/types';
  11. import withOrganization from 'sentry/utils/withOrganization';
  12. import withProjects from 'sentry/utils/withProjects';
  13. type Props = {
  14. organization: Organization;
  15. projects: Project[];
  16. };
  17. function IntegrationAlertRules({projects, organization}: Props) {
  18. return (
  19. <Panel>
  20. <PanelHeader>{t('Project Configuration')}</PanelHeader>
  21. <PanelBody>
  22. {projects.length === 0 && (
  23. <EmptyMessage size="large">
  24. {t('You have no projects to add Alert Rules to')}
  25. </EmptyMessage>
  26. )}
  27. {projects.map(project => (
  28. <ProjectItem key={project.slug}>
  29. <ProjectBadge project={project} avatarSize={16} />
  30. <Button
  31. to={`/organizations/${organization.slug}/alerts/${project.slug}/wizard/`}
  32. size="xs"
  33. >
  34. {t('Add Alert Rule')}
  35. </Button>
  36. </ProjectItem>
  37. ))}
  38. </PanelBody>
  39. </Panel>
  40. );
  41. }
  42. const ProjectItem = styled(PanelItem)`
  43. align-items: center;
  44. justify-content: space-between;
  45. `;
  46. export default withOrganization(withProjects(IntegrationAlertRules));