eduvia/workavia-drive
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Add testing identifier to new upload modal (#797)

Browse Source
This commit is contained in:
Montassar Ghanmy
2025-02-12 11:35:39 +01:00
committed by GitHub
parent 4c10de7c47
commit fdc3630d21
2 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-list.tsx
+5 -5
View File
@@ -32,14 +32,14 @@ const ModalHeader: React.FC<ModalHeaderProps> = ({
modalExpanded,
}) => (
<div className="w-full flex bg-[#45454A] text-white p-4 items-center justify-between">
<p className="testid:upload-modal-head-status">
<p className="testid:upload-root-modal-head-status">
{uploadingCount > 0
? `${Languages.t('general.uploading')} ${uploadingCount}`
: `${Languages.t('general.uploaded')} ${completedCount}`}{' '}
{Languages.t('general.files')}
</p>
<button
className="ml-auto flex items-center testid:upload-modal-toggle-arrow"
className="ml-auto flex items-center testid:upload-root-modal-toggle-arrow"
onClick={toggleModal}
>
{modalExpanded ? <ArrowDownIcon /> : <ArrowUpIcon />}
@@ -64,14 +64,14 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
<div className="flex space-x-4 ml-auto">
{uploadingCount > 0 && (
<button
className="text-blue-500 px-4 py-2 rounded hover:bg-blue-600 hover:text-white testid:upload-modal-pause-resume"
className="text-blue-500 px-4 py-2 rounded hover:bg-blue-600 hover:text-white testid:upload-root-modal-pause-resume"
onClick={pauseOrResumeUpload}
>
{isPaused() ? Languages.t('general.resume') : Languages.t('general.pause')}
</button>
)}
<button
className="text-blue-500 px-4 py-2 rounded hover:bg-blue-600 hover:text-white testid:upload-modal-cancel-close"
className="text-blue-500 px-4 py-2 rounded hover:bg-blue-600 hover:text-white testid:upload-root-modal-cancel-close"
onClick={cancelUpload}
>
{uploadingCount ? Languages.t('general.cancel') : Languages.t('general.close')}
@@ -112,7 +112,7 @@ const PendingRootList = ({
return (
<>
{totalRoots > 0 && (
<div className="fixed bottom-4 right-4 w-1/3 shadow-lg rounded-sm overflow-hidden testid:upload-modal">
<div className="fixed bottom-4 right-4 w-1/3 shadow-lg rounded-sm overflow-hidden testid:upload-root-modal">
<ModalHeader
uploadingCount={uploadingCount + pausedCount}
completedCount={completedCount}
tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx
+18 -13
View File
@@ -110,11 +110,11 @@ const PendingRootRow = ({
};
return (
<div className="root-row">
<div className="root-row testid:upload-root-modal-row">
<div className="root-details mt-2">
<div className="flex items-center">
<div className="w-10 h-10 flex items-center justify-center bg-[#f3f3f7] rounded-md">
<div className="w-full h-full flex items-center justify-center testid:upload-modal-row-type">
<div className="w-full h-full flex items-center justify-center testid:upload-root-modal-row-type">
{itemTypeIcon(firstPendingFile?.type)}
</div>
</div>
@@ -134,7 +134,7 @@ const PendingRootRow = ({
{isUploadCompleted ? (
<button
onClick={handleShowFolder}
className="hover:bg-gray-100 p-2 rounded-md transition-all duration-200 testid:upload-modal-row-show-folder"
className="hover:bg-gray-100 p-2 rounded-md transition-all duration-200 testid:upload-root-modal-row-show-folder"
>
{!isFileRoot && (
<>
@@ -158,18 +158,23 @@ const PendingRootRow = ({
!['cancelled', 'failed'].includes(root.status) &&
firstPendingFile?.status !== 'error' && (
<>
<button
onClick={() => pauseOrResumeRootUpload(rootKey)}
className="hover:bg-blue-100 p-2 rounded-md transition-all duration-200 testid:upload-modal-row-pause-resume"
>
{root.status === 'paused' ? (
{root.status === 'paused' ? (
<button
onClick={() => pauseOrResumeRootUpload(rootKey)}
className="hover:bg-blue-100 p-2 rounded-md transition-all duration-200 testid:upload-root-modal-row-resume"
>
<ResumeIcon className="hover:scale-110 transition-transform duration-200" />
) : (
</button>
) : (
<button
onClick={() => pauseOrResumeRootUpload(rootKey)}
className="hover:bg-blue-100 p-2 rounded-md transition-all duration-200 testid:upload-root-modal-row-pause"
>
<PauseIcon className="hover:scale-110 transition-transform duration-200" />
)}
</button>
</button>
)}
<button
className="ml-2 hover:bg-red-100 p-2 rounded-md transition-all duration-200 testid:upload-modal-row-cancel"
className="ml-2 hover:bg-red-100 p-2 rounded-md transition-all duration-200 testid:upload-root-modal-row-cancel"
onClick={() => cancelRootUpload(rootKey)}
>
<CancelIcon className="hover:scale-110 transition-transform duration-200" />
@@ -185,7 +190,7 @@ const PendingRootRow = ({
{!showFolder && (
<div className="w-full h-[3px] bg-[#F0F2F3]">
<div
className={`testid:upload-modal-row-progress h-full ${
className={`testid:upload-root-modal-row-progress h-full ${
root.status === 'failed'
? 'bg-[#FF0000]' // Red color for failed uploads
: root.status === 'cancelled'