From 09c632780942471237f585419ce808a94eae03a4 Mon Sep 17 00:00:00 2001 From: Bipul Adhikari Date: Wed, 4 Dec 2024 19:17:59 +0545 Subject: [PATCH] Fixups related to uploads feature Signed-off-by: Bipul Adhikari --- .../objects-list/ObjectListWithSidebar.tsx | 6 +-- .../upload-objects/UploadSidebar.tsx | 46 ++++++++--------- .../s3-browser/upload-objects/store.ts | 51 ++++++++----------- .../s3-browser/upload-objects/types.ts | 4 +- .../upload-component/FileUploadComponent.tsx | 19 +++++-- .../upload-component/uploads.ts | 5 +- .../upload-status/UploadStatusItem.tsx | 9 +--- .../upload-status/UploadStatusList.tsx | 3 +- 8 files changed, 67 insertions(+), 76 deletions(-) diff --git a/packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx b/packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx index fa4cd39a4..2514252bf 100644 --- a/packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx +++ b/packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx @@ -35,10 +35,6 @@ export const ObjectListWithSidebar: React.FC = ({ closeObjectSidebar(); setUploadSidebarExpanded(true); }; - const hideUploadSidebar = () => { - closeObjectSidebar(); - setUploadSidebarExpanded(false); - }; const onRowClick = ( selectedObject: ObjectCrFormat, actionItems: React.MutableRefObject @@ -61,7 +57,7 @@ export const ObjectListWithSidebar: React.FC = ({ client={noobaaS3} bucketName={bucketName} showSidebar={showUploadSidebar} - hideSidebar={hideUploadSidebar} + hideSidebar={closeUploadSidebar} setCompletionTime={setCompletionTime} triggerRefresh={triggerRefresh} /> diff --git a/packages/odf/components/s3-browser/upload-objects/UploadSidebar.tsx b/packages/odf/components/s3-browser/upload-objects/UploadSidebar.tsx index 474359370..d2283e1d9 100644 --- a/packages/odf/components/s3-browser/upload-objects/UploadSidebar.tsx +++ b/packages/odf/components/s3-browser/upload-objects/UploadSidebar.tsx @@ -130,7 +130,7 @@ const PanelContent: React.FC = observer( Standard uploads have a size limit of up to 5 TB in S3. - + ); @@ -144,26 +144,24 @@ export type UploadSidebarProps = { completionTime: number; }; -export const UploadSidebar: React.FC = observer( - ({ - isExpanded, - closeSidebar, - mainContent: drawerContentBody, - completionTime, - }) => { - return ( - - - } - > - {drawerContentBody} - - - ); - } -); +export const UploadSidebar: React.FC = ({ + isExpanded, + closeSidebar, + mainContent: drawerContentBody, + completionTime, +}) => { + return ( + + + } + > + {drawerContentBody} + + + ); +}; diff --git a/packages/odf/components/s3-browser/upload-objects/store.ts b/packages/odf/components/s3-browser/upload-objects/store.ts index db31f839c..78420651d 100644 --- a/packages/odf/components/s3-browser/upload-objects/store.ts +++ b/packages/odf/components/s3-browser/upload-objects/store.ts @@ -1,5 +1,5 @@ import { makeAutoObservable, toJS } from 'mobx'; -import { UploadProgress, UploadStatus } from './types'; +import { ObjectID, UploadProgress, UploadStatus } from './types'; export class UploadStore { uploads: Record = {}; @@ -13,16 +13,16 @@ export class UploadStore { } // Add a file to the map - addFile(file: UploadProgress, key: string) { + addFile(obejct: UploadProgress, key: string) { this.uploads[key] = { - ...file, + ...obejct, uploadState: UploadStatus.INIT_STATE, }; } - updateProgress(fileId: string, loaded: number, total: number) { - if (fileId in this.uploads) { - const existingData = this.uploads[fileId]; + updateProgress(objectId: ObjectID, loaded: number, total: number) { + if (objectId in this.uploads) { + const existingData = this.uploads[objectId]; const update = { loaded, total, @@ -33,52 +33,45 @@ export class UploadStore { } else if (existingData.uploadState === UploadStatus.INIT_STATE) { Object.assign(update, { uploadState: UploadStatus.UPLOAD_START }); } - this.uploads[fileId] = { ...existingData, ...update }; + this.uploads[objectId] = { ...existingData, ...update }; } } - set uploadCompleted(key: string) { - const existingData = this.uploads[key]; - this.uploads[key] = { + set uploadCompleted(objectId: ObjectID) { + const existingData = this.uploads[objectId]; + this.uploads[objectId] = { ...existingData, uploadState: UploadStatus.UPLOAD_COMPLETE, }; } - getFile(fileId: string) { - return this.uploads[fileId]; + getFile(objectId: ObjectID) { + return this.uploads[objectId]; } - set uploadFailed(fileId: string) { - if (this.uploads[fileId]) { - const existingData = this.uploads[fileId]; - - const update = - existingData.uploadState === UploadStatus.UPLOAD_COMPLETE - ? { uploadState: UploadStatus.UPLOAD_FAILED } - : {}; - this.uploads[fileId] = { ...existingData, ...update }; + set uploadFailed(objectId: ObjectID) { + if (this.uploads[objectId]) { + const existingData = this.uploads[objectId]; + const update = { uploadState: UploadStatus.UPLOAD_FAILED }; + this.uploads[objectId] = { ...existingData, ...update }; } } - performAbort(fileId: string) { - if (fileId in this.uploads) { - const existingData = this.uploads[fileId]; + performAbort(objectId: ObjectID) { + if (objectId in this.uploads) { + const existingData = this.uploads[objectId]; if (existingData?.abort) { existingData.abort(); } if (existingData.uploadState !== UploadStatus.UPLOAD_COMPLETE) { const update = { uploadState: UploadStatus.UPLOAD_CANCELLED }; - this.uploads[fileId] = { ...existingData, ...update }; + this.uploads[objectId] = { ...existingData, ...update }; } } } clearAll() { - // eslint-disable-next-line guard-for-in - for (const key in this.uploads) { - delete this.uploads[key]; - } + this.uploads = {}; } abortAll() { diff --git a/packages/odf/components/s3-browser/upload-objects/types.ts b/packages/odf/components/s3-browser/upload-objects/types.ts index 7e919d2ca..5a34e1581 100644 --- a/packages/odf/components/s3-browser/upload-objects/types.ts +++ b/packages/odf/components/s3-browser/upload-objects/types.ts @@ -6,6 +6,8 @@ export enum UploadStatus { UPLOAD_CANCELLED, } +export type ObjectID = string; // A unique key made by joining path+"/"+fileName + export interface UploadProgress extends Partial { total?: number; loaded?: number; @@ -14,7 +16,7 @@ export interface UploadProgress extends Partial { uploadState: UploadStatus; filePath?: string; startTime?: number; - key: string; + key: ObjectID; } export type UploadProgressBatch = Record; diff --git a/packages/odf/components/s3-browser/upload-objects/upload-component/FileUploadComponent.tsx b/packages/odf/components/s3-browser/upload-objects/upload-component/FileUploadComponent.tsx index abd930516..5900f6397 100644 --- a/packages/odf/components/s3-browser/upload-objects/upload-component/FileUploadComponent.tsx +++ b/packages/odf/components/s3-browser/upload-objects/upload-component/FileUploadComponent.tsx @@ -45,7 +45,7 @@ export const FileUploadComponent: React.FC = observer( const foldersPath = searchParams.get(PREFIX) || ''; const processFiles = React.useCallback( - async (uploadObjects: File[]) => { + async (uploadObjects: File[]): Promise => { try { const completionTime = await uploadFile( uploadObjects, @@ -54,13 +54,13 @@ export const FileUploadComponent: React.FC = observer( foldersPath, uploadStore ); - setCompletionTime(completionTime); + return completionTime; } catch (e) { // eslint-disable-next-line no-console console.error('Error uploading file', e); } }, - [bucketName, client, foldersPath, setCompletionTime] + [bucketName, client, foldersPath] ); const closeAlert = React.useCallback(() => { @@ -82,15 +82,24 @@ export const FileUploadComponent: React.FC = observer( if (uploadStatus !== UploadStatus.UPLOAD_COMPLETE) { setUploadStatus(UploadStatus.UPLOAD_START); const batches = _.chunk(acceptedFiles, 6); + let completionTime: number; for (const batch of batches) { // eslint-disable-next-line no-await-in-loop - await processFiles(batch); + completionTime = await processFiles(batch); } + setCompletionTime(completionTime); } setUploadStatus(UploadStatus.UPLOAD_COMPLETE); triggerRefresh(); }, - [closeAlert, foldersPath, processFiles, triggerRefresh, uploadStatus] + [ + closeAlert, + foldersPath, + processFiles, + setCompletionTime, + triggerRefresh, + uploadStatus, + ] ); const { getRootProps, getInputProps } = useDropzone({ diff --git a/packages/odf/components/s3-browser/upload-objects/upload-component/uploads.ts b/packages/odf/components/s3-browser/upload-objects/upload-component/uploads.ts index 69a114635..00082bcdd 100644 --- a/packages/odf/components/s3-browser/upload-objects/upload-component/uploads.ts +++ b/packages/odf/components/s3-browser/upload-objects/upload-component/uploads.ts @@ -6,8 +6,8 @@ import { UploadProgress, UploadStatus } from '../types'; const performUploadPromise = ( file: File, - folderPath, - bucketName, + folderPath: string, + bucketName: string, uploadStore: UploadStore, client: S3Commands ) => { @@ -64,7 +64,6 @@ export const convertFileToUploadProgress = ( name: file.name, filePath: file.webkitRelativePath, startTime: undefined, - lastModified: 0, webkitRelativePath: '', size: 0, type: '', diff --git a/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusItem.tsx b/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusItem.tsx index 3a02a2973..01747548a 100644 --- a/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusItem.tsx +++ b/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusItem.tsx @@ -25,13 +25,8 @@ type UploadStatusItemProps = { }; const getProgressVariant = ( - state: UploadStatus, - // For cases whjen it's complete but user presses cancel(edge case) - isComplete: boolean + state: UploadStatus ): Progress['props']['variant'] => { - if (isComplete) { - return undefined; - } switch (state) { case UploadStatus.UPLOAD_FAILED: case UploadStatus.UPLOAD_CANCELLED: @@ -60,7 +55,7 @@ export const UploadStatusItem: React.FC = observer( const item = uploadStore.getFile(itemKey); const onAbort = () => uploadStore.performAbort(itemKey); const progress = (item.loaded / item.total) * 100; - const variant = getProgressVariant(item.uploadState, progress === 100); + const variant = getProgressVariant(item.uploadState); return ( diff --git a/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusList.tsx b/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusList.tsx index 9e4cc5549..7fa968ec6 100644 --- a/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusList.tsx +++ b/packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusList.tsx @@ -3,13 +3,12 @@ import { humanizeBinaryBytes } from '@odf/shared/utils'; import { observer } from 'mobx-react-lite'; import AutoSizer from 'react-virtualized-auto-sizer'; import { FixedSizeList as List } from 'react-window'; -import { UploadStore, uploadStore } from '../store'; +import { uploadStore } from '../store'; import { UploadProgress, UploadStatus } from '../types'; import { UploadStatusItem } from './UploadStatusItem'; type UploadStatusListProps = { currentWidth?: number; - uploadStore: UploadStore; }; type UploadStatusListRowProps = {