Add Loading Spinner while waiting for repository import

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -49,13 +49,17 @@
   },
   "create": {
     "title": "Repository hinzufügen",
-    "createSubtitle": "Neues Repository erstellen",
-    "importSubtitle": "Bestehendes Repository importieren",
-    "importUrl": "Remote repository url",
+    "subtitle": "Neues Repository erstellen"
+  },
+  "import": {
+    "subtitle": "Bestehendes Repository importieren",
+    "importUrl": "Remote Repository URL",
     "username": "Benutzername",
     "password": "Passwort",
-    "createButton": "Neues Repository erstellen",
-    "importButton": "Repository importieren"
+    "pending": {
+      "subtitle": "Repository wird importiert...",
+      "infoText": "Ihr Repository wird gerade importiert. Dies kann einen Moment dauern. Sie werden weitergeleitet, sobald der Import abgeschlossen ist. Wenn Sie diese Seite verlassen, können Sie nicht zurückkehren, um den Import-Status zu erfahren."
+    }
   },
   "branches": {
     "overview": {
@@ -167,7 +171,9 @@
     "submitCreate": "Speichern",
     "submitImport": "Importieren",
     "initializeRepository": "Repository initiieren",
-    "dangerZone": "Umbenennen und Löschen"
+    "dangerZone": "Umbenennen und Löschen",
+    "createButton": "Neues Repository erstellen",
+    "importButton": "Repository importieren"
   },
   "sources": {
     "fileTree": {

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -45,17 +45,22 @@
     "title": "Repositories",
     "subtitle": "Overview of available repositories",
     "noRepositories": "No repositories found.",
-    "createButton": "Add Repository"
+    "createButton": "Add repository"
   },
   "create": {
     "title": "Add Repository",
-    "createSubtitle": "Create a new repository",
-    "importSubtitle": "Import existing repository",
+    "subtitle": "Create a new repository",
+    "createButton": "Create new repository"
+  },
+  "import": {
+    "subtitle": "Import existing repository",
     "importUrl": "Remote repository url",
     "username": "Username",
     "password": "Password",
-    "createButton": "Create new repository",
-    "importButton": "Import repository"
+    "pending": {
+      "subtitle": "Importing Repository...",
+      "infoText": "Your repository is currently being imported. This may take a moment. You will be forwarded as soon as the import is finished. If you leave this page you cannot return to find out the import status."
+    }
   },
   "branches": {
     "overview": {
@@ -167,7 +172,9 @@
     "submitCreate": "Save",
     "submitImport": "Import",
     "initializeRepository": "Initialize repository",
-    "dangerZone": "Rename and delete"
+    "dangerZone": "Rename and delete",
+    "createButton": "Create Repository",
+    "importButton": "Import repository"
   },
   "sources": {
     "fileTree": {

scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx

@@ -204,7 +204,7 @@ const RepositoryForm: FC<Props> = ({
         <Columns className="columns is-multiline">
           <Column className="column is-full">
             <InputField
-              label={t("create.importUrl")}
+              label={t("import.importUrl")}
               onChange={handleImportUrlChange}
               value={importUrl}
               helpText={t("help.importUrlHelpText")}
@@ -212,7 +212,7 @@ const RepositoryForm: FC<Props> = ({
           </Column>
           <Column className="column is-half">
             <InputField
-              label={t("create.username")}
+              label={t("import.username")}
               onChange={setUsername}
               value={username}
               helpText={t("help.usernameHelpText")}
@@ -220,7 +220,7 @@ const RepositoryForm: FC<Props> = ({
           </Column>
           <Column className="column is-half">
             <InputField
-              label={t("create.password")}
+              label={t("import.password")}
               onChange={setPassword}
               value={password}
               type="password"

scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx

@@ -59,9 +59,9 @@ const RepositoryFormSwitcher: FC<Props> = ({ repository, createMode }) => {
     if (repository) {
       subtitle = "repositoryForm.subtitle";
     } else if (isImportMode()) {
-      subtitle = "create.importSubtitle";
+      subtitle = "create.subtitle";
     } else {
-      subtitle = "create.createSubtitle";
+      subtitle = "import.subtitle";
     }
 
     return <Subtitle subtitle={t(subtitle)} />;
@@ -73,13 +73,13 @@ const RepositoryFormSwitcher: FC<Props> = ({ repository, createMode }) => {
       right={
         <ButtonAddons>
           <SmallButton
-            label={t("create.createButton")}
+            label={t("repositoryForm.createButton")}
             icon="fa fa-plus"
             color={isCreateMode() ? "link is-selected" : undefined}
             link={isImportMode() ? "/repos/create" : undefined}
           />
           <SmallButton
-            label={t("create.importButton")}
+            label={t("repositoryForm.importButton")}
             icon="fa fa-file-upload"
             color={isImportMode() ? "link is-selected" : undefined}
             link={isCreateMode() ? "/repos/import" : undefined}

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

@@ -32,7 +32,7 @@ import {
   RepositoryImport,
   RepositoryType
 } from "@scm-manager/ui-types";
-import { Page } from "@scm-manager/ui-components";
+import { Loading, Page, Notification, Subtitle } from "@scm-manager/ui-components";
 import {
   fetchRepositoryTypesIfNeeded,
   getFetchRepositoryTypesFailure,
@@ -44,8 +44,10 @@ import {
   createRepo,
   createRepoReset,
   getCreateRepoFailure,
+  getImportRepoFailure,
   importRepoFromUrl,
-  isCreateRepoPending
+  isCreateRepoPending,
+  isImportRepoPending
 } from "../modules/repos";
 import { getRepositoriesLink } from "../../modules/indexResource";
 import {
@@ -60,6 +62,7 @@ type Props = WithTranslation & {
   namespaceStrategies: NamespaceStrategies;
   pageLoading: boolean;
   createLoading: boolean;
+  importLoading: boolean;
   error: Error;
   repoLink: string;
   indexResources: any;
@@ -97,6 +100,7 @@ class AddRepository extends React.Component<Props> {
     const {
       pageLoading,
       createLoading,
+      importLoading,
       repositoryTypes,
       namespaceStrategies,
       createRepo,
@@ -109,18 +113,26 @@ class AddRepository extends React.Component<Props> {
 
     return (
       <Page title={t("create.title")} loading={pageLoading} error={error} showContentOnError={true}>
-        <RepositoryForm
-          repositoryTypes={repositoryTypes}
-          loading={createLoading}
-          namespaceStrategy={namespaceStrategies.current}
-          createRepository={(repo, initRepository) => {
-            createRepo(repoLink, repo, initRepository, (repo: Repository) => this.repoCreated(repo));
-          }}
-          importRepository={repo => {
-            importRepoFromUrl(repoLink, repo, (repo: Repository) => this.repoCreated(repo));
-          }}
-          indexResources={indexResources}
-        />
+        {importLoading ? (
+          <>
+            <Subtitle subtitle={t("import.pending.subtitle")}/>
+            <Notification type="info">{t("import.pending.infoText")}</Notification>
+            <Loading />
+          </>
+        ) : (
+          <RepositoryForm
+            repositoryTypes={repositoryTypes}
+            loading={createLoading}
+            namespaceStrategy={namespaceStrategies.current}
+            createRepository={(repo, initRepository) => {
+              createRepo(repoLink, repo, initRepository, (repo: Repository) => this.repoCreated(repo));
+            }}
+            importRepository={repo => {
+              importRepoFromUrl(repoLink, repo, (repo: Repository) => this.repoCreated(repo));
+            }}
+            indexResources={indexResources}
+          />
+        )}
       </Page>
     );
   }
@@ -131,8 +143,12 @@ const mapStateToProps = (state: any) => {
   const namespaceStrategies = getNamespaceStrategies(state);
   const pageLoading = isFetchRepositoryTypesPending(state) || isFetchNamespaceStrategiesPending(state);
   const createLoading = isCreateRepoPending(state);
+  const importLoading = isImportRepoPending(state);
   const error =
-    getFetchRepositoryTypesFailure(state) || getCreateRepoFailure(state) || getFetchNamespaceStrategiesFailure(state);
+    getFetchRepositoryTypesFailure(state) ||
+    getCreateRepoFailure(state) ||
+    getFetchNamespaceStrategiesFailure(state) ||
+    getImportRepoFailure(state);
   const repoLink = getRepositoriesLink(state);
   const indexResources = state?.indexResources;
 
@@ -141,6 +157,7 @@ const mapStateToProps = (state: any) => {
     namespaceStrategies,
     pageLoading,
     createLoading,
+    importLoading,
     error,
     repoLink,
     indexResources

scm-ui/ui-webapp/src/repos/modules/repos.ts

@@ -268,19 +268,19 @@ export function importRepoFromUrl(link: string, repository: RepositoryImport, ca
 
 export function importRepoPending(): Action {
   return {
-    type: CREATE_REPO_PENDING
+    type: IMPORT_REPO_PENDING
   };
 }
 
 export function importRepoSuccess(): Action {
   return {
-    type: CREATE_REPO_SUCCESS
+    type: IMPORT_REPO_SUCCESS
   };
 }
 
 export function importRepoFailure(err: Error): Action {
   return {
-    type: CREATE_REPO_FAILURE,
+    type: IMPORT_REPO_FAILURE,
     payload: err
   };
 }
@@ -643,6 +643,14 @@ export function isAbleToCreateRepos(state: object) {
   return !!(state.repos && state.repos.list && state.repos.list._links && state.repos.list._links.create);
 }
 
+export function isImportRepoPending(state: object) {
+  return isPending(state, IMPORT_REPO);
+}
+
+export function getImportRepoFailure(state: object) {
+  return getFailure(state, IMPORT_REPO);
+}
+
 export function isCreateRepoPending(state: object) {
   return isPending(state, CREATE_REPO);
 }