Merge branch 'feature/reassign-data' of https://github.com/ONLYOFFICE/DocSpace into feature/reassign-data

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
@@ -37,21 +37,19 @@ const DataReassignmentDialog = ({
   dataReassignment,
   dataReassignmentProgress,
   currentColorScheme,
-  idCurrentUser,
+  currentUser,
   deleteProfile,
-  deleteAdministrator,
+  isDeleteUserReassignmentYourself,
   t,
   tReady,
   setFilter,
-  setDataReassignmentDeleteAdministrator,
+  setIsDeleteUserReassignmentYourself,
 }) => {
   const [selectorVisible, setSelectorVisible] = useState(false);
-
-  if (deleteAdministrator)
-    deleteAdministrator.label = deleteAdministrator.displayName;
-
-  const [selectedUser, setSelectedUser] = useState(deleteAdministrator);
-  const [isLoadingReassign, setIsLoadingReassign] = useState(false);
+  const defaultSelectedUser = isDeleteUserReassignmentYourself
+    ? currentUser
+    : null;
+  const [selectedUser, setSelectedUser] = useState(defaultSelectedUser);
   const [isDeleteProfile, setIsDeleteProfile] = useState(deleteProfile);
   const [showProgress, setShowProgress] = useState(false);
   const [isReassignCurrentUser, setIsReassignCurrentUser] = useState(false);
@@ -72,10 +70,13 @@ const DataReassignmentDialog = ({
 
   useEffect(() => {
     //If click Delete user
-    if (deleteAdministrator) onReassign();
+    if (isDeleteUserReassignmentYourself) onReassign();
 
-    return () => setDataReassignmentDeleteAdministrator(null);
-  }, [deleteAdministrator]);
+    return () => {
+      setIsDeleteUserReassignmentYourself(false);
+      clearInterval(timerId);
+    };
+  }, [isDeleteUserReassignmentYourself]);
 
   const onToggleDeleteProfile = () => {
     setIsDeleteProfile((remove) => !remove);
@@ -99,7 +100,7 @@ const DataReassignmentDialog = ({
   };
 
   const checkReassignCurrentUser = () => {
-    setIsReassignCurrentUser(idCurrentUser === selectedUser.id);
+    setIsReassignCurrentUser(currentUser.id === selectedUser.id);
   };
 
   const checkProgress = (id) => {
@@ -117,9 +118,8 @@ const DataReassignmentDialog = ({
       });
   };
 
-  const onReassign = useCallback(() => {
+  const onReassign = () => {
     checkReassignCurrentUser();
-    setIsLoadingReassign(true);
     setShowProgress(true);
 
     dataReassignment(user.id, selectedUser.id, isDeleteProfile)
@@ -131,9 +131,7 @@ const DataReassignmentDialog = ({
       .catch((error) => {
         toastr.error(error?.response?.data?.error?.message);
       });
-
-    setIsLoadingReassign(false);
-  }, [user, selectedUser, isDeleteProfile]);
+  };
 
   if (selectorVisible) {
     return (
@@ -199,7 +197,6 @@ const DataReassignmentDialog = ({
           onToggleDeleteProfile={onToggleDeleteProfile}
           selectedUser={selectedUser}
           onReassign={onReassign}
-          isLoadingReassign={isLoadingReassign}
           percent={percent}
           onClose={onClose}
         />
@@ -212,13 +209,13 @@ export default inject(({ auth, peopleStore, setup }) => {
   const {
     setDataReassignmentDialogVisible,
     dataReassignmentDeleteProfile,
-    dataReassignmentDeleteAdministrator,
-    setDataReassignmentDeleteAdministrator,
+    isDeleteUserReassignmentYourself,
+    setIsDeleteUserReassignmentYourself,
   } = peopleStore.dialogStore;
   const { currentColorScheme } = auth.settingsStore;
   const { dataReassignment, dataReassignmentProgress } = setup;
 
-  const { id: idCurrentUser } = peopleStore.authStore.userStore.user;
+  const { user: currentUser } = peopleStore.authStore.userStore;
 
   const { setFilterParams: setFilter } = peopleStore.filterStore;
 
@@ -227,12 +224,12 @@ export default inject(({ auth, peopleStore, setup }) => {
     theme: auth.settingsStore.theme,
     currentColorScheme,
     dataReassignment,
-    idCurrentUser,
+    currentUser,
     dataReassignmentProgress,
     deleteProfile: dataReassignmentDeleteProfile,
     setFilter,
-    deleteAdministrator: dataReassignmentDeleteAdministrator,
-    setDataReassignmentDeleteAdministrator,
+    isDeleteUserReassignmentYourself,
+    setIsDeleteUserReassignmentYourself,
   };
 })(
   observer(

packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/NewOwner.js

@@ -18,7 +18,11 @@ const ChoiceNewOwner = ({
     return (
       <StyledSelectedOwnerContainer>
         <StyledSelectedOwner currentColorScheme={currentColorScheme}>
-          <Text className="text">{selectedUser.label}</Text>
+          <Text className="text">
+            {selectedUser.displayName
+              ? selectedUser.displayName
+              : selectedUser.label}
+          </Text>
         </StyledSelectedOwner>
 
         <Link

packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/index.js

@@ -1,5 +1,5 @@
 import Progress from "./Progress";
-import Loader from "./Loader";
+import DataReassignmentLoader from "@docspace/common/components/Loaders/DataReassignmentLoader";
 import AccountInfo from "./AccountInfo";
 import Description from "./Description";
 import NewOwner from "./NewOwner";
@@ -15,14 +15,18 @@ const Body = ({
   currentColorScheme,
   onTogglePeopleSelector,
 }) => {
-  if (!tReady) return <Loader />;
+  if (!tReady) return <DataReassignmentLoader />;
 
   if (showProgress)
     return (
       <Progress
         isReassignCurrentUser={isReassignCurrentUser}
         fromUser={user.displayName}
-        toUser={selectedUser.label}
+        toUser={
+          selectedUser.displayName
+            ? selectedUser.displayName
+            : selectedUser.label
+        }
         percent={percent}
       />
     );

packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Footer/index.js

@@ -10,7 +10,6 @@ const Footer = ({
   onToggleDeleteProfile,
   selectedUser,
   onReassign,
-  isLoadingReassign,
   percent,
   onClose,
 }) => {
@@ -52,7 +51,6 @@ const Footer = ({
           scale
           isDisabled={!selectedUser}
           onClick={onReassign}
-          isLoading={isLoadingReassign}
         />
 
         <Button

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

@@ -74,7 +74,7 @@ const DeleteProfileEverDialogComponent = (props) => {
     setDataReassignmentDialogVisible,
     setDeleteProfileDialogVisible,
     setDataReassignmentDeleteProfile,
-    setDataReassignmentDeleteAdministrator,
+    setIsDeleteUserReassignmentYourself,
     userPerformedDeletion,
     setDialogData,
   } = props;
@@ -134,7 +134,7 @@ const DeleteProfileEverDialogComponent = (props) => {
 
     setDialogData(user);
 
-    setDataReassignmentDeleteAdministrator(userPerformedDeletion);
+    setIsDeleteUserReassignmentYourself(true);
     setDataReassignmentDialogVisible(true);
     setDataReassignmentDeleteProfile(true);
     setDeleteProfileDialogVisible(false);
@@ -217,7 +217,7 @@ export default inject(({ peopleStore }) => {
     setDataReassignmentDialogVisible,
     setDeleteProfileDialogVisible,
     setDataReassignmentDeleteProfile,
-    setDataReassignmentDeleteAdministrator,
+    setIsDeleteUserReassignmentYourself,
     setDialogData,
   } = dialogStore;
 
@@ -228,7 +228,7 @@ export default inject(({ peopleStore }) => {
     setDataReassignmentDialogVisible,
     setDeleteProfileDialogVisible,
     setDataReassignmentDeleteProfile,
-    setDataReassignmentDeleteAdministrator,
+    setIsDeleteUserReassignmentYourself,
     setDialogData,
     setSelected,
     removeUser: peopleStore.usersStore.removeUser,

packages/client/src/store/DialogStore.js

@@ -14,7 +14,7 @@ class DialogStore {
   resetAuthDialogVisible = false;
   dataReassignmentDialogVisible = false;
   dataReassignmentDeleteProfile = false;
-  dataReassignmentDeleteAdministrator = null;
+  isDeleteUserReassignmentYourself = false;
 
   constructor() {
     makeAutoObservable(this);
@@ -36,11 +36,8 @@ class DialogStore {
     this.dataReassignmentDeleteProfile = dataReassignmentDeleteProfile;
   };
 
-  setDataReassignmentDeleteAdministrator = (
-    dataReassignmentDeleteAdministrator
-  ) => {
-    this.dataReassignmentDeleteAdministrator =
-      dataReassignmentDeleteAdministrator;
+  setIsDeleteUserReassignmentYourself = (isDeleteUserReassignmentYourself) => {
+    this.isDeleteUserReassignmentYourself = isDeleteUserReassignmentYourself;
   };
 
   setDialogData = (data) => {

packages/common/components/Loaders/DataReassignmentLoader/DataReassignmentLoader.js

@@ -1,52 +1,10 @@
 import RectangleLoader from "@docspace/common/components/Loaders/RectangleLoader";
 import CircleLoader from "@docspace/common/components//Loaders/CircleLoader";
-import styled from "styled-components";
+import StyledDataReassignmentLoader from "./StyledDataReassignmentLoader";
 
-const StyledLoader = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-
-  .user {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  .name {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .avatar {
-    width: 80px;
-    height: 80px;
-  }
-
-  .new-owner_header {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding-bottom: 12px;
-  }
-
-  .new-owner_add {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .description {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-`;
-
-const Loader = () => {
+const DataReassignmentLoader = () => {
   return (
-    <StyledLoader>
+    <StyledDataReassignmentLoader>
       <div className="user">
         <CircleLoader className="avatar" radius="40" x="40" y="40" />
 
@@ -73,8 +31,8 @@ const Loader = () => {
         <RectangleLoader width="223" height="20" />
         <RectangleLoader width="160" height="20" />
       </div>
-    </StyledLoader>
+    </StyledDataReassignmentLoader>
   );
 };
 
-export default Loader;
+export default DataReassignmentLoader;

packages/common/components/Loaders/DataReassignmentLoader/StyledDataReassignmentLoader.js

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+const StyledDataReassignmentLoader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  .user {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .name {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .avatar {
+    width: 80px;
+    height: 80px;
+  }
+
+  .new-owner_header {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-bottom: 12px;
+  }
+
+  .new-owner_add {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .description {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+`;
+
+export default StyledDataReassignmentLoader;

packages/common/components/Loaders/DataReassignmentLoader/index.js

@@ -0,0 +1 @@
+export default from "./DataReassignmentLoader";