From 91f7292676ef04618ba52ec5c76c2ac817bc296c Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 20 Aug 2024 15:06:31 +0300 Subject: [PATCH] Web: Files: Fixed ThirdPartyComboBox --- .../ThirdPartyStorage/ThirdPartyComboBox.js | 127 +++++++++++++----- .../sub-components/ThirdPartyStorage/index.js | 5 +- packages/client/src/helpers/constants.js | 11 ++ .../data-management/backup/StyledBackup.js | 26 ++++ .../DirectThirdPartyConnection.js | 72 ++++++++-- packages/client/src/store/BackupStore.js | 24 +++- packages/client/src/store/index.js | 2 +- .../shared/components/combobox/ComboBox.tsx | 2 + .../components/combobox/Combobox.types.ts | 2 + .../combobox/sub-components/ComboButton.tsx | 3 +- public/locales/en/Common.json | 3 +- 11 files changed, 224 insertions(+), 53 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js index 96c6867649..8506def57e 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js @@ -24,18 +24,23 @@ // 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, { useEffect, useState, useRef } from "react"; +import { useEffect, useState } from "react"; import styled from "styled-components"; - +import { ReactSVG } from "react-svg"; import { isMobileOnly, isMobile } from "react-device-detect"; import { Button } from "@docspace/shared/components/button"; +import { DropDownItem } from "@docspace/shared/components/drop-down-item"; +import { Text } from "@docspace/shared/components/text"; +import { Tooltip } from "@docspace/shared/components/tooltip"; import { connectedCloudsTypeTitleTranslation as ProviderKeyTranslation } from "@docspace/client/src/helpers/filesUtils"; import { Base } from "@docspace/shared/themes"; import { toastr } from "@docspace/shared/components/toast"; import { ComboBox } from "@docspace/shared/components/combobox"; import ExternalLinkReactSvgUrl from "PUBLIC_DIR/images/external.link.react.svg?url"; +import { ThirdPartyServicesUrlName } from "../../../../../helpers/constants"; +import { isDesktop } from "@docspace/shared/utils"; const StyledStorageLocation = styled.div` display: flex; @@ -91,16 +96,29 @@ const StyledStorageLocation = styled.div` StyledStorageLocation.defaultProps = { theme: Base }; -const services = { - GoogleDrive: "google", - Box: "box", - Dropbox: "dropbox", - OneDrive: "skydrive", - Nextcloud: "nextcloud", - kDrive: "kdrive", - ownCloud: "owncloud", - WebDav: "webdav", -}; +const StyledComboBoxItem = styled.div` + display: flex; + + .drop-down-item_text { + color: ${({ theme, isDisabled }) => + isDisabled ? theme.dropDownItem.disableColor : theme.dropDownItem.color}; + } + .drop-down-item_icon { + display: flex; + align-items: center; + + div { + display: flex; + } + + margin-inline-start: auto; + + svg { + min-height: 16px; + min-width: 16px; + } + } +`; const ThirdPartyComboBox = ({ t, @@ -124,15 +142,16 @@ const ThirdPartyComboBox = ({ isDisabled, setIsScrollLocked, + isAdmin, }) => { - const deafultSelectedItem = { + const defaultSelectedItem = { key: "length", label: storageLocation?.provider?.title || t("ThirdPartyStorageComboBoxPlaceholder"), }; - const [selectedItem, setSelectedItem] = useState(deafultSelectedItem); + const [selectedItem, setSelectedItem] = useState(defaultSelectedItem); const thirdparties = connectItems.map((item) => ({ ...item, @@ -142,7 +161,7 @@ const ThirdPartyComboBox = ({ const setStorageLocaiton = (thirparty, isConnected) => { if (!isConnected) { window.open( - `/portal-settings/integration/third-party-services?service=${services[thirparty.id]}`, + `/portal-settings/integration/third-party-services?service=${ThirdPartyServicesUrlName[thirparty.id]}`, "_blank", ); return; @@ -207,35 +226,79 @@ const ThirdPartyComboBox = ({ setSaveThirdpartyResponse(null); }, [saveThirdpartyResponse]); - const options = thirdparties - .sort((storage) => (storage.isConnected ? -1 : 1)) - .map((item) => ({ - label: - item.title + (item.isConnected ? "" : ` (${t("ActivationRequired")})`), - title: item.title, - key: item.id, - icon: item.isConnected ? undefined : ExternalLinkReactSvgUrl, - className: item.isConnected ? "" : "storage-unavailable", - })); + const onSelect = (event) => { + const data = event.currentTarget.dataset; - const onSelect = (elem) => { const thirdparty = thirdparties.find((t) => { - return elem.key === t.id; + return t.id === data.thirdPartyId; }); thirdparty && setStorageLocaiton(thirdparty, thirdparty.isConnected); thirdparty.isConnected - ? setSelectedItem(elem) - : setSelectedItem({ ...deafultSelectedItem }); + ? setSelectedItem({ key: thirdparty.id, label: thirdparty.title }) + : setSelectedItem({ ...defaultSelectedItem }); }; + const getTextTooltip = () => { + return ( + + {t("Common:EnableThirdPartyIntegration")} + + ); + }; + + const advancedOptions = thirdparties + .sort((storage) => (storage.isConnected ? -1 : 1)) + ?.map((item) => { + const isDisabled = !item.isConnected && !isAdmin; + const itemLabel = + item.title + (item.isConnected ? "" : ` (${t("ActivationRequired")})`); + + const disabledData = isDisabled + ? { "data-tooltip-id": "file-links-tooltip", "data-tip": "tooltip" } + : {}; + + return ( + + + + {itemLabel} + + + {!isDisabled && !item.isConnected ? ( + + ) : ( + <> + )} + + {isDisabled && ( + + )} + + ); + }); + return (