Web: Client: Data Import: complete routing logic

packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.tsx

@@ -24,6 +24,7 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
+import { useLayoutEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 
@@ -35,8 +36,17 @@ import StepLayout from "../sub-components/StepLayout";
 import { InjectedWorkspaceProps, WorkspaceProps, TFunciton } from "../types";
 
 const GoogleWorkspace = (props: WorkspaceProps) => {
-  const { theme, filteredUsers, step, organizationName } =
+  const {
-    props as InjectedWorkspaceProps;
+    theme,
+    filteredUsers,
+    step,
+    setStep,
+    organizationName,
+    migratingWorkspace,
+    migrationPhase,
+    isMigrationInit,
+    setIsMigrationInit,
+  } = props as InjectedWorkspaceProps;
 
   const { t, ready }: { t: TFunciton; ready: boolean } = useTranslation([
     "Common, SMTPSettings, Settings",
@@ -48,6 +58,19 @@ const GoogleWorkspace = (props: WorkspaceProps) => {
     organizationName,
   );
 
+  useLayoutEffect(() => {
+    if (migratingWorkspace === "GoogleWorkspace" && !isMigrationInit) {
+      if (migrationPhase === "setup") {
+        setStep(2);
+      } else if (migrationPhase === "migrating") {
+        setStep(5);
+      } else if (migrationPhase === "complete") {
+        setStep(6);
+      }
+      setIsMigrationInit(true);
+    }
+  }, []);
+
   if (!ready) return <SelectFileLoader />;
 
   return (
@@ -65,7 +88,16 @@ const GoogleWorkspace = (props: WorkspaceProps) => {
 };
 
 export default inject<TStore>(({ settingsStore, importAccountsStore }) => {
-  const { filteredUsers, step, setStep, setWorkspace } = importAccountsStore;
+  const {
+    filteredUsers,
+    step,
+    setStep,
+    setWorkspace,
+    migrationPhase,
+    migratingWorkspace,
+    isMigrationInit,
+    setIsMigrationInit,
+  } = importAccountsStore;
   const { theme, organizationName } = settingsStore;
 
   return {
@@ -75,5 +107,9 @@ export default inject<TStore>(({ settingsStore, importAccountsStore }) => {
     step,
     setStep,
     setWorkspace,
+    migrationPhase,
+    migratingWorkspace,
+    isMigrationInit,
+    setIsMigrationInit,
   };
 })(observer(GoogleWorkspace));

packages/client/src/pages/PortalSettings/categories/data-import/NextcloudWorkspace/index.tsx

@@ -24,6 +24,7 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
+import { useLayoutEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 
@@ -35,8 +36,17 @@ import StepLayout from "../sub-components/StepLayout";
 import { InjectedWorkspaceProps, WorkspaceProps, TFunciton } from "../types";
 
 const NextcloudWorkspace = (props: WorkspaceProps) => {
-  const { theme, filteredUsers, step, organizationName } =
+  const {
-    props as InjectedWorkspaceProps;
+    theme,
+    filteredUsers,
+    step,
+    setStep,
+    organizationName,
+    migratingWorkspace,
+    migrationPhase,
+    isMigrationInit,
+    setIsMigrationInit,
+  } = props as InjectedWorkspaceProps;
 
   const { t, ready }: { t: TFunciton; ready: boolean } = useTranslation([
     "Common, SMTPSettings, Settings",
@@ -48,6 +58,19 @@ const NextcloudWorkspace = (props: WorkspaceProps) => {
     organizationName,
   );
 
+  useLayoutEffect(() => {
+    if (migratingWorkspace === "Nextcloud" && !isMigrationInit) {
+      if (migrationPhase === "setup") {
+        setStep(2);
+      } else if (migrationPhase === "migrating") {
+        setStep(6);
+      } else if (migrationPhase === "complete") {
+        setStep(7);
+      }
+      setIsMigrationInit(true);
+    }
+  }, []);
+
   if (!ready) return <SelectFileLoader />;
 
   return (
@@ -65,7 +88,16 @@ const NextcloudWorkspace = (props: WorkspaceProps) => {
 };
 
 export default inject<TStore>(({ settingsStore, importAccountsStore }) => {
-  const { filteredUsers, step, setStep, setWorkspace } = importAccountsStore;
+  const {
+    filteredUsers,
+    step,
+    setStep,
+    setWorkspace,
+    migratingWorkspace,
+    migrationPhase,
+    isMigrationInit,
+    setIsMigrationInit,
+  } = importAccountsStore;
   const { theme, organizationName } = settingsStore;
 
   return {
@@ -75,5 +107,9 @@ export default inject<TStore>(({ settingsStore, importAccountsStore }) => {
     setStep,
     setWorkspace,
     organizationName,
+    migratingWorkspace,
+    migrationPhase,
+    isMigrationInit,
+    setIsMigrationInit,
   };
 })(observer(NextcloudWorkspace));

packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/index.tsx

@@ -24,6 +24,7 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
+import { useLayoutEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 
@@ -35,8 +36,17 @@ import StepLayout from "../sub-components/StepLayout";
 import { InjectedWorkspaceProps, WorkspaceProps, TFunciton } from "../types";
 
 const OnlyofficeWorkspace = (props: WorkspaceProps) => {
-  const { theme, filteredUsers, step, organizationName } =
+  const {
-    props as InjectedWorkspaceProps;
+    theme,
+    filteredUsers,
+    step,
+    setStep,
+    organizationName,
+    migratingWorkspace,
+    migrationPhase,
+    isMigrationInit,
+    setIsMigrationInit,
+  } = props as InjectedWorkspaceProps;
 
   const { t, ready }: { t: TFunciton; ready: boolean } = useTranslation([
     "Common, SMTPSettings, Settings",
@@ -48,6 +58,19 @@ const OnlyofficeWorkspace = (props: WorkspaceProps) => {
     organizationName,
   );
 
+  useLayoutEffect(() => {
+    if (migratingWorkspace === "Workspace" && !isMigrationInit) {
+      if (migrationPhase === "setup") {
+        setStep(2);
+      } else if (migrationPhase === "migrating") {
+        setStep(5);
+      } else if (migrationPhase === "complete") {
+        setStep(6);
+      }
+      setIsMigrationInit(true);
+    }
+  }, []);
+
   if (!ready) return <SelectFileLoader />;
 
   return (
@@ -65,7 +88,16 @@ const OnlyofficeWorkspace = (props: WorkspaceProps) => {
 };
 
 export default inject<TStore>(({ settingsStore, importAccountsStore }) => {
-  const { filteredUsers, step, setStep, setWorkspace } = importAccountsStore;
+  const {
+    filteredUsers,
+    step,
+    setStep,
+    setWorkspace,
+    migrationPhase,
+    migratingWorkspace,
+    isMigrationInit,
+    setIsMigrationInit,
+  } = importAccountsStore;
   const { theme, organizationName } = settingsStore;
 
   return {
@@ -75,5 +107,9 @@ export default inject<TStore>(({ settingsStore, importAccountsStore }) => {
     setStep,
     setWorkspace,
     organizationName,
+    migrationPhase,
+    migratingWorkspace,
+    isMigrationInit,
+    setIsMigrationInit,
   };
 })(observer(OnlyofficeWorkspace));

packages/client/src/pages/PortalSettings/categories/data-import/components/ImportCompleteStep.tsx

@@ -72,6 +72,8 @@ const ImportCompleteStep = (props: ImportCompleteStepProps) => {
     getMigrationStatus,
     setStep,
     setWorkspace,
+    setMigratingWorkspace,
+    setMigrationPhase,
   } = props as InjectedImportCompleteStepProps;
 
   const [isChecked, setIsChecked] = useState(false);
@@ -114,6 +116,8 @@ const ImportCompleteStep = (props: ImportCompleteStepProps) => {
     clearMigration();
     setStep(1);
     setWorkspace("");
+    setMigratingWorkspace("");
+    setMigrationPhase("");
   };
 
   useEffect(() => {
@@ -189,6 +193,8 @@ export default inject<TStore>(({ importAccountsStore }) => {
     getMigrationStatus,
     setStep,
     setWorkspace,
+    setMigratingWorkspace,
+    setMigrationPhase,
   } = importAccountsStore;
 
   return {
@@ -199,5 +205,7 @@ export default inject<TStore>(({ importAccountsStore }) => {
     getMigrationStatus,
     setStep,
     setWorkspace,
+    setMigratingWorkspace,
+    setMigrationPhase,
   };
 })(observer(ImportCompleteStep));

packages/client/src/pages/PortalSettings/categories/data-import/index.tsx

@@ -54,6 +54,7 @@ const DataImport = (props: DataImportProps) => {
     setIsMigrationInit,
     setLoadingStatus,
     setMigratingWorkspace,
+    setMigrationPhase,
   } = props as InjectedDataImportProps;
 
   const { t } = useTranslation(["Settings"]);
@@ -75,13 +76,29 @@ const DataImport = (props: DataImportProps) => {
 
     const { parseResult, isCompleted } = response;
 
-    if (parseResult.operation === "parse" && isCompleted) {
+    if (parseResult.operation === "parse") {
-      setUsers(parseResult);
       setWorkspace(parseResult.migratorName);
       setMigratingWorkspace(parseResult.migratorName);
       setFiles(parseResult.files);
-      setIsMigrationInit(true);
+
-      setLoadingStatus("done");
+      if (isCompleted) {
+        setUsers(parseResult);
+        setMigrationPhase("setup");
+        setLoadingStatus("done");
+      } else {
+        setLoadingStatus("proceed");
+      }
+    }
+
+    if (parseResult.operation === "migration") {
+      setWorkspace(parseResult.migratorName);
+      setMigratingWorkspace(parseResult.migratorName);
+
+      if (isCompleted) {
+        setMigrationPhase("complete");
+      } else {
+        setMigrationPhase("migrating");
+      }
     }
   }, [
     getMigrationStatus,
@@ -89,8 +106,8 @@ const DataImport = (props: DataImportProps) => {
     setWorkspace,
     setMigratingWorkspace,
     setFiles,
-    setIsMigrationInit,
     setLoadingStatus,
+    setMigrationPhase,
   ]);
 
   useEffect(() => {
@@ -126,6 +143,7 @@ export default inject<TStore>(
       setIsMigrationInit,
       setLoadingStatus,
       setMigratingWorkspace,
+      setMigrationPhase,
     } = importAccountsStore;
 
     const { setDocumentTitle } = authStore;
@@ -147,6 +165,7 @@ export default inject<TStore>(
       setIsMigrationInit,
       setLoadingStatus,
       setMigratingWorkspace,
+      setMigrationPhase,
     };
   },
 )(observer(DataImport));

packages/client/src/pages/PortalSettings/categories/data-import/types/index.ts

@@ -89,6 +89,7 @@ export interface InjectedDataImportProps extends DataImportProps {
   setIsMigrationInit: TStore["importAccountsStore"]["setIsMigrationInit"];
   setLoadingStatus: TStore["importAccountsStore"]["setLoadingStatus"];
   setMigratingWorkspace: TStore["importAccountsStore"]["setMigratingWorkspace"];
+  setMigrationPhase: TStore["importAccountsStore"]["setMigrationPhase"];
 }
 
 export interface WorkspaceProps {}
@@ -97,7 +98,12 @@ export interface InjectedWorkspaceProps extends WorkspaceProps {
   theme: TStore["settingsStore"]["theme"];
   filteredUsers: TStore["importAccountsStore"]["filteredUsers"];
   step: TStore["importAccountsStore"]["step"];
+  setStep: TStore["importAccountsStore"]["setStep"];
+  migratingWorkspace: TStore["importAccountsStore"]["migratingWorkspace"];
+  migrationPhase: TStore["importAccountsStore"]["migrationPhase"];
   organizationName: TStore["settingsStore"]["organizationName"];
+  isMigrationInit: TStore["importAccountsStore"]["isMigrationInit"];
+  setIsMigrationInit: TStore["importAccountsStore"]["setIsMigrationInit"];
 }
 
 export interface LayoutProps {
@@ -461,4 +467,6 @@ export interface InjectedImportCompleteStepProps
   getMigrationStatus: TStore["importAccountsStore"]["getMigrationStatus"];
   setStep: TStore["importAccountsStore"]["setStep"];
   setWorkspace: TStore["importAccountsStore"]["setWorkspace"];
+  setMigratingWorkspace: TStore["importAccountsStore"]["setMigratingWorkspace"];
+  setMigrationPhase: TStore["importAccountsStore"]["setMigrationPhase"];
 }

packages/client/src/store/ImportAccountsStore.ts

@@ -62,6 +62,8 @@ type CheckedAccountTypes = "withEmail" | "withoutEmail" | "result";
 
 type LoadingState = "none" | "upload" | "proceed" | "done";
 
+type TMigrationPhase = "" | "setup" | "migrating" | "complete";
+
 class ImportAccountsStore {
   services: TWorkspaceService[] = [];
 
@@ -109,6 +111,8 @@ class ImportAccountsStore {
     importProjectFiles: true,
   };
 
+  migrationPhase: TMigrationPhase = "";
+
   constructor() {
     makeAutoObservable(this);
   }
@@ -150,6 +154,10 @@ class ImportAccountsStore {
     this.step -= 1;
   };
 
+  setMigrationPhase = (phase: TMigrationPhase) => {
+    this.migrationPhase = phase;
+  };
+
   setWorkspace = (workspace: TWorkspaceService | "") => {
     this.workspace = workspace;
   };