Web: Settings: Backup: Added input with folder path. Added panel with only common documents.

packages/asc-web-common/api/files/index.js

@@ -177,6 +177,14 @@ export function getCommonFolderList(filter = FilesFilter.getDefault()) {
   return request(options);
 }
 
+export function getCommonThirdPartyList() {
+  const options = {
+    method: "get",
+    url: "/files/thirdparty/common",
+  };
+  return request(options);
+}
+
 export function getFavoritesFolderList(filter = FilesFilter.getDefault()) {
   const options = {
     method: "get",

packages/asc-web-common/store/AuthStore.js

@@ -16,6 +16,8 @@ class AuthStore {
   moduleStore = null;
   settingsStore = null;
 
+  panelVisible = false;
+
   isLoading = false;
   isAuthenticated = false;
   version = null;
@@ -225,7 +227,9 @@ class AuthStore {
       return promise;
     });
   };
-
+  setPanelVisible = (isVisible) => {
+    this.panelVisible = isVisible;
+  };
   setDocumentTitle = (subTitle = null) => {
     let title;
 

packages/asc-web-common/store/SettingsStore.js

@@ -62,6 +62,8 @@ class SettingsStore {
 
   isArticleVisibleOnUnpin = false;
 
+  folderPath = [];
+
   hashSettings = null;
   title = "";
   ownerId = null;
@@ -123,6 +125,11 @@ class SettingsStore {
     return newSettings;
   };
 
+  getFolderPath = async (id) => {
+    //debugger;
+    this.folderPath = await api.files.getFolderPath(id);
+  };
+
   getCurrentCustomSchema = async (id) => {
     this.customNames = await api.settings.getCurrentCustomSchema(id);
   };

packages/asc-web-components/file-input-path/index.js

@@ -0,0 +1,188 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import equal from "fast-deep-equal/react";
+
+import IconButton from "../icon-button";
+import TextInput from "../text-input";
+import StyledFileInput from "../file-input/styled-file-input";
+import { inject, observer } from "mobx-react";
+let path = "";
+class FileInputPath extends Component {
+  constructor(props) {
+    super(props);
+
+    this.inputRef = React.createRef();
+
+    this.state = {
+      fileName: "fileName",
+      file: null,
+      fullFolderPath: "",
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const { folderPath } = this.props;
+    if (folderPath !== prevProps.folderPath) {
+      console.log("YES");
+      this.getTitlesFolders();
+    }
+  }
+
+  getTitlesFolders = () => {
+    const { folderPath } = this.props;
+    path = "";
+    if (folderPath.length > 1) {
+      for (let item of folderPath) {
+        console.log("item", item.title);
+
+        //debugger;
+        if (!path) {
+          path = path + `${item.title}`;
+        } else path = path + " " + ">" + " " + `${item.title}`;
+        console.log("path", path);
+        console.log("this.state.fullFolderPath", this.state.fullFolderPath);
+      }
+      this.setState({
+        fullFolderPath: path,
+      });
+    } else {
+      for (let item of folderPath) {
+        console.log("item", item.title);
+
+        //debugger;
+        path = `${item.title}`;
+        console.log("path", path);
+        console.log("this.state.fullFolderPath", this.state.fullFolderPath);
+      }
+      this.setState({
+        fullFolderPath: path,
+      });
+    }
+  };
+  onChangeHandler = (e) => {
+    const { folderPath } = this.props;
+    //debugger;
+    console.log("onChangeHandler");
+    this.setState({
+      fileName: e.target.value,
+    });
+  };
+
+  onClickInput = () => {
+    const { setPanelVisible } = this.props;
+    setPanelVisible(true);
+    const { folderPath } = this.props;
+
+    //console.log("onChangeHandler", folderPath);
+  };
+
+  render() {
+    const { fileName, fullFolderPath } = this.state;
+    const {
+      folderPath,
+      onClick,
+      size,
+      placeholder,
+      isDisabled,
+      scale,
+      hasError,
+      hasWarning,
+      accept,
+      id,
+      onInput, // eslint-disable-line no-unused-vars
+      ...rest
+    } = this.props;
+    console.log("render FileInputPath", fullFolderPath);
+    let iconSize = 0;
+
+    switch (size) {
+      case "base":
+        iconSize = 15;
+        break;
+      case "middle":
+        iconSize = 15;
+        break;
+      case "big":
+        iconSize = 16;
+        break;
+      case "huge":
+        iconSize = 16;
+        break;
+      case "large":
+        iconSize = 16;
+        break;
+    }
+
+    return (
+      <StyledFileInput>
+        <TextInput
+          className="text-input"
+          placeholder={placeholder}
+          value={fullFolderPath}
+          size={size}
+          isDisabled={isDisabled}
+          hasError={hasError}
+          hasWarning={hasWarning}
+          scale={scale}
+          onFocus={this.onClickInput}
+          onChange={this.onChangeHandler}
+        />
+
+        <div className="icon" onClick={this.onClickInput}>
+          <IconButton
+            className="icon-button"
+            iconName={"/static/images/catalog.folder.react.svg"}
+            color={"#A3A9AE"}
+            size={iconSize}
+            isDisabled={isDisabled}
+          />
+        </div>
+      </StyledFileInput>
+    );
+  }
+}
+
+FileInputPath.propTypes = {
+  /** Accepts css style */
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Placeholder text for the input */
+  placeholder: PropTypes.string,
+  /** Supported size of the input fields */
+  size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
+  /** Indicates the input field has scale */
+  scale: PropTypes.bool,
+  /** Accepts class */
+  className: PropTypes.string,
+  /** Indicates the input field has an error */
+  hasError: PropTypes.bool,
+  /** Indicates the input field has a warning */
+  hasWarning: PropTypes.bool,
+  /** Used as HTML `id` property */
+  id: PropTypes.string,
+  /** Indicates that the field cannot be used (e.g not authorised, or changes not saved) */
+  isDisabled: PropTypes.bool,
+  /** Used as HTML `name` property */
+  name: PropTypes.string,
+  /** Called when a file is selected */
+  onInput: PropTypes.func,
+  /**Specifies files visible for upload */
+  accept: PropTypes.string,
+};
+
+FileInputPath.defaultProps = {
+  size: "base",
+  scale: false,
+  hasWarning: false,
+  hasError: false,
+  isDisabled: false,
+  accept: "",
+};
+
+export default inject(({ auth }) => {
+  const { setPanelVisible } = auth;
+  const { folderPath } = auth.settingsStore;
+  return {
+    folderPath,
+    setPanelVisible,
+  };
+})(observer(FileInputPath));

packages/asc-web-components/file-input/index.js

@@ -33,6 +33,7 @@ class FileInput extends Component {
   };
 
   onChangeHandler = (e) => {
+    debugger;
     this.setState({
       fileName: e.target.value,
     });

products/ASC.Files/Client/public/locales/en/OperationsPanel.json

@@ -8,5 +8,7 @@
   "MoveToFolderMessage": "You cannot move the folder to its subfolder",
   "MoveConfirmation": "Move confirmation",
   "MoveConfirmationMessage": "You are about to move elements from the {{provider}} directory. In such a case, they will be deleted from your {{provider}} account and will no longer be accessible to other users, in case these elements have previously been shared.",
-  "MoveConfirmationAlert": "Are you sure you want to move the elements?"
+  "MoveConfirmationAlert": "Are you sure you want to move the elements?",
+
+  "ChooseFolder": "Choose folder"
 }

products/ASC.Files/Client/public/locales/ru/OperationsPanel.json

@@ -8,5 +8,7 @@
   "MoveToFolderMessage": "Нельзя перенести папку в свою дочернюю папку",
   "MoveConfirmation": "Подтверждение перемещения",
   "MoveConfirmationMessage": "Вы собираетесь переместить элементы из каталога {{provider}}. В этом случае они будут удалены из вашего аккаунта {{provider}} и больше не будут доступны для других пользователей, если ранее к этим элементам был предоставлен доступ.",
-  "MoveConfirmationAlert": "Вы действительно хотите переместить элементы?"
+  "MoveConfirmationAlert": "Вы действительно хотите переместить элементы?",
+
+  "ChooseFolder": "Choose folder"
 }

products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js

@@ -81,7 +81,7 @@ class TreeFolders extends React.Component {
         iconUrl = "images/catalog.shared.react.svg";
         break;
       case FolderType.COMMON:
-        iconUrl = "images/catalog.portfolio.react.svg";
+        iconUrl = "/static/images/catalog.portfolio.react.svg";
         break;
       case FolderType.Favorites:
         iconUrl = "images/catalog.favorites.react.svg";
@@ -99,38 +99,39 @@ class TreeFolders extends React.Component {
         break;
     }
 
-    if (item.parentId !== 0) iconUrl = "images/catalog.folder.react.svg";
-
+    if (item.parentId !== 0)
+      iconUrl = "/static/images/catalog.folder.react.svg";
+    //debugger;
     switch (item.providerKey) {
       case "GoogleDrive":
-        iconUrl = "images/cloud.services.google.drive.react.svg";
+        iconUrl = "/static/images/cloud.services.google.drive.react.svg";
         break;
       case "Box":
-        iconUrl = "images/cloud.services.box.react.svg";
+        iconUrl = "/static/images/cloud.services.box.react.svg";
         break;
       case "DropboxV2":
-        iconUrl = "images/cloud.services.dropbox.react.svg";
+        iconUrl = "/static/images/cloud.services.dropbox.react.svg";
         break;
       case "OneDrive":
-        iconUrl = "images/cloud.services.onedrive.react.svg";
+        iconUrl = "/static/images/cloud.services.onedrive.react.svg";
         break;
       case "SharePoint":
-        iconUrl = "images/cloud.services.onedrive.react.svg";
+        iconUrl = "/static/images/cloud.services.onedrive.react.svg";
         break;
       case "kDrive":
-        iconUrl = "images/catalog.folder.react.svg";
+        iconUrl = "/static/images/catalog.folder.react.svg";
         break;
       case "Yandex":
-        iconUrl = "images/catalog.folder.react.svg";
+        iconUrl = "/static/images/catalog.folder.react.svg";
         break;
       case "NextCloud":
-        iconUrl = "images/cloud.services.nextcloud.react.svg";
+        iconUrl = "/static/images/cloud.services.nextcloud.react.svg";
         break;
       case "OwnCloud":
-        iconUrl = "images/catalog.folder.react.svg";
+        iconUrl = "/static/images/catalog.folder.react.svg";
         break;
       case "WebDav":
-        iconUrl = "images/catalog.folder.react.svg";
+        iconUrl = "/static/images/catalog.folder.react.svg";
         break;
       default:
         break;
@@ -201,7 +202,7 @@ class TreeFolders extends React.Component {
       const showBadge = item.newItems
         ? item.newItems > 0 && this.props.needUpdate
         : false;
-
+      const provider = item.providerKey;
       const serviceFolder = !!item.providerKey;
       let className = `tree-drag tree-id_${item.id}`;
       if (dragging) className += " dragging";
@@ -260,6 +261,75 @@ class TreeFolders extends React.Component {
     });
   };
 
+  getCommonItems = (data) => {
+    return data.map((item) => {
+      const dragging = this.props.dragging ? this.showDragItems(item) : false;
+
+      const showBadge = item.newItems
+        ? item.newItems > 0 && this.props.needUpdate
+        : false;
+      const provider = item.providerKey;
+      const serviceFolder = !!item.providerKey;
+      let className = `tree-drag tree-id_${item.id}`;
+      if (dragging) className += " dragging";
+      if ((item.folders && item.folders.length > 0) || serviceFolder) {
+        return !provider ? (
+          <TreeNode
+            id={item.id}
+            key={item.id}
+            className={className}
+            title={item.title}
+            needTopMargin={item.rootFolderType === FolderType.Privacy}
+            icon={this.getFolderIcon(item)}
+            dragging={dragging}
+            isLeaf={
+              item.rootFolderType === FolderType.Privacy &&
+              !this.props.isDesktop
+                ? true
+                : null
+            }
+            newItems={
+              !this.props.isDesktop &&
+              item.rootFolderType === FolderType.Privacy
+                ? null
+                : item.newItems
+            }
+            providerKey={item.providerKey}
+            onBadgeClick={this.onBadgeClick}
+            showBadge={showBadge}
+          >
+            {item.rootFolderType === FolderType.Privacy && !this.props.isDesktop
+              ? null
+              : this.getCommonItems(item.folders ? item.folders : [])}
+          </TreeNode>
+        ) : (
+          <></>
+        );
+      }
+      return !provider ? (
+        <TreeNode
+          id={item.id}
+          key={item.id}
+          className={className}
+          title={item.title}
+          needTopMargin={item.rootFolderType === FolderType.TRASH}
+          dragging={dragging}
+          isLeaf={item.foldersCount ? false : true}
+          icon={this.getFolderIcon(item)}
+          newItems={
+            !this.props.isDesktop && item.rootFolderType === FolderType.Privacy
+              ? null
+              : item.newItems
+          }
+          providerKey={item.providerKey}
+          onBadgeClick={this.onBadgeClick}
+          showBadge={showBadge}
+        />
+      ) : (
+        <></>
+      );
+    });
+  };
   switcherIcon = (obj) => {
     if (obj.isLeaf) {
       return null;
@@ -434,6 +504,7 @@ class TreeFolders extends React.Component {
       expandedPanelKeys,
       treeFolders,
       data,
+      isCommonWithoutProvider,
     } = this.props;
 
     return (
@@ -458,7 +529,9 @@ class TreeFolders extends React.Component {
         gapBetweenNodesTablet="26"
         isFullFillSelection={false}
       >
-        {this.getItems(data || treeFolders)}
+        {isCommonWithoutProvider
+          ? this.getCommonItems(data)
+          : this.getItems(data || treeFolders)}
       </StyledTreeMenu>
     );
   }

products/ASC.Files/Client/src/components/panels/OperationsDialog/index.js

@@ -0,0 +1,141 @@
+import React, { useEffect } from "react";
+import { Provider as MobxProvider } from "mobx-react";
+import { inject, observer } from "mobx-react";
+import { getShareFiles } from "@appserver/common/api/files";
+import OperationsPanel from "../OperationsPanel";
+import TreeFolders from "../../Article/Body/TreeFolders";
+import stores from "../../../store/index";
+import store from "studio/store";
+import ModalDialog from "@appserver/components/modal-dialog";
+import { StyledAsidePanel } from "../StyledPanels";
+import { useTranslation, withTranslation } from "react-i18next";
+
+const { auth: authStore } = store;
+
+const OperationsDialog = ({
+  getCommonThirdPartyList,
+  commonThirdPartyList,
+  commonFolder,
+  operationsFolders,
+  treeFolders,
+  fetchTreeFolders,
+  expandedKeys,
+  filter,
+  commonTreeFolder,
+  getCommonFolder,
+  setPanelVisible,
+  getFolderPath,
+}) => {
+  useEffect(() => {
+    getCommonThirdPartyList();
+    fetchTreeFolders().then(() => getCommonFolder());
+  }, []);
+
+  const { t } = useTranslation("OperationsPanel");
+  //   console.log("commonTreeFolder", commonTreeFolder);
+  //   console.log("treeFolders", treeFolders);
+  const visible = true;
+  const zIndex = 310;
+  const onClose = () => {
+    setPanelVisible(false);
+  };
+  const onSelect = (folder, treeNode) => {
+    //debugger;
+    const folderTitle = treeNode.node.props.title;
+    const destFolderId = isNaN(+folder[0]) ? folder[0] : +folder[0];
+    //console.log("treeNode", treeNode.node);
+    getFolderPath(folder).then((res) => console.log("res!!!", res));
+    // if (currentFolderId === destFolderId) {
+    //   return onClose();
+    // }
+
+    onClose();
+  };
+  return (
+    <>
+      <StyledAsidePanel visible={visible}>
+        <ModalDialog
+          visible={visible}
+          displayType="aside"
+          zIndex={zIndex}
+          onClose={onClose}
+        >
+          <ModalDialog.Header>{t("ChooseFolder")}</ModalDialog.Header>
+          <ModalDialog.Body>
+            {commonTreeFolder && (
+              <TreeFolders
+                expandedPanelKeys={expandedKeys}
+                data={[commonTreeFolder]}
+                filter={filter}
+                onSelect={onSelect}
+                needUpdate={false}
+                isCommonWithoutProvider
+              />
+            )}
+          </ModalDialog.Body>
+        </ModalDialog>
+      </StyledAsidePanel>
+    </>
+  );
+};
+
+const OperationsDialogWrapper = inject(
+  ({
+    auth,
+    filesStore,
+    treeFoldersStore,
+    selectedFolderStore,
+    dialogsStore,
+  }) => {
+    const {
+      commonThirdPartyList,
+      getCommonThirdPartyList,
+      filter,
+    } = filesStore;
+    const { setPanelVisible } = auth;
+    const { getFolderPath } = auth.settingsStore;
+    const {
+      commonFolder,
+      operationsFolders,
+      treeFolders,
+      fetchTreeFolders,
+      expandedPanelKeys,
+      commonTreeFolder,
+      getCommonFolder,
+    } = treeFoldersStore;
+    return {
+      getFolderPath,
+      setPanelVisible,
+      expandedKeys: expandedPanelKeys
+        ? expandedPanelKeys
+        : selectedFolderStore.pathParts,
+      filter,
+      commonThirdPartyList,
+      getCommonThirdPartyList,
+      commonFolder,
+      operationsFolders,
+      treeFolders,
+      fetchTreeFolders,
+      commonTreeFolder,
+      getCommonFolder,
+    };
+  }
+)(observer(withTranslation("OperationsPanel")(OperationsDialog)));
+
+class OperationsModal extends React.Component {
+  static getSharingSettings = (fileId) => {
+    return getShareFiles([+fileId], []).then((users) =>
+      SharingPanel.convertSharingUsers(users)
+    );
+  };
+
+  render() {
+    return (
+      <MobxProvider auth={authStore} {...stores}>
+        <OperationsDialogWrapper {...this.props} />
+      </MobxProvider>
+    );
+  }
+}
+
+export default OperationsModal;

products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { withRouter } from "react-router";
 import ModalDialog from "@appserver/components/modal-dialog";
 import { withTranslation } from "react-i18next";
@@ -24,13 +24,17 @@ const OperationsPanelComponent = (props) => {
     setMoveToPanelVisible,
     checkOperationConflict,
     setThirdPartyMoveDialogVisible,
+    commonFolder,
+    getCommonFolder,
+    commonTreeFolder,
   } = props;
 
+  useEffect(() => getCommonFolder(), []);
   const zIndex = 310;
   const deleteAfter = true; // TODO: get from settings
 
   const expandedKeys = props.expandedKeys.map((item) => item.toString());
-
+  //const expandedKeys = ["1"];
   const onClose = () => {
     isCopy ? setCopyPanelVisible(false) : setMoveToPanelVisible(false);
     setExpandedPanelKeys(null);
@@ -94,6 +98,7 @@ const OperationsPanelComponent = (props) => {
   };
 
   //console.log("Operations panel render");
+  console.log("commonTreeFolder", commonTreeFolder);
   return (
     <StyledAsidePanel visible={visible}>
       <ModalDialog
@@ -124,22 +129,29 @@ const OperationsPanel = withTranslation("OperationsPanel")(
 );
 
 export default inject(
-  ({
-    filesStore,
-    treeFoldersStore,
-    selectedFolderStore,
-    dialogsStore,
-    filesActionsStore,
-  }) => {
+  (
+    {
+      filesStore,
+      treeFoldersStore,
+      selectedFolderStore,
+      dialogsStore,
+      filesActionsStore,
+    },
+    commonTreeFolder
+  ) => {
     const { filter, selection } = filesStore;
     const {
       isRecycleBinFolder,
       operationsFolders,
       setExpandedPanelKeys,
       expandedPanelKeys,
+      commonFolder,
+      getCommonFolder,
     } = treeFoldersStore;
     const { checkOperationConflict } = filesActionsStore;
 
+    //debugger;
+    console.log("commonFolder", commonFolder);
     const {
       moveToPanelVisible,
       copyPanelVisible,
@@ -150,7 +162,7 @@ export default inject(
     } = dialogsStore;
 
     const provider = selection.find((x) => x.providerKey);
-
+    //debugger;
     return {
       expandedKeys: expandedPanelKeys
         ? expandedPanelKeys
@@ -162,7 +174,8 @@ export default inject(
       visible: copyPanelVisible || moveToPanelVisible,
       provider,
       selection,
-
+      getCommonFolder,
+      commonTreeFolder,
       setCopyPanelVisible,
       setMoveToPanelVisible,
       setDestFolderId,

products/ASC.Files/Client/src/store/FilesStore.js

@@ -43,6 +43,8 @@ class FilesStore {
   filter = FilesFilter.getDefault(); //TODO: FILTER
   loadTimeout = null;
 
+  commonThirdPartyList = [];
+
   constructor(
     authStore,
     settingsStore,
@@ -1216,6 +1218,11 @@ class FilesStore {
     this.setFile(fileInfo);
   };
 
+  getCommonThirdPartyList = async () => {
+    this.commonThirdPartyList = await api.files.getCommonThirdPartyList();
+
+    console.log(" this.commonThirdPartyList", this.commonThirdPartyList);
+  };
   openDocEditor = (id, providerKey = null, tab = null, url = null) => {
     if (providerKey) {
       tab

products/ASC.Files/Client/src/store/TreeFoldersStore.js

@@ -10,6 +10,7 @@ class TreeFoldersStore {
   expandedKeys = [];
   expandedPanelKeys = null;
 
+  commonTreeFolder = [];
   constructor(selectedFolderStore) {
     makeAutoObservable(this);
     this.selectedFolderStore = selectedFolderStore;
@@ -43,6 +44,12 @@ class TreeFoldersStore {
     this.expandedKeys.push(item);
   };
 
+  getCommonFolder = () => {
+    this.commonTreeFolder = this.treeFolders.find(
+      (x) => x.rootFolderName === "@common"
+    );
+  };
+
   updateRootBadge = (id, count) => {
     const rootItem = this.treeFolders.find((x) => x.id === id);
     if (rootItem) rootItem.newItems -= count;
@@ -145,6 +152,18 @@ class TreeFoldersStore {
       );
     }
   }
+
+  // get commonFolder() {
+  //   if (this.isPrivacyFolder) {
+  //     return this.treeFolders.filter(
+  //       (folder) => folder.rootFolderType === FolderType.Privacy && folder
+  //     );
+  //   } else {
+  //     return this.treeFolders.filter(
+  //       (folder) => folder.rootFolderType === FolderType.COMMON
+  //     );
+  //   }
+  // }
 }
 
 export default TreeFoldersStore;

products/ASC.Files/Client/webpack.config.js

@@ -141,10 +141,15 @@ var config = {
           AppServerConfig.proxyURL,
           "/products/people/remoteEntry.js"
         )}`,
+        files: `files@${combineUrl(
+          AppServerConfig.proxyURL,
+          "/products/files/remoteEntry.js"
+        )}`,
       },
       exposes: {
         "./app": "./src/Files.jsx",
         "./SharingDialog": "./src/components/panels/SharingDialog",
+        "./OperationsDialog": "./src/components/panels/OperationsDialog",
       },
       shared: {
         ...deps,

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

@@ -8,6 +8,10 @@ import Checkbox from "@appserver/components/checkbox";
 import { inject, observer } from "mobx-react";
 import { getThirdPartyList } from "@appserver/common/api/files";
 import DocumentsModule from "./sub-components/documentsModule";
+import FileInputPath from "@appserver/components/file-input-path";
+
+import OperationsDialog from "files/OperationsDialog";
+
 const StyledComponent = styled.div`
   ${commonSettingsStyles}
   .manual-backup_buttons {
@@ -40,29 +44,34 @@ class ManualBackup extends React.Component {
     super(props);
     this.manualBackup = true;
 
+    // this.state = {
+    //   backupMailTemporaryStorage: false,
+    //   backupMailDocuments: false,
+    //   backupMailThirdParty: false,
+    //   backupMailThirdPartyStorage: false,
+    // };
     this.state = {
-      backupMailTemporaryStorage: false,
-      backupMailDocuments: false,
-      backupMailThirdParty: false,
-      backupMailThirdPartyStorage: false,
+      isVisiblePanel: false,
     };
   }
   componentDidMount() {
-    getThirdPartyList().then((res) => console.log("res", res));
+    // getThirdPartyList().then((res) => console.log("res", res));
   }
   onClickCheckbox = (e) => {
     const name = e.target.name;
     let change = !this.state[name];
     this.setState({ [name]: change });
   };
+
   render() {
-    const { t, providers } = this.props;
-    const {
-      backupMailTemporaryStorage,
-      backupMailDocuments,
-      backupMailThirdParty,
-      backupMailThirdPartyStorage,
-    } = this.state;
+    const { t, providers, panelVisible, folderPath } = this.props;
+    // const {
+    //   backupMailTemporaryStorage,
+    //   backupMailDocuments,
+    //   backupMailThirdParty,
+    //   backupMailThirdPartyStorage,
+    // } = this.state;
+    console.log("folderPath", folderPath);
     return (
       <StyledComponent>
         <div className="category-item-wrapper temporary-storage">
@@ -74,14 +83,15 @@ class ManualBackup extends React.Component {
           <Text className="category-item-description">
             {t("TemporaryStorageDescription")}
           </Text>
-          <div className="backup-include_mail">
+
+          {/* <div className="backup-include_mail">
             <Checkbox
               name={"backupMailTemporaryStorage"}
               isChecked={backupMailTemporaryStorage}
               label={t("IncludeMail")}
               onChange={this.onClickCheckbox}
             />
-          </div>
+          </div> */}
           <div className="manual-backup_buttons">
             <Button
               label={t("MakeCopy")}
@@ -104,9 +114,11 @@ class ManualBackup extends React.Component {
 
         <DocumentsModule
           isManualBackup={this.manualBackup}
-          backupMailDocuments={backupMailDocuments}
+          //backupMailDocuments={backupMailDocuments}
           onClickCheckbox={this.onClickCheckbox}
         />
+        <FileInputPath onClick={this.onClickInput} folderPath={folderPath} />
+        {panelVisible && <OperationsDialog />}
 
         <div className="category-item-wrapper temporary-storage">
           <div className="category-item-heading">
@@ -121,14 +133,14 @@ class ManualBackup extends React.Component {
             {t("ThirdPartyResourceNoteDescription")}
           </Text>
 
-          <div className="backup-include_mail">
+          {/* <div className="backup-include_mail">
             <Checkbox
               name={"backupMailThirdParty"}
               isChecked={backupMailThirdParty}
               label={t("IncludeMail")}
               onChange={this.onClickCheckbox}
             />
-          </div>
+          </div> */}
           <div className="manual-backup_buttons">
             <Button
               label={t("MakeCopy")}
@@ -154,14 +166,14 @@ class ManualBackup extends React.Component {
             {t("ThirdPartyStorageNoteDescription")}
           </Text>
 
-          <div className="backup-include_mail">
+          {/* <div className="backup-include_mail">
             <Checkbox
               name={"backupMailThirdPartyStorage"}
               isChecked={backupMailThirdPartyStorage}
               label={t("IncludeMail")}
               onChange={this.onClickCheckbox}
             />
-          </div>
+          </div> */}
           <div className="manual-backup_buttons">
             <Button
               label={t("MakeCopy")}
@@ -178,4 +190,12 @@ class ManualBackup extends React.Component {
   }
 }
 
-export default withTranslation("Settings")(ManualBackup);
+export default inject(({ auth }) => {
+  const { setPanelVisible, panelVisible } = auth;
+  const { folderPath } = auth.settingsStore;
+  return {
+    setPanelVisible,
+    panelVisible,
+    folderPath,
+  };
+})(withTranslation("Settings")(observer(ManualBackup)));

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

@@ -5,7 +5,7 @@ import ComboBox from "@appserver/components/combobox";
 import styled from "styled-components";
 import Button from "@appserver/components/button";
 import Checkbox from "@appserver/components/checkbox";
-
+import OperationsDialog from "files/OperationsDialog";
 class DocumentsModule extends React.Component {
   constructor(props) {
     super(props);
@@ -92,14 +92,14 @@ class DocumentsModule extends React.Component {
             </>
           )}
 
-          <div className="backup-include_mail">
+          {/* <div className="backup-include_mail">
             <Checkbox
               name={"backupMailDocuments"}
               isChecked={backupMailDocuments}
               label={t("IncludeMail")}
               onChange={onClickCheckbox}
             />
-          </div>
+          </div> */}
 
           {isManualBackup && (
             <div className="manual-backup_buttons">

web/ASC.Web.Client/webpack.config.js

@@ -143,6 +143,10 @@ const config = {
           AppServerConfig.proxyURL,
           "/products/people/remoteEntry.js"
         )}`,
+        files: `files@${combineUrl(
+          AppServerConfig.proxyURL,
+          "/products/files/remoteEntry.js"
+        )}`,
       },
       exposes: {
         "./shell": "./src/Shell",