new entities in dialogStore and several new props to pass for thirdparty connection

packages/client/src/components/GlobalEvents/CreateRoomEvent.js

@@ -15,7 +15,14 @@ const CreateRoomEvent = ({
   addLogoToRoom,
   fetchTags,
 
-  providers,
+  connectItems,
+  connectDialogVisible,
+  setConnectDialogVisible,
+  setRoomCreation,
+  saveThirdpartyResponse,
+  openConnectWindow,
+  setConnectItem,
+  getOAuthToken,
 
   currrentFolderId,
   updateCurrentFolder,
@@ -79,23 +86,32 @@ const CreateRoomEvent = ({
   return (
     <CreateRoomDialog
       t={t}
-      visible={visible}
+      visible={visible && !connectDialogVisible}
       onClose={onClose}
       onCreate={onCreate}
       fetchedTags={fetchedTags}
       isLoading={isLoading}
-      providers={providers}
+      connectItems={connectItems}
+      connectDialogVisible={connectDialogVisible}
+      setConnectDialogVisible={setConnectDialogVisible}
+      setRoomCreation={setRoomCreation}
+      saveThirdpartyResponse={saveThirdpartyResponse}
+      openConnectWindow={openConnectWindow}
+      setConnectItem={setConnectItem}
+      getOAuthToken={getOAuthToken}
     />
   );
 };
 
 export default inject(
   ({
+    auth,
     filesStore,
     tagsStore,
     filesActionsStore,
     selectedFolderStore,
     settingsStore,
+    dialogsStore,
   }) => {
     const {
       createRoom,
@@ -109,7 +125,38 @@ export default inject(
     const { id: currrentFolderId } = selectedFolderStore;
     const { updateCurrentFolder } = filesActionsStore;
 
-    const { providers } = settingsStore.thirdPartyStore;
+    const thirdPartyStore = settingsStore.thirdPartyStore;
+
+    const { openConnectWindow } = settingsStore.thirdPartyStore;
+
+    const connectItems = [
+      thirdPartyStore.googleConnectItem,
+      thirdPartyStore.boxConnectItem,
+      thirdPartyStore.dropboxConnectItem,
+      thirdPartyStore.oneDriveConnectItem,
+      thirdPartyStore.nextCloudConnectItem,
+      thirdPartyStore.kDriveConnectItem,
+      thirdPartyStore.yandexConnectItem,
+      thirdPartyStore.ownCloudConnectItem,
+      thirdPartyStore.webDavConnectItem,
+      thirdPartyStore.sharePointConnectItem,
+    ].map((item) => ({
+      isAvialable: !!item,
+      id: item[0],
+      providerName: item[0],
+      isOauth: item.length > 1,
+      oauthHref: item.length > 1 ? item[1] : "",
+    }));
+
+    const { getOAuthToken } = auth.settingsStore;
+
+    const {
+      setConnectItem,
+      connectDialogVisible,
+      setConnectDialogVisible,
+      setRoomCreation,
+      saveThirdpartyResponse,
+    } = dialogsStore;
 
     return {
       createRoom,
@@ -120,7 +167,15 @@ export default inject(
       uploadRoomLogo,
       addLogoToRoom,
 
-      providers,
+      setConnectItem,
+      connectDialogVisible,
+      setConnectDialogVisible,
+      setRoomCreation,
+      saveThirdpartyResponse,
+      saveThirdpartyResponse,
+      openConnectWindow,
+      connectItems,
+      getOAuthToken,
 
       currrentFolderId,
       updateCurrentFolder,

packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import ModalDialog from "@docspace/components/modal-dialog";
 import Button from "@docspace/components/button";
@@ -8,7 +8,6 @@ import TagHandler from "./handlers/tagHandler";
 
 import SetRoomParams from "./sub-components/SetRoomParams";
 import RoomTypeList from "./sub-components/RoomTypeList";
-import { roomTypes } from "./data";
 import IconButton from "@docspace/components/icon-button";
 
 const StyledModalDialog = styled(ModalDialog)`
@@ -18,6 +17,14 @@ const StyledModalDialog = styled(ModalDialog)`
     flex-direction: row;
     gap: 12px;
   }
+
+  ${(props) =>
+    props.isOauthWindowOpen &&
+    css`
+      #modal-dialog {
+        display: none;
+      }
+    `}
 `;
 
 const CreateRoomDialog = ({
@@ -26,12 +33,20 @@ const CreateRoomDialog = ({
   onClose,
   onCreate,
 
-  providers,
+  connectItems,
+  setConnectDialogVisible,
+  setRoomCreation,
+  saveThirdpartyResponse,
+  openConnectWindow,
+  setConnectItem,
+  getOAuthToken,
+
   fetchedTags,
   isLoading,
   folderFormValidation,
 }) => {
   const [isScrollLocked, setIsScrollLocked] = useState(false);
+  const [isOauthWindowOpen, setIsOauthWindowOpen] = useState(false);
 
   const [roomParams, setRoomParams] = useState({
     title: "",
@@ -39,7 +54,11 @@ const CreateRoomDialog = ({
     tags: [],
     isPrivate: false,
     isThirdparty: false,
-    storageLocation: null,
+    storageLocation: {
+      isConnected: false,
+      provider: null,
+      storageFolderPath: "",
+    },
     rememberThirdpartyStorage: false,
     icon: {
       uploadedFile: null,
@@ -89,6 +108,7 @@ const CreateRoomDialog = ({
       onClose={onClose}
       isScrollLocked={isScrollLocked}
       withFooterBorder
+      isOauthWindowOpen={isOauthWindowOpen}
     >
       <ModalDialog.Header>
         {isChooseRoomType ? (
@@ -112,12 +132,19 @@ const CreateRoomDialog = ({
         ) : (
           <SetRoomParams
             t={t}
+            setIsOauthWindowOpen={setIsOauthWindowOpen}
             tagHandler={tagHandler}
             roomParams={roomParams}
             setRoomParams={setRoomParams}
             setRoomType={setRoomType}
             setIsScrollLocked={setIsScrollLocked}
-            providers={providers}
+            connectItems={connectItems}
+            setConnectDialogVisible={setConnectDialogVisible}
+            setRoomCreation={setRoomCreation}
+            saveThirdpartyResponse={saveThirdpartyResponse}
+            openConnectWindow={openConnectWindow}
+            setConnectItem={setConnectItem}
+            getOAuthToken={getOAuthToken}
           />
         )}
       </ModalDialog.Body>

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js

@@ -1,16 +1,13 @@
 import React from "react";
 import styled from "styled-components";
+
+import { roomTypes } from "../data";
 import RoomTypeDropdown from "./RoomTypeDropdown";
 import ThirdPartyStorage from "./ThirdPartyStorage";
-
-import TextInput from "@docspace/components/text-input";
-import Label from "@docspace/components/label";
 import TagInput from "./TagInput";
 import RoomType from "./RoomType";
-import { roomTypes } from "../data";
 import IconEditor from "./IconEditor";
 import PermanentSettings from "./PermanentSettings";
-import ToggleParam from "./Params/ToggleParam";
 import InputParam from "./Params/InputParam";
 import IsPrivateParam from "./IsPrivateParam";
 
@@ -25,14 +22,40 @@ const SetRoomParams = ({
   t,
   roomParams,
   setRoomParams,
+  setIsOauthWindowOpen,
   setRoomType,
   tagHandler,
   setIsScrollLocked,
   isEdit,
-  providers,
+  connectItems,
+  setConnectDialogVisible,
+  setRoomCreation,
+  saveThirdpartyResponse,
+  openConnectWindow,
+  setConnectItem,
+  getOAuthToken,
 }) => {
-  const onChangeName = (e) =>
-    setRoomParams({ ...roomParams, title: e.target.value });
+  const onChangeName = (e) => {
+    let value = e.target.value;
+    value = value.replace("/", "");
+    value = value.replace("\\", "");
+
+    const storageFolderPath = roomParams.storageLocation.storageFolderPath;
+    const pathArr = storageFolderPath.split("/");
+    const folderName = pathArr.pop();
+
+    if (roomParams.title === folderName)
+      setRoomParams({
+        ...roomParams,
+        title: value,
+        storageLocation: {
+          ...roomParams.storageLocation,
+          storageFolderPath:
+            pathArr.join("/") + (!!pathArr.length ? "/" : "") + value,
+        },
+      });
+    else setRoomParams({ ...roomParams, title: value });
+  };
 
   const onChangeIsPrivate = () =>
     setRoomParams({ ...roomParams, isPrivate: !roomParams.isPrivate });
@@ -107,7 +130,13 @@ const SetRoomParams = ({
       {!isEdit && (
         <ThirdPartyStorage
           t={t}
-          providers={providers}
+          connectItems={connectItems}
+          setConnectDialogVisible={setConnectDialogVisible}
+          setRoomCreation={setRoomCreation}
+          saveThirdpartyResponse={saveThirdpartyResponse}
+          openConnectWindow={openConnectWindow}
+          setConnectItem={setConnectItem}
+          getOAuthToken={getOAuthToken}
           roomParams={roomParams}
           isThirdparty={roomParams.isThirdparty}
           onChangeIsThirdparty={onChangeIsThirdparty}
@@ -116,6 +145,7 @@ const SetRoomParams = ({
           rememberThirdpartyStorage={roomParams.rememberThirdpartyStorage}
           onChangeRememberThirdpartyStorage={onChangeRememberThirdpartyStorage}
           setIsScrollLocked={setIsScrollLocked}
+          setIsOauthWindowOpen={setIsOauthWindowOpen}
         />
       )}
 

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js

@@ -8,6 +8,7 @@ import ThirpartyComboBox from "./ThirpartyComboBox";
 
 import Toast from "@docspace/components/toast";
 import toastrHelper from "@docspace/client/src/helpers/toastr";
+import FolderInput from "./FolderInput";
 
 const StyledThirdPartyStorage = styled(StyledParam)`
   flex-direction: column;
@@ -16,7 +17,13 @@ const StyledThirdPartyStorage = styled(StyledParam)`
 
 const ThirdPartyStorage = ({
   t,
-  providers,
+  connectItems,
+  setConnectDialogVisible,
+  setRoomCreation,
+  saveThirdpartyResponse,
+  openConnectWindow,
+  setConnectItem,
+  getOAuthToken,
   isThirdparty,
   onChangeIsThirdparty,
   storageLocation,
@@ -24,20 +31,40 @@ const ThirdPartyStorage = ({
   rememberThirdpartyStorage,
   onChangeRememberThirdpartyStorage,
   setIsScrollLocked,
+  setIsOauthWindowOpen,
 }) => {
   const checkForProviders = () => {
-    if (providers.length) onChangeIsThirdparty();
-    else
-      toastrHelper.warning(
-        <div>
-          <div>{t("ThirdPartyStorageNoStorageAlert")}</div>
-          <a href="#">Third-party services</a>
-        </div>,
-        "Alert",
-        5000,
-        true,
-        false
-      );
+    onChangeIsThirdparty();
+    // if (connectItems.length) onChangeIsThirdparty();
+    // else
+    //   toastrHelper.warning(
+    //     <div>
+    //       <div>{t("ThirdPartyStorageNoStorageAlert")}</div>
+    //       <a href="#">Third-party services</a>
+    //     </div>,
+    //     "Alert",
+    //     5000,
+    //     true,
+    //     false
+    //   );
+  };
+
+  const onChangeProvider = (provider) => {
+    setChangeStorageLocation({ ...storageLocation, provider });
+  };
+
+  const onChangeFolderPath = (e) => {
+    setChangeStorageLocation({
+      ...storageLocation,
+      storageFolderPath: e.target.value,
+    });
+  };
+
+  const onChangeIsConnected = (bool) => {
+    setChangeStorageLocation({
+      ...storageLocation,
+      isConnected: bool,
+    });
   };
 
   return (
@@ -63,14 +90,29 @@ const ThirdPartyStorage = ({
       {isThirdparty && (
         <ThirpartyComboBox
           t={t}
-          providers={providers}
+          connectItems={connectItems}
+          setConnectDialogVisible={setConnectDialogVisible}
+          setRoomCreation={setRoomCreation}
+          saveThirdpartyResponse={saveThirdpartyResponse}
+          openConnectWindow={openConnectWindow}
+          setConnectItem={setConnectItem}
+          getOAuthToken={getOAuthToken}
           storageLocation={storageLocation}
-          setChangeStorageLocation={setChangeStorageLocation}
+          onChangeProvider={onChangeProvider}
+          onChangeIsConnected={onChangeIsConnected}
           setIsScrollLocked={setIsScrollLocked}
+          setIsOauthWindowOpen={setIsOauthWindowOpen}
         />
       )}
 
-      {isThirdparty && storageLocation && (
+      {isThirdparty && storageLocation.isConnected && (
+        <FolderInput
+          value={storageLocation.storageFolderPath}
+          onChangeFolderPath={onChangeFolderPath}
+        />
+      )}
+
+      {isThirdparty && storageLocation.isConnected && (
         <Checkbox
           className="thirdparty-checkbox"
           label={t("ThirdPartyStorageRememberChoice")}

packages/client/src/store/DialogsStore.js

@@ -24,10 +24,10 @@ class DialogsStore {
   newFilesPanelVisible = false;
   conflictResolveDialogVisible = false;
   convertDialogVisible = false;
-  createRoomDialogVisible = false;
   selectFileDialogVisible = false;
   convertPasswordDialogVisible = false;
   isFolderActions = false;
+  roomCreation = false;
 
   removeItem = null;
   connectItem = null;
@@ -40,6 +40,7 @@ class DialogsStore {
   unsubscribe = null;
   convertItem = null;
   formCreationInfo = null;
+  saveThirdpartyResponse = null;
 
   constructor(
     authStore,
@@ -79,10 +80,18 @@ class DialogsStore {
     this.copyPanelVisible = copyPanelVisible;
   };
 
+  setRoomCreation = (roomCreation) => {
+    this.roomCreation = roomCreation;
+  };
+
+  setSaveThirdpartyResponse = (saveThirdpartyResponse) => {
+    this.saveThirdpartyResponse = saveThirdpartyResponse;
+  };
+
   setConnectDialogVisible = (connectDialogVisible) => {
     if (!connectDialogVisible) this.setConnectItem(null);
-
     this.connectDialogVisible = connectDialogVisible;
+    if (!this.connectDialogVisible) this.setRoomCreation(false);
   };
 
   setRemoveItem = (removeItem) => {
@@ -197,10 +206,6 @@ class DialogsStore {
     this.convertDialogVisible = visible;
   };
 
-  setCreateRoomDialogVisible = (visible) => {
-    this.createRoomDialogVisible = visible;
-  };
-
   setConvertPasswordDialogVisible = (visible) => {
     this.convertPasswordDialogVisible = visible;
   };
@@ -251,7 +256,6 @@ class DialogsStore {
       this.newFilesPanelVisible ||
       this.conflictResolveDialogVisible ||
       this.convertDialogVisible ||
-      this.createRoomDialogVisible ||
       this.selectFileDialogVisible ||
       this.authStore.settingsStore.hotkeyPanelVisible ||
       this.versionHistoryStore.isVisible