Merge branch 'feature/scrolling-skeleton' of https://github.com/ONLYOFFICE/DocSpace-client into feature/scrolling-skeleton

packages/client/src/Shell.jsx

@@ -43,6 +43,7 @@ import { DeviceType, IndexedDBStores } from "@docspace/shared/enums";
 import indexedDbHelper from "@docspace/shared/utils/indexedDBHelper";
 import { useThemeDetector } from "@docspace/shared/hooks/useThemeDetector";
 import { sendToastReport } from "@docspace/shared/utils/crashReport";
+import { combineUrl } from "@docspace/shared/utils/combineUrl";
 
 import config from "PACKAGE_FILE";
 
@@ -77,6 +78,7 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
     userTheme,
     //user,
     userId,
+    userLoginEventId,
     currentDeviceType,
     timezone,
     showArticleLoader,
@@ -134,6 +136,7 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
       command: "subscribe",
       data: { roomParts: "backup-restore" },
     });
+
     socketHelper.on("restore-backup", () => {
       getRestoreProgress()
         .then((response) => {
@@ -159,7 +162,27 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
       command: "subscribe",
       data: { roomParts: "QUOTA", individual: true },
     });
-  }, [socketHelper]);
+
+    socketHelper.emit({
+      command: "subscribe",
+      data: { roomParts: userId },
+    });
+
+    socketHelper.on("s:logout-session", (loginEventId) => {
+      console.log(`[WS] "logout-session"`, loginEventId, userLoginEventId);
+
+      if (userLoginEventId === loginEventId || loginEventId === 0) {
+        window.location.replace(
+          combineUrl(window.ClientConfig?.proxy?.url, "/login"),
+        );
+      }
+    });
+  }, [
+    socketHelper,
+    userLoginEventId,
+    setPreparationPortalDialogVisible,
+    userId,
+  ]);
 
   const { t, ready } = useTranslation(["Common"]); //TODO: if enable banner ["Common", "SmartBanner"]
 
@@ -533,6 +556,7 @@ const ShellWrapper = inject(
       setSnackbarExist,
       userTheme: isFrame ? frameConfig?.theme : userTheme,
       userId: userStore?.user?.id,
+      userLoginEventId: userStore?.user?.loginEventId,
       currentDeviceType,
       showArticleLoader: clientLoadingStore.showArticleLoader,
       setPortalTariff,

packages/client/src/store/FilesActionsStore.js

@@ -2504,6 +2504,9 @@ class FilesActionStore {
     const { clearFiles, setBufferSelection } = this.filesStore;
     const { clearInsideGroup, insideGroupBackUrl } =
       this.peopleStore.groupsStore;
+    const { isLoading } = this.clientLoadingStore;
+
+    if (isLoading) return;
 
     setBufferSelection(null);
 

packages/doceditor/src/components/Root.tsx

@@ -103,6 +103,7 @@ const Root = ({
   const { filesSettings } = useFilesSettings({});
   const { socketHelper } = useSocketHelper({
     socketUrl: user ? settings?.socketUrl ?? "" : "",
+    user,
   });
   const {
     onSDKRequestSaveAs,

packages/doceditor/src/hooks/useSocketHelper.ts

@@ -29,12 +29,14 @@
 import React from "react";
 
 import SocketIOHelper from "@docspace/shared/utils/socket";
+import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import { getRestoreProgress } from "@docspace/shared/api/portal";
+import { getUser } from "@docspace/shared/api/people";
 import { EDITOR_ID } from "@docspace/shared/constants";
 
 import { UseSocketHelperProps } from "@/types";
 
-const useSocketHelper = ({ socketUrl }: UseSocketHelperProps) => {
+const useSocketHelper = ({ socketUrl, user }: UseSocketHelperProps) => {
   const [socketHelper, setSocketHelper] = React.useState<SocketIOHelper | null>(
     null,
   );
@@ -48,6 +50,11 @@ const useSocketHelper = ({ socketUrl }: UseSocketHelperProps) => {
       data: { roomParts: "backup-restore" },
     });
 
+    socketIOHelper.emit({
+      command: "subscribe",
+      data: { roomParts: user?.id || "" },
+    });
+
     socketIOHelper.on("restore-backup", async () => {
       try {
         const response = await getRestoreProgress();
@@ -69,6 +76,24 @@ const useSocketHelper = ({ socketUrl }: UseSocketHelperProps) => {
       }
     });
 
+    socketIOHelper.on("s:logout-session", async (loginEventId) => {
+      console.log(`[WS] "logout-session"`, loginEventId, user?.loginEventId);
+
+      if (
+        Number(loginEventId) === user?.loginEventId ||
+        Number(loginEventId) === 0
+      ) {
+        const docEditor =
+          typeof window !== "undefined" &&
+          window.DocEditor?.instances[EDITOR_ID];
+
+        docEditor?.requestClose();
+        window.location.replace(
+          combineUrl(window.ClientConfig?.proxy?.url, "/login"),
+        );
+      }
+    });
+
     setSocketHelper(socketIOHelper);
   }, [socketHelper, socketUrl]);
 
@@ -76,4 +101,3 @@ const useSocketHelper = ({ socketUrl }: UseSocketHelperProps) => {
 };
 
 export default useSocketHelper;
-

packages/doceditor/src/types/index.ts

@@ -334,6 +334,7 @@ export interface SelectFileDialogProps {
 
 export interface UseSocketHelperProps {
   socketUrl: string;
+  user?: TUser;
 }
 
 export interface UseEventsProps {

packages/shared/api/people/types.ts

@@ -71,6 +71,7 @@ export type TUser = {
   cultureName?: string;
   groups?: TUserGroup[];
   shared?: boolean;
+  loginEventId?: number;
 };
 
 export type TGetUserList = {

packages/shared/components/share/sub-components/LinkRow.tsx

@@ -154,6 +154,7 @@ const LinkRow = ({
               type="onlyIcon"
               isDisabled={isExpiredLink || isLoaded}
               manualWidth="fit-content"
+              withBackdrop={false}
             />
           </div>
         </StyledLinkRow>