added table group menu for row view

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

@@ -1,5 +1,8 @@
+import { useRef } from "react";
 import Row from "@docspace/components/row";
 import SessionsRowContent from "./SessionsRowContent";
+import Avatar from "@docspace/components/avatar";
+import Checkbox from "@docspace/components/checkbox";
 
 import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
 import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
@@ -8,7 +11,6 @@ import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
 const SessionsRow = (props) => {
   const {
     t,
-    data,
     sectionWidth,
     avatar,
     displayName,
@@ -18,7 +20,9 @@ const SessionsRow = (props) => {
     country,
     city,
     ip,
-    userId,
+    data,
+    isChecked,
+    toggleSession,
   } = props;
   const contextOptions = [
     {
@@ -45,21 +49,27 @@ const SessionsRow = (props) => {
     },
   ];
 
+  const rowRef = useRef();
+
+  const handleSessionToggle = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    rowRef.current?.contains(e.target) || toggleSession(e);
+  };
+
   return (
     <Row
       key={data.id}
       data={data}
       sectionWidth={sectionWidth}
-      checkbox
       contextButton
       contextOptions={contextOptions}
-      //   checked={isChecked}
-      //   onClick={toggleAccount}
-      //   onSelect={toggleAccount}
-      //   contextButtonSpacerWidth="0"
+      checked={isChecked}
+      onClick={handleSessionToggle}
+      onSelect={handleSessionToggle}
+      contextButtonSpacerWidth="0"
     >
       <SessionsRowContent
-        userId={userId}
         avatar={avatar}
         displayName={displayName}
         status={status}
@@ -68,6 +78,7 @@ const SessionsRow = (props) => {
         country={country}
         city={city}
         ip={ip}
+        rowRef={rowRef}
       />
     </Row>
   );

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

@@ -103,9 +103,10 @@ const SessionsRowContent = (props) => {
     city,
     ip,
     userId,
+    rowRef,
   } = props;
 
-  // const isOnline = status === "Online";
+  const isOnline = status === "Online";
 
   const contentData = [
     <Box key={userId} displayProp="flex" alignItems="center">
@@ -115,7 +116,7 @@ const SessionsRowContent = (props) => {
         source={avatar}
         size={"small"}
       />
-      <Box className="session-info">
+      <Box className="session-info" ref={rowRef}>
         <Box className="main-row-content">
           <div className="username">
             {displayName} <span>{status}</span>

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

@@ -1,45 +1,199 @@
 import { inject, observer } from "mobx-react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
+import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
 import RowContainer from "@docspace/components/row-container";
 import SessionsRow from "./SessionsRow";
 
+import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
+import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
+import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
+
 const StyledRowContainer = styled(RowContainer)`
-  margin 0px 0px 20px;
+  margin: 0 0 24px;
+
+  .table-group-menu {
+    height: 60px;
+    position: absolute;
+    z-index: 201;
+    top: -170px;
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            right: -16px;
+          `
+        : css`
+            left: -16px;
+          `}
+    width: 100%;
+
+    .table-container_group-menu {
+      padding: 0px 16px;
+      border-image-slice: 0;
+      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
+    }
+
+    .table-container_group-menu-checkbox {
+      ${(props) =>
+        props.theme.interfaceDirection === "rtl"
+          ? css`
+              margin-right: 8px;
+            `
+          : css`
+              margin-left: 8px;
+            `}
+    }
+
+    .table-container_group-menu-separator {
+      margin: 0 16px;
+    }
+
+    .table-list-item {
+      cursor: pointer;
+
+      &:hover {
+        background-color: ${(props) =>
+          props.theme.filesSection.tableView.row.backgroundActive};
+
+        .table-container_cell {
+          margin-top: -1px;
+          border-top: ${(props) =>
+            `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+
+          margin-left: -24px;
+          padding-left: 24px;
+        }
+
+        .table-container_row-context-menu-wrapper {
+          margin-right: -20px;
+          padding-right: 20px;
+        }
+      }
+    }
+  }
+
+  .header-container-text {
+    font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
+    color: #a3a9ae;
+  }
+
+  .table-container_header {
+    position: absolute;
+  }
 `;
 
 const RowView = (props) => {
-  const { t, sectionWidth, sessionsData } = props;
+  const {
+    t,
+    sectionWidth,
+    sessionsData,
+    allSessions,
+    checkedSessions,
+    toggleSession,
+    toggleAllSessions,
+    isSessionChecked,
+  } = props;
+
+  const handleToggle = (e, id) => {
+    e.stopPropagation();
+    toggleSession(id);
+  };
+
+  const handleAllToggles = (checked) => {
+    toggleAllSessions(checked, allSessions);
+  };
+
+  const headerMenu = [
+    {
+      id: "sessions",
+      key: "Sessions",
+      label: t("Common:Sessions"),
+      onClick: () => console.log("Sessions"),
+      iconUrl: HistoryFinalizedReactSvgUrl,
+    },
+    {
+      id: "logout",
+      key: "Logout",
+      label: t("Common:Logout"),
+      onClick: () => console.log("Logout"),
+      iconUrl: RemoveSvgUrl,
+    },
+    {
+      id: "Disable",
+      key: "Disable",
+      label: t("Common:DisableUserButton"),
+      onClick: () => console.log("Disable"),
+      iconUrl: TrashReactSvgUrl,
+    },
+  ];
+
+  const isChecked = checkedSessions.length === allSessions.length;
+
+  const isIndeterminate =
+    checkedSessions.length > 0 && checkedSessions.length !== allSessions.length;
 
   return (
-    <StyledRowContainer useReactWindow={false}>
+    <StyledRowContainer
+      itemHeight={58}
+      useReactWindow={false}
+      hasMoreFiles={false}
+      itemCount={sessionsData.length}
+      filesLength={sessionsData.length}
+      fetchMoreFiles={() => {}}
+    >
+      {checkedSessions.length > 0 && (
+        <div className="table-group-menu">
+          <TableGroupMenu
+            sectionWidth={sectionWidth}
+            headerMenu={headerMenu}
+            withoutInfoPanelToggler
+            withComboBox={false}
+            checkboxOptions={[]}
+            isChecked={isChecked}
+            isIndeterminate={isIndeterminate}
+            onChange={handleAllToggles}
+          />
+        </div>
+      )}
+
       {sessionsData.map((session) => (
         <SessionsRow
           t={t}
-          sectionWidth={sectionWidth}
-          data={session}
           key={session.id}
+          sectionWidth={sectionWidth}
           avatar={session.avatar}
           displayName={session.displayName}
           status={session.status}
-          browser={session.browser}
           platform={session.platform}
+          browser={session.browser}
           country={session.country}
           city={session.city}
           ip={session.ip}
-          userId={session.userId}
-          // isChecked={isAccountChecked(data.key, checkedAccountType)}
-          // toggleAccount={() => handleToggle(data)}
+          data={session}
+          isChecked={isSessionChecked(session.userId)}
+          toggleSession={(e) => handleToggle(e, session.userId)}
         />
       ))}
     </StyledRowContainer>
   );
 };
 
-export default inject(({ auth }) => {
+export default inject(({ auth, setup }) => {
   const { id: userId } = auth.userStore.user;
+  const {
+    allSessions,
+    checkedSessions,
+    toggleSession,
+    toggleAllSessions,
+    isSessionChecked,
+  } = setup;
 
   return {
     userId,
+    allSessions,
+    checkedSessions,
+    toggleSession,
+    toggleAllSessions,
+    isSessionChecked,
   };
 })(observer(RowView));