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

Merge pull request #419 from ONLYOFFICE/feature/typescript

Browse Source 
feature/typescript
This commit is contained in:
Alexey Safronov 2024-05-24 15:32:21 +04:00 committed by GitHub
commit 4f28dd9341
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 439 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/shared/api/portal/index.ts
View File

@ -27,7 +27,13 @@
import { AxiosRequestConfig } from "axios"; import { AxiosRequestConfig } from "axios";
import { EmployeeType } from "../../enums"; import { EmployeeType } from "../../enums";
import { request } from "../client"; import { request } from "../client";
import { TPaymentQuota, TPortal, TPortalTariff, TTenantExtra } from "./types"; import {
TPaymentQuota,
TPortal,
TPortalTariff,
TRestoreProgress,
TTenantExtra,
} from "./types";
export function getShortenedLink(link) { export function getShortenedLink(link) {
return request({ return request({
@ -169,8 +175,13 @@ export function startRestore(backupId, storageType, storageParams, notify) {
}); });
} }
export function getRestoreProgress() { export async function getRestoreProgress() {
return request({ method: "get", url: "/portal/getrestoreprogress" }); const res = (await request({
method: "get",
url: "/portal/getrestoreprogress",
})) as TRestoreProgress;
return res;
} }
export function enableRestore() { export function enableRestore() {

5
packages/shared/api/portal/types.ts
View File

@ -126,3 +126,8 @@ export type TTenantExtra = {
licenseAccept: Date; licenseAccept: Date;
enableTariffPage: boolean; enableTariffPage: boolean;
}; };
export type TRestoreProgress = {
progress: number;
error?: any;
};

1
packages/shared/components/color-theme/ColorTheme.types.ts
View File

@ -99,7 +99,6 @@ export interface ProgressColorTheme extends DefaultColorThemeProps {
themeId: ThemeId.Progress; themeId: ThemeId.Progress;
percent?: number; percent?: number;
$currentColorScheme?: TColorScheme; $currentColorScheme?: TColorScheme;
theme: TTheme;
} }
export interface VersionBadgeTheme extends DefaultColorThemeProps { export interface VersionBadgeTheme extends DefaultColorThemeProps {

11
packages/shared/pages/PreparationPortal/StyledPreparationPortal.js → packages/shared/pages/PreparationPortal/PreparationPortal.styled.ts
View File

@ -27,7 +27,10 @@
import styled from "styled-components"; import styled from "styled-components";
import { tablet } from "@docspace/shared/utils"; import { tablet } from "@docspace/shared/utils";
const StyledPreparationPortal = styled.div` const StyledPreparationPortal = styled.div<{
errorMessage?: boolean;
isDialog?: boolean;
}>`
width: 100%; width: 100%;
@media ${tablet} { @media ${tablet} {
margin-top: ${(props) => (props.isDialog ? "0px" : "48px")}; margin-top: ${(props) => (props.isDialog ? "0px" : "48px")};
@ -42,7 +45,13 @@ const StyledPreparationPortal = styled.div`
line-height: 20px; line-height: 20px;
max-width: 480px; max-width: 480px;
} }
.logo-wrapper {
${(props) => props.isDialog && "display: none"};
}
#container {
${(props) => props.isDialog && "margin-top:0"};
}
.preparation-portal_body-wrapper { .preparation-portal_body-wrapper {
margin-bottom: 24px; margin-bottom: 24px;
width: 100%; width: 100%;

31
packages/shared/pages/PreparationPortal/PreparationPortal.types.ts Normal file
View File

@ -0,0 +1,31 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// 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
export interface IPreparationPortal {
isDialog?: boolean;
withoutHeader?: boolean;
style?: React.CSSProperties;
}

251
packages/shared/pages/PreparationPortal/PreparationPortal.utils.ts Normal file
View File

@ -0,0 +1,251 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// 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 { getRestoreProgress } from "../../api/portal";
const baseSecondMultiplicationFactor = 400;
const baseThirdMultiplicationFactor = 180;
const baseFirstMultiplicationFactor = 700;
const unSizeMultiplicationFactor = 3;
const thirdBound = 98;
let prevProgress: number = 0;
let requestsCount: number = 0;
export const clearLocalStorage = () => {
[
"LocalCopyStorageType",
"LocalCopyFolder",
"LocalCopyStorage",
"LocalCopyThirdPartyStorageType",
"LocalCopyThirdPartyStorageValues",
].forEach((k) => localStorage.removeItem(k));
};
export const reachingSecondBoundary = (
percentage: number,
secondBound: number,
progressTimerId: ReturnType<typeof setInterval> | null,
setPercent: (progress: number) => void,
) => {
let progress = percentage;
const delay = baseSecondMultiplicationFactor * unSizeMultiplicationFactor;
if (progressTimerId) return;
progressTimerId = setInterval(() => {
progress += 1;
if (progress !== secondBound) setPercent(progress);
else {
if (progressTimerId) clearInterval(progressTimerId);
progressTimerId = null;
}
}, delay);
};
export const reachingThirdBoundary = (
percentage: number,
progressTimerId: ReturnType<typeof setInterval> | null,
setPercent: (progress: number) => void,
) => {
let progress = percentage;
const delay = baseThirdMultiplicationFactor * unSizeMultiplicationFactor;
if (progressTimerId) return;
progressTimerId = setInterval(() => {
progress += 1;
if (progress < thirdBound) setPercent(progress);
else {
if (progressTimerId) clearInterval(progressTimerId);
progressTimerId = null;
}
}, delay);
};
export const reachingFirstBoundary = (
percentage: number,
firstBound: number,
progressTimerId: ReturnType<typeof setInterval> | null,
setPercent: (progress: number) => void,
) => {
let progress = percentage;
const delay = baseFirstMultiplicationFactor * unSizeMultiplicationFactor;
if (progressTimerId) return;
progressTimerId = setInterval(() => {
progress += 1;
if (progress !== firstBound) setPercent(progress);
else {
if (progressTimerId) clearInterval(progressTimerId);
progressTimerId = null;
}
}, delay);
};
export const returnToPortal = () => {
setTimeout(() => {
window.location.replace("/");
}, 5000);
};
export const getIntervalProgress = async (
setErrorMessage: (err: any) => void,
clearAllIntervals: VoidFunction,
timerId: ReturnType<typeof setInterval> | null,
progressTimerId: ReturnType<typeof setInterval> | null,
setPercent: (progress: number) => void,
errorInternalServer: string,
) => {
try {
const response = await getRestoreProgress();
if (!response) {
setErrorMessage(errorInternalServer);
clearAllIntervals();
return;
}
if (response.error) {
if (timerId) clearInterval(timerId);
if (progressTimerId) clearInterval(progressTimerId);
progressTimerId = null;
timerId = null;
setErrorMessage(response.error);
return;
}
const currProgress = response.progress;
console.log("prevProgress", prevProgress);
if (currProgress > 0 && prevProgress !== currProgress) {
setPercent(currProgress);
if (progressTimerId) clearInterval(progressTimerId);
progressTimerId = null;
}
prevProgress = currProgress;
if (currProgress === 100) {
clearAllIntervals();
clearLocalStorage();
returnToPortal();
}
} catch (error: any) {
clearAllIntervals();
setErrorMessage(error);
}
};
export const getRecoveryProgress = async (
setErrorMessage: (err: any) => void,
errorInternalServer: string,
timerId: ReturnType<typeof setInterval> | null,
progressTimerId: ReturnType<typeof setInterval> | null,
firstBound: number,
setPercent: (progress: number) => void,
clearAllIntervals: VoidFunction,
) => {
const getMessage = (error: any) => {
if (typeof error !== "object") return error;
return (
error?.response?.data?.error?.message ||
error?.statusText ||
error?.message ||
t("Common:ErrorInternalServer")
);
};
try {
const response = await getRestoreProgress();
if (!response) {
setErrorMessage(errorInternalServer);
return;
}
const { progress, error } = response;
if (error) {
setErrorMessage(error);
return;
}
if (progress === 100) {
returnToPortal();
clearLocalStorage();
} else {
timerId = setInterval(
() =>
getIntervalProgress(
setErrorMessage,
clearAllIntervals,
timerId,
progressTimerId,
setPercent,
errorInternalServer,
),
1000,
);
if (progress < firstBound)
reachingFirstBoundary(
progress,
firstBound,
progressTimerId,
setPercent,
);
}
setPercent(progress);
} catch (err: unknown) {
const knownError = err as { response: { status: number } };
const status = knownError?.response?.status;
const needCreationTableTime = status === 404;
if (needCreationTableTime && requestsCount < 3) {
requestsCount += 1;
getRecoveryProgress(
setErrorMessage,
errorInternalServer,
timerId,
progressTimerId,
firstBound,
setPercent,
clearAllIntervals,
);
return;
}
setErrorMessage(getMessage(err));
}
};

302
packages/shared/pages/PreparationPortal/index.js
View File

@ -1,302 +0,0 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// 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 } from "react";
import { withTranslation } from "react-i18next";
import PropTypes from "prop-types";
import { observer, inject } from "mobx-react";
import ErrorContainer from "@docspace/shared/components/error-container/ErrorContainer";
import { StyledPreparationPortal } from "./StyledPreparationPortal";
import { Text } from "../../components/text";
import { getRestoreProgress } from "../../api/portal";
import { ColorTheme, ThemeId } from "../../components/color-theme";
const baseSize = 1073741824; //number of bytes in one GB
const unSizeMultiplicationFactor = 3;
const baseFirstMultiplicationFactor = 700;
const baseSecondMultiplicationFactor = 400;
const baseThirdMultiplicationFactor = 180;
const firstBound = 10,
secondBound = 63,
thirdBound = 98;
let timerId = null,
progressTimerId = null,
prevProgress;
let requestsCount = 0;
const PreparationPortal = (props) => {
const {
multiplicationFactor,
t,
withoutHeader,
style,
clearLocalStorage,
isDialog,
} = props;
const [percent, setPercent] = useState(0);
const [errorMessage, setErrorMessage] = useState("");
const clearAllIntervals = () => {
clearInterval(timerId);
clearInterval(progressTimerId);
progressTimerId = null;
timerId = null;
};
const returnToPortal = () => {
setTimeout(() => {
window.location.replace("/");
}, 5000);
};
const reachingFirstBoundary = (percent) => {
let progress = percent;
const delay = baseFirstMultiplicationFactor * multiplicationFactor;
if (progressTimerId) return;
progressTimerId = setInterval(() => {
progress += 1;
if (progress !== firstBound) setPercent(progress);
else {
clearInterval(progressTimerId);
progressTimerId = null;
}
}, delay);
};
const reachingSecondBoundary = (percent) => {
let progress = percent;
const delay = baseSecondMultiplicationFactor * multiplicationFactor;
if (progressTimerId) return;
progressTimerId = setInterval(() => {
progress += 1;
if (progress !== secondBound) setPercent(progress);
else {
clearInterval(progressTimerId);
progressTimerId = null;
}
}, delay);
};
const reachingThirdBoundary = (percent) => {
let progress = percent;
const delay = baseThirdMultiplicationFactor * multiplicationFactor;
if (progressTimerId) return;
progressTimerId = setInterval(() => {
progress += 1;
if (progress < thirdBound) setPercent(progress);
else {
clearInterval(progressTimerId);
progressTimerId = null;
}
}, delay);
};
useEffect(() => {
if (percent >= firstBound) {
if (percent < secondBound) {
reachingSecondBoundary(percent);
return;
} else reachingThirdBoundary(percent);
}
}, [percent]);
const getIntervalProgress = async () => {
try {
const response = await getRestoreProgress();
if (!response) {
setErrorMessage(t("Common:ErrorInternalServer"));
clearAllIntervals();
return;
}
if (response.error) {
clearInterval(timerId);
clearInterval(progressTimerId);
progressTimerId = null;
timerId = null;
setErrorMessage(response.error);
return;
}
const currProgress = response.progress;
if (currProgress > 0 && prevProgress !== currProgress) {
setPercent(currProgress);
clearInterval(progressTimerId);
progressTimerId = null;
}
prevProgress = currProgress;
if (currProgress === 100) {
clearAllIntervals();
clearLocalStorage();
returnToPortal();
}
} catch (error) {
clearAllIntervals();
setErrorMessage(error);
}
};
const getRecoveryProgress = async () => {
const errorMessage = (error) => {
if (typeof error !== "object") return error;
return (
error?.response?.data?.error?.message ||
error?.statusText ||
error?.message ||
t("Common:ErrorInternalServer")
);
};
try {
const response = await getRestoreProgress();
if (!response) {
setErrorMessage(t("Common:ErrorInternalServer"));
return;
}
const { error, progress } = response;
if (error) {
setErrorMessage(response.error);
return;
}
if (progress === 100) {
returnToPortal();
clearLocalStorage();
} else {
timerId = setInterval(() => getIntervalProgress(), 1000);
if (progress < firstBound) reachingFirstBoundary(progress);
}
setPercent(progress);
} catch (err) {
const status = err?.response?.status;
const needCreationTableTime = status === 404;
if (needCreationTableTime && requestsCount < 3) {
requestsCount++;
getRecoveryProgress();
return;
}
setErrorMessage(errorMessage(err));
}
};
useEffect(() => {
setTimeout(() => {
getRecoveryProgress();
}, 6000);
return () => {
clearAllIntervals();
};
}, []);
const headerText = errorMessage
? t("Common:Error")
: t("Common:PreparationPortalTitle");
return (
<StyledPreparationPortal errorMessage={errorMessage} isDialog={isDialog}>
<ErrorContainer
headerText={withoutHeader ? "" : headerText}
style={style}
className="restoring-portal"
>
<div className="preparation-portal_body-wrapper">
{errorMessage ? (
<Text className="preparation-portal_error">{`${errorMessage}`}</Text>
) : (
<ColorTheme
themeId={ThemeId.Progress}
percent={percent}
errorMessage={errorMessage}
className="preparation-portal_body-wrapper"
>
<div className="preparation-portal_progress">
<div className="preparation-portal_progress-bar">
<div className="preparation-portal_progress-line"></div>
</div>
<Text className="preparation-portal_percent">{`${percent} %`}</Text>
</div>
<Text className="preparation-portal_text">
{t("PreparationPortalDescription")}
</Text>
</ColorTheme>
)}
</div>
</ErrorContainer>
</StyledPreparationPortal>
);
};
const PreparationPortalWrapper = inject(({ backup }) => {
const { backupSize, clearLocalStorage } = backup;
const multiplicationFactor = backupSize
? backupSize / baseSize
: unSizeMultiplicationFactor;
return {
clearLocalStorage,
multiplicationFactor,
};
})(
withTranslation(["PreparationPortal", "Common"])(observer(PreparationPortal)),
);
PreparationPortal.propTypes = {
withoutHeader: PropTypes.bool,
isDialog: PropTypes.bool,
};
PreparationPortal.defaultProps = {
withoutHeader: false,
isDialog: false,
};
export default (props) => <PreparationPortalWrapper {...props} />;

128
packages/shared/pages/PreparationPortal/index.tsx Normal file
View File

@ -0,0 +1,128 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// 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 } from "react";
import { useTranslation } from "react-i18next";
import ErrorContainer from "@docspace/shared/components/error-container/ErrorContainer";
import { StyledPreparationPortal } from "./PreparationPortal.styled";
import { Text } from "../../components/text";
import { ColorTheme, ThemeId } from "../../components/color-theme";
import { IPreparationPortal } from "./PreparationPortal.types";
import {
getRecoveryProgress,
reachingSecondBoundary,
reachingThirdBoundary,
} from "./PreparationPortal.utils";
const firstBound = 10;
const secondBound = 63;
let timerId: ReturnType<typeof setInterval> | null;
let progressTimerId: ReturnType<typeof setInterval> | null;
const PreparationPortal = (props: IPreparationPortal) => {
const { withoutHeader, style, isDialog } = props;
const { t } = useTranslation(["PreparationPortal", "Common"]);
const errorInternalServer = t("Common:ErrorInternalServer");
const [percent, setPercent] = useState(0);
const [errorMessage, setErrorMessage] = useState("");
const clearAllIntervals = () => {
if (timerId) clearInterval(timerId);
if (progressTimerId) clearInterval(progressTimerId);
progressTimerId = null;
timerId = null;
};
useEffect(() => {
if (percent < firstBound) return;
if (percent < secondBound) {
reachingSecondBoundary(percent, secondBound, progressTimerId, setPercent);
return;
}
reachingThirdBoundary(percent, progressTimerId, setPercent);
}, [percent]);
useEffect(() => {
setTimeout(() => {
getRecoveryProgress(
setErrorMessage,
errorInternalServer,
timerId,
progressTimerId,
firstBound,
setPercent,
clearAllIntervals,
);
}, 6000);
return () => {
clearAllIntervals();
};
}, [errorInternalServer]);
const headerText = errorMessage
? t("Common:Error")
: t("Common:PreparationPortalTitle");
return (
<StyledPreparationPortal errorMessage={!!errorMessage} isDialog={isDialog}>
<ErrorContainer
headerText={withoutHeader ? "" : headerText}
style={style}
className="restoring-portal"
>
<div className="preparation-portal_body-wrapper">
{errorMessage ? (
<Text className="preparation-portal_error">{`${errorMessage}`}</Text>
) : (
<ColorTheme themeId={ThemeId.Progress} percent={percent}>
<div className="preparation-portal_progress">
<div className="preparation-portal_progress-bar">
<div className="preparation-portal_progress-line" />
</div>
<Text className="preparation-portal_percent">{`${percent} %`}</Text>
</div>
<Text className="preparation-portal_text">
{t("PreparationPortalDescription")}
</Text>
</ColorTheme>
)}
</div>
</ErrorContainer>
</StyledPreparationPortal>
);
};
export default PreparationPortal;