Feature/import navigation lock (#1536)

Use navigation lock on repository import to prevent that the current user accidentally leaves the page and aborts the running import.

scm-ui/ui-webapp/src/repos/components/ImportFullRepository.tsx

@@ -67,21 +67,22 @@ const ImportFullRepository: FC<Props> = ({ url, repositoryType, setImportPending
     setError(undefined);
     handleImportLoading(true);
     apiClient
-      .postBinary(url, (formData) => {
+      .postBinary(url, formData => {
         formData.append("bundle", file, file?.name);
         formData.append("repository", JSON.stringify(repo));
       })
-      .then((response) => {
+      .then(response => {
         const location = response.headers.get("Location");
         return apiClient.get(location!);
       })
-      .then((response) => response.json())
-      .then((repo) => {
+      .then(response => response.json())
+      .then(repo => {
+        handleImportLoading(false);
         if (history.location.pathname === currentPath) {
           history.push(`/repo/${repo.namespace}/${repo.name}/code/sources`);
         }
       })
-      .catch((error) => {
+      .catch(error => {
         setError(error);
         handleImportLoading(false);
       });

scm-ui/ui-webapp/src/repos/components/ImportRepositoryFromBundle.tsx

@@ -43,7 +43,7 @@ const ImportRepositoryFromBundle: FC<Props> = ({ url, repositoryType, setImportP
     type: repositoryType,
     contact: "",
     description: "",
-    _links: {},
+    _links: {}
   });
 
   const [valid, setValid] = useState({ namespaceAndName: false, contact: true, file: false });
@@ -59,7 +59,7 @@ const ImportRepositoryFromBundle: FC<Props> = ({ url, repositoryType, setImportP
     setLoading(loading);
   };
 
-  const isValid = () => Object.values(valid).every((v) => v);
+  const isValid = () => Object.values(valid).every(v => v);
 
   const submit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -67,21 +67,22 @@ const ImportRepositoryFromBundle: FC<Props> = ({ url, repositoryType, setImportP
     setError(undefined);
     handleImportLoading(true);
     apiClient
-      .postBinary(compressed ? url + "?compressed=true" : url, (formData) => {
+      .postBinary(compressed ? url + "?compressed=true" : url, formData => {
         formData.append("bundle", file, file?.name);
         formData.append("repository", JSON.stringify(repo));
       })
-      .then((response) => {
+      .then(response => {
         const location = response.headers.get("Location");
         return apiClient.get(location!);
       })
-      .then((response) => response.json())
-      .then((repo) => {
+      .then(response => response.json())
+      .then(repo => {
+        handleImportLoading(false);
         if (history.location.pathname === currentPath) {
           history.push(`/repo/${repo.namespace}/${repo.name}/code/sources`);
         }
       })
-      .catch((error) => {
+      .catch(error => {
         setError(error);
         handleImportLoading(false);
       });

scm-ui/ui-webapp/src/repos/components/ImportRepositoryFromUrl.tsx

@@ -75,6 +75,7 @@ const ImportRepositoryFromUrl: FC<Props> = ({ url, repositoryType, setImportPend
       })
       .then(response => response.json())
       .then(repo => {
+        handleImportLoading(false);
         if (history.location.pathname === currentPath) {
           history.push(`/repo/${repo.namespace}/${repo.name}/code/sources`);
         }

scm-ui/ui-webapp/src/repos/containers/ImportRepository.tsx

@@ -29,18 +29,19 @@ import { useTranslation } from "react-i18next";
 import ImportRepositoryTypeSelect from "../components/ImportRepositoryTypeSelect";
 import ImportTypeSelect from "../components/ImportTypeSelect";
 import ImportRepositoryFromUrl from "../components/ImportRepositoryFromUrl";
-import { Loading, Notification, Page } from "@scm-manager/ui-components";
+import { Loading, Notification, Page, useNavigationLock } from "@scm-manager/ui-components";
 import RepositoryFormSwitcher from "../components/form/RepositoryFormSwitcher";
 import {
   fetchRepositoryTypesIfNeeded,
   getFetchRepositoryTypesFailure,
   getRepositoryTypes,
-  isFetchRepositoryTypesPending,
+  isFetchRepositoryTypesPending
 } from "../modules/repositoryTypes";
 import { connect } from "react-redux";
 import { fetchNamespaceStrategiesIfNeeded } from "../../admin/modules/namespaceStrategies";
 import ImportRepositoryFromBundle from "../components/ImportRepositoryFromBundle";
 import ImportFullRepository from "../components/ImportFullRepository";
+import { Prompt } from "react-router-dom";
 
 type Props = {
   repositoryTypes: RepositoryType[];
@@ -69,7 +70,7 @@ const ImportRepository: FC<Props> = ({
   pageLoading,
   error,
   fetchRepositoryTypesIfNeeded,
-  fetchNamespaceStrategiesIfNeeded,
+  fetchNamespaceStrategiesIfNeeded
 }) => {
   const [importPending, setImportPending] = useState(false);
   const [repositoryType, setRepositoryType] = useState<RepositoryType | undefined>();
@@ -81,6 +82,8 @@ const ImportRepository: FC<Props> = ({
     fetchNamespaceStrategiesIfNeeded();
   }, [repositoryTypes]);
 
+  useNavigationLock(importPending);
+
   const changeRepositoryType = (repositoryType: RepositoryType) => {
     setRepositoryType(repositoryType);
     setImportType(repositoryType?._links ? ((repositoryType!._links?.import as Link[])[0] as Link).name! : "");
@@ -110,7 +113,9 @@ const ImportRepository: FC<Props> = ({
     if (importType === "fullImport") {
       return (
         <ImportFullRepository
-          url={((repositoryType!._links.import as Link[])!.find((link: Link) => link.name === "fullImport") as Link).href}
+          url={
+            ((repositoryType!._links.import as Link[])!.find((link: Link) => link.name === "fullImport") as Link).href
+          }
           repositoryType={repositoryType!.name}
           setImportPending={setImportPending}
         />
@@ -129,6 +134,7 @@ const ImportRepository: FC<Props> = ({
       error={error}
       showContentOnError={true}
     >
+      <Prompt when={importPending} message={t("import.navigationWarning")} />
       <ImportPendingLoading importPending={importPending} />
       <ImportRepositoryTypeSelect
         repositoryTypes={repositoryTypes}
@@ -161,7 +167,7 @@ const mapStateToProps = (state: any) => {
   return {
     repositoryTypes,
     pageLoading,
-    error,
+    error
   };
 };
 
@@ -172,7 +178,7 @@ const mapDispatchToProps = (dispatch: any) => {
     },
     fetchNamespaceStrategiesIfNeeded: () => {
       dispatch(fetchNamespaceStrategiesIfNeeded());
-    },
+    }
   };
 };