From 9d1562d9c74ff2407e988c87a18af29287cddc28 Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Fri, 6 Aug 2021 11:11:10 +0530 Subject: [PATCH 01/23] fix passphrase field error not visible --- src/components/SingleInputForm.tsx | 38 ++++++++++++++++-------------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/src/components/SingleInputForm.tsx b/src/components/SingleInputForm.tsx index 006d30b36..99432ad73 100644 --- a/src/components/SingleInputForm.tsx +++ b/src/components/SingleInputForm.tsx @@ -18,8 +18,11 @@ interface Props { buttonText: string; } -const Group = styled.div` - display: flex; +const PositioningDiv = styled.div` + float:right; + position:absolute; + top:0; + right:0; `; const Button = styled.button` @@ -58,26 +61,25 @@ export default function SingleInputForm(props: Props) { values, touched, errors, handleChange, handleSubmit, }) => (
- - - - { - props.fieldType === 'password' && + + + + {props.fieldType === 'password' && } - + {errors.passphrase} From bfb60d820f45b7f24edc74b384db751ba53ce518 Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Fri, 6 Aug 2021 13:07:29 +0530 Subject: [PATCH 02/23] seperated error into server and custom errors --- src/utils/common/errorUtil.ts | 51 +++++++++++++++++++---------------- 1 file changed, 28 insertions(+), 23 deletions(-) diff --git a/src/utils/common/errorUtil.ts b/src/utils/common/errorUtil.ts index bede27368..75e58d18e 100644 --- a/src/utils/common/errorUtil.ts +++ b/src/utils/common/errorUtil.ts @@ -1,41 +1,46 @@ import constants from 'utils/strings/constants'; -export const errorCodes = { - ERR_STORAGE_LIMIT_EXCEEDED: '426', - ERR_NO_ACTIVE_SUBSCRIPTION: '402', - ERR_NO_INTERNET_CONNECTION: '1', - ERR_SESSION_EXPIRED: '401', - ERR_KEY_MISSING: '2', - ERR_FORBIDDEN: '403', +export const ServerErrorCodes = { + SESSION_EXPIRED: '401', + NO_ACTIVE_SUBSCRIPTION: '402', + FORBIDDEN: '403', + STORAGE_LIMIT_EXCEEDED: '426', }; -export const SUBSCRIPTION_VERIFICATION_ERROR = 'Subscription verification failed'; +export const CustomError ={ + SUBSCRIPTION_VERIFICATION_ERROR: 'Subscription verification failed', + THUMBNAIL_GENERATION_FAILED: 'thumbnail generation failed', + VIDEO_PLAYBACK_FAILED: 'video playback failed', + ETAG_MISSING: 'no header/etag present in response body', + KEY_MISSING: 'encrypted key missing from localStorage', +}; -export const THUMBNAIL_GENERATION_FAILED = 'thumbnail generation failed'; -export const VIDEO_PLAYBACK_FAILED = 'video playback failed'; export function parseError(error) { - let errorMessage = null; + let parsedMessage = null; if (error?.status) { const errorCode = error.status.toString(); switch (errorCode) { - case errorCodes.ERR_NO_ACTIVE_SUBSCRIPTION: - errorMessage = constants.SUBSCRIPTION_EXPIRED; + case ServerErrorCodes.NO_ACTIVE_SUBSCRIPTION: + parsedMessage = constants.SUBSCRIPTION_EXPIRED; break; - case errorCodes.ERR_STORAGE_LIMIT_EXCEEDED: - errorMessage = constants.STORAGE_QUOTA_EXCEEDED; + case ServerErrorCodes.STORAGE_LIMIT_EXCEEDED: + parsedMessage = constants.STORAGE_QUOTA_EXCEEDED; break; - case errorCodes.ERR_NO_INTERNET_CONNECTION: - errorMessage = constants.NO_INTERNET_CONNECTION; - break; - case errorCodes.ERR_SESSION_EXPIRED: - errorMessage = constants.SESSION_EXPIRED_MESSAGE; + case ServerErrorCodes.SESSION_EXPIRED: + parsedMessage = constants.SESSION_EXPIRED_MESSAGE; break; } + } else if (error?.message) { + const errorMessage = error.message.toString(); + switch (errorMessage) { + case CustomError.ETAG_MISSING: + parsedMessage=CustomError.ETAG_MISSING; + } } - if (errorMessage) { - return { parsedError: new Error(errorMessage), parsed: true }; + if (parsedMessage) { + return { parsedError: new Error(parsedMessage), parsed: true }; } else { return ({ parsedError: new Error(`${constants.UNKNOWN_ERROR} ${error}`), parsed: false, @@ -48,6 +53,6 @@ export function handleError(error) { if (parsed) { throw parsedError; } else { - // shallow error don't break the caller flow + // swallow error don't break the caller flow } } From 75aa02ca51db1d8e8e403fd43af57067196f2f19 Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Fri, 6 Aug 2021 13:08:09 +0530 Subject: [PATCH 03/23] updated gallery for those errorParsing changes --- src/pages/gallery/index.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index 3a927ae88..84b40e2aa 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -39,7 +39,6 @@ import { LoadingOverlay } from 'components/LoadingOverlay'; import PhotoFrame from 'components/PhotoFrame'; import { getSelectedFileIds, sortFilesIntoCollections } from 'utils/file'; import { addFilesToCollection } from 'utils/collection'; -import { errorCodes } from 'utils/common/errorUtil'; import SearchBar, { DateValue } from 'components/SearchBar'; import { Bbox } from 'services/searchService'; import SelectedFileOptions from 'components/pages/gallery/SelectedFileOptions'; @@ -55,6 +54,7 @@ import PlanSelector from 'components/pages/gallery/PlanSelector'; import Upload from 'components/pages/gallery/Upload'; import Collections from 'components/pages/gallery/Collections'; import { AppContext } from 'pages/_app'; +import { CustomError, ServerErrorCodes } from 'utils/common/errorUtil'; export enum FILE_TYPE { IMAGE, @@ -200,7 +200,7 @@ export default function Gallery() { try { checkConnectivity(); if (!(await isTokenValid())) { - throw new Error(errorCodes.ERR_SESSION_EXPIRED); + throw new Error(ServerErrorCodes.SESSION_EXPIRED); } !silent && loadingBar.current?.continuousStart(); await billingService.syncSubscription(); @@ -209,7 +209,7 @@ export default function Gallery() { await initDerivativeState(collections, files); } catch (e) { switch (e.message) { - case errorCodes.ERR_SESSION_EXPIRED: + case ServerErrorCodes.SESSION_EXPIRED: setBannerMessage(constants.SESSION_EXPIRED_MESSAGE); setDialogMessage({ title: constants.SESSION_EXPIRED, @@ -219,11 +219,9 @@ export default function Gallery() { text: constants.LOGIN, action: logoutUser, variant: 'success', - }, - nonClosable: true, - }); + } }); break; - case errorCodes.ERR_KEY_MISSING: + case CustomError.KEY_MISSING: clearKeys(); router.push('/credentials'); break; @@ -308,7 +306,7 @@ export default function Gallery() { } catch (e) { loadingBar.current.complete(); switch (e.status?.toString()) { - case errorCodes.ERR_FORBIDDEN: + case ServerErrorCodes.FORBIDDEN: setDialogMessage({ title: constants.ERROR, staticBackdrop: true, From 65dda03cc536f2addd91b4d8cdfb9d5081abf2c1 Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Fri, 6 Aug 2021 13:08:52 +0530 Subject: [PATCH 04/23] handled etag missing error by showing dialog --- src/components/pages/gallery/Upload.tsx | 16 +++++++++++++++- src/services/uploadService.ts | 8 ++++---- src/utils/common/index.ts | 2 +- src/utils/strings/englishConstants.tsx | 13 +++++++++++++ 4 files changed, 33 insertions(+), 6 deletions(-) diff --git a/src/components/pages/gallery/Upload.tsx b/src/components/pages/gallery/Upload.tsx index 082ec8668..d2a81a3e4 100644 --- a/src/components/pages/gallery/Upload.tsx +++ b/src/components/pages/gallery/Upload.tsx @@ -13,6 +13,8 @@ import { SetFiles, SetLoading } from 'pages/gallery'; import { AppContext } from 'pages/_app'; import { logError } from 'utils/sentry'; import { FileRejection } from 'react-dropzone'; +import { CustomError } from 'utils/common/errorUtil'; +import { DESKTOP_APP_DOWNLOAD_URL, downloadApp } from 'utils/common'; interface Props { syncWithRemote: (force?: boolean, silent?: boolean) => Promise; @@ -213,7 +215,19 @@ export default function Upload(props: Props) { props.setFiles, ); } catch (err) { - props.setBannerMessage(err.message); + if (err?.message===CustomError.ETAG_MISSING) { + props. setDialogMessage({ title: constants.UPLOAD_FAILED, + staticBackdrop: true, + close: { variant: 'danger', text: constants.CLOSE }, + content: constants.ETAGS_BLOCKED(DESKTOP_APP_DOWNLOAD_URL), + proceed: { + text: constants.DOWNLOAD, + action: downloadApp, + variant: 'success', + } }); + } else { + props.setBannerMessage(err.message); + } setProgressView(false); throw err; } finally { diff --git a/src/services/uploadService.ts b/src/services/uploadService.ts index ff20969f8..2f0ce3256 100644 --- a/src/services/uploadService.ts +++ b/src/services/uploadService.ts @@ -8,7 +8,7 @@ import { retryAsyncFunction, sleep } from 'utils/common'; import { handleError, parseError, - THUMBNAIL_GENERATION_FAILED, + CustomError, } from 'utils/common/errorUtil'; import { ComlinkWorker, getDedicatedCryptoWorker } from 'utils/crypto'; import * as convert from 'xml-js'; @@ -691,7 +691,7 @@ class UploadService { } catch (e) { reject(e); logError(e); - reject(Error(`${THUMBNAIL_GENERATION_FAILED} err: ${e}`)); + reject(Error(`${CustomError.THUMBNAIL_GENERATION_FAILED} err: ${e}`)); } }; timeout = setTimeout( @@ -729,7 +729,7 @@ class UploadService { } catch (e) { reject(e); logError(e); - reject(Error(`${THUMBNAIL_GENERATION_FAILED} err: ${e}`)); + reject(Error(`${CustomError.THUMBNAIL_GENERATION_FAILED} err: ${e}`)); } }); video.preload = 'metadata'; @@ -954,7 +954,7 @@ class UploadService { this.trackUploadProgress(filename, percentPerPart, index), ); if (!resp?.headers?.etag) { - const err=Error('no header/etag present in response body'); + const err=Error(CustomError.ETAG_MISSING); logError(err); throw err; } diff --git a/src/utils/common/index.ts b/src/utils/common/index.ts index dda85b719..d6785c83b 100644 --- a/src/utils/common/index.ts +++ b/src/utils/common/index.ts @@ -1,6 +1,6 @@ import constants from 'utils/strings/constants'; -const DESKTOP_APP_DOWNLOAD_URL = 'https://github.com/ente-io/bhari-frame/releases/'; +export const DESKTOP_APP_DOWNLOAD_URL = 'https://github.com/ente-io/bhari-frame/releases/latest'; const retrySleepTime = [2000, 5000, 10000]; diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index f2d65f8a0..d1d361dea 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -452,6 +452,19 @@ const englishConstants = { SEND_OTT: 'send otp', EMAIl_ALREADY_OWNED: 'email already taken', EMAIL_UDPATE_SUCCESSFUL: 'your email has been udpated successfully', + UPLOAD_FAILED: 'upload failed', + ETAGS_BLOCKED: (url:string)=>(<> +

we were unable to upload the following files because of your browser configuration.

+

please disable any addons that might be preventing ente from using eTags to upload large files, or use our + {' '} + + desktop app + + {' '} + for a more reliable import experience.

+ ), }; From 61dfe4f73f9c771c308a4ce7931135c25dccc69e Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Fri, 6 Aug 2021 13:23:02 +0530 Subject: [PATCH 05/23] build fix --- src/components/PhotoFrame.tsx | 4 ++-- src/services/billingService.ts | 4 ++-- src/utils/billingUtil.ts | 6 +++--- src/utils/common/key.ts | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/PhotoFrame.tsx b/src/components/PhotoFrame.tsx index 9aa0a3a4a..dc26d43bc 100644 --- a/src/components/PhotoFrame.tsx +++ b/src/components/PhotoFrame.tsx @@ -19,7 +19,7 @@ import { VariableSizeList as List } from 'react-window'; import PhotoSwipe from 'components/PhotoSwipe/PhotoSwipe'; import { isInsideBox, isSameDay as isSameDayAnyYear } from 'utils/search'; import { SetDialogMessage } from './MessageDialog'; -import { VIDEO_PLAYBACK_FAILED } from 'utils/common/errorUtil'; +import { CustomError } from 'utils/common/errorUtil'; import { GAP_BTW_TILES, DATE_CONTAINER_HEIGHT, IMAGE_CONTAINER_MAX_HEIGHT, IMAGE_CONTAINER_MAX_WIDTH, MIN_COLUMNS, SPACE_BTW_DATES, @@ -306,7 +306,7 @@ const PhotoFrame = ({ const t = setTimeout( () => { reject( - Error(`${VIDEO_PLAYBACK_FAILED} err: wait time exceeded`), + Error(`${CustomError.VIDEO_PLAYBACK_FAILED} err: wait time exceeded`), ); }, WAIT_FOR_VIDEO_PLAYBACK, diff --git a/src/services/billingService.ts b/src/services/billingService.ts index d56920946..671088ae0 100644 --- a/src/services/billingService.ts +++ b/src/services/billingService.ts @@ -4,7 +4,7 @@ import { checkConnectivity, runningInBrowser } from 'utils/common/'; import { setData, LS_KEYS } from 'utils/storage/localStorage'; import { convertToHumanReadable } from 'utils/billingUtil'; import { loadStripe, Stripe } from '@stripe/stripe-js'; -import { SUBSCRIPTION_VERIFICATION_ERROR } from 'utils/common/errorUtil'; +import { CustomError } from 'utils/common/errorUtil'; import HTTPService from './HTTPService'; import { logError } from 'utils/sentry'; @@ -142,7 +142,7 @@ class billingService { try { await this.verifySubscription(); } catch (e) { - throw new Error(SUBSCRIPTION_VERIFICATION_ERROR); + throw new Error(CustomError.SUBSCRIPTION_VERIFICATION_ERROR); } } diff --git a/src/utils/billingUtil.ts b/src/utils/billingUtil.ts index 9dfdb7af4..5f6aeb215 100644 --- a/src/utils/billingUtil.ts +++ b/src/utils/billingUtil.ts @@ -9,7 +9,7 @@ import { NextRouter } from 'next/router'; import { SetDialogMessage } from 'components/MessageDialog'; import { SetLoading } from 'pages/gallery'; import { getData, LS_KEYS } from './storage/localStorage'; -import { SUBSCRIPTION_VERIFICATION_ERROR } from './common/errorUtil'; +import { CustomError } from './common/errorUtil'; const STRIPE = 'stripe'; @@ -123,7 +123,7 @@ export async function updateSubscription( close: { text: constants.CANCEL }, }); break; - case SUBSCRIPTION_VERIFICATION_ERROR: + case CustomError.SUBSCRIPTION_VERIFICATION_ERROR: setDialogMessage({ title: constants.ERROR, content: constants.SUBSCRIPTION_VERIFICATION_FAILED, @@ -239,7 +239,7 @@ export async function checkSubscriptionPurchase( } catch (e) { setDialogMessage({ title: constants.ERROR, - content: SUBSCRIPTION_VERIFICATION_ERROR, + content: CustomError.SUBSCRIPTION_VERIFICATION_ERROR, close: {}, }); } diff --git a/src/utils/common/key.ts b/src/utils/common/key.ts index c70d20475..4c1e2d8d5 100644 --- a/src/utils/common/key.ts +++ b/src/utils/common/key.ts @@ -2,7 +2,7 @@ import { B64EncryptionResult } from 'services/uploadService'; import CryptoWorker from 'utils/crypto'; import { getData, LS_KEYS } from 'utils/storage/localStorage'; import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage'; -import { errorCodes } from './errorUtil'; +import { CustomError } from './errorUtil'; export const getActualKey = async () => { try { @@ -18,7 +18,7 @@ export const getActualKey = async () => { ); return key; } catch (e) { - throw new Error(errorCodes.ERR_KEY_MISSING); + throw new Error(CustomError.KEY_MISSING); } }; From 02032041e1c49266a3f7a142603428130c277d3e Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Fri, 6 Aug 2021 13:36:04 +0530 Subject: [PATCH 06/23] fix typo --- src/components/pages/gallery/Upload.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/gallery/Upload.tsx b/src/components/pages/gallery/Upload.tsx index d2a81a3e4..01d658be7 100644 --- a/src/components/pages/gallery/Upload.tsx +++ b/src/components/pages/gallery/Upload.tsx @@ -216,7 +216,7 @@ export default function Upload(props: Props) { ); } catch (err) { if (err?.message===CustomError.ETAG_MISSING) { - props. setDialogMessage({ title: constants.UPLOAD_FAILED, + props.setDialogMessage({ title: constants.UPLOAD_FAILED, staticBackdrop: true, close: { variant: 'danger', text: constants.CLOSE }, content: constants.ETAGS_BLOCKED(DESKTOP_APP_DOWNLOAD_URL), From 7222e21eb601b588de54e7032a7ea1779d7808fe Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Thu, 29 Jul 2021 15:40:37 +0530 Subject: [PATCH 07/23] enhanced files upload result --- src/components/pages/gallery/Upload.tsx | 4 +++ .../pages/gallery/UploadProgress.tsx | 36 +++++++++++++------ src/services/uploadService.ts | 8 +++-- src/utils/strings/englishConstants.tsx | 23 ++++++++++-- 4 files changed, 56 insertions(+), 15 deletions(-) diff --git a/src/components/pages/gallery/Upload.tsx b/src/components/pages/gallery/Upload.tsx index 01d658be7..4c909604c 100644 --- a/src/components/pages/gallery/Upload.tsx +++ b/src/components/pages/gallery/Upload.tsx @@ -40,6 +40,7 @@ interface AnalysisResult { suggestedCollectionName: string; multipleFolders: boolean; } + export default function Upload(props: Props) { const [progressView, setProgressView] = useState(false); const [uploadStage, setUploadStage] = useState( @@ -47,6 +48,7 @@ export default function Upload(props: Props) { ); const [fileCounter, setFileCounter] = useState({ current: 0, total: 0 }); const [fileProgress, setFileProgress] = useState(new Map()); + const [uploadResult, setUploadResult]=useState(new Map()); const [percentComplete, setPercentComplete] = useState(0); const [choiceModalView, setChoiceModalView] = useState(false); const [fileAnalysisResult, setFileAnalysisResult] = useState(null); @@ -211,6 +213,7 @@ export default function Upload(props: Props) { setFileCounter, setUploadStage, setFileProgress, + setUploadResult, }, props.setFiles, ); @@ -272,6 +275,7 @@ export default function Upload(props: Props) { closeModal={() => setProgressView(false)} retryFailed={retryFailed} fileRejections={props.fileRejections} + uploadResult={uploadResult} /> ); diff --git a/src/components/pages/gallery/UploadProgress.tsx b/src/components/pages/gallery/UploadProgress.tsx index d76d0b226..7b446b320 100644 --- a/src/components/pages/gallery/UploadProgress.tsx +++ b/src/components/pages/gallery/UploadProgress.tsx @@ -3,7 +3,7 @@ import { Alert, Button, Modal, ProgressBar, } from 'react-bootstrap'; import { FileRejection } from 'react-dropzone'; -import { UPLOAD_STAGES, FileUploadErrorCode } from 'services/uploadService'; +import { UPLOAD_STAGES } from 'services/uploadService'; import constants from 'utils/strings/constants'; interface Props { @@ -15,6 +15,7 @@ interface Props { fileProgress: Map; show; fileRejections:FileRejection[] + uploadResult:Map; } interface FileProgressStatuses{ fileName:string; @@ -22,16 +23,18 @@ interface FileProgressStatuses{ } export default function UploadProgress(props: Props) { const fileProgressStatuses = [] as FileProgressStatuses[]; + const fileResultStatuses = [] as FileProgressStatuses[]; if (props.fileProgress) { for (const [fileName, progress] of props.fileProgress) { fileProgressStatuses.push({ fileName, progress }); } - for (const { file } of props.fileRejections) { - fileProgressStatuses.push({ fileName: file.name, progress: FileUploadErrorCode.UNSUPPORTED }); + } + if (props.uploadResult) { + for (const [fileName, progress] of props.uploadResult) { + if (progress<0) { + fileResultStatuses.push({ fileName, progress }); + } } - fileProgressStatuses.sort((a, b) => { - if (b.progress !== -1 && a.progress === -1) return 1; - }); } return ( {props.uploadStage===UPLOAD_STAGES.FINISH ? ( - fileProgressStatuses.length !== 0 && ( + fileResultStatuses.length !== 0 && ( {constants.FAILED_UPLOAD_FILE_LIST} @@ -77,7 +80,7 @@ export default function UploadProgress(props: Props) { variant="upload-progress-bar" /> )} - {fileProgressStatuses?.length > 0 && ( + {(fileProgressStatuses?.length > 0 || fileResultStatuses?.length>0) && (
    + ))} + {fileResultStatuses.map(({ fileName, progress }) => ( +
  • + { + constants.FILE_UPLOAD_RESULT( + fileName, + progress, + ) + }
    • ))}
)} {props.uploadStage === UPLOAD_STAGES.FINISH && ( - {props.uploadStage===UPLOAD_STAGES.FINISH && (fileProgressStatuses?.length === 0 ? ( + {props.uploadStage===UPLOAD_STAGES.FINISH && (props.retryFailed.length===0 ? ( ))} )} diff --git a/src/services/uploadService.ts b/src/services/uploadService.ts index 2f0ce3256..c149977b6 100644 --- a/src/services/uploadService.ts +++ b/src/services/uploadService.ts @@ -142,6 +142,7 @@ class UploadService { private filesCompleted: number; private totalFileCount: number; private fileProgress: Map; + private uploadResult:Map; private metadataMap: Map; private filesToBeUploaded: FileWithCollection[]; private progressBarProps; @@ -160,6 +161,7 @@ class UploadService { this.filesCompleted = 0; this.fileProgress = new Map(); + this.uploadResult = new Map(); this.failedFiles = []; this.metadataMap = new Map(); this.progressBarProps = progressBarProps; @@ -288,7 +290,6 @@ class UploadService { uploadFile = null; - this.fileProgress.delete(rawFile.name); this.filesCompleted++; } } catch (e) { @@ -301,6 +302,8 @@ class UploadService { file=null; encryptedFile=null; } + this.uploadResult.set(rawFile.name, this.fileProgress.get(rawFile.name)); + this.fileProgress.delete(rawFile.name); this.updateProgressBarUI(); if (this.filesToBeUploaded.length > 0) { @@ -316,7 +319,7 @@ class UploadService { } private updateProgressBarUI() { - const { setPercentComplete, setFileCounter, setFileProgress } = + const { setPercentComplete, setFileCounter, setFileProgress, setUploadResult } = this.progressBarProps; setFileCounter({ finished: this.filesCompleted, @@ -335,6 +338,7 @@ class UploadService { } setPercentComplete(percentComplete); setFileProgress(this.fileProgress); + setUploadResult(this.uploadResult); } private fileAlreadyInCollection( diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index d1d361dea..ee77ef4ab 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -94,7 +94,7 @@ const englishConstants = { UPLOADING_FILES: 'file upload', FAILED_UPLOAD_FILE_LIST: 'upload failed for following files', UNSUPPORTED_FILE_LIST: 'unsupported files', - FILE_UPLOAD_PROGRESS: (name, progress) => ( + FILE_UPLOAD_PROGRESS: (name:string, progress:number) => (
{name} {' - '} @@ -105,13 +105,31 @@ const englishConstants = { case -2: return 'already uploaded, skipping...'; case -3: - return 'unsupported file format, ignored'; + return ',unsupported file format, skipping....'; default: return `${progress}%`; } })()}
), + FILE_UPLOAD_RESULT: (name:string, progress:number) => ( +
+ {name} + {' - '} + {(() => { + switch (progress) { + case -1: + return 'failed'; + case -2: + return 'skipped duplicate'; + case -3: + return 'skipped unsupported format'; + default: + return `uploaded`; + } + })()} +
+ ), SUBSCRIPTION_EXPIRED: 'your subscription has expired, please renew it', STORAGE_QUOTA_EXCEEDED: @@ -466,6 +484,7 @@ const englishConstants = { for a more reliable import experience.

), + RETRY_FAILED: 'retry failed files', }; export default englishConstants; From 617f217e6873b08d0ec64c0d323364ba52fd04bc Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Thu, 29 Jul 2021 16:02:51 +0530 Subject: [PATCH 08/23] show retry button if files files exist --- src/components/pages/gallery/UploadProgress.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/pages/gallery/UploadProgress.tsx b/src/components/pages/gallery/UploadProgress.tsx index 7b446b320..e85385eac 100644 --- a/src/components/pages/gallery/UploadProgress.tsx +++ b/src/components/pages/gallery/UploadProgress.tsx @@ -3,7 +3,7 @@ import { Alert, Button, Modal, ProgressBar, } from 'react-bootstrap'; import { FileRejection } from 'react-dropzone'; -import { UPLOAD_STAGES } from 'services/uploadService'; +import { FileUploadErrorCode, UPLOAD_STAGES } from 'services/uploadService'; import constants from 'utils/strings/constants'; interface Props { @@ -24,6 +24,7 @@ interface FileProgressStatuses{ export default function UploadProgress(props: Props) { const fileProgressStatuses = [] as FileProgressStatuses[]; const fileResultStatuses = [] as FileProgressStatuses[]; + let filesHaveFailed=false; if (props.fileProgress) { for (const [fileName, progress] of props.fileProgress) { fileProgressStatuses.push({ fileName, progress }); @@ -34,6 +35,9 @@ export default function UploadProgress(props: Props) { if (progress<0) { fileResultStatuses.push({ fileName, progress }); } + if (progress===FileUploadErrorCode.FAILED) { + filesHaveFailed=true; + } } } return ( @@ -113,7 +117,7 @@ export default function UploadProgress(props: Props) { )} {props.uploadStage === UPLOAD_STAGES.FINISH && ( - {props.uploadStage===UPLOAD_STAGES.FINISH && (props.retryFailed.length===0 ? ( + {props.uploadStage===UPLOAD_STAGES.FINISH && (!filesHaveFailed? ( ) : ( + {props.uploadStage===UPLOAD_STAGES.FINISH && (fileUploadResults?.get(FileUploadResults.FAILED)?.length>0? ( ))} + + ) : ( + ))} )} diff --git a/src/services/uploadService.ts b/src/services/uploadService.ts index c149977b6..cb487fa12 100644 --- a/src/services/uploadService.ts +++ b/src/services/uploadService.ts @@ -46,10 +46,11 @@ const FILE_UPLOAD_COMPLETED = 100; const EDITED_FILE_SUFFIX = '-edited'; const TwoSecondInMillSeconds = 2000; -export enum FileUploadErrorCode { +export enum FileUploadResults { FAILED = -1, SKIPPED = -2, UNSUPPORTED = -3, + UPLOADED = 100, } interface Location { @@ -261,11 +262,9 @@ class UploadService { if (this.fileAlreadyInCollection(file, collection)) { // set progress to -2 indicating that file upload was skipped - this.fileProgress.set(rawFile.name, FileUploadErrorCode.SKIPPED); + this.fileProgress.set(rawFile.name, FileUploadResults.SKIPPED); this.updateProgressBarUI(); await sleep(TwoSecondInMillSeconds); - // remove completed files for file progress list - this.fileProgress.delete(rawFile.name); } else { encryptedFile = await this.encryptFile(worker, file, collection.key); @@ -289,14 +288,14 @@ class UploadService { this.setFiles(this.existingFiles); uploadFile = null; - + this.fileProgress.set(rawFile.name, FileUploadResults.UPLOADED); this.filesCompleted++; } } catch (e) { logError(e, 'file upload failed'); this.failedFiles.push(fileWithCollection); // set progress to -1 indicating that file upload failed but keep it to show in the file-upload list progress - this.fileProgress.set(rawFile.name, FileUploadErrorCode.FAILED); + this.fileProgress.set(rawFile.name, FileUploadResults.FAILED); handleError(e); } finally { file=null; diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index ee77ef4ab..623d0b781 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -92,7 +92,7 @@ const englishConstants = { 3: 'backup complete!', }, UPLOADING_FILES: 'file upload', - FAILED_UPLOAD_FILE_LIST: 'upload failed for following files', + FILE_NOT_UPLOADED_LIST: 'following files were not uploaded', UNSUPPORTED_FILE_LIST: 'unsupported files', FILE_UPLOAD_PROGRESS: (name:string, progress:number) => (
@@ -112,24 +112,6 @@ const englishConstants = { })()}
), - FILE_UPLOAD_RESULT: (name:string, progress:number) => ( -
- {name} - {' - '} - {(() => { - switch (progress) { - case -1: - return 'failed'; - case -2: - return 'skipped duplicate'; - case -3: - return 'skipped unsupported format'; - default: - return `uploaded`; - } - })()} -
- ), SUBSCRIPTION_EXPIRED: 'your subscription has expired, please renew it', STORAGE_QUOTA_EXCEEDED: @@ -485,6 +467,14 @@ const englishConstants = { ), RETRY_FAILED: 'retry failed files', + FAILED_FILES: 'failed files ', + SKIPPED_FILES: 'duplicate files', + UNSUPPORTED_FILES: 'unsupported files', + UPLOADED_FILES: 'successfully uploaded files', + FAILED_INFO: ' unable to upload these files because of network issue, you can retry upload these files', + SKIPPED_INFO: 'these files already existed in the album', + UNSUPPORTED_INFO: 'these files are currently not supported by ente', + UPLOADED_INFO: 'successfully backed-up memories', }; export default englishConstants; From 0e025986c1ec8dba2cf585096a94d723ec0d67d4 Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Fri, 6 Aug 2021 17:52:45 +0530 Subject: [PATCH 10/23] extracted out strings --- src/components/ChangeEmail.tsx | 3 +-- .../pages/gallery/SelectedFileOptions.tsx | 2 +- src/components/pages/gallery/UploadProgress.tsx | 14 ++++++++------ src/utils/strings/englishConstants.tsx | 1 - 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/ChangeEmail.tsx b/src/components/ChangeEmail.tsx index 668e498bb..f7adf1c7d 100644 --- a/src/components/ChangeEmail.tsx +++ b/src/components/ChangeEmail.tsx @@ -9,7 +9,6 @@ import router from 'next/router'; import { changeEmail, getOTTForEmailChange } from 'services/userService'; import styled from 'styled-components'; import { AppContext } from 'pages/_app'; -import englishConstants from 'utils/strings/englishConstants'; interface formValues { email: string; @@ -125,7 +124,7 @@ function ChangeEmailForm(props:Props) { diff --git a/src/components/pages/gallery/SelectedFileOptions.tsx b/src/components/pages/gallery/SelectedFileOptions.tsx index 7c7c827df..84dc2e420 100644 --- a/src/components/pages/gallery/SelectedFileOptions.tsx +++ b/src/components/pages/gallery/SelectedFileOptions.tsx @@ -7,7 +7,7 @@ import DeleteIcon from 'components/icons/DeleteIcon'; import CrossIcon from 'components/icons/CrossIcon'; import AddIcon from 'components/icons/AddIcon'; import { IconButton } from 'components/Container'; -import constants from 'utils/strings/englishConstants'; +import constants from 'utils/strings/constants'; interface Props { addToCollectionHelper: (collectionName, collection) => void; diff --git a/src/components/pages/gallery/UploadProgress.tsx b/src/components/pages/gallery/UploadProgress.tsx index 1f05a7db9..37202b2a9 100644 --- a/src/components/pages/gallery/UploadProgress.tsx +++ b/src/components/pages/gallery/UploadProgress.tsx @@ -141,9 +141,9 @@ export default function UploadProgress(props: Props) { } {fileUploadResults?.get(FileUploadResults.FAILED)?.length>0 &&(<> - setFailedView(!failedFilesView)}>failed files {failedFilesView?:} + setFailedView(!failedFilesView)}>{constants.FAILED_FILES} {failedFilesView?:} -

unable to upload files because of network issue, you can retry upload this files

+

{constants.FAILED_INFO}

{fileUploadResults.get(FileUploadResults.FAILED).map((fileName) => (
  • @@ -154,9 +154,9 @@ export default function UploadProgress(props: Props) { )} {fileUploadResults?.get(FileUploadResults.SKIPPED)?.length>0 &&(<> - setSkippedFilesView(!skippedFilesView)}> duplicate files {skippedFilesView?:} + setSkippedFilesView(!skippedFilesView)}>{constants.SKIPPED_FILES} {skippedFilesView?:} -

    these files already existed in the album

    +

    {constants.SKIPPED_INFO}

    {fileUploadResults.get(FileUploadResults.SKIPPED).map((fileName) => (
  • @@ -167,7 +167,8 @@ export default function UploadProgress(props: Props) { )} {fileUploadResults?.get(FileUploadResults.UNSUPPORTED)?.length>0 &&(<> - setUnsupportedFilesView(!unsupportedFilesView)} > unsupported files {unsupportedFilesView?:} + setUnsupportedFilesView(!unsupportedFilesView)} >{constants.UNSUPPORTED_FILES}{unsupportedFilesView?:} +

    {constants.UNSUPPORTED_INFO}

    {fileUploadResults.get(FileUploadResults.UNSUPPORTED).map((fileName) => ( @@ -179,7 +180,8 @@ export default function UploadProgress(props: Props) { )} {fileUploadResults?.get(FileUploadResults.UPLOADED)?.length>0 &&(<> - setUploadedFileView(!uploadedFileView)} > successfully uploaded files {uploadedFileView?:} + setUploadedFileView(!uploadedFileView)} > {constants.UPLOADED_FILES} {uploadedFileView?:} +

    {constants.UPLOADED_INFO}

    {fileUploadResults.get(FileUploadResults.UPLOADED).map((fileName) => ( diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index 623d0b781..082e061b3 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -93,7 +93,6 @@ const englishConstants = { }, UPLOADING_FILES: 'file upload', FILE_NOT_UPLOADED_LIST: 'following files were not uploaded', - UNSUPPORTED_FILE_LIST: 'unsupported files', FILE_UPLOAD_PROGRESS: (name:string, progress:number) => (
    {name} From be27d72ee1956ae88863adb344919957681fd196 Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Fri, 6 Aug 2021 18:05:08 +0530 Subject: [PATCH 11/23] moved etag blocked message to upload progress bar --- src/components/pages/gallery/Upload.tsx | 16 +----------- .../pages/gallery/UploadProgress.tsx | 25 ++++++++++++++++--- src/services/uploadService.ts | 10 +++++--- src/utils/common/errorUtil.ts | 6 ----- src/utils/strings/englishConstants.tsx | 2 +- 5 files changed, 30 insertions(+), 29 deletions(-) diff --git a/src/components/pages/gallery/Upload.tsx b/src/components/pages/gallery/Upload.tsx index d0549a96f..bcbc4a8ff 100644 --- a/src/components/pages/gallery/Upload.tsx +++ b/src/components/pages/gallery/Upload.tsx @@ -13,8 +13,6 @@ import { SetFiles, SetLoading } from 'pages/gallery'; import { AppContext } from 'pages/_app'; import { logError } from 'utils/sentry'; import { FileRejection } from 'react-dropzone'; -import { CustomError } from 'utils/common/errorUtil'; -import { DESKTOP_APP_DOWNLOAD_URL, downloadApp } from 'utils/common'; interface Props { syncWithRemote: (force?: boolean, silent?: boolean) => Promise; @@ -219,19 +217,7 @@ export default function Upload(props: Props) { props.setFiles, ); } catch (err) { - if (err?.message===CustomError.ETAG_MISSING) { - props.setDialogMessage({ title: constants.UPLOAD_FAILED, - staticBackdrop: true, - close: { variant: 'danger', text: constants.CLOSE }, - content: constants.ETAGS_BLOCKED(DESKTOP_APP_DOWNLOAD_URL), - proceed: { - text: constants.DOWNLOAD, - action: downloadApp, - variant: 'success', - } }); - } else { - props.setBannerMessage(err.message); - } + props.setBannerMessage(err.message); setProgressView(false); throw err; } finally { diff --git a/src/components/pages/gallery/UploadProgress.tsx b/src/components/pages/gallery/UploadProgress.tsx index 37202b2a9..c9856cae0 100644 --- a/src/components/pages/gallery/UploadProgress.tsx +++ b/src/components/pages/gallery/UploadProgress.tsx @@ -7,7 +7,9 @@ import { import { FileRejection } from 'react-dropzone'; import { FileUploadResults, UPLOAD_STAGES } from 'services/uploadService'; import styled from 'styled-components'; +import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common'; import constants from 'utils/strings/constants'; +import englishConstants from 'utils/strings/englishConstants'; interface Props { fileCounter; @@ -46,14 +48,16 @@ export default function UploadProgress(props: Props) { const [failedFilesView, setFailedView]=useState(false); const [skippedFilesView, setSkippedFilesView]=useState(false); const [unsupportedFilesView, setUnsupportedFilesView]=useState(false); - const [uploadedFileView, setUploadedFileView]=useState(false); + const [uploadedFilesView, setUploadedFilesView]=useState(false); + const [blockedFilesView, setBlockedFilesView]=useState(false); useEffect(()=>{ if (props.show) { setFailedView(false); setSkippedFilesView(false); setUnsupportedFilesView(false); - setUploadedFileView(false); + setUploadedFilesView(false); + setBlockedFilesView(false); } }, [props.show]); @@ -77,6 +81,7 @@ export default function UploadProgress(props: Props) { const fileList= fileUploadResults.get(progress); fileUploadResults.set(progress, [...fileList, fileName]); } + // fileUploadResults.set(FileUploadResults.BLOCKED, ['random']); } return ( @@ -140,6 +145,18 @@ export default function UploadProgress(props: Props) { ))} } + {fileUploadResults?.get(FileUploadResults.BLOCKED)?.length>0 &&(<> + setBlockedFilesView(!blockedFilesView)} > blocked files {blockedFilesView?:} + + {englishConstants.ETAGS_BLOCKED(DESKTOP_APP_DOWNLOAD_URL)} + {fileUploadResults.get(FileUploadResults.BLOCKED).map((fileName) => ( + +
  • + {fileName} +
    • + ))} +     + )} {fileUploadResults?.get(FileUploadResults.FAILED)?.length>0 &&(<> setFailedView(!failedFilesView)}>{constants.FAILED_FILES} {failedFilesView?:} @@ -180,9 +197,9 @@ export default function UploadProgress(props: Props) { )} {fileUploadResults?.get(FileUploadResults.UPLOADED)?.length>0 &&(<> - setUploadedFileView(!uploadedFileView)} > {constants.UPLOADED_FILES} {uploadedFileView?:} + setUploadedFilesView(!uploadedFilesView)} > {constants.UPLOADED_FILES} {uploadedFilesView?:}

    {constants.UPLOADED_INFO}

    - + {fileUploadResults.get(FileUploadResults.UPLOADED).map((fileName) => (
  • diff --git a/src/services/uploadService.ts b/src/services/uploadService.ts index cb487fa12..b99cd46fa 100644 --- a/src/services/uploadService.ts +++ b/src/services/uploadService.ts @@ -50,6 +50,7 @@ export enum FileUploadResults { FAILED = -1, SKIPPED = -2, UNSUPPORTED = -3, + BLOCKED=-4, UPLOADED = 100, } @@ -293,10 +294,13 @@ class UploadService { } } catch (e) { logError(e, 'file upload failed'); - this.failedFiles.push(fileWithCollection); - // set progress to -1 indicating that file upload failed but keep it to show in the file-upload list progress - this.fileProgress.set(rawFile.name, FileUploadResults.FAILED); handleError(e); + this.failedFiles.push(fileWithCollection); + if (e.message ===CustomError.ETAG_MISSING) { + this.fileProgress.set(rawFile.name, FileUploadResults.BLOCKED); + } else { + this.fileProgress.set(rawFile.name, FileUploadResults.FAILED); + } } finally { file=null; encryptedFile=null; diff --git a/src/utils/common/errorUtil.ts b/src/utils/common/errorUtil.ts index 75e58d18e..7354808a5 100644 --- a/src/utils/common/errorUtil.ts +++ b/src/utils/common/errorUtil.ts @@ -32,12 +32,6 @@ export function parseError(error) { parsedMessage = constants.SESSION_EXPIRED_MESSAGE; break; } - } else if (error?.message) { - const errorMessage = error.message.toString(); - switch (errorMessage) { - case CustomError.ETAG_MISSING: - parsedMessage=CustomError.ETAG_MISSING; - } } if (parsedMessage) { return { parsedError: new Error(parsedMessage), parsed: true }; diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index 082e061b3..9ed31f0db 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -457,7 +457,7 @@ const englishConstants = {

    please disable any addons that might be preventing ente from using eTags to upload large files, or use our {' '} desktop app From 96c2c7beb4c0b97e88343f1cdac0afc4ff23a9ca Mon Sep 17 00:00:00 2001 From: Pushkar Anand Date: Sat, 7 Aug 2021 02:09:16 +0530 Subject: [PATCH 12/23] Better fix for error message. --- src/components/SingleInputForm.tsx | 55 +++++++++++++++--------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/src/components/SingleInputForm.tsx b/src/components/SingleInputForm.tsx index 99432ad73..68930c2c7 100644 --- a/src/components/SingleInputForm.tsx +++ b/src/components/SingleInputForm.tsx @@ -18,20 +18,20 @@ interface Props { buttonText: string; } -const PositioningDiv = styled.div` - float:right; - position:absolute; - top:0; - right:0; +const Group = styled.div` + position: relative; `; const Button = styled.button` background: transparent; border: none; - width: 36px; - height: 36px; - margin-left: -36px; - display: flex; + width: 34px; + height: 34px; + position: absolute; + top: 1px; + right: 1px; + border-radius: 5px; + background-color: #fff; align-items: center; `; @@ -61,28 +61,29 @@ export default function SingleInputForm(props: Props) { values, touched, errors, handleChange, handleSubmit, }) => ( - - - - {props.fieldType === 'password' && + + + + { + props.fieldType === 'password' && } - - - {errors.passphrase} - + + {errors.passphrase} + + Date: Sat, 7 Aug 2021 02:22:08 +0530 Subject: [PATCH 13/23] Increase button size for safari. --- src/components/SingleInputForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SingleInputForm.tsx b/src/components/SingleInputForm.tsx index 68930c2c7..73bf7da75 100644 --- a/src/components/SingleInputForm.tsx +++ b/src/components/SingleInputForm.tsx @@ -25,7 +25,7 @@ const Group = styled.div` const Button = styled.button` background: transparent; border: none; - width: 34px; + width: 46px; height: 34px; position: absolute; top: 1px; From b6bb7af1795d5ab17c8768f742e3ee28a3c991e2 Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Sat, 7 Aug 2021 10:57:17 +0530 Subject: [PATCH 14/23] updated strings and style chnages --- .../pages/gallery/UploadProgress.tsx | 55 ++++++++++--------- src/utils/strings/englishConstants.tsx | 9 +-- 2 files changed, 35 insertions(+), 29 deletions(-) diff --git a/src/components/pages/gallery/UploadProgress.tsx b/src/components/pages/gallery/UploadProgress.tsx index c9856cae0..4399487d9 100644 --- a/src/components/pages/gallery/UploadProgress.tsx +++ b/src/components/pages/gallery/UploadProgress.tsx @@ -30,8 +30,13 @@ interface FileProgresses{ const FileList =styled.ul<{collapsed:boolean, sm?:boolean}>` margin-top: 10px; overflow: auto; - height:${(props)=> props.collapsed?'0px':props.sm?'144px':'200px'}; + height:${(props)=> props.collapsed?'0px':props.sm?'192px':'250px'}; transition: height 0.2s ease-out; + & > li{ + margin-bottom:12px; + color:#ddd; + padding-left:10px; + } `; const SectionHeader =styled.div` @@ -112,15 +117,7 @@ export default function UploadProgress(props: Props) { - {props.uploadStage===UPLOAD_STAGES.FINISH ? ( - filesNotUploaded && ( - - - {constants.FILE_NOT_UPLOADED_LIST} - - ) - ) : - (props.uploadStage === UPLOAD_STAGES.READING_GOOGLE_METADATA_FILES || + {(props.uploadStage === UPLOAD_STAGES.READING_GOOGLE_METADATA_FILES || props.uploadStage === UPLOAD_STAGES.UPLOADING) && ( < ProgressBar @@ -145,8 +142,28 @@ export default function UploadProgress(props: Props) { ))} } + {fileUploadResults?.get(FileUploadResults.UPLOADED)?.length>0 &&(<> + setUploadedFilesView(!uploadedFilesView)} > {constants.SUCCESSFUL_UPLOADS} {uploadedFilesView?:} + +

    {constants.SUCCESS_INFO}

    + {fileUploadResults.get(FileUploadResults.UPLOADED).map((fileName) => ( + +
  • + {fileName} +
    • + ))} +     + )} + + {props.uploadStage === UPLOAD_STAGES.FINISH && filesNotUploaded && ( + + + {constants.FILE_NOT_UPLOADED_LIST} + + ) + } {fileUploadResults?.get(FileUploadResults.BLOCKED)?.length>0 &&(<> - setBlockedFilesView(!blockedFilesView)} > blocked files {blockedFilesView?:} + setBlockedFilesView(!blockedFilesView)} > {constants.BLOCKED_UPLOADS} {blockedFilesView?:} {englishConstants.ETAGS_BLOCKED(DESKTOP_APP_DOWNLOAD_URL)} {fileUploadResults.get(FileUploadResults.BLOCKED).map((fileName) => ( @@ -158,7 +175,7 @@ export default function UploadProgress(props: Props) { )} {fileUploadResults?.get(FileUploadResults.FAILED)?.length>0 &&(<> - setFailedView(!failedFilesView)}>{constants.FAILED_FILES} {failedFilesView?:} + setFailedView(!failedFilesView)}>{constants.FAILED_UPLOADS} {failedFilesView?:}

    {constants.FAILED_INFO}

    {fileUploadResults.get(FileUploadResults.FAILED).map((fileName) => ( @@ -185,8 +202,8 @@ export default function UploadProgress(props: Props) { {fileUploadResults?.get(FileUploadResults.UNSUPPORTED)?.length>0 &&(<> setUnsupportedFilesView(!unsupportedFilesView)} >{constants.UNSUPPORTED_FILES}{unsupportedFilesView?:} -

    {constants.UNSUPPORTED_INFO}

    +

    {constants.UNSUPPORTED_INFO}

    {fileUploadResults.get(FileUploadResults.UNSUPPORTED).map((fileName) => (
  • @@ -196,18 +213,6 @@ export default function UploadProgress(props: Props) { )} - {fileUploadResults?.get(FileUploadResults.UPLOADED)?.length>0 &&(<> - setUploadedFilesView(!uploadedFilesView)} > {constants.UPLOADED_FILES} {uploadedFilesView?:} -

    {constants.UPLOADED_INFO}

    - - {fileUploadResults.get(FileUploadResults.UPLOADED).map((fileName) => ( - -
  • - {fileName} -
    • - ))} -     - )} {props.uploadStage === UPLOAD_STAGES.FINISH && ( diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index 9ed31f0db..4b5d659e2 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -465,15 +465,16 @@ const englishConstants = { for a more reliable import experience.

    ), - RETRY_FAILED: 'retry failed files', - FAILED_FILES: 'failed files ', + RETRY_FAILED: 'retry failed uploads', + FAILED_UPLOADS: 'failed uploads ', SKIPPED_FILES: 'duplicate files', UNSUPPORTED_FILES: 'unsupported files', - UPLOADED_FILES: 'successfully uploaded files', + SUCCESSFUL_UPLOADS: 'successful uploads', FAILED_INFO: ' unable to upload these files because of network issue, you can retry upload these files', SKIPPED_INFO: 'these files already existed in the album', UNSUPPORTED_INFO: 'these files are currently not supported by ente', - UPLOADED_INFO: 'successfully backed-up memories', + SUCCESS_INFO: 'successfully backed-up memories', + BLOCKED_UPLOADS: 'blocked uploads', }; export default englishConstants; From cb9b0cd6206baf02ad1f1c8e3906ed916a2cacd9 Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Sat, 7 Aug 2021 11:10:49 +0530 Subject: [PATCH 15/23] small UI change --- src/components/pages/gallery/UploadProgress.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/gallery/UploadProgress.tsx b/src/components/pages/gallery/UploadProgress.tsx index 4399487d9..7ad87c8b6 100644 --- a/src/components/pages/gallery/UploadProgress.tsx +++ b/src/components/pages/gallery/UploadProgress.tsx @@ -30,7 +30,7 @@ interface FileProgresses{ const FileList =styled.ul<{collapsed:boolean, sm?:boolean}>` margin-top: 10px; overflow: auto; - height:${(props)=> props.collapsed?'0px':props.sm?'192px':'250px'}; + height:${(props)=> props.collapsed?'0px':props.sm?'156px':'220px'}; transition: height 0.2s ease-out; & > li{ margin-bottom:12px; From 7bbbd0a54200c2e955a286e52621200d3965c3ca Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Sat, 7 Aug 2021 14:34:38 +0530 Subject: [PATCH 16/23] ui changes --- src/components/pages/gallery/AlertBanner.tsx | 23 ++- src/components/pages/gallery/LinkButton.tsx | 29 +-- .../pages/gallery/UploadProgress.tsx | 171 +++++++----------- src/pages/_app.tsx | 4 + src/utils/common/index.ts | 2 +- src/utils/strings/englishConstants.tsx | 2 +- 6 files changed, 109 insertions(+), 122 deletions(-) diff --git a/src/components/pages/gallery/AlertBanner.tsx b/src/components/pages/gallery/AlertBanner.tsx index 3452e34ac..77d730ac5 100644 --- a/src/components/pages/gallery/AlertBanner.tsx +++ b/src/components/pages/gallery/AlertBanner.tsx @@ -1,16 +1,31 @@ import React from 'react'; import Alert from 'react-bootstrap/Alert'; +import { getVariantColor } from './LinkButton'; -export default function AlertBanner({ bannerMessage }) { +interface Props{ + bannerMessage?:any + variant?:string + children?:any +} +export default function AlertBanner(props:Props) { return ( - {bannerMessage} + {props.bannerMessage?props.bannerMessage:props.children} ); } diff --git a/src/components/pages/gallery/LinkButton.tsx b/src/components/pages/gallery/LinkButton.tsx index 58039de03..5c553868c 100644 --- a/src/components/pages/gallery/LinkButton.tsx +++ b/src/components/pages/gallery/LinkButton.tsx @@ -4,6 +4,7 @@ enum ButtonVariant { success = 'success', danger = 'danger', secondary = 'secondary', + warning='warning' } type Props = React.PropsWithChildren<{ onClick: any; @@ -11,23 +12,25 @@ type Props = React.PropsWithChildren<{ style?: any; }>; -export default function LinkButton(props: Props) { - function getButtonColor(variant: string) { - switch (variant) { - case ButtonVariant.success: - return '#2dc262'; - case ButtonVariant.danger: - return '#c93f3f'; - case ButtonVariant.secondary: - return '#858585'; - default: - return '#d1d1d1'; - } +export function getVariantColor(variant: string) { + switch (variant) { + case ButtonVariant.success: + return '#2dc262'; + case ButtonVariant.danger: + return '#c93f3f'; + case ButtonVariant.secondary: + return '#858585'; + case ButtonVariant.warning: + return '#D7BB63'; + default: + return '#d1d1d1'; } +} +export default function LinkButton(props: Props) { return (
    ` - margin-top: 10px; - overflow: auto; - height:${(props)=> props.collapsed?'0px':props.sm?'156px':'220px'}; - transition: height 0.2s ease-out; - & > li{ - margin-bottom:12px; - color:#ddd; +const Content =styled.div<{collapsed:boolean, sm?:boolean, height?:number}>` + overflow: hidden; + height:${(props)=> props.collapsed?'0px':props.height+'px'}; + transition:${(props)=> 'height '+0.001*props.height+'s ease-out'}; + margin-bottom: 20px; + & >p { + padding-left:35px; + margin:0; + } +`; +const FileList =styled.ul` + padding-left:50px; + & > li { padding-left:10px; + color:#ccc; } `; -const SectionHeader =styled.div` +const SectionTitle =styled.div` display:flex; justify-content:space-between; padding:0 20px; @@ -49,25 +55,38 @@ const SectionHeader =styled.div` `; +interface ResultSectionProps{ + fileUploadResultMap: Map; + fileUploadResult:FileUploadResults; + sectionTitle; + sectionInfo; + infoHeight:number; +} +const ResultSection =(props:ResultSectionProps)=>{ + const [listView, setListView]=useState(false); + const fileList=props.fileUploadResultMap?.get(props.fileUploadResult); + if (!fileList?.length) { + return <>; + } + return (<> + setListView(!listView)} > {props.sectionTitle} {listView?:} + +

    {props.sectionInfo}

    + + {fileList.map((fileName) => ( + +
  • + {fileName} +
    • + ))} +     +     + ); +}; + export default function UploadProgress(props: Props) { - const [failedFilesView, setFailedView]=useState(false); - const [skippedFilesView, setSkippedFilesView]=useState(false); - const [unsupportedFilesView, setUnsupportedFilesView]=useState(false); - const [uploadedFilesView, setUploadedFilesView]=useState(false); - const [blockedFilesView, setBlockedFilesView]=useState(false); - - useEffect(()=>{ - if (props.show) { - setFailedView(false); - setSkippedFilesView(false); - setUnsupportedFilesView(false); - setUploadedFilesView(false); - setBlockedFilesView(false); - } - }, [props.show]); - const fileProgressStatuses = [] as FileProgresses[]; - const fileUploadResults = new Map(); + const fileUploadResultMap = new Map(); let filesNotUploaded=false; if (props.fileProgress) { @@ -77,16 +96,15 @@ export default function UploadProgress(props: Props) { } if (props.uploadResult) { for (const [fileName, progress] of props.uploadResult) { - if (!fileUploadResults.has(progress)) { - fileUploadResults.set(progress, []); + if (!fileUploadResultMap.has(progress)) { + fileUploadResultMap.set(progress, []); } if (progress<0) { filesNotUploaded=true; } - const fileList= fileUploadResults.get(progress); - fileUploadResults.set(progress, [...fileList, fileName]); + const fileList= fileUploadResultMap.get(progress); + fileUploadResultMap.set(progress, [...fileList, fileName]); } - // fileUploadResults.set(FileUploadResults.BLOCKED, ['random']); } return ( @@ -104,7 +122,12 @@ export default function UploadProgress(props: Props) { } > @@ -128,7 +151,7 @@ export default function UploadProgress(props: Props) { ) } {fileProgressStatuses.length>0 && - + {fileProgressStatuses.map(({ fileName, progress }) => (
  • {props.uploadStage===UPLOAD_STAGES.FINISH ? @@ -140,83 +163,25 @@ export default function UploadProgress(props: Props) { }
    • ))} -     - } - {fileUploadResults?.get(FileUploadResults.UPLOADED)?.length>0 &&(<> - setUploadedFilesView(!uploadedFilesView)} > {constants.SUCCESSFUL_UPLOADS} {uploadedFilesView?:} - -

    {constants.SUCCESS_INFO}

    - {fileUploadResults.get(FileUploadResults.UPLOADED).map((fileName) => ( +     } -
  • - {fileName} -
    • - ))} -     - )} + {props.uploadStage === UPLOAD_STAGES.FINISH && filesNotUploaded && ( - - + {constants.FILE_NOT_UPLOADED_LIST} - + ) } - {fileUploadResults?.get(FileUploadResults.BLOCKED)?.length>0 &&(<> - setBlockedFilesView(!blockedFilesView)} > {constants.BLOCKED_UPLOADS} {blockedFilesView?:} - - {englishConstants.ETAGS_BLOCKED(DESKTOP_APP_DOWNLOAD_URL)} - {fileUploadResults.get(FileUploadResults.BLOCKED).map((fileName) => ( - -
  • - {fileName} -
    • - ))} -     - )} - {fileUploadResults?.get(FileUploadResults.FAILED)?.length>0 &&(<> - setFailedView(!failedFilesView)}>{constants.FAILED_UPLOADS} {failedFilesView?:} - -

    {constants.FAILED_INFO}

    - {fileUploadResults.get(FileUploadResults.FAILED).map((fileName) => ( - -
  • - {fileName} -
    • - ))} -     - )} - - {fileUploadResults?.get(FileUploadResults.SKIPPED)?.length>0 &&(<> - setSkippedFilesView(!skippedFilesView)}>{constants.SKIPPED_FILES} {skippedFilesView?:} - -

    {constants.SKIPPED_INFO}

    - {fileUploadResults.get(FileUploadResults.SKIPPED).map((fileName) => ( - -
  • - {fileName} -
    • - ))} -     - )} - - {fileUploadResults?.get(FileUploadResults.UNSUPPORTED)?.length>0 &&(<> - setUnsupportedFilesView(!unsupportedFilesView)} >{constants.UNSUPPORTED_FILES}{unsupportedFilesView?:} - -

    {constants.UNSUPPORTED_INFO}

    - {fileUploadResults.get(FileUploadResults.UNSUPPORTED).map((fileName) => ( - -
  • - {fileName} -
    • - ))} -     - )} + + + + {props.uploadStage === UPLOAD_STAGES.FINISH && ( - {props.uploadStage===UPLOAD_STAGES.FINISH && (fileUploadResults?.get(FileUploadResults.FAILED)?.length>0? ( + {props.uploadStage===UPLOAD_STAGES.FINISH && ((fileUploadResultMap?.get(FileUploadResults.FAILED)?.length>0 || fileUploadResultMap?.get(FileUploadResults.BLOCKED)?.length>0)? (