integrationItem.tsx 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import styled from '@emotion/styled';
  2. import {space} from 'sentry/styles/space';
  3. import {Integration} from 'sentry/types';
  4. import IntegrationIcon from 'sentry/views/settings/organizationIntegrations/integrationIcon';
  5. type Props = {
  6. integration: Integration;
  7. compact?: boolean;
  8. };
  9. function IntegrationItem({integration, compact = false}: Props) {
  10. return (
  11. <Flex>
  12. <div>
  13. <IntegrationIcon size={compact ? 22 : 32} integration={integration} />
  14. </div>
  15. <Labels compact={compact}>
  16. <IntegrationName data-test-id="integration-name">
  17. {integration.name}
  18. </IntegrationName>
  19. <DomainName compact={compact}>{integration.domainName}</DomainName>
  20. </Labels>
  21. </Flex>
  22. );
  23. }
  24. export default IntegrationItem;
  25. const Flex = styled('div')`
  26. display: flex;
  27. align-items: center;
  28. `;
  29. const Labels = styled('div')<{compact: boolean}>`
  30. box-sizing: border-box;
  31. display: flex;
  32. ${p => (p.compact ? 'align-items: center;' : '')};
  33. flex-direction: ${p => (p.compact ? 'row' : 'column')};
  34. padding-left: ${space(1)};
  35. min-width: 0;
  36. justify-content: center;
  37. `;
  38. const IntegrationName = styled('div')`
  39. font-size: ${p => p.theme.fontSizeMedium};
  40. font-weight: bold;
  41. `;
  42. // Not using the overflowEllipsis style import here
  43. // as it sets width 100% which causes layout issues in the
  44. // integration list.
  45. const DomainName = styled('div')<{compact: boolean}>`
  46. color: ${p => p.theme.subText};
  47. margin-left: ${p => (p.compact ? space(1) : 'inherit')};
  48. margin-top: ${p => (!p.compact ? 0 : 'inherit')};
  49. font-size: ${p => p.theme.fontSizeSmall};
  50. overflow: hidden;
  51. text-overflow: ellipsis;
  52. `;