teamKeyTransactionButton.tsx 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import {Button} from 'sentry/components/button';
  2. import TeamKeyTransactionComponent from 'sentry/components/performance/teamKeyTransaction';
  3. import * as TeamKeyTransactionManager from 'sentry/components/performance/teamKeyTransactionsManager';
  4. import {Tooltip} from 'sentry/components/tooltip';
  5. import {IconStar} from 'sentry/icons';
  6. import {t, tn} from 'sentry/locale';
  7. import {Organization, Project} from 'sentry/types';
  8. import {defined} from 'sentry/utils';
  9. import EventView from 'sentry/utils/discover/eventView';
  10. import {useTeams} from 'sentry/utils/useTeams';
  11. import withProjects from 'sentry/utils/withProjects';
  12. type BaseProps = {
  13. organization: Organization;
  14. transactionName: string;
  15. };
  16. type Props = BaseProps &
  17. TeamKeyTransactionManager.TeamKeyTransactionManagerChildrenProps & {
  18. project: Project;
  19. };
  20. function TeamKeyTransactionButton({
  21. counts,
  22. getKeyedTeams,
  23. project,
  24. transactionName,
  25. isLoading,
  26. error,
  27. ...props
  28. }: Props) {
  29. const keyedTeams = getKeyedTeams(project.id, transactionName);
  30. const keyedTeamsCount = keyedTeams?.size ?? 0;
  31. const disabled = isLoading || !!error;
  32. return (
  33. <TeamKeyTransactionComponent
  34. counts={counts}
  35. keyedTeams={keyedTeams}
  36. project={project}
  37. transactionName={transactionName}
  38. offset={8}
  39. size="md"
  40. trigger={(triggerProps, isOpen) => (
  41. <Tooltip
  42. disabled={disabled || isOpen}
  43. title={
  44. keyedTeams?.size
  45. ? project.teams
  46. .filter(team => keyedTeams.has(team.id))
  47. .map(({slug}) => slug)
  48. .join(', ')
  49. : null
  50. }
  51. >
  52. <Button
  53. {...triggerProps}
  54. disabled={disabled}
  55. size="sm"
  56. icon={
  57. <IconStar
  58. isSolid={!!keyedTeamsCount}
  59. color={keyedTeamsCount ? 'yellow400' : 'subText'}
  60. />
  61. }
  62. >
  63. {keyedTeamsCount
  64. ? tn('Starred for Team', 'Starred for Teams', keyedTeamsCount)
  65. : t('Star for Team')}
  66. </Button>
  67. </Tooltip>
  68. )}
  69. {...props}
  70. />
  71. );
  72. }
  73. type WrapperProps = BaseProps & {
  74. eventView: EventView;
  75. projects: Project[];
  76. };
  77. function TeamKeyTransactionButtonWrapper({
  78. eventView,
  79. organization,
  80. projects,
  81. ...props
  82. }: WrapperProps) {
  83. const {teams, initiallyLoaded} = useTeams({provideUserTeams: true});
  84. if (eventView.project.length !== 1) {
  85. return (
  86. <Button disabled size="sm" icon={<IconStar />}>
  87. {t('Star for Team')}
  88. </Button>
  89. );
  90. }
  91. const projectId = String(eventView.project[0]);
  92. const project = projects.find(proj => proj.id === projectId);
  93. if (!defined(project)) {
  94. return (
  95. <Button disabled size="sm" icon={<IconStar />}>
  96. {t('Star for Team')}
  97. </Button>
  98. );
  99. }
  100. return (
  101. <TeamKeyTransactionManager.Provider
  102. organization={organization}
  103. teams={teams}
  104. selectedTeams={['myteams']}
  105. selectedProjects={[String(projectId)]}
  106. >
  107. <TeamKeyTransactionManager.Consumer>
  108. {({isLoading, ...results}) => (
  109. <TeamKeyTransactionButton
  110. organization={organization}
  111. project={project}
  112. isLoading={isLoading || !initiallyLoaded}
  113. {...props}
  114. {...results}
  115. />
  116. )}
  117. </TeamKeyTransactionManager.Consumer>
  118. </TeamKeyTransactionManager.Provider>
  119. );
  120. }
  121. export default withProjects(TeamKeyTransactionButtonWrapper);