Merge branch 'release/v2.5.0' into bugfix/doceditor-optimization

2024-04-04 14:06:11 +04:00 · 2024-04-04 14:06:11 +04:00 · 1155c09ed0
commit 1155c09ed0
parent 5a81080653 94f7304343
25 changed files with 114 additions and 35 deletions
--- a/packages/client/public/locales/en/Settings.json
+++ b/packages/client/public/locales/en/Settings.json
@ -54,7 +54,9 @@
  "BrandingSubtitle": "Use this option to provide on-brand experience to users.",
  "BreakpointSmallText": "Your window is too small to display all page contents",
  "BreakpointSmallTextPrompt": "Please resize the window or enable full-screen mode",
+  "BreakpointMobileWarningText": "This section is unavailable in mobile version",
  "BreakpointWarningText": "This section is only available in the desktop version",
+  "BreakpointMobileWarningTextPrompt": "Please use the desktop or tablet to access the <1>{{sectionName}}</1>.",
  "BreakpointWarningTextPrompt": "Please use the desktop site to access <1>{{sectionName}}</1> settings.",
  "BruteForceProtection": "Brute Force Protection",
  "BruteForceProtectionDescription": "Set up the limit of unsuccessful login attempts by the user to protect the space against brute-force attacks. When the limit is reached, attempts coming from the associated IP address will be banned for specified period of time, or captcha will be requested if enabled.",
--- a/packages/client/src/components/BreakpointWarning/BreakpointWarning.js
+++ b/packages/client/src/components/BreakpointWarning/BreakpointWarning.js
@ -38,13 +38,21 @@ const BreakpointWarning = ({
  tReady,
  theme,
  isSmallWindow,
+  isMobileUnavailableOnly,
 }) => {
  const textHeader = isSmallWindow
    ? t("BreakpointSmallText")
-    : t("BreakpointWarningText");
+    : isMobileUnavailableOnly
+      ? t("BreakpointMobileWarningText")
+      : t("BreakpointWarningText");

  const textPrompt = isSmallWindow ? (
    t("BreakpointSmallTextPrompt")
+  ) : isMobileUnavailableOnly ? (
+    <Trans t={t} i18nKey="BreakpointMobileWarningTextPrompt" ns="Settings">
+      "Please use the desktop site to access the {{ sectionName }}
+      settings."
+    </Trans>
  ) : (
    <Trans t={t} i18nKey="BreakpointWarningTextPrompt" ns="Settings">
      "Please use the desktop site to access the {{ sectionName }}
--- a/packages/client/src/components/FilesSelector/FilesSelector.types.ts
+++ b/packages/client/src/components/FilesSelector/FilesSelector.types.ts
@ -34,6 +34,7 @@ export type FilesSelectorProps = {
  isPanelVisible: boolean;
  // withoutImmediatelyClose: boolean;
  isThirdParty: boolean;
+  isSelectFolder: boolean;
  rootThirdPartyId?: string;
  isRoomsOnly: boolean;
  isUserOnly: boolean;
--- a/packages/client/src/components/FilesSelector/index.tsx
+++ b/packages/client/src/components/FilesSelector/index.tsx
@ -62,6 +62,7 @@ const FilesSelectorWrapper = ({
  isRoomsOnly = false,
  isUserOnly = false,
  isEditorDialog = false,
+  isSelectFolder = false,
  rootThirdPartyId,
  filterParam,

@ -273,7 +274,7 @@ const FilesSelectorWrapper = ({
    isSelect,
    filterParam,
    isRestore,
-    isThirdParty,
+    isSelectFolder,
  );

  const defaultAcceptButtonLabel = getAcceptButtonLabel(
@ -285,6 +286,7 @@ const FilesSelectorWrapper = ({
    isSelect,
    filterParam,
    isRestore,
+    isSelectFolder,
  );

  const getIsDisabledAction = (
--- a/packages/client/src/components/FilesSelector/utils.ts
+++ b/packages/client/src/components/FilesSelector/utils.ts
@ -41,10 +41,10 @@ export const getHeaderLabel = (
  isSelect?: boolean,
  filterParam?: string,
  isRestore?: boolean,
-  isThirdParty?: boolean,
+  isSelectFolder?: boolean,
 ) => {
  if (isRestore) return t("Common:RestoreTo");
-  if (isThirdParty) return t("Common:SelectFolder");
+  if (isSelectFolder) return t("Common:SelectFolder");
  if (isMove) return t("Common:MoveTo");
  if (isCopy && !isEditorDialog) return t("Common:Copy");
  if (isRestoreAll) return t("Common:Restore");
@ -68,12 +68,13 @@ export const getAcceptButtonLabel = (
  isSelect?: boolean,
  filterParam?: string,
  isRestore?: boolean,
+  isSelectFolder?: boolean,
 ) => {
  if (isRestore) return t("Common:RestoreHere");
  if (isMove) return t("Common:MoveHere");
  if (isCopy && !isEditorDialog) return t("Common:CopyHere");
  if (isRestoreAll) return t("Common:RestoreHere");
-  if (isSelect) return t("Common:SelectAction");
+  if (isSelect || isSelectFolder) return t("Common:SelectAction");

  if (filterParam === FilesSelectorFilterTypes.DOCX) return t("Common:Create");
  // if (filterParam === FilesSelectorFilterTypes.DOCXF) return t("Common:SubmitToGallery");
--- a/packages/client/src/components/FilesSelectorInput/index.js
+++ b/packages/client/src/components/FilesSelectorInput/index.js
@ -39,6 +39,7 @@ const FilesSelectorInput = (props) => {
    id,
    isThirdParty,
    isRoomsOnly,
+    isSelectFolder,
    setNewPath,
    newPath,
    onSelectFolder: setSelectedFolder,
@ -126,6 +127,7 @@ const FilesSelectorInput = (props) => {
        rootThirdPartyId={rootThirdPartyId}
        isThirdParty={isThirdParty}
        isRoomsOnly={isRoomsOnly}
+        isSelectFolder={isSelectFolder}
        id={id}
        onClose={onClose}
        isPanelVisible={isPanelVisible}
--- a/packages/client/src/components/SpaceQuota/StyledComponent.js
+++ b/packages/client/src/components/SpaceQuota/StyledComponent.js
@ -31,12 +31,14 @@ const StyledBody = styled.div`
  overflow: hidden;
  width: 100%;
  max-width: max-content;
+  margin-left: 0px !important;

  display: flex;
  flex-wrap: nowrap;
+  height: 28px;
+  align-items: center;

  p {
-    padding-top: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/FolderInput.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/FolderInput.js
@ -214,9 +214,9 @@ const FolderInput = ({
          isPanelVisible={isDialogOpen}
          onClose={onClose}
          isThirdParty
+          isSelectFolder
          onSelectTreeNode={setTreeNode}
          passedFoldersTree={[thirdpartyAccount]}
-          acceptButtonLabel={t("Common:SelectAction")}
          currentFolderId={treeNode ? treeNode.id : thirdpartyAccount.id}
        />
      )}
--- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
+++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
@ -37,7 +37,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
 import { TableGroupMenu } from "@docspace/shared/components/table";
 import { DropDownItem } from "@docspace/shared/components/drop-down-item";
 import LoaderSectionHeader from "../loaderSectionHeader";
-import { mobile, tablet, desktop } from "@docspace/shared/utils";
+import { mobile, tablet, desktop, isMobile } from "@docspace/shared/utils";
 import withLoading from "SRC_DIR/HOCs/withLoading";
 import { Badge } from "@docspace/shared/components/badge";
 import {
@ -74,6 +74,8 @@ const HeaderContainer = styled.div`
      white-space: nowrap;
      overflow: hidden;
      color: ${(props) => props.theme.client.settings.headerTitleColor};
+      display: flex;
+      align-items: center;
    }
  }
  .action-wrapper {
@ -331,6 +333,13 @@ const SectionHeaderContent = (props) => {
    },
  ];

+  const pathname = location.pathname;
+
+  const isServicePage =
+    pathname.includes("google") ||
+    pathname.includes("nextcloud") ||
+    pathname.includes("onlyoffice");
+
  return (
    <StyledContainer isHeaderVisible={isHeaderVisible}>
      {isHeaderVisible ? (
@ -359,7 +368,18 @@ const SectionHeaderContent = (props) => {
          )}
          <Headline type="content" truncate={true}>
            <div className="settings-section_header">
-              <div className="header"> {t(header)}</div>
+              <div className="header">
+                {isMobile() && isServicePage && (
+                  <IconButton
+                    iconName={ArrowPathReactSvgUrl}
+                    size="17"
+                    isFill={true}
+                    onClick={onBackToParent}
+                    className="arrow-button"
+                  />
+                )}
+                {t(header)}
+              </div>
              {isNeedPaidIcon ? (
                <Badge
                  backgroundColor="#EDC409"
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.js
@ -28,7 +28,9 @@ import { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { Trans, withTranslation } from "react-i18next";
 import { getStepTitle, getGoogleStepDescription } from "../../../utils";
-import { tablet, isMobile } from "@docspace/shared/utils/device";
+import { tablet } from "@docspace/shared/utils/device";
+
+import { isMobile } from "react-device-detect";
 import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
 import styled, { css } from "styled-components";
 import { useNavigate } from "react-router-dom";
@ -211,8 +213,13 @@ const GoogleWorkspace = ({
    return clearCheckedAccounts;
  }, []);

-  if (isMobile())
-    return <BreakpointWarning sectionName={t("Settings:DataImport")} />;
+  if (isMobile)
+    return (
+      <BreakpointWarning
+        isMobileUnavailableOnly
+        sectionName={t("Settings:DataImport")}
+      />
+    );

  if (!shouldRender) return <SelectFileLoader />;

--- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/index.js
@ -27,7 +27,7 @@
 import { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
-import { isMobile } from "@docspace/shared/utils/device";
+import { isMobile } from "react-device-detect";
 import { useNavigate } from "react-router-dom";
 import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
 import styled from "styled-components";
@ -125,8 +125,13 @@ const NextcloudWorkspace = (props) => {
    return clearCheckedAccounts;
  }, []);

-  if (isMobile())
-    return <BreakpointWarning sectionName={t("Settings:DataImport")} />;
+  if (isMobile)
+    return (
+      <BreakpointWarning
+        isMobileUnavailableOnly
+        sectionName={t("Settings:DataImport")}
+      />
+    );

  if (!tReady || !shouldRender) return <SelectFileLoader />;

--- a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/index.js
@ -28,7 +28,8 @@ import { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { Trans, withTranslation } from "react-i18next";
 import { getStepTitle, getWorkspaceStepDescription } from "../../../utils";
-import { tablet, isMobile } from "@docspace/shared/utils/device";
+import { tablet } from "@docspace/shared/utils/device";
+import { isMobile } from "react-device-detect";
 import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
 import styled, { css } from "styled-components";
 import { useNavigate } from "react-router-dom";
@ -206,8 +207,13 @@ const OnlyofficeWorkspace = ({
    return clearCheckedAccounts;
  }, []);

-  if (isMobile()) {
-    return <BreakpointWarning sectionName={t("Settings:DataImport")} />;
+  if (isMobile) {
+    return (
+      <BreakpointWarning
+        isMobileUnavailableOnly
+        sectionName={t("Settings:DataImport")}
+      />
+    );
  }

  if (!shouldRender) return <SelectFileLoader />;
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js
@ -426,13 +426,13 @@ const StyledRestoreBackup = styled.div`
  }

  .restore-backup_button-container {
-    padding-block: 30px;
    position: sticky;
    bottom: 0;
-    margin-top: 32px;
+    margin-top: 24px;
    background-color: ${({ theme }) => theme.backgroundColor};

    @media ${mobile} {
+      padding-block: 30px;
      position: fixed;
      padding-inline: 16px;
      inset-inline: 0;
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/sub-components/RoomsModule.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/sub-components/RoomsModule.js
@ -59,6 +59,7 @@ class RoomsModule extends React.PureComponent {
            isError={isError}
            isDisabled={isLoadingData}
            isRoomBackup
+            isSelectFolder
          />
        </div>
        <ScheduleComponent isLoadingData={isLoadingData} {...rest} />
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/common-container/DirectThirdPartyConnection.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/common-container/DirectThirdPartyConnection.js
@ -70,6 +70,8 @@ const DirectThirdPartyConnection = (props) => {
    isMobileScale,
    accounts,
    setThirdPartyAccountsInfo,
+    isSelect,
+    isSelectFolder,
  } = props;

  const [state, setState] = useReducer(
@ -261,6 +263,8 @@ const DirectThirdPartyConnection = (props) => {
              isError={isError}
              isDisabled={isDisabledSelector}
              isThirdParty
+              isSelectFolder={isSelectFolder}
+              isSelect={isSelect}
            />
          )}
        </>
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/RoomsModule.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/RoomsModule.js
@ -93,6 +93,7 @@ class RoomsModule extends React.Component {
            withoutInitPath={!selectedFolder}
            isDisabled={isModuleDisabled}
            isRoomBackup
+            isSelectFolder
          />
        </div>
        <div className="manual-backup_buttons">
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/ThirdPartyModule.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/ThirdPartyModule.js
@ -128,6 +128,7 @@ class ThirdPartyModule extends React.Component {
          withoutInitPath={!selectedFolder}
          isError={isError}
          buttonSize={buttonSize}
+          isSelectFolder
        />

        {connectedThirdPartyAccount?.id && isTheSameThirdPartyAccount && (
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/RoomsModule.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/RoomsModule.js
@ -48,6 +48,7 @@ const RoomsModule = (props) => {
      onSelectFile={onSelectFile}
      filterParam={FilesSelectorFilterTypes.BackupOnly}
      descriptionText={t("SelectFileInGZFormat")}
+      isSelect
    />
  );
 };
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/ThirdPartyResourcesModule.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/ThirdPartyResourcesModule.js
@ -50,6 +50,7 @@ const ThirdPartyResources = (props) => {
        withoutInitPath
        buttonSize={buttonSize}
        isMobileScale
+        isSelect
      />
    </div>
  );
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/styled-components/Hint.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/styled-components/Hint.js
@ -29,9 +29,8 @@ import styled, { css } from "styled-components";
 export const Hint = styled.div`
  box-sizing: border-box;
  padding: 8px 12px;
-  background: ${(props) =>
-    props.backgroundColor ? props.backgroundColor : "#f8f7bf"};
-  color: ${(props) => (props.color ? props.color : "initial")};
+  background: ${(props) => props.theme.tooltip.backgroundColor};
+  color: ${(props) => props.theme.tooltip.textColor};
  border-radius: 6px;
  font-weight: 400;
  font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/SecretKeyInput.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/SecretKeyInput.js
@ -44,6 +44,7 @@ const SecretKeyWrapper = styled.div`
  .link {
    display: inline-block;
    margin-top: 6px;
+    color: ${(props) => props.theme.tooltip.textColor};
  }

  .dotted {
@ -159,7 +160,6 @@ const SecretKeyInput = (props) => {
            isHovered={true}
            onClick={hideReset}
            className="link"
-            color="#333333"
          >
            {t("ResetKey")}
          </Link>
--- a/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/CustomSettings.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/CustomSettings.js
@ -114,7 +114,7 @@ const CustomSettings = (props) => {

      <div className="smtp-settings_title smtp-settings_login">
        <Text {...commonTextProps}>{t("HostLogin")}</Text>
-        <Text as="span" color="#F21C0E">
+        <Text as="span" {...requirementColor}>
          *
        </Text>
      </div>
@ -130,7 +130,7 @@ const CustomSettings = (props) => {

      <div className="smtp-settings_title">
        <Text {...commonTextProps}>{t("HostPassword")}</Text>
-        <Text as="span" color="#F21C0E">
+        <Text as="span" {...requirementColor}>
          *
        </Text>
      </div>
--- a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js
@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode

 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { Text } from "@docspace/shared/components/text";
 import { inject, observer } from "mobx-react";

@ -54,12 +54,23 @@ const StyledBody = styled.div`
    p {
      margin-bottom: 0;
    }
-    svg {
-      path {
-        fill: ${(props) =>
-          props.theme.client.settings.payment.benefitsContainer
-            .iconsColor} !important;
-      }
+    .icons-container {
+      width: 24px;
+      height: 24px;
+
+      ${(props) =>
+        !props.theme.isBase &&
+        css`
+          svg {
+            path {
+              fill: #adadad !important;
+            }
+            mask + path {
+              fill: none !important;
+              stroke: #adadad !important;
+            }
+          }
+        `}
    }
  }
 `;
@ -79,7 +90,10 @@ const BenefitsContainer = ({ t, features, theme }) => {
        if (!item.title || !item.image) return;
        return (
          <div className="payment-benefits" key={index}>
-            <div dangerouslySetInnerHTML={{ __html: item.image }} />
+            <div
+              dangerouslySetInnerHTML={{ __html: item.image }}
+              className="icons-container"
+            />
            <Text noSelect>{item.title}</Text>
          </div>
        );
--- a/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js
+++ b/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js
@ -220,6 +220,7 @@ const StyledMainInfo = styled.div`
  display: flex;
  flex-wrap: wrap;
  background: ${(props) => props.theme.client.settings.payment.backgroundColor};
+  border-radius: 6px;

  column-gap: 24px;
  row-gap: 12px;
--- a/packages/shared/themes/base.ts
+++ b/packages/shared/themes/base.ts
@ -1012,7 +1012,7 @@ export const getBaseTheme = () => {
      maxWidth: "340px",
      color: white,
      textColor: black,
-      backgroundColor: "#f8f7bf",
+      backgroundColor: "#F8F9F9",

      before: {
        border: "none",