memberTeamFields.tsx 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import {Component} from 'react';
  2. import styled from '@emotion/styled';
  3. import SelectControl from 'sentry/components/forms/controls/selectControl';
  4. import PanelItem from 'sentry/components/panels/panelItem';
  5. import SelectMembers from 'sentry/components/selectMembers';
  6. import TeamSelector from 'sentry/components/teamSelector';
  7. import {space} from 'sentry/styles/space';
  8. import {Organization, Project} from 'sentry/types';
  9. import {IssueAlertRuleAction, IssueAlertRuleCondition} from 'sentry/types/alerts';
  10. interface OptionRecord {
  11. label: string;
  12. value: string;
  13. }
  14. type Props = {
  15. disabled: boolean;
  16. loading: boolean;
  17. memberValue: string | number;
  18. onChange: (action: IssueAlertRuleAction) => void;
  19. options: OptionRecord[];
  20. organization: Organization;
  21. project: Project;
  22. ruleData: IssueAlertRuleAction | IssueAlertRuleCondition;
  23. teamValue: string | number;
  24. };
  25. class MemberTeamFields extends Component<Props> {
  26. handleChange = (attribute: 'targetType' | 'targetIdentifier', newValue: string) => {
  27. const {onChange, ruleData} = this.props;
  28. if (newValue === ruleData[attribute]) {
  29. return;
  30. }
  31. const newData = {
  32. ...ruleData,
  33. [attribute]: newValue,
  34. };
  35. /**
  36. * TargetIdentifiers between the targetTypes are not unique, and may wrongly map to something that has not been
  37. * selected. E.g. A member and project can both have the `targetIdentifier`, `'2'`. Hence we clear the identifier.
  38. **/
  39. if (attribute === 'targetType') {
  40. newData.targetIdentifier = '';
  41. }
  42. onChange(newData);
  43. };
  44. handleChangeActorType = (optionRecord: OptionRecord) => {
  45. this.handleChange('targetType', optionRecord.value);
  46. };
  47. handleChangeActorId = (optionRecord: OptionRecord & {[key: string]: any}) => {
  48. this.handleChange('targetIdentifier', optionRecord.value);
  49. };
  50. render(): React.ReactElement {
  51. const {
  52. disabled,
  53. loading,
  54. project,
  55. organization,
  56. ruleData,
  57. memberValue,
  58. teamValue,
  59. options,
  60. } = this.props;
  61. const teamSelected = ruleData.targetType === teamValue;
  62. const memberSelected = ruleData.targetType === memberValue;
  63. const selectControlStyles = {
  64. control: provided => ({
  65. ...provided,
  66. minHeight: '28px',
  67. height: '28px',
  68. }),
  69. };
  70. return (
  71. <PanelItemGrid>
  72. <SelectWrapper>
  73. <SelectControl
  74. isClearable={false}
  75. isDisabled={disabled || loading}
  76. value={ruleData.targetType}
  77. styles={selectControlStyles}
  78. options={options}
  79. onChange={this.handleChangeActorType}
  80. />
  81. </SelectWrapper>
  82. {(teamSelected || memberSelected) && (
  83. <SelectWrapper>
  84. {teamSelected ? (
  85. <TeamSelector
  86. disabled={disabled}
  87. key={teamValue}
  88. project={project}
  89. // The value from the endpoint is of type `number`, `SelectMembers` require value to be of type `string`
  90. value={`${ruleData.targetIdentifier}`}
  91. styles={selectControlStyles}
  92. onChange={this.handleChangeActorId}
  93. useId
  94. />
  95. ) : memberSelected ? (
  96. <SelectMembers
  97. disabled={disabled}
  98. key={teamSelected ? teamValue : memberValue}
  99. project={project}
  100. organization={organization}
  101. // The value from the endpoint is of type `number`, `SelectMembers` require value to be of type `string`
  102. value={`${ruleData.targetIdentifier}`}
  103. styles={selectControlStyles}
  104. onChange={this.handleChangeActorId}
  105. />
  106. ) : null}
  107. </SelectWrapper>
  108. )}
  109. </PanelItemGrid>
  110. );
  111. }
  112. }
  113. const PanelItemGrid = styled(PanelItem)`
  114. display: flex;
  115. align-items: center;
  116. padding: 0;
  117. gap: ${space(2)};
  118. `;
  119. const SelectWrapper = styled('div')`
  120. width: 200px;
  121. `;
  122. export default MemberTeamFields;