Merge branch 'release/v2.0.0' of https://github.com/ONLYOFFICE/DocSpace-client into release/v2.0.0

packages/client/src/components/Layout/index.js

@@ -8,7 +8,13 @@ import {
   isMobile as isMobileUtils,
   tablet,
 } from "@docspace/components/utils/device";
-import { isIOS, isMobile, isChrome, isAndroid } from "react-device-detect";
+import {
+  isIOS,
+  isMobile,
+  isChrome,
+  isMobileOnly,
+  isAndroid,
+} from "react-device-detect";
 import { inject, observer } from "mobx-react";
 
 const StyledContainer = styled.div`
@@ -146,7 +152,7 @@ const Layout = (props) => {
         height = `100%`;
       }
 
-      if (isIOS && isMobile && e?.type === "resize" && e?.target?.height) {
+      if (isIOS && isMobileOnly && e?.type === "resize" && e?.target?.height) {
         const diff = window.innerHeight - e.target.height;
 
         windowHeight -= diff;
@@ -163,7 +169,7 @@ const Layout = (props) => {
         document.body.style.position = `fixed`;
         document.body.style.overflow = `hidden`;
         document.body.style.scroll = `hidden`;
-      } else if (isMobile && isIOS) {
+      } else if (isMobileOnly && isIOS) {
         document.body.style.height = `100%`;
         document.body.style.maxHeight = `100%`;
         document.body.style.minHeight = `100%`;

packages/client/src/pages/Home/Section/Body/index.js

@@ -217,8 +217,8 @@ const SectionBodyContent = (props) => {
     const title = elem && elem.dataset.title;
     const value = elem && elem.getAttribute("value");
     if ((!value && !treeValue) || isRecycleBinFolder || !isDragActive) {
-      setDragging(false);
       setStartDrag(false);
+      setTimeout(() => setDragging(false), 0);
       isDragActive = false;
       return;
     }
@@ -226,7 +226,7 @@ const SectionBodyContent = (props) => {
     const folderId = value ? value.split("_")[1] : treeValue;
 
     setStartDrag(false);
-    setDragging(false);
+    setTimeout(() => setDragging(false), 0);
     onMoveTo(folderId, title);
     isDragActive = false;
     return;

packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/index.js

@@ -19,11 +19,12 @@ import { StyledWrapper } from "./styled-social-networks";
 
 const SocialNetworks = (props) => {
   const { t } = useTranslation(["Profile", "Common"]);
-  const { providers, setProviders, isOAuthAvailable } = props;
+  const { providers, setProviders, isOAuthAvailable, setPortalQuota } = props;
 
   const fetchData = async () => {
     try {
       const data = await getAuthProviders();
+      if (typeof isOAuthAvailable === "undefined") await setPortalQuota();
       setProviders(data);
     } catch (e) {
       console.error(e);
@@ -99,8 +100,6 @@ const SocialNetworks = (props) => {
       const { icon, label, iconOptions } = providersData[item.provider];
       if (!icon || !label) return <></>;
 
-      console.log(item);
-
       const onClick = (e) => {
         if (item.linked) {
           unlinkAccount(item.provider);
@@ -140,11 +139,12 @@ export default inject(({ auth, peopleStore }) => {
   const { usersStore } = peopleStore;
   const { providers, setProviders } = usersStore;
   const { currentQuotaStore } = auth;
-  const { isOAuthAvailable } = currentQuotaStore;
+  const { isOAuthAvailable, setPortalQuota } = currentQuotaStore;
 
   return {
     providers,
     setProviders,
     isOAuthAvailable,
+    setPortalQuota,
   };
 })(observer(SocialNetworks));

packages/common/components/Section/sub-components/info-panel.js

@@ -4,7 +4,7 @@ import {
   mobile,
   infoPanelWidth,
 } from "@docspace/components/utils/device";
-import { isMobile, isIOS } from "react-device-detect";
+import { isMobileOnly, isIOS } from "react-device-detect";
 import { inject } from "mobx-react";
 import PropTypes from "prop-types";
 import React, { useEffect, useState, useRef, useCallback } from "react";
@@ -164,7 +164,7 @@ const InfoPanel = ({
   }, []);
 
   useEffect(() => {
-    if (isMobile && isIOS) {
+    if (isMobileOnly && isIOS) {
       window.visualViewport.addEventListener("resize", onResize);
     }
 

packages/common/store/CurrentQuotaStore.js

@@ -222,11 +222,13 @@ class QuotasStore {
       if (elem.id === featureId && elem.used) elem.used.value = value;
     });
   };
+
   updateQuotaFeatureValue = (featureId, value) => {
     this.currentPortalQuotaFeatures.forEach((elem) => {
       if (elem.id === featureId) elem.value = value;
     });
   };
+
   setPortalQuota = async () => {
     try {
       const res = await api.portal.getPortalQuota();

packages/components/aside/aside.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { isMobile, isIOS } from "react-device-detect";
+import { isMobileOnly, isIOS } from "react-device-detect";
 import PropTypes from "prop-types";
 import Scrollbar from "../scrollbar";
 import {
@@ -25,7 +25,7 @@ const Aside = React.memo((props) => {
   const visualPageTop = React.useRef(0);
 
   React.useEffect(() => {
-    if (isMobile && isIOS) {
+    if (isMobileOnly && isIOS) {
       window.visualViewport.addEventListener("resize", onResize);
       window.visualViewport.addEventListener("scroll", onResize);
     }

packages/components/drag-and-drop/styled-drag-and-drop.js

@@ -10,10 +10,7 @@ const StyledDragAndDrop = styled.div`
 -ms-user-select: none;
 user-select: none;*/
   height: ${(props) => props.theme.dragAndDrop.height};
-  border: ${(props) =>
-    props.drag
-      ? props.theme.dragAndDrop.border
-      : props.theme.dragAndDrop.transparentBorder};
+  border: ${(props) => props.theme.dragAndDrop.transparentBorder};
 
   ${({ theme }) =>
     theme.interfaceDirection === "rtl"

packages/components/drop-down/index.js

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import PropTypes from "prop-types";
 
 import onClickOutside from "react-onclickoutside";
-import { isIOS, isMobile } from "react-device-detect";
+import { isIOS, isMobileOnly, isMobile } from "react-device-detect";
 import Portal from "../portal";
 import DomHelpers from "../utils/domHelpers";
 
@@ -344,7 +344,7 @@ class DropDown extends React.PureComponent {
 
     if (
       isIOS &&
-      isMobile &&
+      isMobileOnly &&
       container?.height !== window.visualViewport.height
     ) {
       const rects = this.dropDownRef?.current?.getBoundingClientRect();

packages/components/modal-dialog/views/modal-aside.js

@@ -18,7 +18,7 @@ import ModalBackdrop from "../components/ModalBackdrop";
 import Scrollbar from "../../scrollbar";
 import { classNames } from "../../utils/classNames";
 import FormWrapper from "../components/FormWrapper";
-import { isIOS, isMobile } from "react-device-detect";
+import { isIOS, isMobileOnly } from "react-device-detect";
 
 const Modal = ({
   id,
@@ -53,7 +53,7 @@ const Modal = ({
   const contentRef = React.useRef(0);
 
   React.useEffect(() => {
-    if (isMobile && isIOS) {
+    if (isMobileOnly && isIOS) {
       window.visualViewport.addEventListener("resize", onResize);
       window.visualViewport.addEventListener("scroll", onResize);
     }

packages/components/selector/sub-components/Body/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { isMobile, isIOS } from "react-device-detect";
+import { isMobileOnly, isIOS } from "react-device-detect";
 import InfiniteLoader from "react-window-infinite-loader";
 import { FixedSizeList as List } from "react-window";
 
@@ -82,7 +82,7 @@ const Body = ({
 
   const onBodyResize = React.useCallback(
     (e) => {
-      if (e?.target?.height && isMobile && isIOS) {
+      if (e?.target?.height && isMobileOnly && isIOS) {
         let height = e?.target?.height - 64 - HEADER_HEIGHT;
 
         if (footerVisible) {
@@ -111,7 +111,7 @@ const Body = ({
 
   React.useEffect(() => {
     window.addEventListener("resize", onBodyResize);
-    if (isMobile && isIOS)
+    if (isMobileOnly && isIOS)
       window.visualViewport?.addEventListener("resize", onBodyResize);
     return () => {
       window.removeEventListener("resize", onBodyResize);

packages/components/table-container/StyledTableContainer.js

@@ -385,6 +385,14 @@ const StyledTableBody = styled.div`
   display: contents;
 
   ${({ useReactWindow }) => useReactWindow && reactWindowBodyStyles}
+
+  .table-container_cell {
+    ${({ infoPanelVisible }) =>
+      infoPanelVisible &&
+      css`
+        padding: 0;
+      `}
+  }
 `;
 
 const StyledTableRow = styled.div`

packages/components/table-container/TableBody.js

@@ -21,6 +21,7 @@ const TableBody = (props) => {
     <StyledTableBody
       useReactWindow={useReactWindow}
       className="table-container_body"
+      infoPanelVisible={infoPanelVisible}
     >
       <InfiniteLoaderComponent
         className="TableList"