fix bad merge

packages/client/src/HOCs/withPeopleContent.js

@@ -67,14 +67,14 @@ export default function withContent(WrappedContent) {
     const onContentRowClick = (e, user) => {
       if (
         e.target?.tagName === "A" ||
-        e.target.closest(".checkbox") ||
-        e.target.closest(".table-container_row-checkbox") ||
-        e.target.closest(".type-combobox") ||
-        e.target.closest(".groups-combobox") ||
-        e.target.closest(".paid-badge") ||
-        e.target.closest(".pending-badge") ||
-        e.target.closest(".disabled-badge") ||
-        e.target.closest(".dropdown-container") ||
+        e.target?.closest(".checkbox") ||
+        e.target?.closest(".table-container_row-checkbox") ||
+        e.target?.closest(".type-combobox") ||
+        e.target?.closest(".groups-combobox") ||
+        e.target?.closest(".paid-badge") ||
+        e.target?.closest(".pending-badge") ||
+        e.target?.closest(".disabled-badge") ||
+        e.target?.closest(".dropdown-container") ||
         e.detail === 0
       ) {
         return;

packages/client/src/components/FilesPanels/index.js

@@ -317,6 +317,8 @@ const Panels = (props) => {
       />
     ),
     pdfFormEditVisible && <PDFFormEditingDialog key="pdf-form-edit-dialog" />,
+
+    userSessionsPanelVisible && <UserSessionsPanel key="user-sessions-panel" />,
   ];
 };
 

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

@@ -25,21 +25,23 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import { useState } from "react";
+import { inject, observer } from "mobx-react";
 import { ModalDialog } from "@docspace/shared/components/modal-dialog";
 import { Checkbox } from "@docspace/shared/components/checkbox";
 import { Button } from "@docspace/shared/components/button";
-import { Box } from "@docspace/shared/components/box";
 import { Text } from "@docspace/shared/components/text";
 
 import ModalDialogContainer from "../ModalDialogContainer";
 
 const LogoutAllSessionDialog = ({
   t,
+  data,
   visible,
-  onClose,
   isLoading,
+  onClose,
   onRemoveAllSessions,
   onRemoveAllExceptThis,
+  isSeveralSelection,
 }) => {
   const [isChecked, setIsChecked] = useState(false);
 
@@ -51,6 +53,29 @@ const LogoutAllSessionDialog = ({
     isChecked ? onRemoveAllSessions() : onRemoveAllExceptThis();
   };
 
+  const isProfile = location.pathname.includes("/profile");
+
+  const bodySubtitle =
+    isSeveralSelection || isProfile
+      ? t("Profile:LogoutDescription")
+      : t("Profile:LogoutCurrentUserDescription", {
+          displayName: data?.displayName,
+        });
+
+  const bodyText = !isSeveralSelection && (
+    <>
+      <Text style={{ margin: "15px 0px" }}>
+        {t("Profile:DescriptionForSecurity")}
+      </Text>
+      <Checkbox
+        style={{ display: "inline-flex" }}
+        label={t("Profile:ChangePasswordAfterLoggingOut")}
+        isChecked={isChecked}
+        onChange={onChangeCheckbox}
+      />
+    </>
+  );
+
   return (
     <ModalDialogContainer
       visible={visible}
@@ -61,18 +86,8 @@ const LogoutAllSessionDialog = ({
         {t("Profile:LogoutAllActiveConnections")}
       </ModalDialog.Header>
       <ModalDialog.Body>
-        <Text>{t("Profile:LogoutDescription")}</Text>
-        <Text style={{ margin: "15px 0" }}>
-          {t("Profile:DescriptionForSecurity")}
-        </Text>
-        <Box displayProp="flex" alignItems="center">
-          <Checkbox
-            className="change-password"
-            isChecked={isChecked}
-            onChange={onChangeCheckbox}
-          />
-          {t("Profile:ChangePasswordAfterLoggingOut")}
-        </Box>
+        {bodySubtitle}
+        {bodyText}
       </ModalDialog.Body>
       <ModalDialog.Footer>
         <Button
@@ -99,4 +114,10 @@ const LogoutAllSessionDialog = ({
   );
 };
 
-export default LogoutAllSessionDialog;
+export default inject(({ peopleStore }) => {
+  const { isSeveralSelection } = peopleStore.selectionStore;
+
+  return {
+    isSeveralSelection,
+  };
+})(observer(LogoutAllSessionDialog));

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

@@ -13,7 +13,7 @@ const Wrapper = styled.div`
   }
 
   .desciption {
-    color: ${(props) => props.theme.activeSessions.subtitleColor};
+    color: ${(props) => props.theme.profile.activeSessions.subtitleColor};
     margin-bottom: 20px;
   }
 `;
@@ -26,7 +26,7 @@ const AllSessionsBlock = (props) => {
   };
 
   const foundSession = allSessions.find(
-    (session) => session?.userId === data?.userId
+    (session) => session?.userId === data?.userId,
   );
 
   const sessionsData = foundSession

packages/client/src/components/panels/UserSessionsPanel/LastSessionBlock.js

@@ -12,7 +12,7 @@ const StyledLastSessionBlock = styled.div`
   }
 
   .online {
-    color: ${(props) => props.theme.activeSessions.textOnlineColor};
+    color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
   }
 
   .session-info-wrapper {

packages/client/src/components/panels/UserSessionsPanel/UserInfoBlock.js

@@ -22,14 +22,14 @@ const StyledUserInfoBlock = styled.div`
   .icon-button_svg {
     svg {
       path {
-        fill: ${(props) => props.theme.activeSessions.iconColor};
+        fill: ${(props) => props.theme.profile.activeSessions.iconColor};
       }
     }
   }
 
   span {
     font-size: 13px;
-    color: ${(props) => props.theme.activeSessions.tableCellColor};
+    color: ${(props) => props.theme.profile.activeSessions.tableCellColor};
     font-weight: 600;
   }
 

packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRowContent.js

@@ -18,7 +18,7 @@ const StyledRowContent = styled(RowContent)`
   .date {
     font-size: 14px;
     font-weight: 600;
-    color: ${(props) => props.theme.activeSessions.tableCellColor};
+    color: ${(props) => props.theme.profile.activeSessions.tableCellColor};
     margin-left: 4px;
   }
 
@@ -49,7 +49,7 @@ const SessionsRowContent = ({
     <StyledRowContent
       key={id}
       sectionWidth={sectionWidth}
-      sideColor={theme.activeSessions.tableCellColor}
+      sideColor={theme.profile.activeSessions.tableCellColor}
     >
       <Text fontSize="14px" fontWeight="600" containerWidth="160px" truncate>
         {platform}, {browser}

packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js

@@ -27,6 +27,9 @@
 import DeleteReactSvgUrl from "PUBLIC_DIR/images/delete.react.svg?url";
 import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
 import ActionsHeaderTouchReactSvgUrl from "PUBLIC_DIR/images/actions.header.touch.react.svg?url";
+import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
+import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
+import LogoutReactSvgUrl from "PUBLIC_DIR/images/logout.react.svg?url";
 import React from "react";
 import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
@@ -157,6 +160,35 @@ const HeaderContainer = styled.div`
 
 const StyledContainer = styled.div`
   .group-button-menu-container {
+    height: 69px;
+    position: absolute;
+    z-index: 201;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+
+    @media ${tablet} {
+      height: 60px;
+    }
+
+    @media ${mobile} {
+      height: 52px;
+    }
+
+    .table-container_group-menu {
+      border-image-slice: 0;
+      border-image-source: none;
+      border-bottom: 1px solid
+        ${(props) => props.theme.filesSection.tableView.row.borderColor};
+      box-shadow: ${(props) =>
+        props.theme.profile.activeSessions.boxShadowColor};
+      padding: 0px;
+    }
+
+    .table-container_group-menu-separator {
+      margin: 0 16px;
+    }
+
     ${(props) =>
       props.viewAs === "table"
         ? css`
@@ -187,6 +219,8 @@ const SectionHeaderContent = (props) => {
   const navigate = useNavigate();
   const location = useLocation();
 
+  const isSessionsPage = location.pathname.includes("/sessions");
+
   const [state, setState] = React.useState({
     header: "",
     isCategoryOrHeader: false,
@@ -291,13 +325,17 @@ const SectionHeaderContent = (props) => {
   };
 
   const onCheck = (checked) => {
-    const { setSelected } = props;
-    setSelected(checked ? "all" : "close");
+    const { setupSetSelected, peopleSetSelected } = props;
+    isSessionsPage
+      ? peopleSetSelected(checked ? "all" : "close", isSessionsPage)
+      : setupSetSelected(checked ? "all" : "close");
   };
 
   const onSelectAll = () => {
-    const { setSelected } = props;
-    setSelected("all");
+    const { setupSetSelected, peopleSetSelected } = props;
+    isSessionsPage
+      ? peopleSetSelected("all", isSessionsPage)
+      : setupSetSelected("all");
   };
 
   const removeAdmins = () => {
@@ -310,15 +348,46 @@ const SectionHeaderContent = (props) => {
     t,
     isLoadedSectionHeader,
 
-    isHeaderIndeterminate,
-    isHeaderChecked,
-    isHeaderVisible,
-    selection,
+    isSetupleHeaderIndeterminate,
+    isSetupHeaderVisible,
+    isSetupHeaderChecked,
+
+    isPeopleHeaderIndeterminate,
+    isPeopleHeaderVisible,
+    isPeopleHeaderChecked,
+    setupSelection,
+    setDisableDialogVisible,
+    setLogoutAllDialogVisible,
+    isSeveralSelection,
+    peopleSelection,
+    setSessionModalData,
+    setUserSessionPanelVisible,
   } = props;
   const { header, isCategoryOrHeader, isNeedPaidIcon } = state;
   const arrayOfParams = getArrayOfParams();
 
-  const menuItems = (
+  const menuItems = isSessionsPage ? (
+    <>
+      <DropDownItem
+        key="all"
+        label={t("Files:All")}
+        data-index={1}
+        onClick={onSelectAll}
+      />
+      <DropDownItem
+        key="online"
+        label={t("Common:Online")}
+        data-index={2}
+        onClick={() => console.log("online")}
+      />
+      <DropDownItem
+        key="offline"
+        label={t("Common:Offline")}
+        data-index={3}
+        onClick={() => console.log("offline")}
+      />
+    </>
+  ) : (
     <>
       <DropDownItem
         key="all"
@@ -326,13 +395,53 @@ const SectionHeaderContent = (props) => {
         data-index={1}
         onClick={onSelectAll}
       />
+      <></>
     </>
   );
 
-  const headerMenu = [
+  const onClickSessions = () => {
+    setSessionModalData({ ...peopleSelection[0] });
+    setUserSessionPanelVisible(true);
+  };
+
+  const onClickLogout = () => {
+    setSessionModalData({ displayName: peopleSelection[0].displayName });
+    setLogoutAllDialogVisible(true);
+  };
+
+  const onClickDisable = () => {
+    setDisableDialogVisible(true);
+  };
+
+  const headerMenu = isSessionsPage
+    ? [
+        {
+          id: "sessions",
+          key: "Sessions",
+          label: t("Common:Sessions"),
+          disabled: isSeveralSelection,
+          onClick: onClickSessions,
+          iconUrl: HistoryFinalizedReactSvgUrl,
+        },
+        {
+          id: "logout",
+          key: "Logout",
+          label: t("Common:Logout"),
+          onClick: onClickLogout,
+          iconUrl: LogoutReactSvgUrl,
+        },
+        {
+          id: "Disable",
+          key: "Disable",
+          label: t("Common:DisableUserButton"),
+          onClick: onClickDisable,
+          iconUrl: RemoveSvgUrl,
+        },
+      ]
+    : [
         {
           label: t("Common:Delete"),
-      disabled: !selection || !selection.length > 0,
+          disabled: !setupSelection || !setupSelection.length > 0,
           onClick: removeAdmins,
           iconUrl: DeleteReactSvgUrl,
         },
@@ -345,6 +454,18 @@ const SectionHeaderContent = (props) => {
     pathname.includes("nextcloud") ||
     pathname.includes("onlyoffice");
 
+  const isHeaderVisible = isSessionsPage
+    ? isPeopleHeaderVisible
+    : isSetupHeaderVisible;
+
+  const isHeaderChecked = isSessionsPage
+    ? isPeopleHeaderChecked
+    : isSetupHeaderChecked;
+
+  const isHeaderIndeterminate = isSessionsPage
+    ? isPeopleHeaderIndeterminate
+    : isSetupleHeaderIndeterminate;
+
   return (
     <StyledContainer isHeaderVisible={isHeaderVisible}>
       {isHeaderVisible ? (
@@ -419,47 +540,77 @@ const SectionHeaderContent = (props) => {
   );
 };
 
-export default inject(({ currentQuotaStore, setup, common }) => {
+export default inject(
+  ({ currentQuotaStore, setup, common, peopleStore, dialogsStore }) => {
     const {
       isBrandingAndCustomizationAvailable,
       isRestoreAndAutoBackupAvailable,
       isSSOAvailable,
     } = currentQuotaStore;
     const { addUsers, removeAdmins } = setup.headerAction;
-  const { toggleSelector } = setup;
+    const {
+      toggleSelector,
+      setDisableDialogVisible,
+      setLogoutDialogVisible,
+      setLogoutAllDialogVisible,
+      setSessionModalData,
+    } = setup;
     const {
       selected,
-    setSelected,
-    isHeaderIndeterminate,
-    isHeaderChecked,
-    isHeaderVisible,
+      setSelected: setupSetSelected,
+      isHeaderIndeterminate: isSetupHeaderIndeterminate,
+      isHeaderChecked: isSetupHeaderChecked,
+      isHeaderVisible: isSetupHeaderVisible,
       deselectUser,
       selectAll,
-    selection,
+      selection: setupSelection,
     } = setup.selectionStore;
+
+    const {
+      isHeaderIndeterminate: isPeopleHeaderIndeterminate,
+      isHeaderChecked: isPeopleHeaderChecked,
+      isHeaderVisible: isPeopleHeaderVisible,
+      setSelected: peopleSetSelected,
+      isSeveralSelection,
+      selection: peopleSelection,
+    } = peopleStore.selectionStore;
+
     const { admins, selectorIsOpen } = setup.security.accessRight;
     const { isLoadedSectionHeader, setIsLoadedSectionHeader } = common;
+    const { setUserSessionPanelVisible } = dialogsStore;
     return {
       addUsers,
       removeAdmins,
       selected,
-    setSelected,
+      setupSetSelected,
       admins,
-    isHeaderIndeterminate,
-    isHeaderChecked,
-    isHeaderVisible,
+      isSetupHeaderIndeterminate,
+      isSetupHeaderChecked,
+      isSetupHeaderVisible,
       deselectUser,
       selectAll,
       toggleSelector,
       selectorIsOpen,
-    selection,
+      setupSelection,
       isLoadedSectionHeader,
       setIsLoadedSectionHeader,
       isBrandingAndCustomizationAvailable,
       isRestoreAndAutoBackupAvailable,
       isSSOAvailable,
+      peopleSetSelected,
+      peopleSelection,
+      isPeopleHeaderIndeterminate,
+      isPeopleHeaderChecked,
+      isPeopleHeaderVisible,
+      isSeveralSelection,
+      setDisableDialogVisible,
+      setLogoutDialogVisible,
+      setLogoutAllDialogVisible,
+      setSessionModalData,
+      setUserSessionPanelVisible,
     };
-})(
+  },
+)(
   withLoading(
     withTranslation(["Settings", "SingleSignOn", "Common", "JavascriptSdk"])(
       observer(SectionHeaderContent),

packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js

@@ -5,14 +5,14 @@ import { RowContent } from "@docspace/shared/components/row-content";
 const StyledRowContent = styled(RowContent)`
   .online {
     font-weight: 600;
-    color: ${(props) => props.theme.activeSessions.textOnlineColor};
+    color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
     margin-left: 4px;
     font-size: 14px;
   }
 
   .offline {
     font-weight: 600;
-    color: ${(props) => props.theme.activeSessions.tableCellColor};
+    color: ${(props) => props.theme.profile.activeSessions.tableCellColor};
     font-size: 14px;
     margin-left: 4px;
   }
@@ -38,7 +38,7 @@ const SessionsRowContent = ({ sectionWidth, item }) => {
     <StyledRowContent
       key={userId}
       sectionWidth={sectionWidth}
-      sideColor={theme.activeSessions.tableCellColor}
+      sideColor={theme.profile.activeSessions.tableCellColor}
     >
       <Text fontSize="14px" fontWeight="600">
         {displayName}

packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js

@@ -1,10 +1,8 @@
-import { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { useCallback } from "react";
 import { Base } from "@docspace/shared/themes";
 import styled, { css } from "styled-components";
 import withContent from "SRC_DIR/HOCs/withPeopleContent";
-import io from "socket.io-client";
 
 import { TableRow } from "@docspace/shared/components/table";
 import { TableCell } from "@docspace/shared/components/table";
@@ -116,12 +114,12 @@ const StyledTableRow = styled(TableRow)`
 
   .session-info {
     font-weight: 600;
-    color: ${(props) => props.theme.activeSessions.tableCellColor};
+    color: ${(props) => props.theme.profile.activeSessions.tableCellColor};
   }
 
   .online {
     font-weight: 600;
-    color: ${(props) => props.theme.activeSessions.textOnlineColor};
+    color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
   }
 `;
 
@@ -148,10 +146,7 @@ const SessionsTableRow = (props) => {
     setDisableDialogVisible,
     setSessionModalData,
     setUserSessionPanelVisible,
-    userId,
   } = props;
-  const [sessions, setSessions] = useState([]);
-  const [socket, setSocket] = useState(null);
 
   const onClickSessions = () => {
     setSessionModalData({ ...item });
@@ -217,29 +212,6 @@ const SessionsTableRow = (props) => {
 
     onContentRowClick && onContentRowClick(!isChecked, item);
   };
-  // console.log(socket);
-
-  useEffect(() => {
-    const socketIo = io("/onlineusers");
-
-    console.log(socketIo);
-
-    setSocket(socketIo);
-
-    console.log({ userIds: userId });
-
-    socketIo.emit("getSessionsInPortal", {
-      userIds: userId,
-    });
-
-    socketIo.on("statuses-in-room", (data) => {
-      setSessions(data);
-      console.log(data);
-    });
-    return () => {
-      socketIo.disconnect();
-    };
-  }, []);
 
   return (
     <Wrapper

packages/client/src/store/DialogsStore.js

@@ -112,10 +112,9 @@ class DialogsStore {
   editMembersGroup = null;
   pdfFormEditVisible = false;
   pdfFormEditData = null;
-
   shareFolderDialogVisible = false;
+  userSessionsPanelVisible = false;
   cancelUploadDialogVisible = false;
-
   selectFileFormRoomFilterParam = FilesSelectorFilterTypes.DOCX;
 
   constructor(
@@ -518,6 +517,10 @@ class DialogsStore {
     this.pdfFormEditVisible = visible;
     this.pdfFormEditData = data;
   };
+
+  setUserSessionPanelVisible = (visible) => {
+    this.userSessionsPanelVisible = visible;
+  };
 }
 
 export default DialogsStore;

packages/client/src/store/SelectionPeopleStore.js

@@ -30,6 +30,7 @@ import { getUserStatus } from "../helpers/people-helpers";
 
 class SelectionStore {
   peopleStore = null;
+  allSessions = [];
   selection = [];
   selectionUsersRights = {
     isVisitor: 0,
@@ -254,17 +255,21 @@ class SelectionStore {
     return newSelection;
   };
 
-  setSelected = (selected) => {
+  setSelected = (selected, isSessionsPage) => {
     this.bufferSelection = null;
     this.selected = selected;
+    const sessions = this.allSessions;
     const list = this.peopleStore.usersStore.peopleList;
-    this.setSelection(this.getUsersBySelected(list, selected));
 
     if (selected !== "none" && selected !== "close") {
       this.resetUsersRight();
       list.forEach((u) => this.incrementUsersRights(u));
     }
 
+    isSessionsPage
+      ? this.setSelection(this.getUsersBySelected(sessions, selected))
+      : this.setSelection(this.getUsersBySelected(list, selected));
+
     return selected;
   };
 
@@ -406,6 +411,30 @@ class SelectionStore {
 
     return users.length > 0;
   }
+
+  get isSeveralSelection() {
+    return this.selection.length > 1;
+  }
+
+  get isHeaderVisible() {
+    return this.selection.length > 0;
+  }
+
+  get isHeaderIndeterminate() {
+    return (
+      this.isHeaderVisible && this.selection.length !== this.allSessions.length
+    );
+  }
+
+  get isHeaderChecked() {
+    return (
+      this.isHeaderVisible && this.selection.length === this.allSessions.length
+    );
+  }
+
+  setAllSessions = (sessions) => {
+    this.allSessions = sessions;
+  };
 }
 
 export default SelectionStore;

packages/client/src/store/SettingsSetupStore.js

@@ -49,6 +49,7 @@ class SettingsSetupStore {
   isInit = false;
   logoutDialogVisible = false;
   logoutAllDialogVisible = false;
+  disableDialogVisible = false;
   viewAs = isDesktop() ? "table" : "row";
 
   isLoadingDownloadReport = false;
@@ -581,6 +582,12 @@ class SettingsSetupStore {
     this.sessions = sessions;
   };
 
+  setSessionModalData = (data) => {
+    this.sessionModalData = {
+      ...data,
+    };
+  };
+
   setPlatformModalData = (data) => {
     this.platformModalData = {
       id: data.id,