sentry/static/app/utils/getSdkUpdateSuggestion.tsx

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;
`;