toolbar.tsx 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import {Component} from 'react';
  2. import styled from '@emotion/styled';
  3. import {addSuccessMessage} from 'sentry/actionCreators/indicator';
  4. import {Button} from 'sentry/components/button';
  5. import Confirm from 'sentry/components/confirm';
  6. import PanelHeader from 'sentry/components/panels/panelHeader';
  7. import ToolbarHeader from 'sentry/components/toolbarHeader';
  8. import {t} from 'sentry/locale';
  9. import GroupingStore from 'sentry/stores/groupingStore';
  10. import {space} from 'sentry/styles/space';
  11. import type {Organization} from 'sentry/types/organization';
  12. import type {Project} from 'sentry/types/project';
  13. import {trackAnalytics} from 'sentry/utils/analytics';
  14. type Props = {
  15. hasSimilarityEmbeddingsFeature: boolean;
  16. onMerge: () => void;
  17. groupId?: string;
  18. itemsWouldGroup?: Array<{id: string; shouldBeGrouped: string | undefined}> | undefined;
  19. organization?: Organization;
  20. project?: Project;
  21. };
  22. const initialState = {
  23. mergeCount: 0,
  24. mergeList: [] as string[],
  25. };
  26. type State = typeof initialState;
  27. class SimilarToolbar extends Component<Props, State> {
  28. state: State = initialState;
  29. componentWillUnmount() {
  30. this.listener?.();
  31. }
  32. onGroupChange = ({mergeList}) => {
  33. if (!mergeList?.length) {
  34. this.setState({mergeCount: 0});
  35. return;
  36. }
  37. if (mergeList.length !== this.state.mergeCount) {
  38. this.setState({mergeCount: mergeList.length, mergeList});
  39. }
  40. };
  41. listener = GroupingStore.listen(this.onGroupChange, undefined);
  42. handleSimilarityEmbeddings = (value: string) => {
  43. if (
  44. this.state.mergeList.length === 0 ||
  45. !this.props.organization ||
  46. !this.props.groupId
  47. ) {
  48. return;
  49. }
  50. for (const parentGroupId of this.state.mergeList) {
  51. const itemWouldGroup = this.props.itemsWouldGroup?.find(
  52. item => item.id === parentGroupId
  53. );
  54. trackAnalytics(
  55. 'issue_details.similar_issues.similarity_embeddings_feedback_recieved',
  56. {
  57. organization: this.props.organization,
  58. projectId: this.props.project?.id,
  59. parentGroupId,
  60. groupId: this.props.groupId,
  61. value,
  62. wouldGroup: itemWouldGroup?.shouldBeGrouped,
  63. }
  64. );
  65. }
  66. addSuccessMessage('Sent analytic for similarity embeddings grouping');
  67. };
  68. render() {
  69. const {onMerge, hasSimilarityEmbeddingsFeature} = this.props;
  70. const {mergeCount} = this.state;
  71. return (
  72. <PanelHeader hasButtons>
  73. <ButtonPanel>
  74. <Confirm
  75. disabled={mergeCount === 0}
  76. message={t('Are you sure you want to merge these issues?')}
  77. onConfirm={onMerge}
  78. >
  79. <Button size="xs" title={t('Merging %s issues', mergeCount)}>
  80. {t('Merge %s', `(${mergeCount || 0})`)}
  81. </Button>
  82. </Confirm>
  83. </ButtonPanel>
  84. <Columns>
  85. <StyledToolbarHeader>{t('Events')}</StyledToolbarHeader>
  86. <StyledToolbarHeader>{t('Exception')}</StyledToolbarHeader>
  87. {!hasSimilarityEmbeddingsFeature && (
  88. <StyledToolbarHeader>{t('Message')}</StyledToolbarHeader>
  89. )}
  90. </Columns>
  91. </PanelHeader>
  92. );
  93. }
  94. }
  95. export default SimilarToolbar;
  96. const Columns = styled('div')`
  97. display: flex;
  98. align-items: center;
  99. flex-shrink: 0;
  100. min-width: 325px;
  101. width: 325px;
  102. `;
  103. const StyledToolbarHeader = styled(ToolbarHeader)`
  104. flex: 1;
  105. flex-shrink: 0;
  106. display: flex;
  107. justify-content: center;
  108. padding: ${space(0.5)} 0;
  109. `;
  110. const ButtonPanel = styled('div')`
  111. display: flex;
  112. align-items: left;
  113. gap: ${space(1)};
  114. `;