uploadBackup.tsx 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. import {useContext, useRef, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import {motion} from 'framer-motion';
  4. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  5. import {Client} from 'sentry/api';
  6. import {Button} from 'sentry/components/button';
  7. import Well from 'sentry/components/well';
  8. import {IconFile, IconUpload} from 'sentry/icons';
  9. import {t} from 'sentry/locale';
  10. import ConfigStore from 'sentry/stores/configStore';
  11. import {space} from 'sentry/styles/space';
  12. import testableTransition from 'sentry/utils/testableTransition';
  13. import useApi from 'sentry/utils/useApi';
  14. import StepHeading from 'sentry/views/relocation/components/stepHeading';
  15. import {RelocationOnboardingContext} from 'sentry/views/relocation/relocationOnboardingContext';
  16. import type {StepProps} from './types';
  17. type UploadWellProps = {
  18. centered: boolean;
  19. draggedOver: boolean;
  20. onDragEnter: Function;
  21. onDragLeave: Function;
  22. onDragOver: Function;
  23. onDrop: Function;
  24. };
  25. const DEFAULT_ERROR_MSG = t(
  26. 'An error has occurred while trying to start relocation job. Please contact support for further assistance.'
  27. );
  28. const IN_PROGRESS_RELOCATION_ERROR_MSG = t(
  29. 'You already have an in-progress relocation job.'
  30. );
  31. const THROTTLED_RELOCATION_ERROR_MSG = t(
  32. 'We have reached the daily limit of relocations - please try again tomorrow, or contact support.'
  33. );
  34. const SESSION_EXPIRED_ERROR_MSG = t('Your session has expired.');
  35. export function UploadBackup({onComplete}: StepProps) {
  36. const api = useApi({
  37. api: new Client({headers: {Accept: 'application/json; charset=utf-8'}}),
  38. });
  39. const [file, setFile] = useState<File>();
  40. const [dragCounter, setDragCounter] = useState(0);
  41. const inputFileRef = useRef<HTMLInputElement>(null);
  42. const relocationOnboardingContext = useContext(RelocationOnboardingContext);
  43. const user = ConfigStore.get('user');
  44. const handleDragEnter = event => {
  45. event.preventDefault();
  46. setDragCounter(dragCounter + 1);
  47. };
  48. const handleDragLeave = () => {
  49. setDragCounter(dragCounter - 1);
  50. };
  51. const handleDrop = event => {
  52. event.preventDefault();
  53. setDragCounter(0);
  54. setFile(event.dataTransfer.files[0]);
  55. };
  56. const handleFileChange = event => {
  57. const newFile = event.target.files?.[0];
  58. // No file selected (e.g. user clicked "cancel")
  59. if (!newFile) {
  60. return;
  61. }
  62. setFile(newFile);
  63. };
  64. const onFileUploadLinkClick = () => {
  65. inputFileRef.current && inputFileRef.current.click();
  66. };
  67. const handleStartRelocation = async () => {
  68. const {orgSlugs, regionUrl, promoCode} = relocationOnboardingContext.data;
  69. if (!orgSlugs || !regionUrl || !file) {
  70. addErrorMessage(DEFAULT_ERROR_MSG);
  71. return;
  72. }
  73. const formData = new FormData();
  74. formData.set('orgs', orgSlugs);
  75. formData.set('file', file);
  76. formData.set('owner', user.username);
  77. if (promoCode) {
  78. formData.set('promo_code', promoCode);
  79. }
  80. try {
  81. const result = await api.requestPromise(`/relocations/`, {
  82. method: 'POST',
  83. host: regionUrl,
  84. data: formData,
  85. });
  86. addSuccessMessage(
  87. t(
  88. "Your relocation has started - we'll email you with updates as soon as we have 'em!"
  89. )
  90. );
  91. onComplete(result.uuid);
  92. } catch (error) {
  93. if (error.status === 409) {
  94. addErrorMessage(IN_PROGRESS_RELOCATION_ERROR_MSG);
  95. } else if (error.status === 429) {
  96. addErrorMessage(THROTTLED_RELOCATION_ERROR_MSG);
  97. } else if (error.status === 401) {
  98. addErrorMessage(SESSION_EXPIRED_ERROR_MSG);
  99. } else {
  100. addErrorMessage(DEFAULT_ERROR_MSG);
  101. }
  102. }
  103. };
  104. return (
  105. <Wrapper data-test-id="upload-backup">
  106. <StepHeading step={4}>
  107. {t('Upload Tarball to begin the relocation process')}
  108. </StepHeading>
  109. <motion.div
  110. transition={testableTransition()}
  111. variants={{
  112. initial: {y: 30, opacity: 0},
  113. animate: {y: 0, opacity: 1},
  114. exit: {opacity: 0},
  115. }}
  116. >
  117. <p>
  118. {t(
  119. 'Nearly done! The file is being uploaded to sentry for the relocation process. You can close this tab if you like. We will email when complete.'
  120. )}
  121. </p>
  122. {file ? (
  123. <FinishedWell centered>
  124. <IconFile className="file-icon" size="xl" />
  125. <div>
  126. <p>{file.name}</p>
  127. <a onClick={() => setFile(undefined)}>{t('Remove file')}</a>
  128. </div>
  129. <StartRelocationButton
  130. priority="primary"
  131. onClick={handleStartRelocation}
  132. icon={<IconUpload className="upload-icon" size="xs" />}
  133. >
  134. {t('Start Relocation')}
  135. </StartRelocationButton>
  136. </FinishedWell>
  137. ) : (
  138. <UploadWell
  139. onDragEnter={handleDragEnter}
  140. onDragOver={event => event.preventDefault()}
  141. onDragLeave={handleDragLeave}
  142. onDrop={handleDrop}
  143. centered
  144. aria-label="dropzone"
  145. draggedOver={dragCounter > 0}
  146. >
  147. <StyledUploadIcon className="upload-icon" size="xl" />
  148. <UploadWrapper>
  149. <p>{t('Drag and Drop file here or')}</p>
  150. <a onClick={onFileUploadLinkClick}>{t('Choose file')}</a>
  151. <UploadInput
  152. name="file"
  153. type="file"
  154. aria-label="file-upload"
  155. accept=".tar"
  156. ref={inputFileRef}
  157. onChange={e => handleFileChange(e)}
  158. hidden
  159. title=""
  160. />
  161. </UploadWrapper>
  162. </UploadWell>
  163. )}
  164. </motion.div>
  165. </Wrapper>
  166. );
  167. }
  168. export default UploadBackup;
  169. const StyledUploadIcon = styled(IconUpload)`
  170. margin-top: ${space(2)};
  171. margin-bottom: ${space(1)};
  172. `;
  173. const Wrapper = styled('div')`
  174. max-width: 769px;
  175. max-height: 525px;
  176. margin-left: auto;
  177. margin-right: auto;
  178. padding: ${space(4)};
  179. background-color: ${p => p.theme.surface400};
  180. z-index: 100;
  181. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  182. border-radius: 10px;
  183. width: 100%;
  184. font-size: 16px;
  185. color: ${p => p.theme.gray300};
  186. mark {
  187. border-radius: 8px;
  188. padding: ${space(0.25)} ${space(0.5)} ${space(0.25)} ${space(0.5)};
  189. background: ${p => p.theme.gray100};
  190. margin-right: ${space(1)};
  191. }
  192. h2 {
  193. color: ${p => p.theme.gray500};
  194. }
  195. p {
  196. margin-bottom: ${space(1)};
  197. }
  198. .encrypt-help {
  199. color: ${p => p.theme.gray500};
  200. }
  201. `;
  202. const StartRelocationButton = styled(Button)`
  203. margin-left: auto;
  204. `;
  205. const FinishedWell = styled(Well)`
  206. display: flex;
  207. align-items: center;
  208. text-align: left;
  209. div {
  210. margin-left: ${space(2)};
  211. line-height: 1;
  212. }
  213. a {
  214. color: ${p => p.theme.translucentGray200};
  215. font-size: 14px;
  216. }
  217. a:hover {
  218. color: ${p => p.theme.gray300};
  219. }
  220. `;
  221. const UploadWell = styled(Well)<UploadWellProps>`
  222. margin-top: ${space(2)};
  223. height: 140px;
  224. border-style: ${props => (props.draggedOver ? 'solid' : 'dashed')};
  225. border-width: medium;
  226. align-items: center;
  227. .file-icon,
  228. .upload-icon {
  229. color: ${p => p.theme.gray500};
  230. }
  231. background: ${props =>
  232. props.draggedOver ? p => p.theme.purple100 : p => p.theme.surface400};
  233. `;
  234. const UploadInput = styled('input')`
  235. opacity: 0;
  236. `;
  237. const UploadWrapper = styled('div')`
  238. display: flex;
  239. justify-content: center;
  240. a {
  241. padding-left: ${space(0.5)};
  242. }
  243. input[type='file'] {
  244. display: none;
  245. }
  246. `;