Web: Client: Data Import: translate ImportStep to ts

2024-06-21 18:13:54 +05:00 · 2024-06-21 18:13:54 +05:00 · 6bb3dbf8b3
commit 6bb3dbf8b3
parent 22bd4251d8
7 changed files with 331 additions and 36 deletions
--- a/packages/client/public/locales/en/Settings.json
+++ b/packages/client/public/locales/en/Settings.json
@ -129,6 +129,7 @@
  "ErrorsWereFound": "{{errors}} errors were found",
  "ForcePathStyle": "Force Path Style",
  "GroupsDescription": "Users which you selected in the previous step will be imported into groups created in {{serviceName}}. Groups will appear in the Accounts section.",
+  "GoogleDriveFiles": "Google Drive's Files",
  "HexCode": "Hex code",
  "Import": "Import",
  "ImportCompleteDescriptionGoogle": "Data import from Google Workspace to ONLYOFFICE DocSpace is complete!",
@ -298,6 +299,7 @@
  "UserAgreement": "I confirm and want to proceed",
  "UserLimitExceeded": "User limit exceeded. To proceed to the next step, please adjust the number of users or increase the DocSpace user limit.",
  "UsersAreRegistered": "You selected users registered in your DocSpace, with the roles already set. Please proceed to the next step or go back to select more users.",
+  "UsersFiles": "User’s Files",
  "UsersSectionDescription": "Section \"Users\" includes the users you selected in the previous step. By default, it is always enabled and can't be unselected.",
  "UseSpecialChar": "Use special characters",
  "UseUpperCase": "Use capital letters",
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/index.tsx
@ -29,11 +29,12 @@ import { Trans } from "react-i18next";
 import { Text } from "@docspace/shared/components/text";
 import { HelpButton } from "@docspace/shared/components/help-button";

+import PeopleIcon from "PUBLIC_DIR/images/catalog.accounts.react.svg?url";
 import SelectFileStep from "../../components/SelectFileStep";
 import SelectUsersStep from "../../components/SelectUsersStep";
 import SelectUsersTypeStep from "../../components/SelectUsersTypeStep";
+import ImportStep from "../../components/ImportStep";

-import ImportStep from "./ImportStep";
 import ImportProcessingStep from "./ImportProcessingStep";
 import ImportCompleteStep from "./ImportCompleteStep";

@ -105,14 +106,7 @@ export const getStepsData = (
          />
        </>
      ),
-      component: (
-        <SelectUsersTypeStep
-          t={t}
-          onNextStep={incrementStep}
-          onPrevStep={decrementStep}
-          showReminder
-        />
-      ),
+      component: <SelectUsersTypeStep t={t} />,
    },
    {
      title: t("Settings:DataImport"),
@ -120,9 +114,20 @@ export const getStepsData = (
      component: (
        <ImportStep
          t={t}
-          onNextStep={incrementStep}
-          onPrevStep={decrementStep}
-          showReminder
+          serviceName="Google Workspace"
+          usersExportDetails={{
+            name: t("Common:Accounts"),
+            icon: PeopleIcon,
+          }}
+          personalExportDetails={{
+            name: t("Settings:GoogleDriveFiles"),
+          }}
+          sharedFilesExportDetails={{
+            name: t("Settings:SharedFiles"),
+          }}
+          sharedFoldersExportDetails={{
+            name: t("Settings:SharedFolders"),
+          }}
        />
      ),
    },
--- a/packages/client/src/pages/PortalSettings/categories/data-import/NextcloudWorkspace/Stepper/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextcloudWorkspace/Stepper/index.tsx
@ -29,12 +29,13 @@ import { Trans } from "react-i18next";
 import { Text } from "@docspace/shared/components/text";
 import { HelpButton } from "@docspace/shared/components/help-button";

+import PeopleIcon from "PUBLIC_DIR/images/catalog.accounts.react.svg?url";
 import SelectFileStep from "../../components/SelectFileStep";
 import SelectUsersStep from "../../components/SelectUsersStep";
 import AddEmailsStep from "../../components/AddEmailsStep";
 import SelectUsersTypeStep from "../../components/SelectUsersTypeStep";
+import ImportStep from "../../components/ImportStep";

-import ImportStep from "./ImportStep";
 import ImportProcessingStep from "./ImportProcessingStep";
 import ImportCompleteStep from "./ImportCompleteStep";

@ -121,8 +122,20 @@ export const getStepsData = (
      component: (
        <ImportStep
          t={t}
-          incrementStep={incrementStep}
-          decrementStep={decrementStep}
+          serviceName="Nextcloud"
+          usersExportDetails={{
+            name: t("Common:Accounts"),
+            icon: PeopleIcon,
+          }}
+          personalExportDetails={{
+            name: t("Settings:UsersFiles"),
+          }}
+          sharedFilesExportDetails={{
+            name: t("Settings:SharedFiles"),
+          }}
+          sharedFoldersExportDetails={{
+            name: t("Settings:SharedFolders"),
+          }}
        />
      ),
    },
--- a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/index.tsx
@ -29,11 +29,13 @@ import { Trans } from "react-i18next";
 import { Text } from "@docspace/shared/components/text";
 import { HelpButton } from "@docspace/shared/components/help-button";

+import UserSolidIcon from "PUBLIC_DIR/images/catalog.user.solid.react.svg?url";
+import SharedIcon from "PUBLIC_DIR/images/catalog.old.share.react.svg?url";
 import SelectFileStep from "../../components/SelectFileStep";
 import SelectUsersStep from "../../components/SelectUsersStep";
 import SelectUsersTypeStep from "../../components/SelectUsersTypeStep";
+import ImportStep from "../../components/ImportStep";

-import ImportStep from "./ImportStep";
 import ImportProcessingStep from "./ImportProcessingStep";
 import ImportCompleteStep from "./ImportCompleteStep";

@ -105,14 +107,7 @@ export const getStepsData = (
          />
        </>
      ),
-      component: (
-        <SelectUsersTypeStep
-          t={t}
-          onNextStep={incrementStep}
-          onPrevStep={decrementStep}
-          showReminder
-        />
-      ),
+      component: <SelectUsersTypeStep t={t} />,
    },
    {
      title: t("Settings:DataImport"),
@ -120,9 +115,25 @@ export const getStepsData = (
      component: (
        <ImportStep
          t={t}
-          onNextStep={incrementStep}
-          onPrevStep={decrementStep}
-          showReminder
+          serviceName="ONLYOFFICE Workspace"
+          usersExportDetails={{
+            name: t("Common:People"),
+            icon: UserSolidIcon,
+          }}
+          personalExportDetails={{
+            name: t("Common:MyDocuments"),
+            icon: UserSolidIcon,
+          }}
+          sharedFilesExportDetails={{
+            name: t("Common:SharedWithMe"),
+            icon: SharedIcon,
+          }}
+          sharedFoldersExportDetails={{
+            name: t("Common:SharedWithMe"),
+            icon: SharedIcon,
+          }}
+          hasCommonFiles
+          hasProjectFiles
        />
      ),
    },
--- a/packages/client/src/pages/PortalSettings/categories/data-import/components/ImportStep.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/components/ImportStep.tsx
@ -0,0 +1,231 @@
+// (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 styled from "styled-components";
+
+import { SaveCancelButtons } from "@docspace/shared/components/save-cancel-buttons";
+import AccountsIcon from "PUBLIC_DIR/images/catalog.accounts.react.svg?url";
+import RoomsIcon from "PUBLIC_DIR/images/catalog.rooms.react.svg?url";
+import PortfolioIcon from "PUBLIC_DIR/images/catalog.portfolio.react.svg?url";
+import ProjectsIcon from "PUBLIC_DIR/images/catalog.projects.react.svg?url";
+import DocumentsIcon from "PUBLIC_DIR/images/catalog.documents.react.svg?url";
+import ImportSection from "../sub-components/ImportSection";
+import { ImportStepProps, InjectedImportStepProps } from "../types";
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .save-cancel-buttons {
+    margin-top: 4px;
+  }
+`;
+
+const ImportStep = (props: ImportStepProps) => {
+  const {
+    t,
+    serviceName,
+    usersExportDetails,
+    personalExportDetails,
+    sharedFilesExportDetails,
+    sharedFoldersExportDetails,
+    hasCommonFiles = false,
+    hasProjectFiles = false,
+
+    incrementStep,
+    decrementStep,
+    importOptions,
+    setImportOptions,
+    user,
+  } = props as InjectedImportStepProps;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>, name: string) => {
+    const checked = e.target.checked;
+    setImportOptions({ [name]: checked });
+  };
+
+  const users =
+    t("Settings:Employees")[0].toUpperCase() + t("Settings:Employees").slice(1);
+
+  return (
+    <Wrapper>
+      <ImportSection
+        isChecked
+        sectionName={users}
+        description={t("Settings:UsersSectionDescription")}
+        exportSection={{
+          sectionName: usersExportDetails.name,
+          workspace: serviceName,
+          sectionIcon: usersExportDetails.icon,
+        }}
+        importSection={{
+          sectionName: t("Common:Accounts"),
+          workspace: "DocSpace",
+          sectionIcon: AccountsIcon,
+        }}
+        isDisabled
+      />
+
+      <ImportSection
+        isChecked={importOptions.importGroups}
+        onChange={(e) => onChange(e, "importGroups")}
+        sectionName={t("Common:Groups")}
+        description={t("Settings:GroupsDescription", { serviceName })}
+        exportSection={{
+          sectionName: t("Common:Groups"),
+          workspace: serviceName,
+        }}
+        importSection={{
+          sectionName: t("Common:Accounts"),
+          workspace: "DocSpace",
+          sectionIcon: AccountsIcon,
+        }}
+        isDisabled={false}
+      />
+
+      <ImportSection
+        isChecked={importOptions.importPersonalFiles}
+        onChange={(e) => onChange(e, "importPersonalFiles")}
+        sectionName={t("Settings:PersonalFiles")}
+        description={t("Settings:PersonalFilesDescription")}
+        exportSection={{
+          sectionName: personalExportDetails.name,
+          workspace: serviceName,
+          sectionIcon: personalExportDetails.icon,
+        }}
+        importSection={{
+          sectionName: t("Common:Documents"),
+          workspace: "DocSpace",
+          sectionIcon: DocumentsIcon,
+        }}
+        isDisabled={false}
+      />
+
+      <ImportSection
+        isChecked={importOptions.importSharedFiles}
+        onChange={(e) => onChange(e, "importSharedFiles")}
+        sectionName={t("Settings:SharedFiles")}
+        description={t("Settings:SharedFilesDescription")}
+        exportSection={{
+          sectionName: sharedFilesExportDetails.name,
+          workspace: serviceName,
+          sectionIcon: sharedFilesExportDetails.icon,
+        }}
+        importSection={{
+          sectionName: t("Common:Documents"),
+          workspace: "DocSpace",
+          sectionIcon: DocumentsIcon,
+        }}
+        isDisabled={false}
+      />
+      <ImportSection
+        isChecked={importOptions.importSharedFolders}
+        onChange={(e) => onChange(e, "importSharedFolders")}
+        sectionName={t("Settings:SharedFolders")}
+        description={t("Settings:SharedFoldersDescription")}
+        exportSection={{
+          sectionName: sharedFoldersExportDetails.name,
+          workspace: serviceName,
+          sectionIcon: sharedFoldersExportDetails.icon,
+        }}
+        importSection={{
+          sectionName: t("Common:Rooms"),
+          workspace: "DocSpace",
+          sectionIcon: RoomsIcon,
+        }}
+        isDisabled={false}
+      />
+      {hasCommonFiles && (
+        <ImportSection
+          isChecked={importOptions.importCommonFiles}
+          onChange={(e) => onChange(e, "importCommonFiles")}
+          sectionName={t("Common:CommonFiles")}
+          description={t("Settings:CommonFilesDescription", {
+            user: user?.displayName,
+          })}
+          exportSection={{
+            sectionName: t("Common:Common"),
+            workspace: serviceName,
+            sectionIcon: PortfolioIcon,
+          }}
+          importSection={{
+            sectionName: t("Common:Rooms"),
+            workspace: "DocSpace",
+            sectionIcon: RoomsIcon,
+          }}
+          isDisabled={false}
+        />
+      )}
+
+      {hasProjectFiles && (
+        <ImportSection
+          isChecked={importOptions.importProjectFiles}
+          onChange={(e) => onChange(e, "importProjectFiles")}
+          sectionName={t("Common:Projects")}
+          description={t("Settings:ProjectsDescription")}
+          exportSection={{
+            sectionName: t("Common:Projects"),
+            workspace: serviceName,
+            sectionIcon: ProjectsIcon,
+          }}
+          importSection={{
+            sectionName: t("Common:Rooms"),
+            workspace: "DocSpace",
+            sectionIcon: RoomsIcon,
+          }}
+          isDisabled={false}
+        />
+      )}
+
+      <SaveCancelButtons
+        className="save-cancel-buttons"
+        onSaveClick={incrementStep}
+        onCancelClick={decrementStep}
+        saveButtonLabel={t("Settings:NextStep")}
+        cancelButtonLabel={t("Common:Back")}
+        displaySettings
+        showReminder
+      />
+    </Wrapper>
+  );
+};
+
+export default inject<TStore>(({ importAccountsStore, userStore }) => {
+  const { importOptions, setImportOptions, incrementStep, decrementStep } =
+    importAccountsStore;
+
+  const { user } = userStore;
+
+  return {
+    user,
+    importOptions,
+    setImportOptions,
+    incrementStep,
+    decrementStep,
+  };
+})(observer(ImportStep));
--- a/packages/client/src/pages/PortalSettings/categories/data-import/sub-components/ImportSection.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/sub-components/ImportSection.tsx
@ -100,12 +100,20 @@ const ImportItemWrapper = styled.div<{ isChecked: boolean }>`
    align-items: center;
    gap: 8px;

-    svg {
-      path {
-        fill: ${(props) =>
-          props.isChecked
-            ? props.theme.client.settings.migration.importIconColor
-            : props.theme.client.settings.migration.importItemDisableTextColor};
+    .importSectionIcon {
+      div {
+        display: flex;
+        align-items: center;
+      }
+
+      svg {
+        path {
+          fill: ${(props) =>
+            props.isChecked
+              ? props.theme.client.settings.migration.importIconColor
+              : props.theme.client.settings.migration
+                  .importItemDisableTextColor};
+        }
      }
    }
  }
@ -133,10 +141,12 @@ const ArrowWrapper = styled.div`

 const ImportItem = ({
  sectionName,
-  SectionIcon,
+  sectionIcon,
  workspace,
  isChecked,
 }: ImportItemProps) => {
+  console.log(sectionIcon);
+
  return (
    <ImportItemWrapper isChecked={isChecked}>
      <Text
@ -148,7 +158,9 @@ const ImportItem = ({
        {workspace}
      </Text>
      <div className="importSection">
-        {SectionIcon && <SectionIcon />}
+        {sectionIcon && (
+          <ReactSVG className="importSectionIcon" src={sectionIcon} />
+        )}
        {sectionName}
      </div>
    </ImportItemWrapper>
--- a/packages/client/src/pages/PortalSettings/categories/data-import/types/index.ts
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/types/index.ts
@ -386,7 +386,7 @@ export interface AccountsPagingProps {

 export interface ImportItemProps {
  sectionName: string;
-  SectionIcon: React.FC<React.SVGProps<SVGElement>>;
+  sectionIcon?: string;
  workspace: string;
  isChecked: boolean;
 }
@ -413,3 +413,24 @@ export interface UsersInfoBlockProps {
  totalUsedUsers: number;
  totalLicenceLimit: number;
 }
+
+type TExportDetails = { name: string; icon?: string };
+
+export interface ImportStepProps {
+  t: TFunciton;
+  serviceName: string;
+  usersExportDetails: TExportDetails;
+  personalExportDetails: TExportDetails;
+  sharedFilesExportDetails: TExportDetails;
+  sharedFoldersExportDetails: TExportDetails;
+  hasCommonFiles?: boolean;
+  hasProjectFiles?: boolean;
+}
+
+export interface InjectedImportStepProps extends ImportStepProps {
+  incrementStep: TStore["importAccountsStore"]["incrementStep"];
+  decrementStep: TStore["importAccountsStore"]["decrementStep"];
+  importOptions: TStore["importAccountsStore"]["importOptions"];
+  setImportOptions: TStore["importAccountsStore"]["setImportOptions"];
+  user: TStore["userStore"]["user"];
+}