From 28c538933563421e7692b9c81625d707a8ddaed0 Mon Sep 17 00:00:00 2001
From: Elyor Djalilov <elyor.djalilov@onlyoffice.com>
Date: Wed, 3 Jan 2024 23:16:09 +0500
Subject: [PATCH] Web: added row view

---
 .../SessionsTable/RowView/SessionsRow.js      |  76 +++++++++
 .../RowView/SessionsRowContent.js             | 145 ++++++++++++++++++
 .../sessions/SessionsTable/RowView/index.js   |  55 ++++++-
 .../security/sessions/allSessionsData.js      |  15 --
 4 files changed, 273 insertions(+), 18 deletions(-)
 create mode 100644 packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js
 create mode 100644 packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js

diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js
new file mode 100644
index 0000000000..5bd34eda9e
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js
@@ -0,0 +1,76 @@
+import Row from "@docspace/components/row";
+import SessionsRowContent from "./SessionsRowContent";
+
+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 SessionsRow = (props) => {
+  const {
+    t,
+    data,
+    sectionWidth,
+    avatar,
+    displayName,
+    status,
+    browser,
+    platform,
+    country,
+    city,
+    ip,
+    userId,
+  } = props;
+  const contextOptions = [
+    {
+      key: "ViewSessions",
+      label: t("Settings:ViewSessions"),
+      icon: HistoryFinalizedReactSvgUrl,
+      onClick: () => console.log("view session"),
+    },
+    {
+      key: "LogoutAllSessions",
+      label: t("Settings:LogoutAllSessions"),
+      icon: RemoveSvgUrl,
+      onClick: () => console.log("logout session"),
+    },
+    {
+      key: "Separator",
+      isSeparator: true,
+    },
+    {
+      key: "Disable",
+      label: t("Common:DisableUserButton"),
+      icon: TrashReactSvgUrl,
+      onClick: () => console.log("disable"),
+    },
+  ];
+
+  return (
+    <Row
+      key={data.id}
+      data={data}
+      sectionWidth={sectionWidth}
+      checkbox
+      contextButton
+      contextOptions={contextOptions}
+      //   checked={isChecked}
+      //   onClick={toggleAccount}
+      //   onSelect={toggleAccount}
+      //   contextButtonSpacerWidth="0"
+    >
+      <SessionsRowContent
+        userId={userId}
+        avatar={avatar}
+        displayName={displayName}
+        status={status}
+        browser={browser}
+        platform={platform}
+        country={country}
+        city={city}
+        ip={ip}
+      />
+    </Row>
+  );
+};
+
+export default SessionsRow;
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js
new file mode 100644
index 0000000000..05cf5d3c32
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js
@@ -0,0 +1,145 @@
+import styled, { css } from "styled-components";
+import Text from "@docspace/components/text";
+import Box from "@docspace/components/box";
+import RowContent from "@docspace/components/row-content";
+import Avatar from "@docspace/components/avatar";
+
+const StyledRowContent = styled(RowContent)`
+  .rowMainContainer {
+    height: 100%;
+    width: 100%;
+  }
+
+  .avatar {
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            margin-left: 10px;
+          `
+        : css`
+            margin-right: 10px;
+          `}
+  }
+
+  .session-info {
+    .username {
+      font-size: 14px;
+      font-weight: 600;
+      color: #333333;
+      span {
+        color: #a3a9ae;
+      }
+    }
+    .additional-row-content {
+      display: flex;
+      align-items: center;
+    }
+
+    .session-platform,
+    .session-location,
+    .session-ip {
+      font-size: 12px;
+      font-weight: 600;
+      color: #a3a9ae;
+    }
+
+    .session-platform,
+    .session-location {
+      position: relative;
+      span {
+        :after {
+          content: "";
+          position: absolute;
+          top: 2px;
+          ${(props) =>
+            props.theme.interfaceDirection === "rtl"
+              ? css`
+                  left: -7px;
+                `
+              : css`
+                  right: -7px;
+                `}
+          width: 2px;
+          height: 12px;
+          background: ${(props) => props.theme.activeSessions.sortHeaderColor};
+        }
+      }
+      ${(props) =>
+        props.theme.interfaceDirection === "rtl"
+          ? css`
+              margin-left: 6px;
+            `
+          : css`
+              margin-right: 6px;
+            `}
+    }
+
+    .session-location {
+      margin: 0px 6px;
+    }
+
+    .session-ip {
+      ${(props) =>
+        props.theme.interfaceDirection === "rtl"
+          ? css`
+              margin-right: 6px;
+            `
+          : css`
+              margin-left: 6px;
+            `}
+    }
+  }
+`;
+
+const SessionsRowContent = (props) => {
+  const {
+    sectionWidth,
+    avatar,
+    displayName,
+    status,
+    platform,
+    browser,
+    country,
+    city,
+    ip,
+    userId,
+  } = props;
+
+  // const isOnline = status === "Online";
+
+  const contentData = [
+    <Box key={userId} displayProp="flex" alignItems="center">
+      <Avatar
+        className="avatar"
+        userName={displayName}
+        source={avatar}
+        size={"small"}
+      />
+      <Box className="session-info">
+        <Box className="main-row-content">
+          <div className="username">
+            {displayName} <span>{status}</span>
+          </div>
+        </Box>
+
+        <Box className="additional-row-content">
+          <div className="session-platform">
+            {platform}, <span>{browser}</span>
+          </div>
+          <div className="session-location">
+            {country}, <span>{city}</span>
+          </div>
+          <div className="session-ip">{ip}</div>
+        </Box>
+      </Box>
+    </Box>,
+  ];
+
+  return (
+    <StyledRowContent sectionWidth={sectionWidth}>
+      {contentData}
+    </StyledRowContent>
+  );
+};
+
+export default SessionsRowContent;
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js
index a937cd0b0c..b5be215cf4 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js
@@ -1,4 +1,53 @@
-const RowView = () => {
-  return <div>RowView</div>;
+import { inject, observer } from "mobx-react";
+import styled from "styled-components";
+
+import RowContainer from "@docspace/components/row-container";
+import SessionsRow from "./SessionsRow";
+
+const StyledRowContainer = styled(RowContainer)`
+  margin 0px 0px 20px;
+`;
+
+const RowView = (props) => {
+  const { t, sectionWidth, sessionsData } = props;
+
+  return (
+    sessionsData.length !== 0 && (
+      <StyledRowContainer
+        className="people-row-container"
+        useReactWindow={false}
+        itemHeight={58}
+        itemCount={6}
+        filesLength={sessionsData.length}
+      >
+        {sessionsData.map((session) => (
+          <SessionsRow
+            t={t}
+            sectionWidth={sectionWidth}
+            data={session}
+            key={session.id}
+            avatar={session.avatar}
+            displayName={session.displayName}
+            status={session.status}
+            browser={session.browser}
+            platform={session.platform}
+            country={session.country}
+            city={session.city}
+            ip={session.ip}
+            userId={session.userId}
+            // isChecked={isAccountChecked(data.key, checkedAccountType)}
+            // toggleAccount={() => handleToggle(data)}
+          />
+        ))}
+      </StyledRowContainer>
+    )
+  );
 };
-export default RowView;
+
+export default inject(({ auth }) => {
+  const { id: userId } = auth.userStore.user;
+
+  return {
+    userId,
+  };
+})(observer(RowView));
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/allSessionsData.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/allSessionsData.js
index 1a77d5c63b..527503c829 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/allSessionsData.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/allSessionsData.js
@@ -77,21 +77,6 @@ const allSessionsData = [
     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;