shareModal.tsx 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. import {Fragment, useCallback, useEffect, useRef, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import {bulkUpdate} from 'sentry/actionCreators/group';
  4. import {addErrorMessage} from 'sentry/actionCreators/indicator';
  5. import type {ModalRenderProps} from 'sentry/actionCreators/modal';
  6. import AutoSelectText from 'sentry/components/autoSelectText';
  7. import {Button} from 'sentry/components/button';
  8. import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
  9. import LoadingIndicator from 'sentry/components/loadingIndicator';
  10. import Switch from 'sentry/components/switchButton';
  11. import {IconRefresh} from 'sentry/icons';
  12. import {t} from 'sentry/locale';
  13. import GroupStore from 'sentry/stores/groupStore';
  14. import {useLegacyStore} from 'sentry/stores/useLegacyStore';
  15. import {space} from 'sentry/styles/space';
  16. import type {Group, Organization} from 'sentry/types';
  17. import useApi from 'sentry/utils/useApi';
  18. import useCopyToClipboard from 'sentry/utils/useCopyToClipboard';
  19. interface ShareIssueModalProps extends ModalRenderProps {
  20. groupId: string;
  21. onToggle: () => void;
  22. organization: Organization;
  23. projectSlug: string;
  24. }
  25. type UrlRef = React.ElementRef<typeof AutoSelectText>;
  26. function ShareIssueModal({
  27. Header,
  28. Body,
  29. Footer,
  30. organization,
  31. projectSlug,
  32. groupId,
  33. onToggle,
  34. closeModal,
  35. }: ShareIssueModalProps) {
  36. const api = useApi({persistInFlight: true});
  37. const [loading, setLoading] = useState(false);
  38. const urlRef = useRef<UrlRef>(null);
  39. const groups = useLegacyStore(GroupStore);
  40. const group = (groups as Group[]).find(item => item.id === groupId);
  41. const isShared = group?.isPublic;
  42. const handleShare = useCallback(
  43. (e: React.MouseEvent<HTMLButtonElement> | null, reshare?: boolean) => {
  44. e?.preventDefault();
  45. setLoading(true);
  46. onToggle();
  47. bulkUpdate(
  48. api,
  49. {
  50. orgId: organization.slug,
  51. projectId: projectSlug,
  52. itemIds: [groupId],
  53. data: {
  54. isPublic: reshare ?? !isShared,
  55. },
  56. },
  57. {
  58. error: () => {
  59. addErrorMessage(t('Error sharing'));
  60. },
  61. complete: () => {
  62. setLoading(false);
  63. },
  64. }
  65. );
  66. },
  67. [api, setLoading, onToggle, isShared, organization.slug, projectSlug, groupId]
  68. );
  69. /**
  70. * Share as soon as modal is opened
  71. */
  72. useEffect(() => {
  73. if (isShared) {
  74. return;
  75. }
  76. handleShare(null, true);
  77. // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want to run this on open
  78. }, []);
  79. function getShareUrl() {
  80. const path = `/share/issue/${group!.shareId}/`;
  81. const {host, protocol} = window.location;
  82. return `${protocol}//${host}${path}`;
  83. }
  84. const shareUrl = group?.shareId ? getShareUrl() : null;
  85. const {onClick: handleCopy} = useCopyToClipboard({
  86. text: shareUrl!,
  87. onCopy: closeModal,
  88. });
  89. return (
  90. <Fragment>
  91. <Header closeButton>
  92. <h4>{t('Share Issue')}</h4>
  93. </Header>
  94. <Body>
  95. <ModalContent>
  96. <SwitchWrapper>
  97. <div>
  98. <Title>{t('Create a public link')}</Title>
  99. <SubText>{t('Share a link with anyone outside your organization')}</SubText>
  100. </div>
  101. <Switch
  102. aria-label={isShared ? t('Unshare') : t('Share')}
  103. isActive={isShared}
  104. size="lg"
  105. toggle={handleShare}
  106. />
  107. </SwitchWrapper>
  108. {(!group || loading) && (
  109. <LoadingContainer>
  110. <LoadingIndicator mini />
  111. </LoadingContainer>
  112. )}
  113. {group && !loading && isShared && shareUrl && (
  114. <UrlContainer>
  115. <TextContainer>
  116. <StyledAutoSelectText ref={urlRef}>{shareUrl}</StyledAutoSelectText>
  117. </TextContainer>
  118. <ClipboardButton
  119. text={shareUrl}
  120. title={t('Copy to clipboard')}
  121. borderless
  122. size="sm"
  123. onClick={handleCopy}
  124. aria-label={t('Copy to clipboard')}
  125. />
  126. <ReshareButton
  127. title={t('Generate new URL. Invalidates previous URL')}
  128. aria-label={t('Generate new URL')}
  129. borderless
  130. size="sm"
  131. icon={<IconRefresh />}
  132. onClick={() => handleShare(null, true)}
  133. />
  134. </UrlContainer>
  135. )}
  136. </ModalContent>
  137. </Body>
  138. <Footer>
  139. {!loading && isShared && shareUrl ? (
  140. <Button priority="primary" onClick={handleCopy}>
  141. {t('Copy Link')}
  142. </Button>
  143. ) : (
  144. <Button priority="primary" onClick={closeModal}>
  145. {t('Close')}
  146. </Button>
  147. )}
  148. </Footer>
  149. </Fragment>
  150. );
  151. }
  152. export default ShareIssueModal;
  153. /**
  154. * min-height reduces layout shift when switching on and off
  155. */
  156. const ModalContent = styled('div')`
  157. display: flex;
  158. gap: ${space(2)};
  159. flex-direction: column;
  160. min-height: 100px;
  161. `;
  162. const SwitchWrapper = styled('div')`
  163. display: flex;
  164. justify-content: space-between;
  165. align-items: center;
  166. gap: ${space(2)};
  167. `;
  168. const Title = styled('div')`
  169. padding-right: ${space(4)};
  170. white-space: nowrap;
  171. `;
  172. const SubText = styled('p')`
  173. color: ${p => p.theme.subText};
  174. font-size: ${p => p.theme.fontSizeSmall};
  175. `;
  176. const LoadingContainer = styled('div')`
  177. display: flex;
  178. justify-content: center;
  179. `;
  180. const UrlContainer = styled('div')`
  181. display: grid;
  182. grid-template-columns: 1fr max-content max-content;
  183. align-items: center;
  184. border: 1px solid ${p => p.theme.border};
  185. border-radius: ${space(0.5)};
  186. `;
  187. const StyledAutoSelectText = styled(AutoSelectText)`
  188. padding: ${space(1)} ${space(1)};
  189. ${p => p.theme.overflowEllipsis}
  190. `;
  191. const TextContainer = styled('div')`
  192. position: relative;
  193. display: flex;
  194. flex-grow: 1;
  195. background-color: transparent;
  196. border-right: 1px solid ${p => p.theme.border};
  197. min-width: 0;
  198. `;
  199. const ClipboardButton = styled(CopyToClipboardButton)`
  200. border-radius: 0;
  201. border-right: 1px solid ${p => p.theme.border};
  202. height: 100%;
  203. flex-shrink: 0;
  204. margin: 0;
  205. &:hover {
  206. border-right: 1px solid ${p => p.theme.border};
  207. }
  208. `;
  209. const ReshareButton = styled(Button)`
  210. border-radius: 0;
  211. height: 100%;
  212. flex-shrink: 0;
  213. `;