From 805e01fbe7753ff513e263d02e166f7c582152bc Mon Sep 17 00:00:00 2001
From: Katherine Thiessen <katherine.thiessen@phac-aspc.gc.ca>
Date: Wed, 23 Nov 2022 11:20:06 -0600
Subject: [PATCH 1/3] disabling buttons and table during loading

---
 .../components/SampleMetadataImportReview.tsx               | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx
index d007a839496..f22bf937c13 100644
--- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx
+++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx
@@ -95,7 +95,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(() => {
@@ -290,12 +290,14 @@ export function SampleMetadataImportReview(): JSX.Element {
           (metadataItem) => !metadataValidateDetails[metadataItem.rowKey].locked
         )}
         pagination={getPaginationOptions(metadata.length)}
+        loading={loading}
       />
       <div style={{ display: "flex" }}>
         <Button
           className="t-metadata-uploader-column-button"
           icon={<IconArrowLeft />}
           onClick={() => navigate(-1)}
+          disabled={loading}
         >
           {i18n("SampleMetadataImportReview.button.back")}
         </Button>
@@ -303,7 +305,7 @@ export function SampleMetadataImportReview(): JSX.Element {
           className="t-metadata-uploader-upload-button"
           style={{ marginLeft: "auto" }}
           onClick={save}
-          loading={loading}
+          disabled={loading}
         >
           {i18n("SampleMetadataImportReview.button.next")}
           <IconArrowRight />

From bcb14d0c531e27ab810d61f629751c943106a739 Mon Sep 17 00:00:00 2001
From: Katherine Thiessen <katherine.thiessen@phac-aspc.gc.ca>
Date: Thu, 1 Dec 2022 11:58:47 -0600
Subject: [PATCH 2/3] replacing step progress bar with table overlay progress
 bar

---
 src/main/resources/i18n/messages.properties        |  1 +
 .../components/SampleMetadataImportReview.tsx      | 14 +++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/main/resources/i18n/messages.properties b/src/main/resources/i18n/messages.properties
index 6e65d19cfc6..5d89aa77edb 100644
--- a/src/main/resources/i18n/messages.properties
+++ b/src/main/resources/i18n/messages.properties
@@ -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
diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx
index f22bf937c13..6ab196a1f2c 100644
--- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx
+++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx
@@ -5,6 +5,7 @@ import {
   Button,
   List,
   Popover,
+  Progress,
   Table,
   TableProps,
   Tag,
@@ -228,8 +229,12 @@ export function SampleMetadataImportReview(): JSX.Element {
   );
 
   return (
-    <SampleMetadataImportWizard current={2} percent={progress}>
-      <Text>{i18n("SampleMetadataImportReview.description")}</Text>
+    <SampleMetadataImportWizard current={2}>
+      <Text>
+        {loading
+          ? i18n("SampleMetadataImportReview.loading")
+          : i18n("SampleMetadataImportReview.description")}
+      </Text>
       {!isValid && (
         <ErrorAlert
           message={i18n("SampleMetadataImportReview.alert.valid.title")}
@@ -290,7 +295,10 @@ export function SampleMetadataImportReview(): JSX.Element {
           (metadataItem) => !metadataValidateDetails[metadataItem.rowKey].locked
         )}
         pagination={getPaginationOptions(metadata.length)}
-        loading={loading}
+        loading={{
+          indicator: <Progress type="circle" percent={progress} />,
+          spinning: loading,
+        }}
       />
       <div style={{ display: "flex" }}>
         <Button

From e3f82ed8c5cd14770490cd755d7fb0b4f112400f Mon Sep 17 00:00:00 2001
From: Katherine Thiessen <katherine.thiessen@phac-aspc.gc.ca>
Date: Fri, 2 Dec 2022 12:02:32 -0600
Subject: [PATCH 3/3] moving loading text into spinner

---
 .../components/SampleMetadataImportReview.tsx   | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx
index 6ab196a1f2c..18248a946f6 100644
--- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx
+++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx
@@ -230,11 +230,7 @@ export function SampleMetadataImportReview(): JSX.Element {
 
   return (
     <SampleMetadataImportWizard current={2}>
-      <Text>
-        {loading
-          ? i18n("SampleMetadataImportReview.loading")
-          : i18n("SampleMetadataImportReview.description")}
-      </Text>
+      <Text>{i18n("SampleMetadataImportReview.description")}</Text>
       {!isValid && (
         <ErrorAlert
           message={i18n("SampleMetadataImportReview.alert.valid.title")}
@@ -298,6 +294,17 @@ export function SampleMetadataImportReview(): JSX.Element {
         loading={{
           indicator: <Progress type="circle" percent={progress} />,
           spinning: loading,
+          tip: (
+            <Text
+              style={{
+                display: "inline-block",
+                height: 100,
+                transform: "translateY(100%)",
+              }}
+            >
+              {i18n("SampleMetadataImportReview.loading")}
+            </Text>
+          ),
         }}
       />
       <div style={{ display: "flex" }}>