details.tsx 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. import styled from '@emotion/styled';
  2. import DateTime from 'sentry/components/dateTime';
  3. import NotAvailable from 'sentry/components/notAvailable';
  4. import {t, tct} from 'sentry/locale';
  5. import space from 'sentry/styles/space';
  6. import {AppStoreConnectStatusData} from 'sentry/types/debugFiles';
  7. type Props = {
  8. details?: AppStoreConnectStatusData;
  9. };
  10. function Details({details}: Props) {
  11. const {latestBuildVersion, latestBuildNumber, lastCheckedBuilds} = details ?? {};
  12. return (
  13. <Wrapper>
  14. {t('Last detected version')}
  15. <Value>
  16. {latestBuildVersion ? (
  17. tct('v[version]', {version: latestBuildVersion})
  18. ) : (
  19. <NotAvailable tooltip={t('Not available')} />
  20. )}
  21. </Value>
  22. {t('Last detected build')}
  23. <Value>{latestBuildNumber ?? <NotAvailable tooltip={t('Not available')} />}</Value>
  24. {t('Detected last build on')}
  25. <Value>
  26. {lastCheckedBuilds ? (
  27. <DateTime date={lastCheckedBuilds} />
  28. ) : (
  29. <NotAvailable tooltip={t('Not available')} />
  30. )}
  31. </Value>
  32. </Wrapper>
  33. );
  34. }
  35. export default Details;
  36. const Wrapper = styled('div')`
  37. display: grid;
  38. gap: ${space(1)};
  39. margin-top: ${space(0.5)};
  40. align-items: center;
  41. font-size: ${p => p.theme.fontSizeSmall};
  42. font-weight: 700;
  43. grid-column: 2/-1;
  44. @media (min-width: ${p => p.theme.breakpoints.small}) {
  45. margin-top: ${space(1)};
  46. grid-template-columns: max-content 1fr;
  47. gap: ${space(1)};
  48. grid-row: 3/3;
  49. }
  50. `;
  51. const Value = styled('div')`
  52. font-weight: 400;
  53. white-space: pre-wrap;
  54. word-break: break-all;
  55. padding: ${space(1)} ${space(1.5)};
  56. font-family: ${p => p.theme.text.familyMono};
  57. background-color: ${p => p.theme.backgroundSecondary};
  58. @media (max-width: ${p => p.theme.breakpoints.small}) {
  59. :not(:last-child) {
  60. margin-bottom: ${space(1)};
  61. }
  62. }
  63. `;