issueSyncListElement.tsx 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. import {Component} from 'react';
  2. import {ClassNames} from '@emotion/react';
  3. import styled from '@emotion/styled';
  4. import capitalize from 'lodash/capitalize';
  5. import {Body, Hovercard} from 'sentry/components/hovercard';
  6. import {IconAdd, IconClose} from 'sentry/icons';
  7. import {t} from 'sentry/locale';
  8. import space from 'sentry/styles/space';
  9. import {callIfFunction} from 'sentry/utils/callIfFunction';
  10. import {getIntegrationIcon} from 'sentry/utils/integrationUtil';
  11. type Props = {
  12. externalIssueDisplayName?: string | null;
  13. externalIssueId?: string | null;
  14. externalIssueKey?: string | null;
  15. externalIssueLink?: string | null;
  16. hoverCardBody?: React.ReactNode;
  17. hoverCardHeader?: React.ReactNode;
  18. integrationType?: string;
  19. onClose?: (externalIssueId?: string | null) => void;
  20. onOpen?: () => void;
  21. showHoverCard?: boolean;
  22. };
  23. class IssueSyncListElement extends Component<Props> {
  24. isLinked(): boolean {
  25. return !!(this.props.externalIssueLink && this.props.externalIssueId);
  26. }
  27. handleDelete = (): void => {
  28. callIfFunction(this.props.onClose, this.props.externalIssueId);
  29. };
  30. handleIconClick = () => {
  31. if (this.isLinked()) {
  32. this.handleDelete();
  33. } else if (this.props.onOpen) {
  34. this.props.onOpen();
  35. }
  36. };
  37. getIcon(): React.ReactNode {
  38. return getIntegrationIcon(this.props.integrationType);
  39. }
  40. getPrettyName(): string {
  41. const type = this.props.integrationType;
  42. switch (type) {
  43. case 'gitlab':
  44. return 'GitLab';
  45. case 'github':
  46. return 'GitHub';
  47. case 'github_enterprise':
  48. return 'GitHub Enterprise';
  49. case 'vsts':
  50. return 'Azure DevOps';
  51. case 'jira_server':
  52. return 'Jira Server';
  53. default:
  54. return capitalize(type);
  55. }
  56. }
  57. getLink(): React.ReactElement {
  58. return (
  59. <IntegrationLink
  60. href={this.props.externalIssueLink || undefined}
  61. onClick={!this.isLinked() ? this.props.onOpen : undefined}
  62. >
  63. {this.getText()}
  64. </IntegrationLink>
  65. );
  66. }
  67. getText(): React.ReactNode {
  68. if (this.props.children) {
  69. return this.props.children;
  70. }
  71. if (this.props.externalIssueDisplayName) {
  72. return this.props.externalIssueDisplayName;
  73. }
  74. if (this.props.externalIssueKey) {
  75. return this.props.externalIssueKey;
  76. }
  77. return `Link ${this.getPrettyName()} Issue`;
  78. }
  79. render() {
  80. return (
  81. <IssueSyncListElementContainer>
  82. <ClassNames>
  83. {({css}) => (
  84. <StyledHovercard
  85. containerClassName={css`
  86. display: flex;
  87. align-items: center;
  88. min-width: 0; /* flex-box overflow workaround */
  89. svg {
  90. flex-shrink: 0;
  91. }
  92. `}
  93. header={this.props.hoverCardHeader}
  94. body={this.props.hoverCardBody}
  95. bodyClassName="issue-list-body"
  96. forceVisible={this.props.showHoverCard}
  97. >
  98. {this.getIcon()}
  99. {this.getLink()}
  100. </StyledHovercard>
  101. )}
  102. </ClassNames>
  103. {(this.props.onClose || this.props.onOpen) && (
  104. <StyledIcon
  105. role="button"
  106. aria-label={this.isLinked() ? t('Close') : t('Add')}
  107. onClick={this.handleIconClick}
  108. >
  109. {this.isLinked() ? <IconClose /> : this.props.onOpen ? <IconAdd /> : null}
  110. </StyledIcon>
  111. )}
  112. </IssueSyncListElementContainer>
  113. );
  114. }
  115. }
  116. export const IssueSyncListElementContainer = styled('div')`
  117. line-height: 0;
  118. display: flex;
  119. align-items: center;
  120. justify-content: space-between;
  121. &:not(:last-child) {
  122. margin-bottom: ${space(2)};
  123. }
  124. `;
  125. export const IntegrationLink = styled('a')`
  126. text-decoration: none;
  127. padding-bottom: ${space(0.25)};
  128. margin-left: ${space(1)};
  129. color: ${p => p.theme.textColor};
  130. border-bottom: 1px solid ${p => p.theme.textColor};
  131. cursor: pointer;
  132. line-height: 1;
  133. white-space: nowrap;
  134. overflow: hidden;
  135. text-overflow: ellipsis;
  136. &,
  137. &:hover {
  138. border-bottom: 1px solid ${p => p.theme.blue300};
  139. }
  140. `;
  141. const StyledHovercard = styled(Hovercard)`
  142. ${Body} {
  143. max-height: 300px;
  144. overflow-y: auto;
  145. }
  146. `;
  147. const StyledIcon = styled('span')`
  148. color: ${p => p.theme.textColor};
  149. cursor: pointer;
  150. `;
  151. export default IssueSyncListElement;