Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Metadata uploader progress bar #1419

Merged
merged 3 commits into from
Dec 5, 2022
Merged

Metadata uploader progress bar #1419

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
805e01f
disabling buttons and table during loading
ksierks Nov 23, 2022
bcb14d0
replacing step progress bar with table overlay progress bar
ksierks Dec 1, 2022
e3f82ed
moving loading text into spinner
ksierks Dec 2, 2022
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
1 change: 1 addition & 0 deletions src/main/resources/i18n/messages.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2004,6 +2004,7 @@ SampleMetadataImportMapColumns.table.existingRestriction=Existing Restriction
SampleMetadataImportMapColumns.table.targetRestriction=Target Restriction

SampleMetadataImportReview.description=Review the metadata to be uploaded.
SampleMetadataImportReview.loading=Please wait until the upload completes. Closing this window or leaving this page will terminate the upload.
SampleMetadataImportReview.button.back=Select a different column
SampleMetadataImportReview.button.next=Upload the data
SampleMetadataImportReview.tab.found=Samples to be updated
Expand Down
18 changes: 14 additions & 4 deletions ...urces/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Button,
List,
Popover,
Progress,
Table,
TableProps,
Tag,
Expand Down Expand Up @@ -95,7 +96,7 @@ export function SampleMetadataImportReview(): JSX.Element {
const savedCount = Object.entries(metadataSaveDetails).filter(
([, metadataSaveDetailsItem]) => metadataSaveDetailsItem.saved
).length;
setProgress((savedCount / selected.length) * 100);
setProgress(Math.round((savedCount / selected.length) * 100));
}, [metadataSaveDetails, selected.length]);

React.useEffect(() => {
Expand Down Expand Up @@ -228,8 +229,12 @@ export function SampleMetadataImportReview(): JSX.Element {
);

return (
<SampleMetadataImportWizard current={2} percent={progress}>
<Text>{i18n("SampleMetadataImportReview.description")}</Text>
<SampleMetadataImportWizard current={2}>
<Text>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this cause a page shift?  Could you put the in the overlay under the percentage?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved the text into the spinner. Not sure if I got the css right. Please see e3f82ed.

{loading
? i18n("SampleMetadataImportReview.loading")
: i18n("SampleMetadataImportReview.description")}
</Text>
{!isValid && (
<ErrorAlert
message={i18n("SampleMetadataImportReview.alert.valid.title")}
Expand Down Expand Up @@ -290,20 +295,25 @@ export function SampleMetadataImportReview(): JSX.Element {
(metadataItem) => !metadataValidateDetails[metadataItem.rowKey].locked
)}
pagination={getPaginationOptions(metadata.length)}
loading={{
indicator: <Progress type="circle" percent={progress} />,
spinning: loading,
}}
/>
<div style={{ display: "flex" }}>
<Button
className="t-metadata-uploader-column-button"
icon={<IconArrowLeft />}
onClick={() => navigate(-1)}
disabled={loading}
>
{i18n("SampleMetadataImportReview.button.back")}
</Button>
<Button
className="t-metadata-uploader-upload-button"
style={{ marginLeft: "auto" }}
onClick={save}
loading={loading}
disabled={loading}
>
{i18n("SampleMetadataImportReview.button.next")}
<IconArrowRight />
Expand Down