refactoring

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

@@ -43,10 +43,16 @@ const StyledLastSessionBlock = styled.div`
     }
 
     .session-info-right-container {
+      width: 100%;
+      overflow: hidden;
       p {
         font-weight: 600;
         padding: 8px;
         font-size: 13px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
       }
     }
   }
@@ -66,17 +72,22 @@ const LastSessionBlock = (props) => {
           <Text>{t("Common:Active")}</Text>
           <Text>{t("Common:Platform")}</Text>
           <Text>{t("Common:Browser")}</Text>
-          <Text>{t("Common:IpAddress")}</Text>
-          <Text>{t("Common:Country")}</Text>
-          <Text>{t("Common:City")}</Text>
+          <Text>{t("Common:Location")}</Text>
         </div>
         <div className="session-info-right-container">
           <Text className={isOnline && "online"}>{status}</Text>
           <Text>{platform}</Text>
           <Text>{browser}</Text>
-          <Text>{ip}</Text>
-          <Text>{country}</Text>
-          <Text>{city}</Text>
+          <Text>
+            {(country || city) && (
+              <>
+                {country}
+                {country && city && ", "}
+                {`${city} `}
+              </>
+            )}
+            {ip}
+          </Text>
         </div>
       </Box>
     </StyledLastSessionBlock>

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

@@ -2,7 +2,6 @@ import { Avatar } from "@docspace/shared/components/avatar";
 import { Box } from "@docspace/shared/components/box";
 import { Text } from "@docspace/shared/components/text";
 import { ContextMenuButton } from "@docspace/shared/components/context-menu-button";
-import { Base } from "@docspace/shared/themes";
 import styled, { css } from "styled-components";
 
 import LogoutReactSvgUrl from "PUBLIC_DIR/images/logout.react.svg?url";
@@ -19,14 +18,6 @@ const StyledUserInfoBlock = styled.div`
     font-weight: 700;
   }
 
-  .icon-button_svg {
-    svg {
-      path {
-        fill: ${(props) => props.theme.profile.activeSessions.iconColor};
-      }
-    }
-  }
-
   span {
     font-size: 13px;
     color: ${(props) => props.theme.profile.activeSessions.tableCellColor};
@@ -54,7 +45,6 @@ const UserInfoBlock = (props) => {
     setSessionModalData,
   } = props;
 
-  const { isBase } = Base;
   const { avatar, role, displayName, userType } = data;
 
   const onClickLogout = () => {
@@ -103,7 +93,11 @@ const UserInfoBlock = (props) => {
         </Box>
       </Box>
 
-      <ContextMenuButton getData={contextOptions} />
+      <ContextMenuButton
+        id="user-session-info"
+        className="context-button"
+        getData={contextOptions}
+      />
     </StyledUserInfoBlock>
   );
 };

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

@@ -102,6 +102,6 @@ export default inject(({ setup, peopleStore, dialogsStore }) => {
   };
 })(
   withTranslation(["Settings", "Profile", "Common"])(
-    observer(UserSessionsPanel)
-  )
+    observer(UserSessionsPanel),
+  ),
 );

packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRow.js

@@ -1,22 +1,43 @@
 import { inject, observer } from "mobx-react";
 import { Row } from "@docspace/shared/components/row";
+import { IconButton } from "@docspace/shared/components/icon-button";
 import styled from "styled-components";
 
 import SessionsRowContent from "./SessionsRowContent";
+import RemoveSessionSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
 
 const StyledRow = styled(Row)`
   min-height: 56px;
 `;
 
 const SessionsRow = (props) => {
-  const { item, sectionWidth } = props;
+  const { item, sectionWidth, setLogoutDialogVisible, setPlatformModalData } =
+    props;
+
+  const onClickDisable = () => {
+    setLogoutDialogVisible(true);
+    setPlatformModalData({
+      id: item.id,
+      platform: item.platform,
+      browser: item.browser,
+    });
+  };
+
+  const contentElement = (
+    <IconButton
+      size={20}
+      iconName={RemoveSessionSvgUrl}
+      isClickable
+      onClick={onClickDisable}
+    />
+  );
 
   return (
     <StyledRow
       key={item.id}
       data={item}
       sectionWidth={sectionWidth}
-      contextButtonSpacerWidth="0"
+      contentElement={contentElement}
     >
       <SessionsRowContent {...props} />
     </StyledRow>
@@ -24,10 +45,12 @@ const SessionsRow = (props) => {
 };
 
 export default inject(({ setup }) => {
-  const { setSessionModalData, setLogoutDialogVisible } = setup;
+  const { setSessionModalData, setLogoutDialogVisible, setPlatformModalData } =
+    setup;
 
   return {
     setSessionModalData,
     setLogoutDialogVisible,
+    setPlatformModalData,
   };
 })(observer(SessionsRow));

packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRowContent.js

@@ -1,10 +1,7 @@
-import { observer, inject } from "mobx-react";
 import { Text } from "@docspace/shared/components/text";
 import { convertTime } from "@docspace/shared/utils/convertTime";
 import { RowContent } from "@docspace/shared/components/row-content";
-import { ReactSVG } from "react-svg";
 
-import RemoveSessionSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
 import styled from "styled-components";
 
 const StyledRowContent = styled(RowContent)`
@@ -21,30 +18,11 @@ const StyledRowContent = styled(RowContent)`
     color: ${(props) => props.theme.profile.activeSessions.tableCellColor};
     margin-left: 4px;
   }
-
-  .mainIcons {
-    height: 0px;
-    cursor: pointer;
-  }
 `;
 
-const SessionsRowContent = ({
-  item,
-  sectionWidth,
-  setPlatformModalData,
-  setLogoutDialogVisible,
-}) => {
+const SessionsRowContent = ({ item, sectionWidth }) => {
   const { id, platform, browser, country, city, date } = item;
 
-  const onClickDisable = () => {
-    setLogoutDialogVisible(true);
-    setPlatformModalData({
-      id: item.id,
-      platform: item.platform,
-      browser: item.browser,
-    });
-  };
-
   return (
     <StyledRowContent
       key={id}
@@ -55,19 +33,15 @@ const SessionsRowContent = ({
         {platform}, {browser}
         <span className="date">{convertTime(date)}</span>
       </Text>
-      <ReactSVG src={RemoveSessionSvgUrl} onClick={onClickDisable} />
-      <Text fontSize="12px" fontWeight="600">
-        {country}
-        {` ${city}`}
-      </Text>
+      <></>
+      {(country || city) && (
+        <Text fontSize="12px" fontWeight="600">
+          {country}
+          {country && city && ` ${city}`}
+        </Text>
+      )}
     </StyledRowContent>
   );
 };
 
-export default inject(({ setup }) => {
-  const { setPlatformModalData } = setup;
-
-  return {
-    setPlatformModalData,
-  };
-})(observer(SessionsRowContent));
+export default SessionsRowContent;