From d58a40a2e86a48c76880f49d407ea859a53fdee7 Mon Sep 17 00:00:00 2001
From: Elyor Djalilov <elyor.djalilov@onlyoffice.com>
Date: Fri, 19 Apr 2024 20:50:27 +0500
Subject: [PATCH] Web: Client: Profile. Active sessions the country and city
 fields were hidden

---
 .../SessionsTable/RowView/SessionsRow.js      |   6 +-
 .../RowView/SessionsRowContent.js             |  11 +-
 .../TableView/SessionsTableRow.js             |  17 +-
 .../sub-components/active-session/index.js    |   3 +-
 .../active-session/styled-active-sessions.js  | 219 ------------------
 5 files changed, 27 insertions(+), 229 deletions(-)
 delete mode 100644 packages/client/src/pages/Profile/Section/Body/sub-components/active-session/styled-active-sessions.js

diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
index f39c275353..3b27e7bf79 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
@@ -36,6 +36,7 @@ import TickSvgUrl from "PUBLIC_DIR/images/tick.svg?url";
 const SessionsRow = (props) => {
   const {
     item,
+    standalone,
     sectionWidth,
     currentSession,
     setPlatformModalData,
@@ -87,16 +88,19 @@ const SessionsRow = (props) => {
         ip={item.ip}
         sectionWidth={sectionWidth}
         showTickIcon={showTickIcon}
+        standalone={standalone}
       />
     </Row>
   );
 };
 
-export default inject(({ setup }) => {
+export default inject(({ setup, settingsStore }) => {
+  const { standalone } = settingsStore;
   const { currentSession, setLogoutDialogVisible, setPlatformModalData } =
     setup;
 
   return {
+    standalone,
     currentSession,
     setLogoutDialogVisible,
     setPlatformModalData,
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
index 362bd84e07..5802105237 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
@@ -47,6 +47,7 @@ const StyledRowContent = styled(RowContent)`
 
 const SessionsRowContent = ({
   id,
+  standalone,
   platform,
   browser,
   date,
@@ -69,10 +70,12 @@ const SessionsRowContent = ({
         <IconButton size={12} iconName={TickSvgUrl} color="#20D21F" />
       )}
       <Text truncate>{convertTime(date)}</Text>
-      <Text truncate>
-        {country}
-        {` ${city}`}
-      </Text>
+      {!standalone && (
+        <Text truncate>
+          {country}
+          {` ${city}`}
+        </Text>
+      )}
       <Text truncate containerWidth="160px">
         {ip}
       </Text>
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
index 31ea3616a5..edd6c7da49 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
@@ -82,6 +82,7 @@ const SessionsTableRow = (props) => {
   const {
     item,
     hideColumns,
+    standalone,
     currentSession,
     setPlatformModalData,
     setLogoutDialogVisible,
@@ -124,9 +125,15 @@ const SessionsTableRow = (props) => {
 
       <TableCell>
         <Text className="session-info" truncate>
-          {country}, {city}
-          <Text as="span" className="divider" />
-          {ip}
+          {!standalone ? (
+            <>
+              {country}, {city}
+              <span className="divider"></span>
+              {ip}
+            </>
+          ) : (
+            <>{ip}</>
+          )}
         </Text>
       </TableCell>
 
@@ -146,11 +153,13 @@ const SessionsTableRow = (props) => {
   );
 };
 
-export default inject(({ setup }) => {
+export default inject(({ setup, settingsStore }) => {
+  const { standalone } = settingsStore;
   const { currentSession, setLogoutDialogVisible, setPlatformModalData } =
     setup;
 
   return {
+    standalone,
     currentSession,
     setLogoutDialogVisible,
     setPlatformModalData,
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/index.js
index 69c2f473d5..8cbd9faac6 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/index.js
@@ -167,7 +167,8 @@ const ActiveSessions = ({
         {t("Profile:ActiveSessions")}
       </Text>
 
-      <Text className="auto-delete-title">{t("Profile:AutoDeleteTitle")}</Text>
+      {/* TODO: Uncomment after fix on backend */}
+      {/* <Text className="auto-delete-title">{t("Profile:AutoDeleteTitle")}</Text> */}
 
       <Box className="terminate-session-container">
         <Link
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/styled-active-sessions.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/styled-active-sessions.js
deleted file mode 100644
index 55b6b4943f..0000000000
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/styled-active-sessions.js
+++ /dev/null
@@ -1,219 +0,0 @@
-// (c) Copyright Ascensio System SIA 2009-2024
-//
-// This program is a free software product.
-// You can redistribute it and/or modify it under the terms
-// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
-// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
-// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
-// any third-party rights.
-//
-// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
-// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
-// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
-//
-// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
-//
-// The  interactive user interfaces in modified source and object code versions of the Program must
-// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
-//
-// Pursuant to Section 7(b) of the License you must retain the original Product logo when
-// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
-// trademark law for use of our trademarks.
-//
-// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
-// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
-// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-
-import styled, { css } from "styled-components";
-import { mobile } from "@docspace/shared/utils";
-
-export const StyledFooter = styled.div`
-  .session-logout {
-    font-size: 13px;
-    font-weight: 600;
-  }
-  .icon-button {
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            margin-right: 4px;
-          `
-        : css`
-            margin-left: 4px;
-          `}
-  }
-`;
-
-export const Table = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 2px;
-`;
-
-export const TableHead = styled.thead`
-  font-size: 12px;
-  line-height: 16px;
-`;
-
-export const TableRow = styled.tr`
-  display: table-row;
-`;
-
-export const TableHeaderCell = styled.th`
-  border-top: 1px solid ${(props) => props.theme.activeSessions.borderColor};
-  border-bottom: 1px solid ${(props) => props.theme.activeSessions.borderColor};
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          text-align: right;
-        `
-      : css`
-          text-align: left;
-        `}
-  font-weight: 600;
-  padding: 12px 0;
-  color: #a3a9ae;
-  position: relative;
-  border-top: 0;
-
-  :not(:first-child):before {
-    content: "";
-    position: absolute;
-    top: 17px;
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            right: -8px;
-          `
-        : css`
-            left: -8px;
-          `}
-    width: 1px;
-    height: 10px;
-    background: ${(props) => props.theme.activeSessions.sortHeaderColor};
-  }
-`;
-
-export const TableBody = styled.tbody`
-  font-size: 11px;
-`;
-
-export const TableDataCell = styled.td`
-  border-top: 1px solid ${(props) => props.theme.activeSessions.borderColor};
-  border-bottom: 1px solid ${(props) => props.theme.activeSessions.borderColor};
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          text-align: right;
-        `
-      : css`
-          text-align: left;
-        `}
-  font-weight: 600;
-  padding: 14px 0;
-  color: #a3a9ae;
-
-  .tick-icon {
-    svg {
-      path {
-        fill: ${(props) => props.theme.activeSessions.tickIconColor};
-      }
-    }
-  }
-
-  .remove-icon {
-    svg {
-      path {
-        fill: ${(props) => props.theme.activeSessions.removeIconColor};
-      }
-    }
-  }
-
-  @media ${mobile} {
-    .session-browser {
-      position: relative;
-      top: 4px;
-      max-width: 150px;
-      display: inline-block;
-      margin-left: 0 !important;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      span {
-        width: 100%;
-      }
-    }
-  }
-
-  :first-child {
-    font-size: 13px;
-    color: ${(props) => props.theme.activeSessions.color};
-    span {
-      color: #a3a9ae;
-      ${(props) =>
-        props.theme.interfaceDirection === "rtl"
-          ? css`
-              margin-right: 5px;
-            `
-          : css`
-              margin-left: 5px;
-            `}
-    }
-  }
-
-  .session-date {
-    position: relative;
-
-    ${(props) =>
-      props.theme.interfaceDirection === "ltr"
-        ? css`
-            margin-right: 8px;
-            margin-left: 0 !important;
-            :after {
-              content: "";
-              position: absolute;
-              top: 4px;
-              right: -8px;
-              width: 1px;
-              height: 12px;
-              background: ${(props) =>
-                props.theme.activeSessions.sortHeaderColor};
-            }
-          `
-        : css`
-            margin-left: 8px;
-            margin-right: 0 !important;
-          `}
-  }
-
-  .session-ip {
-    position: relative;
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl" &&
-      css`
-        :after {
-          content: "";
-          position: absolute;
-          top: 4px;
-          right: -8px;
-          width: 1px;
-          height: 12px;
-          background: ${(props) => props.theme.activeSessions.sortHeaderColor};
-        }
-      `}
-  }
-
-  :last-child {
-    text-align: end;
-  }
-  .remove-icon {
-    svg {
-      cursor: pointer;
-      width: 20px;
-      height: 20px;
-      path {
-        fill: #a3a9ae;
-      }
-    }
-  }
-`;