123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- import {Fragment} from 'react';
- import styled from '@emotion/styled';
- import ExternalLink from 'app/components/links/externalLink';
- import {t, tct} from 'app/locale';
- import space from 'app/styles/space';
- import {UpdateSdkSuggestion} from 'app/types';
- import {Event} from 'app/types/event';
- type Props = {
- sdk: Event['sdk'];
- suggestion: NonNullable<Event['sdkUpdates']>[0];
- shortStyle?: boolean;
- capitalized?: boolean;
- };
- function getSdkUpdateSuggestion({
- sdk,
- suggestion,
- shortStyle = false,
- capitalized = false,
- }: Props) {
- function getUpdateSdkContent(newSdkVersion: UpdateSdkSuggestion['newSdkVersion']) {
- if (capitalized) {
- return sdk
- ? shortStyle
- ? tct('Update to @v[new-sdk-version]', {
- ['new-sdk-version']: newSdkVersion,
- })
- : tct('Update your SDK from @v[sdk-version] to @v[new-sdk-version]', {
- ['sdk-version']: sdk.version,
- ['new-sdk-version']: newSdkVersion,
- })
- : t('Update your SDK version');
- }
- return sdk
- ? shortStyle
- ? tct('update to @v[new-sdk-version]', {
- ['new-sdk-version']: newSdkVersion,
- })
- : tct('update your SDK from @v[sdk-version] to @v[new-sdk-version]', {
- ['sdk-version']: sdk.version,
- ['new-sdk-version']: newSdkVersion,
- })
- : t('update your SDK version');
- }
- const getTitleData = () => {
- switch (suggestion.type) {
- case 'updateSdk':
- return {
- href: suggestion?.sdkUrl,
- content: getUpdateSdkContent(suggestion.newSdkVersion),
- };
- case 'changeSdk':
- return {
- href: suggestion?.sdkUrl,
- content: tct('migrate to the [sdkName] SDK', {
- sdkName: <code>{suggestion.newSdkName}</code>,
- }),
- };
- case 'enableIntegration':
- return {
- href: suggestion?.integrationUrl,
- content: t("enable the '%s' integration", suggestion.integrationName),
- };
- default:
- return null;
- }
- };
- const getTitle = () => {
- const titleData = getTitleData();
- if (!titleData) {
- return null;
- }
- const {href, content} = titleData;
- if (!href) {
- return content;
- }
- return <ExternalLink href={href}>{content}</ExternalLink>;
- };
- const title = <Fragment>{getTitle()}</Fragment>;
- if (!suggestion.enables.length) {
- return title;
- }
- const alertContent = suggestion.enables
- .map((subSuggestion, index) => {
- const subSuggestionContent = getSdkUpdateSuggestion({
- suggestion: subSuggestion,
- sdk,
- });
- if (!subSuggestionContent) {
- return null;
- }
- return <Fragment key={index}>{subSuggestionContent}</Fragment>;
- })
- .filter(content => !!content);
- if (!alertContent.length) {
- return title;
- }
- return tct('[title] so you can: [suggestion]', {
- title,
- suggestion: <AlertUl>{alertContent}</AlertUl>,
- });
- }
- export default getSdkUpdateSuggestion;
- const AlertUl = styled('ul')`
- margin-top: ${space(1)};
- margin-bottom: ${space(1)};
- padding-left: 0 !important;
- `;
|