index.tsx 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import styled from '@emotion/styled';
  2. import Link from 'sentry/components/links/link';
  3. import PanelItem from 'sentry/components/panels/panelItem';
  4. import {IconInput} from 'sentry/icons';
  5. import {space} from 'sentry/styles/space';
  6. import {Organization, SentryFunction} from 'sentry/types';
  7. import ActionButtons from '../sentryFunctionRow/actionButtons';
  8. type Props = {
  9. onRemoveFunction: (org: Organization, sentryFn: SentryFunction) => void;
  10. organization: Organization;
  11. sentryFunction: SentryFunction;
  12. };
  13. export default function SentryFunctionRow(props: Props) {
  14. const {onRemoveFunction, organization, sentryFunction} = props;
  15. return (
  16. <SentryFunctionHolder>
  17. <StyledFlex>
  18. <IconInput size="xl" />
  19. <SentryFunctionBox>
  20. <SentryFunctionName>
  21. <Link
  22. to={`/settings/${organization.slug}/developer-settings/sentry-functions/${sentryFunction.slug}/`}
  23. >
  24. {sentryFunction.name}
  25. </Link>
  26. </SentryFunctionName>
  27. </SentryFunctionBox>
  28. <Box>
  29. <ActionButtons
  30. org={organization}
  31. sentryFn={sentryFunction}
  32. onDelete={onRemoveFunction}
  33. />
  34. </Box>
  35. </StyledFlex>
  36. </SentryFunctionHolder>
  37. );
  38. }
  39. const Flex = styled('div')`
  40. display: flex;
  41. `;
  42. const Box = styled('div')``;
  43. const SentryFunctionHolder = styled(PanelItem)`
  44. flex-direction: column;
  45. padding: ${space(0.5)};
  46. `;
  47. const StyledFlex = styled(Flex)`
  48. justify-content: center;
  49. padding: ${space(1)};
  50. `;
  51. const SentryFunctionBox = styled('div')`
  52. padding: 0 15px;
  53. flex: 1;
  54. `;
  55. const SentryFunctionName = styled('div')`
  56. margin-top: 10px;
  57. `;