From 8d14df231483242b69602379d07b7fa2d4a520d2 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 22 Aug 2022 16:16:50 +0300 Subject: [PATCH] new entities in dialogStore and several new props to pass for thirdparty connection --- .../GlobalEvents/CreateRoomEvent.js | 65 ++++++++++++++-- .../CreateEditRoomDialog/CreateRoomDialog.js | 37 ++++++++-- .../sub-components/SetRoomParams.js | 48 +++++++++--- .../sub-components/ThirdPartyStorage/index.js | 74 +++++++++++++++---- packages/client/src/store/DialogsStore.js | 18 +++-- 5 files changed, 200 insertions(+), 42 deletions(-) diff --git a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js b/packages/client/src/components/GlobalEvents/CreateRoomEvent.js index f27dcb91d4..833ad5490f 100644 --- a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js +++ b/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 ( ); }; 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, diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js index 10be14d569..6e551aa0f8 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js +++ b/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} > {isChooseRoomType ? ( @@ -112,12 +132,19 @@ const CreateRoomDialog = ({ ) : ( )} diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js index 804f1a23cd..5f03319294 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/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 && ( )} diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js index d041ed45b5..7a5a3fe1a0 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js +++ b/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( -
-
{t("ThirdPartyStorageNoStorageAlert")}
- Third-party services -
, - "Alert", - 5000, - true, - false - ); + onChangeIsThirdparty(); + // if (connectItems.length) onChangeIsThirdparty(); + // else + // toastrHelper.warning( + //
+ //
{t("ThirdPartyStorageNoStorageAlert")}
+ // Third-party services + //
, + // "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 && ( )} - {isThirdparty && storageLocation && ( + {isThirdparty && storageLocation.isConnected && ( + + )} + + {isThirdparty && storageLocation.isConnected && ( { + 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