Merge pull request 'feature/backup-progress-in-socket' (#99) from fea…

…ture/backup-progress-in-socket into develop Reviewed-on: https://git.onlyoffice.com/ONLYOFFICE/DocSpace-client/pulls/99 Reviewed-by: Alexey Safronov <[email protected]>
ONLYOFFICE · Jan 21, 2025 · bac6adc · bac6adc
2 parents 6e7268e + c5d22a2
commit bac6adc
Show file tree

Hide file tree

Showing 43 changed files with 1,972 additions and 1,505 deletions.
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -62,8 +62,10 @@
     "firebase": "^10.14.1",
     "hex-rgb": "^5.0.0",
     "queue-promise": "2.2.1",
+    "react": "18.3.1",
     "react-avatar-editor": "^13.0.2",
     "react-colorful": "^5.6.1",
+    "react-dom": "18.3.1",
     "react-hotkeys-hook": "^3.4.7",
     "react-markdown": "^9.0.1",
     "react-smartbanner": "^5.1.4",

diff --git a/packages/client/src/Shell.jsx b/packages/client/src/Shell.jsx
@@ -41,7 +41,6 @@ import { Portal } from "@docspace/shared/components/portal";
 import { SnackBar } from "@docspace/shared/components/snackbar";
 import { Toast, toastr } from "@docspace/shared/components/toast";
 import { ToastType } from "@docspace/shared/components/toast/Toast.enums";
-import { getRestoreProgress } from "@docspace/shared/api/portal";
 import { updateTempContent } from "@docspace/shared/utils/common";
 import { DeviceType, IndexedDBStores } from "@docspace/shared/enums";
 import indexedDbHelper from "@docspace/shared/utils/indexedDBHelper";
@@ -131,7 +130,7 @@ const Shell = ({ page = "home", ...rest }) => {
 
   useEffect(() => {
     SocketHelper.emit(SocketCommands.Subscribe, {
-      roomParts: "backup-restore",
+      roomParts: "restore",
     });
 
     SocketHelper.emit(SocketCommands.Subscribe, {
@@ -149,25 +148,14 @@ const Shell = ({ page = "home", ...rest }) => {
   }, [userId]);
 
   useEffect(() => {
-    const callback = () => {
-      getRestoreProgress()
-        .then((response) => {
-          if (!response) {
-            console.log(
-              "Skip show <PreparationPortalDialog /> - empty progress response",
-            );
-            return;
-          }
-          setPreparationPortalDialogVisible(true);
-        })
-        .catch((e) => {
-          console.error("getRestoreProgress", e);
-        });
-    };
-    SocketHelper.on(SocketEvents.RestoreBackup, callback);
+    SocketHelper.on(SocketEvents.RestoreBackup, () => {
+      setPreparationPortalDialogVisible(true);
+    });
 
     return () => {
-      SocketHelper.off(SocketEvents.RestoreBackup, callback);
+      SocketHelper.off(SocketEvents.RestoreBackup, () => {
+        setPreparationPortalDialogVisible(false);
+      });
     };
   }, [setPreparationPortalDialogVisible]);
 

diff --git a/...es/client/src/components/dialogs/PreparationPortalDialog/StyledPreparationPortalDialog.js b/...es/client/src/components/dialogs/PreparationPortalDialog/StyledPreparationPortalDialog.js
@@ -27,10 +27,11 @@
 import styled from "styled-components";
 
 const StyledPreparationPortalDialog = styled.div`
-  #container {
+  #container-inner {
     max-width: 392px;
     box-sizing: border-box;
-    margin-bottom: 40px;
+
+    margin: 12px 16px 36px 16px;
   }
   .preparation-portal_body-wrapper {
     margin-bottom: 0;

diff --git a/packages/client/src/components/dialogs/PreparationPortalDialog/index.js b/packages/client/src/components/dialogs/PreparationPortalDialog/index.js
@@ -50,7 +50,7 @@ const PreparationPortalDialog = (props) => {
       </ModalDialog.Header>
       <ModalDialog.Body>
         <StyledPreparationPortalDialog>
-          <PreparationPortal withoutHeader style={{ padding: "0" }} isDialog />
+          <PreparationPortal withoutHeader isDialog style={{ padding: "0" }} />
         </StyledPreparationPortalDialog>
       </ModalDialog.Body>
     </ModalDialog>

diff --git a/packages/client/src/pages/PortalSettings/Layout/index.js b/packages/client/src/pages/PortalSettings/Layout/index.js
@@ -28,6 +28,7 @@ import React, { useEffect } from "react";
 import Article from "@docspace/shared/components/article";
 import { inject, observer } from "mobx-react";
 import Section from "@docspace/shared/components/section";
+
 import withLoading from "SRC_DIR/HOCs/withLoading";
 import ArticleWrapper from "SRC_DIR/components/ArticleWrapper";
 

diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js
@@ -245,6 +245,8 @@ const StyledRestoreBackup = styled.div`
   ${commonStyles}
   ${floatingButtonStyles}
 
+  max-width: ${TEXT_LENGTH};
+
   .restore-backup_third-party-module {
     margin-top: 16px;
 

diff --git a/...es/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js b/...es/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js
@@ -52,8 +52,13 @@ import { FloatingButton } from "@docspace/shared/components/floating-button";
 import { Badge } from "@docspace/shared/components/badge";
 import { Link } from "@docspace/shared/components/link";
 import { getSettingsThirdParty } from "@docspace/shared/api/files";
+import StatusMessage from "@docspace/shared/components/status-message";
+import SocketHelper, { SocketEvents } from "@docspace/shared/utils/socket";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
-import { isManagement } from "@docspace/shared/utils/common";
+import {
+  getBackupProgressInfo,
+  isManagement,
+} from "@docspace/shared/utils/common";
 import { globalColors } from "@docspace/shared/themes";
 import ButtonContainer from "./sub-components/ButtonContainer";
 import ThirdPartyStorageModule from "./sub-components/ThirdPartyStorageModule";
@@ -105,7 +110,28 @@ class AutomaticBackup extends React.PureComponent {
   }
 
   componentDidMount() {
-    const { fetchTreeFolders, rootFoldersTitles } = this.props;
+    const {
+      fetchTreeFolders,
+      rootFoldersTitles,
+      setDownloadingProgress,
+      setTemporaryLink,
+      t,
+    } = this.props;
+
+    SocketHelper.on(SocketEvents.BackupProgress, (opt) => {
+      const options = getBackupProgressInfo(
+        opt,
+        t,
+        setDownloadingProgress,
+        setTemporaryLink,
+      );
+      if (!options) return;
+
+      const { error, success } = options;
+
+      if (error) toastr.error(error);
+      if (success) toastr.success(success);
+    });
 
     this.getWeekdays();
 
@@ -125,10 +151,12 @@ class AutomaticBackup extends React.PureComponent {
   }
 
   componentWillUnmount() {
-    const { clearProgressInterval } = this.props;
+    const { resetDownloadingProgress } = this.props;
     clearTimeout(this.timerId);
     this.timerId = null;
-    clearProgressInterval();
+    resetDownloadingProgress();
+
+    SocketHelper.off(SocketEvents.BackupProgress);
   }
 
   setBasicSettings = async () => {
@@ -140,6 +168,7 @@ class AutomaticBackup extends React.PureComponent {
       getProgress,
       setStorageRegions,
       setConnectedThirdPartyAccount,
+      setErrorInformation,
     } = this.props;
 
     try {
@@ -167,12 +196,13 @@ class AutomaticBackup extends React.PureComponent {
         isInitialLoading: false,
       });
     } catch (error) {
-      toastr.error(error);
+      setErrorInformation(error, t);
       clearTimeout(this.timerId);
       this.timerId = null;
       this.setState({
         isEmptyContentBeforeLoader: false,
         isInitialLoading: false,
+        isInitialError: true,
       });
     }
   };
@@ -361,6 +391,7 @@ class AutomaticBackup extends React.PureComponent {
       isCheckedThirdParty,
       isCheckedDocuments,
       updateBaseFolderPath,
+      setErrorInformation,
     } = this.props;
 
     try {
@@ -387,8 +418,8 @@ class AutomaticBackup extends React.PureComponent {
       this.setState({
         isLoadingData: false,
       });
-    } catch (e) {
-      toastr.error(e);
+    } catch (error) {
+      setErrorInformation(error, t);
 
       (isCheckedThirdParty || isCheckedDocuments) && updateBaseFolderPath();
 
@@ -399,7 +430,7 @@ class AutomaticBackup extends React.PureComponent {
   };
 
   deleteSchedule = () => {
-    const { t, deleteSchedule } = this.props;
+    const { t, deleteSchedule, setErrorInformation } = this.props;
     this.setState({ isLoadingData: true }, () => {
       deleteBackupSchedule()
         .then(() => {
@@ -411,7 +442,7 @@ class AutomaticBackup extends React.PureComponent {
           });
         })
         .catch((error) => {
-          toastr.error(error);
+          setErrorInformation(error, t);
           this.setState({
             isLoadingData: false,
           });
@@ -435,13 +466,15 @@ class AutomaticBackup extends React.PureComponent {
       automaticBackupUrl,
       currentColorScheme,
       isBackupProgressVisible,
+      errorInformation,
     } = this.props;
 
     const {
       isInitialLoading,
       isLoadingData,
       isError,
       isEmptyContentBeforeLoader,
+      isInitialError,
     } = this.state;
 
     const commonProps = {
@@ -461,12 +494,12 @@ class AutomaticBackup extends React.PureComponent {
     };
 
     const roomName = rootFoldersTitles[FolderType.USER]?.title;
-
     return isEmptyContentBeforeLoader &&
       !isInitialLoading ? null : isInitialLoading ? (
       <AutoBackupLoader />
     ) : (
       <StyledAutoBackup isEnableAuto={isEnableAuto}>
+        <StatusMessage message={errorInformation} />
         <div className="backup_modules-header_wrapper">
           <Text className="backup_modules-description settings_unavailable">
             {t("AutoBackupDescription", {
@@ -492,7 +525,7 @@ class AutomaticBackup extends React.PureComponent {
             className="enable-automatic-backup backup_toggle-btn"
             onChange={this.onClickPermissions}
             isChecked={selectedEnableSchedule}
-            isDisabled={isLoadingData || !isEnableAuto}
+            isDisabled={isLoadingData || !isEnableAuto || isInitialError}
           />
 
           <div className="toggle-caption">
@@ -524,7 +557,7 @@ class AutomaticBackup extends React.PureComponent {
             </Text>
           </div>
         </div>
-        {selectedEnableSchedule && isEnableAuto ? (
+        {!isInitialError && selectedEnableSchedule && isEnableAuto ? (
           <div className="backup_modules">
             <StyledModules>
               <RadioButton
@@ -593,7 +626,7 @@ class AutomaticBackup extends React.PureComponent {
 
         <ButtonContainer
           t={t}
-          isLoadingData={isLoadingData}
+          isLoadingData={isLoadingData || isInitialError}
           buttonSize={buttonSize}
           onSaveModuleSettings={this.onSaveModuleSettings}
           onCancelModuleSettings={this.onCancelModuleSettings}
@@ -660,6 +693,11 @@ export default inject(
       setStorageRegions,
       defaultFolderId,
       isBackupProgressVisible,
+      setDownloadingProgress,
+      setTemporaryLink,
+      resetDownloadingProgress,
+      errorInformation,
+      setErrorInformation,
     } = backup;
 
     const { updateBaseFolderPath, resetNewFolderPath } = filesSelectorInput;
@@ -725,6 +763,11 @@ export default inject(
       automaticBackupUrl,
       currentColorScheme,
       isBackupProgressVisible,
+      setDownloadingProgress,
+      setTemporaryLink,
+      resetDownloadingProgress,
+      errorInformation,
+      setErrorInformation,
     };
   },
 )(withTranslation(["Settings", "Common"])(observer(AutomaticBackup)));