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

Web: Client: Data Import: index page of google workspace was translated into ts

Browse Source
This commit is contained in:
Vladimir Khvan 2024-06-07 17:33:31 +05:00
parent c6e0638509
commit 118762b088
11 changed files with 400 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/index.js
View File

@ -1,106 +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 SelectFileStep from "./SelectFileStep";
import SelectUsersStep from "./SelectUsersStep";
import SelectUsersTypeStep from "./SelectUsersTypeStep";
import ImportStep from "./ImportStep";
import ImportProcessingStep from "./ImportProcessingStep";
import ImportCompleteStep from "./ImportCompleteStep";
const StepContent = ({
t,
currentStep,
showReminder,
setShowReminder,
onNextStep,
onPrevStep,
}) => {
const isFifthStep = currentStep === 5;
switch (currentStep) {
case 1:
return (
<SelectFileStep
t={t}
onNextStep={onNextStep}
onPrevStep={onPrevStep}
showReminder={showReminder}
setShowReminder={setShowReminder}
/>
);
case 2:
return (
<SelectUsersStep
t={t}
onNextStep={onNextStep}
onPrevStep={onPrevStep}
showReminder={showReminder}
/>
);
case 3:
return (
<SelectUsersTypeStep
t={t}
onNextStep={onNextStep}
onPrevStep={onPrevStep}
showReminder={showReminder}
/>
);
case 4:
return (
<ImportStep
t={t}
onNextStep={onNextStep}
onPrevStep={onPrevStep}
showReminder={showReminder}
/>
);
case 5:
return (
<ImportProcessingStep
t={t}
onNextStep={onNextStep}
onPrevStep={onPrevStep}
showReminder={showReminder}
isFifthStep={isFifthStep}
/>
);
case 6:
return (
<ImportCompleteStep
t={t}
onNextStep={onNextStep}
onPrevStep={onPrevStep}
showReminder={showReminder}
/>
);
default:
break;
}
};
export default StepContent;

148
packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/index.tsx Normal file
View File

@ -0,0 +1,148 @@
// (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 { Trans } from "react-i18next";
import { Text } from "@docspace/shared/components/text";
import { HelpButton } from "@docspace/shared/components/help-button";
import SelectFileStep from "../../components/SelectFileStep";
import SelectUsersStep from "./SelectUsersStep";
import SelectUsersTypeStep from "./SelectUsersTypeStep";
import ImportStep from "./ImportStep";
import ImportProcessingStep from "./ImportProcessingStep";
import ImportCompleteStep from "./ImportCompleteStep";
import { TFunciton } from "../../types";
export const getStepsData = (
t: TFunciton,
incrementStep: () => void,
decrementStep: () => void,
isTypeSelectEmpty: boolean,
) => {
return [
{
title: t("Common:SelectFiles"),
description: t("Settings:SelectFileDescriptionGoogle"),
component: (
<SelectFileStep
t={t}
isMultipleUpload
migratorName="GoogleWorkspace"
acceptedExtensions={[".zip"]}
/>
),
},
{
title: t("Settings:SelectUsers"),
description: t("Settings:SelectUsersDescriptionGoogle"),
component: (
<SelectUsersStep
t={t}
onNextStep={incrementStep}
onPrevStep={decrementStep}
/>
),
},
{
title: t("Settings:SelectUserTypes"),
description: isTypeSelectEmpty ? (
<>
<b>{t("Settings:RolesAreSet")}</b>
<div>{t("Settings:UsersAreRegistered")}</div>
</>
) : (
<>
<Trans t={t} ns="Settings" i18nKey="SelectUserTypesDescription">
Select DocSpace roles for the imported users: <b>DocSpace admin</b>,{" "}
<b>Room admin</b>
or <b>Power user</b>. By default, Power user role is selected for
each user. You can manage the roles after the import.
</Trans>
<HelpButton
place="bottom"
offsetRight={0}
tooltipContent={
<Text>
<Trans
i18nKey="TypesAndPrivileges"
ns="Settings"
t={t}
components={{
1: <b />,
2: <b />,
3: <b />,
4: <b />,
}}
/>
</Text>
}
style={{
display: "inline-block",
position: "relative",
bottom: "-2px",
margin: "0px 5px",
}}
/>
</>
),
component: (
<SelectUsersTypeStep
t={t}
onNextStep={incrementStep}
onPrevStep={decrementStep}
showReminder
/>
),
},
{
title: t("Settings:DataImport"),
description: t("Settings:ImportSectionDescription"),
component: (
<ImportStep
t={t}
onNextStep={incrementStep}
onPrevStep={decrementStep}
showReminder
/>
),
},
{
title: t("Settings:DataImportProcessing"),
description: t("Settings:ImportProcessingDescription"),
component: <ImportProcessingStep t={t} onNextStep={incrementStep} />,
},
{
title: t("Settings:DataImportComplete"),
description: t("Settings:ImportCompleteDescriptionGoogle"),
component: (
<ImportCompleteStep t={t} onPrevStep={decrementStep} showReminder />
),
},
];
};

280
packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.js
View File

@ -1,280 +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 { useState, useEffect } from "react";
import { inject, observer } from "mobx-react";
import { Trans, withTranslation } from "react-i18next";
import { getStepTitle, getGoogleStepDescription } from "../../../utils";
import {
tablet,
isMobile as isMobileBreakpoint,
} 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";
import StepContent from "./Stepper";
import SelectFileLoader from "../sub-components/SelectFileLoader";
import BreakpointWarning from "SRC_DIR/components/BreakpointWarning";
import { Text } from "@docspace/shared/components/text";
import { Box } from "@docspace/shared/components/box";
import { HelpButton } from "@docspace/shared/components/help-button";
import { toastr } from "@docspace/shared/components/toast";
const STEP_LENGTH = 6;
const GoogleWrapper = styled.div`
margin-top: 1px;
.workspace-subtitle {
color: ${(props) => props.theme.client.settings.migration.descriptionColor};
max-width: 700px;
line-height: 20px;
margin-bottom: 20px;
@media ${tablet} {
max-width: 675px;
margin-bottom: 28px;
}
}
.step-counter {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 5px;
`
: css`
margin-right: 5px;
`}
font-size: 16px;
font-weight: 700;
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
}
.step-title {
font-size: 16px;
font-weight: 700;
color: ${(props) => props.theme.client.settings.migration.subtitleColor};
}
.step-description {
max-width: 700px;
font-size: 12px;
margin-bottom: 16px;
line-height: 16px;
color: ${(props) =>
props.theme.client.settings.migration.stepDescriptionColor};
@media ${tablet} {
max-width: 675px;
}
}
`;
const GoogleWorkspace = ({
t,
clearCheckedAccounts,
viewAs,
setViewAs,
currentDeviceType,
getMigrationStatus,
setUsers,
filteredUsers,
}) => {
const [showReminder, setShowReminder] = useState(false);
const [currentStep, setCurrentStep] = useState(1);
const [shouldRender, setShouldRender] = useState(false);
const navigate = useNavigate();
const onNextStep = () => {
setCurrentStep((prev) => {
const nextStep = prev < 6 ? prev + 1 : 6;
return nextStep;
});
};
const onPrevStep = () => {
if (currentStep !== 1) {
setCurrentStep((prev) => prev - 1);
}
};
const helpContent = () => (
<Text fontSize="12px">
<Trans
i18nKey="TypesAndPrivileges"
ns="Settings"
t={t}
components={{
1: <strong></strong>,
2: <strong></strong>,
3: <strong></strong>,
4: <strong></strong>,
}}
/>
</Text>
);
const tooltipStyle = {
display: "inline-block",
position: "relative",
bottom: "-2px",
margin: "0px 5px",
};
const renderTooltip = (
<HelpButton
place="bottom"
offsetRight={0}
getContent={helpContent}
style={tooltipStyle}
/>
);
useViewEffect({
view: viewAs,
setView: setViewAs,
currentDeviceType,
});
useEffect(() => {
try {
getMigrationStatus().then((res) => {
if (
!res ||
res.parseResult.users.length +
res.parseResult.existUsers.length +
res.parseResult.withoutEmailUsers.length ===
0
) {
setShouldRender(true);
return;
}
if (res.parseResult.migratorName !== "GoogleWorkspace") {
const workspacesEnum = {
GoogleWorkspace: "google",
Nextcloud: "nextcloud",
Workspace: "onlyoffice",
};
const migratorName = res.parseResult.migratorName;
setShouldRender(true);
navigate(
`/portal-settings/data-import/migration/${workspacesEnum[migratorName]}?service=${migratorName}`,
);
}
if (
res.parseResult.operation === "parse" &&
res.isCompleted &&
res.error
) {
setUsers(res.parseResult);
setCurrentStep(2);
}
if (res.parseResult.operation === "migration" && !res.isCompleted) {
setCurrentStep(5);
}
if (res.parseResult.operation === "migration" && res.isCompleted) {
setCurrentStep(6);
}
setShouldRender(true);
});
} catch (error) {
toastr.error(error);
}
return clearCheckedAccounts;
}, []);
if (isMobile || isMobileBreakpoint())
return (
<BreakpointWarning
isMobileUnavailableOnly
sectionName={t("Settings:DataImport")}
/>
);
if (!shouldRender) return <SelectFileLoader />;
return (
<GoogleWrapper>
<Text className="workspace-subtitle">
{t("Settings:AboutDataImport")}
</Text>
<div className="step-container">
<Box displayProp="flex" marginProp="0 0 8px">
<Text className="step-counter">
{currentStep}/{STEP_LENGTH}.
</Text>
<Text className="step-title">{getStepTitle(t, currentStep)}</Text>
</Box>
<Box className="step-description">
{getGoogleStepDescription(
t,
currentStep,
renderTooltip,
Trans,
filteredUsers.length === 0,
)}
</Box>
<StepContent
t={t}
currentStep={currentStep}
onNextStep={onNextStep}
onPrevStep={onPrevStep}
showReminder={showReminder}
setShowReminder={setShowReminder}
/>
</div>
</GoogleWrapper>
);
};
export default inject(({ setup, settingsStore, importAccountsStore }) => {
const { clearCheckedAccounts, getMigrationStatus, setUsers, filteredUsers } =
importAccountsStore;
const { viewAs, setViewAs } = setup;
const { currentDeviceType } = settingsStore;
return {
clearCheckedAccounts,
viewAs,
setViewAs,
currentDeviceType,
getMigrationStatus,
setUsers,
filteredUsers,
};
})(withTranslation(["Common, Settings"])(observer(GoogleWorkspace)));

87
packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.tsx Normal file
View File

@ -0,0 +1,87 @@
// (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 { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import { getStepsData } from "./Stepper";
import SelectFileLoader from "../sub-components/SelectFileLoader";
import StepLayout from "../sub-components/StepLayout";
import { InjectedNextcloudProps, NextcloudProps, TFunciton } from "../types";
const GoogleWorkspace = (props: NextcloudProps) => {
const { theme, filteredUsers, step, incrementStep, decrementStep } =
props as InjectedNextcloudProps;
const { t, ready }: { t: TFunciton; ready: boolean } = useTranslation([
"Common, SMTPSettings, Settings",
]);
const StepsData = getStepsData(
t,
incrementStep,
decrementStep,
filteredUsers.length === 0,
);
if (!ready) return <SelectFileLoader />;
return (
<StepLayout
t={t}
theme={theme}
step={step}
totalSteps={StepsData.length}
title={StepsData[step - 1].title}
description={StepsData[step - 1].description}
component={StepsData[step - 1].component}
/>
);
};
export default inject<TStore>(({ settingsStore, importAccountsStore }) => {
const {
filteredUsers,
step,
setStep,
incrementStep,
decrementStep,
setWorkspace,
} = importAccountsStore;
const { theme } = settingsStore;
return {
theme,
filteredUsers,
step,
setStep,
incrementStep,
decrementStep,
setWorkspace,
};
})(observer(GoogleWorkspace));

20
packages/client/src/pages/PortalSettings/categories/data-import/NextcloudWorkspace/Stepper/index.tsx
View File

@ -41,18 +41,22 @@ import { TFunciton } from "../../types";
export const getStepsData = (
t: TFunciton,
currentStep: number,
incrementStep: () => void,
decrementStep: () => void,
isTypeSelectEmpty: boolean,
) => {
const isSixthStep = currentStep === 6;
return [
{
title: t("Common:SelectFile"),
description: t("Settings:SelectFileDescriptionNextcloud"),
component: <SelectFileStep t={t} />,
component: (
<SelectFileStep
t={t}
isMultipleUpload={false}
migratorName="Nextcloud"
acceptedExtensions={[".zip"]}
/>
),
},
{
title: t("Settings:SelectUsersWithEmail"),
@ -140,13 +144,7 @@ export const getStepsData = (
{
title: t("Settings:DataImportProcessing"),
description: t("Settings:ImportProcessingDescription"),
component: (
<ImportProcessingStep
t={t}
incrementStep={incrementStep}
isSixthStep={isSixthStep}
/>
),
component: <ImportProcessingStep t={t} incrementStep={incrementStep} />,
},
{
title: t("Settings:DataImportComplete"),

52
packages/client/src/pages/PortalSettings/categories/data-import/NextcloudWorkspace/index.tsx
View File

@ -26,27 +26,14 @@
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { Text } from "@docspace/shared/components/text";
import { getStepsData } from "./Stepper";
import SelectFileLoader from "../sub-components/SelectFileLoader";
import StepLayout from "../sub-components/StepLayout";
import { InjectedNextcloudProps, NextcloudProps, TFunciton } from "../types";
const NextcloudWrapper = styled.div`
max-width: 700px;
.data-import-counter {
margin-top: 19px;
margin-bottom: 9px;
}
.data-import-section-description {
margin-bottom: 8px;
font-size: 12px;
}
`;
const NextcloudWorkspace = (props: NextcloudProps) => {
const { theme, filteredUsers, step, incrementStep, decrementStep } =
props as InjectedNextcloudProps;
@ -57,7 +44,6 @@ const NextcloudWorkspace = (props: NextcloudProps) => {
const StepsData = getStepsData(
t,
step,
incrementStep,
decrementStep,
filteredUsers.length === 0,
@ -66,29 +52,15 @@ const NextcloudWorkspace = (props: NextcloudProps) => {
if (!ready) return <SelectFileLoader />;
return (
<>
<NextcloudWrapper>
<Text
className="data-import-description"
lineHeight="20px"
color={theme.isBase ? "#657077" : "#ADADAD"}
>
{t("Settings:AboutDataImport")}
</Text>
<Text
className="data-import-counter"
fontSize="16px"
fontWeight={700}
lineHeight="22px"
>
{step}/{StepsData.length}. {StepsData[step - 1].title}
</Text>
<div className="data-import-section-description">
{StepsData[step - 1].description}
</div>
</NextcloudWrapper>
{StepsData[step - 1].component}
</>
<StepLayout
t={t}
theme={theme}
step={step}
totalSteps={StepsData.length}
title={StepsData[step - 1].title}
description={StepsData[step - 1].description}
component={StepsData[step - 1].component}
/>
);
};

55
packages/client/src/pages/PortalSettings/categories/data-import/components/SelectFileStep.tsx
View File

@ -105,6 +105,10 @@ const FAIL_TRIES = 2;
const SelectFileStep = (props: SelectFileStepProps) => {
const {
isMultipleUpload,
migratorName,
acceptedExtensions,
t,
incrementStep,
setWorkspace,
@ -121,6 +125,7 @@ const SelectFileStep = (props: SelectFileStepProps) => {
setLoadingStatus,
files,
setFiles,
multipleFileUploading,
} = props as InjectedSelectFileStepProps;
const [isSaveDisabled, setIsSaveDisabled] = useState(true);
@ -129,6 +134,7 @@ const SelectFileStep = (props: SelectFileStepProps) => {
const [isError, setIsError] = useState(false);
const [isFileError, setIsFileError] = useState(false);
const [isBackupEmpty, setIsBackupEmpty] = useState(false);
const isAbort = useRef(false);
const [failTries, setFailTries] = useState(FAIL_TRIES);
@ -165,9 +171,22 @@ const SelectFileStep = (props: SelectFileStepProps) => {
if (res.isCompleted || res.progress === 100) {
clearInterval(uploadInterval.current);
if (
res.parseResult.users.length +
res.parseResult.existUsers.length +
res.parseResult.withoutEmailUsers.length >
0
) {
setUsers(res.parseResult);
setIsBackupEmpty(false);
setLoadingStatus("done");
} else {
setLoadingStatus("none");
setIsBackupEmpty(true);
cancelMigration();
}
setUsers(res.parseResult);
setLoadingStatus("done");
setIsInfiniteProgress(false);
setIsSaveDisabled(false);
}
@ -178,6 +197,7 @@ const SelectFileStep = (props: SelectFileStepProps) => {
setIsInfiniteProgress(false);
}
} catch (error) {
cancelMigration();
toastr.error(error || t("Common:SomethingWentWrong"));
setIsFileError(true);
setLoadingStatus("none");
@ -185,6 +205,7 @@ const SelectFileStep = (props: SelectFileStepProps) => {
clearInterval(uploadInterval.current);
}
}, [
cancelMigration,
failTries,
getMigrationStatus,
isInfiniteProgress,
@ -193,13 +214,19 @@ const SelectFileStep = (props: SelectFileStepProps) => {
t,
]);
const onUploadFile = async (file: File) => {
const onUploadFile = async (file: File | File[]) => {
try {
await singleFileUploading(file, setProgress, isAbort);
if (file instanceof Array) {
setFiles(file.map((item) => item.name));
await multipleFileUploading(file, setProgress, isAbort);
} else {
setFiles([file.name]);
await singleFileUploading(file, setProgress, isAbort);
}
if (isAbort.current) return;
await initMigrationName("Nextcloud");
await initMigrationName(migratorName);
setLoadingStatus("proceed");
} catch (error) {
toastr.error(error || t("Common:SomethingWentWrong"));
@ -211,7 +238,7 @@ const SelectFileStep = (props: SelectFileStepProps) => {
};
const onSelectFile = (file: File | File[]) => {
if (file instanceof Array) {
if (!isMultipleUpload && file instanceof Array) {
toastr.error(t("Common:SomethingWentWrong"));
return;
}
@ -222,7 +249,6 @@ const SelectFileStep = (props: SelectFileStepProps) => {
setLoadingStatus("upload");
setFailTries(FAIL_TRIES);
setIsInfiniteProgress(true);
setFiles([file.name]);
onUploadFile(file);
};
@ -288,7 +314,7 @@ const SelectFileStep = (props: SelectFileStepProps) => {
isDisabled={
fileLoadingStatus === "upload" || fileLoadingStatus === "proceed"
}
accept={[".zip"]}
accept={acceptedExtensions}
size={InputSize.base}
/>
</FileUploadContainer>
@ -329,6 +355,19 @@ const SelectFileStep = (props: SelectFileStepProps) => {
</Box>
)}
{isBackupEmpty && (
<Box>
<ProgressBar
percent={100}
className="complete-progress-bar"
label={t("Common:LoadingIsComplete")}
/>
<Text className="error-text">
{t("Settings:NoUsersInBackup")}
</Text>
</Box>
)}
{isError ? (
<SaveCancelButtons
className="save-cancel-buttons"
@ -382,6 +421,7 @@ export default inject<TStore>(({ dialogsStore, importAccountsStore }) => {
incrementStep,
files,
setFiles,
multipleFileUploading,
} = importAccountsStore;
const { cancelUploadDialogVisible, setCancelUploadDialogVisible } =
dialogsStore;
@ -400,5 +440,6 @@ export default inject<TStore>(({ dialogsStore, importAccountsStore }) => {
incrementStep,
files,
setFiles,
multipleFileUploading,
};
})(observer(SelectFileStep));

3
packages/client/src/pages/PortalSettings/categories/data-import/index.tsx
View File

@ -35,6 +35,7 @@ import { DataImportProps, InjectedDataImportProps } from "./types";
import Providers from "./components/Providers";
import NextcloudWorkspace from "./NextcloudWorkspace";
import GoogleWorkspace from "./GoogleWorkspace";
const DataImport = (props: DataImportProps) => {
const {
@ -101,7 +102,7 @@ const DataImport = (props: DataImportProps) => {
return workspace === "Nextcloud" ? (
<NextcloudWorkspace />
) : workspace === "GoogleWorkspace" ? (
<div>google</div>
<GoogleWorkspace />
) : workspace === "Workspace" ? (
<div>onlyoffice</div>
) : (

74
packages/client/src/pages/PortalSettings/categories/data-import/sub-components/StepLayout.tsx Normal file
View File

@ -0,0 +1,74 @@
// (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 styled from "styled-components";
import { Text } from "@docspace/shared/components/text";
import { LayoutProps } from "../types";
const DescriptionWrapper = styled.div`
max-width: 700px;
.data-import-counter {
margin-top: 19px;
margin-bottom: 9px;
}
.data-import-section-description {
margin-bottom: 8px;
font-size: 12px;
}
`;
const StepLayout = (props: LayoutProps) => {
const { t, theme, step, totalSteps, title, description, component } = props;
return (
<>
<DescriptionWrapper>
<Text
className="data-import-description"
lineHeight="20px"
color={theme.isBase ? "#657077" : "#ADADAD"}
>
{t("Settings:AboutDataImport")}
</Text>
<Text
className="data-import-counter"
fontSize="16px"
fontWeight={700}
lineHeight="22px"
>
{step}/{totalSteps}. {title}
</Text>
<div className="data-import-section-description">{description}</div>
</DescriptionWrapper>
{component}
</>
);
};
export default StepLayout;

15
packages/client/src/pages/PortalSettings/categories/data-import/types/index.ts
View File

@ -25,6 +25,7 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { useTranslation } from "react-i18next";
import { TWorkspaceService } from "@docspace/shared/api/settings/types";
export type TFunciton = ReturnType<typeof useTranslation>["t"];
@ -44,6 +45,9 @@ export interface InjectedProvidersProps extends ProvidersProps {
export interface SelectFileStepProps {
t: TFunciton;
isMultipleUpload?: boolean;
acceptedExtensions: string[];
migratorName: TWorkspaceService;
}
export interface InjectedSelectFileStepProps extends SelectFileStepProps {
@ -61,6 +65,7 @@ export interface InjectedSelectFileStepProps extends SelectFileStepProps {
cancelMigration: TStore["importAccountsStore"]["cancelMigration"];
files: TStore["importAccountsStore"]["files"];
setFiles: TStore["importAccountsStore"]["setFiles"];
multipleFileUploading: TStore["importAccountsStore"]["multipleFileUploading"];
}
export interface DataImportProps {}
@ -89,3 +94,13 @@ export interface InjectedNextcloudProps extends NextcloudProps {
incrementStep: TStore["importAccountsStore"]["incrementStep"];
decrementStep: TStore["importAccountsStore"]["decrementStep"];
}
export interface LayoutProps {
t: TFunciton;
theme: TStore["settingsStore"]["theme"];
step: number;
totalSteps: number;
title: string;
description: string;
component: JSX.Element;
}

10
packages/client/src/routes/portalSettings.js
View File

@ -240,7 +240,7 @@ const GoogleDataImport = loadable(() =>
componentLoader(
() =>
import(
"../pages/PortalSettings/categories/data-import/GoogleWorkspace/index.js"
"../pages/PortalSettings/categories/data-import/GoogleWorkspace/index.tsx"
),
),
);
@ -248,7 +248,7 @@ const NextcloudDataImport = loadable(() =>
componentLoader(
() =>
import(
"../pages/PortalSettings/categories/data-import/NextCloudWorkspace/index.js"
"../pages/PortalSettings/categories/data-import/NextcloudWorkspace/index.tsx"
),
),
);
@ -527,15 +527,15 @@ const PortalSettingsRoutes = {
},
{
path: "data-import/migration/google",
element: <GoogleDataImport />,
element: <DataImport />,
},
{
path: "data-import/migration/nextcloud",
element: <NextcloudDataImport />,
element: <DataImport />,
},
{
path: "data-import/migration/onlyoffice",
element: <OnlyofficeDataImport />,
element: <DataImport />,
},
{
path: "developer-tools/javascript-sdk/docspace",