Merge branch 'release/v2.0.0' of 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/PortalSettings/categories/data-management/backup/StyledBackup.js

@@ -4,7 +4,6 @@ import {
   UnavailableStyles,
 } from "../../../utils/commonSettingsStyles";
 
-import { isMobileOnly } from "react-device-detect";
 import { tablet, mobile } from "@docspace/components/utils/device";
 
 const INPUT_LENGTH = "350px";
@@ -288,9 +287,6 @@ const StyledAutoBackup = styled.div`
     max-width: 724px;
     box-sizing: border-box;
   }
-  .auto-backup_buttons {
-    ${!isMobileOnly && "margin-bottom: 24px"}
-  }
 
   .toggle-caption {
     display: flex;
@@ -443,6 +439,12 @@ const StyledScheduleComponent = styled.div`
       css`
         max-width: 138px;
       `};
+
+    @media ${mobile} {
+      grid-area: time;
+      max-width: ${INPUT_LENGTH};
+      width: 100%;
+    }
   }
   .additional_options {
     max-width: ${INPUT_LENGTH};
@@ -455,7 +457,11 @@ const StyledScheduleComponent = styled.div`
   .month_options {
     grid-area: weekly-monthly;
     width: 100%;
-    max-width: ${(props) => (!props.isMobileOnly ? "124px" : INPUT_LENGTH)};
+    max-width: "124px";
+
+    @media ${mobile} {
+      max-width: ${INPUT_LENGTH};
+    }
   }
   .schedule-backup_combobox {
     display: inline-block;
@@ -463,38 +469,32 @@ const StyledScheduleComponent = styled.div`
   }
   .main_options {
     max-width: 363px;
+
+    max-width: ${INPUT_LENGTH};
+    display: grid;
+    ${(props) =>
+      props.weeklySchedule || props.monthlySchedule
+        ? css`
+            grid-template-areas: "days weekly-monthly time";
+            grid-template-columns: 1fr 1fr 1fr;
+          `
+        : css`
+            grid-template-areas: "days  time";
+            grid-template-columns: 1fr 1fr;
+          `};
+    grid-gap: 8px;
+
+    @media ${mobile} {
+      display: block;
+    }
   }
-  ${!isMobileOnly
-    ? css`
-        .main_options {
-          max-width: ${INPUT_LENGTH};
-          display: grid;
-          ${(props) =>
-            props.weeklySchedule || props.monthlySchedule
-              ? css`
-                  grid-template-areas: "days weekly-monthly time";
-                  grid-template-columns: 1fr 1fr 1fr;
-                `
-              : css`
-                  grid-template-areas: "days  time";
-                  grid-template-columns: 1fr 1fr;
-                `};
-          grid-gap: 8px;
-        }
-      `
-    : css`
-        .days_option {
-          grid-area: time;
-          max-width: ${INPUT_LENGTH};
-          width: 100%;
-        }
-      `}
+
   .time_options {
     grid-area: time;
-    ${isMobileOnly &&
-    css`
+
+    @media ${mobile} {
       max-width: ${INPUT_LENGTH};
-    `};
+    }
     width: 100%;
   }
   .max_copies {
@@ -559,7 +559,7 @@ const StyledBackup = styled.div`
     padding-bottom: 8px;
   }
   .layout-progress-bar {
-    ${!isMobileOnly && "cursor: default;"}
+    cursor: default;
   }
   .backup-section_wrapper {
     margin-bottom: 27px;

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/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);