Web: Files: fixed ThirdParty

products/ASC.Files/Client/src/Files.jsx

@@ -25,6 +25,7 @@ import filesActionsStore from "./store/FilesActionsStore";
 import "./custom.scss";
 import i18n from "./i18n";
 import { I18nextProvider } from "react-i18next";
+import Panels from "./components/FilesPanels";
 //import { regDesktop } from "@appserver/common/src/desktop";
 
 const Error404 = React.lazy(() => import("studio/Error404"));
@@ -81,6 +82,7 @@ class FilesContent extends React.Component {
 
     return (
       <Router history={history}>
+        <Panels />
         <Switch>
           <PrivateRoute
             exact

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

@@ -95,7 +95,7 @@ const PureThirdPartyListContainer = ({
   nextCloudConnectItem,
   webDavConnectItem,
   setConnectItem,
-  setShowThirdPartyPanel,
+  setThirdPartyDialogVisible,
   setSelectedNode,
   setSelectedFolder,
   getOAuthToken,
@@ -134,11 +134,12 @@ const PureThirdPartyListContainer = ({
       setConnectItem(data);
     }
 
-    redirectAction();
+    onShowConnectPanel();
   };
 
   const onShowConnectPanel = () => {
-    setShowThirdPartyPanel((prev) => !prev);
+    //setThirdPartyDialogVisible((prev) => !prev); TODO:
+    setThirdPartyDialogVisible(true);
     redirectAction();
   };
 
@@ -208,13 +209,12 @@ export default inject(
     settingsStore,
     treeFoldersStore,
     selectedFolderStore,
+    dialogsStore,
   }) => {
     const { setIsLoading } = initFilesStore;
     const { setSelectedFolder } = selectedFolderStore;
     const { setSelectedNode } = treeFoldersStore;
     const {
-      setConnectItem,
-      setShowThirdPartyPanel,
       googleConnectItem,
       boxConnectItem,
       dropboxConnectItem,
@@ -225,6 +225,8 @@ export default inject(
       openConnectWindow,
     } = settingsStore.thirdPartyStore;
 
+    const { setConnectItem, setThirdPartyDialogVisible } = dialogsStore;
+
     return {
       googleConnectItem,
       boxConnectItem,
@@ -237,7 +239,7 @@ export default inject(
       setSelectedFolder,
       setSelectedNode,
       setConnectItem,
-      setShowThirdPartyPanel,
+      setThirdPartyDialogVisible,
       getOAuthToken,
       openConnectWindow,
     };

products/ASC.Files/Client/src/components/FilesPanels/index.js

@@ -5,7 +5,7 @@ import {
   UploadPanel,
   OperationsPanel,
   VersionHistoryPanel,
-} from "../../../panels";
+} from "../panels";
 import {
   ThirdPartyMoveDialog,
   ConnectDialog,
@@ -13,7 +13,8 @@ import {
   EmptyTrashDialog,
   DeleteDialog,
   DownloadDialog,
-} from "../../../dialogs";
+  ThirdPartyDialog,
+} from "../dialogs";
 
 const Panels = (props) => {
   const {
@@ -29,6 +30,7 @@ const Panels = (props) => {
     deleteDialogVisible,
     downloadDialogVisible,
     emptyTrashDialogVisible,
+    thirdPartyDialogVisible,
   } = props;
 
   return [
@@ -60,6 +62,7 @@ const Panels = (props) => {
     deleteDialogVisible && <DeleteDialog key="delete-dialog" />,
     emptyTrashDialogVisible && <EmptyTrashDialog key="empty-trash-dialog" />,
     downloadDialogVisible && <DownloadDialog key="download-dialog" />,
+    thirdPartyDialogVisible && <ThirdPartyDialog key="thirdparty-dialog" />,
   ];
 };
 
@@ -76,6 +79,9 @@ export default inject(
       deleteDialogVisible,
       downloadDialogVisible,
       emptyTrashDialogVisible,
+      thirdPartyDialogVisible,
+
+      connectItem, //TODO:
     } = dialogsStore;
 
     const { uploadPanelVisible } = uploadDataStore;
@@ -88,12 +94,14 @@ export default inject(
       copyPanelVisible,
       moveToPanelVisible,
       thirdPartyMoveDialogVisible,
-      connectDialogVisible,
+      //connectDialogVisible,
+      connectDialogVisible: connectDialogVisible || !!connectItem, //TODO:
       deleteThirdPartyDialogVisible,
       versionHistoryPanelVisible,
       deleteDialogVisible,
       downloadDialogVisible,
       emptyTrashDialogVisible,
+      thirdPartyDialogVisible,
     };
   }
 )(observer(Panels));

products/ASC.Files/Client/src/components/dialogs/ConnectDialog/index.js

@@ -317,7 +317,13 @@ const ConnectDialog = withTranslation("ConnectDialog")(
 );
 
 export default inject(
-  ({ filesStore, settingsStore, treeFoldersStore, selectedFolderStore }) => {
+  ({
+    filesStore,
+    settingsStore,
+    treeFoldersStore,
+    selectedFolderStore,
+    dialogsStore,
+  }) => {
     const {
       providers,
       getOAuthToken,
@@ -336,7 +342,7 @@ export default inject(
     } = treeFoldersStore;
     const { id, folders } = selectedFolderStore;
     const {
-      connectDialogVisible,
+      connectDialogVisible: visible,
       setConnectDialogVisible,
       connectItem: item,
     } = dialogsStore;
@@ -348,7 +354,7 @@ export default inject(
       myFolderId,
       commonFolderId,
       providers,
-      visible: connectDialogVisible,
+      visible,
       item,
 
       fetchFiles,

products/ASC.Files/Client/src/components/dialogs/ThirdPartyDialog/index.js

@@ -0,0 +1,272 @@
+import React from "react";
+import styled from "styled-components";
+import { Trans } from "react-i18next";
+import { inject, observer } from "mobx-react";
+import { withTranslation } from "react-i18next";
+import ModalDialog from "@appserver/components/modal-dialog";
+import Text from "@appserver/components/text";
+import Link from "@appserver/components/link";
+
+const StyledServicesBlock = styled.div`
+  display: grid;
+  column-gap: 55px;
+  row-gap: 20px;
+  justify-content: center;
+  align-items: center;
+  grid-template-columns: repeat(auto-fill, 158px);
+  padding-top: 24px;
+
+  .service-item {
+    border: 1px solid #d1d1d1;
+    width: 158px;
+    height: 40px;
+
+    :hover {
+      cursor: pointer;
+    }
+  }
+
+  img {
+    border: 1px solid #d1d1d1;
+    width: 158px;
+    height: 40px;
+
+    :hover {
+      cursor: pointer;
+    }
+  }
+
+  .service-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
+const ServiceItem = (props) => {
+  const { capability, t, ...rest } = props;
+
+  const capabilityName = capability[0];
+  const capabilityLink = capability[1] ? capability[1] : "";
+
+  const dataProps = {
+    "data-link": capabilityLink,
+    "data-title": capabilityName,
+  };
+
+  return <img {...dataProps} {...rest} alt="" />;
+};
+
+const ThirdPartyDialog = (props) => {
+  const {
+    t,
+    isAdmin,
+    googleConnectItem,
+    boxConnectItem,
+    dropboxConnectItem,
+    sharePointConnectItem,
+    nextCloudConnectItem,
+    ownCloudConnectItem,
+    oneDriveConnectItem,
+    kDriveConnectItem,
+    yandexConnectItem,
+    webDavConnectItem,
+    visible,
+    setThirdPartyDialogVisible,
+    openConnectWindow,
+    getOAuthToken,
+    setConnectDialogVisible,
+    setConnectItem,
+  } = props;
+
+  const onClose = () => {
+    setThirdPartyDialogVisible(false);
+  };
+
+  const showOAuthModal = (token, serviceData) => {
+    this.props.setConnectDialogVisible(true);
+    this.props.setConnectItem({
+      title: serviceData.title,
+      provider_key: serviceData.title,
+      link: serviceData.link,
+      token,
+    });
+  };
+
+  const onShowService = (e) => {
+    const item = e.currentTarget.dataset;
+    const showAccountSetting = !e.currentTarget.dataset.link;
+    if (!showAccountSetting) {
+      let authModal = window.open(
+        "",
+        "Authorization",
+        "height=600, width=1020"
+      );
+      openConnectWindow(item.title, authModal).then((modal) =>
+        getOAuthToken(modal).then((token) => showOAuthModal(token, item))
+      );
+    }
+
+    setConnectDialogVisible(true);
+    setConnectItem(item);
+    setThirdPartyDialogVisible(false);
+  };
+
+  return (
+    <ModalDialog
+      visible={visible}
+      scale={false}
+      displayType="auto"
+      zIndex={310}
+      onClose={onClose}
+    >
+      <ModalDialog.Header>{t("ConnectingAccount")}</ModalDialog.Header>
+      <ModalDialog.Body>
+        <Text as="div">
+          {t("ConnectDescription")}
+          {isAdmin && (
+            <Trans i18nKey="ConnectAdminDescription" ns="Settings">
+              For successful connection enter the necessary data at
+              <Link isHovered href="/settings/integration/third-party-services">
+                this page
+              </Link>
+            </Trans>
+          )}
+        </Text>
+        <StyledServicesBlock>
+          {googleConnectItem && (
+            <ServiceItem
+              capability={googleConnectItem}
+              onClick={onShowService}
+              src="images/services/logo_google-drive.svg"
+            />
+          )}
+
+          {boxConnectItem && (
+            <ServiceItem
+              capability={boxConnectItem}
+              onClick={onShowService}
+              src="images/services/logo_box.svg"
+            />
+          )}
+
+          {dropboxConnectItem && (
+            <ServiceItem
+              capability={dropboxConnectItem}
+              onClick={onShowService}
+              src="images/services/logo_dropbox.svg"
+            />
+          )}
+
+          {sharePointConnectItem && (
+            <ServiceItem
+              capability={sharePointConnectItem}
+              onClick={onShowService}
+              src="images/services/logo_sharepoint.svg"
+            />
+          )}
+
+          {oneDriveConnectItem && (
+            <ServiceItem
+              capability={oneDriveConnectItem}
+              onClick={onShowService}
+              src="images/services/logo_onedrive.svg"
+            />
+          )}
+
+          {sharePointConnectItem && (
+            <ServiceItem
+              capability={sharePointConnectItem}
+              onClick={onShowService}
+              src="images/services/logo_onedrive-for-business.svg"
+            />
+          )}
+
+          {nextCloudConnectItem && (
+            <ServiceItem
+              capability={webDavConnectItem}
+              onClick={onShowService}
+              src="images/services/logo_nextcloud.svg"
+            />
+          )}
+
+          {ownCloudConnectItem && (
+            <ServiceItem
+              capability={webDavConnectItem}
+              onClick={onShowService}
+              src="images/services/logo_owncloud.svg"
+            />
+          )}
+
+          {kDriveConnectItem && (
+            <ServiceItem
+              capability={kDriveConnectItem}
+              onClick={onShowService}
+              src="images/services/logo_kdrive.svg"
+            />
+          )}
+          {yandexConnectItem && (
+            <ServiceItem
+              capability={yandexConnectItem}
+              onClick={onShowService}
+              src="images/services/logo_yandex_ru.svg"
+            />
+          )}
+          {webDavConnectItem && (
+            <Text
+              onClick={onShowService}
+              className="service-item service-text"
+              data-title={webDavConnectItem[0]}
+            >
+              {t("ConnextOtherAccount")}
+            </Text>
+          )}
+        </StyledServicesBlock>
+      </ModalDialog.Body>
+    </ModalDialog>
+  );
+};
+
+export default inject(({ auth, settingsStore, dialogsStore }) => {
+  const {
+    googleConnectItem,
+    boxConnectItem,
+    dropboxConnectItem,
+    oneDriveConnectItem,
+    nextCloudConnectItem,
+    kDriveConnectItem,
+    yandexConnectItem,
+    ownCloudConnectItem,
+    webDavConnectItem,
+    sharePointConnectItem,
+    getOAuthToken,
+    openConnectWindow,
+  } = settingsStore.thirdPartyStore;
+  const {
+    setThirdPartyDialogVisible,
+    thirdPartyDialogVisible: visible,
+    setConnectDialogVisible,
+    setConnectItem,
+  } = dialogsStore;
+
+  return {
+    visible,
+    isAdmin: auth.isAdmin,
+    googleConnectItem,
+    boxConnectItem,
+    dropboxConnectItem,
+    oneDriveConnectItem,
+    nextCloudConnectItem,
+    kDriveConnectItem,
+    yandexConnectItem,
+    ownCloudConnectItem,
+    webDavConnectItem,
+    sharePointConnectItem,
+
+    setConnectDialogVisible,
+    setConnectItem,
+    setThirdPartyDialogVisible,
+    getOAuthToken,
+    openConnectWindow,
+  };
+})(withTranslation("Settings")(observer(ThirdPartyDialog)));

products/ASC.Files/Client/src/components/dialogs/index.js

@@ -5,6 +5,7 @@ import ConvertDialog from "./ConvertDialog";
 import DeleteThirdPartyDialog from "./DeleteThirdPartyDialog";
 import ConnectDialog from "./ConnectDialog";
 import ThirdPartyMoveDialog from "./ThirdPartyMoveDialog";
+import ThirdPartyDialog from "./ThirdPartyDialog";
 
 export {
   EmptyTrashDialog,
@@ -14,4 +15,5 @@ export {
   DeleteThirdPartyDialog,
   ConnectDialog,
   ThirdPartyMoveDialog,
+  ThirdPartyDialog,
 };

products/ASC.Files/Client/src/components/pages/Home/index.js

@@ -24,7 +24,6 @@ import {
 
 import { ConvertDialog } from "../../dialogs";
 import { getFilterByLocation } from "../../../helpers/converters";
-import Panels from "./Panels";
 import MediaViewer from "./MediaViewer";
 import { observer, inject } from "mobx-react";
 
@@ -227,7 +226,6 @@ class PureHome extends React.Component {
           <ConvertDialog visible={convertDialogVisible} />
         )}
 
-        <Panels />
         <MediaViewer />
         <PageLayout
           withBodyScroll

products/ASC.Files/Client/src/components/pages/Settings/Section/Body/ConnectedClouds.js

@@ -1,18 +1,13 @@
 import React from "react";
 import styled from "styled-components";
-
-import ModalDialog from "@appserver/components/modal-dialog";
 import Button from "@appserver/components/button";
 import Text from "@appserver/components/text";
 import Link from "@appserver/components/link";
 import Box from "@appserver/components/box";
 import Row from "@appserver/components/row";
 import RowContainer from "@appserver/components/row-container";
-
 import { withTranslation } from "react-i18next";
 import EmptyFolderContainer from "../../../Home/Section/Body/EmptyContainer/EmptyContainer";
-import { Trans } from "react-i18next";
-import { DeleteThirdPartyDialog, ConnectDialog } from "../../../../dialogs";
 import BoxIcon from "../../../../../../public/images/icon_box.react.svg";
 import DropBoxIcon from "../../../../../../public/images/icon_dropbox.react.svg";
 import GoogleDriveIcon from "../../../../../../public/images/icon_google_drive.react.svg";
@@ -26,56 +21,6 @@ import YandexDiskIcon from "../../../../../../public/images/icon_yandex_disk.rea
 import commonIconsStyles from "@appserver/components/utils/common-icons-style";
 import { inject, observer } from "mobx-react";
 
-const StyledServicesBlock = styled.div`
-  display: grid;
-  column-gap: 55px;
-  row-gap: 20px;
-  justify-content: center;
-  align-items: center;
-  grid-template-columns: repeat(auto-fill, 158px);
-  padding-top: 24px;
-
-  .service-item {
-    border: 1px solid #d1d1d1;
-    width: 158px;
-    height: 40px;
-
-    :hover {
-      cursor: pointer;
-    }
-  }
-
-  img {
-    border: 1px solid #d1d1d1;
-    width: 158px;
-    height: 40px;
-
-    :hover {
-      cursor: pointer;
-    }
-  }
-
-  .service-text {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-`;
-
-const ServiceItem = (props) => {
-  const { capability, t, ...rest } = props;
-
-  const capabilityName = capability[0];
-  const capabilityLink = capability[1] ? capability[1] : "";
-
-  const dataProps = {
-    "data-link": capabilityLink,
-    "data-title": capabilityName,
-  };
-
-  return <img {...dataProps} {...rest} alt="" />;
-};
-
 const StyledBoxIcon = styled(BoxIcon)`
   ${commonIconsStyles}
 `;
@@ -106,111 +51,35 @@ const StyledWebDavIcon = styled(WebDavIcon)`
 const StyledYandexDiskIcon = styled(YandexDiskIcon)`
   ${commonIconsStyles}
 `;
+
+const linkStyles = {
+  isHovered: true,
+  type: "action",
+  fontWeight: "600",
+  color: "#555f65",
+  className: "empty-folder_link",
+  display: "flex",
+};
+
 class ConnectClouds extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      showThirdPartyDialog: props.showThirdPartyPanel,
-      showAccountSettingDialog: !!props.connectItem,
-      showDeleteDialog: false,
       loginValue: "",
       passwordValue: "",
       folderNameValue: "",
-      selectedServiceData: props.connectItem,
-      removeItem: null,
     };
   }
 
-  componentDidUpdate(prevProps) {
-    const visible = !!this.props.connectItem;
-    const prevVisible = !!prevProps.connectItem;
-
-    if (this.props.showThirdPartyPanel !== prevProps.showThirdPartyPanel) {
-      this.props.showThirdPartyPanel &&
-        this.setState({
-          showThirdPartyDialog: true,
-        });
-    }
-
-    if (visible !== prevVisible) {
-      visible &&
-        this.setState({
-          showAccountSettingDialog: true,
-          selectedServiceData: this.props.connectItem,
-        });
-    }
-  }
-
-  showOAuthModal = (token, serviceData) => {
-    this.setState({
-      showAccountSettingDialog: true,
-      selectedServiceData: {
-        title: serviceData.title,
-        provider_key: serviceData.title,
-        link: serviceData.link,
-        token,
-      },
-    });
-  };
-
-  onShowService = (e) => {
-    console.log("onShowService", e.currentTarget.dataset);
-    const selectedServiceData = e.currentTarget.dataset;
-    const showAccountSettingDialog = !e.currentTarget.dataset.link;
-    if (!showAccountSettingDialog) {
-      let authModal = window.open(
-        "",
-        "Authorization",
-        "height=600, width=1020"
-      );
-      this.props
-        .openConnectWindow(selectedServiceData.title, authModal)
-        .then((modal) =>
-          this.props
-            .getOAuthToken(modal)
-            .then((token) => this.showOAuthModal(token, selectedServiceData))
-        );
-    }
-
-    this.setState({
-      showThirdPartyDialog: !this.state.showThirdPartyDialog,
-      showAccountSettingDialog,
-      selectedServiceData,
-    });
-  };
-
   onShowThirdPartyDialog = () => {
-    this.setState(
+    this.props.setThirdPartyDialogVisible(true);
-      { showThirdPartyDialog: !this.state.showThirdPartyDialog },
-      () =>
-        this.props.showThirdPartyPanel &&
-        this.props.setShowThirdPartyPanel(false)
-    );
-  };
-
-  onShowAccountSettingDialog = () => {
-    this.setState(
-      {
-        showAccountSettingDialog: !this.state.showAccountSettingDialog,
-        selectedServiceData: null,
-      },
-      () => this.props.connectItem && this.props.setConnectItem(null)
-    );
   };
 
   onDeleteThirdParty = (e) => {
     const { id, title } = e.currentTarget.dataset;
-    const removeItem = { id, title };
+    this.props.setDeleteThirdPartyDialogVisible(true);
-
+    this.props.setRemoveItem({ id, title });
-    this.setState({
-      showDeleteDialog: !this.state.showDeleteDialog,
-      removeItem,
-    });
-  };
-
-  onShowDeleteDialog = () => {
-    this.setState({ showDeleteDialog: !this.state.showDeleteDialog });
   };
 
   onChangeThirdPartyInfo = (e) => {
@@ -222,14 +91,16 @@ class ConnectClouds extends React.Component {
 
     const { corporate, provider_id, customer_title } = providerItem;
 
-    const selectedServiceData = {
+    const item = {
       title: capabilitiesItem ? capabilitiesItem[0] : customer_title,
       link: capabilitiesItem ? capabilitiesItem[1] : " ",
       corporate: corporate,
       provider_id: provider_id,
       provider_key: key,
     };
-    this.setState({ selectedServiceData, showAccountSettingDialog: true });
+
+    this.props.setConnectItem(item);
+    this.props.setConnectDialogVisible(true);
   };
 
   getThirdPartyIcon = (iconName) => {
@@ -248,7 +119,6 @@ class ConnectClouds extends React.Component {
         return <StyledKDriveIcon size="big" />;
       case "Yandex":
         return <StyledYandexDiskIcon size="big" />;
-      /*--------------------------------------------*/
       case "OwnCloud":
         return <StyledOwnCloudIcon size="big" />;
       case "NextCloud":
@@ -285,37 +155,7 @@ class ConnectClouds extends React.Component {
   };
 
   render() {
-    const {
+    const { t, providers } = this.props;
-      showThirdPartyDialog,
-      showAccountSettingDialog,
-      showDeleteDialog,
-      selectedServiceData,
-      removeItem,
-    } = this.state;
-    const {
-      t,
-      providers,
-      isAdmin,
-      googleConnectItem,
-      boxConnectItem,
-      dropboxConnectItem,
-      sharePointConnectItem,
-      oneDriveConnectItem,
-      nextCloudConnectItem,
-      ownCloudConnectItem,
-      kDriveConnectItem,
-      yandexConnectItem,
-      webDavConnectItem,
-    } = this.props;
-
-    const linkStyles = {
-      isHovered: true,
-      type: "action",
-      fontWeight: "600",
-      color: "#555f65",
-      className: "empty-folder_link",
-      display: "flex",
-    };
 
     const buttons = (
       <div className="empty-folder_container-links empty-connect_container-links">
@@ -411,192 +251,38 @@ class ConnectClouds extends React.Component {
             buttons={buttons}
           />
         )}
-
-        {showThirdPartyDialog && (
-          <ModalDialog
-            visible={showThirdPartyDialog}
-            scale={false}
-            displayType="auto"
-            zIndex={310}
-            onClose={this.onShowThirdPartyDialog}
-          >
-            <ModalDialog.Header>{t("ConnectingAccount")}</ModalDialog.Header>
-            <ModalDialog.Body>
-              <Text as="div">
-                {t("ConnectDescription")}
-                {isAdmin && (
-                  <Trans i18nKey="ConnectAdminDescription" ns="Settings">
-                    For successful connection enter the necessary data at
-                    <Link
-                      isHovered
-                      href="/settings/integration/third-party-services"
-                    >
-                      this page
-                    </Link>
-                  </Trans>
-                )}
-              </Text>
-              <StyledServicesBlock>
-                {googleConnectItem && (
-                  <ServiceItem
-                    capability={googleConnectItem}
-                    onClick={this.onShowService}
-                    src="images/services/logo_google-drive.svg"
-                  />
-                )}
-
-                {boxConnectItem && (
-                  <ServiceItem
-                    capability={boxConnectItem}
-                    onClick={this.onShowService}
-                    src="images/services/logo_box.svg"
-                  />
-                )}
-
-                {dropboxConnectItem && (
-                  <ServiceItem
-                    capability={dropboxConnectItem}
-                    onClick={this.onShowService}
-                    src="images/services/logo_dropbox.svg"
-                  />
-                )}
-
-                {sharePointConnectItem && (
-                  <ServiceItem
-                    capability={sharePointConnectItem}
-                    onClick={this.onShowService}
-                    src="images/services/logo_sharepoint.svg"
-                  />
-                )}
-
-                {oneDriveConnectItem && (
-                  <ServiceItem
-                    capability={oneDriveConnectItem}
-                    onClick={this.onShowService}
-                    src="images/services/logo_onedrive.svg"
-                  />
-                )}
-
-                {sharePointConnectItem && (
-                  <ServiceItem
-                    capability={sharePointConnectItem}
-                    onClick={this.onShowService}
-                    src="images/services/logo_onedrive-for-business.svg"
-                  />
-                )}
-
-                {nextCloudConnectItem && (
-                  <ServiceItem
-                    capability={webDavConnectItem}
-                    onClick={this.onShowService}
-                    src="images/services/logo_nextcloud.svg"
-                  />
-                )}
-
-                {ownCloudConnectItem && (
-                  <ServiceItem
-                    capability={webDavConnectItem}
-                    onClick={this.onShowService}
-                    src="images/services/logo_owncloud.svg"
-                  />
-                )}
-
-                {kDriveConnectItem && (
-                  <ServiceItem
-                    capability={kDriveConnectItem}
-                    onClick={this.onShowService}
-                    src="images/services/logo_kdrive.svg"
-                  />
-                )}
-                {yandexConnectItem && (
-                  <ServiceItem
-                    capability={yandexConnectItem}
-                    onClick={this.onShowService}
-                    src="images/services/logo_yandex_ru.svg"
-                  />
-                )}
-                {webDavConnectItem && (
-                  <Text
-                    onClick={this.onShowService}
-                    className="service-item service-text"
-                    data-title={webDavConnectItem[0]}
-                  >
-                    {t("ConnextOtherAccount")}
-                  </Text>
-                )}
-              </StyledServicesBlock>
-            </ModalDialog.Body>
-          </ModalDialog>
-        )}
-        {showAccountSettingDialog && (
-          <ConnectDialog
-            visible={showAccountSettingDialog}
-            onClose={this.onShowAccountSettingDialog}
-            item={selectedServiceData}
-          />
-        )}
-
-        {showDeleteDialog && (
-          <DeleteThirdPartyDialog
-            onClose={this.onShowDeleteDialog}
-            visible={showDeleteDialog}
-            removeItem={removeItem}
-          />
-        )}
       </>
     );
   }
 }
 
 export default inject(
-  ({ auth, filesStore, settingsStore, treeFoldersStore }) => {
+  ({ filesStore, settingsStore, treeFoldersStore, dialogsStore }) => {
-    const {
+    const { providers, capabilities } = settingsStore.thirdPartyStore;
-      providers,
-      connectItem,
-      capabilities,
-      setConnectItem,
-      showThirdPartyPanel,
-      setShowThirdPartyPanel,
-      googleConnectItem,
-      boxConnectItem,
-      dropboxConnectItem,
-      oneDriveConnectItem,
-      nextCloudConnectItem,
-      kDriveConnectItem,
-      yandexConnectItem,
-      ownCloudConnectItem,
-      webDavConnectItem,
-      getOAuthToken,
-      openConnectWindow,
-    } = settingsStore.thirdPartyStore;
     const { fetchFiles, filter } = filesStore;
     const { setSelectedNode, myFolder, commonFolder } = treeFoldersStore;
+    const {
+      setConnectItem,
+      setThirdPartyDialogVisible,
+      setDeleteThirdPartyDialogVisible,
+      setRemoveItem,
+      setConnectDialogVisible,
+    } = dialogsStore;
 
     return {
-      isAdmin: auth.isAdmin,
       filter,
       providers,
-      showThirdPartyPanel,
-      connectItem,
       capabilities,
-      googleConnectItem,
-      boxConnectItem,
-      dropboxConnectItem,
-      oneDriveConnectItem,
-      nextCloudConnectItem,
-      kDriveConnectItem,
-      yandexConnectItem,
-      ownCloudConnectItem,
-      webDavConnectItem,
       myDirectoryFolders: myFolder && myFolder.folders,
       commonDirectoryFolders: commonFolder && commonFolder.folders,
 
       fetchFiles,
       setSelectedNode,
+      setThirdPartyDialogVisible,
+      setConnectDialogVisible,
       setConnectItem,
-      setShowThirdPartyPanel,
+      setDeleteThirdPartyDialogVisible,
-      getOAuthToken,
+      setRemoveItem,
-      openConnectWindow,
     };
   }
 )(withTranslation("Settings")(observer(ConnectClouds)));

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

@@ -11,9 +11,10 @@ class DialogsStore {
   deleteDialogVisible = false;
   downloadDialogVisible = false;
   emptyTrashDialogVisible = false;
+  thirdPartyDialogVisible = false;
 
-  connectItem = null;
   removeItem = null;
+  connectItem = null;
   shareItem = null;
 
   constructor() {
@@ -39,11 +40,8 @@ class DialogsStore {
 
   setConnectDialogVisible = (connectDialogVisible) => {
     if (!connectDialogVisible) this.setConnectItem(null);
-    this.connectDialogVisible = connectDialogVisible;
-  };
 
-  setConnectItem = (connectItem) => {
+    this.connectDialogVisible = connectDialogVisible;
-    this.connectItem = connectItem;
   };
 
   setRemoveItem = (removeItem) => {
@@ -73,6 +71,14 @@ class DialogsStore {
   setShareItem = (shareItem) => {
     this.shareItem = shareItem;
   };
+
+  setConnectItem = (connectItem) => {
+    this.connectItem = connectItem;
+  };
+
+  setThirdPartyDialogVisible = (thirdPartyDialogVisible) => {
+    this.thirdPartyDialogVisible = thirdPartyDialogVisible;
+  };
 }
 
 export default new DialogsStore();

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

@@ -4,14 +4,11 @@ import api from "@appserver/common/api";
 class ThirdPartyStore {
   capabilities = [];
   providers = [];
-  connectItem = null;
-  showThirdPartyPanel = false; //TODO: move to panel?
 
   constructor() {
     makeObservable(this, {
       capabilities: observable,
       providers: observable,
-      connectItem: observable,
 
       googleConnectItem: computed,
       boxConnectItem: computed,
@@ -28,8 +25,6 @@ class ThirdPartyStore {
       setThirdPartyCapabilities: action,
       fetchThirdPartyProviders: action,
       deleteThirdParty: action,
-      setConnectItem: action,
-      setShowThirdPartyPanel: action,
       getOAuthToken: action,
       openConnectWindow: action,
     });
@@ -45,14 +40,6 @@ class ThirdPartyStore {
 
   deleteThirdParty = (id) => api.files.deleteThirdParty(id);
 
-  setConnectItem = (connectItem) => {
-    this.connectItem = connectItem;
-  };
-
-  setShowThirdPartyPanel = (showThirdPartyPanel) => {
-    this.showThirdPartyPanel = showThirdPartyPanel;
-  };
-
   fetchThirdPartyProviders = async () => {
     this.providers = await api.files.getThirdPartyList();
   };