added tablet view

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

@@ -0,0 +1,4 @@
+const RowView = () => {
+  return <div>RowView</div>;
+};
+export default RowView;

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

@@ -0,0 +1,125 @@
+import { useEffect, useState } from "react";
+import { inject, observer } from "mobx-react";
+
+import TableHeader from "@docspace/components/table-container/TableHeader";
+
+const TABLE_VERSION = "5";
+const TABLE_COLUMNS = `GoogleWorkspaceColumns_ver-${TABLE_VERSION}`;
+
+const getColumns = (defaultColumns, userId) => {
+  const storageColumns = localStorage.getItem(`${TABLE_COLUMNS}=${userId}`);
+  const columns = [];
+
+  if (storageColumns) {
+    const splitColumns = storageColumns.split(",");
+
+    for (let col of defaultColumns) {
+      const column = splitColumns.find((key) => key === col.key);
+      column ? (col.enable = true) : (col.enable = false);
+
+      columns.push(col);
+    }
+    return columns;
+  } else {
+    return defaultColumns;
+  }
+};
+
+const SessionsTableHeader = (props) => {
+  const {
+    t,
+    userId,
+    sectionWidth,
+    tableRef,
+    columnStorageName,
+    columnInfoPanelStorageName,
+  } = props;
+
+  const defaultColumns = [
+    {
+      key: "User",
+      title: t("Common:User"),
+      resizable: true,
+      enable: true,
+      default: true,
+      active: true,
+      minWidth: 180,
+      //   checkbox: {
+      //     value: isChecked,
+      //     isIndeterminate,
+      //     onChange: toggleAll,
+      //   },
+      onChange: onColumnChange,
+    },
+    {
+      key: "Status",
+      title: t("Common:Status"),
+      enable: true,
+      resizable: true,
+      onChange: onColumnChange,
+    },
+    {
+      key: "Platform",
+      title: t("Common:Platform"),
+      enable: true,
+      resizable: true,
+      onChange: onColumnChange,
+    },
+    {
+      key: "Country",
+      title: t("Common:Country"),
+      enable: true,
+      resizable: true,
+      onChange: onColumnChange,
+    },
+    {
+      key: "IpAddress",
+      title: t("Common:IpAddress"),
+      enable: true,
+      resizable: true,
+      onChange: onColumnChange,
+    },
+  ];
+
+  const [columns, setColumns] = useState(getColumns(defaultColumns, userId));
+
+  function onColumnChange(key, e) {
+    const columnIndex = columns.findIndex((c) => c.key === key);
+
+    if (columnIndex === -1) return;
+
+    setColumns((prevColumns) =>
+      prevColumns.map((item, index) =>
+        index === columnIndex ? { ...item, enable: !item.enable } : item
+      )
+    );
+
+    const tableColumns = columns.map((c) => c.enable && c.key);
+    localStorage.setItem(`${TABLE_COLUMNS}=${userId}`, tableColumns);
+  }
+
+  useEffect(() => {
+    setColumns(getColumns(defaultColumns));
+  }, []);
+
+  return (
+    <TableHeader
+      checkboxSize="48px"
+      containerRef={tableRef}
+      columns={columns}
+      columnStorageName={columnStorageName}
+      columnInfoPanelStorageName={columnInfoPanelStorageName}
+      sectionWidth={sectionWidth}
+      checkboxMargin="12px"
+      showSettings={true}
+      useReactWindow
+      infoPanelVisible={false}
+    />
+  );
+};
+
+export default inject(({ auth }) => {
+  return {
+    userId: auth.userStore.user.id,
+  };
+})(observer(SessionsTableHeader));

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

@@ -0,0 +1,89 @@
+import TableRow from "@docspace/components/table-container/TableRow";
+import TableCell from "@docspace/components/table-container/TableCell";
+import Text from "@docspace/components/text";
+import Avatar from "@docspace/components/avatar";
+import SettingsIcon from "PUBLIC_DIR/images/catalog.settings.react.svg?url";
+import styled from "styled-components";
+
+const StyledTableRow = styled(TableRow)`
+  .avatar {
+    margin-right: 6px;
+  }
+`;
+
+const SessionsTableRow = ({
+  t,
+  avatar,
+  role,
+  displayName,
+  status,
+  browser,
+  platform,
+  country,
+  city,
+  ip,
+  userId,
+}) => {
+  const contextOptions = [
+    {
+      key: "ViewSessions",
+      label: t("Settings:ViewSessions"),
+      icon: SettingsIcon,
+      onClick: () => console.log("view session"),
+    },
+    {
+      key: "LogoutAllSessions",
+      label: t("Settings:LogoutAllSessions"),
+      icon: SettingsIcon,
+      onClick: () => console.log("logout session"),
+    },
+    {
+      key: "Separator",
+      isSeparator: true,
+    },
+    {
+      key: "Disable",
+      label: t("PeopleTranslations:DisableUserButton"),
+      icon: SettingsIcon,
+      onClick: () => console.log("disable"),
+    },
+  ];
+
+  return (
+    <StyledTableRow
+      onClick={() => console.log("selected row")}
+      contextOptions={contextOptions}
+    >
+      <TableCell>
+        <Avatar
+          className="avatar"
+          userName={displayName}
+          role={role}
+          source={avatar}
+          size={"small"}
+        />
+        <Text>{displayName}</Text>
+      </TableCell>
+
+      <TableCell>
+        <Text>{status}</Text>
+      </TableCell>
+
+      <TableCell>
+        <Text>{platform},&nbsp;</Text>
+        <Text>{browser}</Text>
+      </TableCell>
+
+      <TableCell>
+        <Text>{country},&nbsp;</Text>
+        <Text>{city}</Text>
+      </TableCell>
+
+      <TableCell>
+        <Text>{ip}</Text>
+      </TableCell>
+    </StyledTableRow>
+  );
+};
+
+export default SessionsTableRow;

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

@@ -0,0 +1,124 @@
+import { useRef } from "react";
+import { inject, observer } from "mobx-react";
+import { Base } from "@docspace/components/themes";
+import styled, { css } from "styled-components";
+
+import SessionsTableHeader from "./SessionsTableHeader";
+import SessionsTableRow from "./SessionsTableRow";
+import TableContainer from "@docspace/components/table-container/TableContainer";
+import TableBody from "@docspace/components/table-container/TableBody";
+
+const StyledTableContainer = styled(TableContainer)`
+  margin: 0 0 24px;
+
+  .header-container-text {
+    font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
+  }
+
+  .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;
+      }
+    }
+  }
+
+  .table-list-item:has(.selected-table-row) {
+    background-color: ${(props) =>
+      props.theme.filesSection.tableView.row.backgroundActive};
+  }
+
+  .table-container_row-context-menu-wrapper {
+    justify-content: flex-end;
+
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            padding-left: 0px;
+          `
+        : css`
+            padding-right: 0px;
+          `}
+  }
+`;
+
+StyledTableContainer.defaultProps = { theme: Base };
+
+const TABLE_VERSION = "6";
+const COLUMNS_SIZE = `sessionsColumnsSize_ver-${TABLE_VERSION}`;
+const INFO_PANEL_COLUMNS_SIZE = `infoPanelSessionsColumnsSize_ver-${TABLE_VERSION}`;
+
+const TableView = ({ t, sectionWidth, userId, sessionsData }) => {
+  const tableRef = useRef(null);
+
+  const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
+  const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
+
+  return (
+    <StyledTableContainer forwardedRef={tableRef} useReactWindow>
+      <SessionsTableHeader
+        t={t}
+        sectionWidth={sectionWidth}
+        tableRef={tableRef}
+        userId={userId}
+        columnStorageName={columnStorageName}
+        columnInfoPanelStorageName={columnInfoPanelStorageName}
+        // isIndeterminate={isIndeterminate}
+        // isChecked={checkedUsers.withEmail.length === withEmailUsers.length}
+        // toggleAll={toggleAll}
+      />
+      <TableBody
+        itemHeight={49}
+        useReactWindow
+        infoPanelVisible={false}
+        columnStorageName={columnStorageName}
+        columnInfoPanelStorageName={columnInfoPanelStorageName}
+        filesLength={sessionsData.length}
+        hasMoreFiles={false}
+        itemCount={sessionsData.length}
+        fetchMoreFiles={() => {}}
+      >
+        {sessionsData.map((session) => (
+          <SessionsTableRow
+            t={t}
+            key={session.id}
+            avatar={session.avatar}
+            displayName={session.displayName}
+            status={session.status}
+            platform={session.platform}
+            browser={session.browser}
+            country={session.country}
+            city={session.city}
+            ip={session.ip}
+            userId={session.userId}
+            // isChecked={isAccountChecked(data.key, checkedAccountType)}
+            // toggleAccount={(e) => handleToggle(e, data)}
+          />
+        ))}
+      </TableBody>
+    </StyledTableContainer>
+  );
+};
+
+export default inject(({ auth }) => {
+  const { id: userId } = auth.userStore.user;
+
+  return {
+    userId,
+  };
+})(observer(TableView));

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

@@ -0,0 +1,35 @@
+import { inject, observer } from "mobx-react";
+import { Consumer } from "@docspace/components/utils/context";
+
+import TableView from "./TableView";
+import RowView from "./RowView";
+
+const SessionsTable = ({ t, viewAs, sessionsData }) => {
+  return (
+    <Consumer>
+      {(context) =>
+        viewAs === "table" ? (
+          <TableView
+            t={t}
+            sectionWidth={context.sectionWidth}
+            sessionsData={sessionsData}
+          />
+        ) : (
+          <RowView
+            t={t}
+            sectionWidth={context.sectionWidth}
+            sessionsData={sessionsData}
+          />
+        )
+      }
+    </Consumer>
+  );
+};
+
+export default inject(({ setup }) => {
+  const { viewAs } = setup;
+
+  return {
+    viewAs,
+  };
+})(observer(SessionsTable));

packages/client/src/pages/PortalSettings/categories/security/sessions/allSessionsData.js

@@ -0,0 +1,97 @@
+const allSessionsData = [
+  {
+    id: 1,
+    avatar: "",
+    displayName: "Ilya Genkin",
+    status: "Online",
+    platform: "Windows 10",
+    browser: "Chrome 120",
+    country: "Russia",
+    city: "Kstovo",
+    date: "2023-12-26T17:13:28+00:00",
+    ip: "172.18.0.1",
+    mobile: false,
+    page: "http://192.168.0.239/wizard",
+    tenantId: 1,
+    userId: "66faa6e4-f133-11ea-b126-00ffeec8b4ef",
+  },
+  {
+    id: 2,
+    avatar: "",
+    displayName: "Timur Aliev",
+    status: "Online",
+    platform: "Mac OS 14.1.2",
+    browser: "Safari 17",
+    country: "Uzbekistan",
+    city: "Tashkent",
+    date: "2023-12-26T17:13:28+00:00",
+    ip: "172.19.0.1",
+    mobile: false,
+    page: "http://192.168.0.239/wizard",
+    tenantId: 1,
+    userId: "66faa6e4-f133-11ea-b126-00ffeec8b4ea",
+  },
+  {
+    id: 3,
+    avatar: "",
+    displayName: "Aleksei Safronov",
+    status: "8 minutes ago",
+    platform: "Windows 10",
+    browser: "Chrome 119",
+    country: "Armenia",
+    city: "Yerevan",
+    date: "2023-12-26T17:13:28+00:00",
+    ip: "172.20.0.1",
+    mobile: false,
+    page: "http://192.168.0.239/wizard",
+    tenantId: 1,
+    userId: "66faa6e4-f133-11ea-b126-00ffeec8b4eb",
+  },
+  {
+    id: 4,
+    displayName: "Dmitry Vanyukov",
+    status: "3 hours ago",
+    platform: "Mac OS 14.1.2",
+    browser: "Safari 15",
+    country: "Russia",
+    city: "Kuznechikha",
+    date: "2023-12-26T17:13:28+00:00",
+    ip: "172.21.0.1",
+    mobile: false,
+    page: "http://192.168.0.239/wizard",
+    tenantId: 1,
+    userId: "66faa6e4-f133-11ea-b126-00ffeec8b4ec",
+  },
+  {
+    id: 5,
+    displayName: "Elizabeth Rayen",
+    status: "Yesterday, 5:12 PM",
+    platform: "Mac OS X 10",
+    browser: "Chrome 119",
+    country: "Germany",
+    city: " Frankfurt",
+    date: "2023-12-26T17:13:28+00:00",
+    ip: "172.22.0.1",
+    mobile: false,
+    page: "http://192.168.0.239/wizard",
+    tenantId: 1,
+    userId: "66faa6e4-f133-11ea-b126-00ffeec8b4ed",
+  },
+  {
+    id: 5,
+    displayName: "Djalilova Saida",
+    status: "Yesterday, 5:12 PM",
+    platform: "Windows 11",
+    browser: "Chrome 120",
+    country: "Uzbekistan",
+    city: " Tashkent",
+    date: "2023-12-26T17:13:28+00:00",
+    ip: "172.22.0.1",
+    mobile: false,
+    page: "http://192.168.0.239/wizard",
+    tenantId: 1,
+    userId: "66faa6e4-f133-11ea-b126-00ffeec8b4ed",
+  },
+];
+
+export default allSessionsData;

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

@@ -1,13 +1,102 @@
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
-
+import { mobile, tablet } from "@docspace/components/utils/device";
 import { MainContainer } from "../StyledSecurity";
-import Text from "@docspace/components/text";
+import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
+import SessionsTable from "./SessionsTable";
+import allSessionsData from "./allSessionsData";
+import styled from "styled-components";
+
+import Text from "@docspace/components/text";
+import Button from "@docspace/components/button";
+
+const DownLoadWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  position: sticky;
+  bottom: 0;
+  background-color: ${({ theme }) => theme.backgroundColor};
+
+  @media ${mobile} {
+    position: fixed;
+    padding-inline: 16px;
+    inset-inline: 0;
+  }
+
+  .download-report_button {
+    width: auto;
+    height: auto;
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
+    line-height: ${(props) => props.theme.getCorrectFontSize("20px")};
+    padding-top: 5px;
+    padding-bottom: 5px;
+
+    @media ${tablet} {
+      font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
+      line-height: 16px;
+      padding-top: 11px;
+      padding-bottom: 11px;
+    }
+
+    @media ${mobile} {
+      width: 100%;
+    }
+  }
+
+  .download-report_description {
+    font-style: normal;
+    font-weight: 400;
+    font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
+    line-height: 16px;
+
+    height: 16px;
+
+    margin: 0;
+    color: ${(props) =>
+      props.theme.client.settings.security.auditTrail
+        .downloadReportDescriptionColor};
+  }
+
+  @media ${mobile} {
+    flex-direction: column-reverse;
+  }
+`;
+
+const Sessions = ({
+  t,
+  viewAs,
+  setViewAs,
+  currentDeviceType,
+  isLoadingDownloadReport,
+}) => {
+  useViewEffect({
+    view: viewAs,
+    setView: setViewAs,
+    currentDeviceType,
+  });
 
-const Sessions = ({ t }) => {
   return (
     <MainContainer>
       <Text className="subtitle">{t("SessionsSubtitle")}</Text>
+
+      <SessionsTable t={t} sessionsData={allSessionsData} />
+
+      <DownLoadWrapper>
+        <Button
+          className="download-report_button"
+          primary
+          label={t("DownloadReportBtnText")}
+          size="normal"
+          minwidth="auto"
+          onClick={() => console.log("get report")}
+          isLoading={isLoadingDownloadReport}
+        />
+        <span className="download-report_description">
+          {t("DownloadReportDescription")}
+        </span>
+      </DownLoadWrapper>
     </MainContainer>
   );
 };
@@ -15,39 +104,18 @@ const Sessions = ({ t }) => {
 export default inject(({ auth, setup }) => {
   const { culture, currentDeviceType } = auth.settingsStore;
   const { user } = auth.userStore;
+  const { viewAs, setViewAs, isLoadingDownloadReport } = setup;
   const locale = (user && user.cultureName) || culture || "en";
 
-  const {
-    getAllSessions,
-    removeAllSessions,
-    removeSession,
-    logoutVisible,
-    setLogoutVisible,
-    logoutAllVisible,
-    setLogoutAllVisible,
-    removeAllExecptThis,
-    sessionsIsInit,
-    sessions,
-    currentSession,
-    getSessions,
-    setSessions,
-  } = setup;
-
   return {
     locale,
-    getAllSessions,
+    viewAs,
-    removeAllSessions,
+    setViewAs,
-    removeSession,
-    logoutVisible,
-    setLogoutVisible,
-    logoutAllVisible,
-    setLogoutAllVisible,
-    removeAllExecptThis,
-    sessionsIsInit,
-    sessions,
-    currentSession,
-    getSessions,
-    setSessions,
     currentDeviceType,
+    isLoadingDownloadReport,
   };
-})(withTranslation(["Settings", "Common"])(observer(Sessions)));
+})(
+  withTranslation(["Settings", "Common", "PeopleTranslations"])(
+    observer(Sessions)
+  )
+);