IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Client: added fetch connecting storages mock request

Browse Source
This commit is contained in:
Vladimir Khvan 2024-03-26 13:07:37 +05:00
parent c34e06d6f7
commit fde9e09d0c
4 changed files with 124 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
View File

@ -90,11 +90,33 @@ const StyledDropDown = styled(DropDown)`
}
}
.flex-reverse {
.storage-unavailable {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row-reverse;
.drop-down-item_icon {
svg {
path[fill] {
fill: ${(props) => props.theme.dropDownItem.icon.disableColor};
}
path[stroke] {
stroke: ${(props) => props.theme.dropDownItem.icon.disableColor};
}
circle[fill] {
fill: ${(props) => props.theme.dropDownItem.icon.disableColor};
}
rect[fill] {
fill: ${(props) => props.theme.dropDownItem.icon.disableColor};
}
}
}
color: ${(props) => props.theme.dropDownItem.disableColor};
}
`;

9
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js
View File

@ -165,12 +165,7 @@ const ThirdPartyComboBox = ({
}) => {
const dropdownRef = useRef(null);
const thirdparties = connectItems.map((item) => ({
...item,
title: item.category
? item.category
: ProviderKeyTranslation(item.providerKey, t),
}));
const thirdparties = connectItems;
const [isOpen, setIsOpen] = useState(false);
const [dropdownDirection, setDropdownDirection] = useState("bottom");
@ -317,7 +312,7 @@ const ThirdPartyComboBox = ({
.map((thirdparty) => (
<DropDownItem
id={thirdparty.id}
className={`dropdown-item ${thirdparty.isAvailable ? "" : "flex-reverse"} ${thirdparty.className ?? ""}`}
className={`dropdown-item ${thirdparty.isAvailable ? "" : "storage-unavailable"} ${thirdparty.className ?? ""}`}
label={
thirdparty.title +
(thirdparty.isAvailable

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

@ -24,7 +24,7 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { inject, observer } from "mobx-react";
import styled from "styled-components";
import { Text } from "@docspace/shared/components/text";
@ -75,6 +75,8 @@ const ThirdPartyStorage = ({
roomType,
createNewFolderIsChecked,
onCreateFolderChange,
fetchConnectingStorages,
}) => {
const onChangeIsThirdparty = () => {
if (isDisabled) return;
@ -129,6 +131,10 @@ const ThirdPartyStorage = ({
const isPublicRoom = roomType === RoomsType.PublicRoom;
useEffect(() => {
fetchConnectingStorages();
}, []);
return (
<StyledThirdPartyStorage>
{isPublicRoom && (
@ -201,67 +207,7 @@ export default inject(
const thirdPartyStore = filesSettingsStore.thirdPartyStore;
const connectItems = [
{
name: thirdPartyStore.googleConnectItem || ["GoogleDrive"],
isAvailable: !!thirdPartyStore.googleConnectItem,
},
{
name: thirdPartyStore.boxConnectItem || ["Box"],
isAvailable: !!thirdPartyStore.boxConnectItem,
},
{
name: thirdPartyStore.dropboxConnectItem || ["DropboxV2"],
isAvailable: !!thirdPartyStore.dropboxConnectItem,
},
{
name: thirdPartyStore.oneDriveConnectItem || ["OneDrive"],
isAvailable: !!thirdPartyStore.oneDriveConnectItem,
},
{
name: (thirdPartyStore.nextCloudConnectItem && [
...thirdPartyStore.nextCloudConnectItem,
"Nextcloud",
]) || ["NextCloud"],
isAvailable: !!thirdPartyStore.nextCloudConnectItem,
},
{
name: thirdPartyStore.kDriveConnectItem || ["kDrive"],
isAvailable: !!thirdPartyStore.kDriveConnectItem,
},
{
name: thirdPartyStore.yandexConnectItem || ["Yandex"],
isAvailable: !!thirdPartyStore.yandexConnectItem,
},
{
name: (thirdPartyStore.ownCloudConnectItem && [
...thirdPartyStore.ownCloudConnectItem,
"ownCloud",
]) || ["ownCloud"],
isAvailable: !!thirdPartyStore.ownCloudConnectItem,
},
{
name: thirdPartyStore.webDavConnectItem || ["WebDav"],
isAvailable: !!thirdPartyStore.webDavConnectItem,
},
{
name: thirdPartyStore.sharePointConnectItem || ["SharePoint"],
isAvailable: !!thirdPartyStore.sharePointConnectItem,
},
]
.map(({ name, isAvailable }) => ({
id: name[0],
className: `storage_${name[0].toLowerCase()}`,
providerKey: name[0],
isOauth: name.length > 1 && name[0] !== "WebDav",
oauthHref: name.length > 1 && name[0] !== "WebDav" ? name[1] : "",
...(name[0] === "WebDav" && {
category: name[name.length - 1],
}),
isAvailable,
}))
.filter((item) => !!item);
const connectItems = thirdPartyStore.connectingStorages;
const { isRoomAdmin } = authStore;
@ -282,6 +228,7 @@ export default inject(
getOAuthToken,
currentColorScheme,
isRoomAdmin,
fetchConnectingStorages: thirdPartyStore.fetchConnectingStorages,
};
},
)(observer(ThirdPartyStorage));

90
packages/client/src/store/ThirdPartyStore.js
View File

@ -51,6 +51,7 @@ import i18n from "../helpers/i18n";
class ThirdPartyStore {
capabilities = null;
providers = [];
connectingStorages = [];
constructor() {
makeAutoObservable(this);
@ -71,6 +72,95 @@ class ThirdPartyStore {
this.setThirdPartyProviders(list);
};
fetchConnectingStorages = async () => {
const storages = await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(
[
{
id: "WebDav",
className: "storage_webdav",
providerKey: "WebDav",
isOauth: false,
oauthHref: "",
category: "WebDav",
isAvailable: true,
title: "WebDav",
},
{
id: "WebDav",
className: "storage_webdav",
providerKey: "WebDav",
isOauth: false,
oauthHref: "",
category: "ownCloud",
isAvailable: true,
title: "ownCloud",
},
{
id: "kDrive",
className: "storage_kdrive",
providerKey: "kDrive",
isOauth: false,
oauthHref: "",
isAvailable: true,
title: "kDrive",
},
{
id: "WebDav",
className: "storage_webdav",
providerKey: "WebDav",
isOauth: false,
oauthHref: "",
category: "Nextcloud",
isAvailable: true,
title: "Nextcloud",
},
{
id: "GoogleDrive",
className: "storage_googledrive",
providerKey: "GoogleDrive",
isOauth: false,
oauthHref: "",
isAvailable: false,
title: "Google Drive",
},
{
id: "Box",
className: "storage_box",
providerKey: "Box",
isOauth: false,
oauthHref: "",
isAvailable: false,
title: "Box",
},
{
id: "DropboxV2",
className: "storage_dropboxv2",
providerKey: "DropboxV2",
isOauth: false,
oauthHref: "",
isAvailable: false,
title: "Dropbox",
},
{
id: "OneDrive",
className: "storage_onedrive",
providerKey: "OneDrive",
isOauth: false,
oauthHref: "",
isAvailable: false,
title: "OneDrive",
},
],
2000,
);
});
});
this.connectingStorages = storages;
};
saveThirdParty = (
url,
login,