Web: Files: fixed third party dialogs

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

@@ -98,11 +98,12 @@ const PureThirdPartyListContainer = ({
   nextCloudConnectItem,
   webDavConnectItem,
   setConnectItem,
-  setThirdPartyDialogVisible,
+  setConnectDialogVisible,
   setSelectedNode,
   setSelectedFolder,
   getOAuthToken,
   openConnectWindow,
+  setThirdPartyDialogVisible,
   history,
 }) => {
   const redirectAction = () => {
@@ -125,7 +126,8 @@ const PureThirdPartyListContainer = ({
         "Authorization",
         "height=600, width=1020"
       );
-      openConnectWindow(data.title, authModal).then((modal) =>
+      openConnectWindow(data.title, authModal).then((modal) => {
+        redirectAction();
         getOAuthToken(modal).then((token) => {
           const serviceData = {
             title: data.title,
@@ -134,17 +136,17 @@ const PureThirdPartyListContainer = ({
             token,
           };
           setConnectItem(serviceData);
-        })
-      );
+          setConnectDialogVisible(true);
+        });
+      });
     } else {
       setConnectItem(data);
+      setConnectDialogVisible(true);
+      redirectAction();
     }
-
-    onShowConnectPanel();
   };
 
   const onShowConnectPanel = () => {
-    //setThirdPartyDialogVisible((prev) => !prev); TODO:
     setThirdPartyDialogVisible(true);
     redirectAction();
   };
@@ -233,7 +235,11 @@ export default inject(
       openConnectWindow,
     } = settingsStore.thirdPartyStore;
 
-    const { setConnectItem, setThirdPartyDialogVisible } = dialogsStore;
+    const {
+      setConnectItem,
+      setConnectDialogVisible,
+      setThirdPartyDialogVisible,
+    } = dialogsStore;
 
     return {
       googleConnectItem,
@@ -247,9 +253,10 @@ export default inject(
       setSelectedFolder,
       setSelectedNode,
       setConnectItem,
-      setThirdPartyDialogVisible,
+      setConnectDialogVisible,
       getOAuthToken,
       openConnectWindow,
+      setThirdPartyDialogVisible,
     };
   }
 )(observer(ThirdPartyList));

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
-import toastr from "@appserver/components/toast";
+import toastr from "studio/toastr";
 import Button from "@appserver/components/button";
 import ModalDialog from "@appserver/components/modal-dialog";
 import Checkbox from "@appserver/components/checkbox";
@@ -155,6 +155,7 @@ const PureConnectDialogContainer = (props) => {
       })
       .catch((err) => {
         toastr.error(err);
+        onClose();
         setIsLoading(false);
       });
   }, [

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

@@ -84,16 +84,17 @@ const ThirdPartyDialog = (props) => {
   };
 
   const showOAuthModal = (token, serviceData) => {
-    setConnectDialogVisible(true);
     setConnectItem({
       title: serviceData.title,
       provider_key: serviceData.title,
       link: serviceData.link,
       token,
     });
+    setConnectDialogVisible(true);
   };
 
   const onShowService = (e) => {
+    setThirdPartyDialogVisible(false);
     const item = e.currentTarget.dataset;
     const showAccountSetting = !e.currentTarget.dataset.link;
     if (!showAccountSetting) {
@@ -103,12 +104,14 @@ const ThirdPartyDialog = (props) => {
         "height=600, width=1020"
       );
       openConnectWindow(item.title, authModal).then((modal) =>
-        getOAuthToken(modal).then((token) => showOAuthModal(token, item))
+        getOAuthToken(modal).then((token) => {
+          showOAuthModal(token, item);
+          setConnectItem(item);
+          setConnectDialogVisible(true);
+        })
       );
     }
 
-    setConnectDialogVisible(true);
-    setConnectItem(item);
     setThirdPartyDialogVisible(false);
   };
 

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

@@ -157,22 +157,6 @@ class ConnectClouds extends React.Component {
   render() {
     const { t, providers } = this.props;
 
-    const buttons = (
-      <div className="empty-folder_container-links empty-connect_container-links">
-        <img
-          className="empty-folder_container_plus-image"
-          src="images/plus.svg"
-          onClick={this.onShowThirdPartyDialog}
-          alt="plus_icon"
-        />
-        <Box className="flex-wrapper_container">
-          <Link onClick={this.onShowThirdPartyDialog} {...linkStyles}>
-            {t("AddAccount")},
-          </Link>
-        </Box>
-      </div>
-    );
-
     return (
       <>
         {!!providers.length ? (
@@ -249,7 +233,21 @@ class ConnectClouds extends React.Component {
             headerText={t("ConnectAccounts")}
             subheadingText={t("ConnectAccountsSubTitle")}
             imageSrc="images/empty_screen.png"
-            buttons={buttons}
+            buttons={
+              <div className="empty-folder_container-links empty-connect_container-links">
+                <img
+                  className="empty-folder_container_plus-image"
+                  src="images/plus.svg"
+                  onClick={this.onShowThirdPartyDialog}
+                  alt="plus_icon"
+                />
+                <Box className="flex-wrapper_container">
+                  <Link onClick={this.onShowThirdPartyDialog} {...linkStyles}>
+                    {t("AddAccount")},
+                  </Link>
+                </Box>
+              </div>
+            }
           />
         )}
       </>