getSdkUpdateSuggestion.tsx 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import ExternalLink from 'app/components/links/externalLink';
  4. import {t, tct} from 'app/locale';
  5. import space from 'app/styles/space';
  6. import {UpdateSdkSuggestion} from 'app/types';
  7. import {Event} from 'app/types/event';
  8. type Props = {
  9. sdk: Event['sdk'];
  10. suggestion: NonNullable<Event['sdkUpdates']>[0];
  11. shortStyle?: boolean;
  12. capitalized?: boolean;
  13. };
  14. function getSdkUpdateSuggestion({
  15. sdk,
  16. suggestion,
  17. shortStyle = false,
  18. capitalized = false,
  19. }: Props) {
  20. function getUpdateSdkContent(newSdkVersion: UpdateSdkSuggestion['newSdkVersion']) {
  21. if (capitalized) {
  22. return sdk
  23. ? shortStyle
  24. ? tct('Update to @v[new-sdk-version]', {
  25. ['new-sdk-version']: newSdkVersion,
  26. })
  27. : tct('Update your SDK from @v[sdk-version] to @v[new-sdk-version]', {
  28. ['sdk-version']: sdk.version,
  29. ['new-sdk-version']: newSdkVersion,
  30. })
  31. : t('Update your SDK version');
  32. }
  33. return sdk
  34. ? shortStyle
  35. ? tct('update to @v[new-sdk-version]', {
  36. ['new-sdk-version']: newSdkVersion,
  37. })
  38. : tct('update your SDK from @v[sdk-version] to @v[new-sdk-version]', {
  39. ['sdk-version']: sdk.version,
  40. ['new-sdk-version']: newSdkVersion,
  41. })
  42. : t('update your SDK version');
  43. }
  44. const getTitleData = () => {
  45. switch (suggestion.type) {
  46. case 'updateSdk':
  47. return {
  48. href: suggestion?.sdkUrl,
  49. content: getUpdateSdkContent(suggestion.newSdkVersion),
  50. };
  51. case 'changeSdk':
  52. return {
  53. href: suggestion?.sdkUrl,
  54. content: tct('migrate to the [sdkName] SDK', {
  55. sdkName: <code>{suggestion.newSdkName}</code>,
  56. }),
  57. };
  58. case 'enableIntegration':
  59. return {
  60. href: suggestion?.integrationUrl,
  61. content: t("enable the '%s' integration", suggestion.integrationName),
  62. };
  63. default:
  64. return null;
  65. }
  66. };
  67. const getTitle = () => {
  68. const titleData = getTitleData();
  69. if (!titleData) {
  70. return null;
  71. }
  72. const {href, content} = titleData;
  73. if (!href) {
  74. return content;
  75. }
  76. return <ExternalLink href={href}>{content}</ExternalLink>;
  77. };
  78. const title = <Fragment>{getTitle()}</Fragment>;
  79. if (!suggestion.enables.length) {
  80. return title;
  81. }
  82. const alertContent = suggestion.enables
  83. .map((subSuggestion, index) => {
  84. const subSuggestionContent = getSdkUpdateSuggestion({
  85. suggestion: subSuggestion,
  86. sdk,
  87. });
  88. if (!subSuggestionContent) {
  89. return null;
  90. }
  91. return <Fragment key={index}>{subSuggestionContent}</Fragment>;
  92. })
  93. .filter(content => !!content);
  94. if (!alertContent.length) {
  95. return title;
  96. }
  97. return tct('[title] so you can: [suggestion]', {
  98. title,
  99. suggestion: <AlertUl>{alertContent}</AlertUl>,
  100. });
  101. }
  102. export default getSdkUpdateSuggestion;
  103. const AlertUl = styled('ul')`
  104. margin-top: ${space(1)};
  105. margin-bottom: ${space(1)};
  106. padding-left: 0 !important;
  107. `;