added fifth step modal dialog

packages/client/public/locales/en/Settings.json

@@ -242,5 +242,6 @@
   "YourCurrentDomain": "Your current domain",
   "UnsavedChangesBody": "If you close the link settings menu right now, your changes will not be saved.",
   "CloseMenu": "Close menu",
-  "WantToCancelUpload": "Do you want to cancel the upload?"
+  "WantToCancelUpload": "Do you want to cancel the upload?",
+  "WantToCancelDataImport": "Do you want to cancel data import?"
 }

packages/client/public/locales/ru/Settings.json

@@ -238,5 +238,6 @@
   "WhiteLabelTooltip": "Размеры указаны для дисплеев Retina. Для дисплеев со стандартным разрешением ширина и высота логотипа будут соответственно изменены при загрузке.",
   "YouHaveUnsavedChanges": "Имеются несохраненные изменения",
   "YourCurrentDomain": "Ваш текущий домен",
-  "WantToCancelUpload": "Вы хотите отменить загрузку?"
+  "WantToCancelUpload": "Вы хотите отменить загрузку?",
+  "WantToCancelDataImport": "Вы хотите отменить импорт данных?"
 }

packages/client/src/components/dialogs/CancelUploadDialog/index.js

@@ -3,9 +3,13 @@ import ModalDialog from "@docspace/components/modal-dialog";
 import Button from "@docspace/components/button";
 import ModalDialogContainer from "../ModalDialogContainer";
 
-const CancelUploadDialog = ({ visible, onClose, loading }) => {
+const CancelUploadDialog = ({ isFifthStep, visible, onClose, loading }) => {
   const { t } = useTranslation(["Settings", "Common"]);
 
+  const modalBodyText = isFifthStep
+    ? t("Settings:WantToCancelDataImport")
+    : t("Settings:WantToCancelUpload");
+
   return (
     <ModalDialogContainer
       visible={visible}
@@ -13,7 +17,7 @@ const CancelUploadDialog = ({ visible, onClose, loading }) => {
       displayType="modal"
     >
       <ModalDialog.Header>{t("Common:Confirmation")}</ModalDialog.Header>
-      <ModalDialog.Body>{t("Settings:WantToCancelUpload")}</ModalDialog.Body>
+      <ModalDialog.Body>{modalBodyText}</ModalDialog.Body>
       <ModalDialog.Footer>
         <Button
           label={t("Common:Yes")}

packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/FifthStep/index.js

@@ -1,7 +1,11 @@
+import { useState, useRef, useEffect } from "react";
+import { CancelUploadDialog } from "SRC_DIR/components/dialogs";
+import styled from "styled-components";
+
 import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
 import ProgressBar from "@docspace/components/progress-bar";
+import Button from "@docspace/components/button";
 import Text from "@docspace/components/text";
-import styled from "styled-components";
 
 const Wrapper = styled.div`
   max-width: 350px;
@@ -20,22 +24,73 @@ const Wrapper = styled.div`
   }
 `;
 
-const FifthStep = ({ t, onNextStepClick, onPrevStepClick, showReminder }) => {
+const FifthStep = ({
+  t,
+  onNextStepClick,
+  onPrevStepClick,
+  showReminder,
+  isFifthStep,
+}) => {
+  const [isVisble, setIsVisble] = useState(false);
+  const [percent, setPercent] = useState(0);
+  const percentRef = useRef(0);
+
+  const PERCENT_STEP = 5;
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (percentRef.current < 100) {
+        setPercent((prevPercent) => prevPercent + PERCENT_STEP);
+        percentRef.current += PERCENT_STEP;
+      } else {
+        clearInterval(interval);
+        onNextStepClick();
+      }
+    }, 200);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  const onClickButton = () => {
+    setIsVisble(true);
+  };
+
   return (
     <Wrapper>
       <Text className="data-import-progress-text">
         {t("Settings:DataImportProcessingDescription")}
       </Text>
-      <ProgressBar percent={75} className="data-import-progress-bar" />
-      <SaveCancelButtons
-        className="save-cancel-buttons"
-        onSaveClick={onNextStepClick}
-        onCancelClick={onPrevStepClick}
-        showReminder={showReminder}
-        saveButtonLabel={t("Settings:NextStep")}
-        cancelButtonLabel={t("Common:Back")}
-        displaySettings={true}
-      />
+      {percent < 102 ? (
+        <>
+          <ProgressBar percent={percent} className="data-import-progress-bar" />
+          <Button
+            size="small"
+            label={t("Common:CancelButton")}
+            onClick={onClickButton}
+          />
+        </>
+      ) : (
+        <SaveCancelButtons
+          className="save-cancel-buttons"
+          onSaveClick={onNextStepClick}
+          onCancelClick={onPrevStepClick}
+          showReminder={showReminder}
+          saveButtonLabel={t("Settings:NextStep")}
+          cancelButtonLabel={t("Common:Back")}
+          displaySettings={true}
+        />
+      )}
+
+      {isVisble && (
+        <CancelUploadDialog
+          visible={isVisble}
+          loading={false}
+          isFifthStep={isFifthStep}
+          onClose={() => setIsVisble(false)}
+        />
+      )}
     </Wrapper>
   );
 };

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

@@ -88,6 +88,7 @@ const GoogleWorkspace = (props) => {
             onNextStepClick={onNextStepClick}
             onPrevStepClick={onPrevStepClick}
             showReminder={showReminder}
+            isFifthStep={isFifthStep}
           />
         );
       case 6:
@@ -118,6 +119,7 @@ const GoogleWorkspace = (props) => {
 
   const isSecondStep = currentStep === 2;
   const isThirdStep = currentStep === 3;
+  const isFifthStep = currentStep === 5;
 
   const renderTooltip = (
     <HelpButton