sentry/static/app/views/settings/project/server-side-sampling/samplingSDKAlert.tsx

import {useEffect} from 'react';
import styled from '@emotion/styled';

import {openModal} from 'sentry/actionCreators/modal';
import Alert from 'sentry/components/alert';
import Button from 'sentry/components/button';
import ProjectBadge from 'sentry/components/idBadge/projectBadge';
import {t} from 'sentry/locale';
import space from 'sentry/styles/space';
import {Organization} from 'sentry/types';
import {RecommendedSdkUpgrade, SamplingRule} from 'sentry/types/sampling';
import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';

import {
  RecommendedStepsModal,
  RecommendedStepsModalProps,
} from './modals/recommendedStepsModal';
import {isUniformRule} from './utils';

type Props = Pick<RecommendedStepsModalProps, 'projectId' | 'onReadDocs'> & {
  organization: Organization;
  recommendedSdkUpgrades: RecommendedSdkUpgrade[];
  rules: SamplingRule[];
  showLinkToTheModal?: boolean;
};

export function SamplingSDKAlert({
  organization,
  projectId,
  recommendedSdkUpgrades,
  rules,
  onReadDocs,
  showLinkToTheModal = true,
}: Props) {
  useEffect(() => {
    if (recommendedSdkUpgrades.length === 0) {
      return;
    }

    trackAdvancedAnalyticsEvent('sampling.sdk.updgrades.alert', {
      organization,
      project_id: projectId,
    });
  }, [recommendedSdkUpgrades.length, organization, projectId]);

  if (recommendedSdkUpgrades.length === 0) {
    return null;
  }

  function handleOpenRecommendedSteps() {
    openModal(modalProps => (
      <RecommendedStepsModal
        {...modalProps}
        onReadDocs={onReadDocs}
        organization={organization}
        projectId={projectId}
        recommendedSdkUpgrades={recommendedSdkUpgrades}
      />
    ));
  }

  const uniformRule = rules.find(isUniformRule);

  return (
    <Alert
      data-test-id="recommended-sdk-upgrades-alert"
      type="info"
      showIcon
      trailingItems={
        showLinkToTheModal && uniformRule ? (
          <Button onClick={handleOpenRecommendedSteps} priority="link" borderless>
            {t('Learn More')}
          </Button>
        ) : undefined
      }
    >
      {t(
        'To ensure you are properly monitoring the performance of all your other services, we require you update to the latest version of the following SDK(s):'
      )}
      <Projects>
        {recommendedSdkUpgrades.map(recommendedSdkUpgrade => (
          <ProjectBadge
            key={recommendedSdkUpgrade.project.id}
            project={recommendedSdkUpgrade.project}
            avatarSize={16}
          />
        ))}
      </Projects>
    </Alert>
  );
}

const Projects = styled('div')`
  display: flex;
  flex-wrap: wrap;
  gap: ${space(1.5)};
  justify-content: flex-start;
  margin-top: ${space(1)};
`;