added dialogs for sessions

packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js

@@ -301,7 +301,12 @@ const SectionHeaderContent = (props) => {
     isPeopleHeaderIndeterminate,
     isPeopleHeaderVisible,
     isPeopleHeaderChecked,
-    selection,
+    setupSelection,
+    peopleSelection,
+    setDisableDialogVisible,
+    setLogoutDialogVisible,
+    setLogoutAllDialogVisible,
+    setSessionModalData,
     isVisible,
   } = props;
   const { header, isCategoryOrHeader, isNeedPaidIcon } = state;
@@ -340,6 +345,27 @@ const SectionHeaderContent = (props) => {
     </>
   );
 
+  const onClickSessions = () => {
+    console.log("view sessions");
+  };
+
+  const onClickLogout = () => {
+    if (isVisible) {
+      setLogoutAllDialogVisible(true);
+    } else {
+      setLogoutDialogVisible(true);
+      setSessionModalData({
+        id: peopleSelection[0].userId,
+        platform: peopleSelection[0].platform,
+        browser: peopleSelection[0].browser,
+      });
+    }
+  };
+
+  const onClickDisable = () => {
+    setDisableDialogVisible(true);
+  };
+
   const headerMenu = isSessionsPage
     ? [
         {
@@ -347,28 +373,28 @@ const SectionHeaderContent = (props) => {
           key: "Sessions",
           label: t("Common:Sessions"),
           disabled: isVisible,
-          onClick: () => console.log("Sessions"),
+          onClick: onClickSessions,
           iconUrl: HistoryFinalizedReactSvgUrl,
         },
         {
           id: "logout",
           key: "Logout",
           label: t("Common:Logout"),
-          onClick: () => console.log("Logout"),
+          onClick: onClickLogout,
           iconUrl: RemoveSvgUrl,
         },
         {
           id: "Disable",
           key: "Disable",
           label: t("Common:DisableUserButton"),
-          onClick: () => console.log("Disable"),
+          onClick: onClickDisable,
           iconUrl: TrashReactSvgUrl,
         },
       ]
     : [
         {
           label: t("Common:Delete"),
-          disabled: !selection || !selection.length > 0,
+          disabled: !setupSelection || !setupSelection.length > 0,
           onClick: removeAdmins,
           iconUrl: DeleteReactSvgUrl,
         },
@@ -452,7 +478,13 @@ export default inject(({ auth, setup, common, peopleStore }) => {
     isRestoreAndAutoBackupAvailable,
   } = currentQuotaStore;
   const { addUsers, removeAdmins } = setup.headerAction;
-  const { toggleSelector } = setup;
+  const {
+    toggleSelector,
+    setDisableDialogVisible,
+    setLogoutDialogVisible,
+    setLogoutAllDialogVisible,
+    setSessionModalData,
+  } = setup;
   const {
     selected,
     setSelected: setupSetSelected,
@@ -461,7 +493,7 @@ export default inject(({ auth, setup, common, peopleStore }) => {
     isHeaderVisible: isSetupHeaderVisible,
     deselectUser,
     selectAll,
-    selection,
+    selection: setupSelection,
   } = setup.selectionStore;
   const {
     isHeaderIndeterminate: isPeopleHeaderIndeterminate,
@@ -469,6 +501,7 @@ export default inject(({ auth, setup, common, peopleStore }) => {
     isHeaderVisible: isPeopleHeaderVisible,
     setSelected: peopleSetSelected,
     isVisible,
+    selection: peopleSelection,
   } = peopleStore.selectionStore;
 
   const { admins, selectorIsOpen } = setup.security.accessRight;
@@ -486,16 +519,21 @@ export default inject(({ auth, setup, common, peopleStore }) => {
     selectAll,
     toggleSelector,
     selectorIsOpen,
-    selection,
+    setupSelection,
     isLoadedSectionHeader,
     setIsLoadedSectionHeader,
     isBrandingAndCustomizationAvailable,
     isRestoreAndAutoBackupAvailable,
     peopleSetSelected,
+    peopleSelection,
     isPeopleHeaderIndeterminate,
     isPeopleHeaderChecked,
     isPeopleHeaderVisible,
     isVisible,
+    setDisableDialogVisible,
+    setLogoutDialogVisible,
+    setLogoutAllDialogVisible,
+    setSessionModalData,
   };
 })(
   withLoading(

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

@@ -1,3 +1,4 @@
+import { inject, observer } from "mobx-react";
 import { useCallback } from "react";
 import { Base } from "@docspace/shared/themes";
 import styled, { css } from "styled-components";
@@ -127,6 +128,7 @@ StyledTableRow.defaultProps = { theme: Base };
 const SessionsTableRow = (props) => {
   const {
     t,
+    id,
     item,
     element,
     checkedProps,
@@ -141,20 +143,42 @@ const SessionsTableRow = (props) => {
     country,
     city,
     ip,
+    setLogoutDialogVisible,
+    setLogoutAllDialogVisible,
+    setDisableDialogVisible,
+    setSessionModalData,
+    isVisible,
   } = props;
 
+  const onClickSessions = () => {
+    console.log("view sessions");
+  };
+
+  const onClickLogout = () => {
+    if (isVisible) {
+      setLogoutAllDialogVisible(true);
+    } else {
+      setLogoutDialogVisible(true);
+      setSessionModalData({ id, platform, browser });
+    }
+  };
+
+  const onClickDisable = () => {
+    setDisableDialogVisible(true);
+  };
+
   const contextOptions = [
     {
       key: "ViewSessions",
       label: t("Settings:ViewSessions"),
       icon: HistoryFinalizedReactSvgUrl,
-      onClick: () => console.log("view session"),
+      onClick: onClickSessions,
     },
     {
       key: "LogoutAllSessions",
       label: t("Settings:LogoutAllSessions"),
       icon: RemoveSvgUrl,
-      onClick: () => console.log("logout session"),
+      onClick: onClickLogout,
     },
     {
       key: "Separator",
@@ -164,7 +188,7 @@ const SessionsTableRow = (props) => {
       key: "Disable",
       label: t("Common:DisableUserButton"),
       icon: TrashReactSvgUrl,
-      onClick: () => console.log("disable"),
+      onClick: onClickDisable,
     },
   ];
 
@@ -265,4 +289,21 @@ const SessionsTableRow = (props) => {
   );
 };
 
-export default withContent(SessionsTableRow);
+export default inject(({ setup, peopleStore }) => {
+  const { isVisible } = peopleStore.selectionStore;
+
+  const {
+    setLogoutDialogVisible,
+    setLogoutAllDialogVisible,
+    setDisableDialogVisible,
+    setSessionModalData,
+  } = setup;
+
+  return {
+    setLogoutDialogVisible,
+    setLogoutAllDialogVisible,
+    setDisableDialogVisible,
+    setSessionModalData,
+    isVisible,
+  };
+})(withContent(observer(SessionsTableRow)));

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

@@ -163,8 +163,9 @@ const TableView = ({ t, sectionWidth, userId, sessionsData }) => {
           <SessionsTableRow
             t={t}
             key={item.userId}
-            item={item}
             userId={userId}
+            item={item}
+            id={item.userId}
             hideColumns={hideColumns}
             displayName={item.displayName}
             status={item.status}

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

@@ -1,7 +1,8 @@
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { mobile, tablet } from "@docspace/shared/utils";
+import { toastr } from "@docspace/shared/components/toast";
 import styled from "styled-components";
 
 import { MainContainer } from "../StyledSecurity";
@@ -12,6 +13,12 @@ import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
 import SessionsTable from "./SessionsTable";
 import mockData from "./mockData";
 
+import {
+  LogoutSessionDialog,
+  LogoutAllSessionDialog,
+  DisableUserDialog,
+} from "SRC_DIR/components/dialogs";
+
 const DownLoadWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -74,9 +81,17 @@ const Sessions = ({
   currentDeviceType,
   allSessions,
   setAllSessions,
-  isLoadingDownloadReport,
   clearSelection,
+  disableDialogVisible,
+  logoutDialogVisible,
+  logoutAllDialogVisible,
+  setDisableDialogVisible,
+  setLogoutDialogVisible,
+  setLogoutAllDialogVisible,
+  sessionModalData,
 }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
   useEffect(() => {
     setAllSessions(mockData);
     return () => {
@@ -90,6 +105,42 @@ const Sessions = ({
     currentDeviceType,
   });
 
+  const onClickRemoveAllSessions = () => {
+    try {
+      setIsLoading(true);
+      console.log("onClickRemoveAllSessions");
+    } catch (error) {
+      toastr.error(error);
+    } finally {
+      setIsLoading(false);
+      setLogoutAllDialogVisible(false);
+    }
+  };
+
+  const onClickRemoveAllExceptThis = () => {
+    try {
+      setIsLoading(true);
+      console.log("onClickRemoveAllExceptThis");
+    } catch (error) {
+      toastr.error(error);
+    } finally {
+      setIsLoading(false);
+      setLogoutAllDialogVisible(false);
+    }
+  };
+
+  const onClickRemoveSession = () => {
+    try {
+      setIsLoading(true);
+      console.log("onClickRemoveSession");
+    } catch (error) {
+      toastr.error(error);
+    } finally {
+      setIsLoading(false);
+      setLogoutDialogVisible(false);
+    }
+  };
+
   return (
     <MainContainer>
       <Text className="subtitle">{t("SessionsSubtitle")}</Text>
@@ -104,12 +155,42 @@ const Sessions = ({
           size="normal"
           minwidth="auto"
           onClick={() => console.log("get report")}
-          isLoading={isLoadingDownloadReport}
+          isLoading={false}
         />
         <span className="download-report_description">
           {t("DownloadReportDescription")}
         </span>
       </DownLoadWrapper>
+
+      {disableDialogVisible && (
+        <DisableUserDialog
+          t={t}
+          visible={disableDialogVisible}
+          onClose={() => setDisableDialogVisible(false)}
+        />
+      )}
+
+      {logoutDialogVisible && (
+        <LogoutSessionDialog
+          t={t}
+          visible={logoutDialogVisible}
+          data={sessionModalData}
+          isLoading={isLoading}
+          onClose={() => setLogoutDialogVisible(false)}
+          onRemoveSession={onClickRemoveSession}
+        />
+      )}
+
+      {logoutAllDialogVisible && (
+        <LogoutAllSessionDialog
+          t={t}
+          visible={logoutAllDialogVisible}
+          isLoading={isLoading}
+          onClose={() => setLogoutAllDialogVisible(false)}
+          onRemoveAllSessions={onClickRemoveAllSessions}
+          onRemoveAllExceptThis={onClickRemoveAllExceptThis}
+        />
+      )}
     </MainContainer>
   );
 };
@@ -117,20 +198,40 @@ const Sessions = ({
 export default inject(({ auth, setup, peopleStore }) => {
   const { culture, currentDeviceType } = auth.settingsStore;
   const { user } = auth.userStore;
-  const { viewAs, setViewAs, isLoadingDownloadReport } = setup;
   const locale = (user && user.cultureName) || culture || "en";
-
   const { clearSelection, allSessions, setAllSessions } =
     peopleStore.selectionStore;
 
+  const {
+    viewAs,
+    setViewAs,
+    disableDialogVisible,
+    logoutDialogVisible,
+    logoutAllDialogVisible,
+    setDisableDialogVisible,
+    setLogoutDialogVisible,
+    setLogoutAllDialogVisible,
+    sessionModalData,
+  } = setup;
+
   return {
     locale,
     currentDeviceType,
     viewAs,
     setViewAs,
-    isLoadingDownloadReport,
     allSessions,
     setAllSessions,
     clearSelection,
+    disableDialogVisible,
+    logoutDialogVisible,
+    logoutAllDialogVisible,
+    setDisableDialogVisible,
+    setLogoutDialogVisible,
+    setLogoutAllDialogVisible,
+    sessionModalData,
   };
-})(withTranslation(["Settings", "Common"])(observer(Sessions)));
+})(
+  withTranslation(["Settings", "Profile", "Common", "ChangeUserStatusDialog"])(
+    observer(Sessions)
+  )
+);

packages/client/src/store/SettingsSetupStore.js

@@ -18,8 +18,9 @@ class SettingsSetupStore {
   selectionStore = null;
   authStore = null;
   isInit = false;
-  logoutVisible = false;
-  logoutAllVisible = false;
+  logoutDialogVisible = false;
+  logoutAllDialogVisible = false;
+  disableDialogVisible = false;
   viewAs = isDesktop() ? "table" : "row";
 
   isLoadingDownloadReport = false;
@@ -80,6 +81,7 @@ class SettingsSetupStore {
   sessionsIsInit = false;
   sessions = [];
   currentSession = [];
+  sessionModalData = {};
 
   constructor() {
     this.selectionStore = new SelectionStore(this);
@@ -509,9 +511,17 @@ class SettingsSetupStore {
     return api.settings.removeActiveSession(id);
   };
 
-  setLogoutVisible = (visible) => (this.logoutVisible = visible);
+  setLogoutDialogVisible = (visible) => {
+    this.logoutDialogVisible = visible;
+  };
 
-  setLogoutAllVisible = (visible) => (this.logoutAllVisible = visible);
+  setLogoutAllDialogVisible = (visible) => {
+    this.logoutAllDialogVisible = visible;
+  };
+
+  setDisableDialogVisible = (visible) => {
+    this.disableDialogVisible = visible;
+  };
 
   getSessions = () => {
     if (this.sessionsIsInit) return;
@@ -525,6 +535,14 @@ class SettingsSetupStore {
   setSessions = (sessions) => {
     this.sessions = sessions;
   };
+
+  setSessionModalData = (data) => {
+    this.sessionModalData = {
+      id: data.id,
+      platform: data.platform,
+      browser: data.browser,
+    };
+  };
 }
 
 export default SettingsSetupStore;