status.tsx 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import {useTheme} from '@emotion/react';
  2. import styled from '@emotion/styled';
  3. import Placeholder from 'sentry/components/placeholder';
  4. import TimeSince from 'sentry/components/timeSince';
  5. import Tooltip from 'sentry/components/tooltip';
  6. import {IconDownload} from 'sentry/icons/iconDownload';
  7. import {IconRefresh} from 'sentry/icons/iconRefresh';
  8. import {IconWarning} from 'sentry/icons/iconWarning';
  9. import {t, tn} from 'sentry/locale';
  10. import space from 'sentry/styles/space';
  11. import {AppStoreConnectStatusData} from 'sentry/types/debugFiles';
  12. type Props = {
  13. onEditRepository: () => void;
  14. details?: AppStoreConnectStatusData;
  15. };
  16. function Status({details, onEditRepository}: Props) {
  17. const theme = useTheme();
  18. if (!details) {
  19. return <Placeholder height="14px" />;
  20. }
  21. const {pendingDownloads, credentials, lastCheckedBuilds} = details;
  22. if (credentials.status === 'invalid') {
  23. return (
  24. <Wrapper color={theme.red300} onClick={onEditRepository}>
  25. <StyledTooltip
  26. title={t('Re-check your App Store Credentials')}
  27. containerDisplayMode="inline-flex"
  28. >
  29. <IconWarning size="sm" />
  30. </StyledTooltip>
  31. {t('Authentication required')}
  32. </Wrapper>
  33. );
  34. }
  35. if (pendingDownloads) {
  36. return (
  37. <Wrapper color={theme.gray400}>
  38. <IconWrapper>
  39. <IconDownload size="sm" />
  40. </IconWrapper>
  41. {tn('%s build pending', '%s builds pending', pendingDownloads)}
  42. </Wrapper>
  43. );
  44. }
  45. if (lastCheckedBuilds) {
  46. return (
  47. <Wrapper color={theme.gray400}>
  48. <IconWrapper>
  49. <IconRefresh size="sm" />
  50. </IconWrapper>
  51. <TimeSince date={lastCheckedBuilds} />
  52. </Wrapper>
  53. );
  54. }
  55. return null;
  56. }
  57. export default Status;
  58. const Wrapper = styled('div')<{color: string}>`
  59. display: grid;
  60. grid-template-columns: repeat(2, max-content);
  61. align-items: center;
  62. gap: ${space(0.75)};
  63. color: ${p => p.color};
  64. font-size: ${p => p.theme.fontSizeMedium};
  65. height: 14px;
  66. ${p => p.onClick && `cursor: pointer`};
  67. `;
  68. const StyledTooltip = styled(Tooltip)`
  69. margin-top: -5px;
  70. height: 14px;
  71. `;
  72. const IconWrapper = styled('div')`
  73. margin-top: -5px;
  74. height: 14px;
  75. `;