Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

✨ Add testing identifier to new upload modal #797

Merged
merged 1 commit into from
Feb 12, 2025
Merged

✨ Add testing identifier to new upload modal #797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions ...ve/frontend/src/app/components/file-uploads/pending-root-components/pending-root-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />}
Expand All @@ -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')}
Expand Down Expand Up @@ -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}
Expand Down
31 changes: 18 additions & 13 deletions tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 && (
<>
Expand All @@ -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" />
Expand All @@ -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'
Expand Down