assigneeSelector.tsx 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import {useEffect} from 'react';
  2. import {fetchOrgMembers} from 'sentry/actionCreators/members';
  3. import {openIssueOwnershipRuleModal} from 'sentry/actionCreators/modal';
  4. import {Button} from 'sentry/components/button';
  5. import {getOwnerList} from 'sentry/components/group/assignedTo';
  6. import {
  7. AssigneeSelector,
  8. useHandleAssigneeChange,
  9. } from 'sentry/components/group/assigneeSelector';
  10. import {IconSettings} from 'sentry/icons';
  11. import {t} from 'sentry/locale';
  12. import type {Event} from 'sentry/types/event';
  13. import type {Group} from 'sentry/types/group';
  14. import type {Project} from 'sentry/types/project';
  15. import useApi from 'sentry/utils/useApi';
  16. import useCommitters from 'sentry/utils/useCommitters';
  17. import {useIssueEventOwners} from 'sentry/utils/useIssueEventOwners';
  18. import useOrganization from 'sentry/utils/useOrganization';
  19. interface GroupHeaderAssigneeSelectorProps {
  20. event: Event | null;
  21. group: Group;
  22. project: Project;
  23. }
  24. export function GroupHeaderAssigneeSelector({
  25. group,
  26. project,
  27. event,
  28. }: GroupHeaderAssigneeSelectorProps) {
  29. const api = useApi();
  30. const organization = useOrganization();
  31. const {handleAssigneeChange, assigneeLoading} = useHandleAssigneeChange({
  32. organization,
  33. group,
  34. });
  35. const {data: eventOwners} = useIssueEventOwners({
  36. eventId: event?.id ?? '',
  37. projectSlug: project.slug,
  38. });
  39. const {data: committersResponse} = useCommitters({
  40. eventId: event?.id ?? '',
  41. projectSlug: project.slug,
  42. group,
  43. });
  44. useEffect(() => {
  45. // TODO: We should check if this is already loaded
  46. fetchOrgMembers(api, organization.slug, [project.id]);
  47. }, [api, organization, project]);
  48. const owners = getOwnerList(
  49. committersResponse?.committers ?? [],
  50. eventOwners,
  51. group.assignedTo
  52. );
  53. return (
  54. <AssigneeSelector
  55. group={group}
  56. owners={owners}
  57. assigneeLoading={assigneeLoading}
  58. handleAssigneeChange={handleAssigneeChange}
  59. additionalMenuFooterItems={
  60. <Button
  61. type="button"
  62. onClick={() => {
  63. openIssueOwnershipRuleModal({
  64. project,
  65. organization,
  66. issueId: group.id,
  67. eventData: event!,
  68. });
  69. }}
  70. icon={<IconSettings />}
  71. size="xs"
  72. >
  73. {t('Ownership')}
  74. </Button>
  75. }
  76. />
  77. );
  78. }