Web: Client: Panels. UserSessionPanel. added additional conditions and disable button

packages/client/src/Shell.jsx

@@ -155,6 +155,8 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
   }, []);
 
   useEffect(() => {
+    if (!socketHelper.isEnabled) return;
+
     socketHelper.emit({
       command: "subscribeToPortal",
     });

packages/client/src/components/panels/UserSessionsPanel/AllSessionsBlock.tsx

@@ -66,6 +66,7 @@ const AllSessionsBlock = (props: AllSessionsBlockProps) => {
   const {
     t,
     isLoading,
+    isDisabled,
     items = {} as IAllSessions,
     onClickLogoutAllExceptThis = () => {},
   } = props;
@@ -75,7 +76,9 @@ const AllSessionsBlock = (props: AllSessionsBlockProps) => {
   const sessions = items.sessions || items.connections;
 
   const filteredSessions = sessions
-    .filter((session) => session.status === "offline")
+    .filter(
+      (session) => session.status === "offline" && session.id !== exceptId,
+    )
     .reverse();
 
   return (
@@ -89,6 +92,7 @@ const AllSessionsBlock = (props: AllSessionsBlockProps) => {
             size={ButtonSize.small}
             onClick={() => onClickLogoutAllExceptThis(t, exceptId, displayName)}
             scale
+            isDisabled={isDisabled}
             isLoading={isLoading}
           />
         ) : (
@@ -107,10 +111,11 @@ const AllSessionsBlock = (props: AllSessionsBlockProps) => {
 };
 
 export default inject<TStore>(({ peopleStore }) => {
-  const { getItems, isLoading, onClickLogoutAllExceptThis } =
+  const { getItems, isLoading, onClickLogoutAllExceptThis, isDisabled } =
     peopleStore.selectionStore as unknown as SelectionPeopleStore;
 
   return {
+    isDisabled,
     items: getItems,
     isLoading,
     onClickLogoutAllExceptThis,

packages/client/src/components/panels/UserSessionsPanel/UserSessionsPanel.types.ts

@@ -49,6 +49,7 @@ export interface LastSessionBlockProps {
 export interface AllSessionsBlockProps {
   t: TTranslation;
   isLoading?: boolean;
+  isDisabled: boolean;
   items?: IAllSessions;
   onClickLogoutAllExceptThis?: (
     t: TTranslation,
@@ -67,6 +68,7 @@ export interface SessionsRowProps {
   t: TTranslation;
   item: ISessions | IConnections;
   connections?: IConnections;
+  setIsDisabled: (disabled: boolean) => void;
   sectionWidth: number;
   setLogoutDialogVisible?: (visible: boolean) => void;
   setPlatformData?: (item: ISessions) => void;

packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRow.tsx

@@ -23,7 +23,7 @@
 // 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 { useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { Row } from "@docspace/shared/components/row";
 import { IconButton } from "@docspace/shared/components/icon-button";
@@ -42,17 +42,22 @@ const SessionsRow = (props: SessionsRowProps) => {
   const {
     item,
     connections,
+    setIsDisabled,
     setLogoutDialogVisible = () => {},
     setPlatformData = () => {},
   } = props;
 
+  const isEqualSession = item.id === connections?.id;
+
+  useEffect(() => {
+    setIsDisabled(isEqualSession);
+  }, [isEqualSession, setIsDisabled]);
+
   const onClickDisable = () => {
     setLogoutDialogVisible(true);
     setPlatformData(item);
   };
 
-  const isEqualSession = item.id === connections?.id;
-
   const contentElement = !isEqualSession && (
     <IconButton
       size={20}
@@ -75,7 +80,7 @@ const SessionsRow = (props: SessionsRowProps) => {
 
 export default inject<TStore>(({ setup, peopleStore }) => {
   const { setLogoutDialogVisible, setPlatformModalData } = setup;
-  const { platformData, setPlatformData, items } =
+  const { platformData, setPlatformData, items, setIsDisabled } =
     peopleStore.selectionStore as unknown as SelectionPeopleStore;
 
   return {
@@ -84,5 +89,6 @@ export default inject<TStore>(({ setup, peopleStore }) => {
     setPlatformModalData,
     platformData,
     setPlatformData,
+    setIsDisabled,
   };
 })(observer(SessionsRow));

packages/client/src/store/SelectionPeopleStore.js

@@ -39,6 +39,7 @@ class SelectionStore {
   items;
   platformData = [];
   isLoading = false;
+  isDisabled = false;
   selection = [];
   selectionUsersRights = {
     isVisitor: 0,
@@ -497,6 +498,10 @@ class SelectionStore {
     this.fromDateAgo[id] = value;
   };
 
+  setIsDisabled = (isDisabled) => {
+    this.isDisabled = isDisabled;
+  };
+
   getFromDateAgo = (sessionId) => {
     return this.fromDateAgo[sessionId] || "";
   };