From 08be20863007baffed3e754205546caaf6dc1110 Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Tue, 16 Jan 2024 13:07:55 +0500 Subject: [PATCH] added dialogs for sessions --- .../Layout/Section/Header/index.js | 54 ++++++-- .../TableView/SessionsTableRow.js | 49 +++++++- .../sessions/SessionsTable/TableView/index.js | 3 +- .../categories/security/sessions/index.js | 115 ++++++++++++++++-- .../client/src/store/SettingsSetupStore.js | 26 +++- 5 files changed, 223 insertions(+), 24 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js index d3ce6d3096..ff241effb4 100644 --- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js +++ b/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( diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js index de860e646f..8627116b59 100644 --- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js +++ b/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))); diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js index 83807ade4b..afc8c92c0b 100644 --- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js @@ -163,8 +163,9 @@ const TableView = ({ t, sectionWidth, userId, sessionsData }) => { { + 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 ( {t("SessionsSubtitle")} @@ -104,12 +155,42 @@ const Sessions = ({ size="normal" minwidth="auto" onClick={() => console.log("get report")} - isLoading={isLoadingDownloadReport} + isLoading={false} /> {t("DownloadReportDescription")} + + {disableDialogVisible && ( + setDisableDialogVisible(false)} + /> + )} + + {logoutDialogVisible && ( + setLogoutDialogVisible(false)} + onRemoveSession={onClickRemoveSession} + /> + )} + + {logoutAllDialogVisible && ( + setLogoutAllDialogVisible(false)} + onRemoveAllSessions={onClickRemoveAllSessions} + onRemoveAllExceptThis={onClickRemoveAllExceptThis} + /> + )} ); }; @@ -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) + ) +); diff --git a/packages/client/src/store/SettingsSetupStore.js b/packages/client/src/store/SettingsSetupStore.js index a6192500f2..5cb7d394ae 100644 --- a/packages/client/src/store/SettingsSetupStore.js +++ b/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;