Merge pull request #71 from awslabs/navigateToAsset

fix: automatically naviagte to asset page once asset upload completes
awslabs · May 10, 2023 · e9c7572 · e9c7572
2 parents 758902b + 05d7bfe
commit e9c7572
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/web/src/pages/AssetUpload.tsx b/web/src/pages/AssetUpload.tsx
@@ -12,7 +12,7 @@ import {
     Textarea,
     TextContent,
 } from "@cloudscape-design/components";
-import { useParams } from "react-router";
+import { useNavigate, useParams } from "react-router";
 import Container from "@cloudscape-design/components/container";
 import Header from "@cloudscape-design/components/header";
 import SpaceBetween from "@cloudscape-design/components/space-between";
@@ -93,6 +93,7 @@ const isDistributableOptions: OptionDefinition[] = [
 ];
 
 const UploadForm = () => {
+    const navigate = useNavigate();
     const urlParams = useParams();
     const [databaseId, setDatabaseId] = useState({
         label: urlParams.databaseId,
@@ -123,6 +124,7 @@ const UploadForm = () => {
     });
 
     const [execStatus, setExecStatus] = useState<Record<string, StatusIndicatorProps.Type>>({});
+    const [canNavigateToAssetPage, setCanNavigateToAssetPage] = useState(false);
 
     useEffect(() => {
         if (!assetDetail?.databaseId) {
@@ -137,6 +139,9 @@ const UploadForm = () => {
 
     return (
         <Box padding={{ left: "l", right: "l" }}>
+            {canNavigateToAssetPage && (
+                navigate(`/databases/${assetDetail.databaseId}/assets/${assetDetail.assetId}`)
+            )}
             {showUploadAndExecProgress && (
                 <ProgressScreen
                     execStatus={execStatus}
@@ -174,6 +179,7 @@ const UploadForm = () => {
                         setShowUploadAndExecProgress,
                         setAssetUploadProgress,
                         setPreviewUploadProgress,
+                        setCanNavigateToAssetPage,
                     })}
                     allowSkipTo
                     steps={[

diff --git a/web/src/pages/AssetUpload/onSubmit.ts b/web/src/pages/AssetUpload/onSubmit.ts
@@ -44,6 +44,7 @@ class OnSubmitProps {
     setExecStatus!: (x: ExecStatusType | ((x: ExecStatusType) => ExecStatusType)) => void;
     setAssetUploadProgress!: (x: ProgressBarProps) => void;
     setPreviewUploadProgress!: (x: ProgressBarProps) => void;
+    setCanNavigateToAssetPage!: (x: boolean) => void;
 }
 
 class ProgresCallbackArgs {
@@ -71,6 +72,7 @@ export default function onSubmit({
     setShowUploadAndExecProgress,
     setAssetUploadProgress,
     setPreviewUploadProgress,
+    setCanNavigateToAssetPage
 }: OnSubmitProps) {
     return async (detail: NonCancelableCustomEvent<{}>) => {
         setFreezeWizardButtons(true);
@@ -228,7 +230,7 @@ export default function onSubmit({
                         return Promise.reject(err);
                     });
             });
-
+            setCanNavigateToAssetPage(true);
             window.onbeforeunload = null;
         }
     };