added view sessions panel

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

@@ -10,6 +10,7 @@ import {
   InvitePanel,
   EditLinkPanel,
   EmbeddingPanel,
+  UserSessionsPanel,
 } from "../panels";
 import {
   ConnectDialog,
@@ -89,6 +90,7 @@ const Panels = (props) => {
     changeRoomOwnerIsVisible,
     deletePluginDialogVisible,
     shareFolderDialogVisible,
+    userSessionsPanelVisible,
   } = props;
 
   const { t } = useTranslation(["Translations", "Common"]);
@@ -194,6 +196,8 @@ const Panels = (props) => {
       <ChangeRoomOwnerPanel key="change-room-owner" />
     ),
     shareFolderDialogVisible && <ShareFolderDialog key="share-folder-dialog" />,
+
+    userSessionsPanelVisible && <UserSessionsPanel key="user-sessions-panel" />,
   ];
 };
 
@@ -247,6 +251,7 @@ export default inject(
       leaveRoomDialogVisible,
       changeRoomOwnerIsVisible,
       shareFolderDialogVisible,
+      userSessionsPanelVisible,
     } = dialogsStore;
 
     const { preparationPortalDialogVisible } = backup;
@@ -307,6 +312,7 @@ export default inject(
       changeRoomOwnerIsVisible,
       deletePluginDialogVisible,
       shareFolderDialogVisible,
+      userSessionsPanelVisible,
     };
   }
 )(observer(Panels));

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

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+import { Scrollbar } from "@docspace/shared/components/scrollbar";
+import { Base } from "@docspace/shared/themes";
+
+const StyledUserSessionsPanel = styled.div`
+  .user-sessions-panel {
+    .scroll-body {
+      padding-right: 0px !important;
+    }
+  }
+
+  .user-sessions-header {
+    padding: 0px 16px;
+    border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
+
+    .header-text {
+      font-weight: 700;
+      font-size: 21px;
+      margin: 12px 0px;
+    }
+  }
+`;
+
+const StyledScrollbar = styled(Scrollbar)`
+  position: relative;
+  padding: 16px 0;
+  height: calc(100vh - 87px) !important;
+`;
+
+StyledUserSessionsPanel.defaultProps = { theme: Base };
+
+export { StyledUserSessionsPanel, StyledScrollbar };

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

@@ -0,0 +1,108 @@
+import { inject, observer } from "mobx-react";
+import { withTranslation } from "react-i18next";
+import { isMobile } from "react-device-detect";
+import { Base } from "@docspace/shared/themes";
+import { tablet } from "@docspace/shared/utils";
+import { Row } from "@docspace/shared/components/row";
+import { Avatar } from "@docspace/shared/components/avatar";
+import styled, { css } from "styled-components";
+
+import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
+import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
+
+const marginStyles = css`
+  margin-left: -24px;
+  margin-right: -24px;
+  padding-left: 24px;
+  padding-right: 24px;
+
+  @media ${tablet} {
+    margin-left: -16px;
+    margin-right: -16px;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+`;
+
+const checkedStyle = css`
+  background: ${(props) => props.theme.filesSection.rowView.checkedBackground};
+  ${marginStyles}
+`;
+
+const Wrapper = styled.div`
+  padding: 24px 20px;
+`;
+
+const UserSessions = (props) => {
+  const {
+    t,
+    data,
+    setLogoutAllDialogVisible,
+    setDisableDialogVisible,
+    setSessionModalData,
+  } = props;
+
+  const contextOptions = [
+    {
+      key: "LogoutAllSessions",
+      label: t("Settings:LogoutAllSessions"),
+      icon: RemoveSvgUrl,
+      onClick: onClickLogout,
+    },
+    {
+      key: "Separator",
+      isSeparator: true,
+    },
+    {
+      key: "Disable",
+      label: t("Common:DisableUserButton"),
+      icon: TrashReactSvgUrl,
+      onClick: onClickDisable,
+    },
+  ];
+
+  const onClickLogout = () => {
+    setLogoutAllDialogVisible(true);
+    setSessionModalData({ displayName: data.displayName });
+  };
+
+  const onClickDisable = () => {
+    setDisableDialogVisible(true);
+  };
+
+  console.log(data);
+
+  const element = (
+    <Avatar size="large" userName={data.displayName} source={data.avatar} />
+  );
+
+  return (
+    <Wrapper>
+      <Row
+        key={data.userId}
+        data={data}
+        element={element}
+        mode={"modern"}
+        className={"user-row"}
+        withoutBorder
+        contextOptions={contextOptions}
+      />
+    </Wrapper>
+  );
+};
+
+export default inject(({ setup }) => {
+  const {
+    setLogoutAllDialogVisible,
+    setDisableDialogVisible,
+    setSessionModalData,
+    sessionModalData,
+  } = setup;
+
+  return {
+    setLogoutAllDialogVisible,
+    setDisableDialogVisible,
+    setSessionModalData,
+    data: sessionModalData,
+  };
+})(withTranslation(["Settings", "Profile", "Common"])(observer(UserSessions)));

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

@@ -0,0 +1,56 @@
+import { useRef } from "react";
+import { observer, inject } from "mobx-react";
+
+import { Backdrop } from "@docspace/shared/components/backdrop";
+import { Aside } from "@docspace/shared/components/aside";
+import { Heading } from "@docspace/shared/components/heading";
+
+import UserSessions from "./UserSessions";
+
+import {
+  StyledUserSessionsPanel,
+  StyledScrollbar,
+} from "./StyledUserSessionsPanel";
+
+const UserSessionsPanel = (props) => {
+  const { visible, setVisible } = props;
+
+  const scrollRef = useRef(null);
+
+  const onClose = () => {
+    setVisible(false);
+  };
+
+  return (
+    <StyledUserSessionsPanel>
+      <Backdrop
+        onClick={onClose}
+        visible={visible}
+        isAside={true}
+        zIndex={210}
+      />
+      <Aside
+        className="user-sessions-panel"
+        visible={visible}
+        onClose={onClose}
+      >
+        <div className="user-sessions-header">
+          <Heading className="header-text">Active sessions</Heading>
+        </div>
+
+        <StyledScrollbar ref={scrollRef} stype="mediumBlack">
+          <UserSessions />
+        </StyledScrollbar>
+      </Aside>
+    </StyledUserSessionsPanel>
+  );
+};
+
+export default inject(({ dialogsStore }) => {
+  const { userSessionsPanelVisible, setUserSessionPanelVisible } = dialogsStore;
+
+  return {
+    visible: userSessionsPanelVisible,
+    setVisible: setUserSessionPanelVisible,
+  };
+})(observer(UserSessionsPanel));

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

@@ -7,6 +7,7 @@ import UploadPanel from "./UploadPanel";
 import HotkeyPanel from "./HotkeysPanel";
 import InvitePanel from "./InvitePanel";
 import EditLinkPanel from "./EditLinkPanel";
+import UserSessionsPanel from "./UserSessionsPanel";
 
 export {
   AddUsersPanel,
@@ -18,4 +19,5 @@ export {
   HotkeyPanel,
   InvitePanel,
   EditLinkPanel,
+  UserSessionsPanel,
 };

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

@@ -307,6 +307,7 @@ const SectionHeaderContent = (props) => {
     isSeveralSelection,
     peopleSelection,
     setSessionModalData,
+    setUserSessionPanelVisible,
   } = props;
   const { header, isCategoryOrHeader, isNeedPaidIcon } = state;
   const arrayOfParams = getArrayOfParams();
@@ -345,7 +346,7 @@ const SectionHeaderContent = (props) => {
   );
 
   const onClickSessions = () => {
-    console.log("view sessions");
+    setUserSessionPanelVisible(true);
   };
 
   const onClickLogout = () => {
@@ -462,7 +463,7 @@ const SectionHeaderContent = (props) => {
   );
 };
 
-export default inject(({ auth, setup, common, peopleStore }) => {
+export default inject(({ auth, setup, common, peopleStore, dialogsStore }) => {
   const { currentQuotaStore } = auth;
   const {
     isBrandingAndCustomizationAvailable,
@@ -497,6 +498,7 @@ export default inject(({ auth, setup, common, peopleStore }) => {
 
   const { admins, selectorIsOpen } = setup.security.accessRight;
   const { isLoadedSectionHeader, setIsLoadedSectionHeader } = common;
+  const { setUserSessionPanelVisible } = dialogsStore;
   return {
     addUsers,
     removeAdmins,
@@ -525,6 +527,7 @@ export default inject(({ auth, setup, common, peopleStore }) => {
     setLogoutDialogVisible,
     setLogoutAllDialogVisible,
     setSessionModalData,
+    setUserSessionPanelVisible,
   };
 })(
   withLoading(

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

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { useCallback } from "react";
 import { Base } from "@docspace/shared/themes";
@@ -128,6 +129,7 @@ StyledTableRow.defaultProps = { theme: Base };
 const SessionsTableRow = (props) => {
   const {
     t,
+    id,
     item,
     element,
     checkedProps,
@@ -145,10 +147,12 @@ const SessionsTableRow = (props) => {
     setLogoutAllDialogVisible,
     setDisableDialogVisible,
     setSessionModalData,
+    onlineSessionsSocket,
+    setUserSessionPanelVisible,
   } = props;
 
   const onClickSessions = () => {
-    console.log("view sessions");
+    setUserSessionPanelVisible(true);
   };
 
   const onClickLogout = () => {
@@ -160,6 +164,13 @@ const SessionsTableRow = (props) => {
     setDisableDialogVisible(true);
   };
 
+  useEffect(() => {
+    onlineSessionsSocket.emit("getStatusesInPortal", { id });
+    onlineSessionsSocket.on("statuses-in-room", (data) => {
+      console.log(data);
+    });
+  }, []);
+
   const contextOptions = [
     {
       key: "ViewSessions",
@@ -282,7 +293,9 @@ const SessionsTableRow = (props) => {
   );
 };
 
-export default inject(({ setup }) => {
+export default inject(({ auth, setup, dialogsStore }) => {
+  const { onlineSessionsSocket } = auth.settingsStore;
+  const { setUserSessionPanelVisible } = dialogsStore;
   const {
     setLogoutAllDialogVisible,
     setDisableDialogVisible,
@@ -293,5 +306,7 @@ export default inject(({ setup }) => {
     setLogoutAllDialogVisible,
     setDisableDialogVisible,
     setSessionModalData,
+    onlineSessionsSocket,
+    setUserSessionPanelVisible,
   };
 })(withContent(observer(SessionsTableRow)));

packages/client/src/store/DialogsStore.js

@@ -77,8 +77,8 @@ class DialogsStore {
   leaveRoomDialogVisible = false;
   changeRoomOwnerIsVisible = false;
   changeRoomOwnerData = null;
-
   shareFolderDialogVisible = false;
+  userSessionsPanelVisible = false;
 
   constructor(
     authStore,
@@ -436,6 +436,10 @@ class DialogsStore {
   setShareFolderDialogVisible = (visible) => {
     this.shareFolderDialogVisible = visible;
   };
+
+  setUserSessionPanelVisible = (visible) => {
+    this.userSessionsPanelVisible = visible;
+  };
 }
 
 export default DialogsStore;

packages/client/src/store/SettingsSetupStore.js

@@ -539,9 +539,16 @@ class SettingsSetupStore {
   setSessionModalData = (data) => {
     this.sessionModalData = {
       id: data.id,
+      avatar: data.avatar,
       displayName: data.displayName,
+      status: data.status,
       platform: data.platform,
       browser: data.browser,
+      country: data.country,
+      city: data.city,
+      date: data.date,
+      ip: data.ip,
+      userId: data.userId,
     };
   };
 }