integrationExternalMappings.tsx 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. import {Fragment} from 'react';
  2. import type {WithRouterProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Button} from 'sentry/components/button';
  5. import Confirm from 'sentry/components/confirm';
  6. import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
  7. import Pagination from 'sentry/components/pagination';
  8. import {PanelTable} from 'sentry/components/panels/panelTable';
  9. import QuestionTooltip from 'sentry/components/questionTooltip';
  10. import {IconAdd, IconArrow, IconDelete} from 'sentry/icons';
  11. import {t, tct} from 'sentry/locale';
  12. import PluginIcon from 'sentry/plugins/components/pluginIcon';
  13. import {space} from 'sentry/styles/space';
  14. import type {
  15. ExternalActorMapping,
  16. ExternalActorMappingOrSuggestion,
  17. ExternalActorSuggestion,
  18. Integration,
  19. Organization,
  20. } from 'sentry/types';
  21. import {isExternalActorMapping} from 'sentry/utils/integrationUtil';
  22. import {capitalize} from 'sentry/utils/string/capitalize';
  23. // eslint-disable-next-line no-restricted-imports
  24. import withSentryRouter from 'sentry/utils/withSentryRouter';
  25. import IntegrationExternalMappingForm from './integrationExternalMappingForm';
  26. type CodeOwnersAssociationMappings = {
  27. [projectSlug: string]: {
  28. associations: {
  29. [externalName: string]: string;
  30. };
  31. errors: {
  32. [errorKey: string]: string;
  33. };
  34. };
  35. };
  36. type Props = DeprecatedAsyncComponent['props'] &
  37. WithRouterProps &
  38. Pick<
  39. IntegrationExternalMappingForm['props'],
  40. | 'dataEndpoint'
  41. | 'getBaseFormEndpoint'
  42. | 'sentryNamesMapper'
  43. | 'onResults'
  44. | 'defaultOptions'
  45. > & {
  46. integration: Integration;
  47. mappings: ExternalActorMapping[];
  48. onCreate: (mapping?: ExternalActorMappingOrSuggestion) => void;
  49. onDelete: (mapping: ExternalActorMapping) => void;
  50. organization: Organization;
  51. type: 'team' | 'user';
  52. pageLinks?: string;
  53. };
  54. type State = DeprecatedAsyncComponent['state'] & {
  55. associationMappings: CodeOwnersAssociationMappings;
  56. newlyAssociatedMappings: ExternalActorMapping[];
  57. };
  58. class IntegrationExternalMappings extends DeprecatedAsyncComponent<Props, State> {
  59. getDefaultState(): State {
  60. return {
  61. ...super.getDefaultState(),
  62. associationMappings: {},
  63. newlyAssociatedMappings: [],
  64. };
  65. }
  66. getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
  67. const {organization, integration} = this.props;
  68. return [
  69. [
  70. 'associationMappings',
  71. `/organizations/${organization.slug}/codeowners-associations/`,
  72. {query: {provider: integration.provider.key}},
  73. ],
  74. ];
  75. }
  76. get isFirstPage(): boolean {
  77. const {cursor} = this.props.location.query;
  78. return cursor ? cursor?.split(':')[1] === '0' : true;
  79. }
  80. get unassociatedMappings(): ExternalActorSuggestion[] {
  81. const {type} = this.props;
  82. const {associationMappings} = this.state;
  83. const errorKey = `missing_external_${type}s`;
  84. const unassociatedMappings = Object.values(associationMappings).reduce(
  85. (map, {errors}) => {
  86. return new Set<string>([...map, ...errors[errorKey]]);
  87. },
  88. new Set<string>()
  89. );
  90. return Array.from(unassociatedMappings).map(externalName => ({externalName}));
  91. }
  92. get allMappings(): ExternalActorMappingOrSuggestion[] {
  93. const {mappings} = this.props;
  94. if (!this.isFirstPage) {
  95. return mappings;
  96. }
  97. const {newlyAssociatedMappings} = this.state;
  98. const inlineMappings = this.unassociatedMappings.map(mapping => {
  99. // If this mapping has been changed, replace it with the new version from its change's response
  100. // The new version will be used in IntegrationExternalMappingForm to update the apiMethod and apiEndpoint
  101. const newlyAssociatedMapping = newlyAssociatedMappings.find(
  102. ({externalName}) => externalName === mapping.externalName
  103. );
  104. return newlyAssociatedMapping ?? mapping;
  105. });
  106. return [...inlineMappings, ...mappings];
  107. }
  108. renderMappingName(mapping: ExternalActorMappingOrSuggestion) {
  109. const {
  110. type,
  111. getBaseFormEndpoint,
  112. integration,
  113. dataEndpoint,
  114. sentryNamesMapper,
  115. onResults,
  116. defaultOptions,
  117. } = this.props;
  118. return (
  119. <IntegrationExternalMappingForm
  120. type={type}
  121. integration={integration}
  122. dataEndpoint={dataEndpoint}
  123. getBaseFormEndpoint={getBaseFormEndpoint}
  124. mapping={mapping}
  125. sentryNamesMapper={sentryNamesMapper}
  126. onResults={onResults}
  127. onSubmitSuccess={(newMapping: ExternalActorMapping) => {
  128. this.setState({
  129. newlyAssociatedMappings: [
  130. ...this.state.newlyAssociatedMappings.filter(
  131. map => map.externalName !== newMapping.externalName
  132. ),
  133. newMapping as ExternalActorMapping,
  134. ],
  135. });
  136. }}
  137. isInline
  138. defaultOptions={defaultOptions}
  139. />
  140. );
  141. }
  142. renderMappingActions(mapping: ExternalActorMappingOrSuggestion) {
  143. const {type, onDelete, organization} = this.props;
  144. const canDelete = organization.access.includes('org:integrations');
  145. return isExternalActorMapping(mapping) ? (
  146. <Confirm
  147. disabled={!canDelete}
  148. onConfirm={() => onDelete(mapping)}
  149. message={t('Are you sure you want to remove this external %s mapping?', type)}
  150. >
  151. <Button
  152. borderless
  153. size="sm"
  154. icon={<IconDelete size="sm" />}
  155. aria-label={t('Remove user mapping')}
  156. title={
  157. canDelete
  158. ? t('Remove user mapping')
  159. : t(
  160. 'You must be an organization owner, manager or admin to delete an external user mapping.'
  161. )
  162. }
  163. />
  164. </Confirm>
  165. ) : (
  166. <QuestionTooltip
  167. title={t('This %s mapping suggestion was generated from a CODEOWNERS file', type)}
  168. size="sm"
  169. />
  170. );
  171. }
  172. renderBody() {
  173. const {integration, type, onCreate, pageLinks} = this.props;
  174. return (
  175. <Fragment>
  176. <MappingTable
  177. data-test-id="mapping-table"
  178. isEmpty={!this.allMappings.length}
  179. emptyMessage={tct('Set up External [type] Mappings.', {type: capitalize(type)})}
  180. headers={[
  181. tct('External [type]', {type}),
  182. <IconArrow key="arrow" direction="right" size="sm" />,
  183. tct('Sentry [type]', {type}),
  184. <AddButton
  185. key="delete-button"
  186. data-test-id="add-mapping-button"
  187. onClick={() => onCreate()}
  188. size="xs"
  189. icon={<IconAdd isCircled />}
  190. >
  191. {tct('Add [type] Mapping', {type})}
  192. </AddButton>,
  193. ]}
  194. >
  195. {this.allMappings.map((mapping, index) => (
  196. <Fragment key={index}>
  197. <ExternalNameColumn>
  198. <StyledPluginIcon pluginId={integration.provider.key} size={19} />
  199. <span>{mapping.externalName}</span>
  200. </ExternalNameColumn>
  201. <div>
  202. <IconArrow direction="right" size="sm" color="gray300" />
  203. </div>
  204. <ExternalForm>{this.renderMappingName(mapping)}</ExternalForm>
  205. <div>{this.renderMappingActions(mapping)}</div>
  206. </Fragment>
  207. ))}
  208. </MappingTable>
  209. <Pagination pageLinks={pageLinks} />
  210. </Fragment>
  211. );
  212. }
  213. }
  214. export default withSentryRouter(IntegrationExternalMappings);
  215. const MappingTable = styled(PanelTable)`
  216. overflow: visible;
  217. grid-template-columns: 1fr max-content 1fr 66px;
  218. ${p =>
  219. !p.isEmpty
  220. ? `
  221. > :nth-child(n + 5) {
  222. display: flex;
  223. align-items: center;
  224. padding: ${space(1.5)} ${space(2)};
  225. }
  226. > * {
  227. padding: ${space(1)} ${space(2)};
  228. }
  229. `
  230. : `
  231. > :not(:nth-child(n + 5)) {
  232. padding: ${space(1)} ${space(2)};
  233. }`}
  234. > :nth-child(4n) {
  235. padding-right: ${space(1)};
  236. justify-content: end;
  237. }
  238. `;
  239. const StyledPluginIcon = styled(PluginIcon)`
  240. min-width: ${p => p.size}px;
  241. margin-right: ${space(2)};
  242. `;
  243. const ExternalNameColumn = styled('div')`
  244. font-family: ${p => p.theme.text.familyMono};
  245. `;
  246. const AddButton = styled(Button)`
  247. align-self: end;
  248. `;
  249. const ExternalForm = styled('div')`
  250. width: 100%;
  251. `;