WEb: AutoBackup: Added new option for third-party accounts.

products/ASC.Files/Client/src/components/panels/SelectionPanel/SelectionPanelBody.js

@@ -246,7 +246,7 @@ class SelectionPanel extends React.Component {
     const foldersTree =
       treeFoldersLength > 0 ? treeFolders : requestedTreeFolders;
 
-    const passedId = id ? id : foldersTree[0].id;
+    const passedId = id ? id : foldersTree[0]?.id;
 
     if (foldersType === "third-party") {
       isFilesPanel && onSetBaseFolderPath && onSetBaseFolderPath(passedId);

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/StyledBackup.js

@@ -121,6 +121,21 @@ const StyledManualBackup = styled.div`
 
 const StyledAutoBackup = styled.div`
   ${commonStyles}
+  .auto-backup_third-party-module {
+    margin-top: 16px;
+    margin-left: 24px;
+    .auto-backup_connection {
+      display: flex;
+    }
+    .auto-backup_third-party-combo {
+      max-width: 234px;
+      margin-right: 8px;
+    }
+    p {
+      margin-top: 16px;
+      max-width: 350px;
+    }
+  }
 
   .automatic-backup_main {
     margin-bottom: 30px;

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/auto-backup/index.js

@@ -370,11 +370,13 @@ class AutomaticBackup extends React.PureComponent {
       theme,
       renderTooltip,
       selectedEnableSchedule,
+      isDocSpace,
     } = this.props;
 
     const { isInitialLoading, isLoadingData, isError } = this.state;
 
-    const isDisabledThirdPartyList = isCheckedThirdParty
+    const isDisabledThirdPartyList =
+      isCheckedThirdParty || isDocSpace
         ? false
         : commonThirdPartyList?.length === 0;
 
@@ -532,7 +534,7 @@ const { organizationName, theme } = settingsStore;
   const isCheckedThirdParty = selectedStorageType === `${ResourcesModuleType}`;
   const isCheckedThirdPartyStorage =
     selectedStorageType === `${StorageModuleType}`;
-
+  const isDocSpace = true;
   return {
     theme,
     language,
@@ -571,5 +573,6 @@ const { organizationName, theme } = settingsStore;
     resetStorageSettings,
     setSelectedEnableSchedule,
     selectedEnableSchedule,
+    isDocSpace,
   };
 })(withTranslation(["Settings", "Common"])(observer(AutomaticBackup)));

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/auto-backup/sub-components/ThirdPartyModule.js

@@ -4,13 +4,40 @@ import { inject, observer } from "mobx-react";
 import { BackupStorageType } from "@appserver/common/constants";
 import SelectFolderInput from "files/SelectFolderInput";
 import ScheduleComponent from "./ScheduleComponent";
+import ComboBox from "@appserver/components/combobox";
+import Button from "@appserver/components/button";
+import Text from "@appserver/components/text";
 
 class ThirdPartyModule extends React.PureComponent {
   constructor(props) {
     super(props);
-    const { setSelectedFolder, isResourcesDefault } = props;
+    const { setSelectedFolder, isResourcesDefault, isDocSpace } = props;
+
+    if (isDocSpace) {
+      this.accounts = [
+        {
+          key: "0",
+          label: "Google Drive",
+        },
+        {
+          key: "1",
+          label: "OneDrive ",
+        },
+        {
+          key: "2",
+          label: "Dropbox ",
+        },
+        {
+          key: "3",
+          label: "Box.com",
+        },
+      ];
+    }
+
     this.state = {
       isPanelVisible: false,
+      ...(isDocSpace && { selectedAccount: this.accounts[0] }),
+      isConnected: false,
     };
     !isResourcesDefault && setSelectedFolder("");
   }
@@ -32,8 +59,26 @@ class ThirdPartyModule extends React.PureComponent {
     setSelectedFolder(`${id}`);
   };
 
+  onConnect = () => {
+    const { isConnected } = this.state;
+
+    this.setState({ isConnected: !isConnected });
+  };
+
+  onCopyingDirectly = () => {
+    console.log("copy");
+  };
+  onSelectAccount = (options) => {
+    const key = options.key;
+    const label = options.label;
+
+    this.setState({
+      selectedAccount: { key, label },
+    });
+  };
+
   render() {
-    const { isPanelVisible } = this.state;
+    const { isPanelVisible, selectedAccount, isConnected } = this.state;
     const {
       isError,
       isLoadingData,
@@ -41,11 +86,16 @@ class ThirdPartyModule extends React.PureComponent {
       isSuccessSave,
       passedId,
       commonThirdPartyList,
+      isDocSpace,
+      isResourcesDefault,
+
+      t,
       ...rest
     } = this.props;
-
+    console.log(isLoadingData, !isConnected);
     return (
       <>
+        {!isDocSpace ? (
           <div className="auto-backup_folder-input">
             <SelectFolderInput
               onSelectFolder={this.onSelectFolder}
@@ -59,9 +109,51 @@ class ThirdPartyModule extends React.PureComponent {
               isReset={isReset}
               isSuccessSave={isSuccessSave}
               foldersList={commonThirdPartyList}
-            withoutBasicSelection
+              withoutBasicSelection={isResourcesDefault ? false : true}
             />
           </div>
+        ) : (
+          <div className="auto-backup_third-party-module">
+            <div className="auto-backup_connection">
+              <ComboBox
+                className="auto-backup_third-party-combo"
+                options={this.accounts}
+                selectedOption={{
+                  key: 0,
+                  label: selectedAccount.label,
+                }}
+                onSelect={this.onSelectAccount}
+                noBorder={false}
+                scaledOptions
+                dropDownMaxHeight={300}
+                tabIndex={1}
+              />
+
+              <Button
+                label={t("Common:Connect")}
+                onClick={this.onConnect}
+                isDisabled={isLoadingData}
+                size={"small"}
+              />
+            </div>
+            <Text fontWeight={"600"}>{"Folder name:"}</Text>
+
+            <SelectFolderInput
+              onSelectFolder={this.onSelectFolder}
+              onClose={this.onClose}
+              onClickInput={this.onClickInput}
+              isPanelVisible={isPanelVisible}
+              isError={isError}
+              foldersType="third-party"
+              isDisabled={isLoadingData || !isConnected}
+              id={passedId}
+              isReset={isReset}
+              isSuccessSave={isSuccessSave}
+              foldersList={commonThirdPartyList}
+              withoutBasicSelection={isResourcesDefault ? false : true}
+            />
+          </div>
+        )}
         <ScheduleComponent isLoadingData={isLoadingData} {...rest} />
       </>
     );
@@ -71,7 +163,7 @@ class ThirdPartyModule extends React.PureComponent {
 export default inject(({ backup }) => {
   const {
     setSelectedFolder,
-    selectedFolderId,
+    //selectedFolderId,
     defaultStorageType,
     commonThirdPartyList,
     defaultFolderId,
@@ -81,11 +173,12 @@ export default inject(({ backup }) => {
     defaultStorageType === `${BackupStorageType.ResourcesModuleType}`;
 
   const passedId = isResourcesDefault ? defaultFolderId : "";
-
+  const isDocSpace = true;
   return {
     setSelectedFolder,
     passedId,
     commonThirdPartyList,
     isResourcesDefault,
+    isDocSpace,
   };
-})(withTranslation("Settings")(observer(ThirdPartyModule)));
+})(withTranslation(["Settings", "Common"])(observer(ThirdPartyModule)));

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/manual-backup/sub-components/ThirdPartyModule.js

@@ -148,7 +148,7 @@ class ThirdPartyModule extends React.Component {
     } = this.state;
 
     const isModuleDisabled = !isMaxProgress || isStartCopy || isLoadingData;
-    console.log(selectedFolder);
+
     return !isDocSpace ? (
       <>
         <div className="manual-backup_folder-input">